webapp: DPL admin view fixups

* avoid v-show, use v-if * do not add space to top of first card * fix table with managed inverters
hoylabs · Oct 31, 2024 · 4766f79 · 4766f79
1 parent 83693be
commit 4766f79
Showing 1 changed file with 53 additions and 53 deletions.
diff --git a/webapp/src/views/PowerLimiterAdminView.vue b/webapp/src/views/PowerLimiterAdminView.vue
@@ -30,65 +30,67 @@
         </CardElement>
 
         <form @submit="savePowerLimiterConfig" v-if="!configAlert">
-            <CardElement :text="$t('powerlimiteradmin.General')" textVariant="text-bg-primary" add-space>
+            <CardElement
+                :text="$t('powerlimiteradmin.General')"
+                textVariant="text-bg-primary"
+                :add-space="getConfigHints().length > 0"
+            >
                 <InputElement
                     :label="$t('powerlimiteradmin.Enable')"
                     v-model="powerLimiterConfigList.enabled"
                     type="checkbox"
                     wide
                 />
 
-                <InputElement
-                    v-show="isEnabled()"
-                    :label="$t('powerlimiteradmin.VerboseLogging')"
-                    v-model="powerLimiterConfigList.verbose_logging"
-                    type="checkbox"
-                    wide
-                />
+                <template v-if="isEnabled()">
+                    <InputElement
+                        :label="$t('powerlimiteradmin.VerboseLogging')"
+                        v-model="powerLimiterConfigList.verbose_logging"
+                        type="checkbox"
+                        wide
+                    />
 
-                <InputElement
-                    v-show="isEnabled() && hasPowerMeter()"
-                    :label="$t('powerlimiteradmin.TargetPowerConsumption')"
-                    :tooltip="$t('powerlimiteradmin.TargetPowerConsumptionHint')"
-                    v-model="powerLimiterConfigList.target_power_consumption"
-                    postfix="W"
-                    type="number"
-                    wide
-                />
+                    <InputElement
+                        v-if="hasPowerMeter()"
+                        :label="$t('powerlimiteradmin.TargetPowerConsumption')"
+                        :tooltip="$t('powerlimiteradmin.TargetPowerConsumptionHint')"
+                        v-model="powerLimiterConfigList.target_power_consumption"
+                        postfix="W"
+                        type="number"
+                        wide
+                    />
 
-                <InputElement
-                    v-show="isEnabled()"
-                    :label="$t('powerlimiteradmin.BaseLoadLimit')"
-                    :tooltip="$t('powerlimiteradmin.BaseLoadLimitHint')"
-                    v-model="powerLimiterConfigList.base_load_limit"
-                    placeholder="200"
-                    postfix="W"
-                    type="number"
-                    min="0"
-                    wide
-                />
+                    <InputElement
+                        :label="$t('powerlimiteradmin.BaseLoadLimit')"
+                        :tooltip="$t('powerlimiteradmin.BaseLoadLimitHint')"
+                        v-model="powerLimiterConfigList.base_load_limit"
+                        placeholder="200"
+                        postfix="W"
+                        type="number"
+                        min="0"
+                        wide
+                    />
 
-                <InputElement
-                    v-show="isEnabled()"
-                    :label="$t('powerlimiteradmin.TargetPowerConsumptionHysteresis')"
-                    :tooltip="$t('powerlimiteradmin.TargetPowerConsumptionHysteresisHint')"
-                    v-model="powerLimiterConfigList.target_power_consumption_hysteresis"
-                    postfix="W"
-                    type="number"
-                    min="1"
-                    wide
-                />
+                    <InputElement
+                        :label="$t('powerlimiteradmin.TargetPowerConsumptionHysteresis')"
+                        :tooltip="$t('powerlimiteradmin.TargetPowerConsumptionHysteresisHint')"
+                        v-model="powerLimiterConfigList.target_power_consumption_hysteresis"
+                        postfix="W"
+                        type="number"
+                        min="1"
+                        wide
+                    />
 
-                <InputElement
-                    v-show="isEnabled()"
-                    :label="$t('powerlimiteradmin.TotalUpperPowerLimit')"
-                    :tooltip="$t('powerlimiteradmin.TotalUpperPowerLimitHint')"
-                    v-model="powerLimiterConfigList.total_upper_power_limit"
-                    postfix="W"
-                    type="number"
-                    min="1"
-                    wide
-                />
+                    <InputElement
+                        :label="$t('powerlimiteradmin.TotalUpperPowerLimit')"
+                        :tooltip="$t('powerlimiteradmin.TotalUpperPowerLimitHint')"
+                        v-model="powerLimiterConfigList.total_upper_power_limit"
+                        postfix="W"
+                        type="number"
+                        min="1"
+                        wide
+                    />
+                </template>
             </CardElement>
 
             <CardElement
@@ -116,16 +118,14 @@
                 </div>
                 <div class="table-responsive" v-if="powerLimiterConfigList.inverters.length > 0">
                     <table class="table">
-                        <thead>
+                        <tbody>
                             <tr>
                                 <th>{{ $t('powerlimiteradmin.InverterLabel') }}</th>
                                 <th>{{ $t('powerlimiteradmin.PowerSource') }}</th>
                                 <th>{{ $t('powerlimiteradmin.LowerPowerLimit') }}</th>
                                 <th>{{ $t('powerlimiteradmin.UpperPowerLimit') }}</th>
                                 <th></th>
                             </tr>
-                        </thead>
-                        <tbody>
                             <tr v-for="inverter in powerLimiterConfigList.inverters" v-bind:key="inverter.serial">
                                 <td>{{ inverterLabel(inverter.serial) }}</td>
                                 <td v-if="inverter.is_solar_powered">
@@ -435,7 +435,7 @@
         </div>
 
         <InputElement
-            v-show="hasPowerMeter()"
+            v-if="hasPowerMeter()"
             :label="$t('powerlimiteradmin.InverterIsBehindPowerMeter')"
             v-model="editInverter.is_behind_power_meter"
             :tooltip="$t('powerlimiteradmin.InverterIsBehindPowerMeterHint')"
@@ -451,7 +451,7 @@
         />
 
         <InputElement
-            v-show="editInverter.is_solar_powered"
+            v-if="editInverter.is_solar_powered"
             :label="$t('powerlimiteradmin.UseOverscalingToCompensateShading')"
             :tooltip="$t('powerlimiteradmin.UseOverscalingToCompensateShadingHint')"
             v-model="editInverter.use_overscaling_to_compensate_shading"