Changed menu that dialogues can be opened too; added random chat
This commit is contained in:
Torsten Schulz
@@ -78,15 +78,21 @@ const menuStructure = {
|
||||
children: {
|
||||
multiChat: {
|
||||
visible: ["over12"],
|
||||
action: "openMultiChat"
|
||||
action: "openMultiChat",
|
||||
view: "window",
|
||||
class: "multiChatWindow"
|
||||
},
|
||||
randomChat: {
|
||||
visible: ["over12"],
|
||||
action: "openRanomChat"
|
||||
action: "openRanomChat",
|
||||
view: "window",
|
||||
class: "randomChatDialog"
|
||||
},
|
||||
eroticChat: {
|
||||
visible: ["over18"],
|
||||
action: "openEroticChat"
|
||||
action: "openEroticChat",
|
||||
view: "window",
|
||||
class: "eroticChatWindow"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,50 +1,104 @@
|
||||
<template>
|
||||
<nav>
|
||||
<ul>
|
||||
<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"> </span>
|
||||
<!-- Hauptmenü -->
|
||||
<li
|
||||
v-for="(item, key) in menu"
|
||||
:key="key"
|
||||
class="mainmenuitem"
|
||||
@click="handleItem(item, $event)"
|
||||
>
|
||||
<span
|
||||
v-if="item.icon"
|
||||
:style="`background-image:url('/images/icons/${item.icon}')`"
|
||||
class="menu-icon"
|
||||
> </span>
|
||||
<span>{{ $t(`navigation.${key}`) }}</span>
|
||||
|
||||
<!-- Untermenü Ebene 1 -->
|
||||
<ul v-if="item.children" class="submenu1">
|
||||
<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"> </span>
|
||||
<li
|
||||
v-for="(subitem, subkey) in item.children"
|
||||
:key="subkey"
|
||||
@click="handleItem(subitem, $event)"
|
||||
>
|
||||
<span
|
||||
v-if="subitem.icon"
|
||||
:style="`background-image:url('/images/icons/${subitem.icon}')`"
|
||||
class="submenu-icon"
|
||||
> </span>
|
||||
<span>{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
|
||||
<span v-if="subkey === 'forum'" class="subsubmenu">▶</span>
|
||||
<span v-else-if="subitem.children" class="subsubmenu">▶</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)">
|
||||
<span
|
||||
v-if="subkey === 'forum' || subitem.children"
|
||||
class="subsubmenu"
|
||||
>▶</span>
|
||||
|
||||
<!-- Forum‑Unterliste -->
|
||||
<ul
|
||||
v-if="subkey === 'forum' && forumList.length"
|
||||
class="submenu2"
|
||||
>
|
||||
<li
|
||||
v-for="forum in forumList"
|
||||
:key="forum.id"
|
||||
@click="handleItem({ action: 'openForum', params: forum.id }, $event)"
|
||||
>
|
||||
{{ forum.name }}
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-else-if="subitem.children" class="submenu2">
|
||||
<li v-for="(subsubitem, subsubkey) in subitem.children" :key="subsubitem.text"
|
||||
@click="openPage(subsubitem.path ?? null)">
|
||||
<span v-if="subsubitem.icon" :style="`background-image:url('/images/icons/${subsubitem.icon}')`"
|
||||
class="submenu-icon"> </span>
|
||||
|
||||
<!-- Weiteres Untermenü Ebene 2 -->
|
||||
<ul
|
||||
v-else-if="subitem.children"
|
||||
class="submenu2"
|
||||
>
|
||||
<li
|
||||
v-for="(subsubitem, subsubkey) in subitem.children"
|
||||
:key="subsubkey"
|
||||
@click="handleItem(subsubitem, $event)"
|
||||
>
|
||||
<span
|
||||
v-if="subsubitem.icon"
|
||||
:style="`background-image:url('/images/icons/${subsubitem.icon}')`"
|
||||
class="submenu-icon"
|
||||
> </span>
|
||||
<span>{{ $t(`navigation.m-${key}.m-${subkey}.${subsubkey}`) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li v-if="item.showLoggedinFriends === 1 && friendsList.length > 0" v-for="friend in friendsList" :key="friend.id">
|
||||
|
||||
<!-- Eingeloggte Freunde -->
|
||||
<li
|
||||
v-if="item.showLoggedinFriends === 1 && friendsList.length"
|
||||
v-for="friend in friendsList"
|
||||
:key="friend.id"
|
||||
@click="handleItem({ action: 'openChat', params: friend.id }, $event)"
|
||||
>
|
||||
{{ friend.username }}
|
||||
<ul class="submenu2">
|
||||
<li @click="openChat(friend.id)">{{ $t('navigation.m-friends.chat') }}</li>
|
||||
<li @click="openProfile(friend.id)">{{ $t('navigation.m-friends.profile') }}</li>
|
||||
<li
|
||||
@click="handleItem({ action: 'openChat', params: friend.id }, $event)"
|
||||
>
|
||||
{{ $t('navigation.m-friends.chat') }}
|
||||
</li>
|
||||
<li
|
||||
@click="handleItem({ action: 'openProfile', params: friend.id }, $event)"
|
||||
>
|
||||
{{ $t('navigation.m-friends.profile') }}
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="submenu1">
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="right-block">
|
||||
<span @click="accessMailbox" class="mailbox"></span>
|
||||
<span class="logoutblock">
|
||||
<span class="username">{{ user.username }} </span>
|
||||
<span @click="logout" class="menuitem">{{ $t('navigation.logout') }}</span>
|
||||
<span class="username">{{ user.username }}</span>
|
||||
<span @click="logout" class="menuitem">
|
||||
{{ $t('navigation.logout') }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -52,109 +106,123 @@
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex';
|
||||
import { createApp } from 'vue';
|
||||
import apiClient from '@/utils/axios.js';
|
||||
|
||||
import RandomChatDialog from '../dialogues/chat/RandomChatDialog.vue';
|
||||
|
||||
// Wichtig: die zentrale Instanzen importieren
|
||||
import store from '@/store';
|
||||
import router from '@/router';
|
||||
import i18n from '@/i18n';
|
||||
|
||||
export default {
|
||||
name: 'AppNavigation',
|
||||
components: {
|
||||
RandomChatDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
forumList: [],
|
||||
friendsList: [],
|
||||
}
|
||||
friendsList: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['menu', 'user', 'menuNeedsUpdate', 'socket']),
|
||||
...mapGetters(['menu', 'user', 'menuNeedsUpdate', 'socket'])
|
||||
},
|
||||
watch: {
|
||||
menuNeedsUpdate(newValue) {
|
||||
if (newValue) {
|
||||
this.loadMenu();
|
||||
}
|
||||
menuNeedsUpdate(newVal) {
|
||||
if (newVal) this.loadMenu();
|
||||
},
|
||||
socket(newValue) {
|
||||
if (newValue) {
|
||||
newValue.on('forumschanged', (data) => {
|
||||
this.fetchForums();
|
||||
});
|
||||
newValue.on('friendloginchanged', () => {
|
||||
this.fetchFriends();
|
||||
});
|
||||
newValue.on('reloadmenu', () => {
|
||||
this.loadMenu();
|
||||
})
|
||||
socket(newSocket) {
|
||||
if (newSocket) {
|
||||
newSocket.on('forumschanged', this.fetchForums);
|
||||
newSocket.on('friendloginchanged', this.fetchFriends);
|
||||
newSocket.on('reloadmenu', this.loadMenu);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.user && this.user.id) {
|
||||
if (this.user?.id) {
|
||||
this.loadMenu();
|
||||
this.fetchForums();
|
||||
this.fetchFriends();
|
||||
} else {
|
||||
console.log(this.user);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$store.getters.socket) {
|
||||
this.$store.getters.socket.on('forumschanged', (data) => {
|
||||
this.fetchForums();
|
||||
});
|
||||
this.$store.getters.socket.on('friendloginchanged', () => {
|
||||
this.fetchFriends();
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.$store.getters.socket) {
|
||||
this.$store.getters.socket.off('forumschanged');
|
||||
this.$store.getters.socket.off('friendloginchanged');
|
||||
const sock = this.socket;
|
||||
if (sock) {
|
||||
sock.off('forumschanged');
|
||||
sock.off('friendloginchanged');
|
||||
sock.off('reloadmenu');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['loadMenu', 'logout']),
|
||||
openPage(url, hasSubmenu = false) {
|
||||
if (hasSubmenu) {
|
||||
return;
|
||||
}
|
||||
if (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);
|
||||
const res = await apiClient.get('/api/forum');
|
||||
this.forumList = res.data;
|
||||
} catch (err) {
|
||||
console.error('Error fetching forums:', err);
|
||||
}
|
||||
},
|
||||
|
||||
async fetchFriends() {
|
||||
try {
|
||||
const response = await apiClient.get('/api/socialnetwork/friends/loggedin');
|
||||
this.friendsList = response.data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching friends:', error);
|
||||
const res = await apiClient.get('/api/socialnetwork/friends/loggedin');
|
||||
this.friendsList = res.data;
|
||||
} catch (err) {
|
||||
console.error('Error fetching friends:', err);
|
||||
}
|
||||
},
|
||||
|
||||
async openProfile(hashedId) {
|
||||
console.log(hashedId);
|
||||
this.$root.$refs.userProfileDialog.userId = hashedId;
|
||||
openForum(forumId) {
|
||||
this.$router.push({ name: 'Forum', params: { id: forumId } });
|
||||
},
|
||||
|
||||
openProfile(userId) {
|
||||
this.$root.$refs.userProfileDialog.userId = userId;
|
||||
this.$root.$refs.userProfileDialog.open();
|
||||
},
|
||||
|
||||
async openChat(hashedId) {
|
||||
try {
|
||||
openChat(userId) {
|
||||
console.log('openChat:', userId);
|
||||
// Datei erstellen und ans body anhängen
|
||||
const container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
// Programmatisch ein neues App-Instance randomChatauen, mit Store, Router & i18n
|
||||
this.$root.$refs.randomChatDialog.open(contact);
|
||||
},
|
||||
|
||||
} catch (error) {
|
||||
/**
|
||||
* Einheitliche Klick‑Logik:
|
||||
* 1) Nur aufklappen, wenn noch Untermenüs existieren
|
||||
* 2) Bei `view`: Dialog/Window öffnen
|
||||
* 3) Bei `action`: custom action aufrufen
|
||||
* 4) Sonst: normale Router-Navigation
|
||||
*/
|
||||
handleItem(item, event) {
|
||||
event.stopPropagation();
|
||||
|
||||
// 1) nur aufklappen
|
||||
if (item.children) return;
|
||||
|
||||
// 2) view → Dialog/Window
|
||||
if (item.view) {
|
||||
this.$root.$refs[item.class].open();
|
||||
return;
|
||||
}
|
||||
|
||||
// 3) custom action (openForum, openChat, ...)
|
||||
if (item.action && typeof this[item.action] === 'function') {
|
||||
return this[item.action](item.params, event);
|
||||
}
|
||||
|
||||
// 4) Standard‑Navigation
|
||||
if (item.path) {
|
||||
this.$router.push(item.path);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -165,15 +233,15 @@ export default {
|
||||
@import '../assets/styles.scss';
|
||||
|
||||
nav,
|
||||
nav>ul {
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #F9A22C;
|
||||
color: #000000;
|
||||
background-color: #f9a22c;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
flex-direction: row;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
@@ -183,22 +251,22 @@ ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav>ul>li {
|
||||
nav > ul > li {
|
||||
padding: 0 1em;
|
||||
line-height: 2.5em;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
nav>ul>li:hover {
|
||||
background-color: #D37C06;
|
||||
nav > ul > li:hover {
|
||||
background-color: #d37c06;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav>ul>li:hover>span {
|
||||
color: #000000;
|
||||
nav > ul > li:hover > span {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
nav>ul>li:hover>ul {
|
||||
nav > ul > li:hover > ul {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -218,7 +286,7 @@ a {
|
||||
|
||||
.menuitem {
|
||||
cursor: pointer;
|
||||
color: #7E471B;
|
||||
color: #7e471b;
|
||||
}
|
||||
|
||||
.mailbox {
|
||||
@@ -236,84 +304,93 @@ a {
|
||||
|
||||
.submenu1 {
|
||||
position: absolute;
|
||||
border: 1px solid #7E471B;
|
||||
background-color: #F9A22C;
|
||||
border: 1px solid #7e471b;
|
||||
background-color: #f9a22c;
|
||||
left: 0;
|
||||
top: 2.5em;
|
||||
max-height: 0;
|
||||
overflow: visible;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s 0.05s;
|
||||
transition: max-height 0.25s ease-in-out,
|
||||
opacity 0.05s ease-in-out,
|
||||
visibility 0s 0.05s;
|
||||
}
|
||||
|
||||
.mainmenuitem:hover .submenu1 {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s;
|
||||
transition: max-height 0.25s ease-in-out,
|
||||
opacity 0.05s ease-in-out,
|
||||
visibility 0s;
|
||||
}
|
||||
|
||||
.submenu1>li {
|
||||
.submenu1 > li {
|
||||
padding: 0.5em;
|
||||
line-height: 1em;
|
||||
color: #7E471B;
|
||||
color: #7e471b;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.submenu1>li:hover {
|
||||
color: #000000;
|
||||
background-color: #D37C06;
|
||||
.submenu1 > li:hover {
|
||||
color: #000;
|
||||
background-color: #d37c06;
|
||||
}
|
||||
|
||||
.menu-icon,
|
||||
.submenu-icon {
|
||||
display: inline-block;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 3px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.submenu-icon {
|
||||
width: 1.2em;
|
||||
height: 1em;
|
||||
margin-right: 3px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
background-size: 1.2em 1.2em;
|
||||
}
|
||||
|
||||
.submenu2 {
|
||||
position: absolute;
|
||||
background-color: #F9A22C;
|
||||
background-color: #f9a22c;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
border: 1px solid #7E471B;
|
||||
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;
|
||||
transition: max-height 0.25s ease-in-out,
|
||||
opacity 0.05s ease-in-out,
|
||||
visibility 0s 0.05s;
|
||||
}
|
||||
|
||||
.submenu1>li:hover .submenu2 {
|
||||
.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;
|
||||
transition: max-height 0.25s ease-in-out,
|
||||
opacity 0.05s ease-in-out,
|
||||
visibility 0s;
|
||||
}
|
||||
|
||||
.submenu2>li {
|
||||
.submenu2 > li {
|
||||
padding: 0.5em;
|
||||
line-height: 1em;
|
||||
color: #7E471B;
|
||||
color: #7e471b;
|
||||
}
|
||||
|
||||
.submenu2>li:hover {
|
||||
color: #000000;
|
||||
background-color: #D37C06;
|
||||
.submenu2 > li:hover {
|
||||
color: #000;
|
||||
background-color: #d37c06;
|
||||
}
|
||||
|
||||
.subsubmenu {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<DialogWidget ref="dialog" title="randomchat.title" icon="dice24.png" :show-close=true :buttons="buttons"
|
||||
:modal=false :isTitleTranslated=true @close="closeDialog" name="RandomChat">
|
||||
<DialogWidget ref="dialog" title="randomchat.title" icon="dice24.png" :show-close="true" :buttons="buttons"
|
||||
:modal="false" :isTitleTranslated="true" @close="closeDialog" name="RandomChat">
|
||||
<div v-if="chatIsRunning" class="randomchat">
|
||||
<div class="headline">
|
||||
{{ $t("randomchat.agerange") }}
|
||||
@@ -17,31 +17,37 @@
|
||||
</span>
|
||||
<label><input type="checkbox" v-model="camonlysearch" />{{ $t("randomchat.camonly") }}</label>
|
||||
<label><input type="checkbox" v-model="showcam" />{{ $t("randomchat.showcam") }}</label>
|
||||
<img v-if="isLoggedIn" src="/images/icons/friendsadd16.png" ::tooltip="$t('randomchat.addfriend')" />
|
||||
<img v-if="isLoggedIn" src="/images/icons/friendsadd16.png" :tooltip="$t('randomchat.addfriend')" />
|
||||
<label><input type="checkbox" v-model="autosearch" />{{ $t("randomchat.autosearch") }}</label>
|
||||
<button @click="nextUser" v-if="partner != null">{{ $t("randomchat.jumptonext") }}</button>
|
||||
<button @click="startSearch" v-if="partner == null && !searching">{{ $t("randomchat.startsearch") }}</button>
|
||||
<button @click="startSearch" v-if="partner == null && !searching">{{ $t("randomchat.startsearch")
|
||||
}}</button>
|
||||
</div>
|
||||
<div class="output">
|
||||
<div v-for="message in messages" v-html="renderMessage(message)">
|
||||
</div>
|
||||
<div v-for="message in messages" v-html="renderMessage(message)" />
|
||||
</div>
|
||||
<div class="inputline">
|
||||
<label>{{ $t("randomchat.input") }} <input type="text" v-model="inputtext" @keyup.enter="sendMessage" /></label>
|
||||
<label>
|
||||
{{ $t("randomchat.input") }}
|
||||
<input type="text" v-model="inputtext" @keyup.enter="sendMessage" />
|
||||
</label>
|
||||
<img src="/images/icons/enter16.png" @click="sendMessage" />
|
||||
<img src="/images/icons/dice16.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<label>{{ $t("randomchat.age") }} <input type="number" v-model="age" min="18" max="150"
|
||||
value="18" /></label>
|
||||
<label>{{ $t("randomchat.age") }}
|
||||
<input type="number" v-model="age" min="18" max="150" value="18" />
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>{{ $t("randomchat.gender.title") }} <select v-model="gender">
|
||||
<label>{{ $t("randomchat.gender.title") }}
|
||||
<select v-model="gender">
|
||||
<option value="f">{{ $t("randomchat.gender.female") }}</option>
|
||||
<option value="m">{{ $t("randomchat.gender.male") }}</option>
|
||||
</select></label>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="startRandomChat()">{{ $t("randomchat.start") }}</button>
|
||||
@@ -61,122 +67,165 @@ export default {
|
||||
DialogWidget,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isLoggedIn']),
|
||||
...mapGetters(['isLoggedIn', 'user']),
|
||||
buttons() {
|
||||
return [{ text: this.$t("randomchat.close")}];
|
||||
return [{ text: this.$t('randomchat.close') }];
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chatIsRunning: false,
|
||||
age: 18,
|
||||
gender: "f",
|
||||
gender: 'f',
|
||||
agefromsearch: 18,
|
||||
agetosearch: 150,
|
||||
searchmale: true,
|
||||
searchfemale: true,
|
||||
camonlysearch: false,
|
||||
showcam: false,
|
||||
autosearch: false,
|
||||
inputtext: '',
|
||||
searching: false,
|
||||
userId: null,
|
||||
userId: null, // ID, die vom Chat-Backend beim Register zurückkommt
|
||||
searchInterval: null,
|
||||
messages: [],
|
||||
partner: null,
|
||||
messagesInterval: null,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async open() {
|
||||
if (this.user && Array.isArray(this.user.param)) {
|
||||
const bdParam = this.user.param.find(p => p.name === 'birthdate')?.value;
|
||||
if (bdParam) {
|
||||
const birth = new Date(bdParam);
|
||||
const ageYears = Math.floor(
|
||||
(Date.now() - birth.getTime()) / (365.25 * 24 * 60 * 60 * 1000)
|
||||
);
|
||||
this.age = ageYears;
|
||||
}
|
||||
const gParam = this.user.param.find(p => p.name === 'gender')?.value;
|
||||
if (gParam != null) {
|
||||
// value==='1' ⇒ männlich
|
||||
this.gender = gParam === '1' ? 'm' : 'f';
|
||||
}
|
||||
}
|
||||
this.$refs.dialog.open();
|
||||
},
|
||||
|
||||
async closeDialog() {
|
||||
// ① Stoppe alle laufenden Intervalle
|
||||
if (this.searchInterval) {
|
||||
clearInterval(this.searchInterval);
|
||||
this.searchInterval = null;
|
||||
}
|
||||
if (this.messagesInterval) {
|
||||
clearInterval(this.messagesInterval);
|
||||
this.messagesInterval = null;
|
||||
}
|
||||
// ② verlasse Chat auf Server-Seite
|
||||
this.$refs.dialog.close();
|
||||
await axios.post('/api/chat/exit', { id: this.userId });
|
||||
await this.removeUserFromChat();
|
||||
// Reset-Status
|
||||
this.chatIsRunning = false;
|
||||
this.partner = null;
|
||||
this.messages = [];
|
||||
},
|
||||
|
||||
async registerUser() {
|
||||
try {
|
||||
const response = await axios.post('/api/chat/register', {
|
||||
gender: this.gender,
|
||||
age: this.age
|
||||
age: this.age,
|
||||
});
|
||||
this.userId = response.data.id;
|
||||
} catch (error) {
|
||||
console.error('Error registering user:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async closeDialog() {
|
||||
this.$refs.dialog.close();
|
||||
await axios.push('/api/chat/exit', { id: this.userId })
|
||||
await axios.post('/api/chat/exit', { id: this.userId });
|
||||
await this.removeUserFromChat();
|
||||
},
|
||||
|
||||
async startRandomChat() {
|
||||
this.chatIsRunning = true;
|
||||
await this.registerUser();
|
||||
await this.startSearch();
|
||||
},
|
||||
|
||||
async startSearch() {
|
||||
this.searching = true;
|
||||
await this.findMatch();
|
||||
this.messages.push({ type: "system", tr: "randomchat.waitingForMatch" })
|
||||
this.messages.push({ type: 'system', tr: 'randomchat.waitingForMatch' });
|
||||
this.searchInterval = setInterval(this.findMatch, 500);
|
||||
},
|
||||
|
||||
async findMatch() {
|
||||
try {
|
||||
const response = await axios.post('/api/chat/findMatch', {
|
||||
genders: this.getSearchGenders(),
|
||||
age: {
|
||||
min: this.agefromsearch,
|
||||
max: this.agetosearch
|
||||
},
|
||||
id: this.userId
|
||||
age: { min: this.agefromsearch, max: this.agetosearch },
|
||||
id: this.userId,
|
||||
});
|
||||
if (response.data.status && response.data.status === 'matched') {
|
||||
if (response.data.status === 'matched') {
|
||||
this.searching = false;
|
||||
if (this.searchInterval) {
|
||||
clearInterval(this.searchInterval);
|
||||
this.searchInterval = null;
|
||||
}
|
||||
const initText = this.$t("randomchat.chatpartner")
|
||||
.replace("<gender>", this.$t(`randomchat.partnergender${response.data.user.gender}`))
|
||||
.replace("<age>", response.data.user.age);
|
||||
this.messages = [];
|
||||
this.messages.push({ "type": "system", text: initText })
|
||||
const initText = this.$t('randomchat.chatpartner')
|
||||
.replace(
|
||||
'<gender>',
|
||||
this.$t(`randomchat.partnergender${response.data.user.gender}`)
|
||||
)
|
||||
.replace('<age>', response.data.user.age);
|
||||
this.messages = [{ type: 'system', text: initText }];
|
||||
this.partner = response.data.user;
|
||||
this.messagesInterval = setInterval(this.getNewMessages, 250);
|
||||
} else {
|
||||
if (this.autosearch && !this.searching && ! this.searchInterval) {
|
||||
} else if (this.autosearch && !this.searchInterval) {
|
||||
this.searchInterval = setInterval(this.findMatch, 500);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error finding match:', error);
|
||||
}
|
||||
},
|
||||
|
||||
getSearchGenders() {
|
||||
const genders = [];
|
||||
if (this.searchmale) genders.push('m');
|
||||
if (this.searchfemale) genders.push('f');
|
||||
return genders;
|
||||
},
|
||||
|
||||
async sendMessage() {
|
||||
if (this.inputtext.trim() !== '') {
|
||||
const response = await axios.post('/api/chat/sendMessage', { from: this.userId, to: this.partner.id, text: this.inputtext });
|
||||
this.messages.push({ type: "self", text: response.data.text });
|
||||
if (!this.inputtext.trim()) return;
|
||||
const response = await axios.post('/api/chat/sendMessage', {
|
||||
from: this.userId,
|
||||
to: this.partner.id,
|
||||
text: this.inputtext,
|
||||
});
|
||||
this.messages.push({ type: 'self', text: response.data.text });
|
||||
this.inputtext = '';
|
||||
}
|
||||
},
|
||||
|
||||
async getNewMessages() {
|
||||
if (!this.partner) {
|
||||
return;
|
||||
}
|
||||
const response = await axios.post('/api/chat/getMessages', { to: this.userId, from: this.partner.id });
|
||||
const messages = response.data.filter(item => !item.activity);
|
||||
const activities = response.data.filter(item => item.activity);
|
||||
for (let i = 0; i < activities.length; ++i) {
|
||||
const activity = activities[i];
|
||||
if (activity.activity === 'otheruserleft') {
|
||||
if (!this.partner) return;
|
||||
const response = await axios.post('/api/chat/getMessages', {
|
||||
to: this.userId,
|
||||
from: this.partner.id,
|
||||
});
|
||||
const newMsgs = response.data.filter((m) => !m.activity);
|
||||
const activities = response.data.filter((m) => m.activity);
|
||||
activities.forEach((act) => {
|
||||
if (act.activity === 'otheruserleft') {
|
||||
this.partner = null;
|
||||
this.messages.push({ type: 'system', tr: 'randomchat.userleftchat' });
|
||||
}
|
||||
}
|
||||
this.messages.push(...messages);
|
||||
});
|
||||
this.messages.push(...newMsgs);
|
||||
},
|
||||
|
||||
async removeUserFromChat() {
|
||||
try {
|
||||
await axios.post('/api/chat/remove', { id: this.userId });
|
||||
@@ -184,31 +233,27 @@ export default {
|
||||
console.error('Error removing user from chat:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async nextUser() {
|
||||
await axios.post('/api/chat/leave', { id: this.userId });
|
||||
this.partner = null;
|
||||
this.messages.push({ type: 'system', tr: 'randomchat.selfstopped' });
|
||||
if (this.autosearch) {
|
||||
this.searchInterval = setInterval(this.findMatch, 500);
|
||||
this.messages.push({ type: "system", tr: "randomchat.waitingForMatch" })
|
||||
this.messages.push({ type: 'system', tr: 'randomchat.waitingForMatch' });
|
||||
}
|
||||
},
|
||||
|
||||
renderMessage(message) {
|
||||
let className = '';
|
||||
let tr = '';
|
||||
if (message.type === 'system') {
|
||||
const text = message.tr ? this.$t(message.tr) : message.text;
|
||||
return `<span class="rc-system">${text}</span>`;
|
||||
} else if (message.type === 'self') {
|
||||
className = 'rc-self';
|
||||
tr = this.$t('randomchat.self');
|
||||
} else {
|
||||
className = 'rc-partner';
|
||||
tr = this.$t('randomchat.partner');
|
||||
}
|
||||
return `<span class="${className}">${tr}: </span>${message.text}`;
|
||||
}
|
||||
const txt = message.tr ? this.$t(message.tr) : message.text;
|
||||
return `<span class="rc-system">${txt}</span>`;
|
||||
}
|
||||
const cls = message.type === 'self' ? 'rc-self' : 'rc-partner';
|
||||
const who = message.type === 'self' ? this.$t('randomchat.self') : this.$t('randomchat.partner');
|
||||
return `<span class="${cls}">${who}: </span>${message.text}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -271,5 +316,4 @@ export default {
|
||||
.inputline>label>input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -157,10 +157,8 @@ const store = createStore({
|
||||
|
||||
const retryConnection = (reconnectFn) => {
|
||||
setTimeout(() => {
|
||||
console.log('Retrying Daemon WebSocket connection...');
|
||||
reconnectFn();
|
||||
}, 1000);
|
||||
console.log('Retrying Daemon WebSocket connection...');
|
||||
};
|
||||
connectDaemonSocket();
|
||||
}
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<template>
|
||||
<h2>{{ $t('socialnetwork.forum.title') }} {{ forumName }}</h2>
|
||||
<div class="creationtoggler">
|
||||
<button @click="createNewTopic">{{ $t(!inCreation ? 'socialnetwork.forum.showNewTopic' :
|
||||
'socialnetwork.forum.hideNewTopic') }}</button>
|
||||
<button @click="createNewTopic">
|
||||
{{ $t(!inCreation
|
||||
? 'socialnetwork.forum.showNewTopic'
|
||||
: 'socialnetwork.forum.hideNewTopic') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="inCreation">
|
||||
<div>
|
||||
<label class="newtitle">
|
||||
@@ -14,13 +18,26 @@
|
||||
<div class="editor-container">
|
||||
<EditorContent :editor="editor" class="editor" />
|
||||
</div>
|
||||
<button @click="saveNewTopic">{{ $t('socialnetwork.forum.createNewTopic') }}</button>
|
||||
<button @click="saveNewTopic">
|
||||
{{ $t('socialnetwork.forum.createNewTopic') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else-if="titles.length > 0">
|
||||
<!-- PAGINATION + TABLE bleibt unverändert -->
|
||||
<!-- ... -->
|
||||
<!-- hier kommt deine bestehende TABLE + PAGINATION hin -->
|
||||
<table>
|
||||
<!-- Kopfzeile, Spalten etc. -->
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<button @click="goToPage(page-1)" :disabled="page<=1">‹</button>
|
||||
<span>{{ page }} / {{ totalPages }}</span>
|
||||
<button @click="goToPage(page+1)" :disabled="page>=totalPages">›</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
{{ $t('socialnetwork.forum.noTitles') }}
|
||||
</div>
|
||||
<div v-else>{{ $t('socialnetwork.forum.noTitles') }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -30,18 +47,10 @@ import apiClient from '../../utils/axios'
|
||||
|
||||
export default {
|
||||
name: 'ForumView',
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
computed: {
|
||||
totalPages() {
|
||||
return Math.ceil(this.numberOfItems / 25);
|
||||
}
|
||||
},
|
||||
components: { EditorContent },
|
||||
data() {
|
||||
return {
|
||||
forumName: 'test',
|
||||
forumId: 0,
|
||||
forumName: '',
|
||||
page: 1,
|
||||
numberOfItems: 0,
|
||||
titles: [],
|
||||
@@ -50,57 +59,94 @@ export default {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// Neu: Forum‑ID immer direkt aus der Route ziehen
|
||||
forumId() {
|
||||
return this.$route.params.id
|
||||
},
|
||||
totalPages() {
|
||||
return Math.ceil(this.numberOfItems / 25)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// Sobald sich die Route‑ID ändert, zurück auf Seite 1 und neu laden
|
||||
forumId: {
|
||||
handler() {
|
||||
this.page = 1
|
||||
this.loadForum()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// Wenn sich die Seite ändert, ebenfalls neu laden
|
||||
page(newPage, oldPage) {
|
||||
if (newPage !== oldPage) {
|
||||
this.loadForum()
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.forumId = this.$route.params.id;
|
||||
await this.loadForum();
|
||||
|
||||
// Editor initialisieren
|
||||
this.editor = new Editor({
|
||||
extensions: [StarterKit],
|
||||
content: '',
|
||||
});
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.editor) this.editor.destroy();
|
||||
if (this.editor) this.editor.destroy()
|
||||
},
|
||||
methods: {
|
||||
async loadForum() {
|
||||
const response = await apiClient.get(`/api/forum/${this.forumId}/${this.page}`);
|
||||
this.setData(response.data);
|
||||
try {
|
||||
const { data } = await apiClient.get(
|
||||
`/api/forum/${this.forumId}/${this.page}`
|
||||
)
|
||||
this.forumName = data.name
|
||||
this.titles = data.titles
|
||||
this.numberOfItems = data.totalTopics
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Laden des Forums', err)
|
||||
}
|
||||
},
|
||||
createNewTopic() {
|
||||
this.inCreation = !this.inCreation;
|
||||
this.inCreation = !this.inCreation
|
||||
if (this.inCreation && this.editor) {
|
||||
this.editor.commands.setContent('');
|
||||
this.editor.commands.setContent('')
|
||||
}
|
||||
},
|
||||
async saveNewTopic() {
|
||||
const content = this.editor ? this.editor.getHTML() : '';
|
||||
const response = await apiClient.post('/api/forum/topic', {
|
||||
const content = this.editor ? this.editor.getHTML() : ''
|
||||
if (!this.newTitle.trim() || !content.trim()) return
|
||||
try {
|
||||
const { data } = await apiClient.post(
|
||||
'/api/forum/topic',
|
||||
{
|
||||
forumId: this.forumId,
|
||||
title: this.newTitle,
|
||||
content,
|
||||
});
|
||||
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;
|
||||
content
|
||||
}
|
||||
)
|
||||
// Neu: Server kann aktuelle Liste zurückliefern
|
||||
this.forumName = data.name
|
||||
this.titles = data.titles
|
||||
this.numberOfItems = data.totalTopics
|
||||
this.page = data.page
|
||||
this.inCreation = false
|
||||
this.newTitle = ''
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Erstellen des Themas', err)
|
||||
}
|
||||
},
|
||||
goToPage(page) {
|
||||
if (page >= 1 && page <= this.totalPages) {
|
||||
this.page = page;
|
||||
this.loadForum();
|
||||
this.page = page
|
||||
}
|
||||
},
|
||||
openProfile(id) {
|
||||
this.$root.$refs.userProfileDialog.userId = id;
|
||||
this.$root.$refs.userProfileDialog.open();
|
||||
this.$root.$refs.userProfileDialog.userId = id
|
||||
this.$root.$refs.userProfileDialog.open()
|
||||
},
|
||||
openTopic(topicId) {
|
||||
this.$router.push(`/socialnetwork/forumtopic/${topicId}`);
|
||||
this.$router.push(`/socialnetwork/forumtopic/${topicId}`)
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -110,17 +156,14 @@ export default {
|
||||
.creationtoggler {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.newtitle {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.newtitle input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
margin: 1em 0;
|
||||
border: 1px solid #ccc;
|
||||
@@ -128,23 +171,19 @@ export default {
|
||||
min-height: 200px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.editor {
|
||||
min-height: 150px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.pagination span {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user