fix: localisation of configurable names closes #487

slipx06 · Jun 30, 2024 · 01b337e · 01b337e
1 parent b559188
commit 01b337e
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 32 deletions.
diff --git a/dist/sunsynk-power-flow-card.js b/dist/sunsynk-power-flow-card.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sunsynk-power-flow-card",
-  "version": "4.43.1",
+  "version": "4.43.2",
   "description": "A customizable Home Assistant card to emulate the Sunsynk System flow that's displayed on the Inverter screen.",
   "main": "sunsynk-power-flow-card.js",
   "scripts": {

diff --git a/src/cards/compact-card.ts b/src/cards/compact-card.ts
@@ -227,12 +227,12 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                     <text id="daily_grid_buy" x="5" y="282.1" class="st3 left-align"
                           fill="${data.gridShowDailyBuy !== true ? 'transparent' : `${data.gridColour}`}"
                           display="${!config.show_grid ? 'none' : ''}">
-                        ${config.grid.label_daily_grid_buy}
+                        ${config.grid.label_daily_grid_buy || localize('common.daily_grid_buy')}
                     </text>
                     <text id="daily_grid_sell" x="5" y="179" class="st3 left-align"
                           fill="${data.gridShowDailySell !== true ? 'transparent' : `${data.gridColour}`}"
                           display="${!config.show_grid ? 'none' : ''}">
-                        ${config.grid.label_daily_grid_sell}
+                        ${config.grid.label_daily_grid_sell || localize('common.daily_grid_sell')}
                     </text>
                     <text id="daily_solar" x="200" y="40" class="st3 left-align"
                           display="${config.solar.display_mode === 1 ? '' : 'none'}"
@@ -251,31 +251,34 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                     </text>
                     <text x="${config.solar.mppts === 1 ? '230' : '179'}" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar ? 'none' : ''}" fill="${data.solarColour}">
-                        ${config.solar.pv1_name}
+                        ${config.solar.pv1_name || localize('common.pv1_name') }
                     </text>
                     <text x="${config.solar.mppts === 1 ? '230' : '179'}" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}" fill="${data.solarColour}">
                         ${data.PV1Efficiency}%
                     </text>
                     <text x="281" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar || config.solar.mppts === 1 ? 'none' : ''}"
-                          fill="${data.solarColour}">${config.solar.pv2_name}
+                          fill="${data.solarColour}">
+                        ${config.solar.pv2_name || localize('common.pv2_name')}
                     </text>
                     <text x="281" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || config.solar.mppts === 1 || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
                           fill="${data.solarColour}">${data.PV2Efficiency}%
                     </text>
                     <text x="105" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar || [1, 2].includes(config.solar.mppts) ? 'none' : ''}"
-                          fill="${data.solarColour}">${config.solar.pv3_name}
+                          fill="${data.solarColour}">
+                        ${config.solar.pv3_name || localize('common.pv3_name')}
                     </text>
                     <text x="105" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || [1, 2].includes(config.solar.mppts) || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
                           fill="${data.solarColour}">${data.PV3Efficiency}%
                     </text>
                     <text x="357" y="94" class="st3 st8 right-align"
                           display="${!config.show_solar || [1, 2, 3].includes(config.solar.mppts) ? 'none' : ''}"
-                          fill="${data.solarColour}">${config.solar.pv4_name}
+                          fill="${data.solarColour}">
+                        ${config.solar.pv4_name || localize('common.pv4_name')}
                     </text>
                     <text x="357" y="106" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 right-align' : 'st12'}"
                           display="${!config.show_solar || [1, 2, 3].includes(config.solar.mppts) || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
@@ -313,35 +316,35 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                     </text>
                     <text id="es-load1" x="441" y="108" class="st3"
                           display="${[1, 2, 3].includes(data.additionalLoad) ? '' : 'none'}"
-                          fill="${data.dynamicColourEssentialLoad1}">${config.load?.load1_name ? `${config.load.load1_name}` : ''}
+                          fill="${data.dynamicColourEssentialLoad1}">${config.load.load1_name}
                     </text>
                     <text id="es-load2" x="441" y="330.5" class="st3"
                           display="${data.additionalLoad === 2 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad2}">
-                        ${config.load?.load2_name ? `${config.load.load2_name}` : ''}
+                        ${config.load.load2_name}
                     </text>
                     <text id="es-load1" x="435" y="136" class="st3 st8 right-align"
                           display="${data.additionalLoad === 4 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad1}">
-                        ${config.load?.load1_name ? `${config.load.load1_name}` : ''}
+                        ${config.load.load1_name}
                     </text>
                     <text id="es-load2" x="448" y="136" class="st3 st8 left-align"
                           display="${data.additionalLoad === 4 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad2}">
