* (bluefox) jQui Radio widget was migrated to react

ioBroker · Dec 9, 2023 · c1d4c38 · c1d4c38
1 parent 6bbae36
commit c1d4c38
Show file tree

Hide file tree

Showing 18 changed files with 152 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -121,7 +121,7 @@ There are a number of different internal bindings to provide additional informat
 * `login` - if login required or not (e.g., to show/hide logout button)
 * `local_*` - if state name is started from `local_` it will not be reported to ioBroker but will update all widgets, that depends on this state. (Local variable for current browser session)
 
-Note: to use ":" in calculations (e.g. in string formula) use "::" instead.
+Note: to use ":" in calculations (e.g., in string formula) use "::" instead.
 
 **Remember**, that style definitions will be interpreted as bindings, so use `{{style: value}}` or just
 
@@ -172,7 +172,7 @@ If the user changes the view or at the start, the variables will be filled by th
 - `control.data`: project and view name in form `project/view`, e.g. `main/view` (and `ack=true`)
 - `control.command`: `changedView` and `ack=true`
 
-You can write the JSON-string or Object into `control.command` as `{instance: 'AABBCCDD', command: 'cmd', data: 'ddd'}`. In this case, the instance and data will be taken from JSON object.
+You can write the JSON string or Object into `control.command` as `{instance: 'AABBCCDD', command: 'cmd', data: 'ddd'}`. In this case, the instance and data will be taken from JSON object.
 
 Example for javascript adapter:
 
@@ -235,6 +235,7 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
 * (foxriver76) update references to view in widget when view is renamed
 * (bluefox) jQui Toggle icon widget was migrated to react
 * (bluefox) jQui Radio widget was migrated to react
+* (bluefox) jQui Radio List widget was migrated to react
 * (bluefox) Corrected last-change by React widgets
 
 ### 2.9.4 (2023-12-04)

diff --git a/src/package.json b/src/package.json
@@ -71,4 +71,4 @@
         "not ie <= 11",
         "not op_mini all"
     ]
-}
+}
diff --git a/src/public/widgets/jqui.html b/src/public/widgets/jqui.html
@@ -1844,7 +1844,7 @@
     </div>
 </script-->
 
-<script id="tplJquiRadioList"
+<!--script id="tplJquiRadioList"
         type="text/ejs"
         class="vis-tpl"
         data-vis-prev='<div id="prev_tplJquiRadioList" style=" position: relative; text-align: initial;padding: 4px "><div style="font-size: 8px;overflow:visible;height:20px" class="vis-widget_prev ui-selectee ui-selected ui-draggable-handle"> <div class="vis-widget-prev-body"> <div data-o class="ui-buttonset"> <input type="radio" value="0" class="ui-helper-hidden-accessible"><label class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-pressed="false"><span class="ui-button-text">OFF</span></label> <input type="radio" value="1" class="ui-helper-hidden-accessible"><label class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-pressed="false"><span class="ui-button-text">AUTO</span></label> </div> </div> </div>'
@@ -1868,7 +1868,7 @@
             </tr></table>
         </div>
     </div>
-</script>
+</script-->
 
 <script id="tplJquiSelectList"
         type="text/ejs"

