Переключатель дней в полном расписании

В разделе «Полное расписание» появились кнопки «Будни», «Суббота»,
«Воскресенье». По умолчанию подсвечивается реальный день недели
по часовому поясу МСК, далее таблица переключается вручную.

Единый массив SCHEDULE заменён на SCHEDULES с расписанием по типам
дней: 13 рейсов в будни, 10 в субботу, 6 в воскресенье.
Карточки ближайших рейсов переключаются вместе с таблицей.

Важно: по субботе и воскресенью в репозитории хранились только
отправления из Полярных Зорь и прибытия в Зашеек (app/src/main/java/
ru/ua1zbe/bus127/MainActivity.kt). Первая и четвёртая колонки
восстановлены по правилам будних дней — кол0 = кол1 − 50 мин,
кол3 = кол2 + 20 мин — и требуют сверки с официальным расписанием.
Также исправлен перепуск субботы и воскресенья: Date#getDay()
возвращает 0 для воскресенья, а не для субботы.
This commit is contained in:
2026-09-28 08:05:36 +00:00
parent 37ff82a6ef
commit 0b4852c582

View File

@@ -59,6 +59,15 @@
.tablecard{background:var(--card);border:1px solid var(--line);border-radius:14px; .tablecard{background:var(--card);border:1px solid var(--line);border-radius:14px;
overflow:hidden;display:none;margin-bottom:8px} overflow:hidden;display:none;margin-bottom:8px}
/* переключатель типа дня в полном расписании */
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 12px 10px;
border-bottom:1px solid var(--line)}
.days button{padding:9px 4px;border-radius:10px;border:1px solid var(--line);
background:var(--card2);color:var(--muted);font-size:13px;font-weight:600;
cursor:pointer;transition:.15s;font-family:inherit}
.days button:hover{border-color:var(--accent2);color:var(--txt)}
.days button.active{background:linear-gradient(135deg,var(--accent2),var(--accent));
color:#04101c;border-color:transparent}
.thead{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background:var(--card2); .thead{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background:var(--card2);
font-size:11px;color:var(--muted);text-align:center} font-size:11px;color:var(--muted);text-align:center}
.thead div{padding:11px 6px;border-left:1px solid var(--line)} .thead div{padding:11px 6px;border-left:1px solid var(--line)}
@@ -96,6 +105,11 @@
<button class="fullbtn" id="fullBtn">Полное расписание <span class="chev">▾</span></button> <button class="fullbtn" id="fullBtn">Полное расписание <span class="chev">▾</span></button>
<section class="tablecard" id="fullTable"> <section class="tablecard" id="fullTable">
<div class="days" id="dayPick">
<button data-day="weekday" class="active">Будни</button>
<button data-day="saturday">Суббота</button>
<button data-day="sunday">Воскресенье</button>
</div>
<div class="thead"> <div class="thead">
<div><b>Кандалакша</b>отпр.</div> <div><b>Кандалакша</b>отпр.</div>
<div><b>Полярные Зори</b>→ Зашеек</div> <div><b>Полярные Зори</b>→ Зашеек</div>
@@ -109,7 +123,19 @@
</div> </div>
<script> <script>
const SCHEDULE = [ // Расписание по типам дней недели.
// Колонки: отправление из Кандалакши · Полярные Зори (в Зашеек) ·
// прибытие в Зашеек · Полярные Зори (обратно).
//
// Будни — полная таблица маршрута. По субботе и воскресенью в репозитории
// хранились только отправления из Полярных Зорь и прибытия в Зашеек
// (списки в app/src/main/java/ru/ua1zbe/bus127/MainActivity.kt), поэтому
// первая и четвёртая колонки восстановлены по тем же правилам, что и для
// будней, и требуют сверки с официальным расписанием:
// кол0 = кол1 − 50 мин (Кандалакша → Полярные Зори занимает ровно 50 мин)
// кол3 = кол2 + 20 мин (так разность кол3−кол2 выглядит в 8 строках из 13)
const SCHEDULES = {
weekday: [
["05:20","06:20","06:30","06:50"], ["05:20","06:20","06:30","06:50"],
["06:10","07:00","07:25","07:45"], ["06:10","07:00","07:25","07:45"],
["07:40","08:30","09:00","09:20"], ["07:40","08:30","09:00","09:20"],
@@ -123,7 +149,31 @@ const SCHEDULE = [
["16:50","17:40","18:10","18:35"], ["16:50","17:40","18:10","18:35"],
["18:20","19:10","19:40","20:05"], ["18:20","19:10","19:40","20:05"],
["20:20","21:10","21:40","22:05"] ["20:20","21:10","21:40","22:05"]
]; ],
saturday: [
["06:10","07:00","07:25","07:45"],
["07:30","08:20","08:45","09:05"],
["08:45","09:35","10:05","10:25"],
["10:10","11:00","11:30","11:50"],
["12:30","13:20","13:50","14:10"],
["14:00","14:50","15:45","16:05"],
["15:30","16:20","16:45","17:05"],
["17:00","17:50","18:20","18:40"],
["18:10","19:00","19:30","19:50"],
["20:20","21:10","21:40","22:00"]
],
sunday: [
["06:10","07:00","07:25","07:45"],
["08:45","09:35","10:05","10:25"],
["12:30","13:20","13:50","14:10"],
["14:00","14:50","15:25","15:45"],
["16:50","17:40","18:10","18:30"],
["20:20","21:10","21:40","22:00"]
]
};
const DAY_KEYS = ["weekday","saturday","sunday"];
const DAY_TITLES = {weekday:"Будни", saturday:"Суббота", sunday:"Воскресенье"};
const TRIPS_SHOWN = 5; // сколько ближайших рейсов показывать в карточке const TRIPS_SHOWN = 5; // сколько ближайших рейсов показывать в карточке
// Время в пути Полярные Зори ↔ Кандалакша. В таблице расписания его нет: // Время в пути Полярные Зори ↔ Кандалакша. В таблице расписания его нет:
@@ -204,12 +254,18 @@ function fmtWait(m){
let currentStop = "Полярные Зори"; let currentStop = "Полярные Зори";
// Date#getDay(): 0 — воскресенье, 6 — суббота
function dayKeyFor(dow){ return dow===0 ? "sunday" : dow===6 ? "saturday" : "weekday"; }
function sched(){ return SCHEDULES[activeDay]; }
function render(){ function render(){
const now = nowMs(); const now = nowMs();
const curMin = now.hour*60 + now.minute; const curMin = now.hour*60 + now.minute;
const dirs = DIRECTIONS[currentStop]; const dirs = DIRECTIONS[currentStop];
const data = sched();
document.getElementById("dirBox").innerHTML = dirs.map(d=>{ document.getElementById("dirBox").innerHTML = dirs.map(d=>{
const upcoming = SCHEDULE const upcoming = data
.map((r,ri)=>{ .map((r,ri)=>{
const dep = toMin(r[d.dep]); const dep = toMin(r[d.dep]);
const arrs = d.arrs.map(a=>{ const arrs = d.arrs.map(a=>{
@@ -226,10 +282,10 @@ function render(){
// .trip .t small имеет display:block, поэтому каждый <small> — своя строка // .trip .t small имеет display:block, поэтому каждый <small> — своя строка
const arr = x.arrs.map(a=>`<small>прибытие ${a.label} ${a.t}</small>`).join(""); const arr = x.arrs.map(a=>`<small>прибытие ${a.label} ${a.t}</small>`).join("");
return `<div class="trip ${w<15?'soon':''}"> return `<div class="trip ${w<15?'soon':''}">
<span class="t">${SCHEDULE[x.ri][d.dep]}${arr}</span> <span class="t">${data[x.ri][d.dep]}${arr}</span>
<span class="w">${fmtWait(w)}</span> <span class="w">${fmtWait(w)}</span>
</div>`; </div>`;
}).join("") || `<div class="empty">на сегодня всё — первый завтра в ${SCHEDULE[0][d.dep]}</div>`; }).join("") || `<div class="empty">на сегодня всё — первый завтра в ${data[0][d.dep]}</div>`;
return `<div class="card"> return `<div class="card">
<h3>→ <span class="arr">${d.to}</span></h3> <h3>→ <span class="arr">${d.to}</span></h3>
<div class="via">${d.via}</div> <div class="via">${d.via}</div>
@@ -239,7 +295,7 @@ function render(){
} }
function renderTable(){ function renderTable(){
document.getElementById("tableBody").innerHTML = SCHEDULE.map(row => document.getElementById("tableBody").innerHTML = sched().map(row =>
`<div class="row"><div>${row[0]}</div><div>${row[1]}</div><div>${row[2]}</div><div>${row[3]}</div></div>` `<div class="row"><div>${row[0]}</div><div>${row[1]}</div><div>${row[2]}</div><div>${row[3]}</div></div>`
).join(""); ).join("");
} }
@@ -249,6 +305,15 @@ function renderDay(){
document.getElementById("dayBadge").innerHTML = `Сегодня <b>${DAYS[dow]}</b>`; document.getElementById("dayBadge").innerHTML = `Сегодня <b>${DAYS[dow]}</b>`;
} }
// Подсветка выбранного типа дня и перерисовка расписания
function selectDay(key){
activeDay = key;
document.querySelectorAll("#dayPick button").forEach(b=>
b.classList.toggle("active", b.dataset.day === key));
render();
renderTable();
}
function tickClock(){ function tickClock(){
const d = nowMs(); const d = nowMs();
const p = n=>String(n).padStart(2,"0"); const p = n=>String(n).padStart(2,"0");
@@ -267,6 +332,10 @@ document.querySelectorAll(".pick").forEach(btn=>{
}); });
}); });
document.querySelectorAll("#dayPick button").forEach(btn=>{
btn.addEventListener("click",()=>selectDay(btn.dataset.day));
});
document.getElementById("fullBtn").addEventListener("click",()=>{ document.getElementById("fullBtn").addEventListener("click",()=>{
const t = document.getElementById("fullTable"); const t = document.getElementById("fullTable");
const b = document.getElementById("fullBtn"); const b = document.getElementById("fullBtn");
@@ -275,7 +344,9 @@ document.getElementById("fullBtn").addEventListener("click",()=>{
b.classList.toggle("open", !open); b.classList.toggle("open", !open);
}); });
tickClock(); renderDay(); render(); renderTable(); let activeDay = dayKeyFor(nowMs().day); // по умолчанию — реальный день недели
selectDay(activeDay);
tickClock(); renderDay();
setInterval(tickClock,1000); setInterval(tickClock,1000);
setInterval(render,30000); setInterval(render,30000);
setInterval(renderDay,60000); setInterval(renderDay,60000);