Browse Source

Implement project creation

pull/10/head
Hironsan 6 years ago
parent
commit
6527ac914d
6 changed files with 112 additions and 66 deletions
  1. BIN
      app/db.sqlite3
  2. 2
      app/server/static/bundle/projects.js
  3. 5
      app/server/static/js/projects.js
  4. 8
      app/server/templates/admin/admin_base.html
  5. 138
      app/server/templates/projects.html
  6. 25
      app/server/views.py

BIN
app/db.sqlite3

2
app/server/static/bundle/projects.js

@ -150,7 +150,7 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n\n\nvar vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n el: '#projects_root',\n delimiters: ['[[', ']]'],\n data: {\n items: [],\n selectedType: 'All'\n },\n methods: {\n get_projects: async function () {\n var base_url = window.location.href.split('/').slice(0, 3).join('/');\n await axios.get(`${base_url}/api/projects`).then(response => {\n this.items = response.data;\n })\n },\n updateSelectedType: function (type) {\n this.selectedType = type;\n }\n },\n computed: {\n uniqueProjectTypes: function () {\n var types = [];\n for (var item of this.items) {\n types.push(item.project_type)\n }\n var uniqueTypes = Array.from(new Set(types));\n\n return uniqueTypes\n },\n filteredProjects: function () {\n // filter projects\n var projects = [];\n for (var item of this.items) {\n if ((this.selectedType == 'All') || (item.project_type == this.selectedType)) {\n projects.push(item)\n }\n }\n // create nested projects\n var nested_projects = [];\n for (var i = 0; i < projects.length % 3; i++) {\n var p = projects.slice(i * 3, (i + 1) * 3);\n nested_projects.push(p);\n }\n\n return nested_projects\n }\n },\n created: function () {\n this.get_projects();\n }\n});\n\n//# sourceURL=webpack:///./static/js/projects.js?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n\n\nvar vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n el: '#projects_root',\n delimiters: ['[[', ']]'],\n data: {\n items: [],\n selectedType: 'All',\n isActive: false\n },\n methods: {\n get_projects: async function () {\n var base_url = window.location.href.split('/').slice(0, 3).join('/');\n await axios.get(`${base_url}/api/projects`).then(response => {\n this.items = response.data;\n })\n },\n updateSelectedType: function (type) {\n this.selectedType = type;\n }\n },\n computed: {\n uniqueProjectTypes: function () {\n var types = [];\n for (var item of this.items) {\n types.push(item.project_type)\n }\n var uniqueTypes = Array.from(new Set(types));\n\n return uniqueTypes\n },\n filteredProjects: function () {\n // filter projects\n var projects = [];\n for (var item of this.items) {\n if ((this.selectedType == 'All') || (item.project_type == this.selectedType)) {\n projects.push(item)\n }\n }\n // create nested projects\n var nested_projects = [];\n for (var i = 0; i < Math.ceil(projects.length / 3); i++) {\n var p = projects.slice(i * 3, (i + 1) * 3);\n nested_projects.push(p);\n }\n\n return nested_projects\n }\n },\n created: function () {\n this.get_projects();\n }\n});\n\n//# sourceURL=webpack:///./static/js/projects.js?");
/***/ })

5
app/server/static/js/projects.js

