source: branches/1888_OaaS/HeuristicLab.Services.Optimization.Web/Content/job.view.js @ 17300

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);
        },
        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.$el.empty();
            var div = $('<h3/>').text('Compare with charts').appendTo(this.$el);
            var div = $('<div/>').appendTo(this.$el);
            var rcv = new my.RunCollectionView({model: this.model, el: div});
            rcv.render();
            for (var i = 0; i < this.model.models.length; i++) {
                $('<h3></h3>').text(this.model.models[i].get('name')).appendTo(this.$el);
                var rev = new my.ResultEntryView({ model: this.model.models[i], el: this.$el });
                this.listenTo(rev, 'renderVisualExtension', this.renderVisualExtension);
                rev.render();                          
            }            
        },
        renderVisualExtension: function(model, element) {
            // propagate to client listener
            this.trigger('renderVisualExtension', model, element);
        }
    });

    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 = {};
            this.plotted['params'] = {};
            this.plotted['results'] = {};
        },
        render: function () {
            this.template = _.template($('#runTemplate').html());
            var table = $(this.template(this.model.attributes));
            var body = $('tbody[class="results"]', table);
            table.appendTo(this.$el);
            // render the results of the model
            var results = this.model.get('results');
            for (var i = 0; i < results.length; i++) {
                this.renderModelEntry(results[i], i, body, 'results');                
            }
            // get the visual extension, execute it!
            this.trigger('renderVisualExtension', this.model, body);

            var inputs = this.model.get('params');
            body = $('tbody[class="inputs"]', table);
            for (var i = 0; i < inputs.length; i++) {
                this.renderModelEntry(inputs[i], i, body, 'params');
            }

            var av = new my.AccordionView({el: $(table)});
            av.render();
        },
        renderModelEntry: function(entry, index, body, attribute) {         
            var row = $('<tr/>').attr('data-index', index).attr('data-attribute', attribute);
            $('<td/>').text(entry.Name).appendTo(row);
            if ($.isArray(entry.Value)) {
                var col = $('<td/>').appendTo(row);
                var tevDiv = $('<div/>');
                var plotDiv = $('<div/>').appendTo($('#tmp'));                                
                this.plotted[attribute][index] = {};
                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(entry.Value).appendTo(row);
            }
            row.appendTo(body);
        },
        tabActivated: function (evt) {
            var index = parseInt(evt.element.parents('tr').attr('data-index'));
            var attribute = evt.element.parents('tr').attr('data-attribute');
            if (evt.name == 'Plot' && !this.plotted[attribute][index].Plot) {
                this.plotted[attribute][index].Plot = true;
                var plotDiv = $('<div/>').appendTo($('#tmp'));
                var pv = new my.PlotView({ model: this.model.get(attribute)[index], el: plotDiv, transpose: true });
                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();
                plotDiv.width(rv.$el.width());
                plotDiv.height(rv.$el.height());
                pv.refresh();
            } else if (evt.name == 'Table' && !this.plotted[attribute][index].Table) {
                this.plotted[attribute][index].Table = true;
                var tevDiv = $('<div/>').css('overflow', 'scroll');
                var tev = new my.TableEditView({ model: this.model.get(attribute)[index].Value, rowNames: this.model.get(attribute)[index].RowNames, useDatatable: true, el: tevDiv });
                tev.render();
                tevDiv.appendTo(evt.element)
            }
        }
    });
    return my;
} (OAAS_VIEW || {}, Backbone, _, $));