Implement vocab course and grammar exercise features in backend and frontend
- 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.
This commit is contained in:
Torsten Schulz (local)
325
frontend/src/views/social/VocabCourseView.vue
Normal file
325
frontend/src/views/social/VocabCourseView.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<div class="vocab-course-view">
|
||||
<div v-if="loading">{{ $t('general.loading') }}</div>
|
||||
<div v-else-if="course">
|
||||
<h2>{{ course.title }}</h2>
|
||||
<p v-if="course.description">{{ course.description }}</p>
|
||||
|
||||
<div class="course-info">
|
||||
<span>{{ $t('socialnetwork.vocab.courses.difficulty') }}: {{ course.difficultyLevel }}</span>
|
||||
<span v-if="course.isPublic">{{ $t('socialnetwork.vocab.courses.public') }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="isOwner" class="owner-actions">
|
||||
<button @click="showAddLessonDialog = true">{{ $t('socialnetwork.vocab.courses.addLesson') }}</button>
|
||||
<button @click="editCourse">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
|
||||
</div>
|
||||
|
||||
<div v-if="course.lessons && course.lessons.length > 0" class="lessons-list">
|
||||
<h3>{{ $t('socialnetwork.vocab.courses.lessons') }}</h3>
|
||||
<div v-for="lesson in course.lessons" :key="lesson.id" class="lesson-item">
|
||||
<div class="lesson-header">
|
||||
<span class="lesson-number">{{ lesson.lessonNumber }}.</span>
|
||||
<h4 @click="openLesson(lesson.id)" class="lesson-title">{{ lesson.title }}</h4>
|
||||
<span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
|
||||
{{ $t('socialnetwork.vocab.courses.completed') }}
|
||||
</span>
|
||||
<span v-if="getLessonProgress(lesson.id)?.score" class="score">
|
||||
{{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="lesson.description" class="lesson-description">{{ lesson.description }}</p>
|
||||
<div class="lesson-actions">
|
||||
<button @click="openLesson(lesson.id)">
|
||||
{{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
|
||||
</button>
|
||||
<button v-if="isOwner" @click="editLesson(lesson.id)">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
|
||||
<button v-if="isOwner" @click="deleteLesson(lesson.id)">{{ $t('general.delete') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>{{ $t('socialnetwork.vocab.courses.noLessons') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Lesson Dialog -->
|
||||
<div v-if="showAddLessonDialog" class="dialog-overlay" @click="showAddLessonDialog = false">
|
||||
<div class="dialog" @click.stop>
|
||||
<h3>{{ $t('socialnetwork.vocab.courses.addLesson') }}</h3>
|
||||
<form @submit.prevent="addLesson">
|
||||
<div class="form-group">
|
||||
<label>{{ $t('socialnetwork.vocab.courses.lessonNumber') }}</label>
|
||||
<input type="number" v-model.number="newLesson.lessonNumber" min="1" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>{{ $t('socialnetwork.vocab.courses.title') }}</label>
|
||||
<input v-model="newLesson.title" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>{{ $t('socialnetwork.vocab.courses.description') }}</label>
|
||||
<textarea v-model="newLesson.description"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>{{ $t('socialnetwork.vocab.courses.chapter') }}</label>
|
||||
<select v-model="newLesson.chapterId" required>
|
||||
<option value="">{{ $t('socialnetwork.vocab.courses.selectChapter') }}</option>
|
||||
<option v-for="chapter in chapters" :key="chapter.id" :value="chapter.id">{{ chapter.title }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit">{{ $t('general.create') }}</button>
|
||||
<button type="button" @click="showAddLessonDialog = false">{{ $t('general.cancel') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import apiClient from '@/utils/axios.js';
|
||||
|
||||
export default {
|
||||
name: 'VocabCourseView',
|
||||
props: {
|
||||
courseId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
course: null,
|
||||
progress: [],
|
||||
chapters: [],
|
||||
showAddLessonDialog: false,
|
||||
newLesson: {
|
||||
lessonNumber: 1,
|
||||
title: '',
|
||||
description: '',
|
||||
chapterId: null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['user']),
|
||||
isOwner() {
|
||||
return this.course && this.course.ownerUserId === this.user?.id;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
courseId() {
|
||||
this.loadCourse();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadCourse() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await apiClient.get(`/api/vocab/courses/${this.courseId}`);
|
||||
this.course = res.data;
|
||||
await this.loadProgress();
|
||||
if (this.course.languageId) {
|
||||
await this.loadChapters();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Konnte Kurs nicht laden:', e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async loadProgress() {
|
||||
try {
|
||||
const res = await apiClient.get(`/api/vocab/courses/${this.courseId}/progress`);
|
||||
this.progress = res.data || [];
|
||||
} catch (e) {
|
||||
// Nicht eingeschrieben? Progress ist leer
|
||||
this.progress = [];
|
||||
}
|
||||
},
|
||||
async loadChapters() {
|
||||
try {
|
||||
const res = await apiClient.get(`/api/vocab/languages/${this.course.languageId}/chapters`);
|
||||
this.chapters = res.data?.chapters || [];
|
||||
} catch (e) {
|
||||
console.error('Konnte Kapitel nicht laden:', e);
|
||||
}
|
||||
},
|
||||
getLessonProgress(lessonId) {
|
||||
return this.progress.find(p => p.lessonId === lessonId);
|
||||
},
|
||||
async addLesson() {
|
||||
try {
|
||||
await apiClient.post(`/api/vocab/courses/${this.courseId}/lessons`, this.newLesson);
|
||||
this.showAddLessonDialog = false;
|
||||
this.newLesson = {
|
||||
lessonNumber: 1,
|
||||
title: '',
|
||||
description: '',
|
||||
chapterId: null
|
||||
};
|
||||
await this.loadCourse();
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Hinzufügen der Lektion:', e);
|
||||
alert(e.response?.data?.error || 'Fehler beim Hinzufügen der Lektion');
|
||||
}
|
||||
},
|
||||
async deleteLesson(lessonId) {
|
||||
if (!confirm(this.$t('socialnetwork.vocab.courses.confirmDelete'))) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await apiClient.delete(`/api/vocab/lessons/${lessonId}`);
|
||||
await this.loadCourse();
|
||||
} catch (e) {
|
||||
console.error('Fehler beim Löschen der Lektion:', e);
|
||||
alert(e.response?.data?.error || 'Fehler beim Löschen der Lektion');
|
||||
}
|
||||
},
|
||||
openLesson(lessonId) {
|
||||
this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/lessons/${lessonId}`);
|
||||
},
|
||||
editCourse() {
|
||||
this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}/edit`);
|
||||
},
|
||||
editLesson(lessonId) {
|
||||
// TODO: Implement edit lesson
|
||||
console.log('Edit lesson', lessonId);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadCourse();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.vocab-course-view {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.course-info {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin: 15px 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.owner-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.lessons-list {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.lesson-item {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.lesson-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.lesson-number {
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.lesson-title {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
color: #0066cc;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.badge.completed {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.score {
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.lesson-description {
|
||||
color: #666;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.lesson-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user