{% extends 'system/base.html' %}

{% block header %}
<script>
/* Declare some comparison operators */
var LESS_THAN = {nicename: 'is less than', value: '__lt'};
var GREATER_THAN = {nicename: 'is greater than', value: '__gt'};
var CONTAINS = {nicename: 'contains', value: '__contains'};
var EXACTLY = {nicename: 'is exactly', value: ''};

/* Create a datastructure that explains what is viable as a filter and
 * what properties should most definitely exist.
 */
var FILTER_DEFS = {
    timewritten: construct_new_atom('Date', [LESS_THAN, GREATER_THAN]),
    trapoid: construct_new_atom('Trap OID', [CONTAINS, EXACTLY]),
    enterprise: construct_new_atom('Enterpise OID', [CONTAINS, EXACTLY]),
    hostname: construct_new_atom('Hostname', [CONTAINS, EXACTLY]),
    category: construct_new_atom('Category', [CONTAINS, EXACTLY]),
    severity: construct_new_atom('Severity', [CONTAINS, EXACTLY]),
    agentip: construct_new_atom('Agent IP', [CONTAINS, EXACTLY]),
    formatline: construct_new_atom('Message', [CONTAINS, EXACTLY])
}

var TRANSLATE = {
    'agentip': 'Agent IP',
    'eventid': 'Event ID',
    'category': 'Category',
    'uptime': 'Uptime',
    'severity': 'Severity',
    'traptime': 'Trap Time',
    'timewritten': 'Time Written To Database',
    'formatline': 'Message',
    'hostname': 'Hostname',
    'community': 'Community',
    'eventname': 'Event Name',
    'trapoid': 'Trap OID',
    'trapread': 'Trap Read',
    'enterprise': 'Enterprise',
    'id': 'ID',
    '__lt': 'is less than',
    '__gt': 'is greater than',
    '__contains': 'contains',
    '':'is exactly'};

/* Helper function for creating the FILTER_DEF datastructure. */
function construct_new_atom(nicename, comparisons) {
    if (comparisons == undefined) {
        comparisons = [];
    }
    
    return {nicename: nicename,
            comparisons: comparisons}
}

function load_filters() {
    show_throbber('#filter-table-body');
    
    var API_URL = BASE_URL + 'api/filter/read';

    $.getJSON(API_URL, function(d) {
        var tbody = $('#filter-table-body');
        tbody.empty();
        
        $.each(d.filters, function(name, filter) {
            var tr = get_tr_for_filter(name, filter);
            tr.appendTo(tbody);
        });

        if(d.filters.length == 0) {
            tbody.append('<tr><td colspan="999"><center>No filters are currently active.</center></td></tr>');
        }

        hide_throbber('#filter-table-body');
    });
}

function get_tr_for_filter(name, filter) {
    var tr = $('<tr>', {'data-index': name});
    var checkbox = $('<input>', {type: 'checkbox',
                                 class: 'filter-select-toggle',
                                 'data-id': filter.id,
                                 'data-index': name});
    $('<td>', {html: checkbox}).appendTo(tr);
    $('<td>', {text: name}).appendTo(tr);

    var td_div = $('<td>').appendTo(tr);

    $.each(filter.actions, function(k, v) { 
        $('<div>', {text: TRANSLATE[v.column_name] + " " + TRANSLATE[v.comparison] + " " + v.value}).appendTo(td_div);
    });
    return tr;
}

function add_filter() {
    var API_URL = BASE_URL + 'api/filter/create';
    var name = $('#filter-name').val();
    var atoms = [];

    $('form.atoms').each(function(d) {
        var k = {};
        var j = $(this).serializeArray();

        $.each(j, function(i, n) {
            k[n.name] = n.value;
        });
        k = JSON.stringify(k);
        atoms.push(k);
    });

    show_throbber();

    $.getJSON(API_URL, {atoms: atoms, 'name': name}, function(d) {
        if(d.error) {
            show_error("Error: Failed to add new filter: " + d.error);
        } else {
            load_filters();
            $('#add-filter-modal').modal('hide');
        }
        hide_throbber();
    });
}

function edit_filter() {
    var API_URL = BASE_URL + 'api/filter/edit';
    var name = $('#filter-name').val();
    var atoms = [];

    $('form.atoms').each(function(d) {
        var k = {};
        var j = $(this).serializeArray();

        $.each(j, function(i, n) {
            k[n.name] = n.value;
        });
        k = JSON.stringify(k);
        atoms.push(k);
    });

    show_throbber();

    $.getJSON(API_URL, {atoms: atoms, 'name': name}, function(d) {
        if(d.error) {
            show_error("Error: Failed to add new filter: " + d.error);
        } else {
            load_filters();
            $('#add-filter-modal').modal('hide');
        }
        hide_throbber();
    });
}

