implement actions from web page

package/share/ahriman/build-status.jinja2

@@ -26,18 +26,34 @@
         </div>
 
         <div class="container">
+            <div id="toolbar">
+                <button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addForm">
+                    <i class="fa fa-plus"></i> Add
+                </button>
+                <button id="update" class="btn btn-secondary" onclick="updatePackages()" disabled>
+                    <i class="fa fa-play"></i> Update
+                </button>
+                <button id="remove" class="btn btn-danger" onclick="removePackages()" disabled>
+                    <i class="fa fa-trash"></i> Remove
+                </button>
+            </div>
+
             <table id="packages" class="table table-striped table-hover" cellspacing="0"
-                   data-toggle="table"
-                   data-pagination="true"
-                   data-page-siz="10"
+                   data-click-to-select="true"
+                   data-page-size="10"
                    data-page-list="[10, 25, 50, 100, all]"
+                   data-pagination="true"
                    data-search="true"
                    data-show-columns="true"
+                   data-show-columns-toggle-all="true"
                    data-show-export="true"
-                   data-sortable="true">
+                   data-sortable="true"
+                   data-toggle="table"
+                   data-toolbar="#toolbar">
                 <thead class="table-primary">
                     <tr>
-                        <th data-sortable="true">package base</th>
+                        <th data-checkbox="true"></th>
+                        <th data-sortable="true" data-field="">package base</th>
                         <th data-sortable="true">packages</th>
                         <th data-sortable="true">version</th>
                         <th data-sortable="true">last update</th>
@@ -48,7 +64,8 @@
                 <tbody>
                 {% if authorized %}
                     {% for package in packages %}
-                        <tr>
+                        <tr data-package-base="{{ package.base }}">
+                            <td data-checkbox="true"></td>
                             <td><a href="{{ package.web_url }}" title="{{ package.base }}">{{ package.base }}</a></td>
                             <td>{{ package.packages|join("<br>"|safe) }}</td>
                             <td>{{ package.version }}</td>
@@ -78,42 +95,18 @@
                         <button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#loginForm" style="text-decoration: none">login</button>
                     {% else %}
                         <form action="/user-api/v1/logout" method="post">
-                            <button type="submit" class="btn btn-link" style="text-decoration: none">logout ({{ auth_username }})</button>
+                            <button class="btn btn-link" style="text-decoration: none">logout ({{ auth_username }})</button>
                         </form>
                     {% endif %}
                 {% endif %}
             </footer>
         </div>
 
-        <div id="loginForm" tabindex="-1" role="dialog" class="modal fade">
-            <div class="modal-dialog modal-login">
-                <div class="modal-content">
-                    <form action="/user-api/v1/login" method="post">
-                        <div class="modal-header">
-                            <h4 class="modal-title">login</h4>
-                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
-                        </div>
-                        <div class="modal-body">
-                            <div class="form-group row">
-                                <label for="username" class="col-sm-2 col-form-label">username</label>
-                                <div class="col-sm-10">
-                                    <input id="username" type="text" class="form-control" placeholder="enter username" name="username" required>
-                                </div>
-                            </div>
-                            <div class="form-group row">
-                                <label for="password" class="col-sm-2 col-form-label">password</label>
-                                <div class="col-sm-10">
-                                    <input id="password" type="password" class="form-control" placeholder="enter password" name="password" required>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="modal-footer">
-                            <input type="submit" class="btn btn-primary" value="Login">
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
+        {% if auth_enabled %}
+            {% include "login-modal.jinja2" %}
+        {% endif %}
+
+        {% include "package-actions-modals.jinja2" %}
 
         <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
         <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
@@ -121,6 +114,8 @@
         <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
         <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/export/bootstrap-table-export.min.js"></script>
 
+        {% include "package-actions-script.jinja2" %}
+
     </body>
 
 </html>

package/share/ahriman/login-modal.jinja2

@@ -0,0 +1,29 @@
+<div id="loginForm" tabindex="-1" role="dialog" class="modal fade">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <form action="/user-api/v1/login" method="post">
+                <div class="modal-header">
+                    <h4 class="modal-title">Login</h4>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group row">
+                        <label for="username" class="col-sm-2 col-form-label">Username</label>
+                        <div class="col-sm-10">
+                            <input id="username" type="text" class="form-control" placeholder="enter username" name="username" required>
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label for="password" class="col-sm-2 col-form-label">Password</label>
+                        <div class="col-sm-10">
+                            <input id="password" type="password" class="form-control" placeholder="enter password" name="password" required>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary">Login</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

package/share/ahriman/package-actions-modals.jinja2

