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

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

@ -1,7 +1,7 @@
<template> <template>
<div :class="['card', addSpace ? 'mt-5' : '' ]"> <div :class="['card', addSpace ? 'mt-5' : '' ]">
<div :class="['card-header', textVariant]">{{ text }}</div> <div :class="['card-header', textVariant]">{{ text }}</div>
<div :class="['card-body', centerContent ? 'text-center' : '']"> <div :class="['card-body', 'card-text', centerContent ? 'text-center' : '']">
<slot /> <slot />
</div> </div>
</div> </div>
@ -18,4 +18,4 @@ export default defineComponent({
'centerContent': Boolean, 'centerContent': Boolean,
}, },
}); });
</script> </script>

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

@ -1,57 +1,52 @@
<template> <template>
<div class="row row-cols-1 row-cols-md-3 g-3"> <div class="row row-cols-1 row-cols-md-3 g-3">
<div class="col"> <div class="col">
<div class="card"> <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldTotal')">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldTotal') }}</div> <h2>
<div class="card-body card-text text-center"> {{ $n(totalData.YieldTotal.v, 'decimal', {
<h2> minimumFractionDigits: totalData.YieldTotal.d,
{{ $n(totalData.YieldTotal.v, 'decimal', { maximumFractionDigits: totalData.YieldTotal.d
minimumFractionDigits: totalData.YieldTotal.d, }) }}
maximumFractionDigits: totalData.YieldTotal.d <small class="text-muted">{{ totalData.YieldTotal.u }}</small>
})}} </h2>
<small class="text-muted">{{ totalData.YieldTotal.u }}</small> </CardElement>
</h2>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldDay')">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalYieldDay') }}</div> <h2>
<div class="card-body card-text text-center"> {{ $n(totalData.YieldDay.v, 'decimal', {
<h2> minimumFractionDigits: totalData.YieldDay.d,
{{ $n(totalData.YieldDay.v, 'decimal', { maximumFractionDigits: totalData.YieldDay.d
minimumFractionDigits: totalData.YieldDay.d, }) }}
maximumFractionDigits: totalData.YieldDay.d <small class="text-muted">{{ totalData.YieldDay.u }}</small>
})}} </h2>
<small class="text-muted">{{ totalData.YieldDay.u }}</small> </CardElement>
</h2>
</div>
</div>
</div> </div>
<div class="col"> <div class="col">
<div class="card"> <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalPower')">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.TotalPower') }}</div> <h2>
<div class="card-body card-text text-center"> {{ $n(totalData.Power.v, 'decimal', {
<h2> minimumFractionDigits: totalData.Power.d,
{{ $n(totalData.Power.v, 'decimal', { maximumFractionDigits: totalData.Power.d
minimumFractionDigits: totalData.Power.d, }) }}
maximumFractionDigits: totalData.Power.d <small class="text-muted">{{ totalData.Power.u }}</small>
})}} </h2>
<small class="text-muted">{{ totalData.Power.u }}</small> </CardElement>
</h2>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { Total } from '@/types/LiveDataStatus'; import type { Total } from '@/types/LiveDataStatus';
import CardElement from './CardElement.vue';
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
totalData: { type: Object as PropType<Total>, required: true }, totalData: { type: Object as PropType<Total>, required: true },
}, },
}); });
</script> </script>