Skip to content

Commit

Permalink
mark in/correct, toast notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
@faisalnjs
faisalnjs committed Oct 2, 2024
1 parent 8fef275 commit 13c3dd8
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 15 deletions.
23 changes: 10 additions & 13 deletions src/checker/admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -754,15 +754,14 @@ function markCorrect() {
"Content-Type": "application/json",
},
body: JSON.stringify({
segment: this.parentElement.querySelector('#response-segment-input').value,
question_number: this.parentElement.querySelector('#response-question-input').value,
response: this.parentElement.querySelector('#response-response-input').value
question_id: questions.find(q => q.number == this.parentElement.querySelector('#response-question-input').value).id,
answer: this.parentElement.querySelector('#response-response-input').value
}),
})
.then(q => q.json())
.then(() => {
ui.modeless(`<i class="bi bi-check-lg"></i>`, "Updated Status");
updateResponses();
ui.toast("Successfully updated status.", 3000, "success", "bi bi-check");
init();
})
.catch((e) => {
console.error(e);
Expand Down Expand Up @@ -790,32 +789,30 @@ function markIncorrect() {
text: 'Continue',
class: 'submit-button',
onclick: (inputValue) => {
markIncorrectConfirm(inputValue);
markIncorrectConfirm(inputValue, this);
},
close: true,
},
],
});
}

function markIncorrectConfirm(reason) {
return alert(reason)
function markIncorrectConfirm(reason, e) {
fetch(domain + '/mark_incorrect', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
segment: this.parentElement.querySelector('#response-segment-input').value,
question_number: this.parentElement.querySelector('#response-question-input').value,
response: this.parentElement.querySelector('#response-response-input').value,
question_id: questions.find(q => q.number == e.parentElement.querySelector('#response-question-input').value).id,
answer: e.parentElement.querySelector('#response-response-input').value,
reason: reason
}),
})
.then(q => q.json())
.then(() => {
ui.modeless(`<i class="bi bi-check-lg"></i>`, "Updated Status");
updateResponses();
ui.toast("Successfully updated status.", 3000, "success", "bi bi-check");
init();
})
.catch((e) => {
console.error(e);
Expand Down
50 changes: 50 additions & 0 deletions src/design.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -644,4 +644,54 @@ body:has(.selecting) #controls-container [data-delete-multiple] {

hidden {
display: none;
}

.toast-container {
position: fixed;
bottom: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 1000;
background: transparent;
}

.toast {
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--surface-color);
color: var(--text-color);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 250ms ease, transform 250ms ease;
line-height: 13px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 0.5rem;
}

.toast i {
font-size: 1.5rem;
}

.toast.success {
background-color: #4caf50;
color: #ffffff;
}

.toast.error {
background-color: #f44336;
color: #ffffff;
}

.toast-progress-bar {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: rgba(0, 0, 0, 0.1);
width: 0;
}
46 changes: 44 additions & 2 deletions src/modules/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,17 @@ export function prompt(title, text, buttons, blur) {

export function modal(options) {
const dialog = document.createElement("dialog");

if (options.title) {
const title = document.createElement("h2");
title.innerText = options.title;
dialog.append(title);
}

if (options.body) {
dialog.innerHTML += options.body
dialog.innerHTML += options.body;
}

if (options.input) {
const input = document.createElement("input");
input.type = options.input.type || "text";
Expand All @@ -42,19 +45,24 @@ export function modal(options) {
input.className = "dialog-input";
dialog.appendChild(input);
}

document.body.append(dialog);

options.buttons.forEach(button => {
const btnElement = new Element("button", button.text, {
click: () => {
button.close && dialog.close();
if (button.onclick) {
const inputValue = dialog.querySelector(".dialog-input") ? dialog.querySelector(".dialog-input").value : null;
button.onclick(inputValue);
}
if (button.close) {
dialog.close();
}
},
}, button.class).element;
dialog.appendChild(btnElement);
});

const keyframes = [{ opacity: 0 }, { opacity: 1 }];
animate(
dialog,
Expand All @@ -68,7 +76,9 @@ export function modal(options) {
},
250,
);

dialog.showModal();

dialog.addEventListener("close", () => {
setTimeout(() => {
dialog.animate(keyframes, {
Expand All @@ -81,6 +91,7 @@ export function modal(options) {
}, 100);
}, 2400);
});

return dialog;
}

Expand Down Expand Up @@ -480,3 +491,34 @@ export function setButtonSelectValue(element, value) {
element.querySelector(`button[data-value="${value}"]`).setAttribute("aria-selected", true);
}
}

export function toast(message, duration = 3000, type = "info", icon = null) {
const toastContainer = document.querySelector(".toast-container") || createToastContainer();
const toastElement = new Element("div", message, null, `toast ${type}`).element;
if (icon) {
const iconElement = document.createElement("i");
iconElement.className = icon;
toastElement.prepend(iconElement);
}
const progressBar = document.createElement("div");
progressBar.className = "toast-progress-bar";
toastElement.appendChild(progressBar);
toastContainer.appendChild(toastElement);
animate(toastElement, { transform: "translateX(100%)", opacity: "0" }, { transform: "translateX(0)", opacity: "1" }, 250);
progressBar.style.transition = `width ${duration}ms linear`;
setTimeout(() => {
progressBar.style.width = "100%";
}, 10);
setTimeout(() => {
animate(toastElement, { transform: "translateX(0)", opacity: "1" }, { transform: "translateX(100%)", opacity: "0" }, 250);
setTimeout(() => {
toastElement.remove();
}, 250);
}, duration);
function createToastContainer() {
const container = document.createElement("div");
container.className = "toast-container";
document.body.appendChild(container);
return container;
}
}

0 comments on commit 13c3dd8

Please sign in to comment.