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

fixed formatting of the DatabaseChart

Browse Source
This commit is contained in:
Ralf Bauer 2023-05-21 15:49:11 +02:00
parent a785074fa8
commit c26b10a719
2 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/src/components/DatabaseChart.vue
View File

@ -63,6 +63,7 @@ export default defineComponent({
var options = { var options = {
height: 600, height: 600,
chartArea:{ top:25, width:'85%', height:'80%' },
legend: { legend: {
position: 'none' position: 'none'
}, },

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

@ -18,15 +18,14 @@
</div> </div>
<div class="tab-content" id="v-pills-tabContent" :class="{ <div class="tab-content" id="v-pills-tabContent" :class="{
'col-sm-9 col-md-10': inverterData.length > 1, 'col-sm-9 col-md-10': inverterData.length > 1,
'col-sm-12 col-md-12': inverterData.length == 1 'col-sm-12 col-md-12': inverterData.length == 1
}"> }">
<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 d-flex justify-content-between align-items-center" <div class="card-header d-flex justify-content-between align-items-center" :class="{
:class="{
'text-bg-tertiary': !inverter.poll_enabled, 'text-bg-tertiary': !inverter.poll_enabled,
'text-bg-danger': inverter.poll_enabled && !inverter.reachable, 'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing, 'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
@ -42,11 +41,11 @@
</div> </div>
<div style="padding-right: 2em;"> <div style="padding-right: 2em;">
{{ $t('home.CurrentLimit') }}<template v-if="inverter.limit_absolute > -1"> {{ {{ $t('home.CurrentLimit') }}<template v-if="inverter.limit_absolute > -1"> {{
$n(inverter.limit_absolute, 'decimalNoDigits') $n(inverter.limit_absolute, 'decimalNoDigits')
}} W | </template>{{ $n(inverter.limit_relative / 100, 'percent') }} }} W | </template>{{ $n(inverter.limit_relative / 100, 'percent') }}
</div> </div>
<div style="padding-right: 2em;"> <div style="padding-right: 2em;">
{{ $t('home.DataAge') }} {{ $t('home.Seconds', {'val': $n(inverter.data_age) }) }} {{ $t('home.DataAge') }} {{ $t('home.Seconds', { 'val': $n(inverter.data_age) }) }}
<template v-if="inverter.data_age > 300"> <template v-if="inverter.data_age > 300">
/ {{ calculateAbsoluteTime(inverter.data_age) }} / {{ calculateAbsoluteTime(inverter.data_age) }}
</template> </template>
@ -56,7 +55,8 @@
<div class="btn-toolbar p-2" role="toolbar"> <div class="btn-toolbar p-2" role="toolbar">
<div class="btn-group me-2" role="group"> <div class="btn-group me-2" role="group">
<button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger" <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
@click="onShowLimitSettings(inverter.serial)" v-tooltip :title="$t('home.ShowSetInverterLimit')"> @click="onShowLimitSettings(inverter.serial)" v-tooltip
:title="$t('home.ShowSetInverterLimit')">
<BIconSpeedometer style="font-size:24px;" /> <BIconSpeedometer style="font-size:24px;" />
</button> </button>
@ -64,7 +64,8 @@
<div class="btn-group me-2" role="group"> <div class="btn-group me-2" role="group">
<button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger" <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
@click="onShowPowerSettings(inverter.serial)" v-tooltip :title="$t('home.TurnOnOff')"> @click="onShowPowerSettings(inverter.serial)" v-tooltip
:title="$t('home.TurnOnOff')">
<BIconPower style="font-size:24px;" /> <BIconPower style="font-size:24px;" />
</button> </button>
@ -72,7 +73,8 @@
<div class="btn-group me-2" role="group"> <div class="btn-group me-2" role="group">
<button type="button" class="btn btn-sm btn-info" <button type="button" class="btn btn-sm btn-info"
@click="onShowDevInfo(inverter.serial)" v-tooltip :title="$t('home.ShowInverterInfo')"> @click="onShowDevInfo(inverter.serial)" v-tooltip
:title="$t('home.ShowInverterInfo')">
<BIconCpu style="font-size:24px;" /> <BIconCpu style="font-size:24px;" />
</button> </button>
@ -94,22 +96,23 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row flex-row-reverse flex-wrap-reverse g-3"> <div class="row flex-row-reverse flex-wrap-reverse g-3">
<template v-for="chanType in [{obj: inverter.INV, name: 'INV'}, {obj: inverter.AC, name: 'AC'}, {obj: inverter.DC, name: 'DC'}].reverse()"> <template
<template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x=>+x)" :key="channel"> v-for="chanType in [{ obj: inverter.INV, name: 'INV' }, { obj: inverter.AC, name: 'AC' }, { obj: inverter.DC, name: 'DC' }].reverse()">
<template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x => +x)"
:key="channel">
<template v-if="(chanType.name != 'DC') || <template v-if="(chanType.name != 'DC') ||
(chanType.name == 'DC' && getSumIrridiation(inverter) == 0) || (chanType.name == 'DC' && getSumIrridiation(inverter) == 0) ||
(chanType.name == 'DC' && getSumIrridiation(inverter) > 0 && chanType.obj[channel].Irradiation?.v || 0 > 0) (chanType.name == 'DC' && getSumIrridiation(inverter) > 0 && chanType.obj[channel].Irradiation?.v || 0 > 0)
"> ">
<div class="col"> <div class="col">
<InverterChannelInfo :channelData="chanType.obj[channel]" <InverterChannelInfo :channelData="chanType.obj[channel]"
:channelType="chanType.name" :channelType="chanType.name" :channelNumber="channel" />
:channelNumber="channel" />
</div> </div>
</template> </template>
</template> </template>
</template> </template>
<DatabaseChart />
</div> </div>
<DatabaseChart/>
</div> </div>
</div> </div>
</div> </div>
@ -135,8 +138,8 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="onHideEventlog" <button type="button" class="btn btn-secondary" @click="onHideEventlog" data-bs-dismiss="modal">{{
data-bs-dismiss="modal">{{ $t('home.Close') }}</button> $t('home.Close') }}</button>
</div> </div>
</div> </div>
@ -161,8 +164,8 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="onHideDevInfo" <button type="button" class="btn btn-secondary" @click="onHideDevInfo" data-bs-dismiss="modal">{{
data-bs-dismiss="modal">{{ $t('home.Close') }}</button> $t('home.Close') }}</button>
</div> </div>
</div> </div>
</div> </div>
@ -190,12 +193,12 @@
<template v-if="!limitSettingLoading"> <template v-if="!limitSettingLoading">
<div class="row mb-3"> <div class="row mb-3">
<label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }} </label> <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }}
</label>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="inputCurrentLimit" <input type="text" class="form-control" id="inputCurrentLimit"
aria-describedby="currentLimitType" v-model="currentLimitRelative" aria-describedby="currentLimitType" v-model="currentLimitRelative" disabled />
disabled />
<span class="input-group-text" id="currentLimitType">%</span> <span class="input-group-text" id="currentLimitType">%</span>
</div> </div>
</div> </div>
@ -227,7 +230,8 @@
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit') }}</label> <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit')
}}</label>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="input-group"> <div class="input-group">
<input type="number" name="inputTargetLimit" class="form-control" <input type="number" name="inputTargetLimit" class="form-control"
@ -237,11 +241,14 @@
data-bs-toggle="dropdown" aria-expanded="false">{{ targetLimitTypeText data-bs-toggle="dropdown" aria-expanded="false">{{ targetLimitTypeText
}}</button> }}</button>
<ul class="dropdown-menu dropdown-menu-end"> <ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{ $t('home.Relative') }}</a></li> <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{
<li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{ $t('home.Absolute') }}</a></li> $t('home.Relative') }}</a></li>
<li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{
$t('home.Absolute') }}</a></li>
</ul> </ul>
</div> </div>
<div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert" v-html="$t('home.LimitHint')"></div> <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert"
v-html="$t('home.LimitHint')"></div>
</div> </div>
</div> </div>
</template> </template>
@ -249,11 +256,14 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{ $t('home.SetPersistent') }}</button> <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(true)">{{
$t('home.SetPersistent') }}</button>
<button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{ $t('home.SetNonPersistent') }}</button> <button type="submit" class="btn btn-danger" @click="onSetLimitSettings(false)">{{
$t('home.SetNonPersistent') }}</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close') }}</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('home.Close')
}}</button>
</div> </div>
</form> </form>
</div> </div>
@ -280,14 +290,15 @@
<template v-if="!powerSettingLoading"> <template v-if="!powerSettingLoading">
<div class="row mb-3 align-items-center"> <div class="row mb-3 align-items-center">
<label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus') }}</label> <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus')
}}</label>
<div class="col"> <div class="col">
<span class="badge" :class="{ <span class="badge" :class="{
'text-bg-danger': successCommandPower == 'Failure', 'text-bg-danger': successCommandPower == 'Failure',
'text-bg-warning': successCommandPower == 'Pending', 'text-bg-warning': successCommandPower == 'Pending',
'text-bg-success': successCommandPower == 'Ok', 'text-bg-success': successCommandPower == 'Ok',
'text-bg-secondary': successCommandPower == 'Unknown', 'text-bg-secondary': successCommandPower == 'Unknown',
}"> }">
{{ $t('home.' + successCommandPower) }} {{ $t('home.' + successCommandPower) }}
</span> </span>
</div> </div>
@ -314,7 +325,6 @@
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">