Skip to content

Commit

Permalink
Update Kiosk design, add timer
Browse files Browse the repository at this point in the history
  • Loading branch information
@megastary
megastary committed Oct 19, 2023
1 parent cade062 commit ef4bcb4
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 41 deletions.
46 changes: 46 additions & 0 deletions public/javascripts/kiosk_keypad.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,50 @@
function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes * 60000)
}

var x

$('.numberBtn').click(function () {
// Stop previous interval
clearInterval(x)

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

// Update the count down every 1 second
x = 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 = countDownDate - now

// Time calculations for days, hours, minutes and seconds
//var days = Math.floor(distance / (1000 * 60 * 60 * 24))
//var hours = Math.floor(
// (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
//)
//var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
var seconds = Math.floor((distance % (1000 * 60)) / 1000)

// Display the result in the element with id="demo"
document.getElementById('timer').value =
//days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's '
seconds + 's'

// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x)
window.location.href = '/kiosk_keypad'
}
}, 1000)

// Display numbers on screen
var currentValue = $('.customer-screen').val()
$('.customer-screen').val(currentValue + $(this).val())
})

$('#reset').click(function () {
clearInterval(x)
document.getElementById('timer').value = '⏱️'
})
39 changes: 39 additions & 0 deletions public/javascripts/kiosk_shop.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,42 @@
function addMinutes(date, minutes) {
return new Date(date.getTime() + minutes * 60000)
}

var x

window.onload = function (event) {
// Set the date we're counting down to
var countDownDate = addMinutes(new Date(), 3)

// Update the count down every 1 second
x = 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 = countDownDate - now

// Time calculations for days, hours, minutes and seconds
//var days = Math.floor(distance / (1000 * 60 * 60 * 24))
//var hours = Math.floor(
// (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
//)
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
var seconds = Math.floor((distance % (1000 * 60)) / 1000)

// Display the result in the element with id="demo"
document.getElementById('timer').value =
//days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's '
minutes + 'm ' + seconds + 's'

// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x)
window.location.href = '/kiosk_keypad'
}
}, 1000)
}

