Use backbone to display taskmanager front end

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;
+});