webapp: Use correct Complimentary colours

This commit is contained in:
Thomas Basler 2022-11-01 16:54:13 +01:00
parent 438ce36bab
commit ed6e9dd9cd
21 changed files with 77 additions and 77 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
Firmware Information Firmware Information
</div> </div>
<div class="card-body"> <div class="card-body">

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
Hardware Information Hardware Information
</div> </div>
<div class="card-body"> <div class="card-body">

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
Network Interface (Access Point) Network Interface (Access Point)
</div> </div>
<div class="card-body"> <div class="card-body">

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
Network Interface ({{ networkStatus.network_mode }}) Network Interface ({{ networkStatus.network_mode }})
</div> </div>
<div class="card-body"> <div class="card-body">

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="card" :class="{ 'border-info': channelNumber == 0 }"> <div class="card" :class="{ 'border-info': channelNumber == 0 }">
<div v-if="channelNumber >= 1" class="card-header">String {{ channelNumber }}</div> <div v-if="channelNumber >= 1" class="card-header">String {{ channelNumber }}</div>
<div v-if="channelNumber == 0" class="card-header bg-info">Phase {{ channelNumber + 1 }}</div> <div v-if="channelNumber == 0" class="card-header text-bg-info">Phase {{ channelNumber + 1 }}</div>
<div class="card-body"> <div class="card-body">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Memory Information</div> <div class="card-header text-bg-primary">Memory Information</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">

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
Radio Information Radio Information
</div> </div>
<div class="card-body"> <div class="card-body">
@ -10,8 +10,8 @@
<tr> <tr>
<th>Chip Status</th> <th>Chip Status</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !systemStatus.radio_connected, 'text-bg-danger': !systemStatus.radio_connected,
'bg-success': systemStatus.radio_connected, 'text-bg-success': systemStatus.radio_connected,
}"> }">
<span v-if="systemStatus.radio_connected">connected</span> <span v-if="systemStatus.radio_connected">connected</span>
<span v-else>not connected</span> <span v-else>not connected</span>
@ -20,9 +20,9 @@
<tr> <tr>
<th>Chip Type</th> <th>Chip Type</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant, 'text-bg-danger': systemStatus.radio_connected && !systemStatus.radio_pvariant,
'bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant, 'text-bg-success': systemStatus.radio_connected && systemStatus.radio_pvariant,
'bg-secondary': !systemStatus.radio_connected, 'text-bg-secondary': !systemStatus.radio_connected,
}"> }">
<span <span
v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</span> v-if="systemStatus.radio_connected && systemStatus.radio_pvariant">nRF24L01+</span>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
WiFi Information (Access Point) WiFi Information (Access Point)
</div> </div>
<div class="card-body"> <div class="card-body">
@ -10,8 +10,8 @@
<tr> <tr>
<th>Status</th> <th>Status</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !networkStatus.ap_status, 'text-bg-danger': !networkStatus.ap_status,
'bg-success': networkStatus.ap_status, 'text-bg-success': networkStatus.ap_status,
}"> }">
<span v-if="networkStatus.ap_status">enabled</span> <span v-if="networkStatus.ap_status">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
WiFi Information (Station) WiFi Information (Station)
</div> </div>
<div class="card-body"> <div class="card-body">
@ -10,8 +10,8 @@
<tr> <tr>
<th>Status</th> <th>Status</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !networkStatus.sta_status, 'text-bg-danger': !networkStatus.sta_status,
'bg-success': networkStatus.sta_status, 'text-bg-success': networkStatus.sta_status,
}"> }">
<span v-if="networkStatus.sta_status">enabled</span> <span v-if="networkStatus.sta_status">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>

View File

