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

@@ -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">
+                                        <option v-for="rotation in displayRotationList" :key="rotation.key" :value="rotation.key">
-                                            {{ $t(`deviceadmin.` + rotation) }}
+                                            {{ $t(`deviceadmin.` + rotation.value) }}
                                         </option>
                                     </select>
                                 </div>
@@ -118,10 +118,10 @@ export default defineComponent({
             alertType: "info",
             showAlert: false,
             displayRotationList: [
-                'rot0',
+                { key: 0, value: 'rot0' },
-                'rot90',
+                { key: 1, value: 'rot90' },
-                'rot180',
+                { key: 2, value: 'rot180' },
-                'rot270',
+                { key: 3, value: 'rot270' },
             ],
         }
     },

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">
+                            <option v-for="palevel in palevelList" :key="palevel.key" :value="palevel.key">
-                                {{ $t(`dtuadmin.` + palevel) }}
+                                {{ $t(`dtuadmin.` + palevel.value) }}
                             </option>
                         </select>
                     </div>
@@ -58,10 +58,10 @@ export default defineComponent({
             dataLoading: true,
             dtuConfigList: {} as DtuConfig,
             palevelList: [
-                'Min', 
+                { key: 0, value: 'Min' },
-                'Low', 
+                { key: 1, value: 'Low' },
-                'High', 
+                { key: 2, value: 'High' },
-                'Max',
+                { key: 3, value: 'Max' },
             ],
             alertMessage: "",
             alertType: "info",