macropad/static/widgets.js

function runCommand(cmd)
{
    $.ajax({
        url : './',
        type : 'GET',
        data : {
            'cmd' : cmd
        },
        dataType:'json'});
}

function addApplet(config)
{
    var fn = window["app_" + config['name']];
    // is object a function?
    if (typeof fn === "function")
    {
        //let cfg = JSON.parse(JSON.stringify(config));
        let cfg = config

        let a = $("<a>");
        let obj = fn(a, cfg);
        a.addClass("block");
        a.append(obj);
        $("#blocks").append(a);

        if('cmd' in cfg)
        {
            a.click(function() {
                command = cfg['cmd']
                command = command.replace("$text", a.text());
                runCommand(command)
            });
        }

        if ('cooldown' in cfg)
        {
            let progressDiv = $("<div>");
            progressDiv.addClass("cooldownProgress");
            a.append(progressDiv);
            progressDiv.hide();

            a.click(function() {
                a.css("pointer-events", "none");
                a.addClass("disabled");

                let cooldownTime = cfg['cooldown'];
                let fadeInTime = 200;

                if (cooldownTime < fadeInTime)
                    fadeInTime = cooldownTime*0.2;
                
                let progBarTime = cooldownTime - fadeInTime;

                progressDiv.css({
                    'width': '100%',
                    'margin-left': '8%'
                });

                if (cfg['show_cooldown'] !== false)
                {
                    progressDiv.fadeIn(fadeInTime, function() {
                        progressDiv.animate({'width': '0%', 'margin-left':'50%'}, progBarTime);
                    });
                }

                setTimeout(function() {
                    
                    a.css("pointer-events", "auto");
                    a.removeClass("disabled");
                    progressDiv.hide();
                }, cooldownTime);
            })
        }
    }
    else
    {
        alert("unrecognised applet: " + cfg['name']);
    }
}

function app_clock(a, config)
{
    var span = $("<span>");

    span.addClass("maximise");

    function setTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
    
        if (h < 10) h = "0" + h;
        if (m < 10) m = "0" + m;
        span.html(h + ":" + m);
    }

    setInterval(setTime, 1000);
    setTime();

    return span;
}

function app_toggle(a, config)
{
    var span = $("<span>");
    
    span.addClass("maximise");

    let currentState = false
    let onIcon = "ON";
    let offIcon = "OFF";

    if ('default' in config) {
        currentState = config['default'];
    }

    if ('text_on' in config) {
        onIcon = config['text_on'];
    }

    if ('text_off' in config) {
        offIcon = config['text_off'];
    }

    function setToggleIcon() {
        if (currentState == true) {
            span.html(onIcon);
        } else {
            span.html(offIcon);
        }
    }

    a.click(function() {
        currentState = !currentState;
        if (currentState == true && 'cmd_on' in config && config['cmd_on'].length > 0) {
            runCommand(config['cmd_on'])
        } else if (currentState == false && 'cmd_off' in config && config['cmd_off'].length > 0) {
            runCommand(config['cmd_off'])
        }
        setToggleIcon();
    });

    setToggleIcon();

    return span;
}