Close #405: Check the connection to Ruuvi Cloud when completing the gateway configuration

src/gui_checkbox_with_validation.mjs

@@ -0,0 +1,55 @@
+/**
+ * @author TheSomeMan
+ * @copyright Ruuvi Innovations Ltd, license BSD-3-Clause.
+ */
+
+import GuiCheckbox from './gui_checkbox.mjs'
+import GuiInputValidationIcon from './gui_input_validation_icon.mjs'
+
+class GuiCheckboxWithValidation extends GuiCheckbox {
+  /** @type GuiInputValidationIcon */
+  #validation
+
+  constructor (obj) {
+    super(obj)
+    this.#validation = new GuiInputValidationIcon(obj)
+  }
+
+  isValidationRequired () {
+    return this.#validation.isValidationRequired()
+  }
+
+  setValidationRequired () {
+    return this.#validation.setValidationRequired()
+  }
+
+  clearValidationRequired () {
+    return this.#validation.clearValidationRequired()
+  }
+
+  clearValidationIcon () {
+    this.#validation.clearValidationIcon()
+  }
+
+  setCheckingIsValid () {
+    this.#validation.setCheckingIsValid()
+  }
+
+  setValid () {
+    this.#validation.setValid()
+  }
+
+  setInvalid () {
+    this.#validation.setInvalid()
+  }
+
+  isInvalid () {
+    return this.#validation.isInvalid()
+  }
+
+  isValidityChecked () {
+    return this.#validation.isValidityChecked()
+  }
+}
+
+export default GuiCheckboxWithValidation

src/gui_input_validation_icon.mjs

