Switch to 5-day rolling view with clock/weather info panel
- Show today + next 4 days instead of a fixed Sun-Sat week grid - Replace Next Week column with a right-side info panel (live clock, date, current weather + 3-day forecast) - Simplify topbar to just the view pill, date range, and member filter - Adjust grid to repeat(5, 1fr) 190px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
120
static/js/app.js
120
static/js/app.js
@@ -1,30 +1,19 @@
|
||||
// Update intervals (in milliseconds)
|
||||
const INTERVALS = {
|
||||
TIME: 1000, // 1 second
|
||||
WEATHER: 900000, // 15 minutes
|
||||
CALENDAR: 300000 // 5 minutes
|
||||
TIME: 1000,
|
||||
WEATHER: 900000,
|
||||
CALENDAR: 300000
|
||||
};
|
||||
|
||||
const DAY_LABELS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
let currentWeekStart = startOfWeek(new Date());
|
||||
let activeFilter = 'all';
|
||||
let filterOptionsBuilt = false;
|
||||
let lastWeekData = null;
|
||||
let lastData = null;
|
||||
let lastWeatherData = null;
|
||||
|
||||
// Return an OWM icon image tag for a given icon code
|
||||
function weatherIcon(code) {
|
||||
const src = `https://openweathermap.org/img/wn/${code}@2x.png`;
|
||||
return `<img src="${src}" alt="${code}" class="owm-icon">`;
|
||||
}
|
||||
|
||||
// Sunday-starting week for a given date
|
||||
function startOfWeek(date) {
|
||||
const d = new Date(date);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
d.setDate(d.getDate() - d.getDay());
|
||||
return d;
|
||||
return `<img src="https://openweathermap.org/img/wn/${code}@2x.png" alt="${code}" class="owm-icon">`;
|
||||
}
|
||||
|
||||
function toISODate(date) {
|
||||
@@ -38,21 +27,20 @@ function formatRangeLabel(startISO, endISO) {
|
||||
const start = new Date(startISO + 'T00:00:00');
|
||||
const end = new Date(endISO + 'T00:00:00');
|
||||
const startLabel = `${MONTH_LABELS[start.getMonth()]} ${start.getDate()}`;
|
||||
const endLabel = end.getMonth() === start.getMonth() ? `${end.getDate()}` : `${MONTH_LABELS[end.getMonth()]} ${end.getDate()}`;
|
||||
return `${startLabel}-${endLabel}`;
|
||||
const endLabel = end.getMonth() === start.getMonth()
|
||||
? `${end.getDate()}`
|
||||
: `${MONTH_LABELS[end.getMonth()]} ${end.getDate()}`;
|
||||
return `${startLabel} – ${endLabel}`;
|
||||
}
|
||||
|
||||
// Initialize the application
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
updateTime();
|
||||
updateWeather();
|
||||
fetchCalendar();
|
||||
|
||||
document.getElementById('prev-week').addEventListener('click', () => shiftWeek(-7));
|
||||
document.getElementById('next-week').addEventListener('click', () => shiftWeek(7));
|
||||
document.getElementById('member-filter').addEventListener('change', (e) => {
|
||||
activeFilter = e.target.value;
|
||||
if (lastWeekData) renderWeek(lastWeekData);
|
||||
if (lastData) renderDays(lastData);
|
||||
});
|
||||
document.getElementById('add-btn').addEventListener('click', showAddToast);
|
||||
|
||||
@@ -61,49 +49,61 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
setInterval(fetchCalendar, INTERVALS.CALENDAR);
|
||||
});
|
||||
|
||||
function shiftWeek(days) {
|
||||
currentWeekStart = new Date(currentWeekStart);
|
||||
currentWeekStart.setDate(currentWeekStart.getDate() + days);
|
||||
fetchCalendar();
|
||||
}
|
||||
|
||||
// Update time and date in the header
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
document.getElementById('header-time').textContent = `${hours}:${minutes}`;
|
||||
document.getElementById('header-date').textContent = `${MONTH_LABELS[now.getMonth()]} ${String(now.getDate()).padStart(2, '0')}`;
|
||||
const el = document.getElementById('info-clock');
|
||||
if (el) el.textContent = `${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
// Fetch and update weather chip
|
||||
async function updateWeather() {
|
||||
try {
|
||||
const response = await fetch('/api/weather');
|
||||
if (!response.ok) throw new Error('Weather fetch failed');
|
||||
|
||||
const data = await response.json();
|
||||
if (data.error || !data.current) return;
|
||||
|
||||
document.getElementById('current-temp').textContent = `${data.current.temp}°`;
|
||||
document.getElementById('weather-icon').innerHTML = weatherIcon(data.current.icon);
|
||||
lastWeatherData = data;
|
||||
renderInfoWeather(data);
|
||||
} catch (error) {
|
||||
console.error('Error updating weather:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch the current week's calendar data and render it
|
||||
function renderInfoWeather(data) {
|
||||
const tempEl = document.getElementById('info-current-temp');
|
||||
const iconEl = document.getElementById('info-weather-icon');
|
||||
const descEl = document.getElementById('info-current-desc');
|
||||
const forecastEl = document.getElementById('info-forecast');
|
||||
if (!tempEl) return;
|
||||
|
||||
tempEl.textContent = `${data.current.temp}°`;
|
||||
iconEl.innerHTML = weatherIcon(data.current.icon);
|
||||
descEl.textContent = data.current.description;
|
||||
|
||||
forecastEl.innerHTML = (data.forecast || []).map(day => `
|
||||
<div class="forecast-row">
|
||||
<span class="f-day">${day.date}</span>
|
||||
<span class="f-icon">${weatherIcon(day.icon)}</span>
|
||||
<span class="f-temps">
|
||||
<span class="f-max">${day.temp_max}°</span>
|
||||
<span class="f-min"> / ${day.temp_min}°</span>
|
||||
</span>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function fetchCalendar() {
|
||||
try {
|
||||
const response = await fetch(`/api/calendar?start=${toISODate(currentWeekStart)}`);
|
||||
const response = await fetch(`/api/calendar?start=${toISODate(new Date())}`);
|
||||
if (!response.ok) throw new Error('Calendar fetch failed');
|
||||
|
||||
const data = await response.json();
|
||||
lastWeekData = data;
|
||||
lastData = data;
|
||||
|
||||
document.getElementById('week-range').textContent = formatRangeLabel(data.week_start, data.week_end);
|
||||
document.getElementById('date-range').textContent = formatRangeLabel(data.start, data.end);
|
||||
buildFilterOptions(data.members);
|
||||
renderWeek(data);
|
||||
renderDays(data);
|
||||
} catch (error) {
|
||||
console.error('Error updating calendar:', error);
|
||||
document.getElementById('week-grid').innerHTML = '<div class="event-placeholder">Unable to load calendar</div>';
|
||||
@@ -145,11 +145,12 @@ function eventCardHTML(event) {
|
||||
`;
|
||||
}
|
||||
|
||||
function renderWeek(data) {
|
||||
function renderDays(data) {
|
||||
const grid = document.getElementById('week-grid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
const todayISO = toISODate(new Date());
|
||||
const now = new Date();
|
||||
|
||||
data.days.forEach(day => {
|
||||
const dayDate = new Date(day.date + 'T00:00:00');
|
||||
@@ -164,22 +165,35 @@ function renderWeek(data) {
|
||||
<div class="day-count">${events.length} event${events.length === 1 ? '' : 's'}</div>
|
||||
</div>
|
||||
<div class="day-events">
|
||||
${events.map(eventCardHTML).join('') || ''}
|
||||
${events.map(eventCardHTML).join('')}
|
||||
</div>
|
||||
`;
|
||||
grid.appendChild(column);
|
||||
});
|
||||
|
||||
const nextWeekEvents = filterEvents(data.next_week.events);
|
||||
const nextColumn = document.createElement('div');
|
||||
nextColumn.className = 'next-week-column';
|
||||
nextColumn.innerHTML = `
|
||||
<div class="next-week-title">Next Week</div>
|
||||
<div class="next-week-range">${formatRangeLabel(data.next_week.start, data.next_week.end)}</div>
|
||||
<div class="next-week-count">${data.next_week.count} event${data.next_week.count === 1 ? '' : 's'}</div>
|
||||
// Info panel — clock + date + weather
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const panel = document.createElement('div');
|
||||
panel.className = 'info-panel';
|
||||
panel.innerHTML = `
|
||||
<div id="info-clock" class="info-clock">${hours}:${minutes}</div>
|
||||
<div class="info-weekday">${DAY_LABELS[now.getDay()]}</div>
|
||||
<div class="info-date">${now.getDate()} ${MONTH_LABELS[now.getMonth()]} ${now.getFullYear()}</div>
|
||||
<div class="info-divider"></div>
|
||||
<div class="info-weather-current">
|
||||
<span id="info-weather-icon">--</span>
|
||||
<div>
|
||||
<div id="info-current-temp" class="info-current-temp">--°</div>
|
||||
<div id="info-current-desc" class="info-current-desc">--</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info-forecast" class="info-forecast"></div>
|
||||
`;
|
||||
nextColumn.addEventListener('click', () => shiftWeek(7));
|
||||
grid.appendChild(nextColumn);
|
||||
grid.appendChild(panel);
|
||||
|
||||
// Populate weather immediately if we already have it
|
||||
if (lastWeatherData) renderInfoWeather(lastWeatherData);
|
||||
}
|
||||
|
||||
function showAddToast() {
|
||||
|
||||
Reference in New Issue
Block a user