@ -5,7 +5,7 @@
<h2 class="accordion-header" id="headingOne"> <h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" <button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="badge bg-secondary"> <span class="badge text-bg-secondary">
<BIconInfoCircle class="fs-4" /> <BIconInfoCircle class="fs-4" />
</span>&nbsp;Project Origin </span>&nbsp;Project Origin
</button> </button>
@ -41,7 +41,7 @@
<h2 class="accordion-header" id="headingTwo"> <h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="badge bg-secondary"> <span class="badge text-bg-secondary">
<BIconActivity class="fs-4" /> <BIconActivity class="fs-4" />
</span>&nbsp;News &amp; Updates </span>&nbsp;News &amp; Updates
</button> </button>
@ -58,7 +58,7 @@
<h2 class="accordion-header" id="headingThree"> <h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="badge bg-secondary"> <span class="badge text-bg-secondary">
<BIconBug class="fs-4" /> <BIconBug class="fs-4" />
</span>&nbsp;Error Reporting </span>&nbsp;Error Reporting
</button> </button>
@ -75,7 +75,7 @@
<h2 class="accordion-header" id="headingFour"> <h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="badge bg-secondary"> <span class="badge text-bg-secondary">
<BIconChat class="fs-4" /> <BIconChat class="fs-4" />
</span>&nbsp;Discussion </span>&nbsp;Discussion
</button> </button>

View File

@ -5,7 +5,7 @@
</BootstrapAlert> </BootstrapAlert>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Backup: Configuration File Backup</div> <div class="card-header text-bg-primary">Backup: Configuration File Backup</div>
<div class="card-body text-center"> <div class="card-body text-center">
Backup the configuration file Backup the configuration file
<button class="btn btn-primary" @click="downloadConfig">Backup <button class="btn btn-primary" @click="downloadConfig">Backup
@ -14,7 +14,7 @@
</div> </div>
<div class="card mt-5"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Restore: Restore the Configuration File</div> <div class="card-header text-bg-primary">Restore: Restore the Configuration File</div>
<div class="card-body text-center"> <div class="card-body text-center">
<div v-if="!uploading && UploadError != ''"> <div v-if="!uploading && UploadError != ''">
@ -66,7 +66,7 @@
</div> </div>
<div class="card mt-5"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Initialize: Perform Factory Reset</div> <div class="card-header text-bg-primary">Initialize: Perform Factory Reset</div>
<div class="card-body text-center"> <div class="card-body text-center">
<button class="btn btn-danger" @click="onFactoryResetModal">Restore Factory-Default Settings <button class="btn btn-danger" @click="onFactoryResetModal">Restore Factory-Default Settings

View File

@ -6,7 +6,7 @@
<form @submit="saveDtuConfig"> <form @submit="saveDtuConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">DTU Configuration</div> <div class="card-header text-bg-primary">DTU Configuration</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:</label> <label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:</label>

View File

@ -9,7 +9,7 @@
</div> </div>
<div v-if="!loading && !uploading && OTAError != ''" class="card"> <div v-if="!loading && !uploading && OTAError != ''" class="card">
<div class="card-header text-white bg-danger">OTA Error</div> <div class="card-header text-bg-danger">OTA Error</div>
<div class="card-body text-center"> <div class="card-body text-center">
<p class="h1 mb-2"> <p class="h1 mb-2">
<BIconExclamationCircleFill /> <BIconExclamationCircleFill />
@ -30,7 +30,7 @@
</div> </div>
<div v-else-if="!loading && !uploading && OTASuccess" class="card"> <div v-else-if="!loading && !uploading && OTASuccess" class="card">
<div class="card-header text-white bg-success">OTA Status</div> <div class="card-header text-bg-success">OTA Status</div>
<div class="card-body text-center"> <div class="card-body text-center">
<span class="h1 mb-2"> <span class="h1 mb-2">
<BIconCheckCircle /> <BIconCheckCircle />
@ -45,7 +45,7 @@
</div> </div>
<div v-else-if="!loading && !uploading" class="card"> <div v-else-if="!loading && !uploading" class="card">
<div class="card-header text-white bg-primary">Firmware Upload</div> <div class="card-header text-bg-primary">Firmware Upload</div>
<div class="card-body text-center"> <div class="card-body text-center">
<div class="form-group pt-2 mt-3"> <div class="form-group pt-2 mt-3">
<input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" /> <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
@ -54,7 +54,7 @@
</div> </div>
<div v-else-if="!loading && uploading" class="card"> <div v-else-if="!loading && uploading" class="card">
<div class="card-header text-white bg-primary">Upload Progress</div> <div class="card-header text-bg-primary">Upload Progress</div>
<div class="card-body text-center"> <div class="card-body text-center">
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }" <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"

