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

Update projects 

use vue instead of django template
pull/10/head
Hironsan 6 years ago
parent
a5963263f3
commit
a4bf50ba65
6 changed files with 235 additions and 95 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/server/serializers.py
  2. 157
      app/server/static/bundle/projects.js
  3. 4
      app/server/static/css/forum.css
  4. 54
      app/server/static/js/projects.js
  5. 110
      app/server/templates/projects.html
  6. 3
      app/server/webpack.config.js

2
app/server/serializers.py
View File

@ -64,4 +64,4 @@ class ProjectSerializer(serializers.ModelSerializer):
class Meta:
model = Project
fields = ('id', 'name', 'description', 'users', 'labels', 'documents', 'project_type')
fields = ('id', 'name', 'description', 'users', 'labels', 'documents', 'project_type', 'image')

157
app/server/static/bundle/projects.js
File diff suppressed because it is too large
View File

4
app/server/static/css/forum.css
View File

@ -102,4 +102,8 @@ p {
}
.is-shady:hover {
box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
}
.menu-list a.active {
background-color: #3273dc;
color: #fff;
}

54
app/server/static/js/projects.js
View File

@ -0,0 +1,54 @@
import Vue from 'vue';
var vm = new Vue({
el: '#projects_root',
delimiters: ['[[', ']]'],
data: {
items: [],
selectedType: 'All'
},
methods: {
get_projects: async function () {
var base_url = window.location.href.split('/').slice(0, 3).join('/');
await axios.get(`${base_url}/api/projects`).then(response => {
this.items = response.data['results'];
console.log(this.items);
})
},
updateSelectedType: function (type) {
this.selectedType = type;
console.log(this.selectedType);
}
},
computed: {
uniqueProjectTypes: function () {
var types = [];
for (var item of this.items) {
types.push(item.project_type)
}
var uniqueTypes = Array.from(new Set(types));
return uniqueTypes
},
filteredProjects: function () {
// filter projects
var projects = [];
for (var item of this.items) {
if ((this.selectedType == 'All') || (item.project_type == this.selectedType)) {
projects.push(item)
}
}
// create nested projects
var nested_projects = [];
for (var i = 0; i < projects.length % 3; i++) {
var p = projects.slice(i * 3, (i + 1) * 3);
nested_projects.push(p);
}
return nested_projects
}
},
created: function () {
this.get_projects();
}
});

110
app/server/templates/projects.html
View File

@ -1,6 +1,4 @@
{% extends "base.html" %}
{% load static %}
{% block content %}
{% extends "base.html" %} {% load static %} {% block content %}
<section class="hero project-image">
<div class="container">
<div class="columns">
@ -22,7 +20,7 @@
</section>
<div class="container">
<div class="columns" style="margin-top:0">
<div id="projects_root" class="columns" style="margin-top:0">
<div class="column is-3">
<aside class="menu">
<p class="menu-label">
@ -30,119 +28,45 @@
</p>
<ul class="menu-list">
<li>
<a class="is-active">All</a>
<a v-bind:class="{active: selectedType == 'All' }"
v-on:click="updateSelectedType('All')">All</a>
</li>
<li>
<a>Document Classification</a>
</li>
<li>
<a>Sequence Labeling</a>
</li>
<li>
<a>Sequence to sequence</a>
<li v-for="t in uniqueProjectTypes">
<a v-bind:class="{active: t == selectedType }"
v-on:click="updateSelectedType(t)">[[ t ]]</a>
</li>
</ul>
</aside>
</div>
<div class="column is-9">
{% for project in object_list %}
{% if forloop.counter0|divisibleby:3 %}
<div class="columns features">
{% endif %}
<div class="column is-4">
<div class="column is-9" >
<div class="columns features" v-for="projects in filteredProjects">
<div class="column is-4" v-for="project in projects">
<div class="card is-shady">
<div class="card-image">
<figure class="image is-4by3">
<img src="{{ project.image }}" alt="Placeholder image" class="modal-button" data-target="modal-image2">
<img v-bind:src="project.image" alt="Placeholder image" class="modal-button" data-target="modal-image2">
</figure>
</div>
<div class="card-content">
<div class="content">
<h4>
<a href="{% url 'annotation' project.id %}">{{ project.name }}</a>
<a v-bind:href="'/projects/' + project.id">[[ project.name ]]</a>
</h4>
<p>
{{ project.description|truncatechars:50 }}
[[ project.description.slice(0, 50) ]]
</p>
<a class="button is-link is-small" href="{% url 'project-admin' project.id %}">
<a class="button is-link is-small" v-bind:href="'/projects/' + project.id + '/admin'">
<i class="fas fa-cog"></i>&nbsp;Settings
</a>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:3 or forloop.counter|length == object_list|length %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
<!--
<section class="container" id="root">
<div class="columns">
<div class="column is-10 is-offset-1">
<div class="hero project-image">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-white">
Hello, {{ user.get_username | title }}.
</h1>
<h2 class="subtitle has-text-white">
I hope you are having a great day!
</h2>
<a class="button is-primary">Create Project</a>
</div>
</div>
</div>
<div class="box content">
<article class="post">
<h4>My Projects</h4>
<div class="media">
<div class="media-content">
<div class="content">
<table class="table is-hoverable">
<thead>
<tr>
<th>Id</th>
<th>Project name</th>
<th>Priority</th>
<th>Progress</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for project in object_list %}
<tr>
<th style="vertical-align:middle;">{{ forloop.counter }}</th>
<td>
<a href="{% url 'annotation' project.id %}">{{ project.name }}</a>
<p>{{ project.description|truncatechars:50 }}</p>
</td>
<td style="vertical-align:middle;">
<span class="tag is-danger">High</span>
</td>
<td style="vertical-align:middle;">
<progress class="progress is-primary" value="70" max="100">30%</progress>
</td>
<td style="vertical-align:middle;">
<a class="button is-link is-small" href="{% url 'project-admin' project.id %}">
<i class="fas fa-cog"></i>&nbsp;Settings
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
-->
{% endblock %}
{% block footer %}
<script type="text/javascript" src="{% static 'bundle/projects.js' %}"></script>
{% endblock %}

3
app/server/webpack.config.js
View File

@ -5,7 +5,8 @@ module.exports = {
entry: {
'sequence_labeling': './static/js/sequence_labeling.js',
'document_classification': './static/js/document_classification.js',
'seq2seq': './static/js/seq2seq.js'
'seq2seq': './static/js/seq2seq.js',
'projects': './static/js/projects.js'
},
output: {
path: __dirname + '/static/bundle',

Write Preview
Loading…
Cancel
Save