Verschieden Settings hinzugefügt (inkomplett)

frontend/src/App.vue

@@ -30,6 +30,7 @@ export default {
   },
   created() {
     this.$store.dispatch('loadLoginState');
+    this.$store.dispatch('loadMenu');
     this.$i18n.locale = this.$store.getters.language;
   },
 };

frontend/src/components/SettingsWidget.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="settings-widget">
-        <h2>{{ $t("settings.personal.title") }}</h2>
         <template v-for="setting in settings">
-            <InputStringWidget v-if="setting.datatype == 'string'"
-                :labelTr="`settings.personal.label.${setting.name}`"
+            <InputStringWidget v-if="setting.datatype == 'string'" :labelTr="`settings.personal.label.${setting.name}`"
                 :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value :list="languagesList()"
                 @input="handleInput(setting.id, $event)" />
             <DateInputWidget v-else-if="setting.datatype == 'date'" :labelTr="`settings.personal.label.${setting.name}`"
@@ -13,6 +11,18 @@
                 :labelTr="`settings.personal.label.${setting.name}`"
                 :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
                 :list="getSettingOptions(setting.name, setting.options)" @input="handleInput(setting.id, $event)" />
+            <InputNumberWidget v-else-if="setting.datatype == 'int'"
+                :labelTr="`settings.personal.label.${setting.name}`"
+                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value min="0" max="200"
+                @input="handleInput(setting.id, $event)" />
+            <FloatInputWidget v-else-if="setting.datatype == 'float'"
+                :labelTr="`settings.personal.label.${setting.name}`"
+                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
+                @input="handleInput(setting.id, $event)" />
+            <CheckboxWidget v-else-if="setting.datatype == 'bool'"
+                :labelTr="`settings.personal.label.${setting.name}`"
+                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
+                @input="handleInput(setting.id, $event)" />
             <div v-else>{{ setting }}
             </div>
         </template>
@@ -25,6 +35,9 @@ import { mapGetters } from 'vuex';
 import InputStringWidget from '@/components/form/InputStringWidget.vue';
 import DateInputWidget from '@/components/form/DateInputWidget.vue';
 import SelectDropdownWidget from '@/components/form/SelectDropdownWidget';
