Skip to content

Commit

Permalink
WIP users page, working updates and deactivation - needs polish
Browse files Browse the repository at this point in the history
  • Loading branch information
@megastary
megastary committed Mar 19, 2024
1 parent 8928191 commit ab1a409
Show file tree
Hide file tree
Showing 8 changed files with 606 additions and 319 deletions.
66 changes: 66 additions & 0 deletions public/javascripts/admin_users.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,69 @@
const myModal = new bootstrap.Modal("#confirm-modal");

// Change settings when checkbox state changes
const checkboxes = document.getElementsByClassName("realtime-checkbox");

const _checkboxesEvent = [...checkboxes].forEach((element) => {
element.addEventListener("change", async function () {
await fetch("/admin_users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
user: this.dataset.user,
name: this.dataset.property,
value: this.checked,
_csrf: document.getElementsByName("_csrf")[0].value,
}),
});
});
});

// Change card when state changes
const cards = document.getElementsByClassName("realtime-card");
const cardEvents = ["paste", "keyup"];

[...cards].forEach((element) => {
cardEvents.forEach(function (event) {
element.addEventListener(event, async function () {
const sanitizedValue = this.value.replace(/\s/g, "");

if (this.checkValidity()) {
this.style.color = "green";
const response = await fetch("/admin_users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
user: this.dataset.user,
name: this.dataset.property,
value: sanitizedValue,
}),
});
if (response.status !== 200) {
this.style.color = "red";
}
} else {
this.style.color = "red";
}
});
});
});

// Display confirmation dialog
async function showConfirm(id) {
const submit = document.getElementById("modal_confirm");
submit.dataset.submit_id = "deactivate_" + id;
myModal.show();
}

// Submit form from modal to confirm deactivation
function submitFromModal(ctx) {
document.getElementById(ctx.dataset.submit_id).submit();
}

// Initialize DataTables
// dom customizes header paging, search and export
// columndefs makes id unsortable, sortabledate hidden, date linked for filtering and displays currency next to price
Expand Down
120 changes: 60 additions & 60 deletions public/javascripts/payments_and_invoices.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
// Initialize Bootstraps 5 tooltips and modal
const tooltipTriggerList = document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
)
);
const tooltipList = [...tooltipTriggerList].map(
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
)
const myModal = new bootstrap.Modal('#qr-modal')
);
const myModal = new bootstrap.Modal("#qr-modal");

// Initialize DataTables
document.addEventListener('DOMContentLoaded', function () {
const table = $('#table-invoices').DataTable({
document.addEventListener("DOMContentLoaded", function () {
const table = $("#table-invoices").DataTable({
dom:
"<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'B>>" +
"<'row'<'col-sm-12'tr>>" +
Expand All @@ -19,116 +19,116 @@ document.addEventListener('DOMContentLoaded', function () {
{ visible: false, targets: 1 },
{ targets: 2, orderData: 1 },
{
type: 'num',
type: "num",
targets: 4,
data: 'Počet kusů',
data: "Počet kusů",
render: function (data, type, _row, _meta) {
return type === 'display' ? data + ' ks' : data
}
return type === "display" ? data + " ks" : data;
},
},
{
type: 'num',
type: "num",
targets: 5,
data: 'Cena',
data: "Cena",
render: function (data, type, _row, _meta) {
return type === 'display' ? data + ' Kč' : data
}
}
return type === "display" ? data + " Kč" : data;
},
},
],
buttons: [
{
extend: 'print',
extend: "print",
exportOptions: {
columns: [1, 3, 4, 5, 6]
}
columns: [1, 3, 4, 5, 6],
},
},
{
extend: 'copyHtml5',
extend: "copyHtml5",
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6]
}
columns: [0, 1, 2, 3, 4, 5, 6],
},
},
{
extend: 'excelHtml5',
extend: "excelHtml5",
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6]
}
columns: [0, 1, 2, 3, 4, 5, 6],
},
},
{
extend: 'csvHtml5',
extend: "csvHtml5",
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6]
}
columns: [0, 1, 2, 3, 4, 5, 6],
},
},
{
extend: 'pdfHtml5',
extend: "pdfHtml5",
exportOptions: {
columns: [1, 3, 4, 5, 6]
}
}
columns: [1, 3, 4, 5, 6],
},
},
],
language: {
url: '/datatables/cs.json',
searchPlaceholder: 'Hledaný výraz'
url: "/datatables/cs.json",
searchPlaceholder: "Hledaný výraz",
},
order: [[6, 'asc']],
order: [[6, "asc"]],
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, 'Vše']
[10, 25, 50, "Vše"],
],
stateSave: false
})
stateSave: false,
});

// If navigating from context aware link, search for specific item
const paymentParam = new URLSearchParams(location.search).get(
'confirmpayment'
)
if (paymentParam) table.search(paymentParam).draw()
})
"confirmpayment"
);
if (paymentParam) table.search(paymentParam).draw();
});

