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

View File

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

View File

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

View File

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

View File

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