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-24 09:25:14 +02:00
parent 3b1e84e17d
commit d389584b58
10 changed files with 251 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/BausteinFokus.vue
View File

@@ -1,6 +1,7 @@
<script setup>
import BausteinPanel from './BausteinPanel.vue'
import { renderMarkdown } from '../markdown.js'
import { stufeFuer, STUFEN } from '../stufen.js'
const props = defineProps({
baustein: { type: Object, required: true }, // { title, md, num }
@@ -12,7 +13,7 @@ const props = defineProps({
ansicht: { type: String, default: 'kompakt' }, // kompakt | erklärend — linke Guide-Spalte
hasPrev: { type: Boolean, default: false },
hasNext: { type: Boolean, default: false },
fortschritt: { type: Object, default: () => ({ total: 0, absolviert: 0, verstanden: 0, gemeistert: 0 }) },
fortschritt: { type: Object, default: () => ({ total: 0, anfaenger: 0, fortgeschritten: 0, experte: 0, meister: 0 }) },
})
import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -58,13 +59,14 @@ onUnmounted(() => {
const pct = (n) => (100 * n / (props.fortschritt.total || 1)) + '%'
// Akzentfarbe nach Stand des aktuellen Bausteins: gemeistert=gold, verstanden=lila, absolviert=grün.
// Akzentfarbe nach Stufe des aktuellen Bausteins (grün/blau/lila/gold) oder neutral.
const standFarbe = computed(() => {
const s = props.status || {}
if (s.gemeistert) return '#d4af37'
if (s.verstanden) return '#8b5cf6'
if (s.absolviert) return 'var(--success-border)'
return 'var(--border)'
return stufeFuer(s.gute_antworten || 0, s.cap || props.cap)?.farbe || 'var(--border)'
})
const stufe = computed(() => {
const s = props.status || {}
return stufeFuer(s.gute_antworten || 0, s.cap || props.cap)
})
</script>
@@ -76,17 +78,16 @@ const standFarbe = computed(() => {
<button class="fokus-btn" :disabled="!hasPrev" title="Voriger Baustein" @click="$emit('prev')">←</button>
<button class="fokus-btn" :disabled="!hasNext" title="Nächster Baustein" @click="$emit('next')">→</button>
<span class="fokus-titel">{{ baustein.title }}</span>
<span v-if="status?.gemeistert" class="stand-badge gold">✓✓✓ Gemeistert</span>
<span v-else-if="status?.verstanden" class="stand-badge lila">✓✓ Verstanden</span>
<span v-else-if="status?.absolviert" class="stand-badge gruen">✓ Absolviert</span>
<span v-if="stufe" class="stand-badge" :style="{ color: stufe.farbe, borderColor: stufe.farbe }">{{ stufe.kurz }} {{ stufe.label }}</span>
<span class="fokus-spacer"></span>
<button class="fokus-btn" title="Vollansicht beenden" @click="$emit('close')">✕</button>
</div>
</div>
<div class="fokus-xp" :title="`${fortschritt.absolviert}/${fortschritt.total} absolviert · ${fortschritt.verstanden} verstanden · ${fortschritt.gemeistert} gemeistert`">
<div class="xp-seg gold" :style="{ width: pct(fortschritt.gemeistert) }"></div>
<div class="xp-seg lila" :style="{ width: pct(fortschritt.verstanden - fortschritt.gemeistert) }"></div>
<div class="xp-seg gruen" :style="{ width: pct(fortschritt.absolviert - fortschritt.verstanden) }"></div>
<div class="fokus-xp" :title="`${fortschritt.anfaenger}/${fortschritt.total} ab Anfänger · ${fortschritt.fortgeschritten} Fortgeschritten · ${fortschritt.experte} Experte · ${fortschritt.meister} Meister`">
<div class="xp-seg" :style="{ width: pct(fortschritt.meister), background: 'var(--stufe-meister)' }"></div>
<div class="xp-seg" :style="{ width: pct(fortschritt.experte - fortschritt.meister), background: 'var(--stufe-experte)' }"></div>
<div class="xp-seg" :style="{ width: pct(fortschritt.fortgeschritten - fortschritt.experte), background: 'var(--stufe-fortgeschritten)' }"></div>
<div class="xp-seg" :style="{ width: pct(fortschritt.anfaenger - fortschritt.fortgeschritten), background: 'var(--stufe-anfaenger)' }"></div>
</div>
<div class="fokus-body">
<div ref="guideEl" class="fokus-col left">