Fix Broadlink labels (#1606)

GladysAssistant · Oct 3, 2022 · a1e079e · a1e079e
1 parent 980d721
commit a1e079e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -913,10 +913,10 @@
         "learnFailed": "Impossible de passer en mode apprentissage.",
         "selectFeatureLabel": "Choisissez une fonctionnalité de la liste ou cliquez sur le bouton suivant pour entrer dans le mode apprentissage. Le mode apprentissage vous permet d'enregistrer toutes les commandes une par une, de manière automatisée.",
         "selectedFeatureLabel": "Fonctionnalité sélectionnée",
-        "selectActionLabel": "La fonctionnalité <b>{{feature}}</b> is sélectionnée. Sélectionnez une action dans la liste ci-dessous pour activer la capture.",
-        "selectedFeatureInfoLabel": "La fonctionnalité <b>{{feature}}</b> is sélectionnée.",
-        "unselectedActionInfoLabel": "La fonctionnalité <b>{{feature}}</b> is sélectionnée, merci de sélectionner une action pour activer la capture.",
-        "selectedActionInfoLabel": "La fonctionnalité <b>{{feature}}</b> is sélectionnée, avec l'action <b>{{action}}</b>.",
+        "selectActionLabel": "La fonctionnalité <b>{{feature}}</b> est sélectionnée. Sélectionnez une action dans la liste ci-dessous pour activer la capture.",
+        "selectedFeatureInfoLabel": "La fonctionnalité <b>{{feature}}</b> est sélectionnée.",
+        "unselectedActionInfoLabel": "La fonctionnalité <b>{{feature}}</b> est sélectionnée, merci de sélectionner une action pour activer la capture.",
+        "selectedActionInfoLabel": "La fonctionnalité <b>{{feature}}</b> est sélectionnée, avec l'action <b>{{action}}</b>.",
         "testError": "Une erreur est survenue lors du test de la fonctionnalité, vérifiez votre matériel.",
         "peripheralSelectLabel": "{{name}} ({{address}})",
         "testLabel": "Tester",

diff --git a/front/src/routes/integration/all/broadlink/remote-page/RemoteFeatureEditionPanel.jsx b/front/src/routes/integration/all/broadlink/remote-page/RemoteFeatureEditionPanel.jsx
@@ -1,5 +1,5 @@
 import { Component } from 'preact';
-import { MarkupText, Text } from 'preact-i18n';
+import { MarkupText, Text, translate } from 'preact-i18n';
 
 import { WEBSOCKET_MESSAGE_TYPES } from '../../../../../../../server/utils/constants';
 
@@ -8,6 +8,29 @@ import { ACTIONS } from '../../../../../../../server/services/broadlink/lib/util
 import get from 'get-value';
 import { MANAGED_FEATURES } from './features';
 
+const renderSelectedAction = (intl, category, selectedFeature, selectedValue) => {
+  const action = translate(
+    `integration.broadlink.setup.features.${category}.${selectedFeature}`,
+    intl && intl.scope,
+    intl && intl.dictionary,
+    { selectedValue },
+    selectedValue,
+    `${selectedValue}`
+  );
+
+  return (
+    <div class="alert alert-info">
+      <MarkupText
+        id="integration.broadlink.setup.selectedActionInfoLabel"
+        fields={{
+          feature: <Text id={`deviceFeatureCategory.${category}.${selectedFeature}`} />,
+          action
+        }}
+      />
+    </div>
+  );
+};
+
 class RemoteFeatureEditionPanel extends Component {
   cancelSelection = () => {
     if (this.props.learning) {
@@ -216,25 +239,9 @@ class RemoteFeatureEditionPanel extends Component {
                 />
               </div>
             )}
-            {hasActions && hasSelectedValue && (
-              <div class="alert alert-info">
-                <MarkupText
-                  id="integration.broadlink.setup.selectedActionInfoLabel"
-                  fields={{
-                    feature: <Text id={`deviceFeatureCategory.${category}.${selectedFeature}`} />,
-                    action: (
-                      <Text
-                        id={`integration.broadlink.setup.features.${category}.${selectedFeature}`}
-                        plural={selectedValue}
-                        fields={{ selectedValue }}
-                      >
-                        {`${selectedValue}`}
-                      </Text>
-                    )
-                  }}
-                />
-              </div>
-            )}
+            {hasActions &&
+              hasSelectedValue &&
+              renderSelectedAction(props.intl, category, selectedFeature, selectedValue)}
             {hasActions && !hasSelectedValue && (
               <div class="alert alert-info">
                 <MarkupText