mirror of https://github.com/doccano/doccano.git
Hironsan
6 years ago
4 changed files with 262 additions and 28 deletions
Split View
Diff Options
-
BINdoccano/app/db.sqlite3
-
188doccano/app/server/static/project_admin.js
-
100doccano/app/server/templates/project_admin.html
-
2doccano/app/server/views.py
@ -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.') |
|||
}); |
|||
} |
|||
}); |
@ -1,38 +1,84 @@ |
|||
{% extends "base.html" %} |
|||
{% load static %} |
|||
{% block content %} |
|||
{% extends "base.html" %} {% load static %} {% block content %} |
|||
<section class="container" id="root"> |
|||
<div class="columns"> |
|||
|
|||
<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 }} |
|||
<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 class="media-right"> |
|||
<span class="has-text-grey-light"> |
|||
<i class="fa fa-comments"></i> 1</span> |
|||
</div> |
|||
</article> |
|||
</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 }} |
|||
<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> |
|||
</section> |
|||
<script type="text/javascript" src="{% static 'project_admin.js' %}"></script> |
|||
{% endblock %} |
Write
Preview
Loading…
Cancel
Save