improve display

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"
 }

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"
 }

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