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

webapp: Use volar formatter

Browse Source
This commit is contained in:
Thomas Basler 2022-06-21 20:32:43 +02:00
parent cd35261570
commit 5100c44c23
24 changed files with 1759 additions and 2077 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webapp/src/App.vue
View File

@ -1,25 +1,25 @@
<template>
<NavBar />
<main class="container-fluid">
<router-view />
</main>
<NavBar />
<main class="container-fluid">
<router-view />
</main>
</template>
<script>
import NavBar from "./components/NavBar.vue";
export default {
name: "App",
components: {
NavBar,
},
name: "App",
components: {
NavBar,
},
};
</script>
<style>
/* Show it is fixed to the top */
body {
min-height: 75rem;
padding-top: 4.5rem;
min-height: 75rem;
padding-top: 4.5rem;
}
</style>

15
webapp/src/components/AboutView.vue
View File

@ -1,11 +1,10 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>About</h1>
This project was started from
<a href="https://www.mikrocontroller.net/topic/525778" target="_blank"
>this discussion. (Mikrocontroller.net)</a
>
<div class="container" role="main">
<div class="page-header">
<h1>About</h1>
This project was started from
<a href="https://www.mikrocontroller.net/topic/525778" target="_blank">this discussion.
(Mikrocontroller.net)</a>
</div>
</div>
</div>
</template>

224
webapp/src/components/DtuAdminView.vue
View File

@ -1,76 +1,50 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>DTU Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveDtuConfig">
<div class="card">
<div class="card-header text-white bg-primary">DTU Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputDtuSerial" class="col-sm-2 col-form-label"
>Serial:</label
>
<div class="col-sm-10">
<input
type="number"
class="form-control"
id="inputDtuSerial"
min="1"
max="99999999999"
placeholder="DTU Serial"
v-model="dtuConfigList.dtu_serial"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputPollInterval" class="col-sm-2 col-form-label"
>Poll Interval:</label
>
<div class="col-sm-10">
<div class="input-group">
<input
type="number"
class="form-control"
id="inputPollInterval"
min="1"
max="86400"
placeholder="Poll Interval in Seconds"
v-model="dtuConfigList.dtu_pollinterval"
aria-describedby="pollIntervalDescription"
/>
<span class="input-group-text" id="pollIntervalDescription"
>seconds</span
>
</div>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezone" class="col-sm-2 col-form-label"
>PA Level:</label
>
<div class="col-sm-10">
<select class="form-select" v-model="dtuConfigList.dtu_palevel">
<option
v-for="palevel in palevelList"
:key="palevel.key"
:value="palevel.key"
>
{{ palevel.value }}
</option>
</select>
</div>
</div>
<div class="container" role="main">
<div class="page-header">
<h1>DTU Settings</h1>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveDtuConfig">
<div class="card">
<div class="card-header text-white bg-primary">DTU Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputDtuSerial" min="1" max="99999999999"
placeholder="DTU Serial" v-model="dtuConfigList.dtu_serial" />
</div>
</div>
<div class="row mb-3">
<label for="inputPollInterval" class="col-sm-2 col-form-label">Poll Interval:</label>
<div class="col-sm-10">
<div class="input-group">
<input type="number" class="form-control" id="inputPollInterval" min="1" max="86400"
placeholder="Poll Interval in Seconds" v-model="dtuConfigList.dtu_pollinterval"
aria-describedby="pollIntervalDescription" />
<span class="input-group-text" id="pollIntervalDescription">seconds</span>
</div>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezone" class="col-sm-2 col-form-label">PA Level:</label>
<div class="col-sm-10">
<select class="form-select" v-model="dtuConfigList.dtu_palevel">
<option v-for="palevel in palevelList" :key="palevel.key" :value="palevel.key">
{{ palevel.value }}
</option>
</select>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
</template>
<script>
@ -78,61 +52,61 @@ import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
export default defineComponent({
components: {
BootstrapAlert,
},
data() {
return {
dtuConfigList: [],
palevelList: [
{ key: 0, value: "Minimum (-18 dBm)" },
{ key: 1, value: "Low (-12 dBm)" },
{ key: 2, value: "High (-6 dBm)" },
{ key: 3, value: "Maximum (0 dBm)" },
],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
this.getDtuConfig();
},
methods: {
getDtuConfig() {
fetch("/api/dtu/config")
.then((response) => response.json())
.then(
function (data) {
this.dtuConfigList = data;
}.bind(this)
);
components: {
BootstrapAlert,
},
saveDtuConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.dtuConfigList));
fetch("/api/dtu/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
data() {
return {
dtuConfigList: [],
palevelList: [
{ key: 0, value: "Minimum (-18 dBm)" },
{ key: 1, value: "Low (-12 dBm)" },
{ key: 2, value: "High (-6 dBm)" },
{ key: 3, value: "Maximum (0 dBm)" },
],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
this.getDtuConfig();
},
methods: {
getDtuConfig() {
fetch("/api/dtu/config")
.then((response) => response.json())
.then(
function (data) {
this.dtuConfigList = data;
}.bind(this)
);
},
saveDtuConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.dtuConfigList));
fetch("/api/dtu/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
},
},
},
});
</script>

320
webapp/src/components/FirmwareUpgradeView.vue
View File

