From 4ae2232f8ee27947fccf709ce58b0628769ede2f Mon Sep 17 00:00:00 2001
From: Martchus <martchus@gmx.net>
Date: Tue, 28 Jun 2022 16:07:36 +0200
Subject: [PATCH] Add architecture filter in the web UI's repo selections

---
 srv/static/css/specifics.css      |  5 ++
 srv/static/index.html             | 94 ++++++++++++++++++-------------
 srv/static/js/globalstatuspage.js | 21 ++++++-
 3 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/srv/static/css/specifics.css b/srv/static/css/specifics.css
index 9ca8f7a..0c0bf4b 100644
--- a/srv/static/css/specifics.css
+++ b/srv/static/css/specifics.css
@@ -105,6 +105,11 @@
     display: inline-block;
     box-sizing: border-box;
     width: 40%;
+    margin-right: 10px;
+    margin-block-end: 10px;
+}
+.form-split-50 select, .form-split-50 input {
+    width: 100%;
 }
 #build-actions-list-form fieldset input[type="button"],
 #package-results-form fieldset input[type="button"] {
diff --git a/srv/static/index.html b/srv/static/index.html
index 0f29656..d9edba5 100644
--- a/srv/static/index.html
+++ b/srv/static/index.html
@@ -67,6 +67,10 @@
               <td><input type="text" name="name" placeholder="Package name" /></td>
               <th rowspan="3">Database:</th>
               <th rowspan="3">
+                <select id="package-search-db-arch-filter" class="arch-filter">
+                  <option id="package-search-db-all-archs">All archs</option>
+                </select>
+                <br />
                 <select id="package-search-db" name="db" multiple="multiple">
                   <option id="package-search-db-any" style="font-style: italic;">any</option>
                 </select>
@@ -160,43 +164,53 @@
           <fieldset>
           <legend>Start new build action</legend>
           <div>
-            <div class="form-row">
-              <div class="form-split-50">
-                <label for="build-action-task">Predefined task:</label>
-                <br />
-                <select name="task" id="build-action-task">
-                  <option id="build-action-task-none" data-ignore="1" style="font-style: italic;">None</option>
-                </select>
+            <div style="max-width: 800px;">
+              <div class="form-row">
+                <div class="form-split-50">
+                  <label for="build-action-task">Predefined task:</label>
+                  <br />
+                  <select name="task" id="build-action-task">
+                    <option id="build-action-task-none" data-ignore="1" style="font-style: italic;">None</option>
+                  </select>
+                </div>
+                <div class="form-split-50" id="build-action-task-info">
+                </div>
               </div>
-              <div class="form-split-50" id="build-action-task-info">
+              <div class="form-row">
+                <div class="form-split-50">
+                  <label for="build-action-type">Action:</label>
+                  <br />
+                  <select name="type" id="build-action-type"></select>
+                </div>
+                <div class="form-split-50">
+                  <label for="build-action-directory">Directory:</label>
+                  <br />
+                  <input name="directory" id="build-action-directory" />
+                </div>
               </div>