View File

@ -24,11 +24,11 @@
:id="'v-pills-' + inverter.serial" role="tabpanel" :id="'v-pills-' + inverter.serial" role="tabpanel"
:aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0"> :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary d-flex justify-content-between align-items-center" <div class="card-header d-flex justify-content-between align-items-center"
:class="{ :class="{
'bg-danger': !inverter.reachable, 'text-bg-danger': !inverter.reachable,
'bg-warning': inverter.reachable && !inverter.producing, 'text-bg-warning': inverter.reachable && !inverter.producing,
'bg-primary': inverter.reachable && inverter.producing, 'text-bg-primary': inverter.reachable && inverter.producing,
}"> }">
<div class="p-1 flex-grow-1"> <div class="p-1 flex-grow-1">
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
@ -79,7 +79,7 @@
@click="onShowEventlog(inverter.serial)" title="Show Eventlog"> @click="onShowEventlog(inverter.serial)" title="Show Eventlog">
<BIconJournalText style="font-size:24px;" /> <BIconJournalText style="font-size:24px;" />
<span <span
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
{{ inverter.events }} {{ inverter.events }}
<span class="visually-hidden">unread messages</span> <span class="visually-hidden">unread messages</span>
</span> </span>
@ -202,10 +202,10 @@
Status:</label> Status:</label>
<div class="col-sm-9"> <div class="col-sm-9">
<span class="badge" :class="{ <span class="badge" :class="{
'bg-danger': currentLimitList.limit_set_status == 'Failure', 'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
'bg-warning': currentLimitList.limit_set_status == 'Pending', 'text-bg-warning': currentLimitList.limit_set_status == 'Pending',
'bg-success': currentLimitList.limit_set_status == 'Ok', 'text-bg-success': currentLimitList.limit_set_status == 'Ok',
'bg-secondary': currentLimitList.limit_set_status == 'Unknown', 'text-bg-secondary': currentLimitList.limit_set_status == 'Unknown',
}"> }">
{{ currentLimitList.limit_set_status }} {{ currentLimitList.limit_set_status }}
</span> </span>
@ -277,10 +277,10 @@
Status:</label> Status:</label>
<div class="col"> <div class="col">
<span class="badge" :class="{ <span class="badge" :class="{
'bg-danger': successCommandPower == 'Failure', 'text-bg-danger': successCommandPower == 'Failure',
'bg-warning': successCommandPower == 'Pending', 'text-bg-warning': successCommandPower == 'Pending',
'bg-success': successCommandPower == 'Ok', 'text-bg-success': successCommandPower == 'Ok',
'bg-secondary': successCommandPower == 'Unknown', 'text-bg-secondary': successCommandPower == 'Unknown',
}"> }">
{{ successCommandPower }} {{ successCommandPower }}
</span> </span>

View File

@ -5,7 +5,7 @@
</BootstrapAlert> </BootstrapAlert>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Add a new Inverter</div> <div class="card-header text-bg-primary">Add a new Inverter</div>
<div class="card-body"> <div class="card-body">
<form class="form-inline" v-on:submit.prevent="onSubmit"> <form class="form-inline" v-on:submit.prevent="onSubmit">
<div class="form-group"> <div class="form-group">
@ -30,7 +30,7 @@
</div> </div>
<div class="card mt-5"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Inverter List</div> <div class="card-header text-bg-primary">Inverter List</div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">

View File