@ -1,82 +1,74 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>Firmware Upgrade</h1>
</div>
<div class="position-relative" v-if="loading">
<div class="position-absolute top-50 start-50 translate-middle">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
<div class="container" role="main">
<div class="page-header">
<h1>Firmware Upgrade</h1>
</div>
</div>
</div>
<div v-if="!loading && !uploading && OTAError !== null" class="card">
<div class="card-header text-white bg-danger">OTA Error</div>
<div class="card-body text-center">
<p class="h1 mb-2"><BIconExclamationCircleFill /></p>
<span style="vertical-align: middle" class="ml-2">
{{ OTAError }}
</span>
<br />
<br />
<button class="btn btn-light" @click="clear">
<BIconArrowLeft /> Back
</button>
<button class="btn btn-primary" @click="retryOTA">
<BIconArrowRepeat /> Retry
</button>
</div>
</div>
<div v-else-if="!loading && !uploading && OTASuccess" class="card">
<div class="card-header text-white bg-success">OTA Status</div>
<div class="card-body text-center">
<span class="h1 mb-2"><BIconCheckCircle /></span>
<span> OTA Success </span>
<br />
<br />
<button class="btn btn-primary" @click="clear">
<BIconArrowLeft /> Back
</button>
</div>
</div>
<div v-else-if="!loading && !uploading" class="card">
<div class="card-header text-white bg-primary">Firmware Upload</div>
<div class="card-body text-center">
<div class="form-group pt-2 mt-3">
<input
class="form-control"
type="file"
ref="file"
accept=".bin,.bin.gz"
@change="uploadOTA"
/>
<div class="position-relative" v-if="loading">
<div class="position-absolute top-50 start-50 translate-middle">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="!loading && uploading" class="card">
<div class="card-header text-white bg-primary">Upload Progress</div>
<div class="card-body text-center">
<div class="progress">
<div
class="progress-bar"
role="progressbar"
:style="{ width: this.progress + '%' }"
v-bind:aria-valuenow="this.progress"
aria-valuemin="0"
aria-valuemax="100"
>
{{ progress }}%
</div>
<div v-if="!loading && !uploading && OTAError !== null" class="card">
<div class="card-header text-white bg-danger">OTA Error</div>
<div class="card-body text-center">
<p class="h1 mb-2">
<BIconExclamationCircleFill />
</p>
<span style="vertical-align: middle" class="ml-2">
{{ OTAError }}
</span>
<br />
<br />
<button class="btn btn-light" @click="clear">
<BIconArrowLeft /> Back
</button>
<button class="btn btn-primary" @click="retryOTA">
<BIconArrowRepeat /> Retry
</button>
</div>
</div>
<div v-else-if="!loading && !uploading && OTASuccess" class="card">
<div class="card-header text-white bg-success">OTA Status</div>
<div class="card-body text-center">
<span class="h1 mb-2">
<BIconCheckCircle />
</span>
<span> OTA Success </span>
<br />
<br />
<button class="btn btn-primary" @click="clear">
<BIconArrowLeft /> Back
</button>
</div>
</div>
<div v-else-if="!loading && !uploading" class="card">
<div class="card-header text-white bg-primary">Firmware Upload</div>
<div class="card-body text-center">
<div class="form-group pt-2 mt-3">
<input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
</div>
</div>
</div>
<div v-else-if="!loading && uploading" class="card">
<div class="card-header text-white bg-primary">Upload Progress</div>
<div class="card-body text-center">
<div class="progress">
<div class="progress-bar" role="progressbar" :style="{ width: this.progress + '%' }"
v-bind:aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100">
{{ progress }}%
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -84,101 +76,101 @@ import { defineComponent } from 'vue';
import SparkMD5 from "spark-md5";
export default defineComponent({
data() {
return {
loading: true,
uploading: false,
progress: 0,
OTAError: null,
OTASuccess: false,
type: "firmware",
file: null,
};
},
methods: {
fileMD5(file) {
return new Promise((resolve, reject) => {
const blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice;
const chunkSize = 2097152; // Read in chunks of 2MB
const chunks = Math.ceil(file.size / chunkSize);
const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader();
let currentChunk = 0;
fileReader.onload = (e) => {
spark.append(e.target.result); // Append array buffer
currentChunk += 1;
if (currentChunk < chunks) {
loadNext();
} else {
const md5 = spark.end();
resolve(md5);
}
data() {
return {
loading: true,
uploading: false,
progress: 0,
OTAError: null,
OTASuccess: false,
type: "firmware",
file: null,
};
fileReader.onerror = (e) => {
reject(e);
};
const loadNext = () => {
const start = currentChunk * chunkSize;
const end =
start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
};
loadNext();
});
},
uploadOTA(event) {
this.uploading = true;
const formData = new FormData();
if (event !== null) {
[this.file] = event.target.files;
}
const request = new XMLHttpRequest();
request.addEventListener("load", () => {
// request.response will hold the response from the server
if (request.status === 200) {
this.OTASuccess = true;
} else if (request.status !== 500) {
this.OTAError = `[HTTP ERROR] ${request.statusText}`;
} else {
this.OTAError = request.responseText;
}
this.uploading = false;
this.progress = 0;
});
// Upload progress
request.upload.addEventListener("progress", (e) => {
this.progress = Math.trunc((e.loaded / e.total) * 100);
});
request.withCredentials = true;
this.fileMD5(this.file)
.then((md5) => {
formData.append("MD5", md5);
formData.append("firmware", this.file, "firmware");
request.open("post", "/api/firmware/update");
request.send(formData);
})
.catch(() => {
this.OTAError =
"Unknown error while upload, check the console for details.";
this.uploading = false;
this.progress = 0;
});
methods: {
fileMD5(file) {
return new Promise((resolve, reject) => {
const blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice;
const chunkSize = 2097152; // Read in chunks of 2MB
const chunks = Math.ceil(file.size / chunkSize);
const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader();
let currentChunk = 0;
fileReader.onload = (e) => {
spark.append(e.target.result); // Append array buffer
currentChunk += 1;
if (currentChunk < chunks) {
loadNext();
} else {
const md5 = spark.end();
resolve(md5);
}
};
fileReader.onerror = (e) => {
reject(e);
};
const loadNext = () => {
const start = currentChunk * chunkSize;
const end =
start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
};
loadNext();
});
},
uploadOTA(event) {
this.uploading = true;
const formData = new FormData();
if (event !== null) {
[this.file] = event.target.files;
}
const request = new XMLHttpRequest();
request.addEventListener("load", () => {
// request.response will hold the response from the server
if (request.status === 200) {
this.OTASuccess = true;
} else if (request.status !== 500) {
this.OTAError = `[HTTP ERROR] ${request.statusText}`;
} else {
this.OTAError = request.responseText;
}
this.uploading = false;
this.progress = 0;
});
// Upload progress
request.upload.addEventListener("progress", (e) => {
this.progress = Math.trunc((e.loaded / e.total) * 100);
});
request.withCredentials = true;
this.fileMD5(this.file)
.then((md5) => {
formData.append("MD5", md5);
formData.append("firmware", this.file, "firmware");
request.open("post", "/api/firmware/update");
request.send(formData);
})
.catch(() => {
this.OTAError =
"Unknown error while upload, check the console for details.";
this.uploading = false;
this.progress = 0;
});
},
retryOTA() {
this.OTAError = null;
this.OTASuccess = false;
this.uploadOTA(null);
},
clear() {
this.OTAError = null;
this.OTASuccess = false;
},
},
retryOTA() {
this.OTAError = null;
this.OTASuccess = false;
this.uploadOTA(null);
mounted() {
this.loading = false;
},
clear() {
this.OTAError = null;
this.OTASuccess = false;
},
},
mounted() {
this.loading = false;
},
});
</script>

251
webapp/src/components/HomeView.vue
View File

@ -1,72 +1,48 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>Live Data</h1>
<template v-if="waitForData == true">Waiting for data... </template>
<template v-else>
<div class="d-flex align-items-start">
<div
class="nav flex-column nav-pills me-3"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<button
v-for="inverter in inverterData"
:key="inverter.serial"
class="nav-link"
:id="'v-pills-' + inverter.serial + '-tab'"
data-bs-toggle="pill"
:data-bs-target="'#v-pills-' + inverter.serial"
type="button"
role="tab"
aria-controls="'v-pills-' + inverter.serial"
aria-selected="true"
>
{{ inverter.name }}
</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div
v-for="inverter in inverterData"
:key="inverter.serial"
class="tab-pane fade show"
:id="'v-pills-' + inverter.serial"
role="tabpanel"
:aria-labelledby="'v-pills-' + inverter.serial + '-tab'"
tabindex="0"
>
<div class="card">
<div
class="card-header text-white bg-primary"
:class="{
'bg-danger': inverter.age_critical,
'bg-primary': !inverter.age_critical,
}"
>
{{ inverter.name }} (Inverter Serial Number:
{{ inverter.serial }}) (Data Age:
{{ inverter.data_age }} seconds)
</div>
<div class="card-body">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div v-for="channel in 5" :key="channel">
<InverterChannelInfo
v-if="inverter[channel - 1]"
:channelData="inverter[channel - 1]"
:channelNumber="channel - 1"
/>
<div class="container" role="main">
<div class="page-header">
<h1>Live Data</h1>
<template v-if="waitForData == true">Waiting for data... </template>
<template v-else>
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
:id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
:data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
{{ inverter.name }}
</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
:id="'v-pills-' + inverter.serial" role="tabpanel"
:aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
<div class="card">
<div class="card-header text-white bg-primary" :class="{
'bg-danger': inverter.age_critical,
'bg-primary': !inverter.age_critical,
}">
{{ inverter.name }} (Inverter Serial Number:
{{ inverter.serial }}) (Data Age:
{{ inverter.data_age }} seconds)
</div>
<div class="card-body">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div v-for="channel in 5" :key="channel">
<InverterChannelInfo v-if="inverter[channel - 1]"
:channelData="inverter[channel - 1]" :channelNumber="channel - 1" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</template>
</div>
</div>
</template>
<script>
@ -75,84 +51,83 @@ import InverterChannelInfo from "@/components/partials/InverterChannelInfo";
import bootstrap from "bootstrap/dist/js/bootstrap.js";
export default defineComponent({
components: {
InverterChannelInfo,
},
data() {
return {
socket: null,
heartInterval: null,
waitForData: true,
inverterData: [],
isFirstFetchAfterConnect: true,
};
},
created() {
this.initSocket();
},
unmounted() {
this.closeSocket();
},
updated() {
// Select first tab
if (this.isFirstFetchAfterConnect) {
this.isFirstFetchAfterConnect = false;
const firstTabEl = this.$el.querySelector(
"#v-pills-tab:first-child button"
);
if (firstTabEl != null) {
const firstTab = new bootstrap.Tab(firstTabEl);
firstTab.show();
}
}
},
methods: {
initSocket() {
console.log("Starting connection to WebSocket Server");
const { protocol, host } = location;
const webSocketUrl = `${
protocol === "https" ? "wss" : "ws"
}://${host}/livedata`;
this.socket = new WebSocket(webSocketUrl);
this.socket.onmessage = function (event) {
console.log(event);
this.inverterData = JSON.parse(event.data);
this.waitForData = false;
this.heartCheck(); // Reset heartbeat detection
}.bind(this);
this.socket.onopen = function (event) {
console.log(event);
console.log("Successfully connected to the echo websocket server...");
};
// Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
window.onbeforeunload = () => {
components: {
InverterChannelInfo,
},
data() {
return {
socket: null,
heartInterval: null,
waitForData: true,
inverterData: [],
isFirstFetchAfterConnect: true,
};
},
created() {
this.initSocket();
},
unmounted() {
this.closeSocket();
};
},
// Send heartbeat packets regularly * 59s Send a heartbeat
heartCheck() {
this.heartInterval && clearTimeout(this.heartInterval);
this.heartInterval = setInterval(() => {
if (this.socket.readyState === 1) {
// Connection status
this.socket.send("ping");
} else {
this.initSocket(); // Breakpoint reconnection 5 Time
updated() {
// Select first tab
if (this.isFirstFetchAfterConnect) {
this.isFirstFetchAfterConnect = false;
const firstTabEl = this.$el.querySelector(
"#v-pills-tab:first-child button"
);
if (firstTabEl != null) {
const firstTab = new bootstrap.Tab(firstTabEl);
firstTab.show();
}
}
}, 59 * 1000);
},
/** To break off websocket Connect */
closeSocket() {
this.socket.close();
this.heartInterval && clearTimeout(this.heartInterval);
this.isFirstFetchAfterConnect = true;
methods: {
initSocket() {
console.log("Starting connection to WebSocket Server");
const { protocol, host } = location;
const webSocketUrl = `${protocol === "https" ? "wss" : "ws"
}://${host}/livedata`;
this.socket = new WebSocket(webSocketUrl);
this.socket.onmessage = function (event) {
console.log(event);
this.inverterData = JSON.parse(event.data);
this.waitForData = false;
this.heartCheck(); // Reset heartbeat detection
}.bind(this);
this.socket.onopen = function (event) {
console.log(event);
console.log("Successfully connected to the echo websocket server...");
};
// Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
window.onbeforeunload = () => {
this.closeSocket();
};
},
// Send heartbeat packets regularly * 59s Send a heartbeat
heartCheck() {
this.heartInterval && clearTimeout(this.heartInterval);
this.heartInterval = setInterval(() => {
if (this.socket.readyState === 1) {
// Connection status
this.socket.send("ping");
} else {
this.initSocket(); // Breakpoint reconnection 5 Time
}
}, 59 * 1000);
},
/** To break off websocket Connect */
closeSocket() {
this.socket.close();
this.heartInterval && clearTimeout(this.heartInterval);
this.isFirstFetchAfterConnect = true;
},
},
},
});
</script>

443
webapp/src/components/InverterAdminView.vue
View File

@ -1,112 +1,95 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>Inverter Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<div class="card">
<div class="card-header text-white bg-primary">Add a new Inverter</div>
<div class="card-body">
<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"
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"
maxlength="31"
required
/>
</div>
<div class="ml-auto text-right">
<button type="submit" class="btn btn-primary my-2">Add</button>
</div>
</form>
</div>
</div>
<div class="card mt-5">
<div class="card-header text-white bg-primary">Inverter List</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Serial</th>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="inverter in sortedInverters" v-bind:key="inverter.id">
<template v-if="editId == inverter.id">
<td>
<input
v-model="editInverterData.serial"
type="number"
class="form-control"
/>
</td>
<td>
<input
v-model="editInverterData.name"
type="text"
class="form-control"
maxlength="31"
/>
</td>
<td>
{{ editInverterData.type }}
</td>
<td>
<a href="#" class="icon">
<BIconCheck v-on:click="onEditSubmit(inverter.id)" />
</a>
<a href="#" class="icon">
<BIconX v-on:click="onCancel" />
</a>
</td>
</template>
<template v-else>
<td>
{{ inverter.serial }}
</td>
<td>
{{ inverter.name }}
</td>
<td>
{{ inverter.type }}
</td>
<td>
<a href="#" class="icon">
<BIconTrash v-on:click="onDelete(inverter.id)" />
</a>
<a href="#" class="icon">
<BIconPencil v-on:click="onEdit(inverter)" />
</a>
</td>
</template>
</tr>
</tbody>
</table>
<div class="container" role="main">
<div class="page-header">
<h1>Inverter Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<div class="card">
<div class="card-header text-white bg-primary">Add a new Inverter</div>
<div class="card-body">
<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"
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"
maxlength="31" required />
</div>
<div class="ml-auto text-right">
<button type="submit" class="btn btn-primary my-2">Add</button>
</div>
</form>
</div>
</div>
<div class="card mt-5">
<div class="card-header text-white bg-primary">Inverter List</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Serial</th>
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="inverter in sortedInverters" v-bind:key="inverter.id">
<template v-if="editId == inverter.id">
<td>
<input v-model="editInverterData.serial" type="number" class="form-control" />
</td>
<td>
<input v-model="editInverterData.name" type="text" class="form-control"
maxlength="31" />
</td>
<td>
{{ editInverterData.type }}
</td>
<td>
<a href="#" class="icon">
<BIconCheck v-on:click="onEditSubmit(inverter.id)" />
</a>
<a href="#" class="icon">
<BIconX v-on:click="onCancel" />
</a>
</td>
</template>
<template v-else>
<td>
{{ inverter.serial }}
</td>
<td>
{{ inverter.name }}
</td>
<td>
{{ inverter.type }}
</td>
<td>
<a href="#" class="icon">
<BIconTrash v-on:click="onDelete(inverter.id)" />
</a>
<a href="#" class="icon">
<BIconPencil v-on:click="onEdit(inverter)" />
</a>
</td>
</template>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
@ -114,137 +97,137 @@ import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
export default defineComponent({
components: {
BootstrapAlert,
},
data() {
return {
editId: "-1",
inverterData: {
id: "",
serial: "",
name: "",
},
editInverterData: {
id: "",
serial: "",
name: "",
type: "",
},
inverters: [],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
this.getInverters();
},
computed: {
sortedInverters() {
return this.inverters.slice().sort((a, b) => {
return a.serial - b.serial;
});
components: {
BootstrapAlert,
},
},
methods: {
getInverters() {
fetch("/api/inverter/list")
.then((response) => response.json())
.then((data) => (this.inverters = data.inverter));
data() {
return {
editId: "-1",
inverterData: {
id: "",
serial: "",
name: "",
},
editInverterData: {
id: "",
serial: "",
name: "",
type: "",
},
inverters: [],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
onSubmit() {
const formData = new FormData();
formData.append("data", JSON.stringify(this.inverterData));
created() {
this.getInverters();
},
computed: {
sortedInverters() {
return this.inverters.slice().sort((a, b) => {
return a.serial - b.serial;
});
},
},
methods: {
getInverters() {
fetch("/api/inverter/list")
.then((response) => response.json())
.then((data) => (this.inverters = data.inverter));
},
onSubmit() {
const formData = new FormData();
formData.append("data", JSON.stringify(this.inverterData));
fetch("/api/inverter/add", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
)
.then(this.getInverters());
fetch("/api/inverter/add", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
)
.then(this.getInverters());
this.inverterData.serial = "";
this.inverterData.name = "";
},
onDelete(id) {
const formData = new FormData();
formData.append("data", JSON.stringify({ id: id }));
this.inverterData.serial = "";
this.inverterData.name = "";
},
onDelete(id) {
const formData = new FormData();
formData.append("data", JSON.stringify({ id: id }));
fetch("/api/inverter/del", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
)
.then(this.getInverters());
},
onEdit(inverter) {
this.editId = inverter.id;
this.editInverterData.serial = inverter.serial;
this.editInverterData.name = inverter.name;
this.editInverterData.type = inverter.type;
},
onCancel() {
this.editId = "-1";
this.editInverterData.serial = "";
this.editInverterData.name = "";
},
onEditSubmit(id) {
const formData = new FormData();
this.editInverterData.id = id;
formData.append("data", JSON.stringify(this.editInverterData));
fetch("/api/inverter/del", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
)
.then(this.getInverters());
},
onEdit(inverter) {
this.editId = inverter.id;
this.editInverterData.serial = inverter.serial;
this.editInverterData.name = inverter.name;
this.editInverterData.type = inverter.type;
},
onCancel() {
this.editId = "-1";
this.editInverterData.serial = "";
this.editInverterData.name = "";
},
onEditSubmit(id) {
const formData = new FormData();
this.editInverterData.id = id;
formData.append("data", JSON.stringify(this.editInverterData));
fetch("/api/inverter/edit", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
)
.then(this.getInverters());
fetch("/api/inverter/edit", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
)
.then(this.getInverters());
this.editId = "-1";
this.editInverterData.serial = "";
this.editInverterData.name = "";
this.editInverterData.type = "";
this.editId = "-1";
this.editInverterData.serial = "";
this.editInverterData.name = "";
this.editInverterData.type = "";
},
},
},
});
</script>

426
webapp/src/components/MqttAdminView.vue
View File

@ -1,213 +1,135 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>MqTT Settings</h1>
<div class="container" role="main">
<div class="page-header">
<h1>MqTT Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveMqttConfig">
<div class="card">
<div class="card-header text-white bg-primary">MqTT Configuration</div>
<div class="card-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="inputMqtt"
v-model="mqttConfigList.mqtt_enabled" />
<label class="form-check-label" for="inputMqtt">Enable MqTT</label>
</div>
</div>
</div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
<div class="card-header text-white bg-primary">
MqTT Broker Parameter
</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputHostname" maxlength="32"
placeholder="Hostname or IP address" v-model="mqttConfigList.mqtt_hostname" />
</div>
</div>
<div class="row mb-3">
<label for="inputPort" class="col-sm-2 col-form-label">Port:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputPort" min="1" max="65535"
placeholder="Port number" v-model="mqttConfigList.mqtt_port" />
</div>
</div>
<div class="row mb-3">
<label for="inputUsername" class="col-sm-2 col-form-label">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUsername" maxlength="32"
placeholder="Username, leave empty for anonymous connection"
v-model="mqttConfigList.mqtt_username" />
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword" maxlength="32"
placeholder="Password, leave empty for anonymous connection"
v-model="mqttConfigList.mqtt_password" />
</div>
</div>
<div class="row mb-3">
<label for="inputTopic" class="col-sm-2 col-form-label">Base Topic:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTopic" maxlength="32"
placeholder="Base topic, will be prepend to all published topics (e.g. inverter/)"
v-model="mqttConfigList.mqtt_topic" />
</div>
</div>
<div class="row mb-3">
<label for="inputPublishInterval" class="col-sm-2 col-form-label">Publish Interval:</label>
<div class="col-sm-10">
<div class="input-group">
<input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
placeholder="Publish Interval in Seconds"
v-model="mqttConfigList.mqtt_publish_interval"
aria-describedby="publishIntervalDescription" />
<span class="input-group-text" id="publishIntervalDescription">seconds</span>
</div>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 form-check-label" for="inputRetain">Enable Retain Flag</label>
<div class="col-sm-10">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="inputRetain"
v-model="mqttConfigList.mqtt_retain" />
</div>
</div>
</div>
</div>
</div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
<div class="card-header text-white bg-primary">LWT Parameters</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-text" id="basic-addon3">{{
mqttConfigList.mqtt_topic
}}</span>
<input type="text" class="form-control" id="inputLwtTopic" maxlength="32"
placeholder="LWT topic, will be append base topic"
v-model="mqttConfigList.mqtt_lwt_topic" aria-describedby="basic-addon3" />
</div>
</div>
</div>
<div class="row mb-3">
<label for="inputLwtOnline" class="col-sm-2 col-form-label">LWT Online message:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputLwtOnline" maxlength="20"
placeholder="Message that will be published to LWT topic when online"
v-model="mqttConfigList.mqtt_lwt_online" />
</div>
</div>
<div class="row mb-3">
<label for="inputLwtOffline" class="col-sm-2 col-form-label">LWT Offline message:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputLwtOffline" maxlength="20"
placeholder="Message that will be published to LWT topic when offline"
v-model="mqttConfigList.mqtt_lwt_offline" />
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveMqttConfig">
<div class="card">
<div class="card-header text-white bg-primary">MqTT Configuration</div>
<div class="card-body">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="inputMqtt"
v-model="mqttConfigList.mqtt_enabled"
/>
<label class="form-check-label" for="inputMqtt">Enable MqTT</label>
</div>
</div>
</div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
<div class="card-header text-white bg-primary">
MqTT Broker Parameter
</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputHostname" class="col-sm-2 col-form-label"
>Hostname:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputHostname"
maxlength="32"
placeholder="Hostname or IP address"
v-model="mqttConfigList.mqtt_hostname"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputPort" class="col-sm-2 col-form-label">Port:</label>
<div class="col-sm-10">
<input
type="number"
class="form-control"
id="inputPort"
min="1"
max="65535"
placeholder="Port number"
v-model="mqttConfigList.mqtt_port"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputUsername" class="col-sm-2 col-form-label"
>Username:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputUsername"
maxlength="32"
placeholder="Username, leave empty for anonymous connection"
v-model="mqttConfigList.mqtt_username"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label"
>Password:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputPassword"
maxlength="32"
placeholder="Password, leave empty for anonymous connection"
v-model="mqttConfigList.mqtt_password"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputTopic" class="col-sm-2 col-form-label"
>Base Topic:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputTopic"
maxlength="32"
placeholder="Base topic, will be prepend to all published topics (e.g. inverter/)"
v-model="mqttConfigList.mqtt_topic"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputPublishInterval" class="col-sm-2 col-form-label"
>Publish Interval:</label
>
<div class="col-sm-10">
<div class="input-group">
<input
type="number"
class="form-control"
id="inputPublishInterval"
min="5"
max="86400"
placeholder="Publish Interval in Seconds"
v-model="mqttConfigList.mqtt_publish_interval"
aria-describedby="publishIntervalDescription"
/>
<span class="input-group-text" id="publishIntervalDescription"
>seconds</span
>
</div>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 form-check-label" for="inputRetain"
>Enable Retain Flag</label
>
<div class="col-sm-10">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="inputRetain"
v-model="mqttConfigList.mqtt_retain"
/>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
<div class="card-header text-white bg-primary">LWT Parameters</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputLwtTopic" class="col-sm-2 col-form-label"
>LWT Topic:</label
>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-text" id="basic-addon3">{{
mqttConfigList.mqtt_topic
}}</span>
<input
type="text"
class="form-control"
id="inputLwtTopic"
maxlength="32"
placeholder="LWT topic, will be append base topic"
v-model="mqttConfigList.mqtt_lwt_topic"
aria-describedby="basic-addon3"
/>
</div>
</div>
</div>
<div class="row mb-3">
<label for="inputLwtOnline" class="col-sm-2 col-form-label"
>LWT Online message:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputLwtOnline"
maxlength="20"
placeholder="Message that will be published to LWT topic when online"
v-model="mqttConfigList.mqtt_lwt_online"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputLwtOffline" class="col-sm-2 col-form-label"
>LWT Offline message:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputLwtOffline"
maxlength="20"
placeholder="Message that will be published to LWT topic when offline"
v-model="mqttConfigList.mqtt_lwt_offline"
/>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
</template>
<script>
@ -215,51 +137,51 @@ import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
export default defineComponent({
components: {
BootstrapAlert,
},
data() {
return {
mqttConfigList: [],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
this.getMqttConfig();
},
methods: {
getMqttConfig() {
fetch("/api/mqtt/config")
.then((response) => response.json())
.then((data) => (this.mqttConfigList = data));
components: {
BootstrapAlert,
},
saveMqttConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.mqttConfigList));
fetch("/api/mqtt/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
data() {
return {
mqttConfigList: [],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
this.getMqttConfig();
},
methods: {
getMqttConfig() {
fetch("/api/mqtt/config")
.then((response) => response.json())
.then((data) => (this.mqttConfigList = data));
},
saveMqttConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.mqttConfigList));
fetch("/api/mqtt/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
},
},
},
});
</script>

187
webapp/src/components/MqttInfoView.vue
View File

@ -1,112 +1,103 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>MqTT Info</h1>
</div>
<div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td
class="badge"
:class="{
'bg-danger': !mqttDataList.mqtt_enabled,
'bg-success': mqttDataList.mqtt_enabled,
}"
>
<span v-if="mqttDataList.mqtt_enabled">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>Server</th>
<td>{{ mqttDataList.mqtt_hostname }}</td>
</tr>
<tr>
<th>Port</th>
<td>{{ mqttDataList.mqtt_port }}</td>
</tr>
<tr>
<th>Username</th>
<td>{{ mqttDataList.mqtt_username }}</td>
</tr>
<tr>
<th>Base Topic</th>
<td>{{ mqttDataList.mqtt_topic }}</td>
</tr>
<tr>
<th>Publish Tnterval</th>
<td>{{ mqttDataList.mqtt_publish_interval }} seconds</td>
</tr>
<tr>
<th>Retain</th>
<td
class="badge"
:class="{
'bg-danger': !mqttDataList.mqtt_retain,
'bg-success': mqttDataList.mqtt_retain,
}"
>
<span v-if="mqttDataList.mqtt_retain">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
</tbody>
</table>
<div class="container" role="main">
<div class="page-header">
<h1>MqTT Info</h1>
</div>
</div>
</div>
<div class="card mt-5">
<div class="card-header text-white bg-primary">Runtime Summary</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Connection Status</th>
<td
class="badge"
:class="{
'bg-danger': !mqttDataList.mqtt_connected,
'bg-success': mqttDataList.mqtt_connected,
}"
>
<span v-if="mqttDataList.mqtt_connected">connected</span>
<span v-else>disconnected</span>
</td>
</tr>
</tbody>
</table>
<div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_enabled,
'bg-success': mqttDataList.mqtt_enabled,
}">
<span v-if="mqttDataList.mqtt_enabled">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>Server</th>
<td>{{ mqttDataList.mqtt_hostname }}</td>
</tr>
<tr>
<th>Port</th>
<td>{{ mqttDataList.mqtt_port }}</td>
</tr>
<tr>
<th>Username</th>
<td>{{ mqttDataList.mqtt_username }}</td>
</tr>
<tr>
<th>Base Topic</th>
<td>{{ mqttDataList.mqtt_topic }}</td>
</tr>
<tr>
<th>Publish Tnterval</th>
<td>{{ mqttDataList.mqtt_publish_interval }} seconds</td>
</tr>
<tr>
<th>Retain</th>
<td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_retain,
'bg-success': mqttDataList.mqtt_retain,
}">
<span v-if="mqttDataList.mqtt_retain">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card mt-5">
<div class="card-header text-white bg-primary">Runtime Summary</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Connection Status</th>
<td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_connected,
'bg-success': mqttDataList.mqtt_connected,
}">
<span v-if="mqttDataList.mqtt_connected">connected</span>
<span v-else>disconnected</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
mqttDataList: [],
};
},
created() {
this.getNtpInfo();
},
methods: {
getNtpInfo() {
fetch("/api/mqtt/status")
.then((response) => response.json())
.then((data) => (this.mqttDataList = data));
data() {
return {
mqttDataList: [],
};
},
created() {
this.getNtpInfo();
},
methods: {
getNtpInfo() {
fetch("/api/mqtt/status")
.then((response) => response.json())
.then((data) => (this.mqttDataList = data));
},
},
},
});
</script>

