fix: Restore all files lost during destructive rebase
A previous `git pull --rebase origin main` dropped 177 local commits,
losing 3400+ files across admin-v2, backend, studio-v2, website,
klausur-service, and many other services. The partial restore attempt
(660295e2) only recovered some files.
This commit restores all missing files from pre-rebase ref 98933f5e
while preserving post-rebase additions (night-scheduler, night-mode UI,
NightModeWidget dashboard integration).
Restored features include:
- AI Module Sidebar (FAB), OCR Labeling, OCR Compare
- GPU Dashboard, RAG Pipeline, Magic Help
- Klausur-Korrektur (8 files), Abitur-Archiv (5+ files)
- Companion, Zeugnisse-Crawler, Screen Flow
- Full backend, studio-v2, website, klausur-service
- All compliance SDKs, agent-core, voice-service
- CI/CD configs, documentation, scripts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
954
backend/frontend/modules/dashboard.py
Normal file
954
backend/frontend/modules/dashboard.py
Normal file
@@ -0,0 +1,954 @@
|
||||
"""
|
||||
BreakPilot Studio - Dashboard/Startansicht Modul
|
||||
|
||||
Funktionen:
|
||||
- Startansicht mit Kacheln zu allen Modulen
|
||||
- Schnellzugriff auf die wichtigsten Funktionen
|
||||
- Uebersicht ueber aktuelle Aktivitaeten
|
||||
"""
|
||||
|
||||
|
||||
class DashboardModule:
|
||||
"""Modul fuer die Startansicht/Dashboard."""
|
||||
|
||||
@staticmethod
|
||||
def get_css() -> str:
|
||||
"""CSS fuer das Dashboard-Modul."""
|
||||
return """
|
||||
/* =============================================
|
||||
DASHBOARD MODULE - Startansicht
|
||||
============================================= */
|
||||
|
||||
/* Panel Layout */
|
||||
.panel-dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--bp-bg);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Dashboard Header */
|
||||
.dashboard-header {
|
||||
padding: 32px 40px 24px;
|
||||
background: var(--bp-surface);
|
||||
border-bottom: 1px solid var(--bp-border);
|
||||
}
|
||||
|
||||
.dashboard-welcome {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dashboard-welcome h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--bp-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashboard-welcome p {
|
||||
font-size: 14px;
|
||||
color: var(--bp-text-muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Dashboard Content */
|
||||
.dashboard-content {
|
||||
padding: 32px 40px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Section Titles */
|
||||
.dashboard-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--bp-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Module Cards Grid */
|
||||
.dashboard-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
/* Module Card */
|
||||
.dashboard-card {
|
||||
background: var(--bp-surface);
|
||||
border: 1px solid var(--bp-border);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
||||
border-color: var(--bp-primary);
|
||||
}
|
||||
|
||||
.dashboard-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: var(--bp-primary);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.dashboard-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dashboard-card-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
margin-bottom: 16px;
|
||||
background: var(--bp-primary-soft);
|
||||
}
|
||||
|
||||
.dashboard-card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--bp-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.dashboard-card-description {
|
||||
font-size: 13px;
|
||||
color: var(--bp-text-muted);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dashboard-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--bp-border-subtle);
|
||||
}
|
||||
|
||||
.dashboard-card-action {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--bp-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.dashboard-card-action::after {
|
||||
content: '→';
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.dashboard-card:hover .dashboard-card-action::after {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.dashboard-card-badge {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
background: var(--bp-accent-soft);
|
||||
color: var(--bp-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dashboard-card-badge.new {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.dashboard-card-badge.beta {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* Card Color Variants */
|
||||
.dashboard-card.worksheets .dashboard-card-icon {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.dashboard-card.correction .dashboard-card-icon {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.dashboard-card.jitsi .dashboard-card-icon {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.dashboard-card.letters .dashboard-card-icon {
|
||||
background: rgba(236, 72, 153, 0.1);
|
||||
color: #ec4899;
|
||||
}
|
||||
|
||||
.dashboard-card.messenger .dashboard-card-icon {
|
||||
background: rgba(20, 184, 166, 0.1);
|
||||
color: #14b8a6;
|
||||
}
|
||||
|
||||
.dashboard-card.klausur-korrektur .dashboard-card-icon {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* Quick Stats */
|
||||
.dashboard-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.dashboard-stat {
|
||||
background: var(--bp-surface);
|
||||
border: 1px solid var(--bp-border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dashboard-stat-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
background: var(--bp-surface-elevated);
|
||||
}
|
||||
|
||||
.dashboard-stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dashboard-stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--bp-text);
|
||||
}
|
||||
|
||||
.dashboard-stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--bp-text-muted);
|
||||
}
|
||||
|
||||
/* Recent Activity */
|
||||
.dashboard-activity {
|
||||
background: var(--bp-surface);
|
||||
border: 1px solid var(--bp-border);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.dashboard-activity-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--bp-text);
|
||||
}
|
||||
|
||||
.dashboard-activity-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashboard-activity-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--bp-border-subtle);
|
||||
}
|
||||
|
||||
.dashboard-activity-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.dashboard-activity-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
background: var(--bp-surface-elevated);
|
||||
}
|
||||
|
||||
.dashboard-activity-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dashboard-activity-text {
|
||||
font-size: 14px;
|
||||
color: var(--bp-text);
|
||||
}
|
||||
|
||||
.dashboard-activity-time {
|
||||
font-size: 12px;
|
||||
color: var(--bp-text-muted);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.dashboard-empty {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: var(--bp-text-muted);
|
||||
}
|
||||
|
||||
.dashboard-empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
AI PROMPT INPUT
|
||||
============================================= */
|
||||
|
||||
.dashboard-ai-prompt {
|
||||
background: var(--bp-surface);
|
||||
border: 1px solid var(--bp-border);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
background: linear-gradient(135deg, #6C1B1B, #991b1b);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--bp-text);
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--bp-text-muted);
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-input-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-input {
|
||||
flex: 1;
|
||||
min-height: 44px;
|
||||
max-height: 120px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--bp-border);
|
||||
background: var(--bp-bg);
|
||||
color: var(--bp-text);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
resize: none;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-input:focus {
|
||||
border-color: var(--bp-primary);
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-input::placeholder {
|
||||
color: var(--bp-text-muted);
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-send {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #6C1B1B, #991b1b);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-send:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(108, 27, 27, 0.4);
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-send:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.dashboard-ai-prompt-send.loading {
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* AI Response */
|
||||
.dashboard-ai-response {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: var(--bp-bg);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--bp-border-subtle);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dashboard-ai-response.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dashboard-ai-response-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--bp-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dashboard-ai-response-text {
|
||||
color: var(--bp-text);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.dashboard-ai-response-text code {
|
||||
background: var(--bp-surface-elevated);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.dashboard-ai-response-text pre {
|
||||
background: var(--bp-surface-elevated);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.dashboard-ai-response-text pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Model Selector */
|
||||
.dashboard-ai-model-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--bp-border-subtle);
|
||||
}
|
||||
|
||||
.dashboard-ai-model-label {
|
||||
font-size: 12px;
|
||||
color: var(--bp-text-muted);
|
||||
}
|
||||
|
||||
.dashboard-ai-model-select {
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--bp-border);
|
||||
background: var(--bp-bg);
|
||||
color: var(--bp-text);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dashboard-ai-model-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--bp-primary);
|
||||
}
|
||||
"""
|
||||
|
||||
@staticmethod
|
||||
def get_html() -> str:
|
||||
"""HTML fuer das Dashboard-Modul."""
|
||||
return """
|
||||
<!-- Dashboard Panel -->
|
||||
<div id="panel-dashboard" class="panel-dashboard">
|
||||
<!-- Header -->
|
||||
<div class="dashboard-header">
|
||||
<div class="dashboard-welcome">
|
||||
<h1>Willkommen bei BreakPilot Studio</h1>
|
||||
<p>Waehle ein Modul, um zu beginnen</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="dashboard-content">
|
||||
<!-- AI Prompt Input -->
|
||||
<div class="dashboard-ai-prompt">
|
||||
<div class="dashboard-ai-prompt-header">
|
||||
<div class="dashboard-ai-prompt-icon">🤖</div>
|
||||
<div>
|
||||
<div class="dashboard-ai-prompt-title">KI-Assistent</div>
|
||||
<div class="dashboard-ai-prompt-subtitle">Fragen Sie Ihren lokalen Ollama-Assistenten</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-ai-prompt-input-container">
|
||||
<textarea
|
||||
id="ai-prompt-input"
|
||||
class="dashboard-ai-prompt-input"
|
||||
placeholder="Stellen Sie eine Frage... (z.B. 'Wie schreibe ich einen Elternbrief?' oder 'Erstelle mir einen Lückentext über Brüche')"
|
||||
rows="1"
|
||||
onkeydown="handleAiPromptKeydown(event)"
|
||||
oninput="autoResizeTextarea(this)"
|
||||
></textarea>
|
||||
<button id="ai-prompt-send" class="dashboard-ai-prompt-send" onclick="sendAiPrompt()">
|
||||
➤
|
||||
</button>
|
||||
</div>
|
||||
<div class="dashboard-ai-response" id="ai-response">
|
||||
<div class="dashboard-ai-response-header">
|
||||
<span>🤖</span>
|
||||
<span id="ai-response-model">Antwort</span>
|
||||
</div>
|
||||
<div class="dashboard-ai-response-text" id="ai-response-text"></div>
|
||||
</div>
|
||||
<div class="dashboard-ai-model-selector">
|
||||
<span class="dashboard-ai-model-label">Modell:</span>
|
||||
<select id="ai-model-select" class="dashboard-ai-model-select">
|
||||
<option value="llama3.2:latest">Llama 3.2 (Standard)</option>
|
||||
<option value="mistral:latest">Mistral</option>
|
||||
<option value="qwen2.5:7b">Qwen 2.5 (7B)</option>
|
||||
<option value="deepseek-coder:latest">DeepSeek Coder</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Module Cards -->
|
||||
<div class="dashboard-section-title">Module</div>
|
||||
<div class="dashboard-cards">
|
||||
<!-- Arbeitsblaetter Studio -->
|
||||
<div class="dashboard-card worksheets" onclick="loadModule('worksheets')">
|
||||
<div class="dashboard-card-icon">📝</div>
|
||||
<div class="dashboard-card-title">Arbeitsblaetter Studio</div>
|
||||
<div class="dashboard-card-description">
|
||||
Arbeitsblaetter hochladen, neu aufbauen und in Lerneinheiten organisieren. Generiere Mindmaps, Multiple Choice Tests und mehr.
|
||||
</div>
|
||||
<div class="dashboard-card-footer">
|
||||
<span class="dashboard-card-action">Oeffnen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Klausurkorrektur -->
|
||||
<div class="dashboard-card correction" onclick="loadModule('correction')">
|
||||
<div class="dashboard-card-icon">✅</div>
|
||||
<div class="dashboard-card-title">Klausurkorrektur</div>
|
||||
<div class="dashboard-card-description">
|
||||
Klausuren hochladen und automatisch korrigieren lassen. OCR-Erkennung und AI-gestuetzte Bewertung.
|
||||
</div>
|
||||
<div class="dashboard-card-footer">
|
||||
<span class="dashboard-card-action">Oeffnen</span>
|
||||
<span class="dashboard-card-badge new">NEU</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Videokonferenz -->
|
||||
<div class="dashboard-card jitsi" onclick="loadModule('jitsi')">
|
||||
<div class="dashboard-card-icon">🎥</div>
|
||||
<div class="dashboard-card-title">Videokonferenz</div>
|
||||
<div class="dashboard-card-description">
|
||||
Elterngespraeche, Klassenkonferenzen und Schulungen per Video. Integrierte Jitsi-Konferenzen.
|
||||
</div>
|
||||
<div class="dashboard-card-footer">
|
||||
<span class="dashboard-card-action">Oeffnen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elternbriefe -->
|
||||
<div class="dashboard-card letters" onclick="loadModule('letters')">
|
||||
<div class="dashboard-card-icon">✉️</div>
|
||||
<div class="dashboard-card-title">Elternbriefe</div>
|
||||
<div class="dashboard-card-description">
|
||||
Elternbriefe mit rechtssicherer Sprache verfassen. GFK-Analyse und Legal Assistant inklusive.
|
||||
</div>
|
||||
<div class="dashboard-card-footer">
|
||||
<span class="dashboard-card-action">Oeffnen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messenger -->
|
||||
<div class="dashboard-card messenger" onclick="loadModule('messenger')">
|
||||
<div class="dashboard-card-icon">💬</div>
|
||||
<div class="dashboard-card-title">Messenger</div>
|
||||
<div class="dashboard-card-description">
|
||||
Kontakte verwalten, Nachrichten senden, CSV Import/Export. DSGVO-konforme Elternkommunikation mit Vorlagen.
|
||||
</div>
|
||||
<div class="dashboard-card-footer">
|
||||
<span class="dashboard-card-action">Oeffnen</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Abiturklausuren (15-Punkte-System) - External Microservice -->
|
||||
<div class="dashboard-card klausur-korrektur" onclick="openKlausurService()">
|
||||
<div class="dashboard-card-icon">🎓</div>
|
||||
<div class="dashboard-card-title">Abiturklausuren</div>
|
||||
<div class="dashboard-card-description">
|
||||
Abitur-Klausuren mit 15-Punkte-System. NiBiS-Aufgaben, Erwartungshorizont, Gutachten und Fairness-Analyse.
|
||||
</div>
|
||||
<div class="dashboard-card-footer">
|
||||
<span class="dashboard-card-action">Oeffnen</span>
|
||||
<span class="dashboard-card-badge new">Neu</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="dashboard-section-title">Letzte Aktivitaeten</div>
|
||||
<div class="dashboard-activity">
|
||||
<ul class="dashboard-activity-list" id="dashboard-activity-list">
|
||||
<li class="dashboard-activity-item">
|
||||
<div class="dashboard-activity-icon">📝</div>
|
||||
<div class="dashboard-activity-content">
|
||||
<div class="dashboard-activity-text">Willkommen bei BreakPilot Studio!</div>
|
||||
<div class="dashboard-activity-time">Gerade eben</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
@staticmethod
|
||||
def get_js() -> str:
|
||||
"""JavaScript fuer das Dashboard-Modul."""
|
||||
return """
|
||||
// =============================================
|
||||
// DASHBOARD MODULE - Startansicht
|
||||
// =============================================
|
||||
|
||||
let dashboardInitialized = false;
|
||||
|
||||
function loadDashboardModule() {
|
||||
if (dashboardInitialized) {
|
||||
console.log('Dashboard module already initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Loading Dashboard Module...');
|
||||
|
||||
// Load recent activity from localStorage
|
||||
loadRecentActivity();
|
||||
|
||||
dashboardInitialized = true;
|
||||
console.log('Dashboard Module loaded successfully');
|
||||
}
|
||||
|
||||
function loadRecentActivity() {
|
||||
const activityList = document.getElementById('dashboard-activity-list');
|
||||
if (!activityList) return;
|
||||
|
||||
// Get stored activity
|
||||
const stored = localStorage.getItem('bp-activity');
|
||||
if (!stored) return;
|
||||
|
||||
try {
|
||||
const activities = JSON.parse(stored);
|
||||
if (!activities.length) return;
|
||||
|
||||
activityList.innerHTML = activities.slice(0, 5).map(act => `
|
||||
<li class="dashboard-activity-item">
|
||||
<div class="dashboard-activity-icon">${act.icon || '📄'}</div>
|
||||
<div class="dashboard-activity-content">
|
||||
<div class="dashboard-activity-text">${act.text}</div>
|
||||
<div class="dashboard-activity-time">${formatActivityTime(act.time)}</div>
|
||||
</div>
|
||||
</li>
|
||||
`).join('');
|
||||
} catch (e) {
|
||||
console.error('Error loading activity:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function addActivity(icon, text) {
|
||||
const stored = localStorage.getItem('bp-activity');
|
||||
let activities = [];
|
||||
try {
|
||||
activities = stored ? JSON.parse(stored) : [];
|
||||
} catch (e) {}
|
||||
|
||||
activities.unshift({
|
||||
icon: icon,
|
||||
text: text,
|
||||
time: Date.now()
|
||||
});
|
||||
|
||||
// Keep only last 20
|
||||
activities = activities.slice(0, 20);
|
||||
localStorage.setItem('bp-activity', JSON.stringify(activities));
|
||||
}
|
||||
|
||||
function formatActivityTime(timestamp) {
|
||||
const diff = Date.now() - timestamp;
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
const days = Math.floor(diff / 86400000);
|
||||
|
||||
if (minutes < 1) return 'Gerade eben';
|
||||
if (minutes < 60) return `Vor ${minutes} Minute${minutes > 1 ? 'n' : ''}`;
|
||||
if (hours < 24) return `Vor ${hours} Stunde${hours > 1 ? 'n' : ''}`;
|
||||
return `Vor ${days} Tag${days > 1 ? 'en' : ''}`;
|
||||
}
|
||||
|
||||
// Show Dashboard Panel
|
||||
function showDashboardPanel() {
|
||||
console.log('showDashboardPanel called');
|
||||
hideAllPanels();
|
||||
const panel = document.getElementById('panel-dashboard');
|
||||
if (panel) {
|
||||
panel.style.display = 'flex';
|
||||
loadDashboardModule();
|
||||
console.log('Dashboard panel shown');
|
||||
} else {
|
||||
console.error('panel-dashboard not found');
|
||||
}
|
||||
}
|
||||
|
||||
// Open Klausur-Service (External Microservice)
|
||||
function openKlausurService() {
|
||||
// Pass auth token to klausur-service
|
||||
const token = localStorage.getItem('auth_token');
|
||||
const url = window.location.port === '8000'
|
||||
? 'http://localhost:8086'
|
||||
: window.location.origin.replace(':8000', ':8086');
|
||||
|
||||
// Open in new tab
|
||||
const klausurWindow = window.open(url, '_blank');
|
||||
|
||||
// Try to pass token via postMessage after window loads
|
||||
if (klausurWindow && token) {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
klausurWindow.postMessage({ type: 'AUTH_TOKEN', token: token }, url);
|
||||
} catch (e) {
|
||||
console.log('Could not pass token to klausur-service:', e);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
addActivity('🎓', 'Klausur-Service geoeffnet');
|
||||
}
|
||||
|
||||
// =============================================
|
||||
// AI PROMPT FUNCTIONS
|
||||
// =============================================
|
||||
|
||||
let aiPromptAbortController = null;
|
||||
|
||||
function handleAiPromptKeydown(event) {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
sendAiPrompt();
|
||||
}
|
||||
}
|
||||
|
||||
function autoResizeTextarea(textarea) {
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
|
||||
}
|
||||
|
||||
async function sendAiPrompt() {
|
||||
const input = document.getElementById('ai-prompt-input');
|
||||
const sendBtn = document.getElementById('ai-prompt-send');
|
||||
const responseDiv = document.getElementById('ai-response');
|
||||
const responseText = document.getElementById('ai-response-text');
|
||||
const responseModel = document.getElementById('ai-response-model');
|
||||
const modelSelect = document.getElementById('ai-model-select');
|
||||
|
||||
const prompt = input?.value?.trim();
|
||||
if (!prompt) return;
|
||||
|
||||
const model = modelSelect?.value || 'llama3.2:latest';
|
||||
|
||||
// Show loading state
|
||||
sendBtn.disabled = true;
|
||||
sendBtn.classList.add('loading');
|
||||
sendBtn.textContent = '⏳';
|
||||
responseDiv.classList.add('active');
|
||||
responseText.textContent = 'Denke nach...';
|
||||
responseModel.textContent = model;
|
||||
|
||||
// Cancel previous request if exists
|
||||
if (aiPromptAbortController) {
|
||||
aiPromptAbortController.abort();
|
||||
}
|
||||
aiPromptAbortController = new AbortController();
|
||||
|
||||
try {
|
||||
// Determine Ollama endpoint based on current host
|
||||
let ollamaUrl = 'http://localhost:11434/api/generate';
|
||||
if (window.location.hostname === 'macmini') {
|
||||
ollamaUrl = 'http://macmini:11434/api/generate';
|
||||
}
|
||||
|
||||
const response = await fetch(ollamaUrl, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
model: model,
|
||||
prompt: prompt,
|
||||
stream: true
|
||||
}),
|
||||
signal: aiPromptAbortController.signal
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Ollama error: ${response.status}`);
|
||||
}
|
||||
|
||||
// Stream the response
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let fullResponse = '';
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
const chunk = decoder.decode(value);
|
||||
const lines = chunk.split('\\n').filter(l => l.trim());
|
||||
|
||||
for (const line of lines) {
|
||||
try {
|
||||
const data = JSON.parse(line);
|
||||
if (data.response) {
|
||||
fullResponse += data.response;
|
||||
responseText.textContent = fullResponse;
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore JSON parse errors for partial chunks
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Format the response
|
||||
responseText.innerHTML = formatAiResponse(fullResponse);
|
||||
|
||||
// Log activity
|
||||
addActivity('🤖', 'KI-Anfrage: ' + prompt.substring(0, 50) + (prompt.length > 50 ? '...' : ''));
|
||||
|
||||
} catch (error) {
|
||||
if (error.name === 'AbortError') {
|
||||
responseText.textContent = 'Anfrage abgebrochen.';
|
||||
} else {
|
||||
console.error('AI Prompt error:', error);
|
||||
responseText.textContent = '❌ Fehler: ' + error.message + '\\n\\nBitte prüfen Sie, ob Ollama läuft (http://localhost:11434)';
|
||||
}
|
||||
} finally {
|
||||
sendBtn.disabled = false;
|
||||
sendBtn.classList.remove('loading');
|
||||
sendBtn.textContent = '➤';
|
||||
aiPromptAbortController = null;
|
||||
}
|
||||
}
|
||||
|
||||
function formatAiResponse(text) {
|
||||
// Basic markdown-like formatting
|
||||
let formatted = text
|
||||
// Escape HTML
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
// Code blocks
|
||||
.replace(/```(\\w+)?\\n([\\s\\S]*?)```/g, '<pre><code>$2</code></pre>')
|
||||
// Inline code
|
||||
.replace(/`([^`]+)`/g, '<code>$1</code>')
|
||||
// Bold
|
||||
.replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>')
|
||||
// Italic
|
||||
.replace(/\\*([^*]+)\\*/g, '<em>$1</em>')
|
||||
// Line breaks
|
||||
.replace(/\\n/g, '<br>');
|
||||
|
||||
return formatted;
|
||||
}
|
||||
|
||||
// Load available models from Ollama
|
||||
async function loadOllamaModels() {
|
||||
const modelSelect = document.getElementById('ai-model-select');
|
||||
if (!modelSelect) return;
|
||||
|
||||
try {
|
||||
let ollamaUrl = 'http://localhost:11434/api/tags';
|
||||
if (window.location.hostname === 'macmini') {
|
||||
ollamaUrl = 'http://macmini:11434/api/tags';
|
||||
}
|
||||
|
||||
const response = await fetch(ollamaUrl);
|
||||
if (!response.ok) return;
|
||||
|
||||
const data = await response.json();
|
||||
if (data.models && data.models.length > 0) {
|
||||
modelSelect.innerHTML = data.models.map(m =>
|
||||
`<option value="${m.name}">${m.name}</option>`
|
||||
).join('');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Could not load Ollama models:', error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize AI prompt on dashboard load
|
||||
const originalLoadDashboardModule = loadDashboardModule;
|
||||
loadDashboardModule = function() {
|
||||
originalLoadDashboardModule();
|
||||
loadOllamaModels();
|
||||
};
|
||||
"""
|
||||
Reference in New Issue
Block a user