Skip to content

Commit

Permalink
fix layout for vedirect live data on small devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@helgeerbe
helgeerbe committed Apr 13, 2023
1 parent 1dc73f9 commit b00ca02
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 112 deletions.
222 changes: 114 additions & 108 deletions webapp/src/components/VedirectView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,128 +59,134 @@
<div class="card" :class="{ 'border-info': true }">
<div class="card-header text-bg-info">{{ $t('vedirecthome.DeviceInfo') }}</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{{ $t('vedirecthome.LoadOutputState') }}</th>
<td style="text-align: right">{{vedirectData.LOAD}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.StateOfOperation') }}</th>
<td style="text-align: right">{{vedirectData.CS}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.TrackerOperationMode') }}</th>
<td style="text-align: right">{{vedirectData.MPPT}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.OffReason') }}</th>
<td style="text-align: right">{{vedirectData.OR}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.ErrorCode') }}</th>
<td style="text-align: right">{{vedirectData.ERR}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.DaySequenceNumber') }}</th>
<td style="text-align: right">{{vedirectData.HSDS.v}}</td>
<td>{{vedirectData.HSDS.u}}</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{{ $t('vedirecthome.LoadOutputState') }}</th>
<td style="text-align: right">{{vedirectData.LOAD}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.StateOfOperation') }}</th>
<td style="text-align: right">{{vedirectData.CS}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.TrackerOperationMode') }}</th>
<td style="text-align: right">{{vedirectData.MPPT}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.OffReason') }}</th>
<td style="text-align: right">{{vedirectData.OR}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.ErrorCode') }}</th>
<td style="text-align: right">{{vedirectData.ERR}}</td>
<td></td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.DaySequenceNumber') }}</th>
<td style="text-align: right">{{vedirectData.HSDS.v}}</td>
<td>{{vedirectData.HSDS.u}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col order-1">
<div class="card" :class="{ 'border-info': false }">
<div class="card-header">{{ $t('vedirecthome.Battery') }}</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{{ $t('vedirecthome.BatteryVoltage') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.V.v)}}</td>
<td>{{vedirectData.V.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.BatteryCurrent') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.I.v)}}</td>
<td>{{vedirectData.I.u}}</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{{ $t('vedirecthome.BatteryVoltage') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.V.v)}}</td>
<td>{{vedirectData.V.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.BatteryCurrent') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.I.v)}}</td>
<td>{{vedirectData.I.u}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col order-2">
<div class="card" :class="{ 'border-info': false }">
<div class="card-header">{{ $t('vedirecthome.Panel') }}</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{{ $t('vedirecthome.PanelVoltage') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.VPV.v)}}</td>
<td>{{vedirectData.VPV.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.PanelPower') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.PPV.v)}}</td>
<td>{{vedirectData.PPV.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.YieldTotal') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H19.v)}}</td>
<td>{{vedirectData.H19.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.YieldToday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H20.v)}}</td>
<td>{{vedirectData.H20.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.MaximumPowerToday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H21.v)}}</td>
<td>{{vedirectData.H21.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.YieldYesterday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H22.v)}}</td>
<td>{{vedirectData.H22.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.MaximumPowerYesterday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H23.v)}}</td>
<td>{{vedirectData.H23.u}}</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">{{ $t('vedirecthome.Property') }}</th>
<th style="text-align: right" scope="col">{{ $t('vedirecthome.Value') }}</th>
<th scope="col">{{ $t('vedirecthome.Unit') }}</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">{{ $t('vedirecthome.PanelVoltage') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.VPV.v)}}</td>
<td>{{vedirectData.VPV.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.PanelPower') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.PPV.v)}}</td>
<td>{{vedirectData.PPV.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.YieldTotal') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H19.v)}}</td>
<td>{{vedirectData.H19.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.YieldToday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H20.v)}}</td>
<td>{{vedirectData.H20.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.MaximumPowerToday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H21.v)}}</td>
<td>{{vedirectData.H21.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.YieldYesterday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H22.v)}}</td>
<td>{{vedirectData.H22.u}}</td>
</tr>
<tr>
<th scope="row">{{ $t('vedirecthome.MaximumPowerYesterday') }}</th>
<td style="text-align: right">{{formatNumber(vedirectData.H23.v)}}</td>
<td>{{vedirectData.H23.u}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions webapp/vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,20 +52,20 @@ export default defineConfig({
server: {
proxy: {
'^/api': {
target: 'http://192.168.178.78/'
target: 'http://192.168.178.87/'
},
'^/livedata': {
target: 'ws://192.168.178.78/',
target: 'ws://192.168.178.87/',
ws: true,
changeOrigin: true
},
'^/vedirectlivedata': {
target: 'ws://192.168.178.78/',
target: 'ws://192.168.178.87/',
ws: true,
changeOrigin: true
},
'^/console': {
target: 'ws://192.168.20.110/',
target: 'ws://192.168.178.87/',
ws: true,
changeOrigin: true
}
Expand Down
Binary file modified webapp_dist/js/app.js.gz
View file
Binary file not shown.

0 comments on commit b00ca02

Please sign in to comment.