172
webapp/src/components/NavBar.vue
View File

@ -1,109 +1,73 @@
<template>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">OpenDTU</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Live Data</router-link>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarScrollingDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Settings
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li>
<router-link class="dropdown-item" to="/settings/network"
>Network Settings</router-link
>
</li>
<li>
<router-link class="dropdown-item" to="/settings/ntp"
>NTP Settings</router-link
>
</li>
<li>
<router-link class="dropdown-item" to="/settings/mqtt"
>MqTT Settings</router-link
>
</li>
<li>
<router-link class="dropdown-item" to="/settings/inverter"
>Inverter Settings</router-link
>
</li>
<li>
<router-link class="dropdown-item" to="/settings/dtu"
>DTU Settings</router-link
>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<router-link class="dropdown-item" to="/firmware/upgrade"
>Firmware Upgrade</router-link
>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarScrollingDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Info
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li>
<router-link class="dropdown-item" to="/info/system"
>System</router-link
>
</li>
<li>
<router-link class="dropdown-item" to="/info/network"
>Network</router-link
>
</li>
<li>
<router-link class="dropdown-item" to="/info/ntp"
>NTP</router-link
>
</li>
<li>
<router-link class="dropdown-item" to="/info/mqtt"
>MqTT</router-link
>
</li>
</ul>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/about">About</router-link>
</li>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">OpenDTU</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Live Data</router-link>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Settings
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li>
<router-link class="dropdown-item" to="/settings/network">Network Settings</router-link>
</li>
<li>
<router-link class="dropdown-item" to="/settings/ntp">NTP Settings</router-link>
</li>
<li>
<router-link class="dropdown-item" to="/settings/mqtt">MqTT Settings</router-link>
</li>
<li>
<router-link class="dropdown-item" to="/settings/inverter">Inverter Settings
</router-link>
</li>
<li>
<router-link class="dropdown-item" to="/settings/dtu">DTU Settings</router-link>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<router-link class="dropdown-item" to="/firmware/upgrade">Firmware Upgrade</router-link>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Info
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li>
<router-link class="dropdown-item" to="/info/system">System</router-link>
</li>
<li>
<router-link class="dropdown-item" to="/info/network">Network</router-link>
</li>
<li>
<router-link class="dropdown-item" to="/info/ntp">NTP</router-link>
</li>
<li>
<router-link class="dropdown-item" to="/info/mqtt">MqTT</router-link>
</li>
</ul>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/about">About</router-link>
</li>
</div>
</div>
</div>
</div>
</div>
</nav>
</nav>
</template>
<script>

