Webapp: Beautify different views
This commit is contained in:
Thomas Basler
parent
fc80c8d8ff
commit
6849bd8f6d
@ -21,7 +21,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" v-show="mqttConfigList.mqtt_enabled">
|
||||
|
||||
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
|
||||
<div class="card-header text-white bg-primary">
|
||||
MqTT Broker Parameter
|
||||
</div>
|
||||
@ -123,7 +124,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" v-show="mqttConfigList.mqtt_enabled">
|
||||
<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">
|
||||
|
||||
@ -3,87 +3,82 @@
|
||||
<div class="page-header">
|
||||
<h1>MqTT Info</h1>
|
||||
</div>
|
||||
<div class="bg-light p-5 rounded">
|
||||
<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>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 class="card">
|
||||
<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 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>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>
|
||||
|
||||
@ -3,12 +3,14 @@
|
||||
<div class="page-header">
|
||||
<h1>Network Info</h1>
|
||||
</div>
|
||||
<div class="bg-light p-5 rounded">
|
||||
<WifiStationInfo />
|
||||
<WifiApInfo />
|
||||
<InterfaceStationInfo />
|
||||
<InterfaceApInfo />
|
||||
</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>
|
||||
|
||||
|
||||
@ -3,59 +3,56 @@
|
||||
<div class="page-header">
|
||||
<h1>NTP Info</h1>
|
||||
</div>
|
||||
<div class="bg-light p-5 rounded">
|
||||
<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 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">
|
||||
<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 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>
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
<div class="page-header">
|
||||
<h1>System Info</h1>
|
||||
</div>
|
||||
<div class="bg-light p-5 rounded">
|
||||
<FirmwareInfo />
|
||||
<HardwareInfo />
|
||||
<MemoryInfo />
|
||||
</div>
|
||||
<FirmwareInfo />
|
||||
<div class="mt-5"></div>
|
||||
<HardwareInfo />
|
||||
<div class="mt-5"></div>
|
||||
<MemoryInfo />
|
||||
<div class="mt-5"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user