-                        ${config.load?.load2_name ? `${config.load.load2_name}` : ''}
+                        ${config.load.load2_name}
                     </text>
                     <text id="es-load2" x="433" y="320" class="st3 st8 right-align"
                           display="${data.additionalLoad === 3 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad2}">
-                        ${config.load?.load2_name ? `${config.load.load2_name}` : ''}
+                        ${config.load.load2_name}
                     </text>
                     <text id="es-load3" x="448" y="320" class="st3 st8 left-align"
                           display="${data.additionalLoad === 3 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad3}">
-                        ${config.load?.load3_name ? `${config.load.load3_name}` : ''}
+                        ${config.load.load3_name}
                     </text>
                     <text id="es-load3" x="435" y="320" class="st3 st8 right-align"
                           display="${data.additionalLoad === 4 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad3}">
-                        ${config.load?.load3_name ? `${config.load.load3_name}` : ''}
+                        ${config.load.load3_name}
                     </text>
                     <text id="es-load4" x="448" y="320" class="st3 st8 left-align"
                           display="${data.additionalLoad === 4 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad4}">
-                        ${config.load?.load4_name ? `${config.load.load4_name}` : ''}
+                        ${config.load.load4_name}
                     </text>
                     <text id="load-power-L1" x="375" y="241"
                           display="${config.inverter.three_phase && config.entities?.load_power_L1 ? '' : 'none'}"
@@ -384,7 +387,8 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                         ${data.shutdownOffGrid}%
                     </text>
                     <text x="5" y="${config.grid.show_daily_buy ? '294' : '267'}" class="st3 st8 left-align" fill="${data.gridColour}"
-                          display="${!config.show_grid ? 'none' : ''}">${config.grid.grid_name}
+                          display="${!config.show_grid ? 'none' : ''}">
+                        ${config.grid.grid_name || localize('common.grid_name')}
                     </text>
 
                     <circle id="standby" cx="220" cy="260" r="3.5" fill="${data.inverterStateColour}"/>

diff --git a/src/cards/full-card.ts b/src/cards/full-card.ts
@@ -290,31 +290,34 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                     </text>
                     <text x="0" y="78.5" class="st3 st8 left-align"
                           display="${!config.show_solar ? 'none' : ''}" fill="${data.solarColour}">
-                        ${config.solar.pv1_name}
+                        ${config.solar.pv1_name || localize('common.pv1_name')}
                     </text>
                     <text x="0" y="90" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 left-align' : 'st12'}"
                           display="${!config.show_solar || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}" fill="${data.solarColour}">
                         ${data.PV1Efficiency}%
                     </text>
                     <text x="99" y="78.5" class="st3 st8 left-align"
                           display="${!config.show_solar || config.solar.mppts === 1 ? 'none' : ''}"
-                          fill="${data.solarColour}">${config.solar.pv2_name}
+                          fill="${data.solarColour}">
+                        ${config.solar.pv2_name || localize('common.pv2_name')}
                     </text>
                     <text x="99" y="90" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 left-align' : 'st12'}"
                           display="${!config.show_solar || config.solar.mppts === 1 || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
                           fill="${data.solarColour}">${data.PV2Efficiency}%
                     </text>
                     <text x="0" y="139" class="st3 st8 left-align"
                           display="${!config.show_solar || [1, 2].includes(config.solar.mppts) ? 'none' : ''}"
-                          fill="${data.solarColour}">${config.solar.pv3_name}
+                          fill="${data.solarColour}">
+                        ${config.solar.pv3_name || localize('common.pv3_name')}
                     </text>
                     <text x="0" y="150" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 left-align' : 'st12'}"
                           display="${!config.show_solar || [1, 2].includes(config.solar.mppts) || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
                           fill="${data.solarColour}">${data.PV3Efficiency}%
                     </text>
                     <text x="99" y="139" class="st3 st8 left-align"
                           display="${!config.show_solar || [1, 2, 3].includes(config.solar.mppts) ? 'none' : ''}"
-                          fill="${data.solarColour}">${config.solar.pv4_name}
+                          fill="${data.solarColour}">
+                        ${config.solar.pv4_name || localize('common.pv4_name')}
                     </text>
                     <text x="99" y="150" class="${[2, 3].includes(config.solar.efficiency) ? 'st3 st8 left-align' : 'st12'}"
                           display="${!config.show_solar || [1, 2, 3].includes(config.solar.mppts) || [0, 1].includes(config.solar.efficiency) ? 'none' : ''}"
@@ -325,7 +328,8 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                           fill="${data.solarColour}">${data.totalPVEfficiency}%
                     </text>
                     <text x="421" y="377" class="st3 st8" fill="${data.gridColour}"
