patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

reworked the InverterAdminView.vue view for easier maintainability.

Browse Source 
this also fixed the bug of changed max_power values after closing the edit modal without saving
This commit is contained in:
Michael Wilk 2022-11-14 14:43:42 +01:00
parent bad903106a
commit 7d203b50a3
1 changed files with 78 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

226
webapp/src/views/InverterAdminView.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<BasePage :title="'Inverter Settings'" :isLoading="dataLoading"> <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> </BootstrapAlert>
<div class="card"> <div class="card">
@ -10,13 +10,13 @@
<form class="form-inline" v-on:submit.prevent="onSubmit"> <form class="form-inline" v-on:submit.prevent="onSubmit">
<div class="form-group"> <div class="form-group">
<label>Serial</label> <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 /> required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Name</label> <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 /> maxlength="31" required />
</div> </div>
<div class="ml-auto text-right"> <div class="ml-auto text-right">
<button type="submit" class="btn btn-primary my-2">Add</button> <button type="submit" class="btn btn-primary my-2">Add</button>
@ -44,22 +44,15 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="inverter in sortedInverters" v-bind:key="inverter.id"> <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> <td>
<a href="#" class="icon text-danger" title="Delete inverter"> <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>&nbsp;
<a href="#" class="icon" title="Edit inverter"> <a href="#" class="icon" title="Edit inverter">
<BIconPencil v-on:click="onEdit(inverter)" /> <BIconPencil v-on:click="onOpenModal(modal, inverter)" />
</a> </a>
</td> </td>
</tr> </tr>
@ -78,39 +71,36 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
<div class="mb-3"> <div class="mb-3">
<label for="inverter-serial" class="col-form-label">Serial:</label> <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" /> class="form-control" />
</div>
<div class="mb-3">
<label for="inverter-name" class="col-form-label">Name:</label> <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>
<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">
<div class="input-group"> <input type="number" class="form-control" :id="`inverter-max_${index}`" min="0"
<input type="number" class="form-control" :id="`inverter-max_${index}`" min="0" v-model="selectedInverterData.max_power[index]"
v-model="editInverterData.max_power[index]" :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
:aria-describedby="`inverter-maxDescription_${index} inverter-maxHelpText_${index}`" /> <span class="input-group-text" :id="`inverter-maxDescription_${index}`">W<sup>*</sup></span>
<span class="input-group-text" :id="`inverter-maxDescription_${index}`">W</span> </div>
</div> </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> </form>
</div> </div>
<div class="modal-footer"> <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> 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> changes</button>
</div> </div>
</div> </div>
@ -125,13 +115,13 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <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>
<div class="modal-footer"> <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> 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> </div>
</div> </div>
@ -149,14 +139,25 @@ import * as bootstrap from 'bootstrap';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
declare interface Channel {
name: string
max_power: number
}
declare interface Inverter { declare interface Inverter {
id: string, id: string,
serial: number, serial: number,
name: string, name: string,
type: string type: string,
max_power: number[] max_power: number[]
} }
declare interface AlertResponse {
message: string,
type: string,
show: boolean
}
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
@ -168,16 +169,11 @@ export default defineComponent({
return { return {
modal: {} as bootstrap.Modal, modal: {} as bootstrap.Modal,
modalDelete: {} 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[], inverters: [] as Inverter[],
dataLoading: true, dataLoading: true,
alertMessage: "", alert: {} as AlertResponse
alertType: "info",
showAlert: false,
}; };
}, },
mounted() { mounted() {
@ -204,108 +200,42 @@ export default defineComponent({
this.dataLoading = false; 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() { 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", {
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.inverterData.serial = 0;
this.inverterData.name = "";
}, },
onDeleteModal(inverter: Inverter) { onDelete() {
this.modalDelete.show(); this.callInverterApiEndpoint("del", JSON.stringify({ id: this.selectedInverterData.id }));
this.deleteInverterData.serial = inverter.serial; this.onCloseModal(this.modalDelete);
this.deleteInverterData.name = inverter.name;
this.deleteInverterData.type = inverter.type;
this.deleteId = +inverter.id;
}, },
onDeleteCancel() { onEditSubmit() {
this.deleteId = -1; this.callInverterApiEndpoint("edit", JSON.stringify(this.selectedInverterData));
this.deleteInverterData.serial = 0; this.onCloseModal(this.modal);
this.deleteInverterData.name = "";
this.deleteInverterData.max_power = [];
this.modalDelete.hide();
}, },
onDelete(id: string) { onOpenModal(modal: bootstrap.Modal, inverter: Inverter) {
const formData = new FormData(); // deep copy inverter object for editing/deleting
formData.append("data", JSON.stringify({ id: id })); this.selectedInverterData = JSON.parse(JSON.stringify(inverter)) as Inverter;
modal.show();
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();
}, },
onCloseModal(modal: bootstrap.Modal) {
modal.hide();
}
}, },
}); });
</script> </script>