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

"""
Arbeiten Widget fuer das Lehrer-Dashboard.

Zeigt anstehende Arbeiten und Fristen.
"""


class ArbeitenWidget:
    widget_id = 'arbeiten'
    widget_name = 'Anstehende Arbeiten'
    widget_icon = '📝'  # Memo
    widget_color = '#f59e0b'  # Orange
    default_width = 'half'
    has_settings = True

    @staticmethod
    def get_css() -> str:
        return """
/* ===== Arbeiten Widget Styles ===== */
.widget-arbeiten {
    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-arbeiten .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-arbeiten .widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text, #e5e7eb);
}

.widget-arbeiten .widget-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 8px;
    font-size: 14px;
}

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

.widget-arbeiten .arbeit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--bp-bg, #0f172a);
    border: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.1));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.widget-arbeiten .arbeit-item:last-child {
    margin-bottom: 0;
}

.widget-arbeiten .arbeit-item:hover {
    background: var(--bp-surface-elevated, #334155);
    border-color: #f59e0b;
}

.widget-arbeiten .arbeit-item.urgent {
    border-left: 3px solid #ef4444;
}

.widget-arbeiten .arbeit-item.soon {
    border-left: 3px solid #f59e0b;
}

.widget-arbeiten .arbeit-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 8px;
    font-size: 16px;
    flex-shrink: 0;
}

.widget-arbeiten .arbeit-content {
    flex: 1;
    min-width: 0;
}

.widget-arbeiten .arbeit-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--bp-text, #e5e7eb);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-arbeiten .arbeit-meta {
    font-size: 12px;
    color: var(--bp-text-muted, #9ca3af);
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-arbeiten .arbeit-frist {
    display: flex;
    align-items: center;
    gap: 4px;
}

.widget-arbeiten .arbeit-frist.urgent {
    color: #ef4444;
}

.widget-arbeiten .arbeit-frist.soon {
    color: #f59e0b;
}

.widget-arbeiten .arbeit-type {
    padding: 2px 6px;
    background: rgba(107, 114, 128, 0.2);
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
}

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

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

.widget-arbeiten .arbeiten-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.1));
}

.widget-arbeiten .arbeiten-all-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    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-arbeiten .arbeiten-all-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
}
"""

    @staticmethod
    def get_html() -> str:
        return """
<div class="widget-arbeiten" data-widget-id="arbeiten">
    <div class="widget-header">
        <div class="widget-title">
            <span class="widget-icon">&#128221;</span>
            <span>Anstehende Arbeiten</span>
        </div>
        <button class="widget-settings-btn" onclick="openWidgetSettings('arbeiten')" title="Einstellungen">&#9881;</button>
    </div>
    <div class="arbeiten-list" id="arbeiten-list">
        <!-- Wird dynamisch gefuellt -->
    </div>
    <div class="arbeiten-footer">
        <button class="arbeiten-all-btn" onclick="openAllArbeiten()">+ Alle Arbeiten anzeigen</button>
    </div>
</div>
"""

    @staticmethod
    def get_js() -> str:
        return """
// ===== Arbeiten Widget JavaScript =====
const ARBEITEN_STORAGE_KEY = 'bp-lehrer-arbeiten';

function getDefaultArbeiten() {
    const today = new Date();
    return [
        {
            id: 1,
            titel: 'Klausur Deutsch - Gedichtanalyse',
            klasse: '12c',
            typ: 'klausur',
            frist: new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000).toISOString(),
            status: 'geplant'
        },
        {
            id: 2,
            titel: 'Aufsatz Korrektur',
            klasse: '10a',
            typ: 'korrektur',
            frist: new Date(today.getTime() + 4 * 24 * 60 * 60 * 1000).toISOString(),
            status: 'korrektur'
        },
        {
            id: 3,
            titel: 'Vokabeltest',
            klasse: '11b',
            typ: 'test',
            frist: new Date(today.getTime() + 2 * 24 * 60 * 60 * 1000).toISOString(),
            status: 'geplant'
        }
    ];
}

function loadArbeiten() {
    const stored = localStorage.getItem(ARBEITEN_STORAGE_KEY);
    return stored ? JSON.parse(stored) : getDefaultArbeiten();
}

function saveArbeiten(arbeiten) {
    localStorage.setItem(ARBEITEN_STORAGE_KEY, JSON.stringify(arbeiten));
}

function getDaysUntil(dateStr) {
    const date = new Date(dateStr);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    date.setHours(0, 0, 0, 0);
    return Math.ceil((date - today) / (24 * 60 * 60 * 1000));
}

function formatFrist(dateStr) {
    const days = getDaysUntil(dateStr);
    if (days < 0) return 'ueberfaellig';
    if (days === 0) return 'heute';
    if (days === 1) return 'morgen';
    return `in ${days} Tagen`;
}

function getFristClass(dateStr) {
    const days = getDaysUntil(dateStr);
    if (days <= 2) return 'urgent';
    if (days <= 5) return 'soon';
    return '';
}

function getTypIcon(typ) {
    const icons = {
        klausur: '&#128196;',
        test: '&#128203;',
        korrektur: '&#128221;',
        abgabe: '&#128230;'
    };
    return icons[typ] || '&#128196;';
}

function renderArbeiten() {
    const list = document.getElementById('arbeiten-list');
    if (!list) return;

    let arbeiten = loadArbeiten();

    // Sort by deadline
    arbeiten.sort((a, b) => new Date(a.frist) - new Date(b.frist));

    if (arbeiten.length === 0) {
        list.innerHTML = `
            <div class="arbeiten-empty">
                <div class="arbeiten-empty-icon">&#127881;</div>
                <div>Keine anstehenden Arbeiten</div>
            </div>
        `;
        return;
    }

    list.innerHTML = arbeiten.map(arbeit => {
        const fristClass = getFristClass(arbeit.frist);
        return `
            <div class="arbeit-item ${fristClass}" onclick="openArbeit(${arbeit.id})">
                <div class="arbeit-icon">${getTypIcon(arbeit.typ)}</div>
                <div class="arbeit-content">
                    <div class="arbeit-title">${arbeit.titel}</div>
                    <div class="arbeit-meta">
                        <span class="arbeit-type">${arbeit.typ}</span>
                        <span>${arbeit.klasse}</span>
                        <span class="arbeit-frist ${fristClass}">&#128197; ${formatFrist(arbeit.frist)}</span>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

function openArbeit(arbeitId) {
    if (typeof loadModule === 'function') {
        loadModule('klausur-korrektur');
        console.log('Opening work:', arbeitId);
    }
}

function openAllArbeiten() {
    if (typeof loadModule === 'function') {
        loadModule('klausur-korrektur');
    }
}

function initArbeitenWidget() {
    renderArbeiten();
}
"""