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

fix: optimize margins in live view

Browse Source 
all total cards at the top of the live view go into the same row.
bootstrap will line-break after every third column/card, as the row
is row-cols-3.

the battery icon to the right of the project name in the header shall
have marging to said project name.

the rows in the live view now use class mt-0 to counteract bootstraps
negative margin for individual rows.
This commit is contained in:
Bernhard Kirchen 2024-06-17 17:32:26 +02:00
parent 1f6fdb7fc0
commit 95e560bdc7
6 changed files with 16 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
</div>
<div v-else-if="'values' in batteryData"> <!-- suppress the card for MQTT battery provider -->
<div class="row gy-3">
<div class="row gy-3 mt-0">
<div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center" :class="{

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

@ -6,7 +6,7 @@
</div>
<template v-else>
<div class="row gy-3">
<div class="row gy-3 mt-0">
<div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center" :class="{

26
webapp/src/components/InverterTotalInfo.vue
View File

@ -1,7 +1,6 @@
<template>
<div v-show="totalVeData.enabled">
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="col" v-if="totalVeData.enabled">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalYieldTotal')">
<h2>
{{ $n(totalVeData.total.YieldTotal.v, 'decimal', {
@ -12,7 +11,7 @@
</h2>
</CardElement>
</div>
<div class="col">
<div class="col" v-if="totalVeData.enabled">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalYieldDay')">
<h2>
{{ $n(totalVeData.total.YieldDay.v, 'decimal', {
@ -23,7 +22,7 @@
</h2>
</CardElement>
</div>
<div class="col">
<div class="col" v-if="totalVeData.enabled">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.MpptTotalPower')">
<h2>
{{ $n(totalVeData.total.Power.v, 'decimal', {
@ -34,9 +33,6 @@
</h2>
</CardElement>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.InverterTotalYieldTotal')">
<h2>
@ -70,10 +66,7 @@
</h2>
</CardElement>
</div>
</div>
<div v-show="totalBattData.enabled || powerMeterData.enabled || huaweiData.enabled">
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col" v-if="totalBattData.enabled">
<div class="col" v-if="totalBattData.enabled">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.BatterySoc')">
<h2>
{{ $n(totalBattData.soc.v, 'decimal', {
@ -83,8 +76,8 @@
<small class="text-muted">{{ totalBattData.soc.u }}</small>
</h2>
</CardElement>
</div>
<div class="col" v-if="powerMeterData.enabled">
</div>
<div class="col" v-if="powerMeterData.enabled">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.HomePower')">
<h2>
{{ $n(powerMeterData.Power.v, 'decimal', {
@ -94,8 +87,8 @@
<small class="text-muted">{{powerMeterData.Power.u }}</small>
</h2>
</CardElement>
</div>
<div class="col" v-if="huaweiData.enabled">
</div>
<div class="col" v-if="huaweiData.enabled">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.HuaweiPower')">
<h2>
{{ $n(huaweiData.Power.v, 'decimal', {
@ -105,9 +98,8 @@
<small class="text-muted">{{huaweiData.Power.u }}</small>
</h2>
</CardElement>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">

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

@ -11,7 +11,7 @@
<span style="margin-left: .5rem">
OpenDTU-OnBattery
</span>
<span class="text-info">
<span class="text-info mx-2">
<BIconBatteryCharging width="20" height="20" class="d-inline-block align-text-center" />
</span>
</router-link>

4
webapp/src/components/VedirectView.vue
View File

@ -7,9 +7,9 @@
</div>
<template v-else>
<div class="row gy-3">
<div class="row gy-3 mt-0" v-for="(item, serial) in vedirect.instances" :key="serial">
<div class="tab-content col-sm-12 col-md-12" id="v-pills-tabContent">
<div class="card" v-for="(item, serial) in vedirect.instances" :key="serial">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center"
:class="{
'text-bg-danger': item.data_age_ms >= 10000,

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

@ -1,8 +1,8 @@
<template>
<BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true" :showWebSocket="true" :isWebsocketConnected="isWebsocketConnected" @reload="reloadData">
<HintView :hints="liveData.hints" />
<InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery" :powerMeterData="liveData.power_meter" :huaweiData="liveData.huawei"/><br />
<div class="row gy-3">
<InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery" :powerMeterData="liveData.power_meter" :huaweiData="liveData.huawei"/>
<div class="row gy-3 mt-0">
<div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
<div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break"