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

webapp: Use CardElement in InverterTotalInfo

Browse Source
This commit is contained in:
Thomas Basler 2024-01-19 22:03:26 +01:00
parent a06d21024c
commit 9428eecce4
2 changed files with 34 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<div :class="['card', addSpace ? 'mt-5' : '' ]">
<div :class="['card-header', textVariant]">{{ text }}</div>
<div :class="['card-body', centerContent ? 'text-center' : '']">
<div :class="['card-body', 'card-text', centerContent ? 'text-center' : '']">
<slot />
</div>
</div>

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

@ -1,55 +1,50 @@
<template>
<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">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldTotal')">
<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>
</CardElement>
</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">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldDay')">
<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>
</CardElement>
</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">
<CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalPower')">
<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>
</CardElement>
</div>
</div>
</template>
<script lang="ts">
import type { Total } from '@/types/LiveDataStatus';
import CardElement from './CardElement.vue';
import { defineComponent, type PropType } from 'vue';
export default defineComponent({
components: {
CardElement,
},
props: {
totalData: { type: Object as PropType<Total>, required: true },
},