348
webapp/src/components/NetworkAdminView.vue
View File

@ -1,170 +1,100 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>Network Settings</h1>
<div class="container" role="main">
<div class="page-header">
<h1>Network Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveNetworkConfig">
<div class="card">
<div class="card-header text-white bg-primary">WiFi Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSSID" maxlength="32" placeholder="SSID"
v-model="networkConfigList.ssid" />
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">WiFi Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" maxlength="32"
placeholder="PSK" v-model="networkConfigList.password" />
</div>
</div>
<div class="row mb-3">
<label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputHostname" maxlength="32"
placeholder="Hostname" v-model="networkConfigList.hostname" />
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 form-check-label" for="inputDHCP">Enable DHCP</label>
<div class="col-sm-10">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="inputDHCP"
v-model="networkConfigList.dhcp" />
</div>
</div>
</div>
</div>
</div>
<div class="card" v-show="!networkConfigList.dhcp">
<div class="card-header text-white bg-primary">
Static IP Configuration
</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputIP" class="col-sm-2 col-form-label">IP Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputIP" maxlength="32" placeholder="IP address"
v-model="networkConfigList.ipaddress" />
</div>
</div>
<div class="row mb-3">
<label for="inputNetmask" class="col-sm-2 col-form-label">Netmask:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputNetmask" maxlength="32"
placeholder="Netmask" v-model="networkConfigList.netmask" />
</div>
</div>
<div class="row mb-3">
<label for="inputGateway" class="col-sm-2 col-form-label">Default Gateway:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputGateway" maxlength="32"
placeholder="Default Gateway" v-model="networkConfigList.gateway" />
</div>
</div>
<div class="row mb-3">
<label for="inputDNS1" class="col-sm-2 col-form-label">DNS Server 1:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputDNS1" maxlength="32"
placeholder="DNS Server 1" v-model="networkConfigList.dns1" />
</div>
</div>
<div class="row mb-3">
<label for="inputDNS2" class="col-sm-2 col-form-label">DNS Server 2:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputDNS2" maxlength="32"
placeholder="DNS Server 2" v-model="networkConfigList.dns2" />
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveNetworkConfig">
<div class="card">
<div class="card-header text-white bg-primary">WiFi Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputSSID" class="col-sm-2 col-form-label"
>WiFi SSID:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputSSID"
maxlength="32"
placeholder="SSID"
v-model="networkConfigList.ssid"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label"
>WiFi Password:</label
>
<div class="col-sm-10">
<input
type="password"
class="form-control"
id="inputPassword"
maxlength="32"
placeholder="PSK"
v-model="networkConfigList.password"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputHostname" class="col-sm-2 col-form-label"
>Hostname:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputHostname"
maxlength="32"
placeholder="Hostname"
v-model="networkConfigList.hostname"
/>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 form-check-label" for="inputDHCP"
>Enable DHCP</label
>
<div class="col-sm-10">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
id="inputDHCP"
v-model="networkConfigList.dhcp"
/>
</div>
</div>
</div>
</div>
</div>
<div class="card" v-show="!networkConfigList.dhcp">
<div class="card-header text-white bg-primary">
Static IP Configuration
</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputIP" class="col-sm-2 col-form-label"
>IP Address:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputIP"
maxlength="32"
placeholder="IP address"
v-model="networkConfigList.ipaddress"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputNetmask" class="col-sm-2 col-form-label"
>Netmask:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputNetmask"
maxlength="32"
placeholder="Netmask"
v-model="networkConfigList.netmask"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputGateway" class="col-sm-2 col-form-label"
>Default Gateway:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputGateway"
maxlength="32"
placeholder="Default Gateway"
v-model="networkConfigList.gateway"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputDNS1" class="col-sm-2 col-form-label"
>DNS Server 1:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputDNS1"
maxlength="32"
placeholder="DNS Server 1"
v-model="networkConfigList.dns1"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputDNS2" class="col-sm-2 col-form-label"
>DNS Server 2:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputDNS2"
maxlength="32"
placeholder="DNS Server 2"
v-model="networkConfigList.dns2"
/>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
</template>
<script>
@ -172,51 +102,51 @@ import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
export default defineComponent({
components: {
BootstrapAlert,
},
data() {
return {
networkConfigList: [],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
this.getNetworkConfig();
},
methods: {
getNetworkConfig() {
fetch("/api/network/config")
.then((response) => response.json())
.then((data) => (this.networkConfigList = data));
components: {
BootstrapAlert,
},
saveNetworkConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.networkConfigList));
fetch("/api/network/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
data() {
return {
networkConfigList: [],
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
created() {
this.getNetworkConfig();
},
methods: {
getNetworkConfig() {
fetch("/api/network/config")
.then((response) => response.json())
.then((data) => (this.networkConfigList = data));
},
saveNetworkConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.networkConfigList));
fetch("/api/network/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
},
},
},
});
</script>

36
webapp/src/components/NetworkInfoView.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>Network Info</h1>
<div class="container" role="main">
<div class="page-header">
<h1>Network Info</h1>
</div>
<WifiStationInfo />
<div class="mt-5"></div>
<WifiApInfo />
<div class="mt-5"></div>
<InterfaceStationInfo />
<div class="mt-5"></div>
<InterfaceApInfo />
<div class="mt-5"></div>
</div>
<WifiStationInfo />
<div class="mt-5"></div>
<WifiApInfo />
<div class="mt-5"></div>
<InterfaceStationInfo />
<div class="mt-5"></div>
<InterfaceApInfo />
<div class="mt-5"></div>
</div>
</template>
<script>
@ -22,11 +22,11 @@ import InterfaceStationInfo from "./partials/InterfaceStationInfo.vue";
import InterfaceApInfo from "./partials/InterfaceApInfo.vue";
export default defineComponent({
components: {
WifiStationInfo,
WifiApInfo,
InterfaceStationInfo,
InterfaceApInfo,
},
components: {
WifiStationInfo,
WifiApInfo,
InterfaceStationInfo,
InterfaceApInfo,
},
});
</script>

230
webapp/src/components/NtpAdminView.vue
View File

@ -1,69 +1,47 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>NTP Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveNtpConfig">
<div class="card">
<div class="card-header text-white bg-primary">NTP Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputNtpServer" class="col-sm-2 col-form-label"
>Time Server:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputNtpServer"
maxlength="32"
placeholder="Time Server"
v-model="ntpConfigList.ntp_server"
/>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezone" class="col-sm-2 col-form-label"
>Timezone:</label
>
<div class="col-sm-10">
<select class="form-select" v-model="timezoneSelect">
<option
v-for="(config, name) in timezoneList"
:key="name + '---' + config"
:value="name + '---' + config"
>
{{ name }}
</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezoneConfig" class="col-sm-2 col-form-label"
>Timezone Config:</label
>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="inputTimezoneConfig"
maxlength="32"
placeholder="Timezone"
v-model="ntpConfigList.ntp_timezone"
disabled
/>
</div>
</div>
<div class="container" role="main">
<div class="page-header">
<h1>NTP Settings</h1>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ this.alertMessage }}
</BootstrapAlert>
<form @submit="saveNtpConfig">
<div class="card">
<div class="card-header text-white bg-primary">NTP Configuration</div>
<div class="card-body">
<div class="row mb-3">
<label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputNtpServer" maxlength="32"
placeholder="Time Server" v-model="ntpConfigList.ntp_server" />
</div>
</div>
<div class="row mb-3">
<label for="inputTimezone" class="col-sm-2 col-form-label">Timezone:</label>
<div class="col-sm-10">
<select class="form-select" v-model="timezoneSelect">
<option v-for="(config, name) in timezoneList" :key="name + '---' + config"
:value="name + '---' + config">
{{ name }}
</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputTimezoneConfig" class="col-sm-2 col-form-label">Timezone Config:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</div>
</template>
<script>
@ -71,73 +49,73 @@ import { defineComponent } from 'vue';
import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
export default defineComponent({
components: {
BootstrapAlert,
},
data() {
return {
ntpConfigList: [],
timezoneList: {},
timezoneSelect: "",
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
watch: {
timezoneSelect: function (newValue) {
this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
components: {
BootstrapAlert,
},
},
created() {
this.getTimezoneList();
this.getNtpConfig();
},
methods: {
getTimezoneList() {
fetch("/zones.json")
.then((response) => response.json())
.then((data) => (this.timezoneList = data));
data() {
return {
ntpConfigList: [],
timezoneList: {},
timezoneSelect: "",
alertMessage: "",
alertType: "info",
showAlert: false,
};
},
getNtpConfig() {
fetch("/api/ntp/config")
.then((response) => response.json())
.then(
function (data) {
this.ntpConfigList = data;
this.timezoneSelect =
this.ntpConfigList.ntp_timezone_descr +
"---" +
this.ntpConfigList.ntp_timezone;
}.bind(this)
);
watch: {
timezoneSelect: function (newValue) {
this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
},
},
saveNtpConfig(e) {
e.preventDefault();
created() {
this.getTimezoneList();
this.getNtpConfig();
},
methods: {
getTimezoneList() {
fetch("/zones.json")
.then((response) => response.json())
.then((data) => (this.timezoneList = data));
},
getNtpConfig() {
fetch("/api/ntp/config")
.then((response) => response.json())
.then(
function (data) {
this.ntpConfigList = data;
this.timezoneSelect =
this.ntpConfigList.ntp_timezone_descr +
"---" +
this.ntpConfigList.ntp_timezone;
}.bind(this)
);
},
saveNtpConfig(e) {
e.preventDefault();
const formData = new FormData();
formData.append("data", JSON.stringify(this.ntpConfigList));
const formData = new FormData();
formData.append("data", JSON.stringify(this.ntpConfigList));
fetch("/api/ntp/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
fetch("/api/ntp/config", {
method: "POST",
body: formData,
})
.then(function (response) {
if (response.status != 200) {
throw response.status;
} else {
return response.json();
}
})
.then(
function (response) {
this.alertMessage = response.message;
this.alertType = response.type;
this.showAlert = true;
}.bind(this)
);
},
},
},
});
</script>

133
webapp/src/components/NtpInfoView.vue
View File

@ -1,82 +1,79 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>NTP Info</h1>
</div>
<div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Server</th>
<td>{{ ntpDataList.ntp_server }}</td>
</tr>
<tr>
<th>Timezone</th>
<td>{{ ntpDataList.ntp_timezone }}</td>
</tr>
<tr>
<th>Timezone Description</th>
<td>{{ ntpDataList.ntp_timezone_descr }}</td>
</tr>
</tbody>
</table>
<div class="container" role="main">
<div class="page-header">
<h1>NTP Info</h1>
</div>
</div>
</div>
<div class="card mt-5">
<div class="card-header text-white bg-primary">Current Time</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td
class="badge"
:class="{
'bg-danger': !ntpDataList.ntp_status,
'bg-success': ntpDataList.ntp_status,
}"
>
<span v-if="ntpDataList.ntp_status">synced</span>
<span v-else>not synced</span>
</td>
</tr>
<tr>
<th>Local Time</th>
<td>{{ ntpDataList.ntp_localtime }}</td>
</tr>
</tbody>
</table>
<div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Server</th>
<td>{{ ntpDataList.ntp_server }}</td>
</tr>
<tr>
<th>Timezone</th>
<td>{{ ntpDataList.ntp_timezone }}</td>
</tr>
<tr>
<th>Timezone Description</th>
<td>{{ ntpDataList.ntp_timezone_descr }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card mt-5">
<div class="card-header text-white bg-primary">Current Time</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td class="badge" :class="{
'bg-danger': !ntpDataList.ntp_status,
'bg-success': ntpDataList.ntp_status,
}">
<span v-if="ntpDataList.ntp_status">synced</span>
<span v-else>not synced</span>
</td>
</tr>
<tr>
<th>Local Time</th>
<td>{{ ntpDataList.ntp_localtime }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
ntpDataList: [],
};
},
created() {
this.getNtpInfo();
},
methods: {
getNtpInfo() {
fetch("/api/ntp/status")
.then((response) => response.json())
.then((data) => (this.ntpDataList = data));
data() {
return {
ntpDataList: [],
};
},
created() {
this.getNtpInfo();
},
methods: {
getNtpInfo() {
fetch("/api/ntp/status")
.then((response) => response.json())
.then((data) => (this.ntpDataList = data));
},
},
},
});
</script>

30
webapp/src/components/SystemInfoView.vue
View File

@ -1,15 +1,15 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>System Info</h1>
<div class="container" role="main">
<div class="page-header">
<h1>System Info</h1>
</div>
<FirmwareInfo />
<div class="mt-5"></div>
<HardwareInfo />
<div class="mt-5"></div>
<MemoryInfo />
<div class="mt-5"></div>
</div>
<FirmwareInfo />
<div class="mt-5"></div>
<HardwareInfo />
<div class="mt-5"></div>
<MemoryInfo />
<div class="mt-5"></div>
</div>
</template>
<script>
@ -19,10 +19,10 @@ import FirmwareInfo from "@/components/partials/FirmwareInfo.vue";
import MemoryInfo from "@/components/partials/MemoryInfo.vue";
export default defineComponent({
components: {
HardwareInfo,
FirmwareInfo,
MemoryInfo,
},
components: {
HardwareInfo,
FirmwareInfo,
MemoryInfo,
},
});
</script>

192
webapp/src/components/partials/BootstrapAlert.vue
View File

@ -1,21 +1,9 @@
<template>
<div
v-if="isAlertVisible"
ref="element"
class="alert"
role="alert"
:class="classes"
>
<slot />
<button
v-if="dismissible"
type="button"
class="btn-close"
data-bs-dismiss="alert"
:aria-label="dismissLabel"
@click="dismissClicked"
/>
</div>
<div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
<slot />
<button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" :aria-label="dismissLabel"
@click="dismissClicked" />
</div>
</template>
<script>
@ -23,105 +11,105 @@ import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
import Alert from "bootstrap/js/dist/alert";
export const toInteger = (value, defaultValue = NaN) => {
return Number.isInteger(value) ? value : defaultValue;
return Number.isInteger(value) ? value : defaultValue;
};
export default defineComponent({
name: "BAlert",
props: {
dismissLabel: { type: String, default: "Close" },
dismissible: { type: Boolean, default: false },
fade: { type: Boolean, default: false },
modelValue: { type: [Boolean, Number], default: false },
show: { type: Boolean, default: false },
variant: { type: String, default: "info" },
},
emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
setup(props, { emit }) {
const element = undefined;
let instance = undefined;
const classes = computed(() => ({
[`alert-${props.variant}`]: props.variant,
show: props.modelValue,
"alert-dismissible": props.dismissible,
fade: props.modelValue,
}));
name: "BAlert",
props: {
dismissLabel: { type: String, default: "Close" },
dismissible: { type: Boolean, default: false },
fade: { type: Boolean, default: false },
modelValue: { type: [Boolean, Number], default: false },
show: { type: Boolean, default: false },
variant: { type: String, default: "info" },
},
emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
setup(props, { emit }) {
const element = undefined;
let instance = undefined;
const classes = computed(() => ({
[`alert-${props.variant}`]: props.variant,
show: props.modelValue,
"alert-dismissible": props.dismissible,
fade: props.modelValue,
}));
let _countDownTimeout = 0;
let _countDownTimeout = 0;
const parseCountDown = (value) => {
if (typeof value === "boolean") {
return 0;
}
const parseCountDown = (value) => {
if (typeof value === "boolean") {
return 0;
}
const numberValue = toInteger(value, 0);
return numberValue > 0 ? numberValue : 0;
};
const numberValue = toInteger(value, 0);
return numberValue > 0 ? numberValue : 0;
};
const clearCountDownInterval = () => {
if (_countDownTimeout === undefined) return;
clearTimeout(_countDownTimeout);
_countDownTimeout = undefined;
};
const clearCountDownInterval = () => {
if (_countDownTimeout === undefined) return;
clearTimeout(_countDownTimeout);
_countDownTimeout = undefined;
};
const countDown = ref(parseCountDown(props.modelValue));
const isAlertVisible = computed(() => props.modelValue || props.show);
const countDown = ref(parseCountDown(props.modelValue));
const isAlertVisible = computed(() => props.modelValue || props.show);
onBeforeUnmount(() => {
clearCountDownInterval();
instance?.dispose();
instance = undefined;
});
onBeforeUnmount(() => {
clearCountDownInterval();
instance?.dispose();
instance = undefined;
});
const parsedModelValue = computed(() => {
if (props.modelValue === true) {
return true;
}
if (props.modelValue === false) return false;
const parsedModelValue = computed(() => {
if (props.modelValue === true) {
return true;
}
if (props.modelValue === false) return false;
if (toInteger(props.modelValue, 0) < 1) {
// Boolean will always return false for the above comparison
return false;
}
return !!props.modelValue;
});
if (toInteger(props.modelValue, 0) < 1) {
// Boolean will always return false for the above comparison
return false;
}
return !!props.modelValue;
});
const handleShowAndModelChanged = () => {
countDown.value = parseCountDown(props.modelValue);
if ((parsedModelValue.value || props.show) && !instance)
instance = new Alert(element);
};
const handleShowAndModelChanged = () => {
countDown.value = parseCountDown(props.modelValue);
if ((parsedModelValue.value || props.show) && !instance)
instance = new Alert(element);
};
const dismissClicked = () => {
if (typeof props.modelValue === "boolean") {
emit("update:modelValue", false);
} else {
emit("update:modelValue", 0);
}
emit("dismissed");
};
const dismissClicked = () => {
if (typeof props.modelValue === "boolean") {
emit("update:modelValue", false);
} else {
emit("update:modelValue", 0);
}
emit("dismissed");
};
watch(() => props.modelValue, handleShowAndModelChanged);
watch(() => props.show, handleShowAndModelChanged);
watch(() => props.modelValue, handleShowAndModelChanged);
watch(() => props.show, handleShowAndModelChanged);
watch(countDown, (newValue) => {
clearCountDownInterval();
if (typeof props.modelValue === "boolean") return;
emit("dismiss-count-down", newValue);
if (newValue === 0 && props.modelValue > 0) emit("dismissed");
if (props.modelValue !== newValue) emit("update:modelValue", newValue);
if (newValue > 0) {
_countDownTimeout = setTimeout(() => {
countDown.value--;
}, 1000);
}
});
return {
dismissClicked,
isAlertVisible,
element,
classes,
};
},
watch(countDown, (newValue) => {
clearCountDownInterval();
if (typeof props.modelValue === "boolean") return;
emit("dismiss-count-down", newValue);
if (newValue === 0 && props.modelValue > 0) emit("dismissed");
if (props.modelValue !== newValue) emit("update:modelValue", newValue);
if (newValue > 0) {
_countDownTimeout = setTimeout(() => {
countDown.value--;
}, 1000);
}
});
return {
dismissClicked,
isAlertVisible,
element,
classes,
};
},
});
</script>

146
webapp/src/components/partials/FirmwareInfo.vue
View File

@ -1,85 +1,85 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
Firmware Information
<div class="card">
<div class="card-header text-white bg-primary">
Firmware Information
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Hostname</th>
<td>{{ systemDataList.hostname }}</td>
</tr>
<tr>
<th>SDK Version</th>
<td>{{ systemDataList.sdkversion }}</td>
</tr>
<tr>
<th>Firmware Version</th>
<td>{{ systemDataList.firmware_version }}</td>
</tr>
<tr>
<th>Git Hash</th>
<td>{{ systemDataList.git_hash }}</td>
</tr>
<tr>
<th>Reset Reason CPU 0</th>
<td>{{ systemDataList.resetreason_0 }}</td>
</tr>
<tr>
<th>Reset Reason CPU 1</th>
<td>{{ systemDataList.resetreason_1 }}</td>
</tr>
<tr>
<th>Config save count</th>
<td>{{ systemDataList.cfgsavecount }}</td>
</tr>
<tr>
<th>Uptime</th>
<td>{{ timeInHours(systemDataList.uptime) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Hostname</th>
<td>{{ systemDataList.hostname }}</td>
</tr>
<tr>
<th>SDK Version</th>
<td>{{ systemDataList.sdkversion }}</td>
</tr>
<tr>
<th>Firmware Version</th>
<td>{{ systemDataList.firmware_version }}</td>
</tr>
<tr>
<th>Git Hash</th>
<td>{{ systemDataList.git_hash }}</td>
</tr>
<tr>
<th>Reset Reason CPU 0</th>
<td>{{ systemDataList.resetreason_0 }}</td>
</tr>
<tr>
<th>Reset Reason CPU 1</th>
<td>{{ systemDataList.resetreason_1 }}</td>
</tr>
<tr>
<th>Config save count</th>
<td>{{ systemDataList.cfgsavecount }}</td>
</tr>
<tr>
<th>Uptime</th>
<td>{{ timeInHours(systemDataList.uptime) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
systemDataList: [],
};
},
created() {
this.getSystemInfo();
},
computed: {
timeInHours() {
return (value) => {
const days = parseInt(Math.floor(value / 3600 / 24));
const hours = parseInt(Math.floor((value - days * 3600 * 24) / 3600));
const minutes = parseInt(Math.floor((value - days * 3600 * 24 - hours * 3600) / 60));
const seconds = parseInt((value - days * 3600 * 24 - hours * 3600 + minutes * 60) % 60);
const dHours = hours > 9 ? hours : "0" + hours;
const dMins = minutes > 9 ? minutes : "0" + minutes;
const dSecs = seconds > 9 ? seconds : "0" + seconds;
return days + " days " + dHours + ":" + dMins + ":" + dSecs;
};
data() {
return {
systemDataList: [],
};
},
},
methods: {
getSystemInfo() {
fetch("/api/system/status")
.then((response) => response.json())
.then((data) => (this.systemDataList = data));
created() {
this.getSystemInfo();
},
computed: {
timeInHours() {
return (value) => {
const days = parseInt(Math.floor(value / 3600 / 24));
const hours = parseInt(Math.floor((value - days * 3600 * 24) / 3600));
const minutes = parseInt(Math.floor((value - days * 3600 * 24 - hours * 3600) / 60));
const seconds = parseInt((value - days * 3600 * 24 - hours * 3600 + minutes * 60) % 60);
const dHours = hours > 9 ? hours : "0" + hours;
const dMins = minutes > 9 ? minutes : "0" + minutes;
const dSecs = seconds > 9 ? seconds : "0" + seconds;
return days + " days " + dHours + ":" + dMins + ":" + dSecs;
};
},
},
methods: {
getSystemInfo() {
fetch("/api/system/status")
.then((response) => response.json())
.then((data) => (this.systemDataList = data));
},
},
},
});
</script>

58
webapp/src/components/partials/FsInfo.vue
View File

@ -1,42 +1,36 @@
<template>
<tr>
<th>{{ name }}</th>
<td>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
:style="{ width: this.getPercent() + '%' }"
v-bind:aria-valuenow="this.getPercent()"
aria-valuemin="0"
aria-valuemax="100"
>
{{ this.getPercent() }}%
</div>
</div>
</td>
<td class="rightCell">
{{ Math.round((total - used) / 1024) }}
KByte
</td>
<td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
<td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
</tr>
<tr>
<th>{{ name }}</th>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" :style="{ width: this.getPercent() + '%' }"
v-bind:aria-valuenow="this.getPercent()" aria-valuemin="0" aria-valuemax="100">
{{ this.getPercent() }}%
</div>
</div>
</td>
<td class="rightCell">
{{ Math.round((total - used) / 1024) }}
KByte
</td>
<td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
<td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
</tr>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
name: String,
total: Number,
used: Number,
},
methods: {
getPercent() {
return Math.round((this.used / this.total) * 100);
props: {
name: String,
total: Number,
used: Number,
},
methods: {
getPercent() {
return Math.round((this.used / this.total) * 100);
},
},
},
});
</script>

84
webapp/src/components/partials/HardwareInfo.vue
View File

@ -1,53 +1,53 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
Hardware Information
<div class="card">
<div class="card-header text-white bg-primary">
Hardware Information
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Chip Model</th>
<td>{{ systemDataList.chipmodel }}</td>
</tr>
<tr>
<th>Chip Revision</th>
<td>{{ systemDataList.chiprevision }}</td>
</tr>
<tr>
<th>Chip Cores</th>
<td>{{ systemDataList.chipcores }}</td>
</tr>
<tr>
<th>CPU Frequency</th>
<td>{{ systemDataList.cpufreq }} MHz</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Chip Model</th>
<td>{{ systemDataList.chipmodel }}</td>
</tr>
<tr>
<th>Chip Revision</th>
<td>{{ systemDataList.chiprevision }}</td>
</tr>
<tr>
<th>Chip Cores</th>
<td>{{ systemDataList.chipcores }}</td>
</tr>
<tr>
<th>CPU Frequency</th>
<td>{{ systemDataList.cpufreq }} MHz</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
systemDataList: [],
};
},
created() {
this.getSystemInfo();
},
methods: {
getSystemInfo() {
fetch("/api/system/status")
.then((response) => response.json())
.then((data) => (this.systemDataList = data));
data() {
return {
systemDataList: [],
};
},
created() {
this.getSystemInfo();
},
methods: {
getSystemInfo() {
fetch("/api/system/status")
.then((response) => response.json())
.then((data) => (this.systemDataList = data));
},
},
},
});
</script>

68
webapp/src/components/partials/InterfaceApInfo.vue
View File

@ -1,45 +1,45 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
Network Interface (Access Point)
<div class="card">
<div class="card-header text-white bg-primary">
Network Interface (Access Point)
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>IP Address</th>
<td>{{ networkDataList.ap_ip }}</td>
</tr>
<tr>
<th>MAC Address</th>
<td>{{ networkDataList.ap_mac }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>IP Address</th>
<td>{{ networkDataList.ap_ip }}</td>
</tr>
<tr>
<th>MAC Address</th>
<td>{{ networkDataList.ap_mac }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
},
},
});
</script>

