smash.js

$(document).ready(function () {
    $("#save-and-continue").click(function () {
        var form = $(this).parents("form");
        var hidden_field = $("<input type='hidden' name='_continue' value='1' />");
        form.append(hidden_field);
        form.submit();
    });
    $("[data-hide]").on("click", function () {
        $("." + $(this).attr("data-hide")).hide();
    });

    var formDataChanged = false;

    $(":input", this).change(function () {
        if (this.form !== undefined && this.form !== null) {
            formDataChanged = true;
        }
    });

    $('.main-sidebar a').click(function () {
        if (formDataChanged) {
            return confirm("Data changed. Are you sure you want to leave?");
        } else {
            return true;
        }
    })

});

$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
            // Only send the token to relative URLs i.e. locally.
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    }
});

function showErrorInfo(content) {
    var errorDialogDiv = document.createElement("div");
    document.body.appendChild(errorDialogDiv);
    errorDialogDiv.innerHTML = '<div class="modal-dialog" role="document">' +
        '<div class="modal-content">' +
        '<div class="modal-header">ERROR' +
        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
        '<span aria-hidden="true">&times;</span></button>' +
        '</div>' +
        '<div name="error-content" class="modal-body">' + content + '</div>' +
        '<div class="modal-footer">' +
        '<button type="button" class="btn btn-outline pull-right" data-dismiss="modal">Close</button>' +
        '</div>' +
        '</div>' +
        '</div>';
    $(errorDialogDiv).attr("role", "dialog");
    $(errorDialogDiv).addClass("modal modal-danger fade");
    $(errorDialogDiv).modal("show");
}

//------------------------------------------------------
// common code for dynamic Data Tables
//------------------------------------------------------

if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}

function createColumn(dataType, name, filter, visible, renderFunction) {
    if (renderFunction === undefined) {
        renderFunction = function (data, type, row, meta) {
            return row[dataType];
        }
    }
    return {
        "type": dataType,
        "name": name,
        "filter": filter,
        "visible": visible,
        "render": renderFunction
    };
}

function getColumns(columns, getSubjectEditUrl) {
    var result = [];
    for (var i = 0; i < columns.length; i++) {
        var columnRow = columns[i];
        if (columnRow.type === "edit") {
            result.push(createColumn("id", columnRow.name, columnRow.filter, columnRow.visible, function (data, type, row) {
                var url = getSubjectEditUrl(row.id.toString());

                return '<a href="' + url + '" type="button" class="btn btn-block btn-default">Edit</a>';
            }));
        } else if (/^visit_[0-9]+$/.test(columnRow.type)) {
            var renderFunction = (function () {
                var x = columnRow.type.replace("visit_", "");
                return function (data, type, row) {
                    console.log("render", row.visits);
                    return create_visit_row(row.visits[x - 1]);
                };
            })();

            result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible, renderFunction));

        } else {
            result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible));
        }
    }
    return result;
}

function createHeader(columnsDefinition) {
    var header = document.createElement("thead");
    var headerRow = document.createElement("tr");
    header.appendChild(headerRow);
    for (var i = 0; i < columnsDefinition.length; i++) {
        var column = columnsDefinition[i];
        var element = document.createElement("th");
        element.innerHTML = column.name;
        headerRow.appendChild(element);
    }
    return header;
}

function createFilter(columnsDefinition) {
    var footer = document.createElement("tfoot");
    footer.style.display = "table-header-group";
    var footerRow = document.createElement("tr");
    footer.appendChild(footerRow);
    for (var i = 0; i < columnsDefinition.length; i++) {
        var column = columnsDefinition[i];
        var element = document.createElement("th");
        if (column.filter !== null) {
            element.innerHTML = "<div name='" + column.filter + "'>" + column.name + "</div>";
        }
        footerRow.appendChild(element);
    }
    return footer;
}

function create_visit_row(visit) {
    var color = "white";
    var text = "---";
    if (visit !== undefined && visit !== null) {
        if (visit.status === "DONE") {
            color = "green";
            text = "OK";
        } else if (visit.status === "MISSED") {
            color = "pink";
            text = "MISSED";
        } else if (visit.status === "UPCOMING") {
            color = "#00ffff";
            text = "UPCOMING";
        } else if (visit.status === "EXCEEDED") {
            color = "orange";
            text = "EXCEEDED";
        } else if (visit.status === "SHOULD_BE_IN_PROGRESS") {
            color = "orange";
            text = "IN PROGRESS (NO APPOINTMENTS)";
        } else if (visit.status === "IN_PROGRESS") {
            color = "lightgreen";
            text = "IN PROGRESS";
        }
        text += "<br/>" + visit.datetime_start + " - " + visit.datetime_end;
    }
    return "<div style='background-color:" + color + "';width:100%;height:100%>" + text + "</div>";
}

