Skip to content

Commit

Permalink
Webinterface updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@MalteSchm
MalteSchm committed Apr 4, 2023
1 parent 169ea3d commit 2950f55
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 53 deletions.
152 changes: 109 additions & 43 deletions webapp/src/components/InverterTotalInfo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,123 @@
<template>
<div v-show="totalVeData.enabled">
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldTotal') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalData.YieldTotal.v, 'decimal', {
minimumFractionDigits: totalData.YieldTotal.d,
maximumFractionDigits: totalData.YieldTotal.d
})}}
<small class="text-muted">{{ totalData.YieldTotal.u }}</small>
</h2>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.MpptTotalYieldTotal') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalVeData.total.YieldTotal.v, 'decimal', {
minimumFractionDigits: totalVeData.total.YieldTotal.d,
maximumFractionDigits: totalVeData.total.YieldTotal.d
}) }}
<small class="text-muted">{{ totalVeData.total.YieldTotal.u }}</small>
</h2>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldDay') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalData.YieldDay.v, 'decimal', {
minimumFractionDigits: totalData.YieldDay.d,
maximumFractionDigits: totalData.YieldDay.d
})}}
<small class="text-muted">{{ totalData.YieldDay.u }}</small>
</h2>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.MpptTotalYieldDay') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalVeData.total.YieldDay.v, 'decimal', {
minimumFractionDigits: totalVeData.total.YieldDay.d,
maximumFractionDigits: totalVeData.total.YieldDay.d
}) }}
<small class="text-muted">{{ totalVeData.total.YieldDay.u }}</small>
</h2>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalPower') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalData.Power.v, 'decimal', {
minimumFractionDigits: totalData.Power.d,
maximumFractionDigits: totalData.Power.d
})}}
<small class="text-muted">{{ totalData.Power.u }}</small>
</h2>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.MpptTotalPower') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalVeData.total.Power.v, 'decimal', {
minimumFractionDigits: totalVeData.total.Power.d,
maximumFractionDigits: totalVeData.total.Power.d
}) }}
<small class="text-muted">{{ totalVeData.total.Power.u }}</small>
</h2>
</div>
</div>
</div>
</div>
</div>
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.InverterTotalYieldTotal') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalData.YieldTotal.v, 'decimal', {
minimumFractionDigits: totalData.YieldTotal.d,
maximumFractionDigits: totalData.YieldTotal.d
}) }}
<small class="text-muted">{{ totalData.YieldTotal.u }}</small>
</h2>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.InverterTotalYieldDay') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalData.YieldDay.v, 'decimal', {
minimumFractionDigits: totalData.YieldDay.d,
maximumFractionDigits: totalData.YieldDay.d
}) }}
<small class="text-muted">{{ totalData.YieldDay.u }}</small>
</h2>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.InverterTotalPower') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalData.Power.v, 'decimal', {
minimumFractionDigits: totalData.Power.d,
maximumFractionDigits: totalData.Power.d
}) }}
<small class="text-muted">{{ totalData.Power.u }}</small>
</h2>
</div>
</div>
</div>
</div>
<div v-show="totalBattData.enabled">
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col">
<div class="card">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.BatterySoc') }}</div>
<div class="card-body card-text text-center">
<h2>
{{ $n(totalBattData.soc.v, 'decimal', {
minimumFractionDigits: totalBattData.soc.d,
maximumFractionDigits: totalBattData.soc.d
}) }}
<small class="text-muted">{{ totalBattData.soc.u }}</small>
</h2>
</div>
</div>
</div>
</div>
</div>
</template>

<script lang="ts">
import type { Total } from '@/types/LiveDataStatus';
import type { Battery, Total, Vedirect } from '@/types/LiveDataStatus';
import { defineComponent, type PropType } from 'vue';
export default defineComponent({
props: {
totalData: { type: Object as PropType<Total>, required: true },
},
props: {
totalData: { type: Object as PropType<Total>, required: true },
totalVeData: { type: Object as PropType<Vedirect>, required: true },
totalBattData: { type: Object as PropType<Battery>, required: true },
},
});
</script>
10 changes: 7 additions & 3 deletions webapp/src/locales/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,9 +325,13 @@
"Unit": "Einheit"
},
"invertertotalinfo": {
"TotalYieldTotal": "Gesamtertrag Insgesamt",
"TotalYieldDay": "Gesamtertrag Heute",
"TotalPower": "Gesamtleistung"
"InverterTotalYieldTotal": "Inverter Gesamtertrag Insgesamt",
"InverterTotalYieldDay": "Inverter Gesamtertrag Heute",
"InverterTotalPower": "Inverter Gesamtleistung",
"MpptTotalYieldTotal": "MPPT Gesamtertrag Insgesamt",
"MpptTotalYieldDay": "MPPT Gesamtertrag Heute",
"MpptTotalPower": "MPPT Gesamtleistung",
"BatterySoc": "Ladezustand"
},
"inverterchannelproperty": {
"Power": "Leistung",
Expand Down
10 changes: 7 additions & 3 deletions webapp/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,9 +325,13 @@
"Unit": "Unit"
},
"invertertotalinfo": {
"TotalYieldTotal": "Total Yield Total",
"TotalYieldDay": "Total Yield Day",
"TotalPower": "Total Power"
"InverterTotalYieldTotal": "Inverter Total Yield Total",
"InverterTotalYieldDay": "Inverter Total Yield Day",
"InverterTotalPower": "Inverter Total Power",
"MpptTotalYieldTotal": "MPPT Total Yield Total",
"MpptTotalYieldDay": "MPPT Total Yield Day",
"MpptTotalPower": "MPPT Total Power",
"BatterySoc": "State of charge"
},
"inverterchannelproperty": {
"Power": "Power",
Expand Down
10 changes: 7 additions & 3 deletions webapp/src/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,9 +324,13 @@
"Unit": "Unité"
},
"invertertotalinfo": {
"TotalYieldTotal": "Rendement total",
"TotalYieldDay": "Rendement du jour",
"TotalPower": "Puissance de l'installation"
"InverterTotalYieldTotal": "Onduleurs rendement total",
"InverterTotalYieldDay": "Onduleurs rendement du jour",
"InverterTotalPower": "Onduleurs puissance de l'installation",
"MpptTotalYieldTotal": "MPPT rendement total",
"MpptTotalYieldDay": "MPPT rendement du jour",
"MpptTotalPower": "MPPT puissance de l'installation",
"BatterySoc": "State of charge"
},
"inverterchannelproperty": {
"Power": "Puissance",
Expand Down
2 changes: 2 additions & 0 deletions webapp/src/types/LiveDataStatus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export interface Hints {

export interface Vedirect {
enabled: boolean;
total: Total;
}

export interface Huawei {
Expand All @@ -56,6 +57,7 @@ export interface Huawei {

export interface Battery {
enabled: boolean;
soc: ValueObject;
}

export interface LiveData {
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true">
<HintView :hints="liveData.hints" />
<InverterTotalInfo :totalData="liveData.total" /><br />
<InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery"/><br />
<div class="row gy-3">
<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">
Expand Down

0 comments on commit 2950f55

Please sign in to comment.