Add lesson retrieval functionality in VocabController and VocabService

- Introduced a new method in VocabService to fetch lesson details, including access control based on user ownership and lesson visibility.
- Updated VocabController to wrap the new method for user access.
- Added a new route in VocabRouter to handle requests for specific lessons.
- Enhanced VocabCourseListView to support navigation to individual lesson views, improving user experience in accessing lesson content.

frontend/src/views/social/VocabLessonView.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="vocab-lesson-view">
+    <div v-if="loading">{{ $t('general.loading') }}</div>
+    <div v-else-if="lesson">
+      <div class="lesson-header">
+        <button @click="back" class="btn-back">{{ $t('general.back') }}</button>
+        <h2>{{ lesson.title }}</h2>
+      </div>
+      
+      <p v-if="lesson.description" class="lesson-description">{{ lesson.description }}</p>
+      
+      <div v-if="lesson.grammarExercises && lesson.grammarExercises.length > 0" class="grammar-exercises">
+        <h3>{{ $t('socialnetwork.vocab.courses.grammarExercises') }}</h3>
+        <div v-for="exercise in lesson.grammarExercises" :key="exercise.id" class="exercise-item">
+          <h4>{{ exercise.title }}</h4>
+          <p v-if="exercise.description">{{ exercise.description }}</p>
+          <div v-if="exercise.type === 'gap_fill'" class="gap-fill-exercise">
+            <p v-html="formatGapFill(exercise.content)"></p>
+            <input v-model="exerciseAnswers[exercise.id]" :placeholder="$t('socialnetwork.vocab.courses.enterAnswer')" />
+            <button @click="checkAnswer(exercise.id)">{{ $t('socialnetwork.vocab.courses.checkAnswer') }}</button>
+            <div v-if="exerciseResults[exercise.id]" class="exercise-result" :class="exerciseResults[exercise.id].correct ? 'correct' : 'wrong'">
+              {{ exerciseResults[exercise.id].correct ? $t('socialnetwork.vocab.courses.correct') : $t('socialnetwork.vocab.courses.wrong') }}
+              <p v-if="exercise.explanation">{{ exercise.explanation }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div v-else>
+        <p>{{ $t('socialnetwork.vocab.courses.noExercises') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import apiClient from '@/utils/axios.js';
+
+export default {
+  name: 'VocabLessonView',
+  props: {
+    courseId: {
+      type: String,
+      required: true
+    },
+    lessonId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      lesson: null,
+      exerciseAnswers: {},
+      exerciseResults: {}
+    };
+  },
+  computed: {
+    ...mapGetters(['user'])
+  },
+  watch: {
+    courseId() {
+      this.loadLesson();
+    },
+    lessonId() {
+      this.loadLesson();
+    }
+  },
+  methods: {
+    async loadLesson() {
+      this.loading = true;
+      try {
+        const res = await apiClient.get(`/api/vocab/lessons/${this.lessonId}`);
+        this.lesson = res.data;
+        // Lade Grammatik-Übungen
+        if (this.lesson && this.lesson.id) {
+          await this.loadGrammarExercises();
+        }
+      } catch (e) {
+        console.error('Konnte Lektion nicht laden:', e);
+      } finally {
+        this.loading = false;
+      }
+    },
+    async loadGrammarExercises() {
+      try {
+        const res = await apiClient.get(`/api/vocab/lessons/${this.lessonId}/grammar-exercises`);
+        this.lesson.grammarExercises = res.data || [];
+      } catch (e) {
+        console.error('Konnte Grammatik-Übungen nicht laden:', e);
+        this.lesson.grammarExercises = [];
+      }
+    },
+    formatGapFill(content) {
+      // Ersetze Platzhalter mit Input-Feldern
+      return content.replace(/\{gap\}/g, '<span class="gap">_____</span>');
+    },
+    async checkAnswer(exerciseId) {
+      try {
+        const answer = this.exerciseAnswers[exerciseId];
+        const res = await apiClient.post(`/api/vocab/exercises/${exerciseId}/check`, { answer });
+        this.exerciseResults[exerciseId] = res.data;
+      } catch (e) {
+        console.error('Fehler beim Prüfen der Antwort:', e);
+      }
+    },
+    back() {
+      this.$router.push(`/socialnetwork/vocab/courses/${this.courseId}`);
+    }
+  },
+  async mounted() {
+    await this.loadLesson();
+  }
+};
+</script>
+
+<style scoped>
+.vocab-lesson-view {
+  padding: 20px;
+}
+
+.lesson-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.btn-back {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+}
+
+.lesson-description {
+  color: #666;
+  margin-bottom: 20px;
+}
+
+.grammar-exercises {
+  margin-top: 30px;
+}
+
+.exercise-item {
+  background: white;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.gap-fill-exercise input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+.exercise-result {
+  margin-top: 10px;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.exercise-result.correct {
+  background: #d4edda;
+  color: #155724;
+}
+
+.exercise-result.wrong {
+  background: #f8d7da;
+  color: #721c24;
+}
+</style>