function get_column_name_select(column_name) {
    var column_name_sel = $('<select>', {name: 'column_name', class: 'form-control', id: 'new-atom'});
    column_name != undefined
    set_name = column_name
    
    $.each(FILTER_DEFS, function(key, value) {
        var opt_data = {value: key, 
                        text: value.nicename};
        if(set_name && column_name == opt_data.value) {
            opt_data.selected = 'selected';
        }
        
        column_name_sel.append($('<option>', opt_data));
    })
    
    return column_name_sel;
}

function get_column_comp_select(comparison) {
    var column_comp_sel = $('<select>', {class: 'form-control', name: 'comparison', id: 'comparison'});
    return column_comp_sel;
}

function fill_comp(value, select_box, given_comparison) {
    select_box.empty();
    set_comparison = given_comparison != undefined
    
    $.each(FILTER_DEFS[value].comparisons, function(i, d) {
        var opt_data = {value: d.value, 
                        text: d.nicename};
        if (set_comparison && d.value == given_comparison) {
            opt_data.selected = 'selected';
        }
        select_box.append($('<option>', opt_data));
    });
}

function add_new_atom(column_name, comparison, value) {
    // Make our skeleton
    // console.log(column_name, comparison, value);
    var new_form = $('<form>', {class: 'atoms form-inline', role: 'form'});
    var form_div = $('<div>', {class: 'row form-select-div'});
    new_form.append(form_div);
    
    // Assemble the select box that will hold the column names
    var column_name_div = $('<div>', {class: 'form-group'});
    var column_name_sel = get_column_name_select(column_name);
    column_name_div.append(column_name_sel);
    form_div.append(column_name_div);
    
    // Assemble the select box that will hold the comparison operator for the column name
    var column_comp_div = $('<div>', {class: 'form-group'});
    var column_comp_sel = get_column_comp_select();
    column_comp_div.append(column_comp_sel);
    form_div.append(column_comp_div);
    
    // Set the change for the column name to trigger the column comparison redraw
    column_name_sel.change(function() {fill_comp(column_name_sel.val(), column_comp_sel, comparison)});
    column_name_sel.change();
    
    // Make the text input that will take user input to compare to the column and check to see
    // if comlumn selected is Date then use the timepicker addon to select Date
    var column_value_div = $('<div>', {class: 'form-group'});
    column_value_div.append($('<input>', {name: 'val', 
                                          class: 'form-control', 
                                          placeholder: '...', 
                                          value: (value==undefined) ? '' : value}));
    form_div.append(column_value_div);
    
    // Make the remove button
    var remove_atom_div = $('<div>', {class: 'form-group'});
    var remove_atom_btn = $('<button>', {class: 'btn btn-default remove_atom', type: 'button'});
    remove_atom_btn.append($('<span>', {class: "glyphicon glyphicon-remove brick-red"}));
    remove_atom_btn.click(function() {new_form.remove();});
    remove_atom_div.append(remove_atom_btn);
    form_div.append(remove_atom_div);
    
    $('#insert-div').append(new_form);
}

