webapi: Added frontend for display settings

webapp/src/locales/de.json

@@ -475,6 +475,11 @@
         "SelectedProfile": "Ausgewähltes Profil:",
         "DefaultProfile": "(Standard Einstellungen)",
         "ProfileHint": "Ihr Gerät reagiert möglicherweise nicht mehr, wenn Sie ein inkompatibles Profil wählen. In diesem Fall müssen Sie eine Löschung über das serielle Interface durchführen.",
+        "Display": "Display",
+        "PowerSafe": "Power Safe aktivieren:",
+        "Screensaver": "Screensaver aktivieren:",
+        "ShowLogo": "Logo Anzeigen:",
+        "Contrast": "Kontrast ({contrast}):",
         "Save": "@:dtuadmin.Save"
     },
     "pininfo": {

webapp/src/locales/en.json

@@ -475,6 +475,11 @@
         "SelectedProfile": "Selected profile:",
         "DefaultProfile": "(Default settings)",
         "ProfileHint": "Your device may stop responding if you select an incompatible profile. In this case, you must perform a deletion via the serial interface.",
+        "Display": "Display",
+        "PowerSafe": "Enable Power Safe:",
+        "Screensaver": "Enable Screensaver:",
+        "ShowLogo": "Show Logo:",
+        "Contrast": "Contrast ({contrast}):",
         "Save": "@:dtuadmin.Save"
     },
     "pininfo": {

webapp/src/locales/fr.json

@@ -475,6 +475,11 @@
         "SelectedProfile": "Selected profile:",
         "DefaultProfile": "(Default settings)",
         "ProfileHint": "Your device may stop responding if you select an incompatible profile. In this case, you must perform a deletion via the serial interface.",
+        "Display": "Display",
+        "PowerSafe": "Enable Power Safe:",
+        "Screensaver": "Enable Screensaver:",
+        "ShowLogo": "Show Logo:",
+        "Contrast": "Contrast ({contrast}):",
         "Save": "@:dtuadmin.Save"
     },
     "pininfo": {

webapp/src/types/DeviceConfig.ts

@@ -1,5 +1,13 @@
 import type { Device } from "./PinMapping";
 
+export interface Display {
+    show_logo: boolean;
+    power_safe: boolean;
+    screensaver: boolean;
+    contrast: number;
+}
+
 export interface DeviceConfig {
     curPin: Device;
+    display: Display;
 }

webapp/src/views/DeviceAdminView.vue

@@ -4,21 +4,22 @@
             {{ alertMessage }}
         </BootstrapAlert>
 
-        <nav>
+        <form @submit="savePinConfig">
-            <div class="nav nav-tabs" id="nav-tab" role="tablist">
+            <nav>
-                <button class="nav-link active" id="nav-pin-tab" data-bs-toggle="tab" data-bs-target="#nav-pin"
+                <div class="nav nav-tabs" id="nav-tab" role="tablist">
-                    type="button" role="tab" aria-controls="nav-pin" aria-selected="true">{{
+                    <button class="nav-link active" id="nav-pin-tab" data-bs-toggle="tab" data-bs-target="#nav-pin"
-                        $t('deviceadmin.PinAssignment')
+                        type="button" role="tab" aria-controls="nav-pin" aria-selected="true">{{
-                    }}</button>
+                            $t('deviceadmin.PinAssignment')
-            </div>
+                        }}</button>
-        </nav>
+                    <button class="nav-link" id="nav-display-tab" data-bs-toggle="tab" data-bs-target="#nav-display"
-        <div class="tab-content" id="nav-tabContent">
+                        type="button" role="tab" aria-controls="nav-display">{{ $t('deviceadmin.Display') }}</button>
-            <div class="tab-pane fade show active" id="nav-pin" role="tabpanel" aria-labelledby="nav-pin-tab"
+                </div>
-                tabindex="0">
+            </nav>
-                <div class="card">
+            <div class="tab-content" id="nav-tabContent">
-                    <div class="card-body">
+                <div class="tab-pane fade show active" id="nav-pin" role="tabpanel" aria-labelledby="nav-pin-tab"
-
+                    tabindex="0">
-                        <form @submit="savePinConfig">
+                    <div class="card">
+                        <div class="card-body">
                             <div class="row mb-3">
                                 <label for="inputPinProfile" class="col-sm-2 col-form-label">{{
                                     $t('deviceadmin.SelectedProfile')
@@ -26,7 +27,8 @@
                                 <div class="col-sm-10">
                                     <select class="form-select" id="inputPinProfile"
                                         v-model="deviceConfigList.curPin.name">
-                                        <option v-for="device in pinMappingList" :value="device.name" :key="device.name">
+                                        <option v-for="device in pinMappingList" :value="device.name"
+                                            :key="device.name">
                                             {{ device.name }}
                                         </option>
                                     </select>
@@ -39,21 +41,49 @@
                             <PinInfo
                                 :selectedPinAssignment="pinMappingList.find(i => i.name === deviceConfigList.curPin.name)"
                                 :currentPinAssignment="deviceConfigList.curPin" />
+                        </div>
+                    </div>
+                </div>
 
-                            <button type="submit" class="btn btn-primary mb-3">{{ $t('deviceadmin.Save') }}</button>
+                <div class="tab-pane fade show" id="nav-display" role="tabpanel" aria-labelledby="nav-display-tab"
-                        </form>
+                    tabindex="0">
+                    <div class="card">
+                        <div class="card-body">
+                            <InputElement :label="$t('deviceadmin.PowerSafe')"
+                                v-model="deviceConfigList.display.power_safe" type="checkbox" />
+
+                            <InputElement :label="$t('deviceadmin.Screensaver')"
+                                v-model="deviceConfigList.display.screensaver" type="checkbox" />
+
+                            <InputElement :label="$t('deviceadmin.ShowLogo')"
+                                v-model="deviceConfigList.display.show_logo" type="checkbox" />
+
+                            <div class="row mb-3">
+                                <label for="inputDisplayContrast" class="col-sm-2 col-form-label">{{
+                                    $t('deviceadmin.Contrast', { contrast: $n(deviceConfigList.display.contrast / 100,
+                                        'percent')
+                                }) }}</label>
+                                <div class="col-sm-10">
+                                    <input type="range" class="form-range" min="0" max="100" id="inputDisplayContrast"
+                                        v-model="deviceConfigList.display.contrast" />
+                                </div>
+                            </div>
+
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
+            <button type="submit" class="btn btn-primary mb-3">{{ $t('deviceadmin.Save') }}</button>
 
+        </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import InputElement from '@/components/InputElement.vue';
 import PinInfo from '@/components/PinInfo.vue';
 import type { DeviceConfig } from "@/types/DeviceConfig";
 import type { PinMapping, Device } from "@/types/PinMapping";
@@ -64,6 +94,7 @@ export default defineComponent({
     components: {
         BasePage,
         BootstrapAlert,
+        InputElement,
         PinInfo,
     },
     data() {