109 lines
3.4 KiB
Vue
109 lines
3.4 KiB
Vue
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import InverterChannelInfo from "@/components/partials/InverterChannelInfo";
|
|
|
|
export default {
|
|
components: {
|
|
InverterChannelInfo,
|
|
},
|
|
data() {
|
|
return {
|
|
connection: null,
|
|
waitForData: true,
|
|
inverterData: [],
|
|
};
|
|
},
|
|
created() {
|
|
console.log("Starting connection to WebSocket Server");
|
|
|
|
const socketProtocol =
|
|
window.location.protocol === "https:" ? "wss:" : "ws:";
|
|
const port = 80; // window.location.port;
|
|
const host = "192.168.20.110"; //window.location.hostname;
|
|
const webSocketUrl = socketProtocol + "//" + host + ":" + port + "/ws";
|
|
|
|
this.connection = new WebSocket(webSocketUrl);
|
|
|
|
this.connection.onmessage = function (event) {
|
|
console.log(event);
|
|
this.inverterData = JSON.parse(event.data);
|
|
this.waitForData = false;
|
|
}.bind(this);
|
|
|
|
this.connection.onopen = function (event) {
|
|
console.log(event);
|
|
console.log("Successfully connected to the echo websocket server...");
|
|
};
|
|
},
|
|
};
|
|
</script> |