Refactor seq2seq.js

app/server/static/bundle/seq2seq.js

@@ -185,7 +185,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _htt
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var _mixin_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin.js */ \"./static/js/mixin.js\");\n/* harmony import */ var _http_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./http.js */ \"./static/js/http.js\");\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(__webpack_require__(/*! vue-shortkey */ \"./node_modules/vue-shortkey/dist/index.js\"));\n\n\n\n\nvar vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n    el: '#mail-app',\n    delimiters: ['[[', ']]'],\n    data: {\n        newTodo: '',\n        editedTodo: null\n    },\n    mixins: [_mixin_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]],\n    directives: {\n        'todo-focus': function (el, binding) {\n            if (binding.value) {\n                el.focus()\n            }\n        }\n    },\n    methods: {\n        addTodo: function () {\n            var value = this.newTodo && this.newTodo.trim()\n            if (!value) {\n                return\n            }\n\n            var doc_id = this.items[this.cur].id;\n            var payload = {text: value}\n            _http_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"].post(`docs/${doc_id}/annotations/`, payload).then(response => {\n                this.items[this.cur]['labels'].push(response.data)\n            })\n\n            this.newTodo = ''\n        },\n\n        removeTodo: function (todo) {\n            var doc_id = this.items[this.cur].id;\n            _http_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"].delete(`docs/${doc_id}/annotations/${todo.id}`).then(response => {\n                this.items[this.cur]['labels'].splice(this.items[this.cur]['labels'].indexOf(todo), 1)\n            });\n        },\n\n        editTodo: function (todo) {\n            this.beforeEditCache = todo.text\n            this.editedTodo = todo\n        },\n\n        doneEdit: function (todo) {\n            if (!this.editedTodo) {\n                return\n            }\n            this.editedTodo = null\n            todo.text = todo.text.trim()\n            if (!todo.text) {\n                this.removeTodo(todo)\n            }\n            var doc_id = this.items[this.cur].id;\n            _http_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"].put(`docs/${doc_id}/annotations/${todo.id}`, todo).then(response => {\n                console.log(response)\n            });\n        },\n\n        cancelEdit: function (todo) {\n            this.editedTodo = null\n            todo.text = this.beforeEditCache\n        }\n    },\n    created: function () {\n        this.submit();\n    }\n});\n\n//# sourceURL=webpack:///./static/js/seq2seq.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ \"./static/js/mixin.js\");\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\n\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(__webpack_require__(/*! vue-shortkey */ \"./node_modules/vue-shortkey/dist/index.js\"));\n\n\nconst vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  el: '#mail-app',\n  delimiters: ['[[', ']]'],\n  data: {\n    newTodo: '',\n    editedTodo: null,\n  },\n  mixins: [_mixin__WEBPACK_IMPORTED_MODULE_1__[\"default\"]],\n  directives: {\n    'todo-focus': function(el, binding) {\n      if (binding.value) {\n        el.focus();\n      }\n    },\n  },\n\n  methods: {\n    addTodo() {\n      const value = this.newTodo && this.newTodo.trim();\n      if (!value) {\n        return;\n      }\n\n      const docId = this.docs[this.pageNumber].id;\n      const payload = {\n        text: value,\n      };\n      _http__WEBPACK_IMPORTED_MODULE_2__[\"default\"].post(`docs/${docId}/annotations/`, payload).then((response) => {\n        this.annotations[this.pageNumber].push(response.data);\n      });\n\n      this.newTodo = '';\n    },\n\n    removeTodo(todo) {\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_2__[\"default\"].delete(`docs/${docId}/annotations/${todo.id}`).then((response) => {\n        const index = this.annotations[this.pageNumber].indexOf(todo);\n        this.annotations[this.pageNumber].splice(index, 1);\n      });\n    },\n\n    editTodo(todo) {\n      this.beforeEditCache = todo.text;\n      this.editedTodo = todo;\n    },\n\n    doneEdit(todo) {\n      if (!this.editedTodo) {\n        return;\n      }\n      this.editedTodo = null;\n      todo.text = todo.text.trim();\n      if (!todo.text) {\n        this.removeTodo(todo);\n      }\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_2__[\"default\"].put(`docs/${docId}/annotations/${todo.id}`, todo).then((response) => {\n        console.log(response);\n      });\n    },\n\n    cancelEdit(todo) {\n      this.editedTodo = null;\n      todo.text = this.beforeEditCache;\n    },\n  },\n});\n\n\n//# sourceURL=webpack:///./static/js/seq2seq.js?");
 
 /***/ })
 

app/server/static/js/seq2seq.js

@@ -1,73 +1,75 @@
 import Vue from 'vue';
+import annotationMixin from './mixin';
+import HTTP from './http';
+
 Vue.use(require('vue-shortkey'));
