* (bluefox) jQui Radio widget was migrated to react

ioBroker · Dec 6, 2023 · 3ecc274 · 3ecc274
1 parent fef3e68
commit 3ecc274
Show file tree

Hide file tree

Showing 17 changed files with 158 additions and 42 deletions.
diff --git a/src/public/widgets/jqui.html b/src/public/widgets/jqui.html
@@ -1826,7 +1826,7 @@
     </div>
 </script-->
 
-<script id="tplJquiRadio"
+<!--script id="tplJquiRadio"
         type="text/ejs"
         class="vis-tpl"
         data-vis-prev='<div id="prev_tplJquiRadio" style=" position: relative; text-align: initial;padding: 4px;height: 30px"><div style="top: 243px; left: 348px; font-size: 9px;" class="vis-widget_prev ui-selectee ui-selected ui-draggable-handle" data-vis-resizable="{"disabled":true, "handles":""}"> <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 ui-state-active" role="button" aria-pressed="true"><span class="ui-button-text">ON</span></label> </div> </div> </div>'
@@ -1842,7 +1842,7 @@
             </div>
         </div>
     </div>
-</script>
+</script-->
 
 <script id="tplJquiRadioList"
         type="text/ejs"

diff --git a/src/src/Vis/Widgets/JQui/JQuiBinaryState.jsx b/src/src/Vis/Widgets/JQui/JQuiBinaryState.jsx
@@ -174,6 +174,21 @@ class JQuiBinaryState extends VisRxWidget {
                             default: 'contained',
                             hidden: data => data.type !== 'button' && data.type !== 'radio',
                         },
+                        {
+                            name: 'orientation',
+                            label: 'jqui_orientation',
+                            type: 'select',
+                            noTranslation: true,
+                            options: ['horizontal', 'vertical'],
+                            default: 'horizontal',
+                            hidden: data => data.type !== 'radio',
+                        },
+                        {
+                            name: 'notEqualLength',
+                            label: 'jqui_not_equal_length',
+                            type: 'checkbox',
+                            hidden: data => data.type !== 'radio' || data.orientation !== 'horizontal',
+                        },
                         { name: 'html_prepend', type: 'html' },
                         { name: 'html_append', type: 'html' },
                     ],
