Add guideline tmeplate

app/server/templates/admin/admin_base.html

@@ -40,6 +40,12 @@
           </span>
           <span class="name">Statistics</span>
         </a>
+        <a href="{% url 'guideline' view.kwargs.project_id %}" class="item">
+          <span class="icon">
+            <i class="fas fa-book"></i>
+          </span>
+          <span class="name">Guideline</span>
+        </a>
         <!--
         <a href="#" class="item">
             <span class="icon">

app/server/templates/admin/guideline.html

@@ -0,0 +1,94 @@
+{% extends "admin/admin_base.html" %}
+{% load static %}
+{% block content-area %}
+
+<div class="card">
+  <header class="card-header">
+    <p class="card-header-title">
+      Label editor
+    </p>
+    <a href="#" class="card-header-icon" aria-label="more options">
+      <span class="icon">
+        <i class="fas fa-angle-down" aria-hidden="true"></i>
+      </span>
+    </a>
+  </header>
+
+  <div class="card-content">
+    <div class="has-text-right">
+
+      <div class="field is-grouped is-grouped-multiline has-text-weight-bold" style="padding-bottom:.75rem;">
+        <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, 'background-color': 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 class="field is-horizontal bordered-row">
+        <label class="label column is-3" style="margin-bottom:0;">Preview</label>
+        <div class="control column is-6">
+          <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 is-horizontal bordered-row">
+        <label class="label column is-3" style="margin-bottom:0;">Label Name</label>
+        <div class="control column is-6">
+          <input class="input" type="text" placeholder="Text input" v-model="labelText">
+        </div>
+      </div>
+
+      <div class="field is-horizontal bordered-row">
+        <label class="label column is-3" style="margin-bottom:0;">Shortcut Key</label>
+        <div class="control column is-6">
+          <div class="select">
+            <select v-model="selectedShortkey">
+              <option disabled value="">Please select one</option>
+              {% for ch in 'abcdefghijklmnopqrstuvwxyz' %}
+              <option>{{ ch }}</option>
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal bordered-row">
+
+        <label class="label column is-3" style="margin-bottom:0;">Background Color</label>
+        <div class="control column is-6">
+          <input class="input" type="color" v-model="backgroundColor">
+        </div>
+      </div>
+
+      <div class="field is-horizontal bordered-row">
+        <label class="label column is-3" style="margin-bottom:0;">Text Color</label>
+        <div class="control column is-6">
+          <input class="input" type="color" v-model="textColor">
+        </div>
+      </div>
+
+      <div class="field is-grouped">
+        <div class="control">
+          <button class="button is-primary" @click="addLabel()">Add label</button>
+        </div>
+        <div class="control">
+          <button class="button is-text" @click="reset()">Reset</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block footer %}
+<script src="{% static 'bundle/label.js' %}"></script>
+{% endblock %}

app/server/urls.py

@@ -2,7 +2,7 @@ from django.urls import path
 from rest_framework import routers
 
 from .views import IndexView
-from .views import ProjectView, DatasetView, DataUpload, LabelView, StatsView
+from .views import ProjectView, DatasetView, DataUpload, LabelView, StatsView, GuidelineView
 from .views import ProjectsView, DataDownload
 from .views import DemoTextClassification, DemoNamedEntityRecognition, DemoTranslation
 from .api import ProjectViewSet, LabelList, ProjectStatsAPI, LabelDetail, \
@@ -27,6 +27,7 @@ urlpatterns = [
     path('projects/<int:project_id>/docs/create', DataUpload.as_view(), name='upload'),
     path('projects/<int:project_id>/labels/', LabelView.as_view(), name='label-management'),
     path('projects/<int:project_id>/stats/', StatsView.as_view(), name='stats'),
+    path('projects/<int:project_id>/guideline/', GuidelineView.as_view(), name='guideline'),
     path('demo/text-classification/', DemoTextClassification.as_view(), name='demo-text-classification'),
     path('demo/named-entity-recognition/', DemoNamedEntityRecognition.as_view(), name='demo-named-entity-recognition'),
     path('demo/translation/', DemoTranslation.as_view(), name='demo-translation'),

app/server/views.py

@@ -47,6 +47,10 @@ class StatsView(SuperUserMixin, LoginRequiredMixin, TemplateView):
     template_name = 'admin/stats.html'
 
 
+class GuidelineView(SuperUserMixin, LoginRequiredMixin, TemplateView):
+    template_name = 'admin/guideline.html'
+
+
 class DataUpload(SuperUserMixin, LoginRequiredMixin, TemplateView):
     template_name = 'admin/dataset_upload.html'