-import annotationMixin from './mixin.js';
-import HTTP from './http.js';
 
 
-var vm = new Vue({
-    el: '#mail-app',
-    delimiters: ['[[', ']]'],
-    data: {
-        newTodo: '',
-        editedTodo: null
-    },
-    mixins: [annotationMixin],
-    directives: {
-        'todo-focus': function (el, binding) {
-            if (binding.value) {
-                el.focus()
-            }
-        }
+const vm = new Vue({
+  el: '#mail-app',
+  delimiters: ['[[', ']]'],
+  data: {
+    newTodo: '',
+    editedTodo: null,
+  },
+  mixins: [annotationMixin],
+  directives: {
+    'todo-focus': function(el, binding) {
+      if (binding.value) {
+        el.focus();
+      }
     },
-    methods: {
-        addTodo: function () {
-            var value = this.newTodo && this.newTodo.trim()
-            if (!value) {
-                return
-            }
+  },
 
-            var doc_id = this.items[this.cur].id;
-            var payload = {text: value}
-            HTTP.post(`docs/${doc_id}/annotations/`, payload).then(response => {
-                this.items[this.cur]['labels'].push(response.data)
-            })
+  methods: {
+    addTodo() {
+      const value = this.newTodo && this.newTodo.trim();
+      if (!value) {
+        return;
+      }
 
-            this.newTodo = ''
-        },
+      const docId = this.docs[this.pageNumber].id;
+      const payload = {
+        text: value,
+      };
+      HTTP.post(`docs/${docId}/annotations/`, payload).then((response) => {
+        this.annotations[this.pageNumber].push(response.data);
+      });
 
-        removeTodo: function (todo) {
-            var doc_id = this.items[this.cur].id;
-            HTTP.delete(`docs/${doc_id}/annotations/${todo.id}`).then(response => {
-                this.items[this.cur]['labels'].splice(this.items[this.cur]['labels'].indexOf(todo), 1)
-            });
-        },
+      this.newTodo = '';
+    },
 
-        editTodo: function (todo) {
-            this.beforeEditCache = todo.text
-            this.editedTodo = todo
-        },
+    removeTodo(todo) {
+      const docId = this.docs[this.pageNumber].id;
+      HTTP.delete(`docs/${docId}/annotations/${todo.id}`).then((response) => {
+        const index = this.annotations[this.pageNumber].indexOf(todo);
+        this.annotations[this.pageNumber].splice(index, 1);
+      });
+    },
 
-        doneEdit: function (todo) {
-            if (!this.editedTodo) {
-                return
-            }
-            this.editedTodo = null
-            todo.text = todo.text.trim()
-            if (!todo.text) {
-                this.removeTodo(todo)
-            }
-            var doc_id = this.items[this.cur].id;
-            HTTP.put(`docs/${doc_id}/annotations/${todo.id}`, todo).then(response => {
-                console.log(response)
-            });
-        },
+    editTodo(todo) {
+      this.beforeEditCache = todo.text;
+      this.editedTodo = todo;
+    },
+
+    doneEdit(todo) {
+      if (!this.editedTodo) {
+        return;
+      }
+      this.editedTodo = null;
+      todo.text = todo.text.trim();
+      if (!todo.text) {
+        this.removeTodo(todo);
+      }
+      const docId = this.docs[this.pageNumber].id;
+      HTTP.put(`docs/${docId}/annotations/${todo.id}`, todo).then((response) => {
+        console.log(response);
+      });
+    },
 
-        cancelEdit: function (todo) {
-            this.editedTodo = null
-            todo.text = this.beforeEditCache
-        }
+    cancelEdit(todo) {
+      this.editedTodo = null;
+      todo.text = this.beforeEditCache;
     },
-    created: function () {
-        this.submit();
-    }
-});
+  },
+});

app/server/templates/annotation/seq2seq.html

@@ -1,8 +1,8 @@
 {% extends "annotation/annotation_base.html" %} {% load static %} {% block annotation-area %}
 <div class="card" style="background-color:royalblue;color:white;font-weight:bold;">
-    <div class="card-content" v-if="items.length">
-        <div class="content">
-            [[ items[cur].text ]]
+    <div class="card-content">
+        <div class="content" v-if="docs[pageNumber]">
+            [[ docs[pageNumber].text ]]
         </div>
     </div>
 </div>
@@ -15,9 +15,9 @@
                v-model="newTodo"
                @keyup.enter="addTodo">
     </header>
-    <section class="main" v-show="items[cur].labels.length" v-cloak>
+    <section class="main" v-cloak>
         <ul class="todo-list">
-            <li v-for="todo in items[cur].labels" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
+            <li v-for="todo in annotations[pageNumber]" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
                 <div class="view">
                     <label @dblclick="editTodo(todo)">[[ todo.text ]]</label>
                     <button class="delete destroy is-large" @click="removeTodo(todo)"></button>