251 lines
12 KiB
HTML
251 lines
12 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Settings - Email Alerts System{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<h2 class="mb-4">
|
||
|
|
<i class="fas fa-cog me-2"></i>
|
||
|
|
System Settings
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form method="POST" action="{{ url_for('update_settings') }}">
|
||
|
|
<div class="row">
|
||
|
|
<!-- Email Configuration -->
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title">
|
||
|
|
<i class="fas fa-envelope me-2"></i>
|
||
|
|
Email Configuration
|
||
|
|
</h5>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="email_address" class="form-label">Email Address to Monitor</label>
|
||
|
|
<input type="email" class="form-control" id="email_address" name="email_address"
|
||
|
|
value="{{ config.email_address }}" required>
|
||
|
|
<div class="form-text">The email address that will be checked for new messages.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="email_days_back" class="form-label">Email Range (Days)</label>
|
||
|
|
<input type="number" class="form-control" id="email_days_back" name="email_days_back"
|
||
|
|
value="{{ config.email_days_back }}" min="1" max="365" required>
|
||
|
|
<div class="form-text">How many days back to check for emails (1-365 days).</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="agency_domains" class="form-label">Agency Domains</label>
|
||
|
|
<textarea class="form-control" id="agency_domains" name="agency_domains" rows="3"
|
||
|
|
placeholder="projects@manaknightdigital.com, support@company.com">{{ config.agency_domains|join(', ') }}</textarea>
|
||
|
|
<div class="form-text">Comma-separated list of email domains that indicate agency responses.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="checkbox" id="auto_process" name="auto_process"
|
||
|
|
{% if config.auto_process %}checked{% endif %}>
|
||
|
|
<label class="form-check-label" for="auto_process">
|
||
|
|
Enable Automatic Email Processing
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="form-text">Automatically process emails at regular intervals.</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-3">
|
||
|
|
<label for="auto_process_interval" class="form-label">Processing Interval (minutes)</label>
|
||
|
|
<input type="number" class="form-control" id="auto_process_interval" name="auto_process_interval"
|
||
|
|
value="{{ config.auto_process_interval }}" min="5" max="1440">
|
||
|
|
<div class="form-text">How often to automatically process emails (5-1440 minutes).</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Time Frames Configuration -->
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title">
|
||
|
|
<i class="fas fa-clock me-2"></i>
|
||
|
|
Alert Time Frames
|
||
|
|
</h5>
|
||
|
|
<p class="text-muted">Configure when alerts should be sent based on response time.</p>
|
||
|
|
|
||
|
|
<div id="time-frames-container">
|
||
|
|
{% for frame in config.time_frames %}
|
||
|
|
<div class="time-frame-row mb-3 p-3 border rounded">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<label class="form-label">Name</label>
|
||
|
|
<input type="text" class="form-control" name="frame_name[]"
|
||
|
|
value="{{ frame.name }}" placeholder="e.g., 1-24 hours">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<label class="form-label">Hours</label>
|
||
|
|
<input type="number" class="form-control" name="frame_hours[]"
|
||
|
|
value="{{ frame.hours }}" min="1" max="720">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<label class="form-label">Alert Level</label>
|
||
|
|
<select class="form-select" name="frame_level[]">
|
||
|
|
<option value="1" {% if frame.alert_level == 1 %}selected{% endif %}>Level 1 (Normal)</option>
|
||
|
|
<option value="2" {% if frame.alert_level == 2 %}selected{% endif %}>Level 2 (Urgent)</option>
|
||
|
|
<option value="3" {% if frame.alert_level == 3 %}selected{% endif %}>Level 3 (Critical)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 d-flex align-items-end">
|
||
|
|
<button type="button" class="btn btn-outline-danger btn-sm" onclick="removeTimeFrame(this)">
|
||
|
|
<i class="fas fa-trash"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="addTimeFrame()">
|
||
|
|
<i class="fas fa-plus me-2"></i>
|
||
|
|
Add Time Frame
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Save Button -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="d-flex justify-content-between align-items-center">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">
|
||
|
|
<i class="fas fa-save me-2"></i>
|
||
|
|
Save Configuration
|
||
|
|
</h6>
|
||
|
|
<small class="text-muted">Click save to update all settings</small>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary">
|
||
|
|
<i class="fas fa-save me-2"></i>
|
||
|
|
Save Settings
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<!-- Configuration Preview -->
|
||
|
|
<div class="row mt-4">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h5 class="card-title">
|
||
|
|
<i class="fas fa-eye me-2"></i>
|
||
|
|
Current Configuration Preview
|
||
|
|
</h5>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h6>Email Settings</h6>
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li><strong>Email:</strong> <span id="preview-email">{{ config.email_address }}</span></li>
|
||
|
|
<li><strong>Range:</strong> <span id="preview-range">{{ config.email_days_back }}</span> days</li>
|
||
|
|
<li><strong>Domains:</strong> <span id="preview-domains">{{ config.agency_domains|join(', ') }}</span></li>
|
||
|
|
<li><strong>Auto Processing:</strong> <span id="preview-auto">{{ 'Enabled' if config.auto_process else 'Disabled' }}</span></li>
|
||
|
|
<li><strong>Interval:</strong> <span id="preview-interval">{{ config.auto_process_interval }}</span> minutes</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h6>Time Frames</h6>
|
||
|
|
<div id="preview-frames">
|
||
|
|
{% for frame in config.time_frames %}
|
||
|
|
<div class="mb-1">
|
||
|
|
<span class="badge bg-primary me-2">{{ frame.name }}</span>
|
||
|
|
<small>{{ frame.hours }} hours (Level {{ frame.alert_level }})</small>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
<script>
|
||
|
|
function addTimeFrame() {
|
||
|
|
const container = document.getElementById('time-frames-container');
|
||
|
|
const newFrame = document.createElement('div');
|
||
|
|
newFrame.className = 'time-frame-row mb-3 p-3 border rounded';
|
||
|
|
newFrame.innerHTML = `
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
<label class="form-label">Name</label>
|
||
|
|
<input type="text" class="form-control" name="frame_name[]"
|
||
|
|
placeholder="e.g., 1-24 hours">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<label class="form-label">Hours</label>
|
||
|
|
<input type="number" class="form-control" name="frame_hours[]"
|
||
|
|
value="24" min="1" max="720">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<label class="form-label">Alert Level</label>
|
||
|
|
<select class="form-select" name="frame_level[]">
|
||
|
|
<option value="1">Level 1 (Normal)</option>
|
||
|
|
<option value="2">Level 2 (Urgent)</option>
|
||
|
|
<option value="3">Level 3 (Critical)</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 d-flex align-items-end">
|
||
|
|
<button type="button" class="btn btn-outline-danger btn-sm" onclick="removeTimeFrame(this)">
|
||
|
|
<i class="fas fa-trash"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
container.appendChild(newFrame);
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeTimeFrame(button) {
|
||
|
|
const frameRow = button.closest('.time-frame-row');
|
||
|
|
frameRow.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update preview when form fields change
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const emailInput = document.getElementById('email_address');
|
||
|
|
const rangeInput = document.getElementById('email_days_back');
|
||
|
|
const domainsInput = document.getElementById('agency_domains');
|
||
|
|
const autoProcessInput = document.getElementById('auto_process');
|
||
|
|
const intervalInput = document.getElementById('auto_process_interval');
|
||
|
|
|
||
|
|
emailInput.addEventListener('input', function() {
|
||
|
|
document.getElementById('preview-email').textContent = this.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
rangeInput.addEventListener('input', function() {
|
||
|
|
document.getElementById('preview-range').textContent = this.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
domainsInput.addEventListener('input', function() {
|
||
|
|
document.getElementById('preview-domains').textContent = this.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
autoProcessInput.addEventListener('change', function() {
|
||
|
|
document.getElementById('preview-auto').textContent = this.checked ? 'Enabled' : 'Disabled';
|
||
|
|
});
|
||
|
|
|
||
|
|
intervalInput.addEventListener('input', function() {
|
||
|
|
document.getElementById('preview-interval').textContent = this.value;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|