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

webapp: Use correct Complimentary colours

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/src/components/FirmwareInfo.vue
View File

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

2
webapp/src/components/HardwareInfo.vue
View File

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

2
webapp/src/components/InterfaceApInfo.vue
View File

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

2
webapp/src/components/InterfaceNetworkInfo.vue
View File

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

2
webapp/src/components/InverterChannelInfo.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="card" :class="{ 'border-info': channelNumber == 0 }">
<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">
<table class="table table-striped table-hover">
<thead>

2
webapp/src/components/MemoryInfo.vue
View File

@ -1,6 +1,6 @@
<template>
<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="table-responsive">
<table class="table table-hover table-condensed">

12
webapp/src/components/RadioInfo.vue
View File

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

6
webapp/src/components/WifiApInfo.vue
View File

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

6
webapp/src/components/WifiStationInfo.vue
View File

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

8
webapp/src/views/AboutView.vue
View File

@ -5,7 +5,7 @@
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
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" />
</span>&nbsp;Project Origin
</button>
@ -41,7 +41,7 @@
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
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" />
</span>&nbsp;News &amp; Updates
</button>
@ -58,7 +58,7 @@
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
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" />
</span>&nbsp;Error Reporting
</button>
@ -75,7 +75,7 @@
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
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" />
</span>&nbsp;Discussion
</button>

6
webapp/src/views/ConfigAdminView.vue
View File

@ -5,7 +5,7 @@
</BootstrapAlert>
<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">
Backup the configuration file
<button class="btn btn-primary" @click="downloadConfig">Backup
@ -14,7 +14,7 @@
</div>
<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 v-if="!uploading && UploadError != ''">
@ -66,7 +66,7 @@
</div>
<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">
<button class="btn btn-danger" @click="onFactoryResetModal">Restore Factory-Default Settings

2
webapp/src/views/DtuAdminView.vue
View File

@ -6,7 +6,7 @@
<form @submit="saveDtuConfig">
<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="row mb-3">
<label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:</label>

8
webapp/src/views/FirmwareUpgradeView.vue
View File

@ -9,7 +9,7 @@
</div>
<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">
<p class="h1 mb-2">
<BIconExclamationCircleFill />
@ -30,7 +30,7 @@
</div>
<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">
<span class="h1 mb-2">
<BIconCheckCircle />
@ -45,7 +45,7 @@
</div>
<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="form-group pt-2 mt-3">
<input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
@ -54,7 +54,7 @@
</div>
<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="progress">
<div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"

26
webapp/src/views/HomeView.vue
View File

@ -24,11 +24,11 @@
:id="'v-pills-' + inverter.serial" role="tabpanel"
:aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
<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="{
'bg-danger': !inverter.reachable,
'bg-warning': inverter.reachable && !inverter.producing,
'bg-primary': inverter.reachable && inverter.producing,
'text-bg-danger': !inverter.reachable,
'text-bg-warning': inverter.reachable && !inverter.producing,
'text-bg-primary': inverter.reachable && inverter.producing,
}">
<div class="p-1 flex-grow-1">
<div class="d-flex flex-wrap">
@ -79,7 +79,7 @@
@click="onShowEventlog(inverter.serial)" title="Show Eventlog">
<BIconJournalText style="font-size:24px;" />
<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 }}
<span class="visually-hidden">unread messages</span>
</span>
@ -202,10 +202,10 @@
Status:</label>
<div class="col-sm-9">
<span class="badge" :class="{
'bg-danger': currentLimitList.limit_set_status == 'Failure',
'bg-warning': currentLimitList.limit_set_status == 'Pending',
'bg-success': currentLimitList.limit_set_status == 'Ok',
'bg-secondary': currentLimitList.limit_set_status == 'Unknown',
'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
'text-bg-warning': currentLimitList.limit_set_status == 'Pending',
'text-bg-success': currentLimitList.limit_set_status == 'Ok',
'text-bg-secondary': currentLimitList.limit_set_status == 'Unknown',
}">
{{ currentLimitList.limit_set_status }}
</span>
@ -277,10 +277,10 @@
Status:</label>
<div class="col">
<span class="badge" :class="{
'bg-danger': successCommandPower == 'Failure',
'bg-warning': successCommandPower == 'Pending',
'bg-success': successCommandPower == 'Ok',
'bg-secondary': successCommandPower == 'Unknown',
'text-bg-danger': successCommandPower == 'Failure',
'text-bg-warning': successCommandPower == 'Pending',
'text-bg-success': successCommandPower == 'Ok',
'text-bg-secondary': successCommandPower == 'Unknown',
}">
{{ successCommandPower }}
</span>

4
webapp/src/views/InverterAdminView.vue
View File

@ -5,7 +5,7 @@
</BootstrapAlert>
<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">
<form class="form-inline" v-on:submit.prevent="onSubmit">
<div class="form-group">
@ -30,7 +30,7 @@
</div>
<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="table-responsive">
<table class="table">

8
webapp/src/views/MqttAdminView.vue
View File

@ -6,7 +6,7 @@
<form @submit="saveMqttConfig">
<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="row mb-3">
<label class="col-sm-4 form-check-label" for="inputMqtt">Enable MqTT</label>
@ -32,7 +32,7 @@
</div>
<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
</div>
<div class="card-body">
@ -127,7 +127,7 @@
</div>
<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="row mb-3">
<label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</label>
@ -164,7 +164,7 @@
</div>
<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="row mb-3">
<label for="inputHassTopic" class="col-sm-2 col-form-label">Prefix Topic:</label>

38
webapp/src/views/MqttInfoView.vue
View File

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

4
webapp/src/views/NetworkAdminView.vue
View File

@ -6,7 +6,7 @@
<form @submit="saveNetworkConfig">
<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="row mb-3">
<label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label>
@ -50,7 +50,7 @@
</div>
<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
</div>
<div class="card-body">

4
webapp/src/views/NtpAdminView.vue
View File

@ -6,7 +6,7 @@
<form @submit="saveNtpConfig">
<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="row mb-3">
<label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
@ -41,7 +41,7 @@
</form>
<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="row mb-3">
<label for="currentMcuTime" class="col-sm-2 col-form-label">Current OpenDTU Time:</label>

8
webapp/src/views/NtpInfoView.vue
View File

@ -1,7 +1,7 @@
<template>
<BasePage :title="'NTP Info'" :isLoading="dataLoading">
<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="table-responsive">
<table class="table table-hover table-condensed">
@ -25,7 +25,7 @@
</div>
<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="table-responsive">
<table class="table table-hover table-condensed">
@ -33,8 +33,8 @@
<tr>
<th>Status</th>
<td class="badge" :class="{
'bg-danger': !ntpDataList.ntp_status,
'bg-success': ntpDataList.ntp_status,
'text-bg-danger': !ntpDataList.ntp_status,
'text-bg-success': ntpDataList.ntp_status,
}">
<span v-if="ntpDataList.ntp_status">synced</span>
<span v-else>not synced</span>

2
webapp/src/views/SecurityAdminView.vue
View File

@ -6,7 +6,7 @@
<form @submit="savePasswordConfig">
<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="row mb-3">
<label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>