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

[webapp] fix HomeView component nesting

Browse Source 
* move content template after page-header
This commit is contained in:
Axel Hinrichs 2022-07-04 20:57:06 +02:00
parent a9879c2f14
commit 6a8af8fdc0
1 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
webapp/src/components/HomeView.vue
View File

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