mirror of https://github.com/doccano/doccano.git
Hironsan
6 years ago
4 changed files with 262 additions and 28 deletions
Unified 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"> |
<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 }} |
|
||||
<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 }} |
||||
|
<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 %} |
Write
Preview
Loading…
Cancel
Save