En-/decryption fixed

frontend/src/components/AppNavigation.vue

@@ -1,13 +1,14 @@
 <template>
   <nav>
     <ul>
-      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem">
-        <a :href="item.path" v-if="item.path" class="menuitem">{{ $t(`navigation.${key}`) }}</a>
-        <span v-if="!item.path" class="menuitem">{{ $t(`navigation.${key}`) }}</span>
+      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem" @click="openPage(item.path ?? null)">
+        <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">
-            <a :href="subitem.path" v-if="subitem.path">{{ $t(`navigation.m-${key}.${subkey}`) }}</a>
-            <span v-if="!subitem.path">{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
+          <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>
+            <span>{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
           </li>
         </ul>
       </li>
@@ -37,6 +38,11 @@ export default {
   },
   methods: {
     ...mapActions(['loadMenu', 'logout']),
+    openPage(url) {
+      if (url) {
+        this.$router.push(url);
+      }
+    }
   }
 };
 </script>
@@ -71,11 +77,12 @@ nav>ul>li:hover {
   background-color: #D37C06;
   white-space: nowrap;
 }
-nav>ul>li:hover > span {
+
+nav>ul>li:hover>span {
   color: #000000;
 }
 
-nav>ul>li:hover > ul{
+nav>ul>li:hover>ul {
   display: inline-block;
 }
 
@@ -119,13 +126,33 @@ a {
   left: 0;
   top: 2.5em;
 }
-.submenu1 > li {
+
+.submenu1>li {
   padding: 0.5em;
   line-height: 1em;
   color: #7E471B;
 }
+
 .submenu1>li:hover {
   color: #000000;
   background-color: #D37C06;
 }
+
+.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;
+}
 </style>

frontend/src/components/SettingsWidget.vue

@@ -13,15 +13,14 @@
                 :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)" />
+                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToInt(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
+                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToFloat(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
+            <CheckboxWidget v-else-if="setting.datatype == 'bool'" :labelTr="`settings.personal.label.${setting.name}`"
+                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToBool(setting.value)"
                 @input="handleInput(setting.id, $event)" />
             <div v-else>{{ setting }}
             </div>
@@ -104,6 +103,23 @@ export default {
                 { value: 'en', captionTr: 'settings.personal.languages.en' },
                 { value: 'de', captionTr: 'settings.personal.languages.de' },
             ];
+        },
+        convertToInt(value) {
+            const intValue = parseInt(value, 10);
+            return isNaN(intValue) ? 0 : intValue;
+        },
+        convertToFloat(value) {
+            const floatValue = parseFloat(value);
+            return isNaN(floatValue) ? 0.0 : floatValue;
+        },
+        convertToBool(value) {
+            if (value === 'true' || value === true) {
+                return true;
+            } else if (value === 'false' || value === false) {
+                return false;
+            } else {
+                return false;
+            }
         }
     },
     data() {

frontend/src/components/form/CheckboxWidget.vue

@@ -41,7 +41,6 @@ label {
     display: flex;
     align-items: center;
 }
-
 input[type="checkbox"] {
     margin-right: 0.5em;
 }

frontend/src/components/form/FloatInputWidget.vue

@@ -41,7 +41,7 @@ export default {
     },
     computed: {
         formattedValue() {
-            return this.value != null ? this.value.toFixed(this.decimals) : '';
+            return this.value != null && typeof this.value === 'float' ? this.value.toFixed(this.decimals) : '';
         },
         step() {
             return Math.pow(10, -this.decimals);