Calender/static/js/app.js

// Update intervals (in milliseconds)
const INTERVALS = {
    TIME: 1000,              // 1 second
    WEATHER: 900000,         // 15 minutes
    CALENDAR: 300000         // 5 minutes
};

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;

// 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;
}

function toISODate(date) {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
}

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}`;
}

// 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);
    });
    document.getElementById('add-btn').addEventListener('click', showAddToast);

    setInterval(updateTime, INTERVALS.TIME);
    setInterval(updateWeather, INTERVALS.WEATHER);
    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')}`;
}

// 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);
    } catch (error) {
        console.error('Error updating weather:', error);
    }
}

// Fetch the current week's calendar data and render it
async function fetchCalendar() {
    try {
        const response = await fetch(`/api/calendar?start=${toISODate(currentWeekStart)}`);
        if (!response.ok) throw new Error('Calendar fetch failed');

        const data = await response.json();
        lastWeekData = data;

        document.getElementById('week-range').textContent = formatRangeLabel(data.week_start, data.week_end);
        buildFilterOptions(data.members);
        renderWeek(data);
    } catch (error) {
        console.error('Error updating calendar:', error);
        document.getElementById('week-grid').innerHTML = '<div class="event-placeholder">Unable to load calendar</div>';
    }
}

function buildFilterOptions(members) {
    if (filterOptionsBuilt || !members) return;
    const select = document.getElementById('member-filter');
    members.forEach(member => {
        const option = document.createElement('option');
        option.value = member.key;
        option.textContent = member.name;
        select.appendChild(option);
    });
    filterOptionsBuilt = true;
}

function filterEvents(events) {
    if (activeFilter === 'all') return events;
    return events.filter(e => e.member === activeFilter);
}

function formatEventTime(event) {
    const start = new Date(event.start);
    const end = new Date(event.end);
    const isAllDay = start.getHours() === 0 && start.getMinutes() === 0 && end.getHours() === 0 && end.getMinutes() === 0;
    if (isAllDay) return 'All day';
    return start.toLocaleTimeString('en-NZ', { hour: '2-digit', minute: '2-digit' });
}

function eventCardHTML(event) {
    return `
        <div class="event-card" style="background:${event.bg}; border-left-color:${event.color};">
            <div class="event-time">${formatEventTime(event)}</div>
            <div class="event-title">${event.title}</div>
            <div class="event-member">${event.member_name}</div>
        </div>
    `;
}

function renderWeek(data) {
    const grid = document.getElementById('week-grid');
    grid.innerHTML = '';

    const todayISO = toISODate(new Date());

    data.days.forEach(day => {
        const dayDate = new Date(day.date + 'T00:00:00');
        const events = filterEvents(day.events);

        const column = document.createElement('div');
        column.className = 'day-column' + (day.date === todayISO ? ' is-today' : '');
        column.innerHTML = `
            <div class="day-header">
                <div class="day-name">${DAY_LABELS[dayDate.getDay()]}</div>
                <div class="day-number">${dayDate.getDate()}</div>
                <div class="day-count">${events.length} event${events.length === 1 ? '' : 's'}</div>
            </div>
            <div class="day-events">
                ${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>
    `;
    nextColumn.addEventListener('click', () => shiftWeek(7));
    grid.appendChild(nextColumn);
}

function showAddToast() {
    let toast = document.querySelector('.add-toast');
    if (!toast) {
        toast = document.createElement('div');
        toast.className = 'add-toast';
        toast.textContent = 'This display is read-only — add events directly in Google Calendar.';
        document.body.appendChild(toast);
    }
    toast.classList.add('visible');
    clearTimeout(showAddToast._timer);
    showAddToast._timer = setTimeout(() => toast.classList.remove('visible'), 3000);
}