site.js

$(function() {

    // Initialize Material Design.
    $.material.init();

    // Set the default steps.
    $('#stepsup, #stepsdown').val(1);

    // Link on click.
    $('a').on('click', function(event) {

        // stop button event.
        event.preventDefault();

        // Put the button html into a jquery object.
        var $button = $(this);

        // Get the ID.
        var id = $button.attr('id');

        // base url
        var request_url = getRequestUrl(id);

        // if button is up and down.
        if(id == 'up' || id == 'down')
        {
            var $steps = $('#steps' + id),
                $range = $('#range' + id);

            // steps
            var steps = $steps.val();

            $steps.val(1);
            $range.val(1);

            // Update request url
            request_url = request_url + '?steps=' + steps;
        }

        // auto on and off switch
        if(id == 'auto_on' || id == 'auto_off')
        {
            var attr, remove, add;

            if(id == 'auto_on') {
                attr   = 'auto_off';
                remove = 'fa-play';
                add    = 'fa-stop';

                $('#up, #down, #home, #rangeup, #rangedown, #shutdown, #reboot').attr('disabled', 'disabled');
                $('#stepsup, #stepsdown').addClass('disabled');
            } else {
                attr   = 'auto_on';
                remove = 'fa-stop';
                add    = 'fa-play';

                $('#up, #down, #home, #rangeup, #rangedown, #shutdown, #reboot').removeAttr('disabled');
                $('#stepsup, #stepsdown').removeClass('disabled');
            }

            $button.attr('id', attr);

            $button.find('i')
                .removeClass(remove)
                .addClass(add)
            ;

        }

        // Show modal.
        if(id == 'reboot' || id == 'shutdown')
        {
            $('.modal-' + id).modal('show');
        }

        // Do request.
        else
        {
            request(request_url);
        }
    });

    $('button').on('click', function()
    {
        // button
        var $button = $(this);

        // ID
        var id = $button.attr('id').replace('button-', '');

        if(id == 'reboot' || id == 'shutdown')
        {
            // Get the request url.
            var request_url = getRequestUrl(id);

            // do the request.
            request(request_url);

            // Hide the modal.
            $('.modal-' + id).modal('hide');
        }
    });

    // Get the request url.
    function getRequestUrl(id)
    {
        // base url
        return "http://" + location.hostname + ":" + location.port + "/" + id + ".htm";
    }

    // Do the request.
    function request(request_url)
    {
        // get request
        $.get(request_url)

        // When success
        .success(function(data)
        {
            // Variables.
            var $alert, melding,
                parsed         = JSON.parse(data),
                $alert_success = $('.alert-success'),
                $alert_danger  = $('.alert-danger');

            if(parsed.success) {
                $alert = $alert_success;
                melding = 'Gelukt!';
            } else {
                $alert = $alert_danger;
                melding = 'Oeps!';
            }

            $alert
                .fadeIn()
                .html('<span><strong>' + melding + '</strong> ' + parsed.message + '</span>')
                .delay(2000)
                .fadeOut()
            ;
        });
    }
});