Erster Aufbau Forum

2024-10-15 16:28:42 +02:00
parent c31be3f879
commit 663564aa96
163 changed files with 9449 additions and 116 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,7 +8,7 @@
    <RandomChatDialog ref="randomChatDialog" />
    <CreateFolderDialog ref="createFolderDialog" />
    <EditImageDialog ref="editImageDialog" />
-    <UserProfileDialog ref="userProfileDialog" />
+    <UserProfileDialog ref="userProfileDialog" :userId="'0'"/>
    <ChooseDialog ref="chooseDialog" />
    <ContactDialog ref="contactDialog" />
    <DataPrivacyDialog ref="dataPrivacyDialog" />
--- a/frontend/src/assets/styles.scss
+++ b/frontend/src/assets/styles.scss
@@ -53,7 +53,9 @@ button:hover {
  cursor: pointer;
 }

-h1, h2, h3 {
+h1,
+h2,
+h3 {
  margin: 0;
  display: block;
 }
@@ -67,4 +69,27 @@ h1, h2, h3 {
  background: none;
  background-color: #F9A22C;
  color: #000;
+}
+
+span.button {
+  padding: 2px 2px;
+  margin-left: 4px;
+  cursor: pointer;
+  background: #F9A22C;
+  color: #000000;
+  border: 1px solid #F9A22C;
+  border-radius: 4px;
+  transition: background 0.05s;
+  border: 1px solid transparent;
+  width: 1.2em;
+  height: 1.2em;
+  display: inline-block;
+  text-align: center;
+  line-height: 1.2em;
+}
+
+span.button:hover {
+  background: #fdf1db;
+  color: #7E471B;
+  border: 1px solid #7E471B;
 }
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -1,14 +1,22 @@
 <template>
  <nav>
    <ul>
-      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem" @click="openPage(item.path ?? null)">
+      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem" @click="openPage(item.path ?? null, !!item.children)">
        <span v-if="item.icon" :style="`background-image:url('/images/icons/${item.icon}')`"
          class="menu-icon">&nbsp;</span>
        <span>{{ $t(`navigation.${key}`) }}</span>
        <ul v-if="item.children" class="submenu1">
-          <li v-for="(subitem, subkey) in item.children" :key="subitem.text" @click="openPage(subitem.path ?? null)">
-            <span v-if="subitem.icon" :style="`background-image:url('/images/icons/${subitem.icon}')`" class="submenu-icon">&nbsp;</span>
+          <li v-for="(subitem, subkey) in item.children" :key="subitem.text"
+            @click="openPage(subitem.path ?? null, !!subitem.children && subkey !== 'forum')">
+            <span v-if="subitem.icon" :style="`background-image:url('/images/icons/${subitem.icon}')`"
+              class="submenu-icon">&nbsp;</span>
            <span>{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
+            <span v-if="subkey === 'forum'" class="subsubmenu">&#x25B6;</span>
+            <ul v-if="subkey === 'forum' && forumList.length > 0" class="submenu2">
+              <li v-for="forum in forumList" :key="forum.id" @click="openForum(forum.id, $event)">
+                {{ forum.name }}
+              </li>
+            </ul>
          </li>
        </ul>
      </li>
@@ -25,23 +33,60 @@

 <script>
 import { mapGetters, mapActions } from 'vuex';
+import apiClient from '@/utils/axios.js';

 export default {
  name: 'AppNavigation',
+  data() {
+    return {
+      forumList: []
+    }
+  },
  computed: {
    ...mapGetters(['menu', 'user']),
  },
  created() {
-    if (this.user && this.user.hashedId) {
+    if (this.user && this.user.id) {
      this.loadMenu();
+      this.fetchForums();
+    } else {
+      console.log(this.user);
+    }
+  },
+  mounted() {
+    this.forumInterval = setInterval(() => {
+      this.fetchForums();
+    }, 60000);
+  },
+  beforeDestroy() {
+    if (this.forumInterval) {
+      clearInterval(this.forumInterval);
    }
  },
  methods: {
    ...mapActions(['loadMenu', 'logout']),
-    openPage(url) {
+    openPage(url, hasSubmenu = false) {
+      if (hasSubmenu) {
+        return;
+      }
      if (url) {
+        console.log('openPage', url);
        this.$router.push(url);
      }
+    },
+    openForum(forumId, event) {
+      event.stopPropagation();
+      console.log('openForum', forumId);
+      this.$router.push({ name: 'Forum', params: { id: forumId } });
+    },
+
+    async fetchForums() {
+      try {
+        const response = await apiClient.get('/api/forum');
+        this.forumList = response.data;
+      } catch (error) {
+        console.error('Error fetching forums:', error);
+      }
    }
  }
 };
@@ -127,7 +172,7 @@ a {
  left: 0;
  top: 2.5em;
  max-height: 0;
-  overflow: hidden;
+  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s 0.05s;
@@ -144,6 +189,7 @@ a {
  padding: 0.5em;
  line-height: 1em;
  color: #7E471B;
+  position: relative;
 }

 .submenu1>li:hover {
@@ -159,8 +205,9 @@ a {
  display: inline-block;
  line-height: 1.6em;
 }
+
 .submenu-icon {
-width: 1.2em;
+  width: 1.2em;
  height: 1em;
  margin-right: 3px;
  background-repeat: no-repeat;
@@ -168,4 +215,41 @@ width: 1.2em;
  line-height: 1em;
  background-size: 1.2em 1.2em;
 }
+
+.submenu2 {
+  position: absolute;
+  background-color: #F9A22C;
+  left: 100%;
+  top: 0;
+  border: 1px solid #7E471B;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s 0.05s;
+}
+
+.submenu1>li:hover .submenu2 {
+  max-height: 500px;
+  opacity: 1;
+  visibility: visible;
+  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s;
+}
+
+.submenu2>li {
+  padding: 0.5em;
+  line-height: 1em;
+  color: #7E471B;
+}
+
+.submenu2>li:hover {
+  color: #000000;
+  background-color: #D37C06;
+}
+
+.subsubmenu {
+  float: right;
+  font-size: 8pt;
+  margin-right: -4px;
+}
 </style>
--- a/frontend/src/dialogues/admin/ForumAdminView.vue
+++ b/frontend/src/dialogues/admin/ForumAdminView.vue
@@ -0,0 +1,167 @@
+<template>
+    <div class="forums-admin">
+        <h2>{{ $t('admin.forum.title') }}</h2>
+
+        <div class="forum-list">
+            <h3>{{ $t('admin.forum.currentForums') }}</h3>
+            <ul>
+                <li v-for="forum in forums" :key="forum.id" class="forum-item">
+                    <div class="forum-info">
+                        <strong>{{ forum.name }}</strong>
+                        <button @click="editForum(forum)" class="btn btn-sm">{{ $t('admin.forum.edit') }}</button>
+                        <button @click="confirmDelete(forum)" class="btn btn-sm btn-danger">{{ $t('admin.forum.delete')
+                            }}</button>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div class="create-forum">
+            <h3 v-if="!inEdit">{{ $t('admin.forum.createForum') }}</h3>
+            <h3 v-else>{{ $t('admin.forum.editForum') }}</h3>
+            <button v-if="inEdit" @click="toggleToNewForum">{{  $t('admin.forum.toggleToNewForum') }}</button>
+            <form @submit.prevent="submitNewForum">
+                <div>
+                    <label for="name">{{ $t('admin.forum.forumName') }}</label>
+                    <input v-model="newForum.name" id="name" type="text" required />
+                </div>
+                <div>
+                    <label for="permissions">{{ $t('admin.forum.permissions.label') }}</label>
+                    <multiselect v-model="newForum.permissions" :options="permissionsOptions" :multiple="true"
+                        :close-on-select="false" :clear-on-select="false" :preserve-search="true"
+                        :placeholder="$t('admin.forum.selectPermissions')" label="label" track-by="value">
+                        <template v-slot:option="option">
+                            {{ $t(`admin.${option.option.label}`) }}
+                        </template>
+                        <template v-slot:tag="tag">
+                            <span>{{ $t(`admin.${tag.option.label}`) }}</span>
+                        </template>
+                    </multiselect>
+                </div>
+                <button type="submit" class="btn btn-primary">{{ $t('admin.forum.create') }}</button>
+            </form>
+        </div>
+        <choose-dialog ref="confirmDialog" />
+    </div>
+</template>
+
+<script>
+import apiClient from '@/utils/axios.js';
+import ChooseDialog from '@/dialogues/standard/ChooseDialog.vue';
+import Multiselect from 'vue-multiselect';
+
+export default {
+    name: 'ForumsAdminView',
+    components: {
+        ChooseDialog,
+        Multiselect,
+    },
+    data() {
+        return {
+            forums: [],
+            newForum: {
+                name: '',
+                permissions: [],
+            },
+            permissionsOptions: [
+                { value: 'all', label: this.$t('forum.permissions.all') },
+                { value: 'admin', label: this.$t('forum.permissions.admin') },
+                { value: 'teammember', label: this.$t('forum.permissions.teammember') },
+                { value: 'user', label: this.$t('forum.permissions.user') },
+                { value: 'age', label: this.$t('forum.permissions.age') },
+            ],
+            inEdit: false,
+        };
+    },
+    methods: {
+        async loadForums() {
+            try {
+                const response = await apiClient.get('/api/forum');
+                this.forums = response.data;
+            } catch (error) {
+                console.error('Error loading forums:', error);
+            }
+        },
+        async submitNewForum() {
+            try {
+                await apiClient.post('/api/forum', {
+                    name: this.newForum.name,
+                    permissions: this.newForum.permissions,
+                });
+                this.newForum.name = '';
+                this.newForum.permissions = [];
+                this.loadForums(); 
+            } catch (error) {
+                console.error('Error creating forum:', error);
+            }
+        },
+        editForum(forum) {
+            this.inEdit = true;
+            this.newForum.name = forum.name;
+            this.newForum.permissions = forum.permissions;
+        },
+        toggleToNewForum() {
+            this.inEdit = false;
+            this.newForum.name = '';
+            this.newForum.permissions = '';
+        },
+        async deleteForum(forum) {
+            try {
+                await apiClient.delete(`/api/forum/${forum.id}`);
+                this.loadForums();
+            } catch (error) {
+                console.error('Error deleting forum:', error);
+            }
+        },
+        async confirmDelete(forum) {
+            const confirmed = await this.$refs.confirmDialog.open({
+                title: this.$t('admin.forum.confirmDeleteTitle'),
+                message: this.$t('admin.forum.confirmDeleteMessage', { forumName: forum.name }),
+            });
+            if (confirmed) {
+                this.deleteForum(forum);
+            }
+        },
+    },
+    mounted() {
+        this.loadForums();
+    },
+};
+</script>
+
+<style scoped>
+.forums-admin {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.forum-list ul {
+    list-style: none;
+    padding: 0;
+}
+
+.forum-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    border-bottom: 1px solid #ccc;
+}
+
+.forum-info {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.forum-info > strong {
+    flex: 1;
+}
+
+.create-forum form {
+    margin-top: 20px;
+}
+
+.create-forum form div {
+    margin-bottom: 10px;
+}
+</style>
--- a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
@@ -1,7 +1,7 @@
 <template>
    <DialogWidget ref="dialog" :title="$t('socialnetwork.profile.pretitle')" :isTitleTranslated="isTitleTranslated"
-        :show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog"
-        height="75%">
+        :show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog" height="75%"
+        name="UserProfileDialog">
        <div class="dialog-body">
            <div>
                <ul class="tab-list">
@@ -49,7 +49,8 @@
                                    <img :src="imagePreview" alt="Image Preview"
                                        style="max-width: 100px; max-height: 100px;" />
                                </div>
-                                <editor v-model="newEntryContent" :init="tinymceInitOptions" :api-key="apiKey"></editor>
+                                <editor v-model="newEntryContent" :init="tinymceInitOptions" :api-key="apiKey"
+                                    tinymce-script-src="/tinymce/tinymce.min.js"></editor>
                            </div>
                            <button @click="submitGuestbookEntry">{{ $t('socialnetwork.profile.guestbook.submit')
                                }}</button>
@@ -97,20 +98,14 @@ export default {
        FolderItem,
        editor: TinyMCEEditor,
    },
-    props: {
-        userId: {
-            type: String,
-            required: true
-        }
-    },
    data() {
        return {
            isTitleTranslated: true,
            userProfile: {},
            activeTab: 'general',
-            userId: '',
            folders: [],
            images: [],
+            userId: 0,
            selectedFolder: null,
            newEntryContent: '',
            guestbookEntries: [],
@@ -126,18 +121,22 @@ export default {
            ],
            apiKey: import.meta.env.VITE_TINYMCE_API_KEY,
            tinymceInitOptions: {
+                script_url: '/tinymce/tinymce.min.js',
                height: 300,
-                menubar: false,
+                menubar: true,
                plugins: [
-                    'advlist autolink lists link image charmap print preview anchor',
-                    'searchreplace visualblocks code fullscreen',
-                    'insertdatetime media table paste code help wordcount'
+                    'lists', 'link',
+                    'searchreplace', 'visualblocks', 'code',
+                    'insertdatetime', 'table'
                ],
                toolbar:
-                    'undo redo cut copy paste | bold italic forecolor fontfamily fontsize | \
+                    'undo redo cut copy paste | bold italic forecolor backcolor fontfamily fontsize| \
                    alignleft aligncenter alignright alignjustify | \
-                    bullist numlist outdent indent | removeformat | help'
-            }
+                    bullist numlist outdent indent | removeformat | link visualblocks code',
+                contextmenu: 'link image table',
+                menubar: 'edit format table',
+                promotion: false,
+            },
        };
    },
    methods: {
--- a/frontend/src/dialogues/standard/ChooseDialog.vue
+++ b/frontend/src/dialogues/standard/ChooseDialog.vue
@@ -1,6 +1,6 @@
 <template>
    <DialogWidget ref="dialog" :title="title" :icon="icon" :show-close="true" :buttons="dialogButtons" :modal="true"
-        :isTitleTranslated="false" width="30em" height="15em">
+        :isTitleTranslated="false" width="30em" height="15em" name="ChooseDialog">
        <div class="dialog-body">
            <p>{{ message }}</p>
        </div>
@@ -21,6 +21,7 @@ export default {
            message: "Sind Sie sicher?",
            icon: null,
            resolve: null,
+            dialogButtons: []
        };
    },
    methods: {
--- a/frontend/src/dialogues/standard/ContactDialog.vue
+++ b/frontend/src/dialogues/standard/ContactDialog.vue
@@ -1,7 +1,7 @@
 <template>
    <DialogWidget ref="dialog" title="contact.title" :isTitleTranslated="true" icon="contact24.png" :show-close="true"
        :buttons="[{ text: 'Ok', action: 'save' }, { text: 'Cancel', action: 'close' }]" :modal="false" @save="save"
-        :width="'50em'">
+        :width="'50em'" name="ContactDialog">
        <table>
            <tr>
                <td>{{ $t("dialog.contact.email") }}</td>
--- a/frontend/src/dialogues/standard/DataPrivacyDialog.vue
+++ b/frontend/src/dialogues/standard/DataPrivacyDialog.vue
@@ -9,6 +9,7 @@
        :modal=false
        @close="closeDialog"
        @ok="handleOk"
+        name="DataPrivacyDialog"
    >
        <div v-html="dataPrivacyContent"></div>
    </DialogWidget>
--- a/frontend/src/dialogues/standard/ImprintDialog.vue
+++ b/frontend/src/dialogues/standard/ImprintDialog.vue
@@ -9,6 +9,7 @@
        :modal=false
        @close="closeDialog"
        @ok="handleOk"
+        name="ImprintDialog"
    >
        <div v-html="imprintContent"></div>
    </DialogWidget>
--- a/frontend/src/i18n/locales/de/admin.json
+++ b/frontend/src/i18n/locales/de/admin.json
@@ -22,6 +22,26 @@
        },
        "editcontactrequest": {
            "title": "[Admin] - Kontaktanfrage bearbeiten"
+        },
+        "forum": {
+            "title": "[Admin] - Forum",
+            "currentForums": "Existierende Foren",
+            "edit": "Ändern",
+            "delete": "Löschen",
+            "createForum": "Anlegen",
+            "forumName": "Titel",
+            "create": "Anlegen",
+            "permissions": {
+                "label": "Berechtigungen",
+                "all": "Jeder",
+                "admin": "Nur Admins",
+                "teammember": "Nur Teammitglieder",
+                "user": "Nur bestimmte Benutzer",
+                "age": "Nur ab Alter 14"
+            },
+            "selectPermissions": "Bitte auswählen",
+            "confirmDeleteMessage": "Soll das Forum wirklich gelöscht werden?",
+            "confirmDeleteTitle": "Forum löschen"
        }
    }
 }
--- a/frontend/src/i18n/locales/de/socialnetwork.json
+++ b/frontend/src/i18n/locales/de/socialnetwork.json
@@ -196,6 +196,40 @@
            "prevPage": "Zurück",
            "nextPage": "Weiter",
            "page": "Seite"
+        },
+        "diary": {
+            "title": "Tagebuch",
+            "noEntries": "Du hast noch keine Tagebucheinträge gemacht.",
+            "newEntry": "Neuer Tagebucheintrag",
+            "editEntry": "Tagebucheintrag ändern",
+            "save": "Speichern",
+            "update": "Ändern",
+            "cancel": "Abbrechen",
+            "edit": "Ändern",
+            "delete": "Löschen",
+            "confirmDelete": "Willst Du den Eintrag wirklich löschen?",
+            "prevPage": "Zurück",
+            "nextPage": "Weiter",
+            "page": "Seite"
+        },
+        "forum": {
+            "title": "Forum",
+            "showNewTopic": "Neues Thema erstellen",
+            "hideNewTopic": "Erstellen unterbrechen",
+            "noTitles": "Keine Themen vorhanden",
+            "topic": "Thema",
+            "createNewTopic": "Thema anlegen",
+            "createdBy": "Erstellt von",
+            "createdAt": "Erstellt am",
+            "reactions": "Reaktion",
+            "lastReaction": "Letzte Reaktion von",
+            "pagination": {
+                "first": "Erste Seite",
+                "previous": "Vorherige Seite",
+                "next": "Nächste Seite",
+                "last": "Letzte Seite",
+                "page": "Seite <<page>> von <<of>>"
+            }
        }
    }
 }
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -13,6 +13,9 @@ import AdminContactsView from '../views/admin/ContactsView.vue';
 import SearchView from '../views/social/SearchView.vue';
 import GalleryView from '../views/social/GalleryView.vue';
 import GuestbookView from '../views/social/GuestbookView.vue';
+import DiaryView from '../views/social/DiaryView.vue';
+import ForumAdminView from '../dialogues/admin/ForumAdminView.vue';
+import ForumView from '../views/social/ForumView.vue';

 const routes = [
  {
@@ -43,6 +46,18 @@ const routes = [
    component: GalleryView,
    meta: { requiresAuth: true }
  },
+  {
+    path: '/socialnetwork/forum/:id',
+    name: 'Forum',
+    component: ForumView,
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/socialnetwork/diary',
+    name: 'Diary',
+    component: DiaryView,
+    meta: { requiresAuth: true }
+  },
  {
    path: '/settings/personal',
    name: 'Personal settings',
@@ -91,6 +106,12 @@ const routes = [
    component: AdminContactsView,
    meta: { requiresAuth: true }
  },
+  {
+    path: '/admin/forum',
+    name: 'AdminForums',
+    component: ForumAdminView,
+    meta: { requiresAuth: true }
+  }
 ];


--- a/frontend/src/views/social/DiaryView.vue
+++ b/frontend/src/views/social/DiaryView.vue
@@ -0,0 +1,184 @@
+<template>
+    <h2>{{ $t('socialnetwork.diary.title') }}</h2>
+
+    <div class="new-entry-section">
+        <h3>{{ isEditing ? $t('socialnetwork.diary.editEntry') : $t('socialnetwork.diary.newEntry') }}</h3>
+        <textarea v-model="newEntryText" placeholder="Write your diary entry..."></textarea>
+        <div class="form-actions">
+            <button @click="saveEntry">{{ isEditing ? $t('socialnetwork.diary.update') : $t('socialnetwork.diary.save')
+                }}</button>
+            <button v-if="isEditing" @click="cancelEdit">{{ $t('socialnetwork.diary.cancel') }}</button>
+        </div>
+    </div>
+
+    <div v-if="diaryEntries.length === 0">{{ $t('socialnetwork.diary.noEntries') }}</div>
+    <div v-else class="diary-entries">
+        <div v-for="entry in diaryEntries" :key="entry.id" class="diary-entry">
+            <p v-html="entry.text"></p>
+            <div class="entry-info">
+                <span class="entry-timestamp">{{ new Date(entry.createdAt).toLocaleString() }}</span>
+                <span class="entry-actions">
+                    <span @click="editEntry(entry)" class="button" :title="$t('socialnetwork.diary.edit')">✎</span>
+                    <span @click="deleteEntry(entry.id)" class="button" :title="$t('socialnetwork.diary.delete')">✖</span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class=" pagination">
+        <button @click="loadDiaryEntries(currentPage - 1)" v-if="currentPage !== 1">{{
+            $t('socialnetwork.diary.prevPage') }}</button>
+        <span>{{ $t('socialnetwork.diary.page') }} {{ currentPage }} / {{ totalPages }}</span>
+        <button @click="loadDiaryEntries(currentPage + 1)" v-if="currentPage < totalPages">{{
+            $t('socialnetwork.diary.nextPage') }}</button>
+    </div>
+    <ChooseDialog ref="chooseDialog" />
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import apiClient from '@/utils/axios.js';
+import ChooseDialog from "@/dialogues/standard/ChooseDialog.vue";
+
+export default {
+    name: 'DiaryView',
+    components: {
+        ChooseDialog
+    },
+    data() {
+        return {
+            diaryEntries: [],
+            newEntryText: '', 
+            currentPage: 1,
+            totalPages: 1,
+            isEditing: false, 
+            editingEntryId: null,
+        };
+    },
+    computed: {
+        ...mapGetters(['user']),
+    },
+    methods: {
+        async loadDiaryEntries(page) {
+            try {
+                console.log(page);
+                const response = await apiClient.get(`/api/socialnetwork/diary/${page}`);
+                this.diaryEntries = response.data.entries;
+                this.currentPage = page;
+                this.totalPages = response.data.totalPages;
+            } catch (error) {
+                console.error('Error loading diary entries:', error);
+            }
+        },
+
+        async saveEntry() {
+            if (!this.newEntryText) return;
+
+            try {
+                if (this.isEditing) {
+                    await apiClient.put(`/api/socialnetwork/diary/${this.editingEntryId}`, {
+                        text: this.newEntryText,
+                    });
+                    this.isEditing = false;
+                    this.editingEntryId = null;
+                } else {
+                    await apiClient.post(`/api/socialnetwork/diary`, {
+                        text: this.newEntryText,
+                        userId: this.user.id,
+                    });
+                }
+                this.newEntryText = '';
+                this.loadDiaryEntries(this.currentPage);
+            } catch (error) {
+                console.error('Error saving entry:', error);
+            }
+        },
+
+        editEntry(entry) {
+            this.isEditing = true;
+            this.newEntryText = entry.text;
+            this.editingEntryId = entry.id;
+        },
+
+        cancelEdit() {
+            this.isEditing = false;
+            this.newEntryText = '';
+            this.editingEntryId = null;
+        },
+
+        async confirmDeleteEntry(entryId) {
+            const confirmed = await this.$refs.chooseDialog.open({
+                title: this.$t('socialnetwork.diary.confirmDeleteTitle'),
+                message: this.$t('socialnetwork.diary.confirmDeleteMessage')
+            });
+
+            if (confirmed) {
+                this.deleteEntry(entryId);
+            }
+        },
+
+        async deleteEntry(entryId) {
+            try {
+                await apiClient.delete(`/api/socialnetwork/diary/${entryId}`);
+                this.loadDiaryEntries(this.currentPage);
+            } catch (error) {
+                console.error('Error deleting entry:', error);
+            }
+        }
+    },
+    mounted() {
+        this.loadDiaryEntries(1);
+    },
+};
+</script>
+
+<style scoped>
+.new-entry-section {
+    margin-bottom: 20px;
+}
+
+textarea {
+    width: 100%;
+    height: 100px;
+    margin-bottom: 10px;
+}
+
+.form-actions button {
+    margin-right: 10px;
+}
+
+.diary-entry {
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+}
+
+.entry-info {
+    color: gray;
+    display: flex;
+    flex-direction: row;
+}
+
+.entry-timestamp {
+        font-size: 0.8em;
+}
+.entry-actions {
+    flex: 1;
+    text-align: right;
+}
+.entry-actions button {
+    margin-right: 10px;
+}
+
+.pagination {
+    margin-top: 1em;
+    background-color: #7BBE55;
+    color: #fff;
+    padding: 0.5em 0;
+}
+
+.diary-entries {
+    width: 400px;
+}
+
+</style>
--- a/frontend/src/views/social/ForumView.vue
+++ b/frontend/src/views/social/ForumView.vue
@@ -0,0 +1,185 @@
+<template>
+    <h2>{{ $t('socialnetwork.forum.title') }} {{ forumName }}</h2>
+    <div class="creationtoggler">
+        <button @click="createNewTopic">{{ $t(!inCreation ? 'socialnetwork.forum.showNewTopic' :
+            'socialnetwork.forum.hideNewTopic') }}</button>
+    </div>
+    <div v-if="inCreation">
+        <div>
+            <label class="newtitle">
+                {{ $t('socialnetwork.forum.topic') }}
+                <input type="text" v-model="newTitle" />
+            </label>
+        </div>
+        <editor v-model="newEntryContent" :init="tinymceInitOptions" :api-key="apiKey"
+            tinymce-script-src="/tinymce/tinymce.min.js"></editor>
+        <button @click="saveNewTopic">{{ $t('socialnetwork.forum.createNewTopic') }}</button>
+    </div>
+    <div v-else-if="titles.length > 0">
+        <div class="pagination">
+            <button @click="goToPage(1)" v-if="page != 1">&laquo; {{ $t('socialnetwork.forum.pagination.first')
+                }}</button>
+            <button @click="goToPage(page - 1)" v-if="page != 1">&lsaquo; {{
+                $t('socialnetwork.forum.pagination.previous') }}</button>
+            <span>{{ $t('socialnetwork.forum.pagination.page').replace("<<page>>", page).replace("<<of>>", totalPages)
+                        }}</span>
+            <button @click="goToPage(page + 1)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.next')
+                }}
+                &rsaquo;</button>
+            <button @click="goToPage(totalPages)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.last')
+                }}
+                &raquo;</button>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>{{ $t('socialnetwork.forum.topic') }}</th>
+                    <th>{{ $t('socialnetwork.forum.createdBy') }}</th>
+                    <th>{{ $t('socialnetwork.forum.createdAt') }}</th>
+                    <th>{{ $t('socialnetwork.forum.reactions') }}</th>
+                    <th>{{ $t('socialnetwork.forum.lastReaction') }}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="title in titles">
+                    <td><span class="link" @click="openTopic(title.id)">{{ title.title }}</span></td>
+                    <td><span class="link" @click="openProfile(title.createdByHash)">{{ title.createdBy }}</span></td>
+                    <td>{{ new Date(title.createdAt).toLocaleString() }}</td>
+                    <td>{{ title.numberOfItems }}</td>
+                    <td>{{ new Date(title.lastMessageDate).toLocaleString() }}</td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="pagination">
+            <button @click="goToPage(1)" v-if="page != 1">&laquo; {{ $t('socialnetwork.forum.pagination.first')
+                }}</button>
+            <button @click="goToPage(page - 1)" v-if="page != 1">&lsaquo; {{
+                $t('socialnetwork.forum.pagination.previous') }}</button>
+            <span>{{ $t('socialnetwork.forum.pagination.page').replace("<<page>>", page).replace("<<of>>", totalPages)
+                        }}</span>
+            <button @click="goToPage(page + 1)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.next')
+                }}
+                &rsaquo;</button>
+            <button @click="goToPage(totalPages)" v-if="page != totalPages">{{ $t('socialnetwork.forum.pagination.last')
+                }}
+                &raquo;</button>
+        </div>
+    </div>
+    <div v-else>{{ $t('socialnetwork.forum.noTitles') }}</div>
+</template>
+
+<script>
+import apiClient from '../../utils/axios';
+import TinyMCEEditor from '@tinymce/tinymce-vue';
+
+export default {
+    name: 'ForumView',
+    components: {
+        editor: TinyMCEEditor,
+    },
+    computed: {
+        totalPages() {
+            return Math.ceil(this.numberOfItems / 25);
+        }
+    },
+    data() {
+        return {
+            forumName: 'test',
+            forumId: 0,
+            page: 1,
+            numberOfItems: 0,
+            titles: [],
+            inCreation: false,
+            newTitle: '',
+            newContent: '',
+            apiKey: import.meta.env.VITE_TINYMCE_API_KEY ?? '',
+            tinymceInitOptions: {
+                script_url: '/tinymce/tinymce.min.js',
+                height: 300,
+                menubar: true,
+                plugins: [
+                    'lists', 'link',
+                    'searchreplace', 'visualblocks', 'code',
+                    'insertdatetime', 'table'
+                ],
+                toolbar:
+                    'undo redo cut copy paste | bold italic forecolor backcolor fontfamily fontsize| \
+                    alignleft aligncenter alignright alignjustify | \
+                    bullist numlist outdent indent | removeformat | link visualblocks code',
+                contextmenu: 'link image table',
+                menubar: 'edit format table',
+                promotion: false,
+            },
+        }
+    },
+    async mounted() {
+        this.forumId = this.$route.params.id;
+        await this.loadForum();
+    },
+    methods: {
+        async loadForum() {
+            const response = await apiClient.get(`/api/forum/${this.forumId}/${this.page}`);
+            this.setData(response.data);
+        },
+        createNewTopic() {
+            this.inCreation = !this.inCreation;
+        },
+        async saveNewTopic() {
+            const response = await apiClient.post('/api/forum/topic', {
+                forumId: this.forumId,
+                title: this.newTitle,
+                content: this.newEntryContent
+            });
+            this.setData(response.data);
+            this.inCreation = false;
+        },
+        setData(data) {
+            this.forumName = data.name;
+            this.titles = data.titles;
+            this.page = data.page;
+            this.numberOfItems = data.totalTopics;
+        },
+        goToPage(page) {
+            if (page >= 1 && page <= this.totalPages) {
+                this.page = page;
+                this.loadForum();
+            }
+        },
+        openProfile(id) {
+            this.$root.$refs.userProfileDialog.userId = id;
+            this.$root.$refs.userProfileDialog.open();
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.creationtoggler {
+    margin-bottom: 1em;
+}
+
+.newtitle {
+    display: flex;
+    gap: 1em;
+    vertical-align: middle;
+}
+
+.newtitle input {
+    flex: 1;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 0.5em;
+    margin: 1em 0;
+}
+
+.pagination button {
+    padding: 0.5em 1em;
+}
+
+.pagination span {
+    padding: 0.5em;
+}
+</style>
--- a/frontend/src/views/social/GuestbookView.vue
+++ b/frontend/src/views/social/GuestbookView.vue
@@ -49,7 +49,6 @@ export default {
            this.$router.push({ name: 'profile', params: { username } });
        },
        async loadGuestbookEntries(page) {
-            console.log(page);
            try {
                const response = await apiClient.get(`/api/socialnetwork/guestbook/entries/${this.user.username}/${page}`);
                this.guestbookEntries = response.data.entries;
@@ -63,7 +62,6 @@ export default {
            } catch (error) {
                console.error('Fehler beim Laden der Gästebucheinträge:', error);
            }
-            console.log('page changed', this.currentPage);
        },
        async fetchGuestbookImage(guestbookOwnerName, entry) {
            try {
@@ -77,7 +75,6 @@ export default {
        },
    },
    mounted() {
-        console.log('get it');
        this.loadGuestbookEntries(1);
    },
 }