implement adding and removing scheduler slots

htdocs/css/admin.css

@@ -98,6 +98,7 @@ table.bookmarks .frequency {
 
 .removable-group.removable .removable-item {
     flex: 1 0 auto;
+    margin-right: .25rem;
 }
 
 .removable-group.removable .option-remove-button {

htdocs/lib/settings/SchedulerInput.js

@@ -1,6 +1,8 @@
 $.fn.schedulerInput = function() {
     this.each(function() {
         var $container = $(this);
+        var $template = $container.find('.template');
+        $template.find('input, select').prop('disabled', true);
 
         var update = function(value){
             $container.find('.option').hide();
@@ -13,5 +15,19 @@ $.fn.schedulerInput = function() {
             update(value);
         });
         update($select.val());
+
+        $container.find('.add-button').on('click', function() {
+            var row = $template.clone();
+            row.removeClass('template').show();
+            row.find('input, select').prop('disabled', false);
+            $template.before(row);
+
+            return false;
+        });
+
+        $container.on('click', '.remove-button', function(e) {
+            var row = $(e.target).parents('.scheduler-static-time-inputs');
+            row.remove();
+        });
     });
 }

owrx/form/device.py

@@ -177,33 +177,33 @@ class SchedulerInput(Input):
             self.profiles = config["profiles"]
         return super().render(config)
 
-    def render_input(self, value):
+    def render_profiles_select(self, value, config_key, stage, extra_classes=""):
-        def render_profiles_select(config_key, stage, extra_classes=""):
+        stage_value = ""
-            stage_value = ""
+        if value and "schedule" in value and config_key in value["schedule"]:
-            if value and "schedule" in value and config_key in value["schedule"]:
+            stage_value = value["schedule"][config_key]
-                stage_value = value["schedule"][config_key]
 
-            return """
+        return """
-                <select class="{extra_classes} {classes}" id="{id}" name="{id}" {disabled}>
+            <select class="{extra_classes} {classes}" id="{id}" name="{id}" {disabled}>
-                    {options}
+                {options}
-                </select> 
+            </select> 
-            """.format(
+        """.format(
-                id="{}-{}".format(self.id, stage),
+            id="{}-{}".format(self.id, stage),
-                classes=self.input_classes(),
+            classes=self.input_classes(),
-                extra_classes=extra_classes,
+            extra_classes=extra_classes,
-                disabled="disabled" if self.disabled else "",
+            disabled="disabled" if self.disabled else "",
-                options="".join(
+            options="".join(
-                    """
+                """
-                        <option value={id} {selected}>{name}</option>
+                    <option value={id} {selected}>{name}</option>
-                    """.format(
+                """.format(
-                        id=p_id,
+                    id=p_id,
-                        name=p["name"],
+                    name=p["name"],
-                        selected="selected" if stage_value == p_id else "",
+                    selected="selected" if stage_value == p_id else "",
-                    )
+                )
-                    for p_id, p in self.profiles.items()
+                for p_id, p in self.profiles.items()
-                ),
+            ),
-            )
+        )
 
+    def render_static_entires(self, value):
         def render_time_inputs(v):
             values = ["{}:{}".format(x[0:2], x[2:4]) for x in [v[0:4], v[5:9]]]
             return '<div class="p-1">-</div>'.join(
@@ -218,6 +218,55 @@ class SchedulerInput(Input):
                 for i, v in enumerate(values)
             )
 
+        schedule = {"0000-0000": ""}
+        if value is not None and value and "schedule" in value and "type" in value and value["type"] == "static":
+            schedule = value["schedule"]
+
+        rows = "".join(
+            """
+                <div class="row scheduler-static-time-inputs">
+                    {time_inputs}
+                    {select}
+                    <button class="btn btn-sm btn-danger remove-button">X</button>
+                </div>
+            """.format(
+                time_inputs=render_time_inputs(slot),
+                select=self.render_profiles_select(value, slot, "profile"),
+            )
+            for slot, entry in schedule.items()
+        )
+
+        return """
+            {rows}
+            <div class="row scheduler-static-time-inputs template" style="display: none;">
+                {time_inputs}
+                {select}
+                <button class="btn btn-sm btn-danger remove-button">X</button>
+            </div>
+            <div class="row">
+                <button class="btn btn-sm btn-primary col-12 add-button">Add...</button>
+            </div>
+        """.format(
+            rows=rows,
+            time_inputs=render_time_inputs("0000-0000"),
+            select=self.render_profiles_select("", "0000-0000", "profile"),
+        )
+
+    def render_daylight_entries(self, value):
+        return "".join(
+            """
+                <div class="row">
+                    <label class="col-form-label col-form-label-sm col-3">{name}</label>
+                    {select}
+                </div>
+            """.format(
+                name=name,
+                select=self.render_profiles_select(value, stage, stage, extra_classes="col-9"),
+            )
+            for stage, name in [("day", "Day"), ("night", "Night"), ("greyline", "Greyline")]
+        )
+
+    def render_input(self, value):
         return """
             <div id="{id}">
                 <select class="{classes} mode" id="{id}-select" name="{id}-select" {disabled}>
@@ -235,30 +284,8 @@ class SchedulerInput(Input):
             classes=self.input_classes(),
             disabled="disabled" if self.disabled else "",
             options=self.render_options(value),
-            entries="".join(
+            entries=self.render_static_entires(value),
-                """
+            stages=self.render_daylight_entries(value),
-                    <div class="row scheduler-static-time-inputs">
-                        {time_inputs}
-                        {select}
-                    </div>
-                """.format(
-                    time_inputs=render_time_inputs(slot),
-                    select=render_profiles_select(slot, "profile"),
-                )
-                for slot, entry in (value["schedule"] if value and "schedule" in value else {"0000-0000": ""}).items()
-            ),
-            stages="".join(
-                """
-                    <div class="row">
-                        <label class="col-form-label col-form-label-sm col-3">{name}</label>
-                        {select}
-                    </div>
-                """.format(
-                    name=name,
-                    select=render_profiles_select(stage, stage, extra_classes="col-9"),
-                )
-                for stage, name in [("day", "Day"), ("night", "Night"), ("greyline", "Greyline")]
-            ),
         )
 
     def _get_mode(self, value):