@@ -416,10 +431,10 @@ class JQuiBinaryState extends VisRxWidget {
         let color;
 
         if (isOn) {
-            text = this.state.rxData.text_true;
+            text = this.state.rxData.text_true !== undefined ? this.state.rxData.text_true : this.state.rxData.on_text; // back compatibility with radio on/off
             color = this.state.rxData.color_true;
         }
-        text = text || this.state.rxData.text_false;
+        text = text || (this.state.rxData.text_false !== undefined ? this.state.rxData.text_false : this.state.rxData.off_text); // back compatibility with radio on/off
         color = color || this.state.rxData.color_false;
 
         return { text, color };
@@ -490,9 +505,9 @@ class JQuiBinaryState extends VisRxWidget {
     }
 
     renderSwitch(isOn, style) {
-        const on = this.state.rxData.text_true;
+        const on = this.state.rxData.text_true !== undefined ? this.state.rxData.text_true : this.state.rxData.on_text; // back compatibility with radio on/off
         const textColorOn = this.state.rxData.color_true;
-        const off = this.state.rxData.text_false;
+        const off = this.state.rxData.text_false !== undefined ? this.state.rxData.text_false : this.state.rxData.off_text; // back compatibility with radio on/off
         const textColorOff = this.state.rxData.color_false;
 
         const onIcon = this.renderIcon(true, true);
@@ -543,9 +558,11 @@ class JQuiBinaryState extends VisRxWidget {
     }
 
     renderCheckbox(isOn, style) {
-        let text = isOn ? this.state.rxData.text_true : this.state.rxData.text_false;
+        let text = isOn ?
+            (this.state.rxData.text_true !== undefined ? this.state.rxData.text_true : this.state.rxData.on_text) // back compatibility with radio on/off
+            : (this.state.rxData.text_false !== undefined ? this.state.rxData.text_false : this.state.rxData.off_text); // back compatibility with radio on/off
         if (!text) {
-            text = this.state.rxData.text_false;
+            text = this.state.rxData.text_false !== undefined ? this.state.rxData.text_false : this.state.rxData.off_text; // back compatibility with radio on/off
         }
         const icon = isOn ? this.renderIcon(true) : this.renderIcon(false);
         style.marginLeft = 5;
@@ -572,8 +589,8 @@ class JQuiBinaryState extends VisRxWidget {
     }
 
     renderRadio(isOn, style) {
-        const on = this.state.rxData.text_true;
-        const off = this.state.rxData.text_false;
+        const on = this.state.rxData.text_true !== undefined ? this.state.rxData.text_true : this.state.rxData.on_text; // back compatibility with radio on/off
+        const off = this.state.rxData.text_false !== undefined ? this.state.rxData.text_false : this.state.rxData.off_text; // back compatibility with radio on/off
         const onIcon = this.renderIcon(true);
         const offIcon = this.renderIcon(false);
 
@@ -582,18 +599,23 @@ class JQuiBinaryState extends VisRxWidget {
             variant = 'text';
         }
 
+        const buttonStyle = this.state.rxData.orientation === 'vertical' ? { height: '50%' } : (this.state.rxData.notEqualLength ? undefined : { width: '50%' });
+
         return <ButtonGroup
             style={style}
             variant={variant}
+            orientation={this.state.rxData.orientation || 'horizontal'}
         >
             <Button
+                style={buttonStyle}
                 startIcon={offIcon}
                 color={isOn ? 'grey' : 'primary'}
                 onClick={() => this.onClick(false)}
             >
                 {off || I18n.t('off')}
             </Button>
             <Button
+                style={buttonStyle}
                 color={isOn ? 'primary' : 'grey'}
                 startIcon={onIcon}
                 onClick={() => this.onClick(true)}
@@ -655,38 +677,43 @@ class JQuiBinaryState extends VisRxWidget {
             }
         });
 
+        let type = this.state.rxData.type;
+        if (!type && this.props.tpl === 'tplJquiRadio') {
+            type = 'radio';
+        }
+
         // extra no rxData here, as it is not possible to set it with bindings
         buttonStyle.width = '100%';
         buttonStyle.height = '100%';
         let content;
         const bodyStyle = { textAlign: 'center' };
-        if (this.state.rxData.type === 'radio') {
+        if (type === 'radio') {
             content = this.renderRadio(isOn, buttonStyle);
-        } else if (this.state.rxData.type === 'html' || (this.state.rxData.type === 'button' && this.state.rxData.jquery_style)) {
+        } else if (type === 'html' || (type === 'button' && this.state.rxData.jquery_style)) {
             bodyStyle.display = 'flex';
             bodyStyle.flexDirection = this.state.height > this.state.width ? 'column' : 'row';
             bodyStyle.alignItems = 'center';
             bodyStyle.justifyContent = 'center';
             bodyStyle.cursor = !this.state.rxData.readOnly ? 'pointer' : undefined;
 
             content = this.renderHtml(isOn);
-        } else if (this.state.rxData.type === 'switch') {
+        } else if (type === 'switch') {
             content = this.renderSwitch(isOn, buttonStyle);
-        } else if (this.state.rxData.type === 'checkbox') {
+        } else if (type === 'checkbox') {
             content = this.renderCheckbox(isOn, buttonStyle);
-        } else if (this.state.rxData.type === 'image') {
+        } else if (type === 'image') {
             bodyStyle.cursor = !this.state.rxData.readOnly ? 'pointer' : undefined;
             content = this.renderIcon(isOn, buttonStyle);
-        } else if (this.state.rxData.type === 'round-button') {
+        } else if (type === 'round-button') {
             content = this.renderFab(isOn, buttonStyle);
-        }else if (!this.state.rxData.jquery_style) {
+        } else if (!this.state.rxData.jquery_style) {
             content = this.renderButton(isOn, buttonStyle);
         }
 
         const result = <div
             className="vis-widget-body"
             style={bodyStyle}
-            onClick={this.state.rxData.type === 'image' || this.state.rxData.type === 'html' ? () => this.onClick() : undefined}
+            onClick={type === 'image' || type === 'html' ? () => this.onClick() : undefined}
         >
             {content}
         </div>;

diff --git a/src/src/Vis/Widgets/JQui/JQuiInputSet.jsx b/src/src/Vis/Widgets/JQui/JQuiInputSet.jsx
@@ -19,12 +19,6 @@ import PropTypes from 'prop-types';
 import JQuiInput from './JQuiInput';
 
 class JQuiInputSet extends JQuiInput {
-    constructor(props) {
-        super(props);
-        this.state.isOn = false;
-        this.state.height = 0;
-        this.state.width = 0;
-    }
 
     static getWidgetInfo() {
         const widgetInfo = JQuiInput.getWidgetInfo();

diff --git a/src/src/Vis/Widgets/JQui/JQuiRadio.jsx b/src/src/Vis/Widgets/JQui/JQuiRadio.jsx
@@ -0,0 +1,67 @@
+/**
+ *  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 JQuiBinaryState from './JQuiBinaryState';
+
+class JQuiRadio extends JQuiBinaryState {
+    static getWidgetInfo() {
+        const widgetInfo = JQuiBinaryState.getWidgetInfo();
+        const newWidgetInfo = {
+            id: 'tplJquiRadio',
+            visSet: 'jqui',
+            visName: 'Radiobuttons on/off',
+            visWidgetLabel: 'jqui_radio_buttons_on_off',
+            visPrev: 'widgets/jqui/img/Prev_RadioButtonsOnOff.png',
+            visOrder: 15,
+            visAttrs: widgetInfo.visAttrs,
+            visDefaultStyle: {
+                width: 150,
+                height: 45,
+            },
+        };
+
+        // Add note
+        newWidgetInfo.visAttrs[0].fields.unshift({
+            name: '_note',
+            type: 'help',
+            text: 'jqui_button_binary_control_note',
+        });
+
+        const type = JQuiBinaryState.findField(newWidgetInfo, 'type');
+        if (type) {
+            type.default = 'radio';
+        }
+
+        return newWidgetInfo;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getWidgetInfo() {
+        return JQuiRadio.getWidgetInfo();
+    }
+}
+
+JQuiRadio.propTypes = {
+    id: PropTypes.string.isRequired,
+    context: PropTypes.object.isRequired,
+    view: PropTypes.string.isRequired,
+    editMode: PropTypes.bool.isRequired,
+    tpl: PropTypes.string.isRequired,
+};
+
+export default JQuiRadio;
diff --git a/src/src/Vis/Widgets/JQui/JQuiToggle.jsx b/src/src/Vis/Widgets/JQui/JQuiToggle.jsx
@@ -19,13 +19,6 @@ import PropTypes from 'prop-types';
 import JQuiBinaryState from './JQuiBinaryState';
 
 class JQuiToggle extends JQuiBinaryState {
-    constructor(props) {
-        super(props);
-        this.state.isOn = false;
-        this.state.height = 0;
-        this.state.width = 0;
-    }
-
     static getWidgetInfo() {
         const widgetInfo = JQuiBinaryState.getWidgetInfo();
         const newWidgetInfo = {

diff --git a/src/src/Vis/Widgets/index.jsx b/src/src/Vis/Widgets/index.jsx
@@ -31,6 +31,7 @@ import JQuiContainerIconDialog from './JQui/JQuiContainerIconDialog';
 import JQuiInput from './JQui/JQuiInput';
 import JQuiInputSet from './JQui/JQuiInputSet';
 import JQuiBinaryState from './JQui/JQuiBinaryState';
+import JQuiRadio from './JQui/JQuiRadio';
 import JQuiState from './JQui/JQuiState';
 import JQuiWriteState from './JQui/JQuiWriteState';
 import JQuiSlider from './JQui/JQuiSlider';
@@ -74,6 +75,7 @@ const WIDGETS = [
     JQuiInput,
     JQuiInputSet,
     JQuiBinaryState,
+    JQuiRadio,
     JQuiState,
     JQuiWriteState,
     JQuiSlider,

diff --git a/src/src/i18n/de.json b/src/src/i18n/de.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Eingabe mit Taste",
   "jqui_button_input_note": "Veraltet. Verwenden Sie das Widget „Eingabe“. Wird nur aus Kompatibilitätsgründen mit vis.1 beibehalten",
   "jqui_button_text": "Schaltflächentext",
-  "jqui_unit": "Einheit"
+  "jqui_unit": "Einheit",
+  "jqui_radio_buttons_on_off": "Optionsfelder (ein/aus)",
+  "jqui_orientation": "Orientierung",
+  "jqui_not_equal_length": "Nicht gleich breit"
 }
diff --git a/src/src/i18n/en.json b/src/src/i18n/en.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Input with button",
   "jqui_button_input_note": "Deprecated. Use \"Input\" widget. Keeped just for compatibility with vis.1",
   "jqui_button_text": "Button text",
-  "jqui_unit": "Unit"
+  "jqui_unit": "Unit",
+  "jqui_radio_buttons_on_off": "Radio buttons (on/off)",
+  "jqui_orientation": "Orientation",
+  "jqui_not_equal_length": "Not equal width"
 }
diff --git a/src/src/i18n/es.json b/src/src/i18n/es.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Entrada con botón",
   "jqui_button_input_note": "Obsoleto. Utilice el widget \"Entrada\". Mantenido solo por compatibilidad con vis.1",
   "jqui_button_text": "Botón de texto",
-  "jqui_unit": "Unidad"
+  "jqui_unit": "Unidad",
+  "jqui_radio_buttons_on_off": "Botones de radio (encendido/apagado)",
+  "jqui_orientation": "Orientación",
+  "jqui_not_equal_length": "No igual ancho"
 }
diff --git a/src/src/i18n/fr.json b/src/src/i18n/fr.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Saisie avec bouton",
   "jqui_button_input_note": "Obsolète. Utilisez le widget \"Entrée\". Conservé uniquement pour des raisons de compatibilité avec vis.1",
   "jqui_button_text": "Texte du bouton",
-  "jqui_unit": "Unité"
+  "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"
 }
diff --git a/src/src/i18n/it.json b/src/src/i18n/it.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Ingresso con pulsante",
   "jqui_button_input_note": "Deprecato. Utilizza il widget \"Inserisci\". Mantenuto solo per compatibilità con vis.1",
   "jqui_button_text": "Testo del pulsante",
-  "jqui_unit": "Unità"
+  "jqui_unit": "Unità",
+  "jqui_radio_buttons_on_off": "Pulsanti di opzione (on/off)",
+  "jqui_orientation": "Orientamento",
+  "jqui_not_equal_length": "Larghezza non uguale"
 }
diff --git a/src/src/i18n/nl.json b/src/src/i18n/nl.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Ingang met knop",
   "jqui_button_input_note": "Verouderd. Gebruik de \"Invoer\"-widget. Alleen bewaard voor compatibiliteit met vis.1",
   "jqui_button_text": "Knop tekst",
-  "jqui_unit": "Eenheid"
+  "jqui_unit": "Eenheid",
+  "jqui_radio_buttons_on_off": "Keuzerondjes (aan/uit)",
+  "jqui_orientation": "Oriëntatie",
+  "jqui_not_equal_length": "Niet gelijke breedte"
 }
diff --git a/src/src/i18n/pl.json b/src/src/i18n/pl.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Wejście za pomocą przycisku",
   "jqui_button_input_note": "Przestarzałe. Użyj widżetu „Wejście”. Zachowane tylko ze względu na kompatybilność z vis.1",
   "jqui_button_text": "Przycisk tekstowy",
-  "jqui_unit": "Jednostka"
+  "jqui_unit": "Jednostka",
+  "jqui_radio_buttons_on_off": "Przyciski opcji (wł./wył.)",
+  "jqui_orientation": "Orientacja",
+  "jqui_not_equal_length": "Nie równa szerokość"
 }
diff --git a/src/src/i18n/pt.json b/src/src/i18n/pt.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Entrada com botão",
   "jqui_button_input_note": "Descontinuada. Use o widget \"Entrada\". Mantido apenas para compatibilidade com vis.1",
   "jqui_button_text": "Botão de texto",
-  "jqui_unit": "Unidade"
+  "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"
 }
diff --git a/src/src/i18n/ru.json b/src/src/i18n/ru.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Ввод с помощью кнопки",
   "jqui_button_input_note": "Устарело. Используйте виджет «Ввод». Сохранено только для совместимости с vis.1.",
   "jqui_button_text": "Текст кнопки",
-  "jqui_unit": "Единица"
+  "jqui_unit": "Единица",
+  "jqui_radio_buttons_on_off": "Радиокнопки (вкл/выкл)",
+  "jqui_orientation": "Ориентация",
+  "jqui_not_equal_length": "Не равная ширина"
 }
diff --git a/src/src/i18n/uk.json b/src/src/i18n/uk.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "Вхід за допомогою кнопки",
   "jqui_button_input_note": "Застаріле. Використовуйте віджет «Введення». Збережено тільки для сумісності з vis.1",
   "jqui_button_text": "Текст кнопки",
-  "jqui_unit": "одиниця"
+  "jqui_unit": "одиниця",
+  "jqui_radio_buttons_on_off": "Перемикачі (увімкнення/вимкнення)",
+  "jqui_orientation": "Орієнтація",
+  "jqui_not_equal_length": "Не однакова ширина"
 }
diff --git a/src/src/i18n/zh-cn.json b/src/src/i18n/zh-cn.json
@@ -657,5 +657,8 @@
   "jqui_input_with_button": "用按钮输入",
   "jqui_button_input_note": "已弃用。使用“输入”小部件。保留只是为了与 vis.1 兼容",
   "jqui_button_text": "按钮文字",
-  "jqui_unit": "单元"
+  "jqui_unit": "单元",
+  "jqui_radio_buttons_on_off": "单选按钮（开/关）",
+  "jqui_orientation": "方向",
+  "jqui_not_equal_length": "宽度不等"
 }