reworked the InverterAdminView.vue view for easier maintainability.

this also fixed the bug of changed max_power values after closing the edit modal without saving

webapp/src/views/InverterAdminView.vue

@@ -1,7 +1,7 @@
 <template>
     <BasePage :title="'Inverter Settings'" :isLoading="dataLoading">
-        <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+        <BootstrapAlert v-model="alert.show" dismissible :variant="alert.type">
-            {{ alertMessage }}
+            {{ alert.message }}
         </BootstrapAlert>
 
         <div class="card">
@@ -10,12 +10,12 @@
                 <form class="form-inline" v-on:submit.prevent="onSubmit">
                     <div class="form-group">
                         <label>Serial</label>
-                        <input v-model="inverterData.serial" type="number" class="form-control ml-sm-2 mr-sm-4 my-2"
+                        <input v-model="newInverterData.serial" type="number" class="form-control ml-sm-2 mr-sm-4 my-2"
                                required />
                     </div>
                     <div class="form-group">
                         <label>Name</label>
-                        <input v-model="inverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
+                        <input v-model="newInverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
                                maxlength="31" required />
                     </div>
                     <div class="ml-auto text-right">
@@ -44,22 +44,15 @@
                         </thead>
                         <tbody>
                             <tr v-for="inverter in sortedInverters" v-bind:key="inverter.id">
-
+                                <td>{{ inverter.serial }}</td>
-                                <td>
+                                <td>{{ inverter.name }}</td>
-                                    {{ inverter.serial }}
+                                <td>{{ inverter.type }}</td>
-                                </td>
-                                <td>
-                                    {{ inverter.name }}
-                                </td>
-                                <td>
-                                    {{ inverter.type }}
-                                </td>
                                 <td>
                                     <a href="#" class="icon text-danger" title="Delete inverter">
-                                        <BIconTrash v-on:click="onDeleteModal(inverter)" />
+                                        <BIconTrash v-on:click="onOpenModal(modalDelete, inverter)" />
                                     </a>&nbsp;
                                     <a href="#" class="icon" title="Edit inverter">
-                                        <BIconPencil v-on:click="onEdit(inverter)" />
+                                        <BIconPencil v-on:click="onOpenModal(modal, inverter)" />
                                     </a>
                                 </td>
                             </tr>
@@ -78,39 +71,36 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-
                     <form>
                         <div class="mb-3">
                             <label for="inverter-serial" class="col-form-label">Serial:</label>
-                            <input v-model="editInverterData.serial" type="number" id="inverter-serial"
+                            <input v-model="selectedInverterData.serial" type="number" id="inverter-serial"
                                    class="form-control" />
-                        </div>
-                        <div class="mb-3">
                             <label for="inverter-name" class="col-form-label">Name:</label>
-                            <input v-model="editInverterData.name" type="text" id="inverter-name" class="form-control"
+                            <input v-model="selectedInverterData.name" type="text" id="inverter-name"
-                                maxlength="31" />
+                                   class="form-control" maxlength="31" />
                         </div>
 
-                        <div class="mb-3" v-for="(max, index) in editInverterData.max_power" :key="`${index}`">
+                        <div v-for="(max, index) in selectedInverterData.max_power" :key="`${index}`">
-                            <label :for="`inverter-max_${index}`" class="col-form-label">Max power string {{ index +
+                            <label :for="`inverter-max_${index}`" class="col-form-label">Max power string {{ index +1 }}:</label>
-                            1
+                            <div class="d-flex mb-2">
-                            }}:</label>
                                 <div class="input-group">
                                     <input type="number" class="form-control" :id="`inverter-max_${index}`" min="0"
-                                    v-model="editInverterData.max_power[index]"
+                                           v-model="selectedInverterData.max_power[index]"
-                                    :aria-describedby="`inverter-maxDescription_${index} inverter-maxHelpText_${index}`" />
+                                           :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
-                                <span class="input-group-text" :id="`inverter-maxDescription_${index}`">W</span>
+                                    <span class="input-group-text" :id="`inverter-maxDescription_${index}`">W<sup>*</sup></span>
                                 </div>
-                            <div :id="`inverter-maxHelpText_${index}`" class="form-text">This value is used to
-                                calculate the Irradiation.</div>
                             </div>
+                        </div>
+                        <div :id="`inverter-customizer`" class="form-text">*) Input the kWp of the channel to
+                            calculate irradiation.</div>
                     </form>
 
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onCancel"
+                    <button type="button" class="btn btn-secondary" @click="onCloseModal(modal)"
                         data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" @click="onEditSubmit(editId)">Save
+                    <button type="button" class="btn btn-primary" @click="onEditSubmit()">Save
                         changes</button>
                 </div>
             </div>
@@ -125,13 +115,13 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    Are you sure you want to delete the inverter "{{ deleteInverterData.name }}" with serial number
+                    Are you sure you want to delete the inverter "{{ selectedInverterData.name }}" with serial number
-                    {{ deleteInverterData.serial }}?
+                    {{ selectedInverterData.serial }}?
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" @click="onDeleteCancel"
+                    <button type="button" class="btn btn-secondary" @click="onCloseModal(modalDelete)"
                         data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-danger" @click="onDelete(deleteId.toString())">Delete</button>
+                    <button type="button" class="btn btn-danger" @click="onDelete">Delete</button>
                 </div>
             </div>
         </div>
@@ -149,14 +139,25 @@ import * as bootstrap from 'bootstrap';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
 import { handleResponse, authHeader } from '@/utils/authentication';
 
