Enhance Telegram bot with database integration and API features

- Added SQLite database support with Alembic for migrations. - Implemented FastAPI for HTTP API to manage duties. - Updated configuration to include database URL and HTTP port. - Created entrypoint script for Docker to handle migrations and permissions. - Expanded command handlers to register users and display duties. - Developed a web application for calendar display of duties. - Included necessary Pydantic schemas and SQLAlchemy models for data handling. - Updated requirements.txt to include new dependencies for FastAPI and SQLAlchemy.
2026-02-17 12:51:01 +03:00
parent d90d3d1177
commit d60a4fdf3f
23 changed files with 837 additions and 16 deletions
--- a/webapp/app.js
+++ b/webapp/app.js
@@ -0,0 +1,145 @@
+(function () {
+  const MONTHS = [
+    "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
+    "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
+  ];
+
+  let current = new Date();
+  const calendarEl = document.getElementById("calendar");
+  const monthTitleEl = document.getElementById("monthTitle");
+  const dutyListEl = document.getElementById("dutyList");
+  const loadingEl = document.getElementById("loading");
+  const errorEl = document.getElementById("error");
+
+  function isoDate(d) {
+    return d.toISOString().slice(0, 10);
+  }
+
+  function firstDayOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+  }
+
+  function lastDayOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth() + 1, 0);
+  }
+
+  function getMonday(d) {
+    const day = d.getDay();
+    const diff = d.getDate() - day + (day === 0 ? -6 : 1);
+    return new Date(d.getFullYear(), d.getMonth(), diff);
+  }
+
+  async function fetchDuties(from, to) {
+    const base = window.location.origin;
+    const url = base + "/api/duties?from=" + encodeURIComponent(from) + "&to=" + encodeURIComponent(to);
+    const res = await fetch(url);
+    if (!res.ok) throw new Error("Ошибка загрузки");
+    return res.json();
+  }
+
+  function renderCalendar(year, month, dutiesByDate) {
+    const first = firstDayOfMonth(new Date(year, month, 1));
+    const last = lastDayOfMonth(new Date(year, month, 1));
+    const start = getMonday(first);
+    const today = isoDate(new Date());
+
+    calendarEl.innerHTML = "";
+    let d = new Date(start);
+    const cells = 42;
+    for (let i = 0; i < cells; i++) {
+      const key = isoDate(d);
+      const isOther = d.getMonth() !== month;
+      const dayDuties = dutiesByDate[key] || [];
+      const isToday = key === today;
+
+      const cell = document.createElement("div");
+      cell.className = "day" + (isOther ? " other-month" : "") + (isToday ? " today" : "") + (dayDuties.length ? " has-duty" : "");
+      cell.innerHTML =
+        "<span class=\"num\">" + d.getDate() + "</span>" +
+        (dayDuties.length ? "<span class=\"day-duties\">" + dayDuties.map(function (x) { return x.full_name; }).join(", ") + "</span>" : "");
+      calendarEl.appendChild(cell);
+      d.setDate(d.getDate() + 1);
+    }
+
+    monthTitleEl.textContent = MONTHS[month] + " " + year;
+  }
+
+  function renderDutyList(duties) {
+    if (duties.length === 0) {
+      dutyListEl.innerHTML = "<p class=\"muted\">В этом месяце дежурств нет.</p>";
+      return;
+    }
+    const grouped = {};
+    duties.forEach(function (d) {
+      const date = d.start_at.slice(0, 10);
+      if (!grouped[date]) grouped[date] = [];
+      grouped[date].push(d);
+    });
+    const dates = Object.keys(grouped).sort();
+    let html = "";
+    dates.forEach(function (date) {
+      const list = grouped[date];
+      html += "<h2>" + date + "</h2>";
+      list.forEach(function (d) {
+        const start = d.start_at.slice(11, 16);
+        const end = d.end_at.slice(11, 16);
+        html += "<div class=\"duty-item\"><span class=\"name\">" + escapeHtml(d.full_name) + "</span><div class=\"time\">" + start + " – " + end + "</div></div>";
+      });
+    });
+    dutyListEl.innerHTML = html;
+  }
+
+  function escapeHtml(s) {
+    const div = document.createElement("div");
+    div.textContent = s;
+    return div.innerHTML;
+  }
+
+  function dutiesByDate(duties) {
+    const byDate = {};
+    duties.forEach(function (d) {
+      const start = new Date(d.start_at);
+      const end = new Date(d.end_at);
+      for (let t = new Date(start); t <= end; t.setDate(t.getDate() + 1)) {
+        const key = isoDate(t);
+        if (!byDate[key]) byDate[key] = [];
+        byDate[key].push(d);
+      }
+    });
+    return byDate;
+  }
+
+  function showError(msg) {
+    errorEl.textContent = msg;
+    errorEl.hidden = false;
+    loadingEl.classList.add("hidden");
+  }
+
+  async function loadMonth() {
+    loadingEl.classList.remove("hidden");
+    errorEl.hidden = true;
+    const from = isoDate(firstDayOfMonth(current));
+    const to = isoDate(lastDayOfMonth(current));
+    try {
+      const duties = await fetchDuties(from, to);
+      const byDate = dutiesByDate(duties);
+      renderCalendar(current.getFullYear(), current.getMonth(), byDate);
+      renderDutyList(duties);
+    } catch (e) {
+      showError(e.message || "Не удалось загрузить данные.");
+      return;
+    }
+    loadingEl.classList.add("hidden");
+  }
+
+  document.getElementById("prevMonth").addEventListener("click", function () {
+    current.setMonth(current.getMonth() - 1);
+    loadMonth();
+  });
+  document.getElementById("nextMonth").addEventListener("click", function () {
+    current.setMonth(current.getMonth() + 1);
+    loadMonth();
+  });
+
+  loadMonth();
+})();
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <title>Календарь дежурств</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <button type="button" class="nav" id="prevMonth" aria-label="Предыдущий месяц">‹</button>
+      <h1 class="title" id="monthTitle"></h1>
+      <button type="button" class="nav" id="nextMonth" aria-label="Следующий месяц">›</button>
+    </header>
+    <div class="weekdays">
+      <span>Пн</span><span>Вт</span><span>Ср</span><span>Чт</span><span>Пт</span><span>Сб</span><span>Вс</span>
+    </div>
+    <div class="calendar" id="calendar"></div>
+    <div class="duty-list" id="dutyList"></div>
+    <div class="loading" id="loading">Загрузка…</div>
+    <div class="error" id="error" hidden></div>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>
--- a/webapp/style.css
+++ b/webapp/style.css
@@ -0,0 +1,152 @@
+:root {
+  --bg: #1a1b26;
+  --surface: #24283b;
+  --text: #c0caf5;
+  --muted: #565f89;
+  --accent: #7aa2f7;
+  --duty: #9ece6a;
+  --today: #bb9af7;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.container {
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 12px;
+  padding-bottom: env(safe-area-inset-bottom, 12px);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.nav {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  background: var(--surface);
+  color: var(--accent);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.nav:active {
+  opacity: 0.8;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 6px;
+  font-size: 0.75rem;
+  color: var(--muted);
+  text-align: center;
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.day {
+  aspect-ratio: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 4px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  background: var(--surface);
+}
+
+.day.other-month {
+  opacity: 0.4;
+}
+
+.day.today {
+  background: var(--today);
+  color: var(--bg);
+}
+
+.day.has-duty .num {
+  font-weight: 700;
+}
+
+.day-duties {
+  font-size: 0.6rem;
+  color: var(--duty);
+  margin-top: 2px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.duty-list {
+  font-size: 0.9rem;
+}
+
+.duty-list h2 {
+  font-size: 0.85rem;
+  color: var(--muted);
+  margin: 0 0 8px 0;
+}
+
+.duty-item {
+  padding: 8px 10px;
+  margin-bottom: 6px;
+  border-radius: 8px;
+  background: var(--surface);
+  border-left: 3px solid var(--duty);
+}
+
+.duty-item .name {
+  font-weight: 600;
+}
+
+.duty-item .time {
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.loading, .error {
+  text-align: center;
+  padding: 12px;
+  color: var(--muted);
+}
+
+.error {
+  color: #f7768e;
+}
+
+.error[hidden], .loading.hidden {
+  display: none !important;
+}