redisign and bug fix

frontend/public/static/script.js

@@ -1,88 +1,35 @@
-const TZ = 'Europe/Moscow';
+const MOSCOW_TIMEZONE = 'Europe/Moscow';
+const WEEKDAYS = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
+const MONTHS = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
 
-function formatDate(dateStr) {
-    const date = new Date(dateStr + 'T00:00:00');
-    // getDay() возвращает 0=воскресенье, 1=понедельник, ..., 6=суббота
-    // Конвертируем в формат где 0=понедельник
-    const jsDay = date.getDay();
-    const weekdayIndex = jsDay === 0 ? 6 : jsDay - 1; // 0=пн, 6=вс
-    const weekdays = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
-    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 
-                    'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
-    
-    const weekday = weekdays[weekdayIndex];
-    const day = date.getDate();
-    const month = months[date.getMonth()];
-    
-    return `${weekday}, ${day} ${month}`;
-}
-
-function getTodayInMoscow() {
-    // Получаем текущую дату в таймзоне Moscow
-    const now = new Date();
+function getMoscowDateString() {
     const formatter = new Intl.DateTimeFormat('en-CA', {
-        timeZone: 'Europe/Moscow',
+        timeZone: MOSCOW_TIMEZONE,
         year: 'numeric',
         month: '2-digit',
         day: '2-digit'
     });
-    return formatter.format(now);
+    return formatter.format(new Date());
 }
 
-function getTomorrowInLondon() {
-    const today = getTodayInMoscow();
-    const date = new Date(today);
-    date.setDate(date.getDate() + 1);
-    return date.toISOString().split('T')[0];
+function parseISODate(value) {
+    const [year, month, day] = value.split('-').map(Number);
+    return new Date(year, month - 1, day);
 }
 
-function renderDay(container, titleEl, dateStr, items, isToday = false, isTomorrow = false) {
-    let titleText = formatDate(dateStr);
-    if (isToday) {
-        // Преобразуем "Вторник, 30 декабря" в "Сегодня вторник, 30 декабря"
-        const parts = titleText.split(', ');
-        if (parts.length === 2) {
-            titleText = `Сегодня ${parts[0].toLowerCase()}, ${parts[1]}`;
-        }
-    } else if (isTomorrow) {
-        // Преобразуем "Среда, 31 декабря" в "Завтра среда, 31 декабря"
-        const parts = titleText.split(', ');
-        if (parts.length === 2) {
-            titleText = `Завтра ${parts[0].toLowerCase()}, ${parts[1]}`;
-        }
-    }
-    titleEl.textContent = titleText;
-    
-    const tasks = items.filter(item => item.kind === 'task');
-    const events = items.filter(item => item.kind === 'event');
-    
-    let html = '';
-    
-    if (tasks.length > 0) {
-        html += '<div class="tasks-list">';
-        tasks.forEach(task => {
-            html += `<div class="task-item">• ${task.title}</div>`;
-        });
-        html += '</div>';
-    }
-    
-    if (events.length > 0) {
-        html += '<div class="events-list">';
-        events.sort((a, b) => a.start_time.localeCompare(b.start_time)).forEach(event => {
-            const endTime = calculateEndTime(event.start_time, event.duration_min);
-            html += `<div class="event-item">
-                <span class="event-time">${event.start_time}-${endTime}</span>
-                <span class="event-title">${event.title}</span>
-            </div>`;
-        });
-        html += '</div>';
-    }
-    
-    if (tasks.length === 0 && events.length === 0) {
-        html = '<div class="empty-message">На этот день расписания нет.</div>';
-    }
-    
-    container.innerHTML = html;
+function formatISODate(date) {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
+function addDays(dateStr, days) {
+    const date = parseISODate(dateStr);
+    date.setDate(date.getDate() + days);
+    return formatISODate(date);
+}
+
+function formatDate(dateStr) {
+    const date = parseISODate(dateStr);
+    return `${WEEKDAYS[(date.getDay() + 6) % 7]}, ${date.getDate()} ${MONTHS[date.getMonth()]}`;
 }
 
 function calculateEndTime(startTime, durationMin) {
@@ -93,49 +40,79 @@ function calculateEndTime(startTime, durationMin) {
     return `${String(endHour).padStart(2, '0')}:${String(endMinute).padStart(2, '0')}`;
 }
 
-async function loadSchedule() {
-    const today = getTodayInMoscow();
-    const tomorrow = getTomorrowInLondon();
-    
-    console.log('Loading schedule from', today, 'to', tomorrow);
-    
-    try {
-        const response = await fetch(`/api/schedule?from_date=${today}&to_date=${tomorrow}`);
-        const data = await response.json();
-        
-        console.log('Received items:', data.items);
-        
-        const todayItems = data.items.filter(item => item.date === today);
-        const tomorrowItems = data.items.filter(item => item.date === tomorrow);
-        
-        console.log('Today items:', todayItems);
-        console.log('Tomorrow items:', tomorrowItems);
-        
-        renderDay(
-            document.getElementById('today-content'),
-            document.getElementById('today-title'),
-            today,
-            todayItems,
-            true,  // isToday
-            false
-        );
-        
-        renderDay(
-            document.getElementById('tomorrow-content'),
-            document.getElementById('tomorrow-title'),
-            tomorrow,
-            tomorrowItems,
-            false,
-            true   // isTomorrow
-        );
-    } catch (error) {
-        console.error('Error loading schedule:', error);
+function renderDay(container, titleEl, dateStr, items, options = {}) {
+    let titleText = formatDate(dateStr);
+    if (options.today) {
+        titleText = `Сегодня, ${titleText.toLowerCase()}`;
+    } else if (options.tomorrow) {
+        titleText = `Завтра, ${titleText.toLowerCase()}`;
     }
+    titleEl.textContent = titleText;
+
+    const tasks = items.filter((item) => item.kind === 'task');
+    const events = items
+        .filter((item) => item.kind === 'event')
+        .sort((a, b) => a.start_time.localeCompare(b.start_time));
+
+    if (!tasks.length && !events.length) {
+        container.innerHTML = '<div class="empty-message">На этот день расписания нет.</div>';
+        return;
+    }
+
+    const tasksHtml = tasks.length ? `
+        <div class="tasks-list">
+            ${tasks.map((task) => `<div class="task-item">${task.repeat_weekly ? 'Каждую неделю: ' : ''}${escapeHtml(task.title)}</div>`).join('')}
+        </div>
+    ` : '';
+
+    const eventsHtml = events.length ? `
+        <div class="events-list">
+            ${events.map((event) => `
+                <div class="event-item">
+                    <span class="event-time">${event.start_time}-${calculateEndTime(event.start_time, event.duration_min)}</span>
+                    <span class="event-title">${escapeHtml(event.title)}</span>
+                </div>
+            `).join('')}
+        </div>
+    ` : '';
+
+    container.innerHTML = `${tasksHtml}${eventsHtml}`;
 }
 
-// Загружаем расписание при загрузке страницы
-loadSchedule();
+function escapeHtml(value) {
+    return String(value)
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+}
 
-// Автообновление каждые 5 минут
-setInterval(loadSchedule, 5 * 60 * 1000);
+async function loadSchedule() {
+    const today = getMoscowDateString();
+    const tomorrow = addDays(today, 1);
 
+    const response = await fetch(`/api/schedule?from_date=${today}&to_date=${tomorrow}`);
+    if (!response.ok) {
+        throw new Error('Не удалось загрузить расписание');
+    }
+
+    const data = await response.json();
+    renderDay(
+        document.getElementById('today-content'),
+        document.getElementById('today-title'),
+        today,
+        data.items.filter((item) => item.date === today),
+        { today: true }
+    );
+    renderDay(
+        document.getElementById('tomorrow-content'),
+        document.getElementById('tomorrow-title'),
+        tomorrow,
+        data.items.filter((item) => item.date === tomorrow),
+        { tomorrow: true }
+    );
+}
+
+loadSchedule().catch((error) => console.error(error));
+setInterval(() => loadSchedule().catch((error) => console.error(error)), 5 * 60 * 1000);