ruslan/Zammad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): modern theme, dark/light toggle, polished templates

Browse Source
This commit is contained in:
RGalyaviev
2025-09-03 11:06:14 +03:00
commit 71c87979c0
16 changed files with 753 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
templates/base.html Normal file
View File

@@ -0,0 +1,70 @@
<!doctype html>
<html lang="ru" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0b1020">
<title>Zammad Reports by Ruslan</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="/">Zammad Reports</a>
<div class="d-flex align-items-center gap-2 ms-auto">
<button id="themeToggle" class="btn btn-sm theme-toggle" type="button" aria-label="Toggle theme">
<span class="icon">🌙</span>
<span class="label">Тёмная</span>
</button>
</div>
</div>
</nav>
<main class="container my-4 fade-in">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<script>
// Theme persistence
const key = 'zammad.theme';
const root = document.documentElement;
const btn = () => document.getElementById('themeToggle');
const label = () => btn()?.querySelector('.label');
const icon = () => btn()?.querySelector('.icon');
function applyTheme(t) {
root.setAttribute('data-theme', t);
if (label()) label().textContent = t === 'dark' ? 'Тёмная' : 'Светлая';
if (icon()) icon().textContent = t === 'dark' ? '🌙' : '☀️';
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute('content', t === 'dark' ? '#0b1020' : '#f6f7fb');
}
(function initTheme(){
const saved = localStorage.getItem(key);
const preferred = saved || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
applyTheme(preferred);
window.addEventListener('DOMContentLoaded', () => {
const toggle = btn();
if (toggle) toggle.addEventListener('click', () => {
const current = root.getAttribute('data-theme') || 'dark';
const next = current === 'dark' ? 'light' : 'dark';
localStorage.setItem(key, next);
applyTheme(next);
});
});
})();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% block scripts %}{% endblock %}
</body>
</html>

46
templates/index.html Normal file
View File

@@ -0,0 +1,46 @@
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-lg-8">
<div class="card shadow-sm">
<div class="card-header">Параметры отчёта</div>
<div class="card-body">
<form method="get" action="{{ url_for('web.report') }}" class="row gy-3">
<div class="col-md-4">
<label class="form-label">Дата с</label>
<input type="date" name="date_from" class="form-control" value="{{ default_date_from }}" required>
</div>
<div class="col-md-4">
<label class="form-label">Дата по</label>
<input type="date" name="date_to" class="form-control" value="{{ default_date_to }}" required>
</div>
<div class="col-md-4">
<label class="form-label">Группировка</label>
<select class="form-select" name="group_by">
<option value="overview">Общая сводка</option>
<option value="by_agent">По агентам</option>
<option value="by_group">По группам</option>
<option value="by_state">По статусу</option>
<option value="open_closed">Открытые vs Закрытые</option>
<option value="by_priority">По приоритету</option>
<option value="by_day">По дням (таймлайн)</option>
</select>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Построить отчёт</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card shadow-sm h-100">
<div class="card-header">Подсказка</div>
<div class="card-body">
<p class="text-muted mb-2">Выберите диапазон дат и тип группировки, затем нажмите «Построить отчёт».</p>
<p class="text-muted m-0">Переключайте тёмную/светлую тему в шапке справа.</p>
</div>
</div>
</div>
</div>
{% endblock %}

107
templates/report.html Normal file
View File

@@ -0,0 +1,107 @@
{% extends 'base.html' %}
{% block content %}
<div class="row mb-3">
<div class="col-12 d-flex justify-content-between align-items-center">
<h4 class="m-0">{{ title }}</h4>
<a class="btn btn-outline-secondary btn-sm" href="{{ url_for('web.index') }}">На главную</a>
</div>
</div>
<div class="row g-3">
<div class="col-lg-7">
<div class="card shadow-sm">
<div class="card-body">
<div class="chart-wrap">
<canvas id="chart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="card shadow-sm">
<div class="card-header">Сводка</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between"><span>Всего тикетов</span><strong>{{ overview.total }}</strong></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row mt-4 g-3">
<div class="col-lg-6">
<div class="card shadow-sm">
<div class="card-header">По агентам</div>
<div class="card-body p-0">
<table class="table table-sm table-hover align-middle m-0">
<thead class="table-light"><tr><th>Агент</th><th class="text-end">Количество</th></tr></thead>
<tbody>
{% for name, count in by_agent %}
<tr><td>{{ name }}</td><td class="text-end">{{ count }}</td></tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card shadow-sm">
<div class="card-header">По группам</div>
<div class="card-body p-0">
<table class="table table-sm table-hover align-middle m-0">
<thead class="table-light"><tr><th>Группа</th><th class="text-end">Количество</th></tr></thead>
<tbody>
{% for name, count in by_group %}
<tr><td>{{ name }}</td><td class="text-end">{{ count }}</td></tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
const labels = {{ chart_labels | tojson }};
const data = {{ chart_values | tojson }};
const ctx = document.getElementById('chart');
const css = getComputedStyle(document.documentElement);
const primary = css.getPropertyValue('--brand').trim() || '#0d6efd';
const primaryFill = 'rgba(79, 140, 255, .25)';
const isDate = (v) => /^\d{4}-\d{2}-\d{2}$/.test(v);
const mode = labels.every(isDate) ? 'line' : 'bar';
const chart = new Chart(ctx, {
type: mode,
data: {
labels,
datasets: [{
label: 'Значения',
data,
borderColor: primary,
backgroundColor: mode === 'bar' ? primaryFill : primaryFill,
borderWidth: 2,
tension: 0.25,
fill: mode === 'line',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: { beginAtZero: true, ticks: { precision: 0 } }
},
plugins: {
legend: { display: false }
}
}
});
</script>
{% endblock %}