[MQTT] Use existing fields instead of creating new ones (UI)

This commit is contained in:
Louis Lam 2022-01-13 11:36:55 +08:00
parent 32ec4beda0
commit 1c8407a433
2 changed files with 7 additions and 20 deletions

View file

@ -7,9 +7,6 @@ ALTER TABLE monitor
ALTER TABLE monitor ALTER TABLE monitor
ADD mqtt_success_message VARCHAR(255); ADD mqtt_success_message VARCHAR(255);
ALTER TABLE monitor
ADD mqtt_port NUMBER(10);
ALTER TABLE monitor ALTER TABLE monitor
ADD mqtt_username VARCHAR(255); ADD mqtt_username VARCHAR(255);

View file

@ -70,15 +70,15 @@
</div> </div>
<!-- Hostname --> <!-- Hostname -->
<!-- TCP Port / Ping / DNS / Steam only --> <!-- TCP Port / Ping / DNS / Steam / MQTT only -->
<div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam'" class="my-3"> <div v-if="monitor.type === 'port' || monitor.type === 'ping' || monitor.type === 'dns' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
<label for="hostname" class="form-label">{{ $t("Hostname") }}</label> <label for="hostname" class="form-label">{{ $t("Hostname") }}</label>
<input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${ipRegexPattern}|${hostnameRegexPattern}`" required> <input id="hostname" v-model="monitor.hostname" type="text" class="form-control" :pattern="`${ipRegexPattern}|${hostnameRegexPattern}`" required>
</div> </div>
<!-- Port --> <!-- Port -->
<!-- For TCP Port / Steam Type --> <!-- For TCP Port / Steam / MQTT Type -->
<div v-if="monitor.type === 'port' || monitor.type === 'steam'" class="my-3"> <div v-if="monitor.type === 'port' || monitor.type === 'steam' || monitor.type === 'mqtt'" class="my-3">
<label for="port" class="form-label">{{ $t("Port") }}</label> <label for="port" class="form-label">{{ $t("Port") }}</label>
<input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1"> <input id="port" v-model="monitor.port" type="number" class="form-control" required min="0" max="65535" step="1">
</div> </div>
@ -122,27 +122,17 @@
<!-- For MQTT Type --> <!-- For MQTT Type -->
<template v-if="monitor.type === 'mqtt'"> <template v-if="monitor.type === 'mqtt'">
<div class="my-3"> <div class="my-3">
<label for="url" class="form-label">{{ $t("hostname") }}</label> <label for="mqttUsername" class="form-label">{{ $t("Username") }}</label>
<input id="url" v-model="monitor.url" type="text" class="form-control" required>
</div>
<div class="my-3">
<label for="mqttPort" class="form-label">{{ $t("port") }}</label>
<input id="mqttPort" v-model="monitor.mqttPort" type="text" class="form-control">
</div>
<div class="my-3">
<label for="mqttUsername" class="form-label">{{ $t("username") }}</label>
<input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control"> <input id="mqttUsername" v-model="monitor.mqttUsername" type="text" class="form-control">
</div> </div>
<div class="my-3"> <div class="my-3">
<label for="mqttPassword" class="form-label">{{ $t("password") }}</label> <label for="mqttPassword" class="form-label">{{ $t("Password") }}</label>
<input id="mqttPassword" v-model="monitor.mqttPassword" type="text" class="form-control"> <input id="mqttPassword" v-model="monitor.mqttPassword" type="text" class="form-control">
</div> </div>
<div class="my-3"> <div class="my-3">
<label for="mqttTopic" class="form-label">{{ $t("topic") }}</label> <label for="mqttTopic" class="form-label">{{ $t("Topic") }}</label>
<input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required> <input id="mqttTopic" v-model="monitor.mqttTopic" type="text" class="form-control" required>
<div class="form-text"> <div class="form-text">
{{ $t("topicExplanation") }} {{ $t("topicExplanation") }}