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

webapp: Show additional mqtt parameters

Browse Source
This commit is contained in:
Thomas Basler 2022-04-21 23:24:03 +02:00
parent 8e6a39b3a0
commit d247d01603
2 changed files with 59 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,9 +22,10 @@
</div> </div>
</div> </div>
<div class="card" v-show="mqttConfigList.mqtt_enabled"> <div class="card" v-show="mqttConfigList.mqtt_enabled">
<div class="card-header text-white bg-primary">MqTT Broker Parameter</div> <div class="card-header text-white bg-primary">
MqTT Broker Parameter
</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputHostname" class="col-sm-2 col-form-label" <label for="inputHostname" class="col-sm-2 col-form-label"
>Hostname:</label >Hostname:</label
@ -42,9 +43,7 @@
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label for="inputPort" class="col-sm-2 col-form-label" <label for="inputPort" class="col-sm-2 col-form-label">Port:</label>
>Port:</label
>
<div class="col-sm-10"> <div class="col-sm-10">
<input <input
type="number" type="number"
@ -106,6 +105,21 @@
</div> </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> </div>
<button type="submit" class="btn btn-primary mb-3">Save</button> <button type="submit" class="btn btn-primary mb-3">Save</button>

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

@ -41,10 +41,50 @@
<th>Base Topic</th> <th>Base Topic</th>
<td>{{ mqttDataList.mqtt_topic }}</td> <td>{{ mqttDataList.mqtt_topic }}</td>
</tr> </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> </tbody>
</table> </table>
</div> </div>
</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>
</div> </div>
</div> </div>
</div> </div>