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

Webapp: Beautify different views

Browse Source
This commit is contained in:
Thomas Basler 2022-06-16 00:01:17 +02:00
parent fc80c8d8ff
commit 6849bd8f6d
5 changed files with 139 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,8 @@
</div> </div>
</div> </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"> <div class="card-header text-white bg-primary">
MqTT Broker Parameter MqTT Broker Parameter
</div> </div>
@ -123,7 +124,7 @@
</div> </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">LWT Parameters</div> <div class="card-header text-white bg-primary">LWT Parameters</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">

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

@ -3,87 +3,82 @@
<div class="page-header"> <div class="page-header">
<h1>MqTT Info</h1> <h1>MqTT Info</h1>
</div> </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">
<div class="card-header text-white bg-primary"> <div class="card-header text-white bg-primary">Configuration Summary</div>
Runtime Summary <div class="card-body">
</div> <div class="table-responsive">
<div class="card-body"> <table class="table table-hover table-condensed">
<div class="table-responsive"> <tbody>
<table class="table table-hover table-condensed"> <tr>
<tbody> <th>Status</th>
<tr> <td
<th>Connection Status</th> class="badge"
<td :class="{
class="badge" 'bg-danger': !mqttDataList.mqtt_enabled,
:class="{ 'bg-success': mqttDataList.mqtt_enabled,
'bg-danger': !mqttDataList.mqtt_connected, }"
'bg-success': mqttDataList.mqtt_connected, >
}" <span v-if="mqttDataList.mqtt_enabled">enabled</span>
> <span v-else>disabled</span>
<span v-if="mqttDataList.mqtt_connected">connected</span> </td>
<span v-else>disconnected</span> </tr>
</td> <tr>
</tr> <th>Server</th>
</tbody> <td>{{ mqttDataList.mqtt_hostname }}</td>
</table> </tr>
</div> <tr>
</div> <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> </div>
</div> </div>

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

@ -3,12 +3,14 @@
<div class="page-header"> <div class="page-header">
<h1>Network Info</h1> <h1>Network Info</h1>
</div> </div>
<div class="bg-light p-5 rounded"> <WifiStationInfo />
<WifiStationInfo /> <div class="mt-5"></div>
<WifiApInfo /> <WifiApInfo />
<InterfaceStationInfo /> <div class="mt-5"></div>
<InterfaceApInfo /> <InterfaceStationInfo />
</div> <div class="mt-5"></div>
<InterfaceApInfo />
<div class="mt-5"></div>
</div> </div>
</template> </template>

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

@ -3,59 +3,56 @@
<div class="page-header"> <div class="page-header">
<h1>NTP Info</h1> <h1>NTP Info</h1>
</div> </div>
<div class="bg-light p-5 rounded">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-white bg-primary">Configuration Summary</div>
Configuration Summary <div class="card-body">
</div> <div class="table-responsive">
<div class="card-body"> <table class="table table-hover table-condensed">
<div class="table-responsive"> <tbody>
<table class="table table-hover table-condensed"> <tr>
<tbody> <th>Server</th>
<tr> <td>{{ ntpDataList.ntp_server }}</td>
<th>Server</th> </tr>
<td>{{ ntpDataList.ntp_server }}</td> <tr>
</tr> <th>Timezone</th>
<tr> <td>{{ ntpDataList.ntp_timezone }}</td>
<th>Timezone</th> </tr>
<td>{{ ntpDataList.ntp_timezone }}</td> <tr>
</tr> <th>Timezone Description</th>
<tr> <td>{{ ntpDataList.ntp_timezone_descr }}</td>
<th>Timezone Description</th> </tr>
<td>{{ ntpDataList.ntp_timezone_descr }}</td> </tbody>
</tr> </table>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div>
<div class="card"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Current Time</div> <div class="card-header text-white bg-primary">Current Time</div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover table-condensed"> <table class="table table-hover table-condensed">
<tbody> <tbody>
<tr> <tr>
<th>Status</th> <th>Status</th>
<td <td
class="badge" class="badge"
:class="{ :class="{
'bg-danger': !ntpDataList.ntp_status, 'bg-danger': !ntpDataList.ntp_status,
'bg-success': ntpDataList.ntp_status, 'bg-success': ntpDataList.ntp_status,
}" }"
> >
<span v-if="ntpDataList.ntp_status">synced</span> <span v-if="ntpDataList.ntp_status">synced</span>
<span v-else>not synced</span> <span v-else>not synced</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Local Time</th> <th>Local Time</th>
<td>{{ ntpDataList.ntp_localtime }}</td> <td>{{ ntpDataList.ntp_localtime }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -3,11 +3,12 @@
<div class="page-header"> <div class="page-header">
<h1>System Info</h1> <h1>System Info</h1>
</div> </div>
<div class="bg-light p-5 rounded"> <FirmwareInfo />
<FirmwareInfo /> <div class="mt-5"></div>
<HardwareInfo /> <HardwareInfo />
<MemoryInfo /> <div class="mt-5"></div>
</div> <MemoryInfo />
<div class="mt-5"></div>
</div> </div>
</template> </template>