Browse Source

Update admin template

pull/10/head
Hironsan 6 years ago
parent
commit
7c0ff4479b
6 changed files with 197 additions and 247 deletions
  1. BIN
      doccano/app/db.sqlite3
  2. 42
      doccano/app/server/static/project_admin.js
  3. 186
      doccano/app/server/templates/admin.html
  4. 193
      doccano/app/server/templates/project_admin.html
  5. 3
      doccano/app/server/urls.py
  6. 20
      doccano/app/server/views.py

BIN
doccano/app/db.sqlite3

42
doccano/app/server/static/project_admin.js

@ -15,21 +15,14 @@ var vm = new Vue({
el: '#root', el: '#root',
delimiters: ['[[', ']]'], delimiters: ['[[', ']]'],
data: { data: {
cur: 0,
items: [{
"id": 10,
"labels": [{
"text": "Prefecture",
"prob": 0.98
}],
"text": 'document'
}],
todos: [], todos: [],
labels: [], labels: [],
file: null, file: null,
file_name: '', file_name: '',
newTodo: '', newTodo: '',
editedTodo: null, editedTodo: null,
newLabel: '',
newShortcut: '',
}, },
methods: { methods: {
@ -53,6 +46,37 @@ var vm = new Vue({
console.log('FAILURE!!'); console.log('FAILURE!!');
}); });
}, },
addLabel: function () {
var payload = {
'text': this.newLabel,
'shortcut': this.newShortcut
};
var self = this;
axios.post('/' + base_url + '/apis/labels', payload)
.then(function (response) {
console.log('post data');
self.newShortcut = '';
self.newLabel = '';
self.labels.push(response.data);
})
.catch(function (error) {
console.log('ERROR!! happend by Backend.')
});
},
removeLabel: function (index) {
var payload = this.labels[index];
var self = this;
axios.delete('/' + base_url + '/apis/labels', {
data: payload
})
.then(function (response) {
self.labels.splice(index, 1);
console.log('delete data');
})
.catch(function (error) {
console.log('ERROR!! happend by Backend.')
});
},
addTodo: function () { addTodo: function () {
var value = this.newTodo && this.newTodo.trim(); var value = this.newTodo && this.newTodo.trim();
if (!value) { if (!value) {

186
doccano/app/server/templates/admin.html

@ -1,186 +0,0 @@
{% extends "base.html" %} {% load static %} {% block header %} {% endblock %} {% block content %}
<section class="container" id="root">
<div class="columns">
<div class="column is-8">
<div class="box content">
<article class="post">
<h4>Learning Curve</h4>
<div class="media">
<div class="media-content">
<div class="content">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="column is-4">
<div class="box content">
<article class="post">
<h4>Stats</h4>
<div class="media">
<div class="media-content">
<div class="content">
<canvas id="myPie"></canvas>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns" style="margin-top:-1rem;">
<div class="column is-8">
<div class="box content">
<article class="post">
<h4>Label Management</h4>
<div class="media">
<div class="media-content">
<div class="content">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Label name">
</p>
<p class="control">
<input class="input" type="text" placeholder="Shortcut key">
</p>
<p class="control">
<a class="button is-primary">
Add
</a>
</p>
</div>
<table class="table">
<thead>
<tr>
<th>
Id
</th>
<th>Label name</th>
<th>Shortcut key</th>
<th>Deletion</th>
</tr>
</thead>
<tbody>
<tr v-for="label in labels">
<th>[[ label.id ]]</th>
<td>[[ label.text ]]</td>
<td>[[ label.shortcut ]]</td>
<td><a class="button is-danger is-small">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="column is-4">
<div class="box content">
<article class="post">
<h4>Data Management</h4>
<div class="media">
<div class="media-content">
<div class="content">
<p>Data upload</p>
<div class="file has-name is-right is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" />
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Upload
</span>
</span>
<span class="file-name">
[[ file_name ]]
</span>
</label>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="{% static 'project_admin.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var ctx1 = document.getElementById('myPie');
var pie = new Chart(ctx1, {
type: 'doughnut',
data: {
datasets: [{
data: [10, 20],
backgroundColor: ["#50dc64", "#3399ff"],
}],
labels: [
'Labeled',
'Unlabeled'
]
}
});
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [50, 100, 150, 200, 250, 300],
datasets: [{
label: "training",
backgroundColor: 'rgb(80, 220, 100)',
borderColor: 'rgb(80, 220, 100)',
//data: [72, 83, 86, 87, 88, 88.5],
data: [94, 93.5, 93, 93, 93, 92.5],
fill: false,
},
{
label: "validation",
backgroundColor: 'rgb(51, 153, 255)',
borderColor: 'rgb(51, 153, 255)',
data: [72, 80, 83, 85, 86, 86.5],
fill: false,
}
]
},
// Configuration options go here
options: {
legend: {
display: true,
position: 'right'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Accuracy'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Number of training samples'
}
}],
}
}
});
</script>
{% endblock %}

