lubelog/Views/Home/Kiosk.cshtml

@{
    ViewData["Title"] = "Kiosk";
}
@model KioskViewModel
@section Scripts {
    <script src="~/lib/masonry/masonry.min.js"></script>
    <script src="~/lib/drawdown/drawdown.js"></script>
}
<div class="no-top-pad">
    <div class="progress" role="progressbar" aria-label="Refresh Progress" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
        <div class="progress-bar" style="width: 0%"></div>
    </div>
    <div id="kioskContainer" class="container-fluid">
    </div>
</div>
<script>
    let refreshTimer;
    let exceptionList = [];
    let subtractAmount = 0;
    let kioskMode = '@Model.KioskMode';
    let currentKioskMode = 'Plan';
    let kioskWakeLock;

    @foreach(int exception in Model.Exclusions)
    {
        @:exceptionList.push(@exception);
    }

    function initKiosk() {
        $("body > div").removeClass("container");
        $("body > div").css('height', '100vh');
        subtractAmount = parseInt($("#kioskContainer").width() * 0.0016); //remove 0.0016% of width every 100 ms which will approximate to one minute.
        if (subtractAmount < 2) {
            subtractAmount = 2;
        }
        retrieveKioskContent();
        //acquire wakeLock;
        try {
            navigator.wakeLock.request('screen').then((wl) => {
                kioskWakeLock = wl;
            });
        } catch (err) {
            warnToast('Wake Lock Not Acquired');
        }
    }
    function setAccessToken(accessToken){
        //use this function to never worry about user session expiring.
        $.ajaxSetup({
            headers: {
                'Authorization': `Basic ${accessToken}`
            }
        });
        console.log("Access Token for Kiosk Mode Configured!");
    }
    function retrieveKioskContent(){
        clearInterval(refreshTimer);
        if (kioskMode != 'Cycle'){
            $.post('/Home/KioskContent', { exclusions: exceptionList, kioskMode: kioskMode }, function (data) {
                $("#kioskContainer").html(data);
                $(".kiosk-content").masonry();
                if ($(".no-data-message").length == 0) {
                    $(".progress-bar").width($("#kioskContainer").width());
                    setTimeout(function () { startTimer() }, 500);
                }
            });
        } else {
            //cycle mode
            switch (currentKioskMode) {
                case "Vehicle":
                    currentKioskMode = "Reminder";
                    break;
                case "Reminder":
                    currentKioskMode = "Plan";
                    break;
                case "Plan":
                    currentKioskMode = "Vehicle";
                    break;
            }
            $.post('/Home/KioskContent', { exclusions: exceptionList, kioskMode: currentKioskMode }, function (data) {
                $("#kioskContainer").html(data);
                $(".kiosk-content").masonry();
                if ($(".no-data-message").length > 0) {
                    //if no data on vehicle page
                    if (currentKioskMode == "Vehicle") {
                        return; //exit
                    } else {
                        retrieveKioskContent(); //skip until we hit a page with content.
                    }
                } else {
                    $(".progress-bar").width($("#kioskContainer").width());
                    setTimeout(function () { startTimer() }, 500);
                }
            });
        }
        
    }
    function startTimer() {
        refreshTimer = setInterval(function () {
            var currentWidth = $(".progress-bar").width();
            if (currentWidth > 0) {
                $(".progress-bar").width(currentWidth - subtractAmount);
            } else {
                retrieveKioskContent();
            }
        }, 100);
    }
    function addVehicleToExceptionList(vehicleId) {
        Swal.fire({
            title: "Remove Vehicle from Dashboard?",
            text: "Removed vehicles can be restored by refreshing the page",
            showCancelButton: true,
            confirmButtonText: "Remove",
            confirmButtonColor: "#dc3545"
        }).then((result) => {
            if (result.isConfirmed) {
                exceptionList.push(vehicleId);
                if (kioskMode == 'Cycle') {
                    //remove the vehicle programmatically.
                    $(`[data-vehicleId=${vehicleId}]`).remove();
                } else {
                    //force a refresh
                    retrieveKioskContent();
                }
            }
        });
    }
    function toggleReminderNote(sender){
        var reminderNote = $(sender).find('.reminder-note');
        var reminderNoteText = reminderNote.text().trim();
        if (reminderNoteText != ''){
            if (reminderNote.hasClass('d-none')) {
                reminderNote.removeClass('d-none');
                if (!reminderNote.hasClass('reminder-note-markdown')){
                    let markedDownReminderNote = markdown(reminderNoteText);
                    reminderNote.html(markedDownReminderNote);
                    reminderNote.addClass('reminder-note-markdown');
                }
            } else {
                reminderNote.addClass('d-none');
            }
            $(".kiosk-content").masonry();
        }
    }
    function togglePlanDetails(sender) {
        toggleReminderNote(sender);
        var planSupplies = $(sender).find('.plan-supplies');
        if (planSupplies.find('.plan-supply').length > 0) {
            if (planSupplies.hasClass('d-none')) {
                planSupplies.removeClass('d-none');
            } else {
                planSupplies.addClass('d-none');
            }
            $(".kiosk-content").masonry();
        }
    }
    initKiosk();
</script>