Skip to content

Commit

Permalink
Support simple and advanced mode for EM initial values config (frontend)
Browse files Browse the repository at this point in the history
fix #633
  • Loading branch information
fracz committed Dec 27, 2022
1 parent 625d6d0 commit e7d4c55
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 32 deletions.
1 change: 1 addition & 0 deletions src/SuplaBundle/Resources/translations/messages.pl.yml
Original file line number Diff line number Diff line change
Expand Up @@ -638,6 +638,7 @@ Sensors: Czujniki
Server address: Adres serwera
Server unreachable: Serwer nieosiągalny
Service temporarily unavailable: Usługa tymczasowo niedostępna
Set different values for each phase: Ustal inną wartość dla każdej fazy
Set value added: Ustal wartość dodaną
Setting the number of attempts to 1 disables the retrying behavior completely.: Ustawienie liczby prób poniżej 2 może skutkować tym, że zamknięcie lub otwarcie nie dojdzie do skutku.
Show my limits: Pokaż moje limity
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<template>
<div>
<dl v-if="advancedModeAvailable" class="mb-3">
<dd>{{ $t('Set different values for each phase') }}</dd>
<dt class="text-center">
<Toggler v-model="advancedMode"/>
</dt>
</dl>
<div v-if="advancedMode">
<div class="form-group" v-for="phaseNumber in enabledPhases" :key="`phase-${phaseNumber}`">
<label :for="`initial-value-${phaseNumber}`">{{ $t('Phase {phaseNumber}', {phaseNumber}) }}</label>
<span class="input-group">
<input type="number"
step="0.001"
min="-10000000"
:id="`initial-value-${phaseNumber}`"
max="10000000"
class="form-control"
v-model="value[phaseNumber]">
<span class="input-group-addon">
kWh
</span>
</span>
</div>
</div>
<div class="form-group" v-else>
<label for="initial-value">{{ $t('Value added') }}</label>
<span class="input-group">
<input type="number"
step="0.001"
min="-10000000"
id="initial-value"
max="10000000"
class="form-control"
v-model="value"
@change="$emit('change')">
<span class="input-group-addon">
kWh
</span>
</span>
</div>
</div>
</template>

<script>
import Toggler from "@/common/gui/toggler";
export default {
components: {Toggler},
props: {
channel: Object,
value: [Number, Object],
counterName: String,
},
data() {
return {};
},
methods: {},
computed: {
advancedMode: {
get() {
return typeof this.value === 'object';
},
set(value) {
if (value) {
const defaultInitialValue = this.value || 0;
const valueForPhases = {};
for (let phaseNo of this.enabledPhases) {
valueForPhases['' + phaseNo] = defaultInitialValue;
}
this.$emit('input', valueForPhases);
} else {
const defaultInitialValue = this.value[this.enabledPhases[0]] || 0;
this.$emit('input', defaultInitialValue);
}
}
},
enabledPhases() {
return this.channel.config.enabledPhases || [1, 2, 3];
},
advancedModeAvailable() {
return !['forwardActiveEnergyBalanced', 'reverseActiveEnergyBalanced'].includes(this.counterName);
}
}
};
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,26 @@
</dl>
<modal-confirm v-if="settingInitialValues"
:header="$t('Set value added')"
:loading="loading"
class="modal-800"
@confirm="saveChanges()"
@cancel="settingInitialValues = false">
<div class="initial-values-fields">
<div class="form-group"
:key="counterName"
v-for="counterName in countersAvailable">
<label :for="'initial-value-' + counterName">{{ $t(labels[counterName] || counterName) }}</label>
<span class="input-group">
<input type="number"
step="0.001"
min="-10000000"
:id="'initial-value-' + counterName"
max="10000000"
class="form-control"
v-model="initialValues[counterName]"
@change="$emit('change')">
<span class="input-group-addon">
kWh
</span>
</span>
<div class="row mb-5">
<div class="col-xs-4">
<a v-for="counterName in countersAvailable" :key="`link-${counterName}`"
@click="currentCounter = counterName"
:class="['btn btn-block btn-wrapped ellipsis', {'btn-green': currentCounter === counterName, 'btn-white': currentCounter !== counterName}]">
{{ $t(labels[counterName] || counterName) }}
</a>
</div>
<div class="col-xs-8">
<div>
<h5 class="m-0 mb-2">{{ $t(labels[currentCounter] || currentCounter) }}</h5>
<ChannelParamsElectricityMeterInitialValue
:channel="channel"
:counter-name="currentCounter"
v-model="initialValues[currentCounter]"
:key="`form-${currentCounter}`"/>
</div>
</div>
</div>
<channel-params-meter-initial-values-mode v-model="addToHistory"></channel-params-meter-initial-values-mode>
Expand All @@ -44,15 +42,17 @@

<script>
import ChannelParamsMeterInitialValuesMode from "./channel-params-meter-initial-values-mode";
import ChannelParamsElectricityMeterInitialValue from "@/channels/params/channel-params-electricity-meter-initial-value";
export default {
components: {ChannelParamsMeterInitialValuesMode},
components: {ChannelParamsElectricityMeterInitialValue, ChannelParamsMeterInitialValuesMode},
props: ['channel'],
data() {
return {
settingInitialValues: false,
initialValues: {},
addToHistory: undefined,
currentCounter: undefined,
labels: {
forwardActiveEnergy: 'Forward active energy', // i18n
reverseActiveEnergy: 'Reverse active energy', // i18n
Expand All @@ -71,9 +71,10 @@
this.settingInitialValues = true;
for (const counterName of this.countersAvailable) {
if (!this.initialValues[counterName]) {
this.initialValues[counterName] = 0;
this.$set(this.initialValues, counterName, 0);
}
}
this.currentCounter = this.countersAvailable[0];
},
saveChanges() {
this.channel.config.electricityMeterInitialValues = this.initialValues;
Expand All @@ -97,15 +98,5 @@
scoped>
@import '../../styles/mixins';
.initial-values-fields {
display: flex;
flex-wrap: wrap;
.form-group {
min-width: 50%;
@include on-xs-and-down {
width: 100%;
}
}
}
</style>
6 changes: 5 additions & 1 deletion src/frontend/src/styles/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,15 @@ h1 {
}
}

h1, h2, h3, h4 {
h1, h2, h3, h4, h5 {
font-family: $supla-font-special;
word-break: break-word;
}

h5 {
font-size: 1.3em;
}

a {
color: $supla-green;
transition: color .3s;
Expand Down

0 comments on commit e7d4c55

Please sign in to comment.