@ -6,7 +6,7 @@
<form @submit="saveMqttConfig"> <form @submit="saveMqttConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">MqTT Configuration</div> <div class="card-header text-bg-primary">MqTT Configuration</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label class="col-sm-4 form-check-label" for="inputMqtt">Enable MqTT</label> <label class="col-sm-4 form-check-label" for="inputMqtt">Enable MqTT</label>
@ -32,7 +32,7 @@
</div> </div>
<div class="card mt-5" 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-bg-primary">
MqTT Broker Parameter MqTT Broker Parameter
</div> </div>
<div class="card-body"> <div class="card-body">
@ -127,7 +127,7 @@
</div> </div>
<div class="card mt-5" 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-bg-primary">LWT Parameters</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</label> <label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</label>
@ -164,7 +164,7 @@
</div> </div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"> <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled">
<div class="card-header text-white bg-primary">Home Assistant MQTT Auto Discovery Parameters</div> <div class="card-header text-bg-primary">Home Assistant MQTT Auto Discovery Parameters</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputHassTopic" class="col-sm-2 col-form-label">Prefix Topic:</label> <label for="inputHassTopic" class="col-sm-2 col-form-label">Prefix Topic:</label>

View File

@ -1,7 +1,7 @@
<template> <template>
<BasePage :title="'MqTT Info'" :isLoading="dataLoading"> <BasePage :title="'MqTT Info'" :isLoading="dataLoading">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div> <div class="card-header text-bg-primary">Configuration Summary</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">
@ -9,8 +9,8 @@
<tr> <tr>
<th>Status</th> <th>Status</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_enabled, 'text-bg-danger': !mqttDataList.mqtt_enabled,
'bg-success': mqttDataList.mqtt_enabled, 'text-bg-success': mqttDataList.mqtt_enabled,
}"> }">
<span v-if="mqttDataList.mqtt_enabled">enabled</span> <span v-if="mqttDataList.mqtt_enabled">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>
@ -39,8 +39,8 @@
<tr> <tr>
<th>Retain</th> <th>Retain</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_retain, 'text-bg-danger': !mqttDataList.mqtt_retain,
'bg-success': mqttDataList.mqtt_retain, 'text-bg-success': mqttDataList.mqtt_retain,
}"> }">
<span v-if="mqttDataList.mqtt_retain">enabled</span> <span v-if="mqttDataList.mqtt_retain">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>
@ -49,8 +49,8 @@
<tr> <tr>
<th>TLS</th> <th>TLS</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_tls, 'text-bg-danger': !mqttDataList.mqtt_tls,
'bg-success': mqttDataList.mqtt_tls, 'text-bg-success': mqttDataList.mqtt_tls,
}"> }">
<span v-if="mqttDataList.mqtt_tls">enabled</span> <span v-if="mqttDataList.mqtt_tls">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>
@ -67,7 +67,7 @@
</div> </div>
<div class="card mt-5"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Home Assistant MQTT Auto Discovery Configuration Summary <div class="card-header text-bg-primary">Home Assistant MQTT Auto Discovery Configuration Summary
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
@ -76,8 +76,8 @@
<tr> <tr>
<th>Status</th> <th>Status</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_hass_enabled, 'text-bg-danger': !mqttDataList.mqtt_hass_enabled,
'bg-success': mqttDataList.mqtt_hass_enabled, 'text-bg-success': mqttDataList.mqtt_hass_enabled,
}"> }">
<span v-if="mqttDataList.mqtt_hass_enabled">enabled</span> <span v-if="mqttDataList.mqtt_hass_enabled">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>
@ -90,8 +90,8 @@
<tr> <tr>
<th>Retain</th> <th>Retain</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_hass_retain, 'text-bg-danger': !mqttDataList.mqtt_hass_retain,
'bg-success': mqttDataList.mqtt_hass_retain, 'text-bg-success': mqttDataList.mqtt_hass_retain,
}"> }">
<span v-if="mqttDataList.mqtt_hass_retain">enabled</span> <span v-if="mqttDataList.mqtt_hass_retain">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>
@ -100,8 +100,8 @@
<tr> <tr>
<th>Expire</th> <th>Expire</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_hass_expire, 'text-bg-danger': !mqttDataList.mqtt_hass_expire,
'bg-success': mqttDataList.mqtt_hass_expire, 'text-bg-success': mqttDataList.mqtt_hass_expire,
}"> }">
<span v-if="mqttDataList.mqtt_hass_expire">enabled</span> <span v-if="mqttDataList.mqtt_hass_expire">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>
@ -110,8 +110,8 @@
<tr> <tr>
<th>Individual Panels</th> <th>Individual Panels</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_hass_individualpanels, 'text-bg-danger': !mqttDataList.mqtt_hass_individualpanels,
'bg-success': mqttDataList.mqtt_hass_individualpanels, 'text-bg-success': mqttDataList.mqtt_hass_individualpanels,
}"> }">
<span v-if="mqttDataList.mqtt_hass_individualpanels">enabled</span> <span v-if="mqttDataList.mqtt_hass_individualpanels">enabled</span>
<span v-else>disabled</span> <span v-else>disabled</span>
@ -124,7 +124,7 @@
</div> </div>
<div class="card mt-5"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Runtime Summary</div> <div class="card-header text-bg-primary">Runtime Summary</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">
@ -132,8 +132,8 @@
<tr> <tr>
<th>Connection Status</th> <th>Connection Status</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !mqttDataList.mqtt_connected, 'text-bg-danger': !mqttDataList.mqtt_connected,
'bg-success': mqttDataList.mqtt_connected, 'text-bg-success': mqttDataList.mqtt_connected,
}"> }">
<span v-if="mqttDataList.mqtt_connected">connected</span> <span v-if="mqttDataList.mqtt_connected">connected</span>
<span v-else>disconnected</span> <span v-else>disconnected</span>