@ -5,7 +5,8 @@ var vm = new Vue({
delimiters: ['[[', ']]'],
data: {
items: [],
selectedType: 'All'
selectedType: 'All',
isActive: false
},
methods: {
get_projects: async function () {
@ -38,7 +39,7 @@ var vm = new Vue({
}
// create nested projects
var nested_projects = [];
for (var i = 0; i < projects.length % 3; i++) {
for (var i = 0; i < Math.ceil(projects.length / 3); i++) {
var p = projects.slice(i * 3, (i + 1) * 3);
nested_projects.push(p);
}

8
app/server/templates/admin/admin_base.html

@ -22,30 +22,32 @@
<aside class="column is-2 aside">
<div>
<div class="main">
<a href="{% url 'dataset' view.kwargs.project_id %}" class="item active">
<a href="{% url 'dataset' view.kwargs.project_id %}" class="item">
<span class="icon">
<i class="fa fa-inbox"></i>
</span>
<span class="name">Dataset</span>
</a>
<a href="#" class="item">
<a href="{% url 'label-management' view.kwargs.project_id %}" class="item">
<span class="icon">
<i class="fa fa-star"></i>
</span>
<span class="name">Labels</span>
</a>
<a href="#" class="item">
<a href="{% url 'stats' view.kwargs.project_id %}" class="item">
<span class="icon">
<i class="fas fa-signal"></i>
</span>
<span class="name">Statistics</span>
</a>
<!--
<a href="#" class="item">
<span class="icon">
<i class="fas fa-users"></i>
</span>
<span class="name">Users</span>
</a>
-->
</div>
</div>
</aside>

138
app/server/templates/projects.html

@ -1,65 +1,86 @@
{% extends "base.html" %} {% load static %} {% block content %}
<section class="hero project-image">
<div class="container">
<div class="columns">
<div class="column is-12">
<h1 class="title is-1 has-text-white">
Hello, {{ user.get_username | title }}.
</h1>
<h2 class="subtitle is-4 has-text-white">
I hope you are having a great day!
</h2>
<p>
<a class="button is-medium is-primary">
Create Project
</a>
</p>
<div id="projects_root">
<section class="hero project-image">
<div class="container">
<div class="columns">
<div class="column is-12">
<h1 class="title is-1 has-text-white">
Hello, {{ user.get_username | title }}.
</h1>
<h2 class="subtitle is-4 has-text-white">
I hope you are having a great day!
</h2>
<p>
<a class="button is-medium is-primary" @click="isActive=!isActive">
Create Project
</a>
</p>
</div>
</div>
</div>
</div>
</section>
</section>
<div class="container">
<div id="projects_root" class="columns" style="margin-top:0">
<div class="column is-3">
<aside class="menu">
<p class="menu-label">
Categories
</p>
<ul class="menu-list">
<li>
<a v-bind:class="{active: selectedType == 'All' }"
v-on:click="updateSelectedType('All')">All</a>
</li>
<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" >
<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 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 v-bind:href="'/projects/' + project.id">[[ project.name ]]</a>
</h4>
<p>
[[ project.description.slice(0, 50) ]]
</p>
<div class="container">
<div class="columns" style="margin-top:0">
<div class="column is-3">
<aside class="menu">
<p class="menu-label">
Categories
</p>
<ul class="menu-list">
<li>
<a v-bind:class="{active: selectedType == 'All' }" v-on:click="updateSelectedType('All')">All</a>
</li>
<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">
<!-- Modal card for creating project. -->
<div class="modal" :class="{ 'is-active': isActive }">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Create Project</p>
<button class="delete" aria-label="close" @click="isActive=!isActive"></button>
</header>
<form method="post">
{% csrf_token %}
<section class="modal-card-body">
{{ form.as_p }}
</section>
<footer class="modal-card-foot" style="background-color:#dbdbdb !important;padding:20px !important;">
<button class="button is-success">Create</button>
<button class="button" @click="isActive=!isActive">Cancel</button>
</footer>
</form>
</div>
</div>
<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 v-bind:src="project.image" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<h4>
<a v-bind:href="'/projects/' + project.id">[[ project.name ]]</a>
</h4>
<p>
[[ project.description.slice(0, 50) ]]
</p>
</div>
</div>
<div class="card-footer">
<a v-bind:href="'/projects/' + project.id + '/docs'" class="card-footer-item">Edit</a>
<a href="" class="card-footer-item">Delete</a>
</div>
</div>
<div class="card-footer">
<a v-bind:href="'/projects/' + project.id + '/docs'" class="card-footer-item">Edit</a>
<a href="" class="card-footer-item">Delete</a>
</div>
</div>
</div>
@ -67,7 +88,6 @@
</div>
</div>
</div>
{% endblock %}
{% block footer %}
{% endblock %} {% block footer %}
<script type="text/javascript" src="{% static 'bundle/projects.js' %}"></script>
{% endblock %}

25
app/server/views.py

@ -4,6 +4,7 @@ from itertools import chain
from collections import Counter
from io import TextIOWrapper
from django import forms
from django.urls import reverse
from django_filters.rest_framework import DjangoFilterBackend
from django.http import JsonResponse, HttpResponse, HttpResponseRedirect
@ -45,11 +46,33 @@ class ProjectAdminView(LoginRequiredMixin, DetailView):
template_name = 'project_admin.html'
class ProjectsView(LoginRequiredMixin, ListView):
class ProjectForm(forms.ModelForm):
class Meta:
model = Project
fields = ('name', 'description', 'project_type', 'users')
class ProjectsView(LoginRequiredMixin, TemplateView):
model = Project
paginate_by = 100
template_name = 'projects.html'
def get_context_data(self, *, object_list=None, **kwargs):
context = super().get_context_data()
form = ProjectForm()
context['form'] = form
return context
def post(self, request, *args, **kwargs):
form = ProjectForm(request.POST)
if form.is_valid():
project = form.save()
return HttpResponseRedirect(reverse('upload', args=[project.id]))
else:
return render(request, self.template_name, {'form': form})
class DatasetView(LoginRequiredMixin, ListView):
template_name = 'admin/dataset.html'

Loading…
Cancel
Save