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

webapp: Use BasePage for HomeView

Browse Source
This commit is contained in:
Thomas Basler 2022-10-18 18:44:35 +02:00
parent 4fee366926
commit 31849ec159
2 changed files with 268 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/src/components/BasePage.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="container-xxl" role="main">
<div :class="{'container-xxl': !isWideScreen,
'container-fluid': isWideScreen}" role="main">
<div class="page-header">
<h1>{{ title }}</h1>
</div>
@ -22,7 +23,8 @@ import { defineComponent } from 'vue';
export default defineComponent({
props: {
title: { type: String, required: true },
isLoading: { type: Boolean, required: false, default: false }
isLoading: { type: Boolean, required: false, default: false },
isWideScreen: { type: Boolean, required: false, default: false },
},
});
</script>

34
webapp/src/views/HomeView.vue
View File

@ -1,20 +1,8 @@
<template>
<div class="container-fluid" role="main">
<div class="page-header">
<h1>Live Data</h1>
</div>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-else>
<BasePage :title="'Live Data'" :isLoading="dataLoading" :isWideScreen="true">
<div class="row gy-3">
<div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? {'display': 'none' } : {}]">
<div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<div class="nav nav-pills row-cols-sm-1" 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"
@ -61,8 +49,7 @@
<div class="btn-toolbar p-2" role="toolbar">
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-sm btn-danger"
@click="onShowLimitSettings(inverter.serial)"
title="Show / Set Inverter Limit">
@click="onShowLimitSettings(inverter.serial)" title="Show / Set Inverter Limit">
<BIconSpeedometer style="font-size:24px;" />
</button>
@ -112,7 +99,7 @@
</div>
</div>
</div>
</template>
</BasePage>
<div class="modal" id="eventView" tabindex="-1">
<div class="modal-dialog modal-lg">
@ -200,8 +187,8 @@
<div class="col-sm-4" v-if="maxPower > 0">
<div class="input-group">
<input type="number" class="form-control" id="inputCurrentLimitAbsolute"
aria-describedby="currentLimitTypeAbsolute"
v-model="currentLimitAbsolute" disabled />
aria-describedby="currentLimitTypeAbsolute" v-model="currentLimitAbsolute"
disabled />
<span class="input-group-text" id="currentLimitTypeAbsolute">W</span>
</div>
</div>
@ -239,8 +226,7 @@
(W)</a></li>
</ul>
</div>
<div v-if="targetLimitType == 0" class="alert alert-secondary mt-3"
role="alert">
<div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert">
<b>Hint:</b> If you set the limit as absolute value the display of the
current value will only be updated after ~4 minutes.
</div>
@ -319,11 +305,12 @@
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import * as bootstrap from 'bootstrap';
import {
BIconXCircleFill,
@ -347,6 +334,7 @@ import type { Inverters } from '@/types/LiveDataStatus';
export default defineComponent({
components: {
BasePage,
InverterChannelInfo,
EventLog,
DevInfo,
@ -427,7 +415,7 @@ export default defineComponent({
if (this.isFirstFetchAfterConnect) {
this.isFirstFetchAfterConnect = false;
const firstTabEl = this.$el.querySelector(
const firstTabEl = document.querySelector(
"#v-pills-tab:first-child button"
);
if (firstTabEl != null) {