Skip to content
Snippets Groups Projects
Commit 71492bff authored by Timothee P's avatar Timothee P :sunflower:
Browse files

Add flatpages, project page with routing

parent 3f6ebf23
Branches
Tags
3 merge requests!3add export-geojson & fix slug vs title in feature_list route,!2add extra_form to feature_edit,!1format date for derniers signalements, detect click outside menu dropdown and...
Hide whitespace changes
Inline Side-by-side
README.md
+ 4
− 1
View file @ 71492bff
......@@ -45,4 +45,7 @@ docker-compose pull
et
```
docker-compose up -d
```
\ No newline at end of file
```
## Changement depuis django
- Base.html = App.js
\ No newline at end of file
src/App.vue
+ 17
− 12
View file @ 71492bff
......@@ -3,26 +3,31 @@
<header class="header-menu">
<div class="ui container">
<div class="ui inverted icon menu">
<a href="" class="header item">
<!-- <a href="" class="header item"> -->
<router-link to="/" class="header item">
<!-- <img class="ui mini right spaced image" :src="LOGO_PATH">
<img class="ui mini right spaced image" :src="$process.env.VUE_APP_LOGO_PATH"> -->
<!-- // todo : find out how to get image dynamicaly -->
<img
class="ui mini right spaced image"
src="@/assets/logo-neogeo-circle.png"
/>
{{ APPLICATION_NAME }}
</a>
</router-link>
<!-- </a> -->
<div v-if="project" class="ui dropdown item">
Projet&nbsp;: {{ project.title }}
<i class="dropdown icon"></i>
<div class="menu" style="z-index: 401">
<!-- // todo : adapt -->
<a
class="item"
href="{% url 'geocontrib:project' slug=project.slug %}"
>
<i class="home icon"></i>Accueil
</a>
<!-- // todo : adapt -->
<a
class="item"
href="{% url 'geocontrib:feature_list' slug=project.slug %}"
......@@ -30,12 +35,14 @@
<i class="list icon"></i>Liste & Carte
</a>
{% if project and permissions|lookup:'is_project_administrator' %}
<!-- // todo : adapt -->
<a
class="item"
href="{% url 'geocontrib:project_mapping' slug=project.slug %}"
>
<i class="map icon"></i>Fonds cartographiques
</a>
<!-- // todo : adapt -->
<a
class="item"
href="{% url 'geocontrib:project_members' slug=project.slug %}"
......@@ -47,6 +54,7 @@
</div>
<div class="right menu">
<!-- // todo : get user | endpoint -->
<!-- {% if user.is_authenticated %}
<a class="item" href="{% url 'geocontrib:my_account' %}">
{{ user.get_full_name|default:user.username }}
......@@ -57,10 +65,10 @@
{% if user.is_administrator == True %}Gestionnaire métier{% endif %}
</div>
{% endif %}
{% if not SSO_SETTED %}
{% if not SSO_SETTED %}
<a class="item" href="{% url 'geocontrib:logout' %}"><i class="ui logout icon"></i></a>
{% endif %}
{% elif not SSO_SETTED %} -->
{% elif not SSO_SETTED %} --><!-- // todo : find out SSO_SETTED -->
<router-link to="/connexion" class="item">Se Connecter</router-link>
<!-- {% endif %} -->
</div>
......@@ -69,6 +77,7 @@
</header>
<main>
<div class="ui stackable grid centered container">
<!-- // todo : add messages -->
<!-- {% if messages %} -->
<!-- <div v-if="false" class="row">
<div class="fourteen wide column">
......@@ -91,21 +100,16 @@
</div>
</div> -->
<!-- {% endif %} -->
<!-- <SignIn v-if="!user"/> -->
<!-- <Index v-if="user" :user="user" :projects="projects" /> -->
<!-- <Login v-if="logging" /> -->
<!-- <Index v-else /> -->
<router-view />
<!-- //* Les views sont injectées ici -->
</div>
</main>
<footer>
<div class="ui compact text menu">
<!-- // todo: ajouter liens -->
<a class="item" href="#"></a>
<a class="item" href="#"></a>
<router-link to="/mentions" class="item">Mentions légales</router-link>
<router-link to="/aide" class="item">Aide</router-link>
<p class="item">Version {{ PACKAGE_VERSION }}</p>
</div>
</footer>
......@@ -131,6 +135,7 @@ export default {
},
created() {
this.$store.dispatch("GET_PROJECTS");
this.$store.dispatch("GET_HELP");
this.$store.dispatch("GET_COOKIE", "csrftoken"); // * ne récupère plus le cookie arès avoir vidé le cache ?!
},
};
......
src/router/index.js
+ 27
− 3
View file @ 71492bff
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
//import Login from '../views/Login.vue'
Vue.use(VueRouter)
......@@ -11,14 +10,39 @@ const routes = [
name: 'Index',
component: Index
},
{
path: '/mentions',
name: 'mentions',
// route level code-splitting
// this generates a separate chunk (login.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "login" */ '../views/flatpages/Default.vue')
},
{
path: '/aide',
name: 'Aide',
// route level code-splitting
// this generates a separate chunk (login.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "login" */ '../views/flatpages/Default.vue')
},
{
path: '/connexion',
name: 'Login',
// route level code-splitting
// this generates a separate chunk (login.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue')
}
component: () => import(/* webpackChunkName: "login" */ '../views/registration/Login.vue')
},
{
path: '/projet/:slug',
name: 'Project_detail',
props: true,
// route level code-splitting
// this generates a separate chunk (login.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "login" */ '../views/project/Project_detail.vue')
},
]
const router = new VueRouter({
......
src/store/index.js
+ 13
− 1
View file @ 71492bff
......@@ -11,12 +11,14 @@ const GET_PROJECT_USER = GET_PROJECT_USER;
const GET_PROJECTS = GET_PROJECTS;
const CHECK_LOGIN = CHECK_LOGIN;
const SET_COOKIE = SET_COOKIE;
const SET_HELP = SET_HELP;
export default new Vuex.Store({
// modules,
state: {
cookie: null,
help: null,
logged: false,
project: null,
projectMembers: null,
......@@ -38,6 +40,9 @@ export default new Vuex.Store({
},
SET_COOKIE(state, cookie) {
state.cookie = cookie
},
SET_HELP(state, help) {
state.help = help
}
},
......@@ -50,6 +55,14 @@ export default new Vuex.Store({
throw error;
});
},
GET_HELP({ commit }) {
axios
.get("http://localhost:8000/api/aide/")
.then((response) => (commit("SET_HELP", response.data)))
.catch((error) => {
throw error;
});
},
GET_PROJECT({ commit }, project_slug) {
axios
.get(`http://localhost:8000/api/projet/${project_slug}/project`)
......@@ -78,7 +91,6 @@ export default new Vuex.Store({
throw error;
});
}
console.log("router", router)
},
GET_COOKIE({ commit }, name) {
let cookieValue = null;
......
src/views/Index.vue
+ 18
− 9
View file @ 71492bff
<template>
<div class="fourteen wide column">
<!-- <img class="ui centered small image" :src="LOGO_PATH" /> -->
<!--//todo: find a way to get img dynamically -->
<img
class="ui centered small image"
src="@/assets/logo-neogeo-circle.png"
/>
<!--//todo: find a way to get img dynamically -->
<h2 class="ui center aligned icon header">
<div class="content">
{{ APPLICATION_NAME }}
......@@ -15,12 +15,12 @@
<h4 id="les_projets" class="ui horizontal divider header">PROJETS</h4>
<!-- {% if can_create_project %} -->
<a class="ui green basic button" href="#"
><!-- //todo : get base url and add the rest -->
<!-- //todo : get base url and add the rest -->
<a class="ui green basic button" href="#">
<i class="plus icon"></i> Créer un nouveau projet
</a>
<a class="ui blue basic button right floated" href="#"
><!-- //todo : get base url and add the rest -->
<!-- //todo : get base url and add the rest -->
<a class="ui blue basic button right floated" href="#">
<i class="copy icon"></i> Accéder à la liste des modèles de projets
</a>
<!-- {% endif %} -->
......@@ -32,7 +32,16 @@
<!-- // todo: récupérer l'image par défaut -->
</div>
<div class="middle aligned content">
<a class="header" @click="open_project(project.slug)">{{ project.title }}</a>
<!-- <a class="header" @click="open_project(project.slug)">{{ project.title }}</a> -->
<router-link
:to="{
name: 'Project_detail',
params: { slug: project.slug },
}"
class="header"
>{{ project.title }}</router-link
>
<div class="description">
<p>{{ project.description }}</p>
</div>
......@@ -98,9 +107,9 @@ export default {
},
methods: {
open_project(project_slug) {
console.log("open",project_slug);
this.$store.dispatch("GET_PROJECT", project_slug)
}
console.log("open", project_slug);
this.$store.dispatch("GET_PROJECT", project_slug);
},
},
};
</script>
\ No newline at end of file
src/views/flatpages/Default.vue 0 → 100644
+ 19
− 0
View file @ 71492bff
<template>
<div v-if="flatpage" class="row">
<div class="ten wide column">
<h1>{{ flatpage.title }}</h1>
<div v-html="flatpage.content"></div>
</div>
</div>
</template>
<script>
export default {
name: "Default",
computed: {
flatpage() {
return this.$store.state.help[0];
},
},
};
</script>
\ No newline at end of file
src/views/project/Project_detail.vue 0 → 100644
+ 359
− 0
View file @ 71492bff
<template>
<div v-if="project">
<div class="row">
<div class="four wide middle aligned column">
<img class="ui small spaced image" src="project.thumbnail" />
<!-- // todo : GET PROJECT DATA -->
<div class="ui hidden divider"></div>
<div class="ui basic teal label" data-tooltip="Membres">
<i class="user icon"></i>{{ project.nb_contributors }}
</div>
<div class="ui basic teal label" data-tooltip="Signalements">
<i class="map marker icon"></i>{{ project.nb_published_features }}
</div>
<div class="ui basic teal label" data-tooltip="Commentaires">
<i class="comment icon"></i
>{{ project.nb_published_features_comments }}
</div>
</div>
<div class="ten wide column">
<h1 class="ui header">
<div class="content">
{{ project.title }}
<div class="ui icon right floated compact buttons">
<!-- {% if permissions|lookup:'can_view_project' %} -->
<a
id="subscribe-button"
class="ui button button-hover-green"
data-tooltip="S'abonner au projet"
data-position="top center"
data-variation="mini"
>
<i class="inverted grey envelope icon"></i>
</a>
<!-- {% endif %} {% if project and
permissions|lookup:'can_update_project' %} -->
<a
href="{% url 'geocontrib:project_update' slug=project.slug %}"
class="ui button button-hover-orange"
data-tooltip="Modifier le projet"
data-position="top center"
data-variation="mini"
>
<i class="inverted grey pencil alternate icon"></i>
</a>
<!-- {% endif %} -->
</div>
<div class="ui hidden divider"></div>
<div class="sub header">
{{ project.description }}
<!-- {{ project.description | linebreaks }} -->
</div>
</div>
</h1>
</div>
</div>
<div class="row">
<div class="seven wide column">
<h3 class="ui header">Types de signalements</h3>
<div class="ui middle aligned divided list">
<!-- {% for type in feature_types %} -->
<div class="item">
<div class="middle aligned content">
<a
href="{% url 'geocontrib:feature_type_detail' slug=project.slug feature_type_slug=type.slug %}"
>
<!-- {% if type.geom_type == 'point' %} -->
<img
class="list-image-type"
src="{% static 'geocontrib/img/marker.png' %}"
/>
<!-- {% elif type.geom_type == 'linestring' %} -->
<img
class="list-image-type"
src="{% static 'geocontrib/img/line.png' %}"
/>
<!-- {% elif type.geom_type == 'polygon' %} -->
<img
class="list-image-type"
src="{% static 'geocontrib/img/polygon.png' %}"
/>
<!-- {% endif %} -->
<!-- {{ type.title }} -->
</a>
<!-- {% if project and feature_types and
permissions|lookup:'can_create_feature' %} -->
<a
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Ajouter un signalement"
data-position="left center"
data-variation="mini"
href="{% url 'geocontrib:feature_create' slug=project.slug feature_type_slug=type.slug %}"
><!-- // todo : adapt -->
<i class="ui plus icon"></i>
</a>
<a
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Dupliquer un type de signalement"
data-position="left center"
data-variation="mini"
href="{% url 'geocontrib:feature_type_create' slug=project.slug %}?create_from=type.slug"
><!-- // todo : adapt -->
<i class="inverted grey copy alternate icon"></i>
</a>
<!-- {% endif %} {% if project and feature_types and
permissions|lookup:'can_create_feature' and type.is_editable %} -->
<a
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Éditer le type de signalement"
data-position="left center"
data-variation="mini"
href="{% url 'geocontrib:feature_type_update' slug=project.slug feature_type_slug=type.slug %}"
>
<i class="inverted grey pencil alternate icon"></i>
</a>
<!-- {% endif %} -->
</div>
</div>
<!-- {% empty %} -->
<div>
<i> Le projet ne contient pas encore de type de signalements. </i>
</div>
<!-- {% endfor %} -->
</div>
<!-- {% if project and permissions|lookup:'can_update_project' %} -->
<a
class="ui compact basic button button-hover-green"
href="{% url 'geocontrib:feature_type_create' slug=project.slug %}"
>
<i class="ui plus icon"></i>Créer un nouveau type de signalement
</a>
<!-- {% endif %} -->
</div>
<div class="seven wide column">
<a href="{% url 'geocontrib:feature_list' slug=project.slug %}">
<div id="map"></div>
</a>
</div>
</div>
<div class="row">
<div class="fourteen wide column">
<div class="ui two stackable cards">
<div class="red card">
<div class="content">
<div class="center aligned header">Derniers signalements</div>
<div class="center aligned description">
<div class="ui relaxed list">
<!-- {% for item in last_features %} -->
<div class="item">
<div class="content">
<div>
<a
href="{% url 'geocontrib:feature_detail' slug=project.slug feature_type_slug=item.feature_type.slug feature_id=item.feature_id %}"
><!-- {{ item.title }} --></a
>
</div>
<div class="description">
<i
><!-- [{{ item.created_on|date:"d/m/Y" }}{% if
user.is_authenticated %}, par
{{ item.display_creator }} {% endif %}
] --></i
>
</div>
</div>
</div>
<!-- {% empty %} -->
<i>Aucun signalement pour le moment.</i>
<!-- {% endfor %} -->
</div>
</div>
</div>
</div>
<div class="orange card">
<div class="content">
<div class="center aligned header">Derniers commentaires</div>
<div class="center aligned description">
<div class="ui relaxed list">
<!-- {% for item in last_comments %} -->
<div class="item">
<div class="content">
<div>
<!-- // todo : adapt -->
<a href="item.related_feature.feature_url"
>"<!-- {{ item.comment }} -->"</a
>
</div>
<div class="description">
<i
><!-- [ {{ item.created_on }}{% if user.is_authenticated
%}, par {{ item.display_author }}{% endif %} ] --></i
>
</div>
</div>
</div>
<!-- {% empty %} -->
<i>Aucun commentaire pour le moment.</i>
<!-- {% endfor %} -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="fourteen wide column">
<div class="ui grey segment">
<h3 class="ui header">Paramètres du projet</h3>
<div class="ui five stackable cards">
<div class="card">
<div class="center aligned content">
<h4 class="ui center aligned icon header">
<i class="disabled grey archive icon"></i>
<div class="content">Délai avant archivage automatique</div>
</h4>
</div>
<div class="center aligned extra content">
<!-- {{ project.archive_feature|default_if_none:"0" }} jours -->
{{ project.archive_feature }} jours
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey trash alternate icon"></i>
<div class="content">Délai avant suppression automatique</div>
</h4>
</div>
<div class="center aligned extra content">
<!-- {{ project.delete_feature|default_if_none:"0" }} jours -->
{{ project.delete_feature }} jours
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey eye icon"></i>
<div class="content">Visibilité des signalements publiés</div>
</h4>
</div>
<div class="center aligned extra content">
{{ project.access_level_pub_feature }}
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey eye icon"></i>
<div class="content">
Visibilité des signalements archivés
</div>
</h4>
</div>
<div class="center aligned extra content">
{{ project.access_level_arch_feature }}
</div>
</div>
<div class="card">
<div class="content">
<h4 class="ui center aligned icon header">
<i class="disabled grey cogs icon"></i>
<div class="content">Modération</div>
</h4>
</div>
<div class="center aligned extra content">
{{ project.moderation ? "Oui" : "Non" }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- {% else %} -->
<i class="icon exclamation triangle"></i>
<span
>Vous ne disposez pas des droits nécessaires pour consulter ce
projet.</span
>
<!-- {% endif %} -->
<div class="ui mini modal subscription">
<i class="close icon"></i>
<div class="ui icon header">
<i class="envelope icon"></i>
Notifications du projet
</div>
<div class="content">
<!-- {% if is_suscriber %} -->
<form
action="{% url 'geocontrib:subscription' slug=project.slug action='annuler' %}"
method="GET"
>
<button type="submit" class="ui red compact fluid button">
Se désabonner de ce projet
</button>
</form>
<!-- {% else %} -->
<form
action="{% url 'geocontrib:subscription' slug=project.slug action='ajouter' %}"
method="GET"
>
<button type="submit" class="ui green compact fluid button">
S'abonner à ce projet
</button>
</form>
<!-- {% endif %} -->
</div>
</div>
</div>
</template>
<script>
export default {
name: "Project_details",
data() {
return {
slug: this.$route.params.slug,
};
},
computed: {
project() {
return this.$store.state.projects.find(
(project) => project.slug === this.slug
);
},
},
mounted() {
console.log(this.$store.state);
},
};
</script>
src/views/Login.vue → src/views/registration/Login.vue
+ 1
− 0
View file @ 71492bff
......@@ -27,6 +27,7 @@
<form class="ui form" role="form" type="post" @submit.prevent="login">
<!-- {% csrf_token %} -->
<!-- // todo : check if working, not sure... -->
<input name="csrfmiddlewaretoken" :value="$store.csrftoken" type="hidden" />
<div class="ui stacked secondary segment">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment