b6a4607e60
- Added new course management functionalities in VocabController, including creating, updating, and deleting courses and lessons. - Implemented enrollment and progress tracking for courses, along with grammar exercise creation and management. - Updated database schema to include tables for courses, lessons, enrollments, and grammar exercises. - Enhanced frontend with new routes and views for course listing and details, including internationalization support for course-related texts. - Improved user experience by adding navigation to courses from the main vocab trainer view.
91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<template>
|
|
<h2>{{ $t('socialnetwork.vocab.title') }}</h2>
|
|
|
|
<div class="box">
|
|
<p>{{ $t('socialnetwork.vocab.description') }}</p>
|
|
|
|
<div class="actions">
|
|
<button @click="goNewLanguage">{{ $t('socialnetwork.vocab.newLanguage') }}</button>
|
|
<button @click="goCourses">{{ $t('socialnetwork.vocab.courses.title') }}</button>
|
|
</div>
|
|
|
|
<div v-if="loading">{{ $t('general.loading') }}</div>
|
|
<div v-else>
|
|
<div v-if="languages.length === 0">
|
|
{{ $t('socialnetwork.vocab.none') }}
|
|
</div>
|
|
<ul v-else>
|
|
<li v-for="l in languages" :key="l.id">
|
|
<span class="langname" @click="openLanguage(l.id)">{{ l.name }}</span>
|
|
<span class="role" v-if="l.isOwner">({{ $t('socialnetwork.vocab.owner') }})</span>
|
|
<span class="role" v-else>({{ $t('socialnetwork.vocab.subscribed') }})</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</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']),
|
|
},
|
|
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>
|
|
.box {
|
|
background: #f6f6f6;
|
|
padding: 12px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.actions {
|
|
margin: 10px 0;
|
|
}
|
|
.langname {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
.role {
|
|
margin-left: 6px;
|
|
color: #666;
|
|
}
|
|
</style>
|
|
|
|
|