fix button

web/tools/Button.py

@@ -1,6 +1,7 @@
 import dash_bootstrap_components as dbc
 from dash._utils import create_callback_id
-from dash.dependencies import Output, MATCH, Input
+from dash.dependencies import Output, Input
+import dash_html_components as html
 
 from web.app import dash_app
 
@@ -8,23 +9,34 @@ RESPONSE = "-response"
 
 
 class Button:
-    def __init__(self, role, button_id, label, fct, prevent_initial_call=True):  # pylint: disable=too-many-arguments
+    def __init__(self, role, element_id, label, fct, prevent_initial_call=True):  # pylint: disable=too-many-arguments
         self.role = role
-        self.button_id = button_id
+        self._element_id = element_id
+        self._button_id = "{}-{}".format(self.role, element_id)
+        self._response_id = "{}{}".format(self._button_id, RESPONSE)
         self.label = label
         self.html_el = self.get_html()
         self._fct = fct
-        self._output = Output({'role': role + RESPONSE, 'id': MATCH}, 'children')
+        self._output = Output(self.get_response_id(), 'children')
         callback_id = create_callback_id(self._output)
         if callback_id not in dash_app.callback_map:
-            dash_app.callback(self._output, [Input({'role': role, 'id': MATCH}, 'id'),
-                                             Input({'role': role, 'id': MATCH}, 'value')],
-                              prevent_initial_call=prevent_initial_call)(self.call)
+            self._set_callback(prevent_initial_call)
+
+    def _set_callback(self, prevent_initial_call):
+        dash_app.callback(self._output, Input(self.get_button_id(), 'n_clicks'),
+                          prevent_initial_call=prevent_initial_call)(self.call)
+
+    def get_button_id(self):
+        return self._button_id
+
+    def get_response_id(self):
+        return self._response_id
 
     def get_html(self):
-        return dbc.Button(self.label, id={'role': self.role, 'id': self.button_id}, n_clicks=0, color="light",
-                          className="col")
+        return dbc.Col([dbc.Button(self.label, id=self.get_button_id(), n_clicks=0, color="light",
+                                   className="w-100"),
+                        html.Div(id=self.get_response_id())])
 
-    def call(self, div_id, value):  # pylint: disable=unused-argument
-        self._fct(div_id["id"])
+    def call(self, value):  # pylint: disable=unused-argument
+        self._fct(self._element_id)
         return " "

web/tools/Switch.py

@@ -1,22 +1,29 @@
 import dash_bootstrap_components as dbc
 import dash_daq as daq
 import dash_html_components as html
+from dash.dependencies import Input
 
-from web.tools.Button import Button, RESPONSE
+from web.app import dash_app
+from web.tools.Button import Button
 
 
 class Switch(Button):
-    def __init__(self, role, button_id, label, fct, value): # pylint: disable=too-many-arguments
+    def __init__(self, role, element_id, label, fct, value, prevent_initial_call=True):
+        # pylint: disable=too-many-arguments
         self.value = value
-        super().__init__(role, button_id, label, fct)
+        super().__init__(role, element_id, label, fct, prevent_initial_call)
+
+    def _set_callback(self, prevent_initial_call):
+        dash_app.callback(self._output, Input(self.get_button_id(), 'value'),
+                          prevent_initial_call=prevent_initial_call)(self.call)
 
     def get_html(self):
-        return dbc.Col([daq.ToggleSwitch( # pylint: disable=not-callable
-            id={'role': self.role, 'id': self.button_id},
+        return dbc.Col([daq.ToggleSwitch(  # pylint: disable=not-callable
+            id=self.get_button_id(),
             value=self.value,
             label=self.label
-        ), html.Div(id={'role': self.role + RESPONSE, 'id': self.button_id})])
+        ), html.Div(id=self.get_response_id())])
 
-    def call(self, div_id, value):
-        self._fct(div_id["id"], value)
-        return " "
+    def call(self, value):
+        self._fct(self._element_id, value)
+        return " "

web/view/views.py

@@ -20,7 +20,7 @@ from web import figures
 
 from web.app import app, dash_app
 from web.db import Database
-from web.config_views import config_layout, config_otp_layout, log_layout
+from web.view.config_views import config_layout, config_otp_layout, log_layout
 from web.utils import diff_dashtable, dash_date_to_datetime
 
 # pylint: disable=invalid-name