prepare header settings but still hidden

website/client/src/pages/settings/components/genericSettingMixin.js

@@ -1,6 +1,6 @@
 export const GenericSettingMixin = {
   methods: {
-    set (preferenceType, subtype) {
+    setUserPreference (preferenceType, subtype) {
       const settings = {};
       if (!subtype) {
         settings[`preferences.${preferenceType}`] = this.user.preferences[preferenceType];

website/client/src/pages/settings/generalSettings.vue

@@ -50,16 +50,6 @@
             Audio TODO
           </td>
         </tr>
-        <tr>
-          <td colspan="3">
-            Show header TODO
-          </td>
-        </tr>
-        <tr>
-          <td colspan="3">
-            Sticky Header TODO
-          </td>
-        </tr>
       </table>
 
 
@@ -122,8 +112,8 @@ import ResetAccount from './inlineSettings/resetAccount';
 import DeleteAccount from './inlineSettings/deleteAccount';
 import { sharedInlineSettingStore } from './components/inlineSettingMixin';
 import LanguageSetting from './inlineSettings/languageSetting';
-import DateFormatSetting from '@/pages/settings/inlineSettings/dateFormatSetting';
-import DayStartAdjustmentSetting from '@/pages/settings/inlineSettings/dayStartAdjustmentSetting.vue';
+import DateFormatSetting from './inlineSettings/dateFormatSetting';
+import DayStartAdjustmentSetting from './inlineSettings/dayStartAdjustmentSetting.vue';
 
 export default {
   components: {

website/client/src/pages/settings/inlineSettings/dateFormatSetting.vue

@@ -106,7 +106,7 @@ export default {
     },
     async changeFormatAndClose () {
       this.user.preferences.dateFormat = this.selectedFormat;
-      await this.set('dateFormat');
+      await this.setUserPreference('dateFormat');
       this.closeModal();
     },
     /**

website/client/src/pages/settings/inlineSettings/headerSettings.vue

@@ -0,0 +1,62 @@
+<template>
+  <fragment>
+    <tr>
+      <td class="settings-label">
+        {{ $t("showHeader") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <toggle-switch
+          v-model="user.preferences.showHeader"
+          @change="setUserPreference('showHeader')"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td class="settings-label">
+        {{ $t("stickyHeader") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <toggle-switch
+          v-model="user.preferences.stickyHeader"
+          @change="setUserPreference('stickyHeader')"
+        />
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+::v-deep {
+   .toggle-switch-outer {
+     display: inline-block;
+   }
+}
+</style>
+
+<script>
+import { mapState } from '@/libs/store';
+
+import { InlineSettingMixin } from '../components/inlineSettingMixin';
+import ToggleSwitch from '@/components/ui/toggleSwitch.vue';
+import { GenericSettingMixin } from '../components/genericSettingMixin';
+
+
+export default {
+  components: { ToggleSwitch },
+  mixins: [InlineSettingMixin, GenericSettingMixin],
+  computed: {
+    ...mapState({
+      user: 'user.data',
+    }),
+  },
+  methods: {
+
+  },
+};
+</script>

website/client/src/pages/settings/inlineSettings/languageSetting.vue

@@ -137,7 +137,7 @@ export default {
     },
     async changeLanguageAndClose () {
       this.user.preferences.language = this.selectedLanguage;
-      await this.set('language');
+      await this.setUserPreference('language');
       setTimeout(() => window.location.reload(true));
     },
   },