-                          display="${!config.show_grid ? 'none' : ''}">${config.grid.grid_name}
+                          display="${!config.show_grid ? 'none' : ''}">
+                        ${config.grid.grid_name || localize('common.grid_name')}
                     </text>
                     <text x="167" y="306" class="st3 left-align" fill="${data.inverterColour}">${data.inverterStateMsg}
                     </text>
@@ -341,11 +345,13 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                     </text>
                     <text x="411" y="157" class="st3 st8"
                           display="${[0].includes(data.additionalLoad) || (!data.showAux && [1, 2].includes(data.additionalLoad)) ? '' : 'none'}"
-                          fill="${data.loadColour}">${config.load.essential_name}
+                          fill="${data.loadColour}">
+                        ${config.load.essential_name || localize('common.essential')}
                     </text>
                     <text id="ess_load" x="411" y="130" class="st3 st8"
                           display="${([1,2].includes(data.additionalLoad) && data.showAux) || (!data.showAux && [4].includes(data.additionalLoad)) ? '' : 'none'}"
-                          fill="${data.loadColour}">${config.load.essential_name}
+                          fill="${data.loadColour}">
+                        ${config.load.essential_name || localize('common.essential')}
                     </text>
                     <text id="ess-load1" x="416" y="${!data.showAux ? 70 : 181}" class="st3 left-align"
                           display="${data.additionalLoad === 1 ? '' : 'none'}" fill="${data.dynamicColourEssentialLoad1}">
@@ -412,7 +418,7 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                           class="st3 left-align"
                           fill="${data.gridShowDailyBuy !== true ? 'transparent' : `${data.gridColour}`}"
                           display="${!config.show_grid ? 'none' : ''}">
-                        ${config.grid.label_daily_grid_buy}
+                        ${config.grid.label_daily_grid_buy || localize('common.daily_grid_buy')}
                     </text>
                     <text id="daily_grid_sell" 
                           x="${!data.showNonessential ? '311' : '347'}"
@@ -422,17 +428,17 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                           class="st3 left-align"
                           fill="${data.gridShowDailySell !== true ? 'transparent' : `${data.gridColour}`}"
                           display="${!config.show_grid ? 'none' : ''}">
-                        ${config.grid.label_daily_grid_sell}
+                        ${config.grid.label_daily_grid_sell || localize('common.daily_grid_sell')}
                     </text>
                     <text id="aux_one" x="411" y="82" class="st3 st8"
                           display="${!data.showAux || [1, 2].includes(data.additionalAuxLoad) ? 'none' : ''}"
                           fill="${data.auxStatus === 'on' || data.auxStatus === '1' ? `${data.auxDynamicColour}` : `${data.auxOffColour}`}">
-                        ${config.load.aux_name}
+                        ${config.load.aux_name || localize('common.aux_name')}
                     </text>
                     <text id="noness" x="340" y="377" class="st3 st8"
                           display="${!config.show_grid || !data.showNonessential ? 'none' : ''}"
                           fill="${data.gridColour}">
-                        ${config.grid.nonessential_name}
+                        ${config.grid.nonessential_name || localize('common.nonessential_name')}
                     </text>
                     <text id="noness1" x="340" y="338" class="st3 st8"
                           display="${!config.show_grid || !data.showNonessential || [0, 2, 3].includes(data.nonessentialLoads) ? 'none' : ''}"
@@ -488,7 +494,8 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                           x="${[1, 2].includes(data.additionalAuxLoad) ? '238' : '238'}" y="24"
                           class="st3 left-align"
                           display="${!data.showAux || data.showDailyAux !== true ? 'none' : ''}"
-                          fill="${data.auxDynamicColour}">${config.load.aux_daily_name}
+                          fill="${data.auxDynamicColour}">
+                        ${config.load.aux_daily_name || localize('common.daily_aux')}
                     </text>
                     <text id="load-power-3P" x="237" y="142"
                           display="${config.inverter.three_phase && config.entities?.load_power_L1 ? '' : 'none'}"

diff --git a/src/defaults.ts b/src/defaults.ts
@@ -1,4 +1,4 @@
-import { localize } from "./localize/localize";
+import {localize} from "./localize/localize";
 import {InverterModel} from './types';
 
 
@@ -81,8 +81,10 @@ export default {
         essential_name: localize('common.essential'),
         load1_icon: 'default',
         load2_icon: 'default',
-        load1_name: localize('common.load1_name'),
-        load2_name: localize('common.load2_name'),
+        load1_name: '',
+        load2_name: '',
+        load3_name: '',
+        load4_name: '',
         auto_scale: true,
         path_threshold: 100,
     },