Skip to content

Commit

Permalink
Enlarged kiosk confirm modal, clenaup js
Browse files Browse the repository at this point in the history
  • Loading branch information
@megastary
megastary committed Mar 25, 2024
1 parent 30ca7cb commit 4b02e91
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 111 deletions.
167 changes: 86 additions & 81 deletions public/javascripts/kiosk_shop.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
const myModal = new bootstrap.Modal("#confirm-modal");
// Activate bootstrap modal
const bootstrapModal = new bootstrap.Modal("#confirm-modal");

// Declare variables
const modal = document.getElementById("confirm-modal");
const modalProductName = document.getElementById("product_name");
const modalProductPrice = document.getElementById("product_price");
const modalProductImage = document.getElementById("product_image");
const modalSubmitButton = document.getElementById("modal_confirm_btn");
const modalSubmitContinueButton = document.getElementById(
"modal_confirm_continue_btn"
);
var backgroundInput = "";
var modalCountDownDate;
var modalInterval;

// Functions for screen timer and modal timer
function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes * 60000);
}
Expand All @@ -12,8 +23,33 @@ function addSeconds(date, seconds) {
return new Date(date.getTime() + seconds * 1000);
}

// Function to display confirmation dialog
async function showConfirm(
form_id,
product_name,
product_price,
product_image
) {
modalSubmitButton.dataset.submit_id = form_id;
modalSubmitContinueButton.dataset.submit_id = form_id;
modalProductName.innerText = product_name;
modalProductPrice.innerText = product_price;
modalProductImage.src = product_image;
bootstrapModal.show();
}

// Function to submit purchase and either back to keypad or keep shopping
function submitFromModal(ctx, keepShopping) {
const form = document.getElementById(ctx.dataset.submit_id);
if (keepShopping) {
form.action += "?return=kiosk_shop";
}
form.submit();
}

// On page load start timer, play background music and make product card clickable
document.addEventListener("DOMContentLoaded", function () {
var interval;
var shopInterval;
const backgroundMusic = new Audio("/audio/kiosk_shop_theme.mp3");

// Play background theme music
Expand All @@ -24,21 +60,24 @@ document.addEventListener("DOMContentLoaded", function () {
const _forms = document.querySelectorAll("form").forEach((element) => {
element.addEventListener("click", async function (event) {
event.preventDefault();
if (element.id === "back-button") this.submit();
showConfirm(
this.id,
this.dataset.productname,
this.dataset.productprice,
this.dataset.productimage
);
if (element.id === "back-button") {
this.submit();
} else {
showConfirm(
this.id,
this.dataset.productname,
this.dataset.productprice,
this.dataset.productimage
);
}
});
});

// Set the date we're counting down to
var countDownDate = addMinutes(new Date(), 3);

// Update the count down every 1 second
interval = setInterval(function () {
shopInterval = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();

Expand All @@ -53,99 +92,65 @@ document.addEventListener("DOMContentLoaded", function () {

// If the count down is finished, redirect to keypad to reset page state
if (distance < 1000) {
clearInterval(interval);
clearInterval(shopInterval);
window.location.href = "/kiosk_keypad?timeout=1";
}
}, 1000);
});

let backgroundInput = "";
// Listen for keypress events and handle them - specifically suitable for barcode scanners
document.addEventListener("keydown", function (e) {
e.preventDefault();
if (e.key === "Enter") {
const form = document.querySelector(
"form[data-code='" + backgroundInput + "']"
);
if (form) {
// TODO: Show modal instead
form.action = form.action + "?return=kiosk_shop";
form.submit();
showConfirm(
form.id,
form.dataset.productname,
form.dataset.productprice,
form.dataset.productimage
);
backgroundInput = "";
} else {
console.log("Invalid code", backgroundInput);
let backgroundInput = "";
backgroundInput = "";
}
} else if (e.key.length === 1) {
backgroundInput = backgroundInput + e.key;
}
console.log("Key pressed", e);
e.preventDefault();
});

// Display confirmation dialog
async function showConfirm(
form_id,
product_name,
product_price,
product_image
) {
const submit = document.getElementById("modal_confirm");
const submitContinue = document.getElementById("modal_confirm_continue");
submit.dataset.submit_id = form_id;
submitContinue.dataset.submit_id = form_id;
modalProductName.innerText = product_name;
modalProductPrice.innerText = product_price;
modalProductImage.src = product_image;
myModal.show();
}

// Submit form from modal to confirm purchase - optionally keep shopping
function submitFromModal(ctx, keepShopping) {
const form = document.getElementById(ctx.dataset.submit_id);
if (keepShopping) {
form.action += "?return=kiosk_shop";
}
form.submit();
}

// TODO: Clarify varabile names
var modalCountDownDate;
var modalInterval;

document
.getElementById("confirm-modal")
.addEventListener("shown.bs.modal", function () {
console.log("Modal shown");

document.getElementById("modal_confirm").innerHTML = "Dokončit nákup (3s)";
// On modal shown start timer and finish order when it times out
// On modal hidden clear interval
modal.addEventListener("shown.bs.modal", function () {
modalSubmitButton.innerHTML = "Dokončit nákup (5s)";

// Set the date we're counting down to
modalCountDownDate = addSeconds(new Date(), 4);
// Set the date we're counting down to
modalCountDownDate = addSeconds(new Date(), 6);

// Update the count down every 1 second
modalInterval = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Update the count down every 1 second
modalInterval = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = modalCountDownDate - now;
// Find the distance between now and the count down date
var distance = modalCountDownDate - now;

// var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// If the count down is finished, redirect to keypad to reset page state
if (distance < 1000) {
clearInterval(modalInterval);
document.getElementById("modal_confirm").click();
}
// If the count down is finished, redirect to keypad to reset page state
if (distance < 1000) {
clearInterval(modalInterval);
modalSubmitButton.click();
}

// Display the result in the element with id="timer"
document.getElementById("modal_confirm").innerHTML =
"Dokončit nákup (" + seconds + "s)";
}, 1000);
});
// Display the result in the element with id="timer"
modalSubmitButton.innerHTML = "Dokončit nákup (" + seconds + "s)";
}, 1000);
});

