346 lines
8.8 KiB
Vue
346 lines
8.8 KiB
Vue
<template>
|
|
<div class="vocab-view">
|
|
<section class="vocab-hero surface-card">
|
|
<div>
|
|
<span class="vocab-kicker">Sprachenlernen</span>
|
|
<h2>{{ $t('socialnetwork.vocab.title') }}</h2>
|
|
<p>{{ $t('socialnetwork.vocab.description') }}</p>
|
|
</div>
|
|
<div class="actions">
|
|
<button @click="goNewLanguage">{{ $t('socialnetwork.vocab.newLanguage') }}</button>
|
|
<button @click="goCourses">{{ $t('socialnetwork.vocab.courses.title') }}</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="vocab-summary-grid">
|
|
<article class="summary-card surface-card">
|
|
<span class="summary-card__label">Sprachen gesamt</span>
|
|
<strong>{{ languages.length }}</strong>
|
|
<p>Alle aktiven Sprachbereiche, in denen du Inhalte nutzt oder verwaltest.</p>
|
|
</article>
|
|
<article class="summary-card surface-card">
|
|
<span class="summary-card__label">Eigene Bereiche</span>
|
|
<strong>{{ ownedLanguages.length }}</strong>
|
|
<p>Hier legst du Inhalte, Kapitel und Lernmaterial aktiv selbst an.</p>
|
|
</article>
|
|
<article class="summary-card surface-card">
|
|
<span class="summary-card__label">Abonniert</span>
|
|
<strong>{{ subscribedLanguages.length }}</strong>
|
|
<p>Diese Bereiche sind eher für Lernen und Fortschritt statt Verwaltung gedacht.</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="vocab-task-grid">
|
|
<article class="task-card surface-card">
|
|
<span class="task-card__eyebrow">Schnellstart</span>
|
|
<h3>Neue Sprache anlegen</h3>
|
|
<p>Der beste Einstieg, wenn du Inhalte selbst strukturieren und pflegen willst.</p>
|
|
<button type="button" @click="goNewLanguage">{{ $t('socialnetwork.vocab.newLanguage') }}</button>
|
|
</article>
|
|
<article class="task-card surface-card">
|
|
<span class="task-card__eyebrow">Weiterlernen</span>
|
|
<h3>Kurse und Kapitel öffnen</h3>
|
|
<p>Springe direkt in bestehende Lernpfade und arbeite mit vorhandenen Kursen weiter.</p>
|
|
<button type="button" class="button-secondary" @click="goCourses">{{ $t('socialnetwork.vocab.courses.title') }}</button>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="vocab-box surface-card">
|
|
<div v-if="loading" class="vocab-state">{{ $t('general.loading') }}</div>
|
|
<div v-else-if="languages.length === 0" class="vocab-state">
|
|
{{ $t('socialnetwork.vocab.none') }}
|
|
</div>
|
|
<div v-else class="language-sections">
|
|
<section class="language-section">
|
|
<div class="language-section__header">
|
|
<div>
|
|
<h3>Eigene Sprachen</h3>
|
|
<p>Direkter Einstieg in Bearbeitung, Kapitel und Kursverwaltung.</p>
|
|
</div>
|
|
<span class="language-section__count">{{ ownedLanguages.length }}</span>
|
|
</div>
|
|
<ul v-if="ownedLanguages.length" class="language-list">
|
|
<li v-for="l in ownedLanguages" :key="l.id" class="language-card">
|
|
<button type="button" class="language-card__main" @click="openLanguage(l.id)">
|
|
<div class="language-card__info">
|
|
<span class="langname">{{ l.name }}</span>
|
|
<span class="language-card__hint">Verwalten und Inhalte pflegen</span>
|
|
</div>
|
|
<span class="role">{{ $t('socialnetwork.vocab.owner') }}</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<p v-else class="language-empty">Noch keine eigenen Sprachbereiche vorhanden.</p>
|
|
</section>
|
|
|
|
<section class="language-section">
|
|
<div class="language-section__header">
|
|
<div>
|
|
<h3>Abonnierte Sprachen</h3>
|
|
<p>Gut für schnellen Wiedereinstieg ins Lernen ohne Verwaltungsaufwand.</p>
|
|
</div>
|
|
<span class="language-section__count">{{ subscribedLanguages.length }}</span>
|
|
</div>
|
|
<ul v-if="subscribedLanguages.length" class="language-list">
|
|
<li v-for="l in subscribedLanguages" :key="l.id" class="language-card">
|
|
<button type="button" class="language-card__main" @click="openLanguage(l.id)">
|
|
<div class="language-card__info">
|
|
<span class="langname">{{ l.name }}</span>
|
|
<span class="language-card__hint">Lernen, üben und Fortschritt ansehen</span>
|
|
</div>
|
|
<span class="role">{{ $t('socialnetwork.vocab.subscribed') }}</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<p v-else class="language-empty">Keine abonnierten Sprachen vorhanden.</p>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: 'VocabTrainerView',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
languages: [],
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['user']),
|
|
ownedLanguages() {
|
|
return this.languages.filter((language) => language.isOwner);
|
|
},
|
|
subscribedLanguages() {
|
|
return this.languages.filter((language) => !language.isOwner);
|
|
},
|
|
},
|
|
methods: {
|
|
goNewLanguage() {
|
|
this.$router.push('/socialnetwork/vocab/new');
|
|
},
|
|
goCourses() {
|
|
this.$router.push('/socialnetwork/vocab/courses');
|
|
},
|
|
openLanguage(id) {
|
|
this.$router.push(`/socialnetwork/vocab/${id}`);
|
|
},
|
|
async load() {
|
|
this.loading = true;
|
|
try {
|
|
const res = await apiClient.get('/api/vocab/languages');
|
|
this.languages = res.data?.languages || [];
|
|
} catch (e) {
|
|
console.error('Konnte Vokabel-Sprachen nicht laden:', e);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.load();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.vocab-view {
|
|
max-width: var(--content-max-width);
|
|
margin: 0 auto;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.vocab-hero {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
gap: 18px;
|
|
padding: 24px 26px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.vocab-kicker {
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(248, 162, 43, 0.14);
|
|
color: #8a5411;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.vocab-hero p {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.vocab-box {
|
|
padding: 20px;
|
|
}
|
|
|
|
.vocab-summary-grid,
|
|
.vocab-task-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.vocab-task-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.summary-card,
|
|
.task-card {
|
|
padding: 18px;
|
|
}
|
|
|
|
.summary-card strong {
|
|
display: block;
|
|
margin: 6px 0 10px;
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.summary-card p,
|
|
.task-card p {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.summary-card__label,
|
|
.task-card__eyebrow {
|
|
display: inline-flex;
|
|
margin-bottom: 4px;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.task-card h3 {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.task-card button {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.vocab-state {
|
|
text-align: center;
|
|
color: var(--color-text-secondary);
|
|
padding: 18px;
|
|
}
|
|
|
|
.language-sections {
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.language-section {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.language-section__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
}
|
|
|
|
.language-section__header h3 {
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.language-section__header p,
|
|
.language-empty {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.language-section__count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 36px;
|
|
height: 36px;
|
|
padding: 0 10px;
|
|
border-radius: 999px;
|
|
background: rgba(248, 162, 43, 0.12);
|
|
color: #8a5411;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.language-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.language-card__main {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: none;
|
|
padding: 14px 16px;
|
|
border-radius: var(--radius-lg);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.language-card__info {
|
|
display: grid;
|
|
gap: 3px;
|
|
text-align: left;
|
|
}
|
|
|
|
.langname {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.language-card__hint {
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.role {
|
|
color: var(--color-text-muted);
|
|
font-size: 0.82rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.vocab-hero {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.vocab-summary-grid,
|
|
.vocab-task-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|