From 6a8af8fdc0a37ddcb5444e2078d5cea15348a883 Mon Sep 17 00:00:00 2001
From: Axel Hinrichs <hinrichs@bitscape.de>
Date: Mon, 4 Jul 2022 20:57:06 +0200
Subject: [PATCH] [webapp] fix HomeView component nesting

* move content template after page-header
---
 webapp/src/components/HomeView.vue | 66 +++++++++++++++---------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index 40841d8..cce36c2 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -2,46 +2,46 @@
     <div class="container" role="main">
         <div class="page-header">
             <h1>Live Data</h1>
-            <template v-if="waitForData == true">Waiting for data... </template>
-            <template v-else>
-                <div class="d-flex align-items-start">
-                    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
-                        aria-orientation="vertical">
-                        <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
-                            :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
-                            :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
-                            aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
-                            {{ inverter.name }}
-                        </button>
-                    </div>
+        </div>
+        <template v-if="waitForData == true">Waiting for data... </template>
+        <template v-else>
+            <div class="d-flex align-items-start">
+                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
+                    aria-orientation="vertical">
+                    <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
+                        :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
+                        :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
+                        aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
+                        {{ inverter.name }}
+                    </button>
+                </div>
 
-                    <div class="tab-content" id="v-pills-tabContent">
-                        <div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
-                            :id="'v-pills-' + inverter.serial" role="tabpanel"
-                            :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
-                            <div class="card">
-                                <div class="card-header text-white bg-primary" :class="{
-                                    'bg-danger': inverter.age_critical,
-                                    'bg-primary': !inverter.age_critical,
-                                }">
-                                    {{ inverter.name }} (Inverter Serial Number:
-                                    {{ inverter.serial }}) (Data Age:
-                                    {{ inverter.data_age }} seconds)
-                                </div>
-                                <div class="card-body">
-                                    <div class="row row-cols-1 row-cols-md-3 g-4">
-                                        <div v-for="channel in 5" :key="channel">
-                                            <InverterChannelInfo v-if="inverter[channel - 1]"
-                                                :channelData="inverter[channel - 1]" :channelNumber="channel - 1" />
-                                        </div>
+                <div class="tab-content" id="v-pills-tabContent">
+                    <div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
+                        :id="'v-pills-' + inverter.serial" role="tabpanel"
+                        :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
+                        <div class="card">
+                            <div class="card-header text-white bg-primary" :class="{
+                                'bg-danger': inverter.age_critical,
+                                'bg-primary': !inverter.age_critical,
+                            }">
+                                {{ inverter.name }} (Inverter Serial Number:
+                                {{ inverter.serial }}) (Data Age:
+                                {{ inverter.data_age }} seconds)
+                            </div>
+                            <div class="card-body">
+                                <div class="row row-cols-1 row-cols-md-3 g-4">
+                                    <div v-for="channel in 5" :key="channel">
+                                        <InverterChannelInfo v-if="inverter[channel - 1]"
+                                            :channelData="inverter[channel - 1]" :channelNumber="channel - 1" />
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </template>
-        </div>
+            </div>
+        </template>
     </div>
 </template>