-            </div>
-            <div class="form-row">
-              <div class="form-split-50">
-                <label for="build-action-type">Action:</label>
-                <br />
-                <select name="type" id="build-action-type"></select>
-              </div>
-              <div class="form-split-50">
-                <label for="build-action-directory">Directory:</label>
-                <br />
-                <input name="directory" id="build-action-directory" style="width: 100%;" />
-              </div>
-            </div>
-            <div class="form-row">
-              <div class="form-split-50">
-                <label for="build-action-source-repo">Source repo:</label>
-                <br />
-                <select name="source-repo" id="build-action-source-repo" multiple="multiple">
-                  <option id="build-action-source-repo-none" style="font-style: italic;">none</option>
-                </select>
-              </div>
-              <div class="form-split-50">
-                <label for="build-action-destination-repo">Destination repo:</label>
-                <br />
-                <select name="destination-repo" id="build-action-destination-repo" multiple="multiple">
-                  <option id="build-action-destination-repo-none" style="font-style: italic;">none</option>
-                </select>
+              <div class="form-row">
+                <div class="form-split-50">
+                  <label for="build-action-source-repo">Source repo:</label>
+                  <br />
+                  <select id="build-action-source-repo-arch-filter" class="arch-filter">
+                    <option id="build-action-source-repo-all-archs">All archs</option>
+                  </select>
+                  <br />
+                  <select name="source-repo" id="build-action-source-repo" multiple="multiple">
+                    <option id="build-action-source-repo-none" style="font-style: italic;">none</option>
+                  </select>
+                </div>
+                <div class="form-split-50">
+                  <label for="build-action-destination-repo">Destination repo:</label>
+                  <br />
+                  <select id="build-action-destination-repo-arch-filter" class="arch-filter">
+                    <option id="build-action-destination-repo-all-archs">All archs</option>
+                  </select>
+                  <br />
+                  <select name="destination-repo" id="build-action-destination-repo" multiple="multiple">
+                    <option id="build-action-destination-repo-none" style="font-style: italic;">none</option>
+                  </select>
+                </div>
               </div>
             </div>
             <div class="form-row">
@@ -214,22 +228,22 @@
               <fieldset>
                 <legend>Settings:</legend>
                 <table id="build-action-settings"></table>
-               </fieldset>
+              </fieldset>
             </div>
             <div class="form-row">
               <fieldset>
                 <legend>Start condition:</legend>
                 <input id="build-action-start-immediately" name="start-condition" type="radio" value="immediately"
-                       checked="checked" onchange="this.form['start-after-id'].disabled = this.checked" />
+                      checked="checked" onchange="this.form['start-after-id'].disabled = this.checked" />
                 <label for="build-action-start-immediately">Immediately</label>
                 <input id="build-action-start-manually" name="start-condition" type="radio" value="manually"
-                       onchange="this.form['start-after-id'].disabled = this.checked" />
+                      onchange="this.form['start-after-id'].disabled = this.checked" />
                 <label for="build-action-start-manually">Manually</label>
                 <input id="build-action-start-after" name="start-condition" type="radio" value="after"
-                       onchange="this.form['start-after-id'].disabled = !this.checked" />
+                      onchange="this.form['start-after-id'].disabled = !this.checked" />
                 <label for="build-action-start-after">After</label>
                 <input type="text" name="start-after-id" value="" placeholder="build action ID" disabled="disabled" />
-               </fieldset>
+              </fieldset>
             </div>
           </div>
           <div>
diff --git a/srv/static/js/globalstatuspage.js b/srv/static/js/globalstatuspage.js
index 60267e3..cfcf2fa 100644
--- a/srv/static/js/globalstatuspage.js
+++ b/srv/static/js/globalstatuspage.js
@@ -90,9 +90,28 @@ function handleGlobalStatusUpdate(ajaxRequest)
         const repoName = Utils.makeRepoName(dbInfo.name, dbInfo.arch);
         status.repoNames.push(repoName);
         repoSelections.forEach(function (selection) {
+            const id = selection.id;
             const option = document.createElement('option');
-            option.appendChild(document.createTextNode(repoName));
+            option.text = repoName;
+            option.dataset.arch = dbInfo.arch;
             selection.appendChild(option);
+            const filterSel = document.getElementById(id + '-arch-filter');
+            if (!filterSel) {
+                return;
+            }
+            const filterOptId = filterSel.id + dbInfo.arch;
+            if (!filterSel.options.namedItem(filterOptId)) {
+                const filterOpt = document.createElement('option');
+                filterOpt.id = filterOptId;
+                filterOpt.text = dbInfo.arch;
+                filterSel.add(filterOpt);
+                filterSel.onchange = function() {
+                    const filterVal = !filterSel.selectedIndex ? undefined : filterSel.value;
+                    Array.from(selection.options).forEach(function(option) {
+                       option.style.display = !filterVal || filterVal === option.dataset.arch ? 'block' : 'none';
+                    });
+                };
+            }
         });
     });