webapp: Use volar formatter
This commit is contained in:
Thomas Basler
parent
cd35261570
commit
5100c44c23
@ -3,9 +3,8 @@
|
||||
<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
|
||||
>
|
||||
<a href="https://www.mikrocontroller.net/topic/525778" target="_blank">this discussion.
|
||||
(Mikrocontroller.net)</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -11,56 +11,30 @@
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<option v-for="palevel in palevelList" :key="palevel.key" :value="palevel.key">
|
||||
{{ palevel.value }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
@ -15,7 +15,9 @@
|
||||
<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>
|
||||
<p class="h1 mb-2">
|
||||
<BIconExclamationCircleFill />
|
||||
</p>
|
||||
|
||||
<span style="vertical-align: middle" class="ml-2">
|
||||
{{ OTAError }}
|
||||
@ -34,7 +36,9 @@
|
||||
<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 class="h1 mb-2">
|
||||
<BIconCheckCircle />
|
||||
</span>
|
||||
<span> OTA Success </span>
|
||||
<br />
|
||||
<br />
|
||||
@ -48,13 +52,7 @@
|
||||
<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"
|
||||
/>
|
||||
<input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,14 +61,8 @@
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -5,46 +5,25 @@
|
||||
<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"
|
||||
>
|
||||
<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 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="{
|
||||
<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)
|
||||
@ -52,11 +31,8 @@
|
||||
<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"
|
||||
/>
|
||||
<InverterChannelInfo v-if="inverter[channel - 1]"
|
||||
:channelData="inverter[channel - 1]" :channelNumber="channel - 1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -112,8 +88,7 @@ export default defineComponent({
|
||||
console.log("Starting connection to WebSocket Server");
|
||||
|
||||
const { protocol, host } = location;
|
||||
const webSocketUrl = `${
|
||||
protocol === "https" ? "wss" : "ws"
|
||||
const webSocketUrl = `${protocol === "https" ? "wss" : "ws"
|
||||
}://${host}/livedata`;
|
||||
|
||||
this.socket = new WebSocket(webSocketUrl);
|
||||
|
||||
@ -14,22 +14,13 @@
|
||||
<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
|
||||
/>
|
||||
<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
|
||||
/>
|
||||
<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>
|
||||
@ -55,19 +46,11 @@
|
||||
<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"
|
||||
/>
|
||||
<input v-model="editInverterData.serial" type="number" class="form-control" />
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
v-model="editInverterData.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
maxlength="31"
|
||||
/>
|
||||
<input v-model="editInverterData.name" type="text" class="form-control"
|
||||
maxlength="31" />
|
||||
</td>
|
||||
<td>
|
||||
{{ editInverterData.type }}
|
||||
|
||||
@ -11,12 +11,8 @@
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
@ -28,119 +24,67 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<label for="inputHostname" class="col-sm-2 col-form-label"
|
||||
>Hostname:</label
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
<input type="text" class="form-control" id="inputUsername" maxlength="32"
|
||||
placeholder="Username, leave empty for anonymous connection"
|
||||
v-model="mqttConfigList.mqtt_username"
|
||||
/>
|
||||
v-model="mqttConfigList.mqtt_username" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="inputPassword" class="col-sm-2 col-form-label"
|
||||
>Password:</label
|
||||
>
|
||||
<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"
|
||||
<input type="text" class="form-control" id="inputPassword" maxlength="32"
|
||||
placeholder="Password, leave empty for anonymous connection"
|
||||
v-model="mqttConfigList.mqtt_password"
|
||||
/>
|
||||
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
|
||||
>
|
||||
<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"
|
||||
<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"
|
||||
/>
|
||||
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
|
||||
>
|
||||
<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"
|
||||
<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
|
||||
>
|
||||
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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<input class="form-check-input" type="checkbox" id="inputRetain"
|
||||
v-model="mqttConfigList.mqtt_retain" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -151,56 +95,34 @@
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
<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"
|
||||
/>
|
||||
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
|
||||
>
|
||||
<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"
|
||||
<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"
|
||||
/>
|
||||
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
|
||||
>
|
||||
<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"
|
||||
<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"
|
||||
/>
|
||||
v-model="mqttConfigList.mqtt_lwt_offline" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,13 +12,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td
|
||||
class="badge"
|
||||
:class="{
|
||||
<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>
|
||||
@ -45,13 +42,10 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Retain</th>
|
||||
<td
|
||||
class="badge"
|
||||
:class="{
|
||||
<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>
|
||||
@ -70,13 +64,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Connection Status</th>
|
||||
<td
|
||||
class="badge"
|
||||
:class="{
|
||||
<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>
|
||||
|
||||
@ -2,15 +2,8 @@
|
||||
<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"
|
||||
>
|
||||
<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">
|
||||
@ -19,81 +12,52 @@
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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
|
||||
>
|
||||
<router-link class="dropdown-item" to="/info/system">System</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="dropdown-item" to="/info/network"
|
||||
>Network</router-link
|
||||
>
|
||||
<router-link class="dropdown-item" to="/info/network">Network</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="dropdown-item" to="/info/ntp"
|
||||
>NTP</router-link
|
||||
>
|
||||
<router-link class="dropdown-item" to="/info/ntp">NTP</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="dropdown-item" to="/info/mqtt"
|
||||
>MqTT</router-link
|
||||
>
|
||||
<router-link class="dropdown-item" to="/info/mqtt">MqTT</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -11,65 +11,35 @@
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<input class="form-check-input" type="checkbox" id="inputDHCP"
|
||||
v-model="networkConfigList.dhcp" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -82,82 +52,42 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<label for="inputIP" class="col-sm-2 col-form-label"
|
||||
>IP Address:</label
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<input type="text" class="form-control" id="inputDNS2" maxlength="32"
|
||||
placeholder="DNS Server 2" v-model="networkConfigList.dns2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,32 +11,19 @@
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<option v-for="(config, name) in timezoneList" :key="name + '---' + config"
|
||||
:value="name + '---' + config">
|
||||
{{ name }}
|
||||
</option>
|
||||
</select>
|
||||
@ -44,19 +31,10 @@
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="inputTimezoneConfig" class="col-sm-2 col-form-label"
|
||||
>Timezone Config:</label
|
||||
>
|
||||
<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
|
||||
/>
|
||||
<input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
|
||||
placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -36,13 +36,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td
|
||||
class="badge"
|
||||
:class="{
|
||||
<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>
|
||||
|
||||
@ -1,20 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isAlertVisible"
|
||||
ref="element"
|
||||
class="alert"
|
||||
role="alert"
|
||||
:class="classes"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" :aria-label="dismissLabel"
|
||||
@click="dismissClicked" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,14 +3,8 @@
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
</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="LittleFs" :total="systemDataList.littlefs_total"
|
||||
:used="systemDataList.littlefs_used" />
|
||||
<FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -9,13 +9,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td
|
||||
class="badge"
|
||||
:class="{
|
||||
<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>
|
||||
|
||||
@ -9,13 +9,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td
|
||||
class="badge"
|
||||
:class="{
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user