+declare interface Channel {
+    name: string
+    max_power: number
+}
+
 declare interface Inverter {
     id: string,
     serial: number,
     name: string,
-    type: string
+    type: string,
     max_power: number[]
 }
 
+declare interface AlertResponse {
+    message: string,
+    type: string,
+    show: boolean
+}
+
 export default defineComponent({
     components: {
         BasePage,
@@ -168,16 +169,11 @@ export default defineComponent({
         return {
             modal: {} as bootstrap.Modal,
             modalDelete: {} as bootstrap.Modal,
-            deleteId: -1,
+            newInverterData: {} as Inverter,
-            editId: "-1",
+            selectedInverterData: {} as Inverter,
-            inverterData: {} as Inverter,
-            editInverterData: {} as Inverter,
-            deleteInverterData: {} as Inverter,
             inverters: [] as Inverter[],
             dataLoading: true,
-            alertMessage: "",
+            alert: {} as AlertResponse
-            alertType: "info",
-            showAlert: false,
         };
     },
     mounted() {
@@ -204,108 +200,42 @@ export default defineComponent({
                     this.dataLoading = false;
                 });
         },
+        callInverterApiEndpoint: function (endpoint: string, jsonData: string) {
+            const formData = new FormData();
+            formData.append("data", jsonData);
+
+            fetch('/api/inverter/' + endpoint, {
+                method: 'POST',
+                headers: authHeader(),
+                body: formData,
+            })
+                .then((response) => handleResponse(response, this.$emitter))
+                .then((data) => {
+                    this.getInverters();
+                    this.alert = data;
+                    this.alert.show = true;
+                });
+        },
         onSubmit() {
-            const formData = new FormData();
+            this.callInverterApiEndpoint("add", JSON.stringify(this.newInverterData));
-            formData.append("data", JSON.stringify(this.inverterData));
+            this.newInverterData = {} as Inverter;
-
+        },
-            fetch("/api/inverter/add", {
+        onDelete() {
-                method: "POST",
+            this.callInverterApiEndpoint("del", JSON.stringify({ id: this.selectedInverterData.id }));
-                headers: authHeader(),
+            this.onCloseModal(this.modalDelete);
-                body: formData,
+        },
-            })
+        onEditSubmit() {
-                .then((response) => handleResponse(response, this.$emitter))
+            this.callInverterApiEndpoint("edit", JSON.stringify(this.selectedInverterData));
-                .then(
+            this.onCloseModal(this.modal);
-                    (response) => {
+        },
-                        this.alertMessage = response.message;
+        onOpenModal(modal: bootstrap.Modal, inverter: Inverter) {
-                        this.alertType = response.type;
+            // deep copy inverter object for editing/deleting
-                        this.showAlert = true;
+            this.selectedInverterData = JSON.parse(JSON.stringify(inverter)) as Inverter;
+            modal.show();
+        },
+        onCloseModal(modal: bootstrap.Modal) {
+            modal.hide();
         }
-                )
-                .then(() => { this.getInverters() });
-
-            this.inverterData.serial = 0;
-            this.inverterData.name = "";
-        },
-        onDeleteModal(inverter: Inverter) {
-            this.modalDelete.show();
-            this.deleteInverterData.serial = inverter.serial;
-            this.deleteInverterData.name = inverter.name;
-            this.deleteInverterData.type = inverter.type;
-            this.deleteId = +inverter.id;
-        },
-        onDeleteCancel() {
-            this.deleteId = -1;
-            this.deleteInverterData.serial = 0;
-            this.deleteInverterData.name = "";
-            this.deleteInverterData.max_power = [];
-            this.modalDelete.hide();
-        },
-        onDelete(id: string) {
-            const formData = new FormData();
-            formData.append("data", JSON.stringify({ id: id }));
-
-            fetch("/api/inverter/del", {
-                method: "POST",
-                headers: authHeader(),
-                body: formData,
-            })
-                .then((response) => handleResponse(response, this.$emitter))
-                .then(
-                    (response) => {
-                        this.alertMessage = response.message;
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                )
-                .then(() => { this.getInverters() });
-            this.deleteId = -1;
-            this.deleteInverterData.serial = 0;
-            this.deleteInverterData.name = "";
-            this.deleteInverterData.max_power = [];
-            this.modalDelete.hide();
-        },
-        onEdit(inverter: Inverter) {
-            this.modal.show();
-            this.editId = inverter.id;
-            this.editInverterData.serial = inverter.serial;
-            this.editInverterData.name = inverter.name;
-            this.editInverterData.type = inverter.type;
-            this.editInverterData.max_power = inverter.max_power;
-        },
-        onCancel() {
-            this.editId = "-1";
-            this.editInverterData.serial = 0;
-            this.editInverterData.name = "";
-            this.editInverterData.max_power = [];
-            this.modal.hide();
-        },
-        onEditSubmit(id: string) {
-            const formData = new FormData();
-            this.editInverterData.id = id;
-            formData.append("data", JSON.stringify(this.editInverterData));
-
-            fetch("/api/inverter/edit", {
-                method: "POST",
-                headers: authHeader(),
-                body: formData,
-            })
-                .then((response) => handleResponse(response, this.$emitter))
-                .then(
-                    (response) => {
-                        this.alertMessage = response.message;
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                )
-                .then(() => { this.getInverters() });
-
-            this.editId = "-1";
-            this.editInverterData.serial = 0;
-            this.editInverterData.name = "";
-            this.editInverterData.type = "";
-            this.editInverterData.max_power = [];
-            this.modal.hide();
-        },
     },
 });
 </script>