get rid of the jquery

This commit is contained in:
Evgenii Alekseev 2024-09-03 18:30:56 +03:00
parent 013ba3d3ab
commit b67e246ea9
5 changed files with 52 additions and 49 deletions

View File

@ -1,12 +1,12 @@
<script>
const alertPlaceholder = $("#alert-placeholder");
const alertPlaceholder = document.getElementById("alert-placeholder");
function createAlert(title, message, clz, action, id) {
if (!id) id = $.md5(title + message); // MD5 id from the content
if (alertPlaceholder.find(`#${id}`).length > 0) return; // check if there are duplicates
if (alertPlaceholder.querySelector(`#alert-${id}`)) return; // check if there are duplicates
const wrapper = document.createElement("div");
wrapper.id = id;
wrapper.id = `alert-${id}`;
wrapper.classList.add("toast", clz);
wrapper.role = "alert";
wrapper.ariaLive = "assertive";
@ -23,7 +23,7 @@
body.innerText = message;
wrapper.appendChild(body);
alertPlaceholder.append(wrapper);
alertPlaceholder.appendChild(wrapper);
const toast = new bootstrap.Toast(wrapper);
wrapper.addEventListener("hidden.bs.toast", _ => {
wrapper.remove(); // bootstrap doesn't remove elements

View File

@ -36,23 +36,23 @@
</div>
<script>
const keyImportModal = $("#key-import-modal");
const keyImportForm = $("#key-import-form");
const keyImportModal = document.getElementById("key-import-modal");
const keyImportForm = document.getElementById("key-import-form");
const keyImportBodyInput = $("#key-import-body-input");
const keyImportCopyButton = $("#key-import-copy-button");
const keyImportBodyInput = document.getElementById("key-import-body-input");
const keyImportCopyButton = document.getElementById("key-import-copy-button");
const keyImportFingerprintInput = $("#key-import-fingerprint-input");
const keyImportServerInput = $("#key-import-server-input");
const keyImportFingerprintInput = document.getElementById("key-import-fingerprint-input");
const keyImportServerInput = document.getElementById("key-import-server-input");
async function copyPgpKey() {
const logs = keyImportBodyInput.text();
await copyToClipboard(logs, keyImportCopyButton);
const key = keyImportBodyInput.textContent;
await copyToClipboard(key, keyImportCopyButton);
}
function fetchPgpKey() {
const key = keyImportFingerprintInput.val();
const server = keyImportServerInput.val();
const key = keyImportFingerprintInput.value;
const server = keyImportServerInput.value;
if (key && server) {
$.ajax({
@ -60,14 +60,14 @@
data: {"key": key, "server": server},
type: "GET",
dataType: "json",
success: response => { keyImportBodyInput.text(response.key); },
success: response => { keyImportBodyInput.textContent = response.key; },
});
}
}
function importPgpKey() {
const key = keyImportFingerprintInput.val();
const server = keyImportServerInput.val();
const key = keyImportFingerprintInput.value;
const server = keyImportServerInput.value;
if (key && server) {
$.ajax({
@ -76,7 +76,7 @@
type: "POST",
contentType: "application/json",
success: _ => {
keyImportModal.modal("hide");
bootstrap.Modal.getInstance(keyImportModal).hide();
showSuccess("Success", `Key ${key} has been imported`);
},
error: (jqXHR, _, errorThrown) => {
@ -88,9 +88,9 @@
}
$(_ => {
keyImportModal.on("hidden.bs.modal", _ => {
keyImportBodyInput.text("");
keyImportForm.trigger("reset");
keyImportModal.addEventListener("hidden.bs.modal", _ => {
keyImportBodyInput.textContent = "";
keyImportForm.reset();
});
});
</script>

View File

@ -34,16 +34,16 @@
</div>
<script>
const loginModal = $("#login-modal");
const loginForm = $("#login-form");
const loginModal = document.getElementById("login-modal");
const loginForm = document.getElementById("login-form");
const loginPasswordInput = $("#login-password");
const loginUsernameInput = $("#login-username");
const showHidePasswordButton = $("#login-show-hide-password-button");
const loginPasswordInput = document.getElementById("login-password");
const loginUsernameInput = document.getElementById("login-username");
const showHidePasswordButton = document.getElementById("login-show-hide-password-button");
function login() {
const password = loginPasswordInput.val();
const username = loginUsernameInput.val();
const password = loginPasswordInput.value;
const username = loginUsernameInput.value;
if (username && password) {
$.ajax({
@ -52,7 +52,7 @@
type: "POST",
contentType: "application/json",
success: _ => {
loginModal.modal("hide");
bootstrap.Modal.getInstance(loginModal).hide();
showSuccess("Logged in", `Successfully logged in as ${username}`, _ => location.href = "/");
},
error: (jqXHR, _, errorThrown) => {
@ -67,20 +67,20 @@
}
function showPassword() {
if (loginPasswordInput.attr("type") === "password") {
loginPasswordInput.attr("type", "text");
showHidePasswordButton.removeClass("bi-eye");
showHidePasswordButton.addClass("bi-eye-slash");
if (loginPasswordInput.getAttribute("type") === "password") {
loginPasswordInput.setAttribute("type", "text");
showHidePasswordButton.classList.remove("bi-eye");
showHidePasswordButton.classList.add("bi-eye-slash");
} else {
loginPasswordInput.attr("type", "password");
showHidePasswordButton.removeClass("bi-eye-slash");
showHidePasswordButton.addClass("bi-eye");
loginPasswordInput.setAttribute("type", "password");
showHidePasswordButton.classList.remove("bi-eye-slash");
showHidePasswordButton.classList.add("bi-eye");
}
}
$(_ => {
loginModal.on("hidden.bs.modal", _ => {
loginForm.trigger("reset");
loginModal.addEventListener("hidden.bs.modal", _ => {
loginForm.reset();
});
});
</script>

View File

@ -33,17 +33,17 @@
</div>
<script>
const packageRebuildModal = $("#package-rebuild-modal");
const packageRebuildForm = $("#package-rebuild-form");
const packageRebuildModal = document.getElementById("package-rebuild-modal");
const packageRebuildForm = document.getElementById("package-rebuild-form");
const packageRebuildDependencyInput = $("#package-rebuild-dependency-input");
const packageRebuildRepositoryInput = $("#package-rebuild-repository-input");
const packageRebuildDependencyInput = document.getElementById("package-rebuild-dependency-input");
const packageRebuildRepositoryInput = document.getElementById("package-rebuild-repository-input");
function packagesRebuild() {
const packages = packageRebuildDependencyInput.val();
const packages = packageRebuildDependencyInput.value;
const repository = getRepositorySelector(packageRebuildRepositoryInput);
if (packages) {
packageRebuildModal.modal("hide");
bootstrap.Modal.getInstance(packageRebuildModal).hide();
const onSuccess = update => `Repository rebuild has been run for packages which depend on ${update}`;
const onFailure = error => `Repository rebuild failed: ${error}`;
doPackageAction("/api/v1/service/rebuild", [packages], repository, onSuccess, onFailure);
@ -51,10 +51,13 @@
}
$(_ => {
packageRebuildModal.on("shown.bs.modal", _ => {
$(`#package-rebuild-repository-input option[value="${repository.architecture}-${repository.repository}"]`).prop("selected", true);
packageRebuildModal.addEventListener("shown.bs.modal", _ => {
const option = packageRebuildRepositoryInput.querySelector(`option[value="${repository.architecture}-${repository.repository}"]`);
if (option) option.selected = "selected";
});
packageRebuildModal.on("hidden.bs.modal", _ => { packageRebuildForm.trigger("reset"); });
packageRebuildModal.addEventListener("hidden.bs.modal", _ => {
packageRebuildForm.reset();
});
});
</script>

View File

@ -33,9 +33,9 @@
await navigator.clipboard.writeText(text);
}
button.html("<i class=\"bi bi-clipboard-check\"></i> copied");
button.innerHTML = "<i class=\"bi bi-clipboard-check\"></i> copied";
setTimeout(()=> {
button.html("<i class=\"bi bi-clipboard\"></i> copy");
button.innerHTML = "<i class=\"bi bi-clipboard\"></i> copy";
}, 2000);
}