vrubelroman/scheduleSon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add event colors (Catppuccin Mocha) and read-only week view for users
All checks were successful
CI/CD Pipeline / build-and-deploy (push) Successful in 20s
Details

Browse source 
Admins can now pick a color per event from a Catppuccin Mocha palette;
existing events default to blue. Colors flow through to both the admin
timeline and the new "Неделя" tab in the user view, which reuses the
admin's weekly grid in a read-only mode. Also reworks event blocks to
show a single-line "start–end title" so short events no longer overflow,
tidies the admin toolbar, and expands mobile responsiveness across both
frontends.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
vrubel 2026-07-12 18:03:21 +00:00
parent fc66954c03
commit c40a6569b4
10 changed files with 685 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/public/index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Расписание</title>
<link rel="stylesheet" href="/static/style.css?v=3">
<link rel="stylesheet" href="/static/style.css?v=5">
</head>
<body>
<main class="board">
@ -14,7 +14,12 @@
<p class="board-copy">Задачи отображаются сверху, занятия ниже по времени. Данные обновляются автоматически каждые пять минут.</p>
</section>
<section class="days-grid">
<nav class="view-tabs">
<button id="tab-daily" class="view-tab is-active">Сегодня / Завтра</button>
<button id="tab-week" class="view-tab">Неделя</button>
</nav>
<section id="view-daily" class="days-grid">
<article id="today-section" class="day-panel">
<div class="panel-head">
<h2 class="day-title" id="today-title">Сегодня</h2>
@ -31,6 +36,17 @@
</section>
</main>
<script src="/static/script.js?v=3"></script>
<section id="view-week" class="week-view" hidden>
<div class="week-toolbar">
<button id="week-prev" class="nav-btn">← Назад</button>
<div id="week-range" class="range-title"></div>
<button id="week-next" class="nav-btn">Вперед →</button>
</div>
<div class="week-scroll">
<div id="week-grid" class="week-grid"></div>
</div>
</section>
<script src="/static/script.js?v=5"></script>
</body>
</html>

143
frontend/public/static/script.js
View file

