www/slideshow/scripts/index.js

(function () {
    "use strict";

    var _Root;
    var _RootAlt;
    var _ImageZero;
    var _DataDirectory;

    var _Pause = 0;
    var _Images = [];
    var _JsonInterval;
    var _ImageInterval;
    var _ImageIndex = 0;
    var _OpaqueIndex = 0;
    var _DeviceReadyDiv = $('#deviceReady div');

    var time = document.createElement('time');
    time.setAttribute('style', 'position: fixed;');

    function loadData() {
        var currentDate = new Date();
        var mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
        var dd = currentDate.getDate().toString().padStart(2, '0');
        if (window.location.href.indexOf('time') > 0) {
            time.innerText = mm + '-' + dd + '.json';
        }
        var url = _DataDirectory + '/' + mm + '-' + dd + '.json?nocache=2024-11-16-09-19';
        console.log(url);
        $.getJSON(url, function (data) {
            console.log('success', data.length);
            _Images = [];
            $.each(data, function (_, value) {
                _Images.push(value.replaceAll("\\", "/"));
            });
        })
            .done(function () { console.log('second success'); })
            .fail(function (er) { console.log('error', er); })
            .always(function () { console.log('complete'); });
    }

    function onTickJSON() {
        var currentDate = new Date();
        var currentHours = currentDate.getHours();
        if (currentHours === 0) {
            var currentMinutes = currentDate.getMinutes();
            if (currentMinutes === 0) {
                loadData();
            }
        }
    }

    function GetBackgroundImage() {
        var result = "background-image: url('" + _Root + _Images[_ImageIndex] + '?index=' + _ImageIndex + "'), url('";
        if (_RootAlt !== null) {
            result = result + _RootAlt + _Images[_ImageIndex] + '?index=' + _ImageIndex + "'), url('";
        }
        result = result + _ImageZero + "');";
        return result;
    }

    function onTickImage() {
        if (_Images.length > 0 && _Pause === 0) {
            var currentDate = new Date();
            var currentHours = currentDate.getHours();
            if (currentHours >= 22 || currentHours <= 6) {
                _DeviceReadyDiv.attr('style', 'background-color: #191717;');
            }
            else {
                _DeviceReadyDiv.eq(_OpaqueIndex).removeClass('opaque');
                _ImageIndex += 1;
                if (_ImageIndex >= _Images.length) {
                    _ImageIndex = 0;
                }
                var loadIndex;
                switch (_OpaqueIndex) {
                    case 0:
                        loadIndex = 2;
                        _OpaqueIndex = 1;
                        break;
                    case 1:
                        loadIndex = 0;
                        _OpaqueIndex = 2;
                        break;
                    case 2:
                        loadIndex = 1;
                        _OpaqueIndex = 0;
                        break;
                    default:
                }
                var backgroundImage = GetBackgroundImage();
                _DeviceReadyDiv.eq(loadIndex).attr('style', backgroundImage);
                _DeviceReadyDiv.eq(_OpaqueIndex).addClass('opaque');
                if (window.location.href.indexOf('time') > 0) {
                    var mm = (new Date().getMonth() + 1).toString().padStart(2, '0');
                    var dd = currentDate.getDate().toString().padStart(2, '0');
                    time.innerText = mm + '-' + dd + '.json' + ' ' + _Images[_ImageIndex];
                }
            }
        }
    }

    function pause() {
        _Pause = 1;
        $('#deviceReady').innerHTML = '<div></div>';
    }

    function goBack() {
        if (_Pause === 0) {
            pause();
        }
        _ImageIndex -= 1;
        if (_ImageIndex === 0) {
            _ImageIndex = _Images.length - 1;
        }
        var backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

    function goForward() {
        if (_Pause === 0) {
            pause();
        }
        _ImageIndex += 1;
        if (_ImageIndex >= _Images.length) {
            _ImageIndex = 0;
        }
        var backgroundImage = GetBackgroundImage();
        _DeviceReadyDiv.attr('style', backgroundImage);
    }

    function getInput(e) {
        var which = e.which;
        switch (which) {
            case 13: //Okay
                if (_Pause === 0) {
                    _Pause = 1;
                }
                else {
                    _Pause = 0;
                    $('#deviceReady').innerHTML = '<div class="opaque"></div><div></div><div></div>';
                }
                break;
            case 37: //Left
                goBack();
                break;
            case 38: //Up
                goForward();
                break;
            case 39: //Right
                goForward();
                break;
            case 40: //Down
                goBack();
                break;
            case 173: //Fast Forward
                goForward();
                break;
            case 177: //Rewind
                goBack();
                break;
            default:
        }
    }

    if (window.location.href.indexOf('time') > 0) {
        document.body.appendChild(time);
    }

    if (window.location.href.indexOf('last') > 0) {
        var url = '../log-nginx/access.log?nocache=2024-11-16-09-19';
        $.get(url, function (data) {
            var arrayOfUrl = [];
            var arrayOfIndex = [];
            var arrayOfLines = data.match(/[^\r\n]+/g);
            for (var i = arrayOfLines.length - 1; i >= 0; i--) {
                arrayOfUrl = arrayOfLines[i].split('?index=');
                if (arrayOfUrl.length !== 2)
                    continue;
                arrayOfIndex = arrayOfUrl[1].split(' ');
                if (arrayOfIndex.length < 2)
                    continue;
                var index = parseInt(arrayOfIndex[0]);
                console.log('index', index);
                _ImageIndex = index;
                break;
            }
        })
            .fail(function (err) {
                console.error(err);
            });
    }

    $(document).ready(function () {

        console.log('onDeviceReady');

        document.addEventListener('keyup', getInput, false);

        var url = '../slideshow/index.json?nocache=2024-11-16-09-19';
        console.log(url);
        var _ = $.getJSON(url, function (data) {
            console.log(url + ' downloaded successfully');
            _RootAlt = null;
            _Root = data.Root;
            _ImageZero = data.ImageZero;
            _JsonInterval = data.JsonInterval;
            _ImageInterval = data.ImageInterval;
            _DataDirectory = data.DataDirectory;
            console.log(url + ' used successfully');
        })
            .done(function () {
                loadData();
                _ = setInterval(onTickJSON, _JsonInterval);
                _ = setInterval(onTickImage, _ImageInterval);
            })
            .fail(function (er) { console.log('error', er); })
            .always(function () { console.log('complete'); });
    });

})();