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:
@@ -16,48 +16,16 @@ html, body {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 18px 24px 24px;
|
||||
padding: 14px 20px 20px;
|
||||
}
|
||||
|
||||
/* ---------- Top bar ---------- */
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-time {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.icon-badge {
|
||||
font-size: 22px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.header-date {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1F2430;
|
||||
}
|
||||
|
||||
.header-time {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #8A8F9C;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
@@ -83,79 +51,21 @@ html, body {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.week-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E3E5EA;
|
||||
border-radius: 18px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: #4A4E5A;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-arrow:hover {
|
||||
background: #F0F1F4;
|
||||
}
|
||||
|
||||
.week-range {
|
||||
.date-range-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #4A4E5A;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
/* ---------- Topbar right-side items removed — now live in info panel ---------- */
|
||||
|
||||
.weather-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E3E5EA;
|
||||
border-radius: 18px;
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.current-temp {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #4A4E5A;
|
||||
}
|
||||
|
||||
.wifi-icon {
|
||||
font-size: 18px;
|
||||
color: #8A8F9C;
|
||||
}
|
||||
|
||||
/* ---------- Week grid ---------- */
|
||||
|
||||
.week-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr) 1.1fr;
|
||||
grid-template-columns: repeat(5, 1fr) 190px;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
@@ -232,36 +142,6 @@ html, body {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.next-week-column {
|
||||
background: #FFFFFF;
|
||||
border-radius: 14px;
|
||||
padding: 14px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.next-week-column:hover {
|
||||
background: #F7F8FA;
|
||||
}
|
||||
|
||||
.next-week-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1F2430;
|
||||
}
|
||||
|
||||
.next-week-range {
|
||||
font-size: 11px;
|
||||
color: #A6AAB4;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.next-week-count {
|
||||
font-size: 13px;
|
||||
color: #4A4E5A;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.event-placeholder {
|
||||
grid-column: 1 / -1;
|
||||
@@ -271,6 +151,110 @@ html, body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ---------- Info panel (clock + weather) ---------- */
|
||||
|
||||
.info-panel {
|
||||
background: #FFFFFF;
|
||||
border-radius: 14px;
|
||||
padding: 18px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-clock {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #1F2430;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info-weekday {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #A6AAB4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.info-date {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #4A4E5A;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.info-divider {
|
||||
height: 1px;
|
||||
background: #F0F1F4;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.info-weather-current {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-weather-current .owm-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.info-current-temp {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #1F2430;
|
||||
}
|
||||
|
||||
.info-current-desc {
|
||||
font-size: 11px;
|
||||
color: #A6AAB4;
|
||||
text-transform: capitalize;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.info-forecast {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.forecast-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.forecast-row .f-day {
|
||||
font-weight: 600;
|
||||
color: #4A4E5A;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.forecast-row .f-icon .owm-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.forecast-row .f-temps {
|
||||
text-align: right;
|
||||
color: #4A4E5A;
|
||||
}
|
||||
|
||||
.forecast-row .f-temps .f-max {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.forecast-row .f-temps .f-min {
|
||||
color: #A6AAB4;
|
||||
}
|
||||
|
||||
/* ---------- Add button ---------- */
|
||||
|
||||
.add-fab {
|
||||
|
||||
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