From 0f1b3f1560b5c636b661a94faec76da302694f53 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Wed, 12 Apr 2023 19:58:34 +0200
Subject: [PATCH] webapp: Implement combo boxes again as objects

1. Key  is a magic number which is used in the c++ backend
2. Based on the object model some further extension will be done soon
---
 webapp/src/views/DeviceAdminView.vue | 12 ++++++------
 webapp/src/views/DtuAdminView.vue    | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index 5b91abb..574105e 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/webapp/src/views/DeviceAdminView.vue
@@ -62,8 +62,8 @@
                                 </label>
                                 <div class="col-sm-10">
                                     <select class="form-select" v-model="deviceConfigList.display.rotation">
-                                        <option v-for="(rotation, index) in displayRotationList" :key="index" :value="index">
-                                            {{ $t(`deviceadmin.` + rotation) }}
+                                        <option v-for="rotation in displayRotationList" :key="rotation.key" :value="rotation.key">
+                                            {{ $t(`deviceadmin.` + rotation.value) }}
                                         </option>
                                     </select>
                                 </div>
@@ -118,10 +118,10 @@ export default defineComponent({
             alertType: "info",
             showAlert: false,
             displayRotationList: [
-                'rot0',
-                'rot90',
-                'rot180',
-                'rot270',
+                { key: 0, value: 'rot0' },
+                { key: 1, value: 'rot90' },
+                { key: 2, value: 'rot180' },
+                { key: 3, value: 'rot270' },
             ],
         }
     },
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index 629ca3f..2ab7f96 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -23,8 +23,8 @@
                     </label>
                     <div class="col-sm-10">
                         <select class="form-select" v-model="dtuConfigList.dtu_palevel">
-                            <option v-for="(palevel, index) in palevelList" :key="index" :value="index">
-                                {{ $t(`dtuadmin.` + palevel) }}
+                            <option v-for="palevel in palevelList" :key="palevel.key" :value="palevel.key">
+                                {{ $t(`dtuadmin.` + palevel.value) }}
                             </option>
                         </select>
                     </div>
@@ -58,10 +58,10 @@ export default defineComponent({
             dataLoading: true,
             dtuConfigList: {} as DtuConfig,
             palevelList: [
-                'Min', 
-                'Low', 
-                'High', 
-                'Max',
+                { key: 0, value: 'Min' },
+                { key: 1, value: 'Low' },
+                { key: 2, value: 'High' },
+                { key: 3, value: 'Max' },
             ],
             alertMessage: "",
             alertType: "info",