Use backbone to display taskmanager front end

www/scripts/apps/admin/tasks-manager/app.js

@@ -0,0 +1,69 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "backbone",
+    "models/scheduler",
+    "apps/admin/tasks-manager/views/scheduler",
+    "apps/admin/tasks-manager/views/tasks",
+    "apps/admin/tasks-manager/views/ping",
+    "apps/admin/tasks-manager/collections/tasks"
+], function ($, _, Backbone, Scheduler, SchedulerView, TasksView, PingView, TasksCollection) {
+    var create = function() {
+        window.TaskManagerApp = {
+            $scope: $("#task-manager-app"),
+            $tasksListView : $("#tasks-list-view", this.$scope),
+            $schedulerView : $("#scheduler-view", this.$scope),
+            $pingView : $("#pingTime", this.$scope)
+        };
+
+        TaskManagerApp.tasksCollection = new TasksCollection();
+        TaskManagerApp.Scheduler = new Scheduler();
+
+        TaskManagerApp.pingView = new PingView({
+            el: TaskManagerApp.$pingView
+        });
+    }
+
+    var load = function() {
+        // fetch objects
+        $.when.apply($, [
+                TaskManagerApp.tasksCollection.fetch(),
+                TaskManagerApp.Scheduler.fetch()
+            ]).done(
+            function () {
+                TaskManagerApp.schedulerView = new SchedulerView({
+                    model: TaskManagerApp.Scheduler,
+                    el: TaskManagerApp.$schedulerView
+                });
+                TaskManagerApp.tasksView = new TasksView({
+                    collection: TaskManagerApp.tasksCollection,
+                    el: TaskManagerApp.$tasksListView
+                });
+
+                // render views
+                TaskManagerApp.tasksView.render();
+                TaskManagerApp.schedulerView.render();
+            }
+        );
+    };
+
+    var initialize = function () {
+        create();
+        load();
+    };
+
+    return {
+        create: create,
+        load: load,
+        initialize: initialize
+    };
+});

www/scripts/apps/admin/tasks-manager/collections/tasks.js

@@ -0,0 +1,23 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "underscore",
+    "backbone",
+    "models/task"
+], function (_, Backbone, TaskModel) {
+    var TaskCollection = Backbone.Collection.extend({
+        model: TaskModel,
+        url: function () {
+            return "/admin/task-manager/tasks";
+        }
+    });
+
+    return TaskCollection;
+});

www/scripts/apps/admin/tasks-manager/main.js

@@ -0,0 +1,32 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+// configure AMD loading
+require.config({
+    baseUrl: "/scripts",
+    paths: {
+        jquery: "../assets/jquery/jquery",
+        jqueryui: "../assets/jquery.ui/jquery-ui",
+        underscore: "../assets/underscore-amd/underscore",
+        backbone: "../assets/backbone-amd/backbone",
+        i18n: "../assets/i18next/i18next.amd-1.6.3",
+        bootstrap: "../assets/bootstrap/js/bootstrap.min"
+    },
+    shim: {
+        bootstrap: ["jquery"],
+        jqueryui: {
+            deps: [ "jquery" ]
+        }
+    }
+});
+
+// launch application
+require(["apps/admin/tasks-manager/app"], function (App) {
+    App.initialize();
+});

www/scripts/apps/admin/tasks-manager/views/ping.js

@@ -0,0 +1,26 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "backbone"
+], function ($, _, Backbone) {
+    var PingView = Backbone.View.extend({
+        render: function () {
+            var date = new Date();
+
+            this.$el.html(date.toISOString());
+
+            return this;
+        }
+    });
+
+    return PingView;
+});

www/scripts/apps/admin/tasks-manager/views/scheduler.js

