views: Add computers to folder

Add support for adding computers to a folder.

It uses a js script that when selecting a folder in the html form, it
will also select the parent of the folder. For instance, if the user
were to select a folder that is contained inside a room, the room would
also get selected. This allows the view to know which parent contains
the folder.

4 files changed, 25 insertions, 8 deletions

diff --git a/ogcp/forms/action_forms.py b/ogcp/forms/action_forms.py
index cbdaaaa..c803b02 100644
--- a/ogcp/forms/action_forms.py
+++ b/ogcp/forms/action_forms.py
@@ -129,6 +129,7 @@ class ClientDetailsForm(FlaskForm):
                                     ('eth2', 'eth2')])
     repo = SelectField(label=_l('Repository'))
     room = SelectField(label=_l('Room'))
+    folder_id = HiddenField()
     boot = SelectField(label=_l('Boot Mode'))
     submit = SubmitField(label=_l('Submit'))
 
diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 964e68d..ccd8a1e 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -374,6 +374,14 @@ function checkRepoServer() {
     });
 }
 
+function checkFolderParent() {
+    const folder = $('input:checkbox[form|="scopesForm"][name="folder"]')
+    folder.on('change', function() {
+        const folder_parent = $('#' + $.escapeSelector(this.dataset.parentInput));
+        folder_parent.prop('checked', true);
+    });
+}
+
 function limitCheckboxes() {
     const checkboxes = $('input:checkbox[form|="scopesForm"]');
 
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index e78cb5b..a00556f 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -17,6 +17,7 @@
                 checkParentsCheckboxes();
             {% elif selection_mode == 'scopes' %}
                 limitCheckboxes();
+                checkFolderParent();
             {% endif %}
         }
     });
@@ -27,14 +28,15 @@
 {% macro scopes_tree_collapse_level(scopes, parent_room, parent_id, state, selection_mode) -%}
 {% for scope in scopes %}
   <li id="{{ scope["name"]|replace(".", "_")|replace(" ", "_") }}_{{ scope["id"] }}" class="nav-item">
+    {% set input_id = "input" ~ parent_id ~ "-" ~ loop.index %}
     {% if scope["type"] == "server" %}
-        <input class="form-check-input" type="checkbox" form="scopesForm"
+        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
                value="{{ scope["server_ip_port"] }}" onclick="return false;"
                {% if scope.get("selected", False) %}checked{% endif %}
                name="scope-server" hidden/>
     {% elif scope["type"] == "center" %}
         {% if selection_mode != "commands" %}
-        <input class="form-check-input" type="checkbox" form="scopesForm"
+        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
                value="{{ scope["id"] }}"
                {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
                {% if scope.get("selected", False) %}checked{% endif %}
@@ -42,19 +44,19 @@
         {% endif %}
     {% elif scope["type"] == "room" %}
         {% set parent_room = scope.name + "-" + scope.id|string %}
-        <input class="form-check-input" type="checkbox" form="scopesForm"
+        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
                value="{{ scope["id"] }}" data-room="{{ parent_room }}"
                {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
                {% if scope.get("selected", False) %}checked{% endif %}
                name="scope-room" />
     {% elif scope["type"] == "folder" %}
-        <input class="form-check-input" type="checkbox" form="scopesForm"
-               value="{{ scope["id"] }}"
+        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
+		value="{{ scope["id"] }}" data-parent-input="{{ "input" ~ parent_id }}"
                {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
                {% if scope.get("selected", False) %}checked{% endif %}
                name="folder" />
     {% elif " ".join(scope["ip"]) %}
-        <input class="form-check-input" type="checkbox" form="scopesForm"
+        <input id="{{ input_id }}" class="form-check-input" type="checkbox" form="scopesForm"
                value="{{ " ".join(scope["ip"]) }}" data-parent-room="{{ parent_room }}"
                {% if state %}style="filter: grayscale(100%);" onclick="return false;"{% endif %}
                {% if scope.get("selected", False) %}checked{% endif %}
diff --git a/ogcp/views.py b/ogcp/views.py
index 1203ffd..2ca2681 100644
--- a/ogcp/views.py
+++ b/ogcp/views.py
@@ -1095,7 +1095,8 @@ def action_client_add():
                    "remote": form.remote.data,
                    "repo_id": int(form.repo.data),
                    "room": int(form.room.data),
-                   "serial_number": form.serial_number.data}
+                   "serial_number": form.serial_number.data,
+                   "folder_id": int(form.folder_id.data) }
 
         server = get_server_from_ip_port(form.server.data)
         r = server.post('/client/add', payload)
@@ -1108,7 +1109,7 @@ def action_client_add():
     else:
         params = request.args.to_dict()
         if not params.get('scope-room'):
-            flash(_('Please, select one room'), category='error')
+            flash(_('Please, select a room or a folder'), category='error')
             return redirect(url_for('scopes'))
         form.server.data = params['scope-server']
         server = get_server_from_ip_port(params['scope-server'])
@@ -1128,6 +1129,11 @@ def action_client_add():
         repositories = get_repositories(server)
         form.repo.choices = [(repo["id"], repo["name"]) for repo in repositories]
 
+        if params.get('folder'):
+            form.folder_id.data = params['folder']
+        else:
+            form.folder_id.data = 0
+
         form.submit.render_kw = {"formaction": url_for('action_client_add')}
         scopes, clients = get_scopes()
         return render_template('actions/client_details.html', form=form,