Add label template

app/server/static/js/label.js

@@ -0,0 +1,51 @@
+axios.defaults.xsrfCookieName = 'csrftoken';
+axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+var base_url = window.location.href.split('/').slice(3, 5).join('/');
+const HTTP = axios.create({
+    baseURL: `/api/${base_url}/`,
+})
+
+var vm = new Vue({
+    el: '#mail-app',
+    delimiters: ['[[', ']]'],
+    data: {
+        labels: [],
+        labelText: '',
+        selectedShortkey: '',
+        backgroundColor: '#209cee',
+        textColor: '#ffffff',
+    },
+
+    methods: {
+        addLabel: function () {
+            var payload = {
+                text: this.labelText,
+                shortcut: this.selectedShortkey,
+                background_color: this.backgroundColor,
+                text_color: this.textColor
+            };
+            HTTP.post('labels/', payload).then(response => {
+                this.reset();
+                this.labels.push(response.data);
+            })
+        },
+        removeLabel: function (label) {
+            var label_id = label.id;
+            HTTP.delete(`labels/${label_id}`).then(response => {
+                var index = this.labels.indexOf(label)
+                this.labels.splice(index, 1)
+            })
+        },
+        reset: function () {
+            this.labelText = '';
+            this.selectedShortkey = '';
+            this.backgroundColor = '#209cee';
+            this.textColor = '#ffffff';
+        }
+    },
+    created: function () {
+        HTTP.get('labels').then(response => {
+            this.labels = response.data
+        })
+    }
+})

app/server/templates/admin/label.html

@@ -0,0 +1,96 @@
+{% extends "admin/admin_base.html" %} {% load static %} {% block content-area %}
+<div class="column is-9">
+  <h1 class="title">Add labels</h1>
+
+  <div class="card">
+    <header class="card-header">
+      <div class="card-header-title" style="padding:1.5rem;background-color:royalblue;">
+        <div class="field is-grouped is-grouped-multiline">
+          <div class="control" v-for="label in labels">
+            <div class="tags has-addons">
+              <span class="tag is-medium"
+                 v-bind:style="{ color: label.text_color, backgroundColor: label.background_color }">
+                 <button class="delete is-small" 
+                         style="margin-right:.25rem;margin-left:-.375rem;"
+                         @click="removeLabel(label)"></button>
+                [[ label.text ]]
+            </span>
+              <span class="tag is-medium">[[ label.shortcut ]]</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class="card-content">
+      <div class="content">
+
+        <div class="field">
+          <label class="label">Preview</label>
+          <div class="control">
+            <div class="tags has-addons" style="font-weight:700;">
+              <a class="tag is-medium"
+                 v-bind:style="{ color: textColor, backgroundColor: backgroundColor }">
+                [[ labelText ]]
+              </a>
+              <span class="tag is-medium">[[ selectedShortkey ]]</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Label Name</label>
+          <div class="control has-icons-left">
+            <input class="input" type="text" placeholder="Text input" v-model="labelText">
+            <span class="icon is-small is-left">
+              <i class="fa fa-star"></i>
+            </span>
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Shortcut Key</label>
+          <div class="control">
+            <div class="select">
+              <select v-model="selectedShortkey">
+                <option disabled value="">Please select one</option>
+                <option>a</option>
+                <option>b</option>
+                <option>c</option>
+                <option>d</option>
+                <option>e</option>
+                <option>f</option>
+                <option>g</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="field is-grouped">
+
+          <div class="control is-expanded">
+            <label class="label">Background Color</label>
+            <input class="input" type="color" v-model="backgroundColor">
+          </div>
+
+
+          <div class="control is-expanded">
+            <label class="label">Text Color</label>
+            <input class="input" type="color" v-model="textColor">
+          </div>
+        </div>
+
+        <div class="field is-grouped">
+          <div class="control">
+            <button class="button is-link" @click="addLabel()">Add label</button>
+          </div>
+          <div class="control">
+            <button class="button is-text" @click="reset()">Reset</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %} {% block footer %}
+<script type="text/javascript" src="{% static 'js/label.js' %}"></script>
+{% endblock %}

app/server/urls.py

@@ -1,7 +1,7 @@
 from django.urls import path
 
 from .views import IndexView
-from .views import ProjectView, DatasetView, DatasetUpload
+from .views import ProjectView, DatasetView, DatasetUpload, LabelView
 from .views import ProjectsView, ProjectAdminView, DataDownload
 from rest_framework import routers
 from .views import ProjectViewSet
@@ -25,4 +25,5 @@ urlpatterns = [
     path('projects/<int:project_id>/', ProjectView.as_view(), name='annotation'),
     path('projects/<int:project_id>/docs/', DatasetView.as_view(), name='dataset'),
     path('projects/<int:project_id>/docs/create', DatasetUpload.as_view(), name='upload'),
+    path('projects/<int:project_id>/labels/', LabelView.as_view(), name='label-management'),
 ]

app/server/views.py

@@ -60,6 +60,10 @@ class DatasetView(LoginRequiredMixin, ListView):
         return project.documents.all()
 
 
+class LabelView(LoginRequiredMixin, TemplateView):
+    template_name = 'admin/label.html'
+
+
 class DatasetUpload(LoginRequiredMixin, TemplateView):
     model = Project
     template_name = 'admin/dataset_upload.html'