// Display QR Code and handle modal display and button
async function getQrCode(id, paid) {
// Append url to current url
let url = window.location.pathname + '/qrcode'
let url = window.location.pathname + "/qrcode";
// Obtain CSRF token
const csrf = document.getElementsByName('_csrf')[0].value
const csrf = document.getElementsByName("_csrf")[0].value;

// Fetch QRCode data
const response = await fetch(url, {
method: 'POST',
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
invoice_id: id,
_csrf: csrf
})
})
const qrCode = await response.text()
_csrf: csrf,
}),
});
const qrCode = await response.text();

// Handle if supplier does not have IBAN
if (qrCode === 'NOIBAN') {
document.getElementById('qr_code').classList.add('d-none')
document.getElementById('no_qr_code').classList.remove('d-none')
if (qrCode === "NOIBAN") {
document.getElementById("qr_code").classList.add("d-none");
document.getElementById("no_qr_code").classList.remove("d-none");
} else {
document.getElementById('qr_code').classList.remove('d-none')
document.getElementById('no_qr_code').classList.add('d-none')
document.getElementById('qr_code').src = qrCode
document.getElementById("qr_code").classList.remove("d-none");
document.getElementById("no_qr_code").classList.add("d-none");
document.getElementById("qr_code").src = qrCode;
}

// Change button state depending on paid status
const submit = document.getElementById('modal_confirm')
const submit = document.getElementById("modal_confirm");
if (!paid) {
submit.dataset.submit_id = id
submit.disabled = false
submit.dataset.submit_id = id;
submit.disabled = false;
} else {
submit.disabled = true
submit.disabled = true;
}

myModal.show()
myModal.show();
}

// Submit form from modal to confirm payment
function submitFromModal(ctx) {
document.getElementById(ctx.dataset.submit_id).submit()
document.getElementById(ctx.dataset.submit_id).submit();
}
88 changes: 44 additions & 44 deletions public/javascripts/profile.js
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,82 @@
// Initialize Bootstraps 5 tooltips
const tooltipTriggerList = document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
)
);
const tooltipList = [...tooltipTriggerList].map(
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
)
);

async function changeColorMode() {
const color = document.getElementById('colormode')
const color = document.getElementById("colormode");

document.documentElement.setAttribute('data-bs-theme', color.value)
document.documentElement.setAttribute("data-bs-theme", color.value);

await fetch('/profile', {
method: 'POST',
await fetch("/profile", {
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
name: color.id,
value: color.value
})
})
value: color.value,
}),
});
}

// Change settings when checkbox state changes
const checkboxes = document.getElementsByClassName('realtime-checkbox')
const checkboxes = document.getElementsByClassName("realtime-checkbox");

const _checkboxesEvent = [...checkboxes].forEach((element) => {
element.addEventListener('change', async function () {
await fetch('/profile', {
method: 'POST',
element.addEventListener("change", async function () {
await fetch("/profile", {
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
name: this.id,
value: this.checked
})
})
})
})
value: this.checked,
}),
});
});
});

// Change IBAN settings when state changes
const iban = document.getElementById('realtime-iban')
const ibanEvents = ['paste', 'keyup']
const iban = document.getElementById("realtime-iban");
const ibanEvents = ["paste", "keyup"];

ibanEvents.forEach(function (event) {
iban.addEventListener(event, async function () {
const sanitizedValue = this.value.replace(/\s/g, '')
const sanitizedValue = this.value.replace(/\s/g, "");

if (this.checkValidity()) {
this.style.color = 'green'
const status = document.getElementById('iban-status')
status.style.color = 'green'
status.classList.remove('fa-times-circle')
status.classList.add('fa-check-circle')
this.style.color = "green";
const status = document.getElementById("iban-status");
status.style.color = "green";
status.classList.remove("fa-times-circle");
status.classList.add("fa-check-circle");

await fetch('/profile', {
method: 'POST',
await fetch("/profile", {
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({
name: this.id,
value: sanitizedValue
})
})
value: sanitizedValue,
}),
});
} else {
this.style.color = 'red'
const status = document.getElementById('iban-status')
status.style.color = 'red'
status.classList.remove('fa-check-circle')
status.classList.add('fa-times-circle')
this.style.color = "red";
const status = document.getElementById("iban-status");
status.style.color = "red";
status.classList.remove("fa-check-circle");
status.classList.add("fa-times-circle");
}
})
})
});
});

window.onload = function (_event) {
document.getElementById('colormode').value =
document.documentElement.getAttribute('data-bs-theme')
}
document.getElementById("colormode").value =
document.documentElement.getAttribute("data-bs-theme");
};
Loading

0 comments on commit ab1a409

Please sign in to comment.