source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/job.view.js @ 9324

var OAAS_VIEW = (function (my, Backbone, _, $) {
    // ================= VIEWS ===================
    my.LoadingView = Backbone.View.extend({
        render: function () {
            this.$el.empty();
            this.template = _.template($('#loadingTemplate').html());
            $(this.template({ text: this.model })).appendTo(this.$el);
        }
    });

    my.JobOverView = Backbone.View.extend({
        events: {
            'click tr': 'rowClicked',
            'click button[data-name="DeleteButton"]': 'deleteClicked'
        },
        initialize: function () {
            this.collection.bind('remove', this.render, this);
            //this.collection.bind('a', this.render, this);
        },
        render: function () {
            var prevSettings = null;
            if (this.table) {
                prevSettings = this.table.fnSettings();
            }
            this.$el.empty();
            // create header
            var table = $('<table />');
            this.template = _.template($('#jobHeaderTemplate').html());
            $(this.template({})).appendTo(table);

            // create content
            var tbody = $('<tbody />');
            this.collection.each(function (model) {
                var row = new my.JobOverViewRow({ model: model });
                row.render();
                row.$el.appendTo(tbody);
            });
            tbody.appendTo(table);
            table.appendTo(this.$el);
            if (prevSettings != null) {
                this.table = table.dataTable({
                    'aaSorting': prevSettings.aaSorting,
                    'iDisplayLength' : prevSettings._iDisplayLength,
                    'iDisplayStart' : prevSettings._iDisplayStart,
                });
                this.table.fnFilter(prevSettings.oPreviousSearch.sSearch);
            } else {
                this.table = table.dataTable();
            }
            this.highlightSelectedJob();
        },
        highlightSelectedJob: function () {
            $('tr', this.table).removeClass('selectedRow');
            if (this.selectedJob) {
                $('tr[data-jobId="' + this.selectedJob + '"]', this.table).addClass('selectedRow');
            }
        },
        rowClicked: function (row) {
            var jobId = $(row.target).parent("tr").attr("data-jobId");
            if (jobId) {
                this.selectedJob = jobId;
                this.highlightSelectedJob();
                this.trigger('jobSelected', jobId);
            }
        },
        deleteClicked: function (evt) {
            var target = $(evt.target);
            var id = target.attr('data-id');
            var jobs = this.collection.where({ Id: id });
            if (jobs.length == 1) {
                jobs[0].destroy(); // triggers a remove event on this.collection -> DELETE /Job/1 will be called
            }
        }
    });

    my.JobOverViewRow = Backbone.View.extend({
        render: function () {
            this.template = _.template($('#jobRowTemplate').html());
            this.setElement($(this.template(this.model.attributes)));
        }
    });

    my.ResultView = Backbone.View.extend({
        render: function () {
            this.template = _.template($('#runTemplate').html());
            this.$el.empty();
            for (var i = 0; i < this.model.models.length; i++) {
                var rev = new my.ResultEntryView({ model: this.model.models[i], el: this.$el });
                rev.render();
            }
        }
    });

    my.AccordionView = Backbone.View.extend({
        render: function () {
            this.$el.accordion({
                heightStyle: 'content',
                collapsible: true,
                active: false
            });
        },
        refresh: function () {
            this.$el.accordtion("refresh");
        }
    });

    my.ResizableView = Backbone.View.extend({
        events: {
            'resizestop': 'resized'
        },
        render: function () {
            this.$el.resizable();
        },
        resized: function (evt) {
            this.trigger('resized', evt);
        }
    });

    my.TabView = Backbone.View.extend({
        // model structure: [{ name: 
        events: {
            'tabsactivate': 'tabActivated'
        },
        render: function () {
            this.$el.empty();
            var header = $('<ul />').appendTo(this.$el);
            for (var i = 0; i < this.model.length; i++) {
                var li = $('<li/>').appendTo(header);
                var id = 'tab_' + my.PlotView.nextId() + '_' + i;
                $('<a />').attr('href', '#' + id).text(this.model[i].name).appendTo(li);

                var targetDiv = $('<div/>').attr('id', id).appendTo(this.$el);
                $(this.model[i].content).appendTo(targetDiv);
            }
            this.$el.tabs({
                collapsible: true,
                active: false
            });
        },
        tabActivated: function (event, ui) {
            var tabElement = $(ui.newPanel[0]);
            this.trigger('tab-activated', { name: ui.newTab.text(), element: tabElement });
        }
    });

    my.ResultEntryView = Backbone.View.extend({
        initialize: function () {
            this.plotted = {};
        },
        render: function () {
            this.template = _.template($('#runTemplate').html());
            var table = $(this.template(this.model.attributes));
            var body = $("tbody", table);
            table.appendTo(this.$el);
            var results = this.model.get('results');
            for (var i = 0; i < results.length; i++) {
                var row = $('<tr/>').attr('data-index', i);
                $('<td/>').text(results[i].Name).appendTo(row);
                //TODO: Switch Value type and create different items here
                if ($.isArray(results[i].Value)) {
                    var col = $('<td/>').appendTo(row);
                    var tevDiv = $('<div/>');
                    // TODO: REMOVE TABLEEDITVIEW and create it only on demand!!!
                    // var tev = new my.TableEditView({ model: results[i].Value, el: tevDiv, useDatatable: true });
                    // tev.render();
                    var plotDiv = $('<div/>').appendTo($('#tmp'));
                    //var pv = new PlotView({model: results[i], el: plotDiv});
                    //pv.render();
                    this.plotted[i] = {};
                    var tv = new my.TabView({
                        model: [
                          { name: 'Table', content: tevDiv },
                          { name: 'Plot', content: plotDiv },
                        ],
                        el: col
                    });
                    this.listenTo(tv, 'tab-activated', this.tabActivated);
                    tv.render();

                }
                else {
                    $('<td/>').text(results[i].Value).appendTo(row);
                }
                row.appendTo(body);
            }
        },
        tabActivated: function (evt) {
            var index = parseInt(evt.element.parents('tr').attr('data-index'));
            if (evt.name == 'Plot' && !this.plotted[index].Plot) {
                this.plotted[index].Plot = true;
                var plotDiv = $('<div/>').appendTo($('#tmp'));
                var pv = new my.PlotView({ model: this.model.get('results')[index], el: plotDiv });
                pv.render();
                plotDiv.appendTo(evt.element);
                var rv = new my.ResizableView({ el: evt.element });

                this.listenTo(rv, 'resized', function (evt) {
                    plotDiv.height($(evt.target).height() * 0.96);
                    plotDiv.width($(evt.target).width() * 0.96);
                    pv.refresh();
                });
                rv.render();
            } else if (evt.name == 'Table' && !this.plotted[index].Table) {
                this.plotted[index].Table = true;
                var tevDiv = $('<div/>');
                var tev = new my.TableEditView({ model: this.model.get('results')[index].Value, rowNames: this.model.get('results')[index].RowNames, useDatatable: true, el: tevDiv });
                tev.render();
                tevDiv.appendTo(evt.element)
            }
        }
    });
    return my;
} (OAAS_VIEW || {}, Backbone, _, $));