web: Add confirm functionality for Switch ui widget

mhthies · Sep 21, 2020 · 29d619e · 29d619e
1 parent 2b1ce66
commit 29d619e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/shc/web/static/main.js b/shc/web/static/main.js
@@ -35,12 +35,22 @@ function SwitchWidget(domElement, writeValue) {
     $(domElement).closest('.checkbox').checkbox();
     const widget = this;
     this.subscribeIds = [parseInt(domElement.getAttribute('data-id'))];
+    const confirm_values = domElement.getAttribute('data-confirm')
+        ? domElement.getAttribute('data-confirm')
+            .split(',')
+            .map(v => parseInt(v))
+        : [];
+    const confirm_message = domElement.getAttribute('data-confirm-message');
 
     this.update = function(value, for_id) {
         domElement.checked = value;
     };
 
     domElement.addEventListener('change', function (event) {
+        if (confirm_values.indexOf(1 * event.target.checked) !== -1
+                && !window.confirm(confirm_message || "Are you sure?")) {
+            return;
+        }
         writeValue(widget.subscribeIds[0], event.target.checked);
     });
 }

diff --git a/shc/web/templates/widgets/switch.htm b/shc/web/templates/widgets/switch.htm
@@ -1,6 +1,7 @@
 <label class="shc label" for="switch-widget-{{ id }}">{{ label }}</label>
 <div class="ui right floated fitted toggle checkbox {{ color }}">
     <input type="checkbox" tabindex="0" class="hidden" data-widget="switch" data-id="{{ id }}"
+           {% if confirm_csv_int %}data-confirm="{{ confirm_csv_int }}" data-confirm-message="{{ confirm_message }}"{% endif %}
            id="switch-widget-{{ id }}">
     <label></label>
 </div>
diff --git a/shc/web/widgets.py b/shc/web/widgets.py
@@ -28,15 +28,19 @@ def icon(icon_name: str, label: str = '') -> markupsafe.Markup:
 
 
 class Switch(WebDisplayDatapoint[bool], WebActionDatapoint[bool], WebPageItem):
-    def __init__(self, label: Union[str, markupsafe.Markup], color: str = ''):
+    def __init__(self, label: Union[str, markupsafe.Markup], color: str = '', confirm_message: str = '',
+                 confirm_values: Iterable[bool] = (False, True)):
         self.type = bool
         super().__init__()
         self.label = label
         self.color = color
+        self.confirm_message = confirm_message
+        self.confirm = confirm_values if confirm_message else ()
 
     async def render(self) -> str:
-        return await jinja_env.get_template('widgets/switch.htm').render_async(id=id(self), label=self.label,
-                                                                               color=self.color)
+        return await jinja_env.get_template('widgets/switch.htm').render_async(
+            id=id(self), label=self.label, color=self.color,
+            confirm_csv_int=",".join(str(int(v)) for v in self.confirm), confirm_message=self.confirm_message)
 
 
 class Select(WebDisplayDatapoint[T], WebActionDatapoint[T], WebPageItem, Generic[T]):

diff --git a/test/test_web.py b/test/test_web.py
@@ -117,6 +117,36 @@ def test_switch(self) -> None:
             self.assertTrue(checkbox_element.is_selected())
             publish_mock.assert_called_once_with(True, unittest.mock.ANY)
 
+    def test_switch_confirm(self) -> None:
+        switch = web.widgets.Switch("Some Switch", confirm_values=(True,), confirm_message="My text")\
+            .connect(ExampleReadable(bool, False))
+
+        page = self.server.page('index')
+        page.add_item(switch)
+
+        with unittest.mock.patch.object(switch, '_publish', new_callable=AsyncMock) as publish_mock:
+            self.server_runner.start()
+            self.driver.get("http://localhost:42080")
+            time.sleep(0.05)
+            checkbox_container = self.driver.find_element_by_xpath(
+                '//*[normalize-space(text()) = "Some Switch"]/..//input/..')
+
+            # Setting to true requires confirmation
+            checkbox_container.click()
+            time.sleep(0.05)
+            publish_mock.assert_not_called()
+            alert = Alert(self.driver)
+            self.assertEqual("My text", alert.text)
+            alert.accept()
+            time.sleep(0.05)
+            publish_mock.assert_called_once_with(True, unittest.mock.ANY)
+
+            # Setting back to false should not require a confirmation
+            publish_mock.reset_mock()
+            checkbox_container.click()
+            time.sleep(0.05)
+            publish_mock.assert_called_once_with(False, unittest.mock.ANY)
+
     def test_buttons(self) -> None:
         b1 = web.widgets.ToggleButton(label="B1", color='yellow')
         b2 = web.widgets.DisplayButton(label="B2", color='blue')