Update seq2seq form

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\nvar vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n    el: '#mail-app',\n    delimiters: ['[[', ']]'],\n    mixins: [_mixin_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]],\n\n    methods: {\n        addLabel: async function (label_id) {\n            var payload = {\n                'label_id': label_id\n            };\n\n            var doc_id = this.items[this.cur].id;\n            await _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            this.updateProgress();\n        }\n    },\n    created: function () {\n        this.updateProgress();\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_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// localStorage persistence\nvar STORAGE_KEY = 'todos-vuejs-2.0'\nvar todoStorage = {\n    fetch: function () {\n        var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')\n        todos.forEach(function (todo, index) {\n            todo.id = index\n        })\n        todoStorage.uid = todos.length\n        return todos\n    },\n    save: function (todos) {\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))\n    }\n}\n\nvar vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n    el: '#mail-app',\n    delimiters: ['[[', ']]'],\n    data: {\n        todos: todoStorage.fetch(),\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        addLabel: async function (label_id) {\n            var payload = {\n                'label_id': label_id\n            };\n\n            var doc_id = this.items[this.cur].id;\n            await _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            this.updateProgress();\n        },\n        addTodo: function () {\n            var value = this.newTodo && this.newTodo.trim()\n            if (!value) {\n                return\n            }\n            this.todos.push({\n                id: todoStorage.uid++,\n                title: value,\n            })\n            this.newTodo = ''\n        },\n\n        removeTodo: function (todo) {\n            this.todos.splice(this.todos.indexOf(todo), 1)\n        },\n\n        editTodo: function (todo) {\n            this.beforeEditCache = todo.title\n            this.editedTodo = todo\n        },\n\n        doneEdit: function (todo) {\n            if (!this.editedTodo) {\n                return\n            }\n            this.editedTodo = null\n            todo.title = todo.title.trim()\n            if (!todo.title) {\n                this.removeTodo(todo)\n            }\n        },\n\n        cancelEdit: function (todo) {\n            this.editedTodo = null\n            todo.title = this.beforeEditCache\n        }\n    },\n    created: function () {\n        this.updateProgress();\n        this.submit();\n    },\n    watch: {\n        todos: {\n            handler: function (todos) {\n                todoStorage.save(todos)\n            },\n            deep: true\n        }\n    }\n});\n\n//# sourceURL=webpack:///./static/js/seq2seq.js?");
 
 /***/ })
 

app/server/static/css/annotation.css

@@ -142,4 +142,123 @@ body {
     height: 1.5em;
     padding-left: .5em;
     padding-right: .5em;
-}
+}
+
+
+:focus {
+	outline: 0;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 30px 0 0 0;
+    position: relative;
+    box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1)
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 16pt;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+	padding: 1.5rem;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 16pt;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	padding: 12px 16px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li label {
+	word-break: break-all;
+    padding: 1.5rem 60px 1.5rem 1.5rem;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	margin: auto 0;
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}

app/server/static/css/forum.css

@@ -96,7 +96,7 @@ p {
   box-shadow: rgba(0, 0, 0, .1) 0 1px 0;
   border-radius: 4px;
   display: inline-block;
-  //margin: 10px;
+  /*margin: 10px;*/
   position: relative;
   transition: all .2s ease-in-out;
 }

app/server/static/js/seq2seq.js

@@ -3,11 +3,38 @@ Vue.use(require('vue-shortkey'));
 import annotationMixin from './mixin.js';
 import HTTP from './http.js';
 
+// localStorage persistence
+var STORAGE_KEY = 'todos-vuejs-2.0'
+var todoStorage = {
+    fetch: function () {
+        var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
+        todos.forEach(function (todo, index) {
+            todo.id = index
+        })
+        todoStorage.uid = todos.length
+        return todos
+    },
+    save: function (todos) {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+    }
+}
+
 var vm = new Vue({
     el: '#mail-app',
     delimiters: ['[[', ']]'],
+    data: {
+        todos: todoStorage.fetch(),
+        newTodo: '',
+        editedTodo: null
+    },
     mixins: [annotationMixin],
-
+    directives: {
+        'todo-focus': function (el, binding) {
+            if (binding.value) {
+                el.focus()
+            }
+        }
+    },
     methods: {
         addLabel: async function (label_id) {
             var payload = {
@@ -19,10 +46,54 @@ var vm = new Vue({
                 this.items[this.cur]['labels'].push(response.data);
             });
             this.updateProgress();
+        },
+        addTodo: function () {
+            var value = this.newTodo && this.newTodo.trim()
+            if (!value) {
+                return
+            }
+            this.todos.push({
+                id: todoStorage.uid++,
+                title: value,
+            })
+            this.newTodo = ''
+        },
+
+        removeTodo: function (todo) {
+            this.todos.splice(this.todos.indexOf(todo), 1)
+        },
+
+        editTodo: function (todo) {
+            this.beforeEditCache = todo.title
+            this.editedTodo = todo
+        },
+
+        doneEdit: function (todo) {
+            if (!this.editedTodo) {
+                return
+            }
+            this.editedTodo = null
+            todo.title = todo.title.trim()
+            if (!todo.title) {
+                this.removeTodo(todo)
+            }
+        },
+
+        cancelEdit: function (todo) {
+            this.editedTodo = null
+            todo.title = this.beforeEditCache
         }
     },
     created: function () {
         this.updateProgress();
         this.submit();
+    },
+    watch: {
+        todos: {
+            handler: function (todos) {
+                todoStorage.save(todos)
+            },
+            deep: true
+        }
     }
 });

app/server/templates/annotation/seq2seq.html

@@ -1,6 +1,4 @@
-{% extends "annotation/annotation_base.html" %}
-{% load static %}
-{% block annotation-area %}
+{% extends "annotation/annotation_base.html" %} {% load static %} {% block annotation-area %}
 <div class="card">
     <div class="card-content" v-if="items.length">
         <div class="content">
@@ -9,6 +7,7 @@
     </div>
 </div>
 
+<!--
 <div class="card" style="margin-top:30px;">
     <div class="card-content" contenteditable="true" v-if="items[cur].labels.length">
         [[ items[cur].labels[0].text ]]
@@ -17,8 +16,34 @@
         Input response...
     </div>
 </div>
-{% endblock %}
+-->
 
-{% block footer %}
+<section class="todoapp">
+    <header class="header">
+        <input class="textarea new-todo"
+               type="text"
+               placeholder="What is your response?"
+               v-model="newTodo"
+               @keyup.enter="addTodo">
+    </header>
+    <section class="main" v-show="todos.length" v-cloak>
+        <ul class="todo-list">
+            <li v-for="todo in todos" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }">
+                <div class="view">
+                    <label @dblclick="editTodo(todo)">[[ todo.title ]]</label>
+                    <button class="delete destroy is-large" @click="removeTodo(todo)"></button>
+                </div>
+                <input class="textarea edit"
+                       type="text"
+                       v-model="todo.title"
+                       v-todo-focus="todo == editedTodo"
+                       @blur="doneEdit(todo)"
+                       @keyup.enter="doneEdit(todo)"
+                       @keyup.esc="cancelEdit(todo)">
+            </li>
+        </ul>
+    </section>
+</section>
+{% endblock %} {% block footer %}
 <script type="text/javascript" src="{% static 'bundle/seq2seq.js' %}"></script>
 {% endblock %}