From 53e0bce82f4a606a2991b237e4e6d25b05181578 Mon Sep 17 00:00:00 2001
From: Paul Frank <pail@gmx.net>
Date: Sat, 20 Jul 2024 19:54:59 +0000
Subject: [PATCH] improve display

---
 src/translations/de.json                |  5 +-
 src/translations/en.json                |  5 +-
 src/views/settings/EditDeviceConfig.vue | 97 ++++++++++++++++++-------
 3 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/src/translations/de.json b/src/translations/de.json
index 0b0908b..481fece 100644
--- a/src/translations/de.json
+++ b/src/translations/de.json
@@ -91,7 +91,10 @@
     "forecast_value_too_small": "Der Wert ist zu klein.",
     "forecast_field_required": "Bitte einen Wert eingeben.",
     "edit_action": "Bearbeiten",
-    "save": "Speichern"
+    "save": "Speichern",
+    "name": "Name",
+    "nominal_power": "Verbrauch",
+    "switch_on_delay": "Einschaltverzögerung"
   },
   "close": "Schliessen"
 }
diff --git a/src/translations/en.json b/src/translations/en.json
index c33f5fb..1b35aca 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -91,7 +91,10 @@
     "forecast_value_too_small": "The value is too small.",
     "forecast_field_required": "Field is required",
     "edit_action": "Edit",
-    "save": "Save"
+    "save": "Save",
+    "name": "Name",
+    "nominal_power": "Consumption",
+    "switch_on_delay": "Switch on delay"
   },
   "close": "Close"
 }
diff --git a/src/views/settings/EditDeviceConfig.vue b/src/views/settings/EditDeviceConfig.vue
index 95ed183..39d0078 100644
--- a/src/views/settings/EditDeviceConfig.vue
+++ b/src/views/settings/EditDeviceConfig.vue
@@ -1,33 +1,75 @@
-<template>¨
-    <v-form>
-        <v-text-field label="Name" type="input" v-model="name"></v-text-field>
-        <v-text-field label="Verbrauch" type="number" v-model="nominal_power"></v-text-field>
-        <v-btn block color="primary" @click="submit">
-            {{ $t('settings.save') }}
+<template>
+  <v-card class="p-4 m-4 rounded-md elevation-2">
+    <v-card-text>
+      <v-form>
+        <v-text-field
+          v-model="name"
+          :label="$t('settings.name')"
+          type="input"
+        />
+        <v-text-field
+          v-model="nominal_power"
+          :label="$t('settings.nominal_power')"
+          type="number"
+        />
+        <v-text-field
+          v-model="switch_on_delay"
+          :label="$t('settings.switch_on_delay')"
+          type="number"
+        />
+        <v-btn
+          block
+          color="primary"
+          @click="submit"
+        >
+          {{ $t('settings.save') }}
         </v-btn>
-    </v-form>
-    <br/>
-    <v-btn block @click="router.back()">
-    {{ $t('close') }}
-  </v-btn>
-  <br/>
-  <p>Details: </p>    
-    <ul>
-        <li v-for="(value, key) in config">
-            {{ key }}: {{ value }}
-        </li>
-    </ul>
+      </v-form>
+      <br>
+      <v-btn
+        block
+        @click="router.back()"
+      >
+        {{ $t('close') }}
+      </v-btn>
+    </v-card-text>
+  </v-card>
+  <br>
+  <v-card class="p-4 m-4 rounded-md elevation-2">
+    <v-card-title>Values which can only be edit in the energy_assistant.yaml file</v-card-title>
+    <v-card-text>
+      <v-table class="m-4 border rounded-md">
+        <tbody>
+          <tr
+            v-for="(value, key) in readOnlyConfig"
+            :key="key"
+            class="text-left border"
+          >
+            <td class="px-6 py-4 border">
+              {{ key }}
+            </td>
+            <td class="px-6 py-4 border">
+              {{ value }}
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts" setup>
-import { api, IConfig, ConfigValueType } from '@/api/energyAssistant.api';
+import { api } from '@/api/energyAssistant.api';
 import { watch, ref } from 'vue';
 import { useRouter } from 'vue-router';
+
 // global refs
 const router = useRouter();
-const config = ref<IConfig>();
+const config = ref({});
+const readOnlyConfig = ref({})
 const name = ref<string>("")
 const nominal_power = ref<number>(0)
+const switch_on_delay = ref<number>(0)
 
 // props
 const props = defineProps<{
@@ -41,9 +83,15 @@ watch(
     async (val) => {
         if (val) {
             console.log("Edit Device: " + val)
-            config.value = await api.getDeviceConfig(val);
-            name.value = config.value["name"];
-            nominal_power.value = config.value["nominal_power"];
+            const data = await api.getDeviceConfig(val);
+            config.value = data
+            name.value = data["name"];
+            nominal_power.value = data["nominal_power"];
+            const configurableKeys = new Set<string>(['id', 'name', 'type', 'nominal_power']);
+            const readOnlyKeys = Object.keys(data).filter((k) => !configurableKeys.has(k));
+            const readOnlyValues = {};
+            readOnlyKeys.forEach(key => { readOnlyValues[key] = data[key] });
+            readOnlyConfig.value = readOnlyValues
         }
     },
     { immediate: true },
@@ -52,9 +100,6 @@ watch(
 
 // methods
 const submit = async function () {
-    /*  values['enabled'] = config.value!.enabled;
-      values['name'] = config.value!.name || null;
-      api.saveDeviceConfig(props.deviceId!, values);*/
     const values = {
         "name": name.value,
         "nominal_power": nominal_power.value