@@ -13,7 +13,13 @@ class GuiInputValidationIcon extends GuiObj {
     super('GuiInputValidationIcon', obj, 'INPUT')
     let parent = obj.parent()
     if (parent.prop('tagName') === 'LABEL') {
-      parent = parent.parent().parent()
+      if (parent.parent().prop('tagName') === 'DIV' && parent.parent().hasClass('input-with_validity_check')) {
+        parent = parent.parent()
+      } else if (parent.parent().parent().prop('tagName') === 'DIV' && parent.parent().parent().hasClass('input-with_validity_check')) {
+        parent = parent.parent().parent()
+      } else {
+        throw new Error(`GuiInputWithValidation: Parent class must be a DIV element with 'input-with_validity_check' CSS class.`)
+      }
     }
     this.#parent = parent
     if (this.#parent.prop('tagName') !== 'DIV') {
@@ -23,7 +29,7 @@ class GuiInputValidationIcon extends GuiObj {
       throw new Error(`GuiInputWithValidation: Parent class must have 'input-with_validity_check' CSS class.`)
     }
     this.#icon = this.#parent.children('.input-with_validity_check-icon')
-    if (this.#icon === undefined || this.#icon === null) {
+    if (this.#icon === undefined || this.#icon === null || this.#icon.length === 0) {
       throw new Error(`GuiInputWithValidation: There is no children with 'input-with_validity_check-icon' CSS class.`)
     }
     if (this.#icon.prop('tagName') !== 'DIV') {

src/gui_radio_button.mjs

@@ -4,6 +4,7 @@
  */
 
 import $ from 'jquery'
+import GuiInputValidationIcon from "./gui_input_validation_icon.mjs";
 
 export class GuiRadioButtonOption {
   #obj
@@ -51,7 +52,52 @@ export class GuiRadioButtonOption {
       fn()
     })
   }
+}
+
+class GuiRadioButtonOptionWithValidation extends GuiRadioButtonOption {
+  /** @type GuiInputValidationIcon */
+  #validation
+
+  constructor (obj, flagChecked) {
+    super(obj, flagChecked)
+    this.#validation = new GuiInputValidationIcon(obj)
+  }
+
+  isValidationRequired () {
+    return this.#validation.isValidationRequired()
+  }
+
+  setValidationRequired () {
+    return this.#validation.setValidationRequired()
+  }
+
+  clearValidationRequired () {
+    return this.#validation.clearValidationRequired()
+  }
+
+  clearValidationIcon () {
+    this.#validation.clearValidationIcon()
+  }
+
+  setCheckingIsValid () {
+    this.#validation.setCheckingIsValid()
+  }
 
+  setValid () {
+    this.#validation.setValid()
+  }
+
+  setInvalid () {
+    this.#validation.setInvalid()
+  }
+
+  isInvalid () {
+    return this.#validation.isInvalid()
+  }
+
+  isValidityChecked () {
+    return this.#validation.isValidityChecked()
+  }
 }
 
 export class GuiRadioButton {
@@ -68,7 +114,6 @@ export class GuiRadioButton {
   }
 
   /**
-   *
    * @param {string} value
    * @param {boolean} flagChecked
    * @returns {GuiRadioButtonOption}
@@ -80,6 +125,18 @@ export class GuiRadioButton {
     return opt
   }
 
+  /**
+   * @param {string} value
+   * @param {boolean} flagChecked
+   * @returns {GuiRadioButtonOptionWithValidation}
+   */
+  addOptionWithValidation (value, flagChecked) {
+    const obj = $(`input[type=radio][name=${this.#name}][value='${value}']`)
+    const opt = new GuiRadioButtonOptionWithValidation(obj, flagChecked)
+    this.#dict[value] = opt
+    return opt
+  }
+
   disable () {
     this.#obj.prop('disabled', true)
   }

src/index.html

@@ -1780,13 +1780,26 @@ <h1>
             </div>
 
             <div id="conf-ruuvi">
-                <label class="control control-radio ">
-                    <span lang="en">Ruuvi Cloud (recommended)</span>
-                    <span lang="fi">Ruuvi Cloud -pilvipalvelu (suositeltu)</span>
-                    <input type="radio" id="use_ruuvi" name="connection_type" value="ruuvi" class="conf-checkbox"
-                           checked>
-                    <span class="control_indicator"></span>
-                </label>
+                <div class="input-with_validity_check">
+                    <label class="control control-radio">
+                        <span lang="en">Ruuvi Cloud (recommended)</span>
+                        <span lang="fi">Ruuvi Cloud -pilvipalvelu (suositeltu)</span>
+                        <input type="radio" id="use_ruuvi" name="connection_type" value="ruuvi" class="conf-checkbox"
+                               checked>
+                        <span class="control_indicator"></span>
+                    </label>
+                    <div class="input-with_validity_check-icon control-with_validity_check-icon">
+                    </div>
+                </div>
+
+                <div id="page-cloud_options-http_validation_error" class="err-message hidden">
+                    <div class="block-centered">
+                        <span lang="en">Connection failed</span>
+                        <span lang="fi">Yhteys epäonnistui</span>
+                    </div>
+                    <div id="page-cloud_options-http_validation_error-desc" class="block-centered">
+                    </div>
+                </div>
             </div>
 
             <div id="page-cloud_options-advanced-button" class="btn-dropdown">
@@ -1817,10 +1830,18 @@ <h2>
                     <span lang="en">Back</span>
                     <span lang="fi">Edellinen</span>
                 </a>
+                <a href="" id="page-cloud_options-button-check" class="btn btn-narrow hidden">
+                    <span lang="en">Check</span>
+                    <span lang="fi">Tarkasta</span>
+                </a>
                 <a href="" id="page-cloud_options-button-continue" class="btn">
                     <span lang="en">Next</span>
                     <span lang="fi">Seuraava</span>
                 </a>
+                <a href="" id="page-cloud_options-button-ignore_errors_and_continue" class="btn btn-narrow hidden">
+                    <span lang="en">Ignore errors and continue</span>
+                    <span lang="fi">Jatka virheistä huolimatta</span>
+                </a>
             </div>
         </section>
 
@@ -1855,12 +1876,24 @@ <h1>
                 </p>
             </div>
 
-            <label class="control control-checkbox">
-                <span lang="en">Ruuvi Cloud</span>
-                <span lang="fi">Ruuvi Cloud</span>
-                <input type="checkbox" id="use_http_ruuvi">
-                <span class="control_indicator"></span>
-            </label>
+            <div class="input-with_validity_check">
+                <label class="control control-checkbox">
+                    <span lang="en">Ruuvi Cloud</span>
+                    <span lang="fi">Ruuvi Cloud</span>
+                    <input type="checkbox" id="use_http_ruuvi">
+                    <span class="control_indicator"></span>
+                </label>
+                <div class="input-with_validity_check-icon control-with_validity_check-icon">
+                </div>
+            </div>
+            <div id="page-custom_server-http_ruuvi-validation_error" class="err-message hidden">
+                <div class="block-centered">
+                    <span lang="en">Validation failed</span>
+                    <span lang="fi">Vahvistus epäonnistui</span>
+                </div>
+                <div id="page-custom_server-http_ruuvi-validation_error-desc" class="block-centered">
+                </div>
+            </div>
 
             <div class="border"></div>