320 lines
11 KiB
Vue
320 lines
11 KiB
Vue
<template>
|
|
<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") }}
|
|
<input type="number" v-model="agefromsearch" min="18" max="150" size="5" />
|
|
-
|
|
<input type="number" v-model="agetosearch" min="18" max="150" size="5" />
|
|
<span class="multiselect">
|
|
{{ $t("randomchat.gendersearch") }}
|
|
<div>
|
|
<label><input type="checkbox" v-model="searchmale" />{{ $t("randomchat.gender.male") }}</label>
|
|
<label><input type="checkbox" v-model="searchfemale" />{{ $t("randomchat.gender.female")
|
|
}}</label>
|
|
</div>
|
|
</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')" />
|
|
<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>
|
|
</div>
|
|
<div class="output">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
<div>
|
|
<button @click="startRandomChat()">{{ $t("randomchat.start") }}</button>
|
|
</div>
|
|
</div>
|
|
</DialogWidget>
|
|
</template>
|
|
|
|
<script>
|
|
import DialogWidget from '@/components/DialogWidget.vue';
|
|
import { mapGetters } from 'vuex';
|
|
import axios from 'axios';
|
|
|
|
export default {
|
|
name: 'RandomChatDialog',
|
|
components: {
|
|
DialogWidget,
|
|
},
|
|
computed: {
|
|
...mapGetters(['isLoggedIn', 'user']),
|
|
buttons() {
|
|
return [{ text: this.$t('randomchat.close') }];
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chatIsRunning: false,
|
|
age: 18,
|
|
gender: 'f',
|
|
agefromsearch: 18,
|
|
agetosearch: 150,
|
|
searchmale: true,
|
|
searchfemale: true,
|
|
camonlysearch: false,
|
|
showcam: false,
|
|
autosearch: false,
|
|
inputtext: '',
|
|
searching: false,
|
|
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,
|
|
});
|
|
this.userId = response.data.id;
|
|
} catch (error) {
|
|
console.error('Error registering user:', error);
|
|
}
|
|
},
|
|
|
|
async closeDialog() {
|
|
this.$refs.dialog.close();
|
|
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.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,
|
|
});
|
|
if (response.data.status === 'matched') {
|
|
this.searching = false;
|
|
clearInterval(this.searchInterval);
|
|
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.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()) 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 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(...newMsgs);
|
|
},
|
|
|
|
async removeUserFromChat() {
|
|
try {
|
|
await axios.post('/api/chat/remove', { id: this.userId });
|
|
} catch (error) {
|
|
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' });
|
|
}
|
|
},
|
|
|
|
renderMessage(message) {
|
|
if (message.type === 'system') {
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
.randomchat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.randomchat>div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.randomchat>.headline {
|
|
gap: 1.5em;
|
|
}
|
|
|
|
.multiselect {
|
|
border: 1px solid black;
|
|
position: relative;
|
|
padding: 0.1em;
|
|
}
|
|
|
|
.multiselect>div {
|
|
border: 1px solid black;
|
|
position: absolute;
|
|
top: 1.5em;
|
|
left: -1px;
|
|
text-align: left;
|
|
background-color: rgba(256, 256, 256, 0.9);
|
|
display: none;
|
|
}
|
|
|
|
.multiselect:hover>div {
|
|
display: inline-block;
|
|
}
|
|
|
|
.output {
|
|
border: 1px solid #909090;
|
|
padding: 0.2em;
|
|
overflow: auto;
|
|
flex: 1;
|
|
flex-direction: column !important;
|
|
text-align: left;
|
|
}
|
|
|
|
.inputline {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.inputline>label {
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.inputline>label>input {
|
|
flex: 1;
|
|
}
|
|
</style>
|