diff --git a/src/src/Vis/Widgets/JQui/JQuiInputSet.jsx b/src/src/Vis/Widgets/JQui/JQuiInputSet.jsx
@@ -19,7 +19,6 @@ import PropTypes from 'prop-types';
 import JQuiInput from './JQuiInput';
 
 class JQuiInputSet extends JQuiInput {
-
     static getWidgetInfo() {
         const widgetInfo = JQuiInput.getWidgetInfo();
         const newWidgetInfo = {

diff --git a/src/src/Vis/Widgets/JQui/JQuiRadioList.jsx b/src/src/Vis/Widgets/JQui/JQuiRadioList.jsx
@@ -0,0 +1,62 @@
+/**
+ *  ioBroker.vis
+ *  https://github.com/ioBroker/ioBroker.vis
+ *
+ *  Copyright (c) 2023 Denis Haev https://github.com/GermanBluefox,
+ *  Creative Common Attribution-NonCommercial (CC BY-NC)
+ *
+ *  http://creativecommons.org/licenses/by-nc/4.0/
+ *
+ * Short content:
+ * Licensees may copy, distribute, display and perform the work and make derivative works based on it only if they give the author or licensor the credits in the manner specified by these.
+ * Licensees may copy, distribute, display, and perform the work and make derivative works based on it only for noncommercial purposes.
+ * (Free for non-commercial use).
+ */
+
+import PropTypes from 'prop-types';
+
+// eslint-disable-next-line import/no-cycle
+import JQuiState from './JQuiState';
+
+class JQuiRadioList extends JQuiState {
+    static getWidgetInfo() {
+        const widgetInfo = JQuiState.getWidgetInfo();
+        const newWidgetInfo = {
+            id: 'tplJquiRadioList',
+            visSet: 'jqui',
+            visName: 'Radiobuttons ValueList',
+            visWidgetLabel: 'jqui_radio_list',
+            visPrev: 'widgets/jqui/img/Prev_RadioList.png',
+            visOrder: 15,
+            visAttrs: widgetInfo.visAttrs,
+            visDefaultStyle: {
+                width: 250,
+                height: 45,
+            },
+        };
+
+        // Add note
+        newWidgetInfo.visAttrs[0].fields.unshift({
+            name: '_note',
+            type: 'help',
+            text: 'jqui_state_note',
+        });
+
+        return newWidgetInfo;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getWidgetInfo() {
+        return JQuiRadioList.getWidgetInfo();
+    }
+}
+
+JQuiRadioList.propTypes = {
+    id: PropTypes.string.isRequired,
+    context: PropTypes.object.isRequired,
+    view: PropTypes.string.isRequired,
+    editMode: PropTypes.bool.isRequired,
+    tpl: PropTypes.string.isRequired,
+};
+
+export default JQuiRadioList;
diff --git a/src/src/Vis/Widgets/JQui/JQuiState.jsx b/src/src/Vis/Widgets/JQui/JQuiState.jsx
@@ -38,12 +38,6 @@ import VisRxWidget from '../../visRxWidget';
 import BulkEditor from './BulkEditor';
 
 class JQuiState extends VisRxWidget {
-    constructor(props) {
-        super(props);
-        this.state.value = '';
-        this.state.valueType = null;
-    }
-
     static getWidgetInfo() {
         return {
             id: 'tplJquiButtonState',
@@ -142,21 +136,21 @@ class JQuiState extends VisRxWidget {
                 },
                 {
                     name: 'states',
-                    label: 'group_value',
+                    label: 'jqui_group_value',
                     indexFrom: 1,
                     indexTo: 'count',
                     hidden: data => !!data.percents,
                     fields: [
                         {
                             name: 'value',
                             type: 'text',
-                            label: 'value',
+                            label: 'jqui_value',
                             default: '0',
                         },
                         {
                             name: 'test',
                             type: 'checkbox',
-                            label: 'test',
+                            label: 'jqui_test',
                             onChange: async (field, data, changeData, socket, index) => {
                                 if (data[field.name]) {
                                     let changed = false;
@@ -183,7 +177,7 @@ class JQuiState extends VisRxWidget {
                             name: 'text',
                             default: I18n.t('Value'),
                             type: 'text',
-                            label: 'text',
+                            label: 'jqui_text',
                             hidden: (data, index) => !!data[`onlyIcon${index}`] || data[`value${index}`] === '' || data[`value${index}`] === null || data[`value${index}`] === undefined,
                         },
                         {
@@ -227,7 +221,29 @@ class JQuiState extends VisRxWidget {
     }
 
     async componentDidMount() {
-        super.componentDidMount();
+        await super.componentDidMount();
+
+        // convert old tplJquiRadioList data to JquiState data
+        if (this.props.tpl === 'tplJquiRadioList' && this.state.data && this.state.data.values && this.state.data.texts && this.props.context.onWidgetsChanged) {
+            // convert
+            const values = this.state.data.values.split(';');
+            const texts = this.state.data.texts.split(';');
+            const data = JSON.parse(JSON.stringify(this.state.data));
+            data.values = null;
+            data.texts = null;
+            data.count = values.length;
+            for (let i = 1; i <= values.length; i++) {
+                data[`value${i}`] = values[i - 1];
+                data[`text${i}`] = texts[i - 1];
+                data[`g_states-${i}`] = true;
+            }
+            setTimeout(() => this.props.context.onWidgetsChanged([{
+                wid: this.props.id,
+                view: this.props.view,
+                data,
+            }]), 100);
+        }
+
         if (this.state.rxData.oid && this.state.rxData.oid !== 'nothing_selected') {
             try {
                 const state = await this.props.context.socket.getState(this.state.rxData.oid);

diff --git a/src/src/Vis/Widgets/index.jsx b/src/src/Vis/Widgets/index.jsx
@@ -33,6 +33,7 @@ import JQuiInputSet from './JQui/JQuiInputSet';
 import JQuiBinaryState from './JQui/JQuiBinaryState';
 import JQuiRadio from './JQui/JQuiRadio';
 import JQuiState from './JQui/JQuiState';
+import JQuiRadioList from './JQui/JQuiRadioList';
 import JQuiWriteState from './JQui/JQuiWriteState';
 import JQuiSlider from './JQui/JQuiSlider';
 import JQuiSliderVertical from './JQui/JQuiSliderVertical';
@@ -77,6 +78,7 @@ const WIDGETS = [
     JQuiBinaryState,
     JQuiRadio,
     JQuiState,
+    JQuiRadioList,
     JQuiWriteState,
     JQuiSlider,
     JQuiSliderVertical,

diff --git a/src/src/i18n/de.json b/src/src/i18n/de.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Einheit",
   "jqui_radio_buttons_on_off": "Optionsfelder (ein/aus)",
   "jqui_orientation": "Orientierung",
-  "jqui_not_equal_length": "Nicht gleich breit"
+  "jqui_not_equal_length": "Nicht gleich breit",
+  "jqui_state_note": "Veraltet. Verwenden Sie das Widget „Statuskontrolle“ mit der Option „Erhöhen/Verringern“. Wird nur aus Kompatibilitätsgründen mit vis.1 beibehalten",
+  "jqui_radio_list": "Radioliste mit Werten",
+  "jqui_group_value": "Wert",
+  "jqui_value": "Wert"
 }
diff --git a/src/src/i18n/en.json b/src/src/i18n/en.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Unit",
   "jqui_radio_buttons_on_off": "Radio buttons (on/off)",
   "jqui_orientation": "Orientation",
-  "jqui_not_equal_length": "Not equal width"
+  "jqui_not_equal_length": "Not equal width",
+  "jqui_state_note": "Deprecated. Use \"States control\" widget with \"increment/decrement\" option. Keeped just for compatibility with vis.1",
+  "jqui_radio_list": "Radio list with values",
+  "jqui_group_value": "Value",
+  "jqui_value": "Value"
 }
diff --git a/src/src/i18n/es.json b/src/src/i18n/es.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Unidad",
   "jqui_radio_buttons_on_off": "Botones de radio (encendido/apagado)",
   "jqui_orientation": "Orientación",
-  "jqui_not_equal_length": "No igual ancho"
+  "jqui_not_equal_length": "No igual ancho",
+  "jqui_state_note": "Obsoleto. Utilice el widget \"Control de estados\" con la opción \"incrementar/decrementar\". Mantenido solo por compatibilidad con vis.1",
+  "jqui_radio_list": "Lista de radio con valores.",
+  "jqui_group_value": "Valor",
+  "jqui_value": "Valor"
 }
diff --git a/src/src/i18n/fr.json b/src/src/i18n/fr.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Unité",
   "jqui_radio_buttons_on_off": "Boutons radio (marche/arrêt)",
   "jqui_orientation": "Orientation",
-  "jqui_not_equal_length": "Pas la même largeur"
+  "jqui_not_equal_length": "Pas la même largeur",
+  "jqui_state_note": "Obsolète. Utilisez le widget \"Contrôle des états\" avec l'option \"incrémenter/décrémenter\". Conservé uniquement pour des raisons de compatibilité avec vis.1",
+  "jqui_radio_list": "Liste radio avec valeurs",
+  "jqui_group_value": "Valeur",
+  "jqui_value": "Valeur"
 }
diff --git a/src/src/i18n/it.json b/src/src/i18n/it.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Unità",
   "jqui_radio_buttons_on_off": "Pulsanti di opzione (on/off)",
   "jqui_orientation": "Orientamento",
-  "jqui_not_equal_length": "Larghezza non uguale"
+  "jqui_not_equal_length": "Larghezza non uguale",
+  "jqui_state_note": "Deprecato. Utilizza il widget \"Controllo stati\" con l'opzione \"incremento/decremento\". Mantenuto solo per compatibilità con vis.1",
+  "jqui_radio_list": "Elenco radio con valori",
+  "jqui_group_value": "Valore",
+  "jqui_value": "Valore"
 }
diff --git a/src/src/i18n/nl.json b/src/src/i18n/nl.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Eenheid",
   "jqui_radio_buttons_on_off": "Keuzerondjes (aan/uit)",
   "jqui_orientation": "Oriëntatie",
-  "jqui_not_equal_length": "Niet gelijke breedte"
+  "jqui_not_equal_length": "Niet gelijke breedte",
+  "jqui_state_note": "Verouderd. Gebruik de widget \"Statescontrole\" met de optie \"verhogen/verlagen\". Alleen bewaard voor compatibiliteit met vis.1",
+  "jqui_radio_list": "Radiolijst met waarden",
+  "jqui_group_value": "Waarde",
+  "jqui_value": "Waarde"
 }
diff --git a/src/src/i18n/pl.json b/src/src/i18n/pl.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Jednostka",
   "jqui_radio_buttons_on_off": "Przyciski opcji (wł./wył.)",
   "jqui_orientation": "Orientacja",
-  "jqui_not_equal_length": "Nie równa szerokość"
+  "jqui_not_equal_length": "Nie równa szerokość",
+  "jqui_state_note": "Przestarzałe. Użyj widżetu „Kontrola stanów” z opcją „zwiększ/zmniejsz”. Zachowane tylko ze względu na zgodność z vis.1",
+  "jqui_radio_list": "Lista radiowa z wartościami",
+  "jqui_group_value": "Wartość",
+  "jqui_value": "Wartość"
 }
diff --git a/src/src/i18n/pt.json b/src/src/i18n/pt.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Unidade",
   "jqui_radio_buttons_on_off": "Botões de rádio (ligar/desligar)",
   "jqui_orientation": "Orientação",
-  "jqui_not_equal_length": "Largura diferente"
+  "jqui_not_equal_length": "Largura diferente",
+  "jqui_state_note": "Descontinuada. Use o widget \"Controle de estados\" com a opção \"incremento/decremento\". Mantido apenas para compatibilidade com vis.1",
+  "jqui_radio_list": "Lista de rádio com valores",
+  "jqui_group_value": "Valor",
+  "jqui_value": "Valor"
 }
diff --git a/src/src/i18n/ru.json b/src/src/i18n/ru.json
@@ -660,5 +660,9 @@
   "jqui_unit": "Единица",
   "jqui_radio_buttons_on_off": "Радиокнопки (вкл/выкл)",
   "jqui_orientation": "Ориентация",
-  "jqui_not_equal_length": "Не равная ширина"
+  "jqui_not_equal_length": "Не равная ширина",
+  "jqui_state_note": "Устарело. Используйте виджет «Управление состояниями» с опцией «увеличить/уменьшить». Сохранено только для совместимости с vis.1.",
+  "jqui_radio_list": "Список радио со значениями",
+  "jqui_group_value": "Значение",
+  "jqui_value": "Значение"
 }
diff --git a/src/src/i18n/uk.json b/src/src/i18n/uk.json
@@ -660,5 +660,9 @@
   "jqui_unit": "одиниця",
   "jqui_radio_buttons_on_off": "Перемикачі (увімкнення/вимкнення)",
   "jqui_orientation": "Орієнтація",
-  "jqui_not_equal_length": "Не однакова ширина"
+  "jqui_not_equal_length": "Не однакова ширина",
+  "jqui_state_note": "Застаріле. Використовуйте віджет «Контроль станів» із опцією «збільшення/зменшення». Збережено тільки для сумісності з vis.1",
+  "jqui_radio_list": "Список радіостанцій зі значеннями",
+  "jqui_group_value": "Значення",
+  "jqui_value": "Значення"
 }
diff --git a/src/src/i18n/zh-cn.json b/src/src/i18n/zh-cn.json
@@ -660,5 +660,9 @@
   "jqui_unit": "单元",
   "jqui_radio_buttons_on_off": "单选按钮（开/关）",
   "jqui_orientation": "方向",
-  "jqui_not_equal_length": "宽度不等"
+  "jqui_not_equal_length": "宽度不等",
+  "jqui_state_note": "已弃用。使用带有“增量/减量”选项的“状态控制”小部件。保留只是为了与 vis.1 兼容",
+  "jqui_radio_list": "包含值的单选列表",
+  "jqui_group_value": "价值",
+  "jqui_value": "价值"
 }