webapp: Change badge style and encapsulate it into component
This commit is contained in:
Thomas Basler
parent
f6dedf7adb
commit
42b60060a1
@ -5,26 +5,24 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ $t('radioinfo.ChipStatus') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !systemStatus.radio_connected,
|
||||
'text-bg-success': systemStatus.radio_connected,
|
||||
}">
|
||||
<span v-if="systemStatus.radio_connected">{{ $t('radioinfo.Connected') }}</span>
|
||||
<span v-else>{{ $t('radioinfo.NotConnected') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="systemStatus.radio_connected" true_text="radioinfo.Connected" false_text="radioinfo.NotConnected" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ $t('radioinfo.ChipType') }}</th>
|
||||
<td class="badge" :class="{
|
||||
<td>
|
||||
<span class="badge" :class="{
|
||||
'text-bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant,
|
||||
'text-bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant,
|
||||
'text-bg-secondary': !systemStatus.radio_connected,
|
||||
}">
|
||||
<span
|
||||
v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</span>
|
||||
<span
|
||||
v-else-if="systemStatus.radio_connected && !systemStatus.radio_pvariant">nRF24L01</span>
|
||||
<span v-else>{{ $t('radioinfo.Unknown') }}</span>
|
||||
<template
|
||||
v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</template>
|
||||
<template
|
||||
v-else-if="systemStatus.radio_connected && !systemStatus.radio_pvariant">nRF24L01</template>
|
||||
<template v-else>{{ $t('radioinfo.Unknown') }}</template>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -35,12 +33,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import StatusBadge from './StatusBadge.vue';
|
||||
import type { SystemStatus } from '@/types/SystemStatus';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
CardElement,
|
||||
StatusBadge,
|
||||
},
|
||||
props: {
|
||||
systemStatus: { type: Object as PropType<SystemStatus>, required: true },
|
||||
|
||||
32
webapp/src/components/StatusBadge.vue
Normal file
32
webapp/src/components/StatusBadge.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<span class="badge" :class="[status ? true_class : false_class]">
|
||||
<template v-if="status">{{ $t(true_text) }}</template>
|
||||
<template v-else>{{ $t(false_text) }}</template>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
'status': Boolean,
|
||||
'true_text': {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
'false_text': {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
'true_class': {
|
||||
type: String,
|
||||
default: 'text-bg-success'
|
||||
},
|
||||
'false_class': {
|
||||
type: String,
|
||||
default: 'text-bg-danger'
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -5,12 +5,8 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ $t('wifiapinfo.Status') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !networkStatus.ap_status,
|
||||
'text-bg-success': networkStatus.ap_status,
|
||||
}">
|
||||
<span v-if="networkStatus.ap_status">{{ $t('wifiapinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('wifiapinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="networkStatus.ap_status" true_text="wifiapinfo.Enabled" false_text="wifiapinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -29,12 +25,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import StatusBadge from './StatusBadge.vue';
|
||||
import type { NetworkStatus } from '@/types/NetworkStatus';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
CardElement,
|
||||
StatusBadge,
|
||||
},
|
||||
props: {
|
||||
networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
|
||||
|
||||
@ -5,12 +5,8 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ $t('wifistationinfo.Status') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !networkStatus.sta_status,
|
||||
'text-bg-success': networkStatus.sta_status,
|
||||
}">
|
||||
<span v-if="networkStatus.sta_status">{{ $t('wifistationinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('wifistationinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="networkStatus.sta_status" true_text="wifistationinfo.Enabled" false_text="wifistationinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -33,12 +29,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import StatusBadge from './StatusBadge.vue';
|
||||
import type { NetworkStatus } from '@/types/NetworkStatus';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
CardElement,
|
||||
StatusBadge
|
||||
},
|
||||
props: {
|
||||
networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
|
||||
|
||||
@ -6,12 +6,8 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.Status') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_enabled,
|
||||
'text-bg-success': mqttDataList.mqtt_enabled,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_enabled">{{ $t('mqttinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -36,22 +32,14 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.Retain') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_retain,
|
||||
'text-bg-success': mqttDataList.mqtt_retain,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_retain">{{ $t('mqttinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.Tls') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_tls,
|
||||
'text-bg-success': mqttDataList.mqtt_tls,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_tls">{{ $t('mqttinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_tls" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="mqttDataList.mqtt_tls">
|
||||
@ -69,12 +57,8 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.Status') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_hass_enabled,
|
||||
'text-bg-success': mqttDataList.mqtt_hass_enabled,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_hass_enabled">{{ $t('mqttinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_hass_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -83,33 +67,20 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.Retain') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_hass_retain,
|
||||
'text-bg-success': mqttDataList.mqtt_hass_retain,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_hass_retain">{{ $t('mqttinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_hass_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.Expire') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_hass_expire,
|
||||
'text-bg-success': mqttDataList.mqtt_hass_expire,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_hass_expire">{{ $t('mqttinfo.Enabled') }}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_hass_expire" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.IndividualPanels') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_hass_individualpanels,
|
||||
'text-bg-success': mqttDataList.mqtt_hass_individualpanels,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_hass_individualpanels">{{ $t('mqttinfo.Enabled')
|
||||
}}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disabled') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_hass_individualpanels" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -123,12 +94,8 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ $t('mqttinfo.ConnectionStatus') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !mqttDataList.mqtt_connected,
|
||||
'text-bg-success': mqttDataList.mqtt_connected,
|
||||
}">
|
||||
<span v-if="mqttDataList.mqtt_connected">{{ $t('mqttinfo.Connected') }}</span>
|
||||
<span v-else>{{ $t('mqttinfo.Disconnected') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="mqttDataList.mqtt_connected" true_text="mqttinfo.Connected" false_text="mqttinfo.Disconnected" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -141,6 +108,7 @@
|
||||
<script lang="ts">
|
||||
import BasePage from '@/components/BasePage.vue';
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import StatusBadge from '@/components/StatusBadge.vue';
|
||||
import type { MqttStatus } from '@/types/MqttStatus';
|
||||
import { authHeader, handleResponse } from '@/utils/authentication';
|
||||
import { defineComponent } from 'vue';
|
||||
@ -149,6 +117,7 @@ export default defineComponent({
|
||||
components: {
|
||||
BasePage,
|
||||
CardElement,
|
||||
StatusBadge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -27,12 +27,8 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{{ $t('ntpinfo.Status') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-danger': !ntpDataList.ntp_status,
|
||||
'text-bg-success': ntpDataList.ntp_status,
|
||||
}">
|
||||
<span v-if="ntpDataList.ntp_status">{{ $t('ntpinfo.Synced') }}</span>
|
||||
<span v-else>{{ $t('ntpinfo.NotSynced') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="ntpDataList.ntp_status" true_text="ntpinfo.Synced" false_text="ntpinfo.NotSynced" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -50,12 +46,10 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{{ $t('ntpinfo.Mode') }}</th>
|
||||
<td class="badge" :class="{
|
||||
'text-bg-dark': !ntpDataList.sun_isDayPeriod,
|
||||
'text-bg-warning': ntpDataList.sun_isDayPeriod,
|
||||
}">
|
||||
<span v-if="ntpDataList.sun_isDayPeriod">{{ $t('ntpinfo.Day') }}</span>
|
||||
<span v-else>{{ $t('ntpinfo.Night') }}</span>
|
||||
<td>
|
||||
<StatusBadge :status="ntpDataList.sun_isDayPeriod"
|
||||
true_text="ntpinfo.Day" true_class="text-bg-warning"
|
||||
false_text="ntpinfo.Night" false_class="text-bg-dark" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@ -68,6 +62,7 @@
|
||||
<script lang="ts">
|
||||
import BasePage from '@/components/BasePage.vue';
|
||||
import CardElement from '@/components/CardElement.vue';
|
||||
import StatusBadge from '@/components/StatusBadge.vue';
|
||||
import type { NtpStatus } from "@/types/NtpStatus";
|
||||
import { authHeader, handleResponse } from '@/utils/authentication';
|
||||
import { defineComponent } from 'vue';
|
||||
@ -76,6 +71,7 @@ export default defineComponent({
|
||||
components: {
|
||||
BasePage,
|
||||
CardElement,
|
||||
StatusBadge,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user