View File

@ -6,7 +6,7 @@
<form @submit="saveNetworkConfig"> <form @submit="saveNetworkConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">WiFi Configuration</div> <div class="card-header text-bg-primary">WiFi Configuration</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label> <label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label>
@ -50,7 +50,7 @@
</div> </div>
<div class="card" v-show="!networkConfigList.dhcp"> <div class="card" v-show="!networkConfigList.dhcp">
<div class="card-header text-white bg-primary"> <div class="card-header text-bg-primary">
Static IP Configuration Static IP Configuration
</div> </div>
<div class="card-body"> <div class="card-body">

View File

@ -6,7 +6,7 @@
<form @submit="saveNtpConfig"> <form @submit="saveNtpConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">NTP Configuration</div> <div class="card-header text-bg-primary">NTP Configuration</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label> <label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
@ -41,7 +41,7 @@
</form> </form>
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Manual Time Synchronization</div> <div class="card-header text-bg-primary">Manual Time Synchronization</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="currentMcuTime" class="col-sm-2 col-form-label">Current OpenDTU Time:</label> <label for="currentMcuTime" class="col-sm-2 col-form-label">Current OpenDTU Time:</label>

View File

@ -1,7 +1,7 @@
<template> <template>
<BasePage :title="'NTP Info'" :isLoading="dataLoading"> <BasePage :title="'NTP Info'" :isLoading="dataLoading">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div> <div class="card-header text-bg-primary">Configuration Summary</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">
@ -25,7 +25,7 @@
</div> </div>
<div class="card mt-5"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Current Time</div> <div class="card-header text-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">
@ -33,8 +33,8 @@
<tr> <tr>
<th>Status</th> <th>Status</th>
<td class="badge" :class="{ <td class="badge" :class="{
'bg-danger': !ntpDataList.ntp_status, 'text-bg-danger': !ntpDataList.ntp_status,
'bg-success': ntpDataList.ntp_status, 'text-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>

View File

@ -6,7 +6,7 @@
<form @submit="savePasswordConfig"> <form @submit="savePasswordConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Admin password</div> <div class="card-header text-bg-primary">Admin password</div>
<div class="card-body"> <div class="card-body">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">Password:</label> <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>