Browse Source

Update label definition

pull/10/head
Hironsan 6 years ago
parent
commit
4baed47b18
3 changed files with 95 additions and 188 deletions
  1. 161
      doccano/app/server/static/project_admin.js
  2. 1
      doccano/app/server/templates/base.html
  3. 121
      doccano/app/server/templates/project_admin.html

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

@ -11,76 +11,6 @@ function swap(values) {
return ret;
};
Vue.component('tabs', {
template: `
<div>
<div class="tabs is-boxed is-right" style="margin-bottom:0;">
<ul>
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
data() {
return {
tabs: []
};
},
created() {
this.tabs = this.$children;
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = (tab.name == selectedTab.name);
});
}
}
});
Vue.component('tab', {
template: `
<div v-show="isActive"><slot></slot></div>
`,
props: {
name: {
required: true
},
selected: {
default: false
},
},
data() {
return {
isActive: false
}
},
computed: {
href() {
return '#' + this.name.toLowerCase().replace(/ /g, '-')
}
},
mounted() {
this.isActive = this.selected
}
});
var vm = new Vue({
el: '#root',
delimiters: ['[[', ']]'],
@ -94,16 +24,17 @@ var vm = new Vue({
}],
"text": 'document'
}],
todos: [],
labels: [],
file: null,
file_name: '',
newTodo: '',
editedTodo: null,
},
methods: {
handleFileUpload() {
this.file = this.$refs.file.files[0];
console.log(this.file);
console.log(this.file.name);
this.file_name = this.file.name;
},
submitFile() {
@ -122,67 +53,55 @@ var vm = new Vue({
console.log('FAILURE!!');
});
},
addLabel: function (label) {
var label = {
'text': label,
'prob': null
};
this.items[this.cur]['labels'].push(label);
var label2id = swap(this.labels);
var data = {
'id': this.items[this.cur]['id'],
'label_id': label2id[label['text']]
};
axios.post('/' + base_url + '/apis/data', data)
.then(function (response) {
console.log('post data');
})
.catch(function (error) {
console.log('ERROR!! happend by Backend.')
});
addTodo: function () {
var value = this.newTodo && this.newTodo.trim();
if (!value) {
return
}
this.todos.push({
title: value,
})
this.newTodo = ''
},
removeTodo: function (todo) {
this.todos.splice(this.todos.indexOf(todo), 1)
},
deleteLabel: function (index) {
var label2id = swap(this.labels);
var label = this.items[this.cur]['labels'][index];
var payload = {
'id': this.items[this.cur]['id'],
'label_id': label2id[label['text']]
};
axios.delete('/' + base_url + '/apis/data', {
data: payload
})
.then(function (response) {
console.log('delete data');
})
.catch(function (error) {
console.log('ERROR!! happend by Backend.')
});
this.items[this.cur]['labels'].splice(index, 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
},
submit: function () {
console.log('submit' + this.searchQuery);
var self = this;
axios.get('/' + base_url + '/apis/search?keyword=' + this.searchQuery)
.then(function (response) {
console.log('search response');
self.history = response.data['data'];
})
.catch(function (error) {
console.log('ERROR!! happend by Backend.')
});
}
},
created: function () {
var self = this;
axios.get('/' + base_url + '/apis/labels')
.then(function (response) {
self.labels = response.data['labels'];
console.log(self.labels);
})
.catch(function (error) {
console.log('ERROR!! happend by Backend.')
});
},
directives: {
'todo-focus': function (el, binding) {
if (binding.value) {
el.focus()
}
}
}
});

1
doccano/app/server/templates/base.html

@ -17,6 +17,7 @@
<link rel="stylesheet" type="text/css" href="{% static 'forum.css' %}">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% block header %}{% endblock %}
</head>
<body>

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

@ -1,81 +1,68 @@
{% extends "base.html" %} {% load static %} {% block content %}
{% extends "base.html" %} {% load static %}
{% block header %}
<!--<link rel="stylesheet" type="text/css" href="{% static 'index.css' %}">-->
{% endblock %}
{% block content %}
<section class="container" id="root">
<div class="columns">
<div class="column is-12">
<tabs>
<tab name="Dataset" :selected="true">
<div class="box content">
<article class="post">
<h4>Project Dataset</h4>
<div class="media">
<div class="media-left">
<p class="image is-32x32">
<img src="http://bulma.io/images/placeholders/128x128.png">
</p>
<div class="box content">
<article class="post">
<h4>Project Dataset</h4>
<div class="media">
<div class="media-content">
<div class="content">
<div class="field file has-name">
<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">
Choose a file…
</span>
</span>
<span class="file-name">
[[ file_name ]]
</span>
</label>
</div>
<div class="media-content">
<div class="content">
<div class="field file has-name">
<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">
Choose a file…
</span>
</span>
<span class="file-name">
[[ file_name ]]
</span>
</label>
</div>
<div class="field">
<div class="control">
<button class="button is-primary" v-on:click="submitFile()">Submit</button>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary" v-on:click="submitFile()">Submit</button>
</div>
</div>
<div class="media-right">
<span class="has-text-grey-light">
<i class="fa fa-comments"></i> 1</span>
</div>
</div>
</article>
</div>
</tab>
<tab name="Labels">
<div class="box content">
<article class="post">
<h4>Label Definition</h4>
<div class="media">
<div class="media-left">
<p class="image is-32x32">
<img src="http://bulma.io/images/placeholders/128x128.png">
</p>
</div>
<div class="media-content">
<div class="content">
<p>Label definition</p>
<p>
<a href="#">@jsmith</a> created at {{ object.created_at|date }} &nbsp;
<span class="tag">Question</span>
</p>
</div>
</div>
<div class="media-right">
<span class="has-text-grey-light">
<i class="fa fa-comments"></i> 1</span>
<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>
</article>
</div>
</div>
</tab>
</tabs>
</article>
</div>
</div>
</div>

Loading…
Cancel
Save