100
webapp/src/components/partials/InterfaceStationInfo.vue
View File

@ -1,61 +1,61 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
Network Interface (Station)
<div class="card">
<div class="card-header text-white bg-primary">
Network Interface (Station)
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>IP Address</th>
<td>{{ networkDataList.sta_ip }}</td>
</tr>
<tr>
<th>Netmask</th>
<td>{{ networkDataList.sta_netmask }}</td>
</tr>
<tr>
<th>Default Gateway</th>
<td>{{ networkDataList.sta_gateway }}</td>
</tr>
<tr>
<th>DNS 1</th>
<td>{{ networkDataList.sta_dns1 }}</td>
</tr>
<tr>
<th>DNS 2</th>
<td>{{ networkDataList.sta_dns2 }}</td>
</tr>
<tr>
<th>MAC Address</th>
<td>{{ networkDataList.sta_mac }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>IP Address</th>
<td>{{ networkDataList.sta_ip }}</td>
</tr>
<tr>
<th>Netmask</th>
<td>{{ networkDataList.sta_netmask }}</td>
</tr>
<tr>
<th>Default Gateway</th>
<td>{{ networkDataList.sta_gateway }}</td>
</tr>
<tr>
<th>DNS 1</th>
<td>{{ networkDataList.sta_dns1 }}</td>
</tr>
<tr>
<th>DNS 2</th>
<td>{{ networkDataList.sta_dns2 }}</td>
</tr>
<tr>
<th>MAC Address</th>
<td>{{ networkDataList.sta_mac }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
},
},
});
</script>