document
.getElementById("confirm-modal")
.addEventListener("hidden.bs.modal", function () {
console.log("Modal hidden");
clearInterval(modalInterval);
});
modal.addEventListener("hidden.bs.modal", function () {
clearInterval(modalInterval);
});
74 changes: 44 additions & 30 deletions views/partials/kiosk_purchase_modal.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="modal" id="confirm-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Dokončení objednávky</h5>
Expand All @@ -10,21 +10,27 @@
aria-label="Close"
></button>
</div>
<div class="modal-body mx-auto">
<div class="modal-body">
{{! List of product name, price and in second column picture of image }}
<div class="row">
<div class="col-6">
<div class="col-6 text-center align-self-center">
<ul class="list-group">
<li class="list-group-item flex-fill"><b>Zákazník</b>:
{{displayName}}</li>
<li class="list-group-item flex-fill"><b>Produkt</b>:
<span id="product_name"></span></li>
<li class="list-group-item flex-fill"><b>Cena</b>:
<span id="product_price"></span>
Kč</li>
<li class="list-group-item flex-fill active"><h3
>Zákazník</h3></li>
<li class="list-group-item flex-fill"><h3
>{{displayName}}</h3></li>
<li class="list-group-item flex-fill active"><h3>Produkt</h3></li>
<li class="list-group-item flex-fill"><h3
id="product_name"
></h3></li>
<li class="list-group-item flex-fill active"><h3>Cena</h3></li>
<li class="list-group-item flex-fill"><h3><span
id="product_price"
></span>
Kč</h3></li>
</ul>
</div>
<div class="col-6">
<div class="col-6 text-center align-self-center">
<img
id="product_image"
src=""
Expand All @@ -35,25 +41,33 @@
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Zpět</button>
<button
id="modal_confirm_continue"
type="button"
class="btn btn-success"
data-bs-dismiss="modal"
onclick="submitFromModal(this, true)"
>Koupit další</button>
<button
id="modal_confirm"
type="button"
class="btn btn-success"
data-bs-dismiss="modal"
onclick="submitFromModal(this, false)"
>Dokončit nákup</button>
<div class="row w-100">
<div class="col">
<button
type="button"
class="btn btn-secondary btn-lg btn-block w-100 h-100 p-5"
data-bs-dismiss="modal"
>Zpět</button>
</div>
<div class="col">
<button
id="modal_confirm_continue_btn"
type="button"
class="btn btn-success btn-lg btn-block w-100 h-100 p-5"
data-bs-dismiss="modal"
onclick="submitFromModal(this, true)"
>Koupit další produkt</button>
</div>
<div class="col">
<button
id="modal_confirm_btn"
type="button"
class="btn btn-success btn-lg btn-block w-100 h-100 p-5"
data-bs-dismiss="modal"
onclick="submitFromModal(this, false)"
>Dokončit nákup</button>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 4b02e91

Please sign in to comment.