implement first version of device configuration

src/api/energyAssistant.api.ts

@@ -107,7 +107,16 @@ export interface IConfig {
   config: object;
 }
 
+export type ConfigValueType =
+  | string
+  | number
+  | boolean
+  | string[]
+  | number[]
+  | null;
+
 export class EnergyAssistantApi {
+
   private axiosInstance?: AxiosInstance;
   public baseUrl?: string;
   public deviceInfos?: IDeviceInfo[];
@@ -229,6 +238,14 @@ export class EnergyAssistantApi {
     if (!this.axiosInstance) throw 'not initialized';
     return (await this.axiosInstance.get<IConfig>('config')).data.config;
   }
+  public async getDeviceConfig(deviceId:string) {
+    if (!this.axiosInstance) throw 'not initialized';
+    return (await this.axiosInstance.get<IConfig>('config/device/'+deviceId)).data.config;
+  }  
+  public async saveDeviceConfig(deviceId: string, values) {
+    if (!this.axiosInstance) throw 'not initialized';
+    return await this.axiosInstance.put<IConfig>('config/device/'+deviceId, values);
+}  
 }
 
 export const api = new EnergyAssistantApi();

src/plugins/router.ts

@@ -65,6 +65,12 @@ const routes = [
             component: () => import(/* webpackChunkName: "coresettings" */ '@/views/settings/CoreConfigs.vue'),
             props: true,
           },
+          {
+            path: 'editdevice/:deviceId',
+            name: 'editdevice',
+            component: () => import(/* webpackChunkName: "devicessettings" */ '@/views/settings/EditDeviceConfig.vue'),
+            props: true,
+          },          
           {
             path: '',
             redirect: '/settings/devices', // default child path

src/translations/de.json

@@ -89,6 +89,9 @@
     "delete_action": "Löschen",
     "forecast_create_model_error": "Das Model konnte nicht erstellt werden. Homeassistant hat wahrscheinlich nicht genügend Daten.",
     "forecast_value_too_small": "Der Wert ist zu klein.",
-    "forecast_field_required": "Bitte einen Wert eingeben."
-  }
+    "forecast_field_required": "Bitte einen Wert eingeben.",
+    "edit_action": "Bearbeiten",
+    "save": "Speichern"
+  },
+  "close": "Schliessen"
 }

src/translations/en.json

@@ -15,7 +15,6 @@
   "consumption": "Consumption",
   "self_sufficiency": "Self sufficiency",
   "self_consumption": "Self consumed solar energy",
-
   "temperature": "Temperature",
   "state": "State",
   "consumed_solar_energy": "Solar energy",
@@ -32,7 +31,7 @@
     "state": "State",
     "heatpump_state": "Heatpump state",
     "heating_actual_temperature": "Heating temperature",
-    "water_heating_actual_temperature": "Water temperature",    
+    "water_heating_actual_temperature": "Water temperature",
     "pv_mode": "PV mode",
     "vehicle_soc": "Vehicle SoC",
     "session_time": "Session duration",
@@ -90,6 +89,9 @@
     "delete_action": "Delete",
     "forecast_create_model_error": "Failed to create the model. Homeassistant might not have enough data.",
     "forecast_value_too_small": "The value is too small.",
-    "forecast_field_required": "Field is required"
-  }
+    "forecast_field_required": "Field is required",
+    "edit_action": "Edit",
+    "save": "Save"
+  },
+  "close": "Close"
 }

src/views/settings/Devices.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="bg-background grid grid-cols-1 p-4 md:grid-cols-2 xl:grid-cols-4">
+  <div class="grid grid-cols-1 p-4 bg-background md:grid-cols-2 xl:grid-cols-4">
     <div v-for="(device, index) in devices" :key="index">
-      <v-card v-if="device.id != '9c0e0865-f3b0-488f-8d3f-b3b0cdda5de7'" class="elevation-2 m-4 max-w-sm">
+      <v-card v-if="device.id != '9c0e0865-f3b0-488f-8d3f-b3b0cdda5de7'" class="max-w-sm m-4 elevation-2">
         <v-card-title>
-          <span class="mdi pr-2" :class="device.icon" />
+          <span class="pr-2 mdi" :class="device.icon" />
           <span class="">{{ device.name }}</span>
         </v-card-title>
         <v-card-actions>
-          <v-btn class="m-2" @click="DeleteDevice(device.id)">
+          <v-btn class="m-2" @click="editDevice(device.id)">
+            {{ $t('settings.edit_action') }}
+          </v-btn>
+          <v-btn class="m-2" @click="deleteDevice(device.id)">
             {{ $t('settings.delete_action') }}
           </v-btn>
+
         </v-card-actions>
       </v-card>
     </div>
@@ -27,17 +31,27 @@
 <script lang="ts" setup>
 import { api, IDeviceInfo } from '@/api/energyAssistant.api';
 import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 const devices = ref<IDeviceInfo[]>();
 const dialog = ref<boolean>(false);
 
-const DeleteDevice = async function (id: string) {
-  await api.deleteDevice(id);
+const deleteDevice = async function (deviceId: string) {
+  await api.deleteDevice(deviceId);
   devices.value = await api.getAllDevices(false);
   dialog.value = true;
   //  alert('Please remove the device manually from the config file.');
 };
 
+const editDevice = function (deviceId: string) {
+  //if (deviceId in api.devices) {
+    // only allow edit if device is alive/available
+    router.push(`/settings/editdevice/${deviceId}`);
+  //}
+};
+
 onMounted(async () => {
   devices.value = await api.getAllDevices(false);
 });

src/views/settings/EditDeviceConfig.vue

@@ -0,0 +1,67 @@
+<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') }}
+        </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>
+</template>
+
+<script lang="ts" setup>
+import { api, IConfig, ConfigValueType } from '@/api/energyAssistant.api';
+import { watch, ref } from 'vue';
+import { useRouter } from 'vue-router';
+// global refs
+const router = useRouter();
+const config = ref<IConfig>();
+const name = ref<string>("")
+const nominal_power = ref<number>(0)
+
+// props
+const props = defineProps<{
+    deviceId?: string;
+}>();
+
+// watchers
+
+watch(
+    () => props.deviceId,
+    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"];
+        }
+    },
+    { immediate: true },
+);
+
+
+// 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
+    }
+    await api.saveDeviceConfig(props.deviceId!, values);
+
+    router.push({ name: 'devicessettings' });
+};
+
+</script>