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

[webapp] HomeView more responsive

Browse Source 
* change <div v-for> into <template v-for> to avoid empty divs for
  nonexisting channels

* cleanup bootstrap grid / flex classes
This commit is contained in:
Axel Hinrichs 2022-07-05 00:41:23 +02:00
parent c155bf3d01
commit 88d29a9b43
2 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,18 +5,20 @@
</div> </div>
<template v-if="waitForData == true">Waiting for data... </template> <template v-if="waitForData == true">Waiting for data... </template>
<template v-else> <template v-else>
<div class="d-flex align-items-start"> <div class="row gy-3">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" <div class="col-sm-3 col-md-2">
aria-orientation="vertical"> <div class="nav nav-pills row-cols-sm-1" 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 }}
</button>
</div>
</div> </div>
<div class="tab-content" id="v-pills-tabContent"> <div class="tab-content col-sm-9 col-md-10" 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">
@ -30,11 +32,14 @@
{{ 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 g-3">
<div v-for="channel in 5" :key="channel"> <template v-for="channel in 5" :key="channel">
<InverterChannelInfo v-if="inverter[channel - 1]" <div v-if="inverter[channel - 1]" class="col">
:channelData="inverter[channel - 1]" :channelNumber="channel - 1" /> <InverterChannelInfo
</div> :channelData="inverter[channel - 1]"
:channelNumber="channel - 1" />
</div>
</template>
</div> </div>
</div> </div>
</div> </div>

42
webapp/src/components/partials/InverterChannelInfo.vue
View File

@ -1,26 +1,24 @@
<template> <template>
<div class="col"> <div class="card">
<div class="card"> <div v-if="channelNumber >= 1" class="card-header">String {{ channelNumber }}</div>
<div v-if="channelNumber >= 1" class="card-header">String {{ channelNumber }}</div> <div v-if="channelNumber == 0" class="card-header">Phase {{ channelNumber + 1 }}</div>
<div v-if="channelNumber == 0" class="card-header">Phase {{ channelNumber + 1 }}</div> <div class="card-body">
<div class="card-body"> <table class="table table-striped table-hover">
<table class="table table-striped table-hover"> <thead>
<thead> <tr>
<tr> <th scope="col">Property</th>
<th scope="col">Property</th> <th scope="col">Value</th>
<th scope="col">Value</th> <th scope="col">Unit</th>
<th scope="col">Unit</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
<tr v-for="(property, key) in channelData" :key="`prop-${key}`"> <th scope="row">{{ key }}</th>
<th scope="row">{{ key }}</th> <td style="text-align: right">{{ formatNumber(property.v) }}</td>
<td style="text-align: right">{{ formatNumber(property.v) }}</td> <td>{{ property.u }}</td>
<td>{{ property.u }}</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
</div> </div>
</div> </div>
</template> </template>