function createVisibilityCheckboxes(checkboxesElement, columns) {
    var row = null;
    for (var i = 0; i < columns.length; i++) {
        if (i % 10 === 0) {
            row = document.createElement("div");
            row.style.display = "table-row";
            checkboxesElement.appendChild(row);
        }
        var column = columns[i];
        var element = document.createElement("div");
        element.style.display = "table-cell";
        var checked = "";
        if (column.visible) {
            checked = "checked";
        }
        element.innerHTML = "<input type='checkbox' " + checked + " data-column='" + i + "' name='" + column.type + "'/>" + column.name;
        row.appendChild(element);
    }

}

function createTable(params) {
    var tableElement = params.tableElement;
    var worker_locations = params.worker_locations;
    var subject_types_url = params.subject_types_url;
    var locations_url = params.locations_url;
    var flying_teams_url = params.flying_teams_url;
    var subjects_url = params.subjects_url;
    var columnsDefinition = params.columns;

    tableElement.appendChild(createHeader(columnsDefinition));
    tableElement.appendChild(createFilter(columnsDefinition));
    tableElement.appendChild(document.createElement("tbody"));
    createVisibilityCheckboxes(params.checkboxesElement, columnsDefinition);

    var table;
    $(tableElement).find('tfoot div[name="string_filter"]').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" style="width:80px" placeholder="' + title + '" />');
    });

    $(tableElement).find('tfoot div[name="yes_no_filter"]').each(function () {
        $(this).html('<select style="width:60px" ><option value selected="selected">---</option><option value="true">YES</option><option value="false">NO</option></select>');
    });

    $(tableElement).find('tfoot div[name="visit_filter"]').each(function () {
        $(this).html('<select style="width:60px" >' +
            '<option value selected="selected">---</option>' +
            '<option value="MISSED">MISSED</option>' +
            '<option value="DONE">DONE</option>' +
            '<option value="EXCEED">EXCEED</option>' +
            '<option value="IN_PROGRESS">IN PROGRESS</option>' +
            '<option value="SHOULD_BE_IN_PROGRESS">SHOULD BE IN PROGRESS</option>' +
            '<option value="UPCOMING">UPCOMING</option>' +
            '</select>');
    });

    $(tableElement).find('tfoot div[name="location_filter"]').each(function () {
        var obj = $(this);
        obj.html('<select style="width:80px"><option value selected="selected">---</option></select>');
        var select = $('select', obj);
        $.get(locations_url, function (data) {
            $.each(data.locations, function (index, location) {
                select.append('<option value="' + location.id + '">' + location.name + '</option>');
            });
            if (worker_locations.length === 1) {
                select.val(worker_locations[0].id);
            }
        });
    });

    $(tableElement).find('tfoot div[name="flying_team_filter"]').each(function () {
        var obj = $(this);
        obj.html('<select style="width:80px"><option value selected="selected">---</option></select>');
        var select = $('select', obj);
        $.get(flying_teams_url, function (data) {
            $.each(data.flying_teams, function (index, flying_team) {
                select.append('<option value="' + flying_team.id + '">' + flying_team.name + '</option>');
            });
            if (worker_locations.length === 1) {
                select.val(worker_locations[0].id);
            }
        });
    });


    $(tableElement).find('tfoot div[name="type_filter"]').each(function () {
        var obj = $(this);
        obj.html('<select style="width:80px"><option value selected="selected">---</option></select>');
        var select = $('select', obj);
        $.get(subject_types_url, function (data) {
            $.each(data.types, function (index, type) {
                select.append('<option value="' + type.id + '">' + type.name + '</option>');
            });
        });
    });


    $(function () {
        var columns = [];
        var columnDefs = [];
        for (var i = 0; i < columnsDefinition.length; i++) {
            var column = columnsDefinition[i];
            columns.push({"data": column.type});
            columnDefs.push({"targets": i, "render": column.render, visible: column.visible});
        }


        table = $('#table').DataTable({
            pageLength: 25,
            serverSide: true,
            processing: true,
            responsive: true,
            ajax: subjects_url,
            columns: columns,
            columnDefs: columnDefs,
            order: [[0, 'desc']]
        });

        // Apply the search
        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                }
            });
            $('select', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that.search(this.value).draw();
                }
            });
        });
        $('#table_filter').css("display", "null");
    });
    $('#visible-column-checkboxes input').on('click', function (e) {
        var visible = $(this).is(":checked");

        // Get the column API object
        var column = table.column($(this).attr('data-column'));
        console.log($(this).attr('data-column'));
        // Toggle the visibility
        column.visible(visible);
    });
}

//------------------------------------------------------
// END common code for dynamic Data Tables
//------------------------------------------------------