60
webapp/src/components/partials/InverterChannelInfo.vue
View File

@ -1,41 +1,41 @@
<template>
<div class="col">
<div class="card">
<div class="card-header">Channel {{ channelNumber }}</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Value</th>
<th scope="col">Unit</th>
</tr>
</thead>
<tbody>
<tr v-for="(property, key) in channelData" :key="`prop-${key}`">
<th scope="row">{{ key }}</th>
<td style="text-align: right">{{ formatNumber(property.v) }}</td>
<td>{{ property.u }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="card">
<div class="card-header">Channel {{ channelNumber }}</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Property</th>
<th scope="col">Value</th>
<th scope="col">Unit</th>
</tr>
</thead>
<tbody>
<tr v-for="(property, key) in channelData" :key="`prop-${key}`">
<th scope="row">{{ key }}</th>
<td style="text-align: right">{{ formatNumber(property.v) }}</td>
<td>{{ property.u }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
channelData: Object,
channelNumber: Number,
},
methods: {
formatNumber(num) {
return parseFloat(num).toFixed(2);
props: {
channelData: Object,
channelNumber: Number,
},
methods: {
formatNumber(num) {
return parseFloat(num).toFixed(2);
},
},
},
});
</script>

79
webapp/src/components/partials/MemoryInfo.vue
View File

