From e76fdbe1abc38458986d9390774cf78853daf422 Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Wed, 4 Mar 2026 22:42:48 +0100 Subject: [PATCH] Implement room creation panel in MultiChatDialog: Add functionality for users to create new chat rooms with customizable settings, including visibility, age restrictions, and password protection. Enhance UI with a toggle button and form for room details. --- .../src/dialogues/chat/MultiChatDialog.vue | 241 +++++++++++++++++- 1 file changed, 238 insertions(+), 3 deletions(-) diff --git a/frontend/src/dialogues/chat/MultiChatDialog.vue b/frontend/src/dialogues/chat/MultiChatDialog.vue index b2ebaef..4668afc 100644 --- a/frontend/src/dialogues/chat/MultiChatDialog.vue +++ b/frontend/src/dialogues/chat/MultiChatDialog.vue @@ -3,9 +3,14 @@ @close="onDialogClose" width="75vw" height="75vh" name="MultiChatDialog" icon="multichat24.png">
- - + + +
@@ -31,7 +36,7 @@
-
+
+
Neuen Raum erstellen
+
+ + + + + + + + + + +
+
+ + +
+
+ Kommando: {{ buildRoomCreateCommandPreview() || '/cr ' }} +
+
Teilnehmer ({{ usersInRoom.length }})
@@ -168,10 +238,23 @@ export default { token: null, announcedRoomEnter: false, showColorPicker: false, + showRoomCreatePanel: false, selectedColor: '#000000', lastColor: '#000000', hexInput: '#000000', hexInvalid: false, + roomCreateForm: { + roomName: '', + visibility: '', + publicFlag: '', + gender: '', + minAge: null, + maxAge: null, + password: '', + friendsOnly: false, + rightId: null, + typeId: null + }, // Palette state paletteWidth: 420, paletteHeight: 220, @@ -224,6 +307,85 @@ export default { } }, methods: { + getDefaultRoomCreateForm() { + return { + roomName: '', + visibility: '', + publicFlag: '', + gender: '', + minAge: null, + maxAge: null, + password: '', + friendsOnly: false, + rightId: null, + typeId: null + }; + }, + toggleRoomCreatePanel() { + this.showRoomCreatePanel = !this.showRoomCreatePanel; + if (!this.showRoomCreatePanel) return; + this.showColorPicker = false; + }, + resetRoomCreateForm() { + this.roomCreateForm = this.getDefaultRoomCreateForm(); + }, + buildRoomCreateCommandPreview() { + return this.buildRoomCreateCommand(); + }, + buildRoomCreateCommand() { + const name = (this.roomCreateForm.roomName || '').trim(); + if (!name) return ''; + const parts = ['/cr', name]; + if (this.roomCreateForm.visibility) parts.push(this.roomCreateForm.visibility); + if (this.roomCreateForm.publicFlag === 'true' || this.roomCreateForm.publicFlag === 'false') { + parts.push(`public=${this.roomCreateForm.publicFlag}`); + } + if (this.roomCreateForm.gender) parts.push(`gender=${this.roomCreateForm.gender}`); + if (Number.isInteger(this.roomCreateForm.minAge) && this.roomCreateForm.minAge >= 0) { + parts.push(`min_age=${this.roomCreateForm.minAge}`); + } + if (Number.isInteger(this.roomCreateForm.maxAge) && this.roomCreateForm.maxAge >= 0) { + parts.push(`max_age=${this.roomCreateForm.maxAge}`); + } + const password = (this.roomCreateForm.password || '').trim(); + if (password) parts.push(`password=${password}`); + if (this.roomCreateForm.friendsOnly) parts.push('friends_only=true'); + if (Number.isInteger(this.roomCreateForm.rightId) && this.roomCreateForm.rightId > 0) { + parts.push(`right_id=${this.roomCreateForm.rightId}`); + } + if (Number.isInteger(this.roomCreateForm.typeId) && this.roomCreateForm.typeId > 0) { + parts.push(`type_id=${this.roomCreateForm.typeId}`); + } + return parts.join(' '); + }, + requestRoomRefreshAfterCreate() { + const requestRooms = () => { + if (this.isAdmin) this.sendWithToken({ type: 'reload_rooms' }); + this.sendWithToken({ type: 'rooms' }); + }; + setTimeout(requestRooms, 500); + setTimeout(requestRooms, 1800); + }, + sendCreateRoomCommand() { + if (!this.transportConnected) { + this.messages.push({ id: Date.now(), user: 'System', text: 'Keine Verbindung zum Chat-Server.' }); + return; + } + const command = this.buildRoomCreateCommand(); + if (!command) { + this.messages.push({ id: Date.now(), user: 'System', text: 'Bitte einen Raumnamen angeben.' }); + return; + } + if ((this.roomCreateForm.password || '').includes(' ')) { + this.messages.push({ id: Date.now(), user: 'System', text: 'Passwort darf keine Leerzeichen enthalten.' }); + return; + } + const payload = { type: 'message', message: command }; + if (this.debug) console.log('[Chat WS >>]', payload); + this.sendWithToken(payload); + this.messages.push({ id: Date.now(), user: 'System', text: `Raum-Erstellung gesendet: ${command}` }); + this.requestRoomRefreshAfterCreate(); + }, selectTargetUser(name) { if (this.selectedTargetUser === name) { this.selectedTargetUser = null; // toggle off @@ -319,6 +481,7 @@ export default { this.selectedTargetUser = null; this.input = ''; this.showOptions = false; + this.showRoomCreatePanel = false; this.announcedRoomEnter = false; this.$refs.dialog.open(); // Stelle die WS-Verbindung her, wenn der Dialog geöffnet wird @@ -1481,10 +1644,24 @@ export default { justify-content: space-between; } +.room-left-controls { + display: flex; + align-items: center; + gap: 0.5em; +} + .room-select { min-width: 10em; } +.create-room-toggle-btn { + border: 1px solid #bbb; + background: #f5f5f5; + border-radius: 4px; + padding: 0.3em 0.8em; + cursor: pointer; +} + .right-controls { display: flex; align-items: center; @@ -1591,6 +1768,64 @@ export default { border: 1px solid #222; } +.room-create-panel { + border: 1px solid #222; + border-radius: 4px; + background: #fff; + padding: 0.7em; + overflow-y: auto; +} + +.room-create-title { + font-weight: bold; + margin-bottom: 0.6em; +} + +.room-create-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.6em; +} + +.room-create-grid label { + display: flex; + flex-direction: column; + gap: 0.25em; +} + +.room-create-grid input, +.room-create-grid select { + border: 1px solid #bbb; + border-radius: 3px; + padding: 0.35em 0.5em; +} + +.checkbox-label { + flex-direction: row !important; + align-items: center; + gap: 0.4em !important; +} + +.room-create-actions { + display: flex; + gap: 0.5em; + margin-top: 0.8em; +} + +.create-room-reset-btn { + border: 1px solid #bbb; + background: #eee; + border-radius: 3px; + padding: 0.3em 0.8em; + cursor: pointer; +} + +.room-create-preview { + margin-top: 0.7em; + font-size: 0.9em; + color: #444; +} + .chat-message { margin-bottom: 0.3em; }