ahriman/package/share/ahriman/templates/build-status/package-add-modal.jinja2

<div id="package-add-modal" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="package-add-form" onsubmit="return false">
                <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-add-repository-input" class="col-sm-4 col-form-label">repository</label>
                        <div class="col-sm-8">
                            <select id="package-add-repository-input" class="form-control" name="repository" required>
                                {% for repository in repositories %}
                                    <option value="{{ repository.id }}" data-repository="{{ repository.repository }}" data-architecture="{{ repository.architecture }}">{{ repository.repository }} ({{ repository.architecture }})</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="package-add-input" class="col-sm-4 col-form-label">package</label>
                        <div class="col-sm-8">
                            <input id="package-add-input" type="text" list="known-packages-dlist" autocomplete="off" class="form-control" placeholder="AUR package" name="package" required>
                            <datalist id="package-add-known-packages-dlist"></datalist>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" onclick="packagesAdd()"><i class="bi bi-play"></i> add</button>
                    <button type="submit" class="btn btn-success" onclick="packagesRequest()"><i class="bi bi-plus"></i> request</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const packageAddModal = $("#package-add-modal");
    const packageAddForm = $("#package-add-form");
    packageAddModal.on("shown.bs.modal", () => {
        $(`#package-add-repository-input option[value="${repository.architecture}-${repository.repository}"]`).prop("selected", true);

    });
    packageAddModal.on("hidden.bs.modal", () => { packageAddForm.trigger("reset"); });

    const packageAddInput = $("#package-add-input");
    const packageAddRepositoryInput = $("#package-add-repository-input");
    const packageAddKnownPackagesList = $("#package-add-known-packages-dlist");
    packageAddInput.keyup(() => {
        clearTimeout(packageAddInput.data("timeout"));
        packageAddInput.data("timeout", setTimeout($.proxy(() => {
            const value = packageAddInput.val();

            if (value.length >= 3) {
                $.ajax({
                    url: "/api/v1/service/search",
                    data: {"for": value},
                    type: "GET",
                    dataType: "json",
                    success: response => {
                        const options = response.map(pkg => {
                            const option = document.createElement("option");
                            option.value = pkg.package;
                            option.innerText = `${pkg.package} (${pkg.description})`;
                            return option;
                        });
                        packageAddKnownPackagesList.empty().append(options);
                    },
                });
            }
        }, this), 500));
    });

    function packagesAdd() {
        const packages = packageAddInput.val();
        const repository = getRepositorySelector(packageAddRepositoryInput);
        if (packages) {
            packageAddModal.modal("hide");
            const onSuccess = update => `Packages ${update} have been added`;
            const onFailure = error => `Package addition failed: ${error}`;
            doPackageAction("/api/v1/service/add", [packages], repository, onSuccess, onFailure);
        }
    }

    function packagesRequest() {
        const packages = packageAddInput.val();
        const repository = getRepositorySelector(packageAddRepositoryInput);
        if (packages) {
            packageAddModal.modal("hide");
            const onSuccess = update => `Packages ${update} have been requested`;
            const onFailure = error => `Package request failed: ${error}`;
            doPackageAction("/api/v1/service/request", [packages], repository, onSuccess, onFailure);
        }
    }
</script>