193
doccano/app/server/templates/project_admin.html

@ -1,19 +1,96 @@
{% extends "base.html" %} {% load static %}
{% block header %}
<!--<link rel="stylesheet" type="text/css" href="{% static 'index.css' %}">-->
{% endblock %}
{% block content %}
{% extends "base.html" %} {% load static %} {% block header %} {% endblock %} {% block content %}
<section class="container" id="root"> <section class="container" id="root">
<div class="columns"> <div class="columns">
<div class="column is-12">
<div class="column is-8">
<div class="box content"> <div class="box content">
<article class="post"> <article class="post">
<h4>Project Dataset</h4>
<h4>Learning Curve</h4>
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
<div class="content"> <div class="content">
<div class="field file has-name">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="column is-4">
<div class="box content">
<article class="post">
<h4>Stats</h4>
<div class="media">
<div class="media-content">
<div class="content">
<canvas id="myPie"></canvas>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="columns" style="margin-top:-1rem;">
<div class="column is-8">
<div class="box content">
<article class="post">
<h4>Label Management</h4>
<div class="media">
<div class="media-content">
<div class="content">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Label name" v-model="newLabel" required>
</p>
<p class="control">
<input class="input" type="text" placeholder="Shortcut key" v-model="newShortcut" required>
</p>
<p class="control">
<a class="button is-primary" v-on:click="addLabel()">
Add
</a>
</p>
</div>
<table class="table">
<thead>
<tr>
<th>
Id
</th>
<th>Label name</th>
<th>Shortcut key</th>
<th>Deletion</th>
</tr>
</thead>
<tbody>
<tr v-for="(label, index) in labels">
<th>[[ index + 1 ]]</th>
<td>[[ label.text ]]</td>
<td>[[ label.shortcut ]]</td>
<td><a class="button is-danger is-small" v-on:click="removeLabel(index)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="column is-4">
<div class="box content">
<article class="post">
<h4>Data Management</h4>
<div class="media">
<div class="media-content">
<div class="content">
<p>Data upload</p>
<div class="file has-name is-right is-fullwidth">
<label class="file-label"> <label class="file-label">
<input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" /> <input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" />
<span class="file-cta"> <span class="file-cta">
@ -21,7 +98,7 @@
<i class="fas fa-upload"></i> <i class="fas fa-upload"></i>
</span> </span>
<span class="file-label"> <span class="file-label">
Choose a file…
Upload
</span> </span>
</span> </span>
<span class="file-name"> <span class="file-name">
@ -29,43 +106,81 @@
</span> </span>
</label> </label>
</div> </div>
<div class="field">
<div class="control">
<button class="button is-primary" v-on:click="submitFile()">Submit</button>
</div>
</div>
<div class="tags">
<a class="tag is-grey" v-for="label in labels">[[ label.text ]]</a>
</div>
<section class="todoapp">
<header class="header">
<h1>Label Settings</h1>
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" 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="destroy" @click="removeTodo(todo)"></button>
</div>
<input class="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>
</div> </div>
</div> </div>
</div> </div>
</article> </article>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<script type="text/javascript" src="{% static 'project_admin.js' %}"></script> <script type="text/javascript" src="{% static 'project_admin.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var ctx1 = document.getElementById('myPie');
var pie = new Chart(ctx1, {
type: 'doughnut',
data: {
datasets: [{
data: [10, 20],
backgroundColor: ["#50dc64", "#3399ff"],
}],
labels: [
'Labeled',
'Unlabeled'
]
}
});
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [50, 100, 150, 200, 250, 300],
datasets: [{
label: "training",
backgroundColor: 'rgb(80, 220, 100)',
borderColor: 'rgb(80, 220, 100)',
//data: [72, 83, 86, 87, 88, 88.5],
data: [94, 93.5, 93, 93, 93, 92.5],
fill: false,
},
{
label: "validation",
backgroundColor: 'rgb(51, 153, 255)',
borderColor: 'rgb(51, 153, 255)',
data: [72, 80, 83, 85, 86, 86.5],
fill: false,
}
]
},
// Configuration options go here
options: {
legend: {
display: true,
position: 'right'
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Accuracy'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Number of training samples'
}
}],
}
}
});
</script>
{% endblock %} {% endblock %}

