Free cookie consent management tool by TermsFeed Policy Generator

source: branches/OaaS/HeuristicLab.Services.Optimization.Web/Content/experiment.controller.js @ 9324

Last change on this file since 9324 was 9324, checked in by fschoepp, 11 years ago

#1888:

  • DAL: Added a Delete method which deletes by experiment id.
  • HL DataTables will now be transposed and mapped as double[ROWS][COLUMNS] (transposed)
  • JS: Moved all classes into "modules" to prevent namespace pollution (using OAAS_MODEL for model classes, OAAS_VIEW for views and OAAS_CONTROLLER for controllers)
  • JS: Moved DatatypeMapper classes into Backbone views
  • JS: Models now correctly send DELETE requests
  • Added a new job overview page (which also renders run details) using AJAX
  • Using moment.min.js to format DateTime as string
  • Controllers now inherit from BaseController which provides a RedirectToLoginIfNecessary-method
  • Added loading animations to several AJAX bound places (loading experiments / scenarios)
  • Added a section to _Layout.cshtml which allows page-specific JavaScript includes (<script> only for a certain page)
  • Fixed Build/Edit of experiment menu redirecting to the wrong page
  • The Experiment Variation Dialog disables input fields, if the property has not been activated before
File size: 13.3 KB
RevLine 
[9324]1var OAAS_CONTROLLER = (function (my, Backbone, OAAS_VIEW, OAAS_MODEL, _, $) {
2    my.GeneralController = function () {
3        this.variationRequestHandler = function (evt) {
4            var self = this;
5            var dialog = new OAAS_VIEW.VariationDialog({ model: evt.model });
6            var dialogController = {};
7            _.extend(dialogController, Backbone.Events);
8            dialogController.listenTo(dialog, 'variations-generated', function (variations) {
9                var parent = evt.model.get('parent');
10                for (var i = 0; i < variations.length; i++) {
11                    var title = evt.model.get('title');
12                    var offset = title.indexOf('(')
13                    if (offset != -1) {
14                        title = title.substring(0, offset);
15                    }
16                    title += '(';
17                    for (var j = 0; j < variations[i].length; j++) {
18                        title += variations[i][j].Name + " = " + variations[i][j].Value + "; ";
19                    }
20                    title += ')';
21                    var data = { AlgorithmParameters: variations[i] };
22                    if (evt.model.attributes.data.ProblemParameters) {
23                        data.ProblemParameters = evt.model.attributes.data.ProblemParameters;
24                    }
25                    parent.addNode({ title: title, nodeId: evt.model.get('nodeId'), data: data });
[9305]26                }
[9324]27                self.model.trigger('change');
28            });
29            dialog.render();
30        },
31        this.experimentFinishedHandler = function (experimentModel, availableExperiments, selectableGroup) {
32            var loadingDialog = new OAAS_VIEW.LoadingDialog({ el: $('#loadingDialog') });
33            // start the loading dialog
34            loadingDialog.setLoading(true);
35            loadingDialog.text('Saving experiment ' + experimentModel.get('title') + '...');
36            loadingDialog.render();
37            // send experiment to server
38            experimentModel.save({}, { success: function () {
39                loadingDialog.setLoading(false);
40                loadingDialog.text('Experiment successfully saved!');
41                loadingDialog.render();
42                if (availableExperiments)
43                    availableExperiments.fetch({ cache: false, success: function (itm) {
44                        selectableGroup.render();
45                    }
46                    });
[9305]47            }
[9324]48            });
49            //loadingDialog.close();
[9305]50        }
51    }
52
[9324]53    my.ExperimentPageController = function () {
54        this.refreshExperiments = function () {
55            var availableExperiments = new OAAS_MODEL.ExperimentList();
56            availableExperiments.fetch({ cache: false, success: function (itm) {
57                var group = new OAAS_VIEW.DraggableGroup({ collection: availableExperiments, el: $('#experiments') });
58                group.render();
[9305]59            }
[9324]60            });
61        },
62        this.refreshScenarios = function () {
63            var availableScenarios = new OAAS_MODEL.ScenarioList();
64            availableScenarios.fetch({ cache: false, success: function (itm) {
65                var group = new OAAS_VIEW.DraggableGroup({ collection: availableScenarios, el: $('#algorithms') });
66                group.render();
67            }
68            });
69        },
70        this.create = function () {
71            var self = this;
72            var generalController = new my.GeneralController();
73            // create all models + required view for the experiment page
74            var model = new OAAS_MODEL.ExperimentNode({
75                title: 'Experiment',
76                key: 0,
77                isExperiment: true
78            }, { parse: true });
79            generalController.model = model;
80            var experimentModel = new OAAS_MODEL.Experiment({ experiment: model });
[9305]81
[9324]82            var view = new OAAS_VIEW.ExperimentTreeView({ model: model, el: $('#container') });
83            view.render();
[9305]84
[9324]85            this.refreshScenarios();
[9305]86
[9324]87            this.refreshExperiments();
[9305]88
[9324]89            var wizard = new OAAS_VIEW.StepWizardView({ el: $('#stepWizard') });
90            wizard.render();
[9305]91
[9324]92            var detailsView = new OAAS_VIEW.ExperimentDetailsTreeView({ model: model, el: $('#container2') });
93            var validationView = new OAAS_VIEW.ValidationHintsView({ model: { header: "Validation failed!", text: ""} });
94            var parameterDialog = new OAAS_VIEW.ParameterDialog({ model: model, el: $('#parameterDialog') });
[9305]95
[9324]96            var wizardController = {};
97            _.extend(wizardController, Backbone.Events);
[9305]98
[9324]99            wizardController.listenTo(model, 'change', function () {
100                // update the details view, when the model changes
101                view.render();
102                detailsView.render();
103            });
[9305]104
105
[9324]106            wizardController.listenTo(wizard, 'experiment-finished', function () {
107                generalController.experimentFinishedHandler(experimentModel, null, null);
108                self.refreshExperiments();
109            });
[9305]110
[9324]111            wizardController.listenTo(view, 'structure-changed', function (node) {
112                view.render();
113                detailsView.render();
114            });
[9305]115
[9324]116            wizardController.listenTo(view, 'node-added', function (node) {
117                // get details about the node
118                node.fetch({ success: function (itm) {
119                    model.trigger('change', {});
120                }
121                });
[9305]122            });
123
[9324]124            wizardController.listenTo(detailsView, 'node-clicked', function (node) {
125                // get details about the node
126                var modelNode = OAAS_MODEL.ExperimentNode.lookup(node.data.key);
127                if (!modelNode.get('isExperiment')) {
128                    parameterDialog.model = modelNode;
129                    parameterDialog.render();
130                }
131            });
[9305]132
[9324]133            wizardController.listenTo(parameterDialog, 'parameters-finished', function (node) {
134                parameterDialog.close();
135            });
[9305]136
[9324]137            wizardController.listenTo(view, 'variation-request', function (evt) {
138                generalController.variationRequestHandler(evt);
139            });
[9305]140
[9324]141            var experimentDetailsView = new OAAS_VIEW.ExperimentDetailsView({ el: $('#step3'), model: experimentModel });
142
143
144        }
[9305]145    }
146
147
148
[9324]149    /// ==================== EDIT PAGE =========================
150    /// ==================== EDIT PAGE =========================
151    /// ==================== EDIT PAGE =========================
[9305]152
[9324]153    my.ExperimentEditPageController = function () {
154        this.refreshScenarios = function () {
155            var availableScenarios = new OAAS_MODEL.ScenarioList();
156            availableScenarios.fetch({ cache: false, success: function (itm) {
157                var group = new OAAS_VIEW.DraggableGroup({ collection: availableScenarios, el: $('#draggableAlgorithms') });
158                group.render();
159            }
160            });
161        },
162        this.create = function () {
163            var generalController = new my.GeneralController();
[9305]164
[9324]165            var self = this;
166            // create all models + required view for the experiment page
167            var controllerModel = new OAAS_MODEL.ControllerModel();
168            var model = new OAAS_MODEL.ExperimentNode({
169                title: 'Experiment',
170                key: 0,
171                isExperiment: true
172            }, { parse: true });
[9305]173
[9324]174            generalController.model = model;
175            var experimentModel = new OAAS_MODEL.Experiment({ experiment: model });
176            var experimentDetailsView = new OAAS_VIEW.ExperimentDetailsView({ el: $('#step4'), model: experimentModel });
177            experimentDetailsView.render();
[9305]178
[9324]179            var availableExperiments = new OAAS_MODEL.ExperimentList();
[9305]180
[9324]181            var wizardController = {};
182            _.extend(wizardController, Backbone.Events);
[9305]183
[9324]184            this.refreshScenarios();
[9305]185
[9324]186            var selectableGroup = new OAAS_VIEW.SelectableGroup({ collection: availableExperiments, el: $('#experiments') });
187            //selectableGroup.render();
188            var draggableExperiments = new OAAS_VIEW.DraggableGroup({ collection: availableExperiments, el: $('#draggableExperiments') });
189            availableExperiments.fetch({ cache: false, success: function (itm) {
190                // selectableGroup = new OAAS_VIEW.SelectableGroup({ collection: availableExperiments, el: $('#experiments') });
191                selectableGroup.render();
192
193                wizardController.listenTo(selectableGroup, 'node-selected', function (nodeId) {
194                    var node = availableExperiments.find(function (itm) { return itm.get('nodeId') == nodeId; });
195
196                    var newNode = new OAAS_MODEL.ExperimentNode(node.attributes);
197                    newNode.fetch({ success: function () {
198                        experimentModel.set({
199                            experiment: newNode,
200                            title: node.get('title'),
201                            nodeId: node.get('nodeId'),
202                            run: node.get('run'),
203                            repititions: node.get('repititions'),
204                            group: node.get('group')
205                        });
206                        controllerModel.set({ selectedNode: newNode });
207                        $('#deleteExperimentButton').removeAttr('disabled');
208                        detailsView.model = newNode;
209                        detailsView.render();
210                        view.model = newNode;
211                        view.render();
212                        experimentDetailsView.render();
213                    }
214                    });
215                }
216                );
[9305]217            }
[9324]218            });
[9305]219
[9324]220            // create wizard with 4 steps
221            var wizard = new OAAS_VIEW.StepWizardView({ el: $('#stepWizard') });
222            wizard.render();
[9305]223
[9324]224            var view = new OAAS_VIEW.ExperimentTreeView({ model: model, el: $('#container') });
225            view.render();
226            var validationView = new OAAS_VIEW.ValidationHintsView({ model: { header: "Validation failed!", text: ""} });
[9305]227
[9324]228            var detailsView = new OAAS_VIEW.ExperimentDetailsTreeView({ model: model, el: $('#container2') });
[9305]229
[9324]230            var parameterDialog = new OAAS_VIEW.ParameterDialog({ model: model, el: $('#parameterDialog') });
231            var loadingDialog = new OAAS_VIEW.LoadingDialog({ el: $('#loadingDialog') });
[9305]232
[9324]233            wizardController.listenTo(wizard, 'step-validated', function (validationModel) {
234                // update the details view
235                if (validationModel.stepNumber == 1) {
236                    if (controllerModel.get('selectedNode') == null) {
237                        validationView.model["text"] = 'Please select an experiment to continue!';
238                        validationView.render();
239                        validationModel.succeeded = false;
240                    }
[9305]241                }
[9324]242                detailsView.render();
243            });
[9305]244
[9324]245            wizardController.listenTo(model, 'change', function () {
246                // update the details view, when the model changes
247                view.render();
248                detailsView.render();
249            });
[9305]250
[9324]251            wizardController.listenTo(view, 'structure-changed', function (node) {
252                view.render();
253            });
[9305]254
[9324]255            wizardController.listenTo(view, 'node-added', function (node) {
256                // get details about the node
257                //if (!node.get('isExperiment'))
258                node.fetch({ success: function (itm) {
259                    model.trigger('change', {});
260                }
261                });
[9305]262            });
263
[9324]264            wizardController.listenTo(wizard, 'experiment-finished', function () {
265                generalController.experimentFinishedHandler(experimentModel, availableExperiments, selectableGroup);
266            });
[9305]267
[9324]268            wizardController.listenTo(detailsView, 'node-clicked', function (node) {
269                // get details about the node
270                var modelNode = OAAS_MODEL.ExperimentNode.lookup(node.data.key);
271                if (!modelNode.get('isExperiment')) {
272                    parameterDialog.model = modelNode;
273                    parameterDialog.render();
274                }
275            });
[9305]276
[9324]277            wizardController.listenTo(view, 'variation-request', function (evt) {
278                generalController.variationRequestHandler(evt);
279            });
[9305]280
[9324]281            wizardController.listenTo(parameterDialog, 'parameters-finished', function (node) {
282                parameterDialog.close();
283            });
284
285            $('#deleteExperimentButton').click(function (evt) {
286                var node = controllerModel.get('selectedNode');
287                var nodes = availableExperiments.where({ nodeId: node.get('nodeId') });
288                if (nodes.length == 1) {
289                    nodes[0].destroy();
290                    $('#deleteExperimentButton').attr('disabled', 'disabled');
291                    controllerModel.set('selectedNode', null);
292                }
293            });
294        }
[9305]295    }
[9324]296    return my;
297} (OAAS_CONTROLLER || {}, Backbone, OAAS_VIEW, OAAS_MODEL, _, $));
[9305]298
299 
300 
Note: See TracBrowser for help on using the repository browser.