richard
/
doccano
mirror of https://github.com/doccano/doccano.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update admin template

pull/10/head
Hironsan 6 years ago
parent
672e2bdc43
commit
7c0ff4479b
6 changed files with 197 additions and 247 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

@ -15,21 +15,14 @@ var vm = new Vue({
el: '#root',
delimiters: ['[[', ']]'],
data: {
cur: 0,
items: [{
"id": 10,
"labels": [{
"text": "Prefecture",
"prob": 0.98
}],
"text": 'document'
}],
todos: [],
labels: [],
file: null,
file_name: '',
newTodo: '',
editedTodo: null,
newLabel: '',
newShortcut: '',
},
methods: {
@ -53,6 +46,37 @@ var vm = new Vue({
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 () {
var value = this.newTodo && this.newTodo.trim();
if (!value) {

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

@ -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
View File

@ -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">
<div class="columns">
<div class="column is-12">
<div class="column is-8">
<div class="box content">
<article class="post">
<h4>Project Dataset</h4>
<h4>Learning Curve</h4>
<div class="media">
<div class="media-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">
<input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" />
<span class="file-cta">
@ -21,7 +98,7 @@
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
Upload
</span>
</span>
<span class="file-name">
@ -29,43 +106,81 @@
</span>
</label>
</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>
</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 %}

3
doccano/app/server/urls.py
View File

@ -1,13 +1,12 @@
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
urlpatterns = [
path('', ProjectListView.as_view(), name='project-list'),
path('<int:pk>/', ProjectDetailView.as_view(), name='project-detail'),
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>/apis/data', AnnotationAPIView.as_view()),
path('<int:pk>/apis/raw_data', RawDataAPI.as_view(), name='data_api'),

20
doccano/app/server/views.py
View File

@ -87,11 +87,16 @@ class LabelAPI(View):
def post(self, request, *args, **kwargs):
"""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):
"""Update labels."""
@ -163,10 +168,3 @@ class ProjectAdminView(DetailView):
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
return context
class TestView(View):
template_name = 'admin.html'
def get(self, request, *args, **kwargs):
return render(request, self.template_name)
Write Preview
Loading…
Cancel
Save