$('form').on('click', function (event) {
event.preventDefault()
$(this).submit()
Expand Down
8 changes: 8 additions & 0 deletions public/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,14 @@ input[type=number] {
/* Firefox */
}

.old-record {
filter: brightness(50%);
}

.keypad {
margin-top: 0.5em;
}

@media screen and (max-width: 991px) {
.float-right {
float: none !important;
Expand Down
75 changes: 42 additions & 33 deletions views/shop/kiosk_keypad.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,97 +6,104 @@
novalidate
>
<div class='card w-75 mx-auto w-100-lg'>
<div class='card-header h4 text-center'>
<div class='card-header h2 text-center'>
Zadejte ID zákazníka
<input
type='button'
value='⏱️'
name='timer'
id='timer'
class='float-end btn disabled btn-block'
/>
</div>
<div class='card-body'>
<div class='form-row'>
<div class='row'>
<div class='col-lg-12'>
<div class='form-row'>
<div class='form-group col'>
<div class='row'>
<div class='col'>
<input
type='text'
name='customer_id'
class='form-control-lg customer-screen z-depth-1 w-100 btn-lg text-center'
class='form-control customer-screen z-depth-1 w-100 btn-lg text-center'
value=''
readonly
/>
</div>
</div>
<div class='form-row'>
<div class='form-group col'>
<div class='row'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='1'
>1</button>
</div>
<div class='form-group col'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='2'
>2</button>
</div>
<div class='form-group col'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='3'
>3</button>
</div>
</div>
<div class='form-row'>
<div class='form-group col'>
<div class='row'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='4'
>4</button>
</div>
<div class='form-group col'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='5'
>5</button>
</div>
<div class='form-group col'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='6'
>6</button>
</div>
</div>
<div class='form-row'>
<div class='form-group col'>
<div class='row'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='7'
>7</button>
</div>
<div class='form-group col'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='8'
>8</button>
</div>
<div class='form-group col'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='9'
>9</button>
</div>
</div>
<div class='form-row'>
<div class='form-group col'>
<div class='row'>
<div class='col'>
<button
type='button'
class='numberBtn btn btn-primary btn-block btn-lg waves-effect'
class='form-control numberBtn btn keypad btn-primary btn-block btn-lg waves-effect'
value='0'
>0</button>
</div>
Expand All @@ -106,18 +113,19 @@
</div>
<!-- End of card-body -->
<div class='card-footer text-muted'>
<div class='form-row'>
<div class='row'>
<div class='col-lg-6'>
<input
id='reset'
type='reset'
class='btn btn-danger btn-lg btn-block'
class='form-control btn btn-danger btn-lg btn-block'
value='Reset'
/>
</div>
<div class='col-lg-6'>
<input
type='submit'
class='btn btn-success btn-lg btn-block'
class='form-control btn btn-success btn-lg btn-block'
value='Pokračovat'
/>
</div>
Expand All @@ -126,6 +134,7 @@
</div>
</form>
<style>
.btn-lg { height: 12vh; font-size: 2rem; }
.btn-lg { height: 12vh; font-size: 2rem; } html, body {margin: 0; height:
100%; overflow: hidden};
</style>
<script type='text/javascript' src='/javascripts/kiosk_keypad.js'></script>
46 changes: 38 additions & 8 deletions views/shop/kiosk_shop.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,49 @@
<div class="card-body py-1">
<div class="row">
<div class="col-lg">
<input type="button" value="ID: {{customer.keypadId}}" name="customerName" id="customerName"
class="btn btn-outline disabled btn-block btn-lg" />
<form action="/kiosk_keypad" method="get">
<input type="submit" value="Zpět" name="Submit" id="Submit"
class="form-control btn btn-primary btn-block waves-effect" />
</form>
</div>
<div class="col-lg">
<input type="button" value="{{customer.displayName}}" name="customerName" id="customerName"
class="btn btn-outline disabled btn-block btn-lg" />
class="form-control btn btn-outline disabled btn-block" />
</div>
<div class="col-lg">
<form action="/kiosk_keypad" method="get">
<input type="submit" value="Zpět" name="Submit" id="Submit"
class="btn btn-primary btn-block btn-lg waves-effect" />
</form>
<input
type='button'
value='3m 00s'
name='timer'
id='timer'
class='form-control float-end btn btn-outline disabled btn-block'
/>
</div>
</div>
<div class="row keypad">
<div class="col-lg">
<input type="radio" class="btn-check" name="product-filter" id="all" autocomplete="off" checked>
<label class="form-control btn btn-outline-primary" for="all">Vše</label>
</div>
<div class="col-lg">
<input type="radio" class="btn-check" name="product-filter" id="drinks" autocomplete="off">
<label class="form-control btn btn-outline-primary" for="drinks">Nápoje</label>
</div>
<div class="col-lg">
<input type="radio" class="btn-check" name="product-filter" id="sweets" autocomplete="off">
<label class="form-control btn btn-outline-primary" for="sweets">Sladkosti</label>
</div>
<div class="col-lg">
<input type="radio" class="btn-check" name="product-filter" id="salts" autocomplete="off">
<label class="form-control btn btn-outline-primary" for="salts">Slanosti</label>
</div>
<div class="col-lg">
<input type="radio" class="btn-check" name="product-filter" id="frozen" autocomplete="off">
<label class="form-control btn btn-outline-primary" for="frozen">Mražené</label>
</div>
<div class="col-lg">
<input type="radio" class="btn-check" name="product-filter" id="fastfood" autocomplete="off">
<label class="form-control btn btn-outline-primary" for="fastfood">Minutky</label>
</div>
</div>
</div>
Expand Down Expand Up @@ -68,5 +99,4 @@
</div>
{{/each}}
</section>
<script type="text/javascript" src="/javascripts/form_validate.js"></script>
<script type="text/javascript" src="/javascripts/kiosk_shop.js"></script>

0 comments on commit ef4bcb4

Please sign in to comment.