breakpilot-pwa/backend/frontend/modules/widgets/stundenplan_widget.py

"""
Stundenplan Widget fuer das Lehrer-Dashboard.

Zeigt den heutigen Stundenplan des Lehrers.
"""


class StundenplanWidget:
    widget_id = 'stundenplan'
    widget_name = 'Stundenplan'
    widget_icon = '📅'  # Calendar
    widget_color = '#3b82f6'  # Blue
    default_width = 'half'
    has_settings = True

    @staticmethod
    def get_css() -> str:
        return """
/* ===== Stundenplan Widget Styles ===== */
.widget-stundenplan {
    background: var(--bp-surface, #1e293b);
    border: 1px solid var(--bp-border, #475569);
    border-radius: 12px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.widget-stundenplan .widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.1));
}

.widget-stundenplan .widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text, #e5e7eb);
}

.widget-stundenplan .widget-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: 8px;
    font-size: 14px;
}

.widget-stundenplan .stundenplan-date {
    font-size: 12px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-stundenplan .stundenplan-list {
    flex: 1;
    overflow-y: auto;
}

.widget-stundenplan .stunde-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.05));
}

.widget-stundenplan .stunde-item:last-child {
    border-bottom: none;
}

.widget-stundenplan .stunde-item.current {
    background: rgba(59, 130, 246, 0.1);
    margin: 0 -12px;
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

.widget-stundenplan .stunde-item.frei {
    opacity: 0.5;
}

.widget-stundenplan .stunde-zeit {
    width: 70px;
    flex-shrink: 0;
}

.widget-stundenplan .stunde-zeit-von,
.widget-stundenplan .stunde-zeit-bis {
    font-size: 12px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-stundenplan .stunde-zeit-von {
    font-weight: 600;
    color: var(--bp-text, #e5e7eb);
}

.widget-stundenplan .stunde-content {
    flex: 1;
}

.widget-stundenplan .stunde-fach {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text, #e5e7eb);
    margin-bottom: 4px;
}

.widget-stundenplan .stunde-details {
    font-size: 12px;
    color: var(--bp-text-muted, #9ca3af);
    display: flex;
    gap: 12px;
}

.widget-stundenplan .stunde-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.widget-stundenplan .stundenplan-empty {
    text-align: center;
    padding: 24px;
    color: var(--bp-text-muted, #9ca3af);
    font-size: 13px;
}

.widget-stundenplan .stundenplan-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.widget-stundenplan .stundenplan-edit-btn {
    margin-top: 12px;
    width: 100%;
    padding: 10px;
    background: var(--bp-bg, #0f172a);
    border: 1px dashed var(--bp-border, #475569);
    border-radius: 8px;
    color: var(--bp-text-muted, #9ca3af);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.widget-stundenplan .stundenplan-edit-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}
"""

    @staticmethod
    def get_html() -> str:
        return """
<div class="widget-stundenplan" data-widget-id="stundenplan">
    <div class="widget-header">
        <div class="widget-title">
            <span class="widget-icon">&#128197;</span>
            <span>Stundenplan heute</span>
        </div>
        <button class="widget-settings-btn" onclick="openWidgetSettings('stundenplan')" title="Einstellungen">&#9881;</button>
    </div>
    <div class="stundenplan-date" id="stundenplan-date"></div>
    <div class="stundenplan-list" id="stundenplan-list">
        <!-- Wird dynamisch gefuellt -->
    </div>
    <button class="stundenplan-edit-btn" onclick="editStundenplan()">&#128221; Stundenplan bearbeiten</button>
</div>
"""

    @staticmethod
    def get_js() -> str:
        return """
// ===== Stundenplan Widget JavaScript =====
const STUNDENPLAN_STORAGE_KEY = 'bp-lehrer-stundenplan';

function getDefaultStundenplan() {
    return {
        montag: [
            { von: '08:00', bis: '09:30', fach: 'Deutsch', klasse: '10a', raum: '204' },
            { von: '09:45', bis: '11:15', fach: 'Deutsch', klasse: '11b', raum: '108' },
            { von: '11:30', bis: '13:00', fach: null, klasse: null, raum: null },
            { von: '14:00', bis: '15:30', fach: 'Deutsch', klasse: '12c', raum: '301' }
        ],
        dienstag: [
            { von: '08:00', bis: '09:30', fach: 'Deutsch', klasse: '12c', raum: '301' },
            { von: '09:45', bis: '11:15', fach: null, klasse: null, raum: null },
            { von: '11:30', bis: '13:00', fach: 'Deutsch', klasse: '10a', raum: '204' }
        ],
        mittwoch: [
            { von: '08:00', bis: '09:30', fach: null, klasse: null, raum: null },
            { von: '09:45', bis: '11:15', fach: 'Deutsch', klasse: '11b', raum: '108' },
            { von: '11:30', bis: '13:00', fach: 'Deutsch', klasse: '10a', raum: '204' }
        ],
        donnerstag: [
            { von: '08:00', bis: '09:30', fach: 'Deutsch', klasse: '10a', raum: '204' },
            { von: '09:45', bis: '11:15', fach: 'Deutsch', klasse: '12c', raum: '301' },
            { von: '11:30', bis: '13:00', fach: null, klasse: null, raum: null }
        ],
        freitag: [
            { von: '08:00', bis: '09:30', fach: 'Deutsch', klasse: '11b', raum: '108' },
            { von: '09:45', bis: '11:15', fach: null, klasse: null, raum: null }
        ]
    };
}

function loadStundenplan() {
    const stored = localStorage.getItem(STUNDENPLAN_STORAGE_KEY);
    return stored ? JSON.parse(stored) : getDefaultStundenplan();
}

function saveStundenplan(plan) {
    localStorage.setItem(STUNDENPLAN_STORAGE_KEY, JSON.stringify(plan));
}

function getTodayKey() {
    const days = ['sonntag', 'montag', 'dienstag', 'mittwoch', 'donnerstag', 'freitag', 'samstag'];
    return days[new Date().getDay()];
}

function formatDate() {
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    return new Date().toLocaleDateString('de-DE', options);
}

function isCurrentStunde(von, bis) {
    const now = new Date();
    const currentTime = now.getHours() * 60 + now.getMinutes();

    const [vonH, vonM] = von.split(':').map(Number);
    const [bisH, bisM] = bis.split(':').map(Number);

    const vonTime = vonH * 60 + vonM;
    const bisTime = bisH * 60 + bisM;

    return currentTime >= vonTime && currentTime <= bisTime;
}

function renderStundenplan() {
    const list = document.getElementById('stundenplan-list');
    const dateEl = document.getElementById('stundenplan-date');

    if (!list) return;

    if (dateEl) {
        dateEl.textContent = formatDate();
    }

    const plan = loadStundenplan();
    const todayKey = getTodayKey();

    if (todayKey === 'samstag' || todayKey === 'sonntag') {
        list.innerHTML = `
            <div class="stundenplan-empty">
                <div class="stundenplan-empty-icon">&#127774;</div>
                <div>Heute ist Wochenende!</div>
            </div>
        `;
        return;
    }

    const todayPlan = plan[todayKey] || [];

    if (todayPlan.length === 0) {
        list.innerHTML = `
            <div class="stundenplan-empty">
                <div class="stundenplan-empty-icon">&#128197;</div>
                <div>Kein Stundenplan fuer heute</div>
            </div>
        `;
        return;
    }

    list.innerHTML = todayPlan.map(stunde => {
        const isCurrent = isCurrentStunde(stunde.von, stunde.bis);
        const isFrei = !stunde.fach;

        return `
            <div class="stunde-item ${isCurrent ? 'current' : ''} ${isFrei ? 'frei' : ''}">
                <div class="stunde-zeit">
                    <div class="stunde-zeit-von">${stunde.von}</div>
                    <div class="stunde-zeit-bis">${stunde.bis}</div>
                </div>
                <div class="stunde-content">
                    <div class="stunde-fach">${isFrei ? 'Freistunde' : stunde.fach}</div>
                    ${!isFrei ? `
                        <div class="stunde-details">
                            <span>&#127979; ${stunde.klasse}</span>
                            <span>&#128205; Raum ${stunde.raum}</span>
                        </div>
                    ` : ''}
                </div>
            </div>
        `;
    }).join('');
}

function editStundenplan() {
    // Open a modal or redirect to settings
    alert('Stundenplan-Editor wird in einer zukuenftigen Version verfuegbar sein.\\n\\nVorlaeufig koennen Sie den Stundenplan in den Widget-Einstellungen anpassen.');
}

function initStundenplanWidget() {
    renderStundenplan();

    // Update every minute to highlight current lesson
    setInterval(renderStundenplan, 60000);
}
"""