@@ -0,0 +1,62 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "backbone"
+], function ($, _, Backbone) {
+    var SchedulerView = Backbone.View.extend({
+        initialize: function () {
+            this.template = _.template($('#scheduler_template').html());
+            // render only parts of the model
+            this.model.on('change:configuration', this.renderConfiguration, this);
+            this.model.on('change:actual', this.renderActual, this);
+            this.model.on('change:process-id', this.renderPid, this);
+            this.model.on('change:name', this.renderName, this);
+        },
+        events: {
+            "click a": "clickAction"
+        },
+        tagName: "tr",
+        render: function () {
+            this.$el.empty();
+            this.$el.html(this.template({'scheduler':this.model.toJSON()}));
+            return this;
+        },
+        renderConfiguration: function () {
+            $(".confScheduler", this.$el).html(this.model.get("configuration"));
+            return this;
+        },
+        renderActual: function () {
+            $(".actualScheduler", this.$el).html(this.model.get("actual"));
+            return this;
+        },
+        renderPid: function () {
+            $(".pidScheduler", this.$el).html(this.model.get("process-id"));
+            return this;
+        },
+        renderName: function () {
+            $(".nameScheduler", this.$el).html(this.model.get("name"));
+            return this;
+        },
+        clickAction: function(e) {
+            e.preventDefault();
+            var link = $(e.target);
+            var url =  link.attr('href');
+
+            if(url && url.indexOf('#') !== 0) {
+                // This is defined in admin/index.html.twig
+                window.loadRightAjax(url, link.attr("method") || "GET");
+            }
+        }
+    });
+
+    return SchedulerView;
+});

www/scripts/apps/admin/tasks-manager/views/task.js

@@ -0,0 +1,66 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "underscore",
+    "backbone"
+], function ($, _, Backbone) {
+    var TaskView = Backbone.View.extend({
+        initialize: function () {
+            this.template = _.template($('#task_template').html());
+            // render only parts of the model
+            this.model.on('change:id', this.renderId, this);
+            this.model.on('change:configuration', this.renderConfiguration, this);
+            this.model.on('change:actual', this.renderActual, this);
+            this.model.on('change:process-id', this.renderPid, this);
+            this.model.on('change:name', this.renderName, this);
+        },
+        events: {
+            "click a": "clickAction"
+        },
+        tagName: "tr",
+        render: function () {
+            this.$el.html(this.template({'task':this.model.toJSON()}));
+            return this;
+        },
+        renderId: function () {
+            $(".idTask", this.$el).html(this.model.get("id"));
+            return this;
+        },
+        renderConfiguration: function () {
+            $(".confTask", this.$el).html(this.model.get("configuration"));
+            return this;
+        },
+        renderActual: function () {
+            $(".actualTask", this.$el).html(this.model.get("actual"));
+            return this;
+        },
+        renderPid: function () {
+            $(".pidTask", this.$el).html(this.model.get("process-id"));
+            return this;
+        },
+        renderName: function () {
+            $(".nameTask", this.$el).html(this.model.get("name"));
+            return this;
+        },
+        clickAction: function(e) {
+            e.preventDefault();
+            var link = $(e.target);
+            var url =  link.attr('href');
+
+            if(url && url.indexOf('#') !== 0) {
+                // This is defined in admin/index.html.twig
+                window.loadRightAjax(url, link.attr("method") || "GET");
+            }
+        }
+    });
+
+    return TaskView;
+});

www/scripts/apps/admin/tasks-manager/views/tasks.js

@@ -0,0 +1,70 @@
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+define([
+    "jquery",
+    "jqueryui",
+    "underscore",
+    "backbone",
+    "i18n",
+    "apps/admin/tasks-manager/views/task"
+], function ($, jqueryui, _, Backbone, i18n, TaskView) {
+    var TasksView = Backbone.View.extend({
+        initialize: function() {
+            this._taskViews = [];
+            this._rendered = false;
+
+            this.collection.bind('add', this._addOne, this);
+            this.collection.bind('remove', this._removeOne, this);
+        },
+        render: function () {
+            var $this = this;
+            $this.$el.empty();
+            $this.collection.each(function(model) {
+                $this._appendDom($this._createView(model));
+            });
+            $this._rendered = true;
+            return $this;
+        },
+        _addOne: function (task) {
+            var view = this._createView(task);
+
+            if (this._rendered) {
+                this._appendDom(view);
+            }
+        },
+        _createView: function (task) {
+            var view = new TaskView({ model: task });
+            this._taskViews.push(view);
+            return view;
+        },
+        _deleteView: function (task) {
+            var view = _(this._taskViews).select(function(taskView) {
+                return taskView.model === task;
+            })[0];
+            this._taskViews = _(this._taskViews).without(view);
+            return view;
+        },
+        _removeOne: function (task) {
+            var view = this._deleteView(task);
+
+            if (this._rendered) {
+                this._removeDom(view);
+            }
+        },
+        _appendDom: function(view) {
+            this.$el.append(view.render().el);
+        },
+        _removeDom: function(view) {
+            view.$el.remove();
+        }
+    });
+
+    return TasksView;
+});