From 9428eecce419f8dbf8065fb5bb10d0327c80b92f Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Fri, 19 Jan 2024 22:03:26 +0100
Subject: [PATCH] webapp: Use CardElement in InverterTotalInfo

---
 webapp/src/components/CardElement.vue       |  4 +-
 webapp/src/components/InverterTotalInfo.vue | 69 ++++++++++-----------
 2 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/webapp/src/components/CardElement.vue b/webapp/src/components/CardElement.vue
index 9605858..20bce75 100644
--- a/webapp/src/components/CardElement.vue
+++ b/webapp/src/components/CardElement.vue
@@ -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>
@@ -18,4 +18,4 @@ export default defineComponent({
         'centerContent': Boolean,
     },
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
index 5952c24..6b5b83f 100644
--- a/webapp/src/components/InverterTotalInfo.vue
+++ b/webapp/src/components/InverterTotalInfo.vue
@@ -1,57 +1,52 @@
 <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">
-                    <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 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>
+            </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">
-                    <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 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>
+            </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">
-                    <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 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>
+            </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 },
     },
 });
-</script>
\ No newline at end of file
+</script>