@ -1,6 +1,34 @@
const MOSCOW_TIMEZONE = 'Europe/Moscow';
const WEEKDAYS = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
const MONTHS = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
const SLOT_MINUTES = 15;
const START_HOUR = 8;
const END_HOUR = 20;
const PIXELS_PER_MINUTE = 0.8;
const CATPPUCCIN_MOCHA = {
rosewater: '#f5e0dc',
flamingo: '#f2cdcd',
pink: '#f5c2e7',
mauve: '#cba6f7',
red: '#f38ba8',
maroon: '#eba0ac',
peach: '#fab387',
yellow: '#f9e2af',
green: '#a6e3a1',
teal: '#94e2d5',
sky: '#89dceb',
sapphire: '#74c7ec',
blue: '#89b4fa',
lavender: '#b4befe'
};
const DEFAULT_EVENT_COLOR = 'blue';
function eventColorHex(colorKey) {
return CATPPUCCIN_MOCHA[colorKey] || CATPPUCCIN_MOCHA[DEFAULT_EVENT_COLOR];
}
let currentWeekStart = null;
function getMoscowDateString() {
const formatter = new Intl.DateTimeFormat('en-CA', {
@ -27,6 +55,19 @@ function addDays(dateStr, days) {
return formatISODate(date);
}
function startOfWeek(dateStr = null) {
const base = parseISODate(dateStr || getMoscowDateString());
const jsDay = base.getDay();
const diff = jsDay === 0 ? -6 : 1 - jsDay;
base.setDate(base.getDate() + diff);
return formatISODate(base);
}
function timeToMinutes(time) {
const [hour, minute] = time.split(':').map(Number);
return hour * 60 + minute;
}
function formatDate(dateStr) {
const date = parseISODate(dateStr);
return `${WEEKDAYS[(date.getDay() + 6) % 7]}, ${date.getDate()} ${MONTHS[date.getMonth()]}`;
@ -68,7 +109,7 @@ function renderDay(container, titleEl, dateStr, items, options = {}) {
const eventsHtml = events.length ? `
<div class="events-list">
${events.map((event) => `
<div class="event-item">
<div class="event-item" style="--event-color:${eventColorHex(event.color)};">
<span class="event-time">${event.start_time}-${calculateEndTime(event.start_time, event.duration_min)}</span>
<span class="event-title">${escapeHtml(event.title)}</span>
</div>
@ -114,5 +155,105 @@ async function loadSchedule() {
);
}
function getWeekDates() {
return Array.from({ length: 7 }, (_, index) => addDays(currentWeekStart, index));
}
function renderTimeline(dateStr, events) {
const hours = Array.from({ length: END_HOUR - START_HOUR + 1 }, (_, index) => START_HOUR + index);
return `
<div class="timeline">
${hours.map((hour, index) => `
<div class="timeline-hour" style="top:${index * 60 * PIXELS_PER_MINUTE}px;">
<span class="timeline-hour-label">${String(hour).padStart(2, '0')}:00</span>
</div>
`).join('')}
${events.map((event) => renderEventBlock(event)).join('')}
</div>
`;
}
function renderEventBlock(event) {
const startMinutes = timeToMinutes(event.start_time) - START_HOUR * 60;
const top = Math.max(0, startMinutes * PIXELS_PER_MINUTE);
const height = Math.max(42, event.duration_min * PIXELS_PER_MINUTE);
const endTime = calculateEndTime(event.start_time, event.duration_min);
return `
<article class="event-block ${event.repeat_weekly ? 'recurring' : ''}" style="top:${top}px;height:${height}px;--event-color:${eventColorHex(event.color)};">
<div class="event-line">
<span class="event-time">${event.start_time}–${endTime}</span>
<span class="event-title">${escapeHtml(event.title)}</span>
</div>
</article>
`;
}
async function loadWeekSchedule() {
if (!currentWeekStart) {
currentWeekStart = startOfWeek();
}
const dates = getWeekDates();
const fromDate = dates[0];
const toDate = dates[dates.length - 1];
const today = getMoscowDateString();
const response = await fetch(`/api/schedule?from_date=${fromDate}&to_date=${toDate}`);
if (!response.ok) {
throw new Error('Не удалось загрузить расписание');
}
const data = await response.json();
const grid = document.getElementById('week-grid');
grid.innerHTML = dates.map((dateStr) => {
const dayItems = data.items.filter((item) => item.date === dateStr);
const tasks = dayItems.filter((item) => item.kind === 'task');
const events = dayItems
.filter((item) => item.kind === 'event')
.sort((a, b) => a.start_time.localeCompare(b.start_time));
return `
<section class="week-day-card ${dateStr === today ? 'is-today' : ''}">
<div class="week-day-header">${formatDate(dateStr)}</div>
<div class="week-task-list">
${tasks.map((task) => `<div class="week-task-item">${escapeHtml(task.title)}</div>`).join('')}
</div>
${renderTimeline(dateStr, events)}
</section>
`;
}).join('');
document.getElementById('week-range').textContent = `${formatDate(dates[0])} - ${formatDate(dates[dates.length - 1])}`;
}
function setActiveTab(tab) {
const isWeek = tab === 'week';
document.getElementById('view-daily').hidden = isWeek;
document.getElementById('view-week').hidden = !isWeek;
document.getElementById('tab-daily').classList.toggle('is-active', !isWeek);
document.getElementById('tab-week').classList.toggle('is-active', isWeek);
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('tab-daily').addEventListener('click', () => setActiveTab('daily'));
document.getElementById('tab-week').addEventListener('click', async () => {
setActiveTab('week');
try {
await loadWeekSchedule();
} catch (error) {
console.error(error);
}
});
document.getElementById('week-prev').addEventListener('click', async () => {
currentWeekStart = addDays(currentWeekStart, -7);
await loadWeekSchedule().catch((error) => console.error(error));
});
document.getElementById('week-next').addEventListener('click', async () => {
currentWeekStart = addDays(currentWeekStart, 7);
await loadWeekSchedule().catch((error) => console.error(error));
});
});
loadSchedule().catch((error) => console.error(error));
setInterval(() => loadSchedule().catch((error) => console.error(error)), 5 * 60 * 1000);

281
frontend/public/static/style.css
View file

@ -65,12 +65,45 @@ body {
line-height: 1.4;
}
.view-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.view-tab {
border: 1px solid rgba(123, 92, 62, 0.18);
background: rgba(255, 251, 246, 0.75);
color: var(--muted);
border-radius: 999px;
padding: 10px 20px;
font-size: 15px;
font-family: inherit;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.view-tab:hover {
transform: translateY(-1px);
}
.view-tab.is-active {
background: linear-gradient(135deg, #d97706 0%, #9a3412 100%);
color: white;
border-color: transparent;
}
.days-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.days-grid[hidden],
.week-view[hidden] {
display: none;
}
.day-panel {
border-radius: 28px;
padding: 28px;
@ -115,23 +148,188 @@ body {
display: grid;
grid-template-columns: 160px 1fr;
gap: 14px;
background: rgba(15, 118, 110, 0.08);
border: 1px solid rgba(15, 118, 110, 0.14);
background: color-mix(in srgb, var(--event-color, #89b4fa) 16%, white);
border: 1px solid var(--event-color, #89b4fa);
border-left: 8px solid var(--event-color, #89b4fa);
font-size: 28px;
align-items: start;
}
.event-time {
color: var(--event);
color: #1f2937;
font-weight: 700;
}
.event-title {
color: #1f2937;
}
.empty-message {
color: var(--muted);
border: 1px dashed var(--line);
font-size: 24px;
}
.week-view {
background: var(--panel);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 18px 45px rgba(101, 67, 33, 0.12);
backdrop-filter: blur(14px);
border-radius: 28px;
padding: 24px;
margin-top: 20px;
}
.week-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.nav-btn {
border: 1px solid rgba(123, 92, 62, 0.18);
background: rgba(255, 251, 246, 0.9);
color: var(--text);
border-radius: 999px;
padding: 10px 16px;
font-size: 14px;
font-family: inherit;
cursor: pointer;
transition: transform 0.18s ease;
}
.nav-btn:hover {
transform: translateY(-1px);
}
.range-title {
font-size: 18px;
font-weight: 700;
text-align: center;
}
.week-scroll {
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: thin;
}
.week-grid {
display: grid;
grid-template-columns: repeat(7, minmax(200px, 1fr));
gap: 14px;
min-width: 1500px;
}
.week-day-card {
border-radius: 22px;
padding: 14px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--line);
}
.week-day-card.is-today {
outline: 2px solid rgba(217, 119, 6, 0.28);
}
.week-day-header {
font-size: 15px;
font-weight: 700;
margin-bottom: 10px;
min-height: 2.4em;
line-height: 1.2;
}
.week-task-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.week-task-item {
background: rgba(22, 101, 52, 0.08);
border: 1px solid rgba(22, 101, 52, 0.14);
border-radius: 12px;
padding: 8px 10px;
font-size: 13px;
}
.timeline {
position: relative;
height: 576px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(252, 246, 238, 0.95) 100%);
border: 1px solid var(--line);
overflow: hidden;
}
.timeline-hour {
position: absolute;
left: 0;
right: 0;
height: 48px;
border-top: 1px solid rgba(123, 92, 62, 0.12);
}
.timeline-hour-label {
position: absolute;
top: -8px;
left: 8px;
font-size: 10px;
color: var(--muted);
background: rgba(255, 250, 242, 0.9);
padding: 0 4px;
}
.event-block {
position: absolute;
left: 8px;
right: 8px;
border-radius: 14px;
padding: 6px 10px;
display: flex;
align-items: center;
background: var(--event-color, #89b4fa);
color: #1e1e2e;
box-shadow: 0 10px 20px rgba(30, 30, 46, 0.2);
overflow: hidden;
}
.event-block.recurring {
outline: 2px solid rgba(30, 30, 46, 0.35);
}
.event-block .event-line {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
width: 100%;
}
.event-block .event-time {
font-size: 11px;
opacity: 0.75;
flex-shrink: 0;
white-space: nowrap;
color: #1e1e2e;
}
.event-block .event-title {
font-size: 12px;
font-weight: 700;
line-height: 1.2;
color: #1e1e2e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
@media (max-width: 900px) {
.days-grid {
grid-template-columns: 1fr;
@ -151,3 +349,80 @@ body {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
body {
padding: 14px;
}
.board-hero {
padding: 20px;
border-radius: 22px;
}
.board-hero h1 {
font-size: clamp(26px, 8vw, 38px);
}
.board-label {
font-size: 11px;
}
.board-copy {
font-size: 16px;
}
.view-tabs {
gap: 8px;
}
.view-tab {
flex: 1;
padding: 10px 12px;
font-size: 14px;
text-align: center;
}
.day-panel {
padding: 18px;
border-radius: 20px;
}
.day-title {
font-size: 22px;
}
.task-item,
.event-item {
font-size: 16px;
padding: 12px 14px;
}
.event-item {
gap: 6px;
}
.week-view {
padding: 16px;
border-radius: 20px;
}
.week-toolbar {
justify-content: center;
text-align: center;
}
.range-title {
width: 100%;
order: -1;
margin-bottom: 4px;
}
.timeline {
height: 480px;
}
.week-day-card {
padding: 10px;
}
}