marek/creator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
team3
2026-06-17 16:41:04 +02:00
parent 76a405bab9
commit 61a22a4d9f
3 changed files with 249 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/BausteinPanel.vue
View File

@@ -12,9 +12,13 @@ const props = defineProps({
status: { type: Object, default: null }, // {gute_antworten, absolviert, verstanden, gemeistert, vertiefung}
tier2: { type: Boolean, default: false }, // Tier 2 frei (ganzer Guide absolviert)
tier3: { type: Boolean, default: false }, // Meisterpfad frei (ganzer Guide verstanden)
// 'trigger' (Liste): nur Tab-Leiste, Klick öffnet den Vollbild-Fokus.
// 'full' (Fokus): Tabs + Panel-Inhalt wie gehabt.
mode: { type: String, default: 'trigger' },
initialTab: { type: String, default: null },
})
const emit = defineEmits(['statusChanged'])
const emit = defineEmits(['statusChanged', 'openFokus'])
const NOETIG = 3 // absolviert
const MAX = 10 // verstanden
@@ -22,7 +26,13 @@ const MEISTERN = 25 // gemeistert (Maximum)
const st = computed(() => props.status || { gute_antworten: 0, streak: 0, absolviert: false, verstanden: false, gemeistert: false, vertiefung: false, deepdive: false })
// --- Toggle-Bereich ---
const activeTab = ref(null) // null | 'vertiefung' | 'deepdive' | 'chat' | 'pruefung'
const activeTab = ref(props.mode === 'full' ? props.initialTab : null) // null | 'vertiefung' | 'deepdive' | 'chat' | 'pruefung'
// Klick auf einen Tab: in der Liste den Fokus öffnen, im Fokus den Tab umschalten.
function tabKlick(tab) {
if (props.mode === 'trigger') { emit('openFokus', tab); return }
toggle(tab)
}
function toggle(tab) {
activeTab.value = activeTab.value === tab ? null : tab
@@ -310,7 +320,12 @@ function pruefAbbrechen() {
function onWindowKey(e) {
if (e.key === 'Escape' && pruefLoading.value) { e.preventDefault(); pruefAbbrechen() }
}
onMounted(() => window.addEventListener('keydown', onWindowKey))
onMounted(() => {
if (props.mode !== 'full') return // Trigger-Modus (Liste): nur Tab-Leiste, keine Prüfungs-/Text-Logik
window.addEventListener('keydown', onWindowKey)
// Direkt im Fokus geöffneter Vertiefung-/Amateur-Tab: Text laden (sonst nur via toggle).
if (activeTab.value === 'vertiefung' || activeTab.value === 'deepdive') openText(activeTab.value)
})
onUnmounted(() => window.removeEventListener('keydown', onWindowKey))
// ALT+1 Nachfragen/Nachhaken · ALT+2 primär (Antwort abgeben / Nächste Frage)
@@ -332,16 +347,16 @@ function onPruefKey(e) {
<template>
<div class="bp">
<div class="bp-toggles">
<button :class="{ active: activeTab === 'vertiefung' }" @click="toggle('vertiefung')">
<button :class="{ active: activeTab === 'vertiefung' }" @click="tabKlick('vertiefung')">
Vertiefung
</button>
<button :class="{ active: activeTab === 'deepdive' }" @click="toggle('deepdive')">
<button :class="{ active: activeTab === 'deepdive' }" @click="tabKlick('deepdive')">
Amateur
</button>
<button :class="{ active: activeTab === 'chat' }" @click="toggle('chat')">
<button :class="{ active: activeTab === 'chat' }" @click="tabKlick('chat')">
Chat
</button>
<button :class="{ active: activeTab === 'pruefung' }" @click="toggle('pruefung')">
<button :class="{ active: activeTab === 'pruefung' }" @click="tabKlick('pruefung')">
Prüfung
<span v-if="st.gemeistert" class="bp-chip gold" title="Gemeistert (25/25)">✓✓✓ Max</span>
<span v-else-if="st.verstanden && tier3" class="bp-chip lila" title="Meisterpfad">✓✓ {{ st.gute_antworten }}/{{ MEISTERN }}</span>
@@ -352,7 +367,7 @@ function onPruefKey(e) {
</button>
</div>
<div v-if="activeTab" class="bp-panel">
<div v-if="mode === 'full' && activeTab" class="bp-panel">
<!-- Vertiefung (gleicher Stoff, mehr) / Amateur (gleicher Stoff, für Einsteiger) -->
<div v-if="activeTab === 'vertiefung' || activeTab === 'deepdive'">
<p v-if="texte[activeTab].loading" class="bp-hint">{{ texte[activeTab].md === null ? 'Generiere…' : 'Lade…' }}</p>