3
doccano/app/server/urls.py

@ -1,13 +1,12 @@
from django.urls import path from django.urls import path
from .views import AnnotationView, AnnotationAPIView, MetaInfoAPI, SearchAPI, TestView
from .views import AnnotationView, AnnotationAPIView, MetaInfoAPI, SearchAPI
from .views import ProjectListView, ProjectDetailView, ProjectAdminView, RawDataAPI, LabelAPI from .views import ProjectListView, ProjectDetailView, ProjectAdminView, RawDataAPI, LabelAPI
urlpatterns = [ urlpatterns = [
path('', ProjectListView.as_view(), name='project-list'), path('', ProjectListView.as_view(), name='project-list'),
path('<int:pk>/', ProjectDetailView.as_view(), name='project-detail'), path('<int:pk>/', ProjectDetailView.as_view(), name='project-detail'),
path('<int:pk>/admin', ProjectAdminView.as_view()), path('<int:pk>/admin', ProjectAdminView.as_view()),
path('<int:pk>/test', TestView.as_view()),
path('<int:project_id>/docs', AnnotationView.as_view()), path('<int:project_id>/docs', AnnotationView.as_view()),
path('<int:project_id>/apis/data', AnnotationAPIView.as_view()), path('<int:project_id>/apis/data', AnnotationAPIView.as_view()),
path('<int:pk>/apis/raw_data', RawDataAPI.as_view(), name='data_api'), path('<int:pk>/apis/raw_data', RawDataAPI.as_view(), name='data_api'),

20
doccano/app/server/views.py

@ -87,11 +87,16 @@ class LabelAPI(View):
def post(self, request, *args, **kwargs): def post(self, request, *args, **kwargs):
"""Create labels.""" """Create labels."""
text = request.POST.get('text')
shortcut = request.POST.get('shortcut')
Label(text=text, shortcut=shortcut).save()
#text = request.POST.get('text')
#shortcut = request.POST.get('shortcut')
body = request.body.decode('utf-8').replace("'", '"')
body = json.loads(body)
text = body.get('text')
shortcut = body.get('shortcut')
label = Label(text=text, shortcut=shortcut)
label.save()
return JsonResponse({'status': 'ok'})
return JsonResponse(label.as_dict())
def put(self, request, *args, **kwargs): def put(self, request, *args, **kwargs):
"""Update labels.""" """Update labels."""
@ -163,10 +168,3 @@ class ProjectAdminView(DetailView):
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs) context = super().get_context_data(**kwargs)
return context return context
class TestView(View):
template_name = 'admin.html'
def get(self, request, *args, **kwargs):
return render(request, self.template_name)
Loading…
Cancel
Save