+import InputNumberWidget from '@/components/form/InputNumberWidget';
+import FloatInputWidget from '@/components/form/FloatInputWidget';
+import CheckboxWidget from '@/components/form/CheckboxWidget';
 
 export default {
     name: "SettingsWidget",
@@ -32,6 +45,9 @@ export default {
         InputStringWidget,
         DateInputWidget,
         SelectDropdownWidget,
+        InputNumberWidget,
+        FloatInputWidget,
+        CheckboxWidget
     },
     props: {
         settingsType: {
@@ -79,7 +95,6 @@ export default {
                     settingId: settingId,
                     value: value
                 });
-                console.log('Setting updated:', settingId, value);
             } catch (err) {
                 console.error('Error updating setting:', err);
             }

frontend/src/components/form/InputNumberWidget.vue

@@ -43,3 +43,17 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+label {
+    display: block;
+}
+
+label>span {
+    display: inline-block;
+}
+
+input {
+    margin-left: 0.5em;
+}
+</style>

frontend/src/dialogues/auth/RegisterDialog.vue

@@ -85,7 +85,6 @@ export default {
         },
         async register() {
             if (!this.canRegister) {
-                console.log('pw-fehler');
                 this.$refs.errorDialog.open('tr:register.passwordMismatch');
                 return;
             }

frontend/src/dialogues/chat/RandomChatDialog.vue

@@ -129,7 +129,6 @@ export default {
                 if (response.data.status && response.data.status === 'matched') {
                     this.searching = false;
                     if (this.searchInterval) {
-                        console.log('clear interval');
                         clearInterval(this.searchInterval);
                         this.searchInterval = null;
                     }
@@ -157,7 +156,6 @@ export default {
         },
         async sendMessage() {
             if (this.inputtext.trim() !== '') {
-                console.log('Sending message:', this.inputtext);
                 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 = '';

frontend/src/i18n/locales/de/settings.json

@@ -7,14 +7,32 @@
                 "birthdate": "Geburtsdatum",
                 "gender": "Geschlecht",
                 "town": "Stadt",
-                "zip": "PLZ"
+                "zip": "PLZ",
+                "eyecolor": "Augenfarbe",
+                "haircolor": "Haarfarbe",
+                "hairlength": "Haarlänge",
+                "skincolor": "Hautfarbe",
+                "freckles": "Sommersprossen",
+                "weight": "Gewicht",
+                "bodyheight": "Größe",
+                "piercings": "Piercings",
+                "tattoos": "Tattoos"
             },
             "tooltip": {
                 "language": "Sprache",
                 "birthdate": "Geburtsdatum",
                 "gender": "Geschlecht",
                 "town": "Stadt",
-                "zip": "PLZ"
+                "zip": "PLZ",
+                "eyecolor": "Augenfarbe",
+                "haircolor": "Haarfarbe",
+                "hairlength": "Haarlänge",
+                "skincolor": "Hautfarbe",
+                "freckles": "Sommersprossen",
+                "weight": "Gewicht",
+                "bodyheight": "Größe",
+                "piercings": "Piercings",
+                "tattoos": "Tattoos"
             },
             "gender": {
                 "male": "Männlich",
@@ -26,7 +44,49 @@
             "language": {
                 "de": "Deutsch",
                 "en": "Englisch"
+            },
+            "eyecolor": {
+                "blue": "Blau",
+                "green": "Grün",
+                "brown": "Braun",
+                "black": "Schwarz",
+                "grey": "Grau",
+                "hazel": "Haselnuss",
+                "amber": "Bernstein",
+                "red": "Rot",
+                "other": "Andere"
+            },
+            "haircolor": {
+                "black": "Schwarz",
+                "brown": "Braun",
+                "blonde": "Blond",
+                "red": "Rot",
+                "grey": "Grau",
+                "white": "Weiß",
+                "other": "Andere"
+            },
+            "hairlength": {
+                "short": "Kurz",
+                "medium": "Mittel",
+                "long": "Lang",
+                "bald": "Glatze",
+                "other": "Andere"
+            },
+            "skincolor": {
+                "light": "Hell",
+                "medium": "Mittel",
+                "dark": "Dunkel",
+                "other": "Andere"
+            },
+            "freckles": {
+                "much": "Viele",
+                "medium": "Mittel",
+                "less": "Wenige",
+                "none": "Keine"
             }
+        },
+        "view": {
+            "title": "Aussehen"
         }
     }
 }

frontend/src/router/index.js

@@ -3,6 +3,7 @@ import store from '../store';
 import HomeView from '../views/HomeView.vue';
 import ActivateView from '../views/auth/ActivateView.vue';
 import PeronalSettingsView from '../views/settings/PersonalView.vue';
+import ViewSettingsView from '../views/settings/ViewView.vue';
 
 const routes = [
   {
@@ -20,7 +21,13 @@ const routes = [
     name: 'Personal settings',
     component: PeronalSettingsView,
     meta: { requiresAuth: true }
-  }
+  },
+  {
+    path: '/settings/view',
+    name: 'View settings',
+    component: ViewSettingsView,
+    meta: { requiresAuth: true }
+  },
 ];
 
 

frontend/src/store/index.js

@@ -16,12 +16,16 @@ const store = createStore({
       state.user = user;
       localStorage.setItem('isLoggedIn', 'true');
       localStorage.setItem('user', JSON.stringify(user));
+      if (user.param.filter(param => ['birthdate', 'gender'].includes(param.name)).length < 2) {
+        router.push({ path: '/settings/personal' });
+      }
     },
     dologout(state) {
       state.isLoggedIn = false;
       state.user = null;
       localStorage.removeItem('isLoggedIn');
       localStorage.removeItem('user');
+      localStorage.removeItem('menu');
     },
     loadLoginState(state) {
       const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
@@ -31,9 +35,11 @@ const store = createStore({
       } catch (e) {
 
       }
+      const menu = localStorage.getItem('menu');
       const user = userData;
       state.isLoggedIn = isLoggedIn;
       state.user = user;
+      state.menu = menu;
     },
     setLanguage(state, language) {
       state.language = language;

frontend/src/views/home/NoLoginView.vue

@@ -79,10 +79,6 @@ export default {
             try {
                 const response = await apiClient.post('/api/auth/login', { username: this.username, password: this.password });
                 this.login(response.data);
-                if (response.data.forwardDataInput) {
-                    console.log(response.data);
-                    this.$router.push({ path: '/settings/personal' });
-                }
             } catch (error) {
                 this.$refs.errorDialog.open(`tr:error.${error.response.data.error}`);
             }

frontend/src/views/settings/PersonalView.vue

@@ -1,5 +1,8 @@
 <template>
-    <SettingsWidget :settingsType="'personal'" />
+    <div>
+        <h2>{{ $t("settings.personal.title") }}</h2>
+        <SettingsWidget :settingsType="'personal'" />
+    </div>
 </template>
 
 <script>

frontend/src/views/settings/ViewView.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <h2>{{ $t("settings.view.title") }}</h2>
+        <SettingsWidget :settingsType="'view'" />
+    </div>
+</template>
+
+<script>
+import SettingsWidget from '@/components/SettingsWidget.vue';
+
+export default {
+    name: 'ViewSettingsView',
+    components: {
+        SettingsWidget,
+    }
+}
+</script>