$(document).ready(function() {

    load_filters();

    $('#add-filter-click, #modal-reset').click(function() {
        $('#filter-action').val('add');
        $('#do-filter-action').html('Add New Filter');
        $('#filter-name').attr('readonly', false);
        $('#insert-div').empty();
        $('#filter-name').val("");
        add_new_atom();
        $('select[name="column_name"]').trigger('change');
        $('#add-filter-modal').modal('show');
    });

    $('#do-filter-action').click(function() {

        var filter_action = $('#filter-action').val();

        if (filter_action == 'add') {
            add_filter();    
        } else {
            edit_filter();
        }
    });

    $('#new-atom-button').click(function() {
        add_new_atom();
    });

    $('#toggle').click(function() {
        var checkboxes = $('.filter-select-toggle');
        checkboxes.attr('checked', !checkboxes.attr('checked'));
    });
    
    $('#atom-home').on('change', 'select[name="column_name"]', function() {
        var column_name = $(this).val();
        console.log(column_name);
        if (column_name == 'timewritten') {
            $(this).closest('.row').find('input[name="val"]').datetimepicker({dateFormat: 'mm-dd-yy', timeFormat: 'HH:mm:ss'});
        } else {
            $(this).closest('.row').find('input[name="val"]').unbind().removeClass('hasDatepicker');
        }
    });

    $('.edit-selected').click(function() {
        $('#filter-action').val('edit');
        $('#insert-div').empty();
        var API_URL = BASE_URL + 'api/filter/read';

        $('.filter-select-toggle:checked').each(function() {
            if($('.filter-select-toggle:checked').length != 1) {
                show_error('You must select exactly one filter to edit.');
            } else {
                var data = {id: $(this).data('id')};
                var index = $(this).data('index');

                $.getJSON(API_URL, data, function(d) {
                    iatom = d.filters[index].actions;
                    $('#insert-div').empty();
                    $('#filter-name').val(index);

                    $.each(iatom, function(i, atom) {
                        add_new_atom(atom.column_name, atom.comparison, atom.value);
                    });

                    $('select[name="column_name"]').trigger('change');
                    $('#add-filter-modal').modal('show');
                    $('#do-filter-action').html('Edit Filter');
                    $('#filter-name').attr('readonly', true);
                });
            }
        });
    });

    $('.delete-selected').click(function() {
        var API_URL = BASE_URL + 'api/filter/delete';
        
        $('.filter-select-toggle:checked').each(function() {
            var data = {name : $(this).attr('data-index')};
            $.getJSON(API_URL, data, function(data) {
                if(data.error) {
                    alert(data.error);
                } else {
                    $(this).parent().parent().remove();
                    load_filters();
                }
            })
        })
    });
})
</script>
{% endblock header %}

{% block content %}
<div class='row container content'>
    <div class="col-md-6">
        <button type="button" class="btn btn-primary add-filter" id="add-filter-click">Add New Filter</button>
    </div>
    <div class="col-md-6"></div>
</div>

<div id='filter-content' class='row container content'>
    <div class='panel panel-default'>
        <div class='panel-heading' id='pagination-summary'></div>
        <div id='pagination' class='panel-body text-center'></div>
        <div class='pull-left'>
            <div class='btn-group btn-group-sm trap-controllers'>
                <button type='button' class='btn btn-default btn-delete'>
                    <a alt='Delete Selected' data-toggle='tooltip' title='Delete Selected' class='delete-selected glyphicon glyphicon-remove'></a>
                </button>
                <label class='btn btn-default btn-edit'>
                    <a alt='Edit Selected' data-toggle='tooltip' title='Edit Selected' class='edit-selected glyphicon glyphicon-pencil'></a>
                </label>
            </div>
        </div>
        <table id='filter-table' class='table table-condensed table-striped table-hover table-bordered'>
            <thead id='filter-table-head'>
                <tr>
                    <th class='text-center toggle-checkbox'><input type="checkbox" id="toggle"></th>
                    <th class='text-center'>Name</th>
                    <th class='text-center'>Description</th>
                </tr>
            </thead>
            <tfoot id='filter-table-foot'>
                <tr>
                    <td colspan='999'>
                        <div class='pull-left'>
                            <div class='btn-group btn-group-sm trap-controllers'>
                                <button type='button' class='btn btn-default btn-delete'>
                                    <a alt='Delete Selected' data-toggle='tooltip' title='Delete Selected' class='delete-selected glyphicon glyphicon-remove'></a>
                                </button>
                                <label class='btn btn-default btn-edit'>
                                    <a alt='Edit Selected' data-toggle='tooltip' title='Edit Selected' class='edit-selected glyphicon glyphicon-pencil'></a>
                                </label>
                            </div>
                        </div>
                    </td>
                </tr>
            </tfoot>
            <tbody class='text-center' id='filter-table-body'>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="add-filter-modal" hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Create A New Filter</h4>
            </div>
            <div class="modal-body">
                <form>
                    <table>
                        <td valign="top">
                            <label>New Filter Name:</label>
                            <input type="text" class="form-control" id="filter-name" placeholder="New Filter"><br><br>
                        </td>
                    </table>
                </form>
                <div id="atom-home">
                    <h4 class="modal-title">Filters</h4><br>
                    <div id="insert-div">
                    </div>
                    <br>
                    <input type="button" id="new-atom-button" class="btn btn-default" value="Add New Filter">
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" id="modal-reset">Reset</button>
                    <button type="submit" class="btn btn-primary" id="do-filter-action">Add New Filter</button>
                    <input type="hidden" id="filter-action">
                </div>
            </div>
        </div>
   </div>
</div>
{% endblock content %}