Browse Source

Update data uploader

pull/10/head
Hironsan 6 years ago
parent
commit
44ef470156
4 changed files with 262 additions and 28 deletions
  1. BIN
      doccano/app/db.sqlite3
  2. 188
      doccano/app/server/static/project_admin.js
  3. 100
      doccano/app/server/templates/project_admin.html
  4. 2
      doccano/app/server/views.py

BIN
doccano/app/db.sqlite3

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

@ -0,0 +1,188 @@
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
var base_url = window.location.href.split('/').slice(3, 5).join('/');
function swap(values) {
var ret = {};
for (var item of values) {
ret[item['text']] = item['id'];
}
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: ['[[', ']]'],
data: {
cur: 0,
items: [{
"id": 10,
"labels": [{
"text": "Prefecture",
"prob": 0.98
}],
"text": 'document'
}],
labels: [],
file: null,
file_name: '',
},
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() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('/' + base_url + '/apis/raw_data',
formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function () {
console.log('SUCCESS!!');
})
.catch(function () {
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.')
});
},
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)
},
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'];
})
.catch(function (error) {
console.log('ERROR!! happend by Backend.')
});
}
});

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

@ -1,38 +1,84 @@
{% extends "base.html" %}
{% load static %}
{% block content %}
{% extends "base.html" %} {% load static %} {% 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-12">
<div class="box content">
<article class="post">
<h4>{{ object.name }}</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>{{ object.description|truncatechars:200 }}</p>
<p>Data Upload, Label definition</p>
<p>
<a href="#">@jsmith</a> created at {{ object.created_at|date }} &nbsp;
<span class="tag">Question</span>
</p>
<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>
<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>
</div>
<div class="media-right">
<span class="has-text-grey-light">
<i class="fa fa-comments"></i> 1</span>
</div>
</div> </div>
</div>
<div class="media-right">
<span class="has-text-grey-light">
<i class="fa fa-comments"></i> 1</span>
</div>
</article>
</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>
</div>
</article>
</div>
</tab>
</tabs>
</div> </div>
</div> </div>
</section> </section>
<script type="text/javascript" src="{% static 'project_admin.js' %}"></script>
{% endblock %} {% endblock %}

2
doccano/app/server/views.py

@ -125,7 +125,7 @@ class RawDataAPI(View):
def post(self, request, *args, **kwargs): def post(self, request, *args, **kwargs):
"""Upload data.""" """Upload data."""
f = request.FILES['attachment']
f = request.FILES['file']
content = ''.join(chunk.decode('utf-8') for chunk in f.chunks()) content = ''.join(chunk.decode('utf-8') for chunk in f.chunks())
for line in content.split('\n'): for line in content.split('\n'):
j = json.loads(line) j = json.loads(line)

Loading…
Cancel
Save