@@ -0,0 +1,57 @@
+<div id="addForm" tabindex="-1" role="dialog" class="modal fade">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">Add new packages</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group row">
+                    <label for="package" class="col-sm-2 col-form-label">Package</label>
+                    <div class="col-sm-10">
+                        <input id="package" type="text" list="knownPackages" class="form-control" placeholder="AUR package" name="package" required>
+                        <datalist id="knownPackages"></datalist>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addPackages()">Add</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="failedForm" tabindex="-1" role="dialog" class="modal fade">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header bg-danger">
+                <h4 class="modal-title">Failed</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Packages update has failed.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="successForm" tabindex="-1" role="dialog" class="modal fade">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header bg-success">
+                <h4 class="modal-title">Success</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Packages update has been run.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>

package/share/ahriman/package-actions-script.jinja2

@@ -0,0 +1,76 @@
+<script>
+    const $remove = $("#remove")
+    const $update = $("#update")
+
+    const $table = $("#packages")
+    $table.on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table",
+        function () {
+            $remove.prop("disabled", !$table.bootstrapTable("getSelections").length)
+            $update.prop("disabled", !$table.bootstrapTable("getSelections").length)
+        })
+
+    const $successForm = $("#successForm")
+    $successForm.on("hidden.bs.modal", function() { window.location.reload(); })
+
+    const $failedForm = $("#failedForm")
+    $failedForm.on("hidden.bs.modal", function() { window.location.reload(); })
+
+    const $package = $("#package")
+    const $knownPackages = $("#knownPackages")
+    $package.keyup(function () {
+        const $this = $(this);
+        clearTimeout($this.data("timeout"));
+
+        $this.data("timeout", setTimeout($.proxy(function () {
+            const $value = $package.val();
+
+            $.ajax({
+                url: "/service-api/v1/search",
+                data: {"for": $value},
+                type: "GET",
+                dataType: "json",
+                success: function (resp) {
+                    const $options = resp.map(function (pkg) {
+                        const $option = document.createElement("option");
+                        $option.value = pkg;
+                        return $option;
+                    });
+                    $knownPackages.empty().append($options);
+                    $this.focus()
+                },
+            })
+        }, this), 500));
+    })
+
+    function doPackageAction($uri, $packages) {
+        if ($packages.length === 0)
+            return;
+        $.ajax({
+            url: $uri,
+            data: JSON.stringify({packages: $packages}),
+            type: "POST",
+            contentType: "application/json",
+            success: function (_) { $successForm.modal("show"); },
+            error: function (_) { $failedForm.modal("show"); },
+        })
+    }
+
+    function getSelection() {
+        return $.map($table.bootstrapTable("getSelections"), function(row) {
+            return row._data["package-base"];
+        })
+    }
+
+    function addPackages() {
+        const $packages = [$package.val()]
+        doPackageAction("/service-api/v1/add", $packages);
+    }
+
+    function removePackages() { doPackageAction("/service-api/v1/remove", getSelection()); }
+
+    function updatePackages() { doPackageAction("/service-api/v1/add", getSelection()); }
+
+    $(function () {
+        $table.bootstrapTable("uncheckAll");
+    })
+</script>

package/share/ahriman/repo-index.jinja2

@@ -31,14 +31,15 @@ SigLevel = Database{% if has_repo_signed %}Required{% else %}Never{% endif %} Pa
 
         <div class="container">
             <table id="packages" class="table table-striped table-hover" cellspacing="0"
-                   data-toggle="table"
-                   data-pagination="true"
-                   data-page-siz="10"
+                   data-page-size="10"
                    data-page-list="[10, 25, 50, 100, all]"
+                   data-pagination="true"
                    data-search="true"
                    data-show-columns="true"
+                   data-show-columns-toggle-all="true"
                    data-show-export="true"
-                   data-sortable="true">
+                   data-sortable="true"
+                   data-toggle="table">
                 <thead class="table-primary">
                     <tr>
                         <th data-sortable="true">package</th>

tests/ahriman/core/upload/test_s3.py

@@ -61,6 +61,9 @@ def test_get_local_files(s3: S3, resource_path_root: Path) -> None:
         Path("models/package_yay_srcinfo"),
         Path("web/templates/build-status.jinja2"),
         Path("web/templates/email-index.jinja2"),
+        Path("web/templates/login-modal.jinja2"),
+        Path("web/templates/package-actions-modals.jinja2"),
+        Path("web/templates/package-actions-script.jinja2"),
         Path("web/templates/repo-index.jinja2"),
         Path("web/templates/style.jinja2"),
     ])