@ -1,27 +1,28 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">Memory Information</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th>Type</th>
<th>Usage</th>
<th class="rightCell">Free</th>
<th class="rightCell">Used</th>
<th class="rightCell">Size</th>
</tr>
</thead>
<tbody>
<FsInfo name="Heap" :total="systemDataList.heap_total" :used="systemDataList.heap_used" />
<FsInfo name="LittleFs" :total="systemDataList.littlefs_total" :used="systemDataList.littlefs_used" />
<FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
</tbody>
</table>
</div>
<div class="card">
<div class="card-header text-white bg-primary">Memory Information</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th>Type</th>
<th>Usage</th>
<th class="rightCell">Free</th>
<th class="rightCell">Used</th>
<th class="rightCell">Size</th>
</tr>
</thead>
<tbody>
<FsInfo name="Heap" :total="systemDataList.heap_total" :used="systemDataList.heap_used" />
<FsInfo name="LittleFs" :total="systemDataList.littlefs_total"
:used="systemDataList.littlefs_used" />
<FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
@ -29,23 +30,23 @@ import { defineComponent } from 'vue';
import FsInfo from "@/components/partials/FsInfo.vue";
export default defineComponent({
components: {
FsInfo,
},
data() {
return {
systemDataList: [],
};
},
created() {
this.getSystemInfo();
},
methods: {
getSystemInfo() {
fetch("/api/system/status")
.then((response) => response.json())
.then((data) => (this.systemDataList = data));
components: {
FsInfo,
},
data() {
return {
systemDataList: [],
};
},
created() {
this.getSystemInfo();
},
methods: {
getSystemInfo() {
fetch("/api/system/status")
.then((response) => response.json())
.then((data) => (this.systemDataList = data));
},
},
},
});
</script>

91
webapp/src/components/partials/WifiApInfo.vue
View File

@ -1,58 +1,55 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
WiFi Information (Access Point)
<div class="card">
<div class="card-header text-white bg-primary">
WiFi Information (Access Point)
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td class="badge" :class="{
'bg-danger': !networkDataList.ap_status,
'bg-success': networkDataList.ap_status,
}">
<span v-if="networkDataList.ap_status">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>SSID</th>
<td>{{ networkDataList.ap_ssid }}</td>
</tr>
<tr>
<th># Stations</th>
<td>{{ networkDataList.ap_stationnum }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td
class="badge"
:class="{
'bg-danger': !networkDataList.ap_status,
'bg-success': networkDataList.ap_status,
}"
>
<span v-if="networkDataList.ap_status">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>SSID</th>
<td>{{ networkDataList.ap_ssid }}</td>
</tr>
<tr>
<th># Stations</th>
<td>{{ networkDataList.ap_stationnum }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
},
},
});
</script>

123
webapp/src/components/partials/WifiStationInfo.vue
View File

@ -1,75 +1,72 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
WiFi Information (Station)
<div class="card">
<div class="card-header text-white bg-primary">
WiFi Information (Station)
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td class="badge" :class="{
'bg-danger': !networkDataList.sta_status,
'bg-success': networkDataList.sta_status,
}">
<span v-if="networkDataList.sta_status">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>SSID</th>
<td>{{ networkDataList.sta_ssid }}</td>
</tr>
<tr>
<th>Quality</th>
<td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
</tr>
<tr>
<th>RSSI</th>
<td>{{ networkDataList.sta_rssi }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover table-condensed">
<tbody>
<tr>
<th>Status</th>
<td
class="badge"
:class="{
'bg-danger': !networkDataList.sta_status,
'bg-success': networkDataList.sta_status,
}"
>
<span v-if="networkDataList.sta_status">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>SSID</th>
<td>{{ networkDataList.sta_ssid }}</td>
</tr>
<tr>
<th>Quality</th>
<td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
</tr>
<tr>
<th>RSSI</th>
<td>{{ networkDataList.sta_rssi }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
data() {
return {
networkDataList: [],
};
},
getRSSIasQuality(rssi) {
let quality = 0;
if (rssi <= -100) {
quality = 0;
} else if (rssi >= -50) {
quality = 100;
} else {
quality = 2 * (rssi + 100);
}
return quality;
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
getRSSIasQuality(rssi) {
let quality = 0;
if (rssi <= -100) {
quality = 0;
} else if (rssi >= -50) {
quality = 100;
} else {
quality = 2 * (rssi + 100);
}
return quality;
},
},
},
});
</script>