diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index b5cd343d96bc1009e1d2203399c337a20b907548..0eebfc0f9b8fa4a114826e30b8c3877168bd8a2d 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -44,7 +44,6 @@ build tagged docker image:
stage: build
only:
- tags
- when: manual
tags:
- build
image:
diff --git a/nginx.conf b/nginx.conf
index 776e3c89295e49b3d4b87021fd177ae6a60ad06e..b1a4d31d8d61c35ab78d0b999c673d28a23b5a2d 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -10,6 +10,11 @@ server {
client_max_body_size 4G;
+ location = / {
+ absolute_redirect off;
+ return 301 /geocontrib/ ;
+ }
+
location /geocontrib/api {
proxy_pass_header Set-Cookie;
proxy_set_header X-NginX-Proxy true;
@@ -46,7 +51,5 @@ server {
index index.html;
try_files $uri $uri/ /geocontrib/index.html;
}
-
-
}
diff --git a/package.json b/package.json
index 0f0843731dba2192fdb958a3b2d3b750015d43fd..3e59989c8975a3211f294b94343c58eee650a539 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "geocontrib-frontend",
- "version": "2.1.1",
+ "version": "2.1.2",
"private": true,
"scripts": {
"serve": "npm run init-proxy & npm run init-serve",
diff --git a/src/components/feature/FeatureExtraForm.vue b/src/components/feature/FeatureExtraForm.vue
index 932f808d972d282114852aa15f2a2e4569675e6e..c0deb2df754b5d0e73b1142a52c8d45d54e639c7 100644
--- a/src/components/feature/FeatureExtraForm.vue
+++ b/src/components/feature/FeatureExtraForm.vue
@@ -111,7 +111,11 @@ export default {
methods: {
updateStore_extra_form(evt) {
let newExtraForm = this.field;
- newExtraForm["value"] = evt.target.checked || evt.target.value; //* if checkbox use "check", if undefined, use "value"
+ if (this.field.field_type === "boolean") {
+ newExtraForm["value"] = evt.target.checked; //* if checkbox use "checked"
+ } else {
+ newExtraForm["value"] = evt.target.value;
+ }
this.$store.commit("feature/UPDATE_EXTRA_FORM", newExtraForm);
},
},
diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
index c7ebb5c23e78db573e2df94005f12a000d1f2a3b..c55b807a95f87ffed6ba8eaca90757c21a92625b 100644
--- a/src/components/feature/FeatureListTable.vue
+++ b/src/components/feature/FeatureListTable.vue
@@ -132,7 +132,7 @@
{{ feature.properties.updated_on }}
</td>
<td class="center" v-if="user">
- {{ feature.properties.creator.username || " ---- " }}
+ {{ getUserName(feature) }}
</td>
</tr>
<tr v-if="filteredFeatures.length === 0" class="odd">
@@ -296,6 +296,12 @@ export default {
},
methods: {
+ getUserName(feature){
+ if(!feature.properties.creator) {
+ return " ---- ";
+ }
+ return feature.properties.creator.username || " ---- "
+ },
getFeatureDisplayName(feature) {
return feature.properties.title || feature.id;
},
diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue
index 5372073ee270dca4dba201cfdf927b089512c8f8..5d3d0b72f1b5902526403679338d7d44effa2351 100644
--- a/src/components/feature_type/FeatureTypeCustomForm.vue
+++ b/src/components/feature_type/FeatureTypeCustomForm.vue
@@ -293,6 +293,12 @@ export default {
checkCustomForm() {
this.form.label.errors = [];
this.form.name.errors = [];
+ this.form.options.errors = [];
+ console.log(
+ this.form.field_type.value,
+ this.form.field_type.value === "list",
+ this.form.options.value.length < 2
+ );
if (!this.form.label.value) {
//* vérifier que le label est renseigné
this.form.label.errors = ["Veuillez compléter ce champ."];
@@ -313,6 +319,13 @@ export default {
"Les champs personnalisés ne peuvent pas avoir des noms similaires.",
];
return false;
+ } else if (
+ this.form.field_type.value === "list" &&
+ this.form.options.value.length < 2
+ ) {
+ //* s'il s'agit d'un type liste, vérifier que le champ option est bien renseigné
+ this.form.options.errors = ["Veuillez compléter ce champ."];
+ return false;
}
return true;
},
diff --git a/src/main.js b/src/main.js
index 0a69972e540c108429f5a9c6939c30e66010786a..4a1f3128cd2ba8ca6a755be82f949b99d29851ad 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,26 +10,49 @@ import 'leaflet-draw/dist/leaflet.draw.css';
import '@/assets/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.css';
Vue.config.productionTip = false
+// gestion mise à jour du serviceWorker et du precache
+var refreshing=false;
+navigator.serviceWorker.addEventListener('controllerchange', () => {
+ // We'll also need to add 'refreshing' to our data originally set to false.
+ if (refreshing) return
+ refreshing = true
+ // Here the actual reload of the page occurs
+ window.location.reload()
+})
+
+
+let onConfigLoaded = function(config){
+ store.commit("SET_CONFIG", config);
+ window.proxy_url=config.VUE_APP_DJANGO_API_BASE+"proxy/";
+ axios.all([store.dispatch("USER_INFO"),
+ store.dispatch("GET_ALL_PROJECTS"),
+ store.dispatch("GET_STATIC_PAGES"),
+ store.dispatch("GET_USER_LEVEL_PROJECTS"),
+ store.dispatch("map/GET_AVAILABLE_LAYERS"),
+ store.dispatch("GET_USER_LEVEL_PERMISSIONS"),
+ ]).then(axios.spread(function () {
+ new Vue({
+ router,
+ store,
+ render: h => h(App)
+ }).$mount('#app')
+ }));
+
+}
axios.get("./config/config.json")
+ .catch((error)=>{
+ console.log(error);
+ console.log("try to get From Localstorage");
+ let conf=localStorage.getItem("geontrib_conf");
+ if(conf){
+ onConfigLoaded(JSON.parse(conf))
+ }
+ })
.then((response) => {
if (response && response.status === 200) {
- store.commit("SET_CONFIG", response.data);
- window.proxy_url = response.data.VUE_APP_DJANGO_API_BASE + "proxy/"
- axios.all([
- store.dispatch("USER_INFO"),
- store.dispatch("GET_ALL_PROJECTS"),
- store.dispatch("GET_STATIC_PAGES"),
- store.dispatch("GET_USER_LEVEL_PROJECTS"),
- store.dispatch("map/GET_AVAILABLE_LAYERS"),
- store.dispatch("GET_USER_LEVEL_PERMISSIONS"),
- ]).then(axios.spread(function () {
- new Vue({
- router,
- store,
- render: h => h(App)
- }).$mount('#app')
- }))
+ localStorage.setItem("geontrib_conf",JSON.stringify(response.data));
+ onConfigLoaded(response.data)
}
})
.catch((error) => {
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 76cede074d8a8393586f6567de3020e2e506591d..0fea28955951af66f5cce9aa2df7e57716b5b329 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -10,8 +10,14 @@ if (process.env.NODE_ENV === 'production') {
'For more details, visit https://goo.gl/AFskqB'
)
},
- registered () {
- console.log('Service worker has been registered.')
+ registered (registration) {
+ //console.log('Service worker has been registered.')
+ console.log(
+ 'Service worker has been registered and now polling for updates.'
+ )
+ setInterval(() => {
+ registration.update()
+ }, 10000) // every 10 seconds
},
cached () {
console.log('Content has been cached for offline use.')
@@ -19,8 +25,14 @@ if (process.env.NODE_ENV === 'production') {
updatefound () {
console.log('New content is downloading.')
},
- updated () {
- console.log('New content is available; please refresh.')
+ updated (registration) {
+ alert('Une nouvelle version de l\'application est disponible, l\'application va se recharger');
+ console.log('New content is available; please refresh.');
+ //
+ if (!registration || !registration.waiting) return
+ // Send message to SW to skip the waiting and activate the new SW
+ registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+ //window.location.reload(true);
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
diff --git a/src/router/index.js b/src/router/index.js
index 035bafb0d27e113d77fab3d5fc207db3050e7356..f0eb56d71e8a8442ffd6d914291a1114e2eb3281 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -108,6 +108,11 @@ const routes = [
name: 'details-signalement',
component: () => import('../views/feature/Feature_detail.vue')
},
+ {
+ path: '/projet/:slug/type-signalement/:slug_type_signal/offline',
+ name: 'offline-signalement',
+ component: () => import('../views/feature/Feature_offline.vue')
+ },
{
path: '/projet/:slug/type-signalement/:slug_type_signal/signalement/:slug_signal/editer/',
name: 'editer-signalement',
diff --git a/src/service-worker.js b/src/service-worker.js
new file mode 100644
index 0000000000000000000000000000000000000000..7497fb0ca7f6f2d73661d696f8fa189c69640695
--- /dev/null
+++ b/src/service-worker.js
@@ -0,0 +1,64 @@
+// custom service-worker.js
+if (workbox) {
+ // adjust log level for displaying workbox logs
+ //workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug)
+
+ // apply precaching. In the built version, the precacheManifest will
+ // be imported using importScripts (as is workbox itself) and we can
+ // precache this. This is all we need for precaching
+ workbox.precaching.precacheAndRoute(self.__precacheManifest);
+
+ //workbox.core.skipWaiting();
+
+ // Make sure to return a specific response for all navigation requests.
+ // Since we have a SPA here, this should be index.html always.
+ // https://stackoverflow.com/questions/49963982/vue-router-history-mode-with-pwa-in-offline-mode
+ workbox.routing.registerNavigationRoute('/geocontrib/index.html')
+
+ workbox.routing.registerRoute(
+ new RegExp('.*/config/config.json'),
+ new workbox.strategies.StaleWhileRevalidate({
+ cacheName: 'config',
+ })
+ )
+
+ workbox.routing.registerRoute(
+ new RegExp('.*/api/.*'),
+ new workbox.strategies.NetworkFirst({
+ cacheName: 'api',
+ })
+ )
+ workbox.routing.registerRoute(
+ /^https:\/\/c\.tile\.openstreetmap\.fr/,
+ new workbox.strategies.CacheFirst({
+ cacheName: 'osm',
+ plugins: [
+ new workbox.cacheableResponse.Plugin({
+ statuses: [0, 200],
+ }),
+ new workbox.expiration.Plugin({
+ maxAgeSeconds: 60 * 60 * 24 * 365,
+ // maxEntries: 30, pour limiter le nombre d'entrée dans le cache
+ }),
+ ],
+ })
+ )
+
+}
+
+// This code listens for the user's confirmation to update the app.
+self.addEventListener('message', (e) => {
+ if (!e.data) {
+ return;
+ }
+ //console.log(e.data);
+ switch (e.data.type) {
+ case 'SKIP_WAITING':
+ self.skipWaiting();
+ break;
+ default:
+ // NOOP
+ break;
+ }
+})
+
diff --git a/src/store/modules/feature.js b/src/store/modules/feature.js
index 67079e83ac176f0bbc48a085eb788aef6630ef37..72b383a7be2634c741475ed4aa65250095467371 100644
--- a/src/store/modules/feature.js
+++ b/src/store/modules/feature.js
@@ -20,6 +20,24 @@ const feature = {
form: null,
linkedFormset: [],
linked_features: [],
+ statusChoices: [
+ {
+ name: "Brouillon",
+ value: "draft",
+ },
+ {
+ name: "Publié",
+ value: "published",
+ },
+ {
+ name: "Archivé",
+ value: "archived",
+ },
+ {
+ name: "En attente de publication",
+ value: "pending",
+ },
+ ],
},
mutations: {
SET_FEATURES(state, features) {
@@ -103,9 +121,12 @@ const feature = {
});
},
- SEND_FEATURE({ state, rootState, dispatch }, routeName) {
+ SEND_FEATURE({ state, rootState, commit, dispatch }, routeName) {
+ commit("DISPLAY_LOADER", "Le signalement est en cours de création", { root: true })
const message = routeName === "editer-signalement" ? "Le signalement a été mis à jour" : "Le signalement a été crée";
+
function redirect(featureId) {
+ commit("DISCARD_LOADER", null, { root: true })
router.push({
name: "details-signalement",
params: {
@@ -115,12 +136,14 @@ const feature = {
},
});
}
+
async function handleOtherForms(featureId) {
await dispatch("SEND_ATTACHMENTS", featureId)
await dispatch("PUT_LINKED_FEATURES", featureId)
redirect(featureId);
}
+ //* prepare feature data to send
let extraFormObject = {}; //* prepare an object to be flatten in properties of geojson
for (const field of state.extra_form) {
extraFormObject[field.name] = field.value;
@@ -138,8 +161,9 @@ const feature = {
...extraFormObject
}
}
+
if (routeName === "editer-signalement") {
- axios
+ return axios
.put(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${state.form.feature_id}/?` +
`feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
`&project__slug=${rootState.project_slug}`
@@ -154,10 +178,38 @@ const feature = {
}
})
.catch((error) => {
+ commit("DISCARD_LOADER", null, { root: true })
+ if(error.message=="Network Error" ||window.navigator.onLine==false){
+ let arraysOffline=[];
+ let localStorageArray=localStorage.getItem("geocontrib_offline");
+ if(localStorageArray){
+ arraysOffline=JSON.parse(localStorageArray);
+ }
+ let updateMsg={
+ project:rootState.project_slug,
+ type:'put',
+ featureId:state.form.feature_id,
+ geojson:geojson
+ };
+ arraysOffline.push(updateMsg);
+ localStorage.setItem("geocontrib_offline",JSON.stringify(arraysOffline));
+ router.push({
+ name: "offline-signalement",
+ params: {
+ slug_type_signal: rootState.feature_type.current_feature_type_slug
+ },
+ });
+
+ }
+ else{
+ console.log(error)
+ throw error;
+ }
+
throw error;
});
} else {
- axios
+ return axios
.post(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/`, geojson)
.then((response) => {
if (response.status === 201 && response.data) {
@@ -169,7 +221,33 @@ const feature = {
}
})
.catch((error) => {
- throw error;
+ commit("DISCARD_LOADER", null, { root: true })
+ if(error.message=="Network Error" ||window.navigator.onLine==false){
+ let arraysOffline=[];
+ let localStorageArray=localStorage.getItem("geocontrib_offline");
+ if(localStorageArray){
+ arraysOffline=JSON.parse(localStorageArray);
+ }
+ let updateMsg={
+ project:rootState.project_slug,
+ type:'post',
+ geojson:geojson
+ };
+ arraysOffline.push(updateMsg);
+ localStorage.setItem("geocontrib_offline",JSON.stringify(arraysOffline));
+ router.push({
+ name: "offline-signalement",
+ params: {
+ slug_type_signal: rootState.feature_type.current_feature_type_slug
+ },
+ });
+
+ }
+ else{
+ console.log(error)
+ throw error;
+ }
+
});
}
},
diff --git a/src/views/Index.vue b/src/views/Index.vue
index ca7e4fc7cbf83ef91638e4fdfed935cc7cf5c875..e199657757733fb9d0874e0c72e2a47fd9f04d8b 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -15,14 +15,14 @@
<h4 id="les_projets" class="ui horizontal divider header">PROJETS</h4>
<div class="flex">
<router-link
- v-if="user && user.can_create_project"
+ v-if="user && user.can_create_project && isOffline()!=true"
:to="{ name: 'project_create', params: { action: 'create' } }"
class="ui green basic button"
>
<i class="plus icon"></i> Créer un nouveau projet
</router-link>
<router-link
- v-if="user && user.can_create_project"
+ v-if="user && user.can_create_project && isOffline()!=true"
:to="{
name: 'project_type_list',
}"
@@ -124,6 +124,9 @@ export default {
},
methods: {
+ isOffline(){
+ return navigator.onLine==false;
+ },
refreshId() {
//* change path of thumbnail to update image
return "?ver=" + Math.random();
diff --git a/src/views/feature/Feature_detail.vue b/src/views/feature/Feature_detail.vue
index 42a6d487f1f1eb874b01ae4d62d4f0a0d451bc98..fc5562d7eaf9d6bca6c768835466093069db95e2 100644
--- a/src/views/feature/Feature_detail.vue
+++ b/src/views/feature/Feature_detail.vue
@@ -72,17 +72,11 @@
<td>
<b>
<i
- v-if="
- field.field_type === 'boolean' && field.value === true
- "
- class="olive check icon"
- ></i>
- <i
- v-else-if="
- field.field_type === 'boolean' &&
- field.value === false
- "
- class="red times icon"
+ v-if="field.field_type === 'boolean'"
+ :class="[
+ 'icon',
+ field.value ? 'olive check' : 'grey times',
+ ]"
></i>
<span v-else>
{{ field.value }}
@@ -98,11 +92,8 @@
<tr>
<td>Statut</td>
<td>
- <i
- v-if="feature.status"
- :class="getIconLabelStatus(feature.status, 'icon')"
- ></i>
- {{ getIconLabelStatus(feature.status, "label") }}
+ <i v-if="feature.status" :class="['icon', statusIcon]"></i>
+ {{ statusLabel }}
</td>
</tr>
<tr>
@@ -144,20 +135,6 @@
<a @click="pushNgo(link)">{{ link.feature_to.title }} </a>
({{ link.feature_to.display_creator }} -
{{ link.feature_to.created_on }})
- <!-- <router-link
- :key="$route.fullPath"
- :to="{
- name: 'details-signalement',
- params: {
- slug_type_signal: link.feature_to.feature_type_slug,
- slug_signal: link.feature_to.feature_id,
- },
- }"
- >{{ link.feature_to.title }}</router-link
- >
- ({{ link.feature_to.display_creator }} -
- {{ link.feature_to.created_on }})
- -->
</td>
</tr>
</tbody>
@@ -301,7 +278,7 @@
style="display: none"
name="attachment_file"
id="attachment_file"
- @change="getAttachmentFileData($event)"
+ @change="onFileChange"
/>
</div>
<div class="field">
@@ -314,6 +291,11 @@
{{ comment_form.title.errors }}
</div>
</div>
+ <ul v-if="comment_form.attachment_file.errors" class="errorlist">
+ <li>
+ {{ comment_form.attachment_file.errors }}
+ </li>
+ </ul>
<button
@click="postComment"
type="button"
@@ -409,7 +391,7 @@ export default {
computed: {
...mapState(["user"]),
...mapGetters(["permissions"]),
- ...mapState("feature", ["linked_features"]),
+ ...mapState("feature", ["linked_features", "statusChoices"]),
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
@@ -427,6 +409,28 @@ export default {
}
return false;
},
+
+ statusIcon() {
+ switch (this.feature.status) {
+ case "archived":
+ return "grey archive";
+ case "pending":
+ return "teal hourglass outline";
+ case "published":
+ return "olive check";
+ case "draft":
+ return "orange pencil alternate";
+ default:
+ return "";
+ }
+ },
+
+ statusLabel() {
+ const status = this.statusChoices.find(
+ (el) => el.value === this.feature.status
+ );
+ return status ? status.name : "";
+ },
},
filters: {
@@ -438,20 +442,6 @@ export default {
},
methods: {
- getIconLabelStatus(status, type) {
- if (status === "archived")
- if (type == "icon") return "grey archive icon";
- else return "Archivé";
- else if (status === "pending")
- if (type == "icon") return "teal hourglass outline icon";
- else return "En attente de publication";
- else if (status === "published")
- if (type == "icon") return "olive check icon";
- else return "Publié";
- else if (status === "draft")
- if (type == "icon") return "orange pencil alternate icon";
- else return "Brouillon";
- },
pushNgo(link) {
this.$router.push({
name: "details-signalement",
@@ -464,8 +454,6 @@ export default {
this.getFeatureAttachments();
this.getLinkedFeatures();
this.addFeatureToMap();
- //this.initMap();
- //this.$router.go();
},
postComment() {
@@ -485,7 +473,6 @@ export default {
})
.then(() => {
this.confirmComment();
- //this.getFeatureAttachments(); //* display new attachment from comment on the page
});
} else {
this.confirmComment();
@@ -503,15 +490,50 @@ export default {
this.comment_form.comment.value = null;
},
- getAttachmentFileData(evt) {
- const files = evt.target.files || evt.dataTransfer.files;
- const period = files[0].name.lastIndexOf(".");
- const fileName = files[0].name.substring(0, period);
- const fileExtension = files[0].name.substring(period + 1);
- const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
- this.comment_form.attachment_file.file = files[0];
- this.comment_form.attachment_file.value = shortName;
- this.comment_form.title.value = shortName;
+ validateImgFile(files, handleFile) {
+ let url = window.URL || window.webkitURL;
+ let image = new Image();
+ image.onload = function () {
+ handleFile(true);
+ };
+ image.onerror = function () {
+ handleFile(false);
+ };
+ image.src = url.createObjectURL(files);
+ URL.revokeObjectURL(image.src);
+ },
+
+ onFileChange(e) {
+ // * read image file
+ const files = e.target.files || e.dataTransfer.files;
+
+ const _this = this; //* 'this' is different in onload function
+ function handleFile(isValid) {
+ if (isValid) {
+ const period = files[0].name.lastIndexOf(".");
+ const fileName = files[0].name.substring(0, period);
+ const fileExtension = files[0].name.substring(period + 1);
+ const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
+ _this.comment_form.attachment_file.file = files[0]; //* store the file to post later
+ _this.comment_form.attachment_file.value = shortName; //* for display
+ _this.comment_form.title.value = shortName;
+ _this.comment_form.attachment_file.errors = null;
+ } else {
+ _this.comment_form.attachment_file.errors =
+ "Transférez une image valide. Le fichier que vous avez transféré n'est pas une image, ou il est corrompu.";
+ }
+ }
+
+ if (files.length) {
+ //* exception for pdf
+ if (files[0].type === "application/pdf") {
+ handleFile(true);
+ } else {
+ this.comment_form.attachment_file.errors = null;
+ //* check if file is an image and pass callback to handle file
+ this.validateImgFile(files[0], handleFile);
+ }
+ }
},
goBackToProject(message) {
@@ -630,9 +652,6 @@ export default {
},
created() {
- // if (!this.project) {
- // this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
- // }
this.$store.commit(
"feature_type/SET_CURRENT_FEATURE_TYPE_SLUG",
this.$route.params.slug_type_signal
diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index 05fba45025c5e32fe6f1cf523512644f042d80c3..1dc8b37cb83ade39e4b14299b837b630763b0552 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -4,7 +4,7 @@
type="application/javascript"
:src="
baseUrl +
- '/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
+ 'resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
"
></script>
<div class="fourteen wide column">
@@ -72,7 +72,7 @@
<!-- Import GeoImage -->
<div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
- <p>
+ <p v-if="isOffline()!=true">
<button
@click="toggleGeoRefModal"
id="add-geo-image"
@@ -122,7 +122,7 @@
class="image_file"
id="image_file"
/>
- <p class="error-message" style="color: red">
+ <p class="error-message">
{{ erreurUploadMessage }}
</p>
</div>
@@ -207,45 +207,48 @@
</div>
<!-- Pièces jointes -->
- <div class="ui horizontal divider">PIÈCES JOINTES</div>
- <div id="formsets-attachment">
- <FeatureAttachmentForm
- v-for="form in attachmentFormset"
- :key="form.dataKey"
- :attachmentForm="form"
- ref="attachementForm"
- />
- </div>
+ <div v-if="isOffline()!=true">
+ <div class="ui horizontal divider">PIÈCES JOINTES</div>
+ <div v-if="isOffline()!=true" id="formsets-attachment">
+ <FeatureAttachmentForm
+ v-for="form in attachmentFormset"
+ :key="form.dataKey"
+ :attachmentForm="form"
+ ref="attachementForm"
+ />
+ </div>
- <button
- @click="add_attachement_formset"
- id="add-attachment"
- type="button"
- class="ui compact basic button button-hover-green"
- >
- <i class="ui plus icon"></i>Ajouter une pièce jointe
- </button>
+ <button
+ @click="add_attachement_formset"
+ id="add-attachment"
+ type="button"
+ class="ui compact basic button button-hover-green"
+ >
+ <i class="ui plus icon"></i>Ajouter une pièce jointe
+ </button>
+ </div>
<!-- Signalements liés -->
- <div class="ui horizontal divider">SIGNALEMENTS LIÉS</div>
- <div id="formsets-link">
- <FeatureLinkedForm
- v-for="form in linkedFormset"
- :key="form.dataKey"
- :linkedForm="form"
- :features="features"
- ref="linkedForm"
- />
+ <div v-if="isOffline()!=true">
+ <div class="ui horizontal divider">SIGNALEMENTS LIÉS</div>
+ <div id="formsets-link">
+ <FeatureLinkedForm
+ v-for="form in linkedFormset"
+ :key="form.dataKey"
+ :linkedForm="form"
+ :features="features"
+ ref="linkedForm"
+ />
+ </div>
+ <button
+ @click="add_linked_formset"
+ id="add-link"
+ type="button"
+ class="ui compact basic button button-hover-green"
+ >
+ <i class="ui plus icon"></i>Ajouter une liaison
+ </button>
</div>
- <button
- @click="add_linked_formset"
- id="add-link"
- type="button"
- class="ui compact basic button button-hover-green"
- >
- <i class="ui plus icon"></i>Ajouter une liaison
- </button>
-
<div class="ui divider"></div>
<button @click="postForm" type="button" class="ui teal icon button">
@@ -304,24 +307,6 @@ export default {
erreurUploadMessage: null,
attachmentDataKey: 0,
linkedDataKey: 0,
- statusChoices: [
- {
- name: "Brouillon",
- value: "draft",
- },
- {
- name: "Publié",
- value: "published",
- },
- {
- name: "Archivé",
- value: "archived",
- },
- {
- name: "En attente de publication",
- value: "pending",
- },
- ],
form: {
title: {
errors: [],
@@ -371,6 +356,7 @@ export default {
"features",
"extra_form",
"linked_features",
+ "statusChoices"
]),
field_title() {
@@ -393,9 +379,7 @@ export default {
},
orderedCustomFields() {
- return [...this.extra_form].sort(
- (a, b) => a.position - b.position
- );
+ return [...this.extra_form].sort((a, b) => a.position - b.position);
},
geoRefFileLabel() {
@@ -419,8 +403,8 @@ export default {
if (this.project) {
const isModerate = this.project.moderation;
const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
- const isOwnFeature = this.feature //* prevent undefined feature
- ? this.feature.creator === this.user.id
+ const isOwnFeature = this.feature
+ ? this.feature.creator === this.user.id //* prevent undefined feature
: false; //* si le contributeur est l'auteur du signalement
if (
//* si admin ou modérateur, statuts toujours disponible : Brouillon, Publié, Archivé
@@ -459,6 +443,9 @@ export default {
},
methods: {
+ isOffline(){
+ return navigator.onLine==false;
+ },
initForm() {
if (this.currentRouteName === "editer-signalement") {
for (let key in this.feature) {
@@ -491,7 +478,7 @@ export default {
this.erreurGeolocalisationMessage = err.message;
if (err.message === "User denied geolocation prompt") {
this.erreurGeolocalisationMessage =
- "La géolocalisation a été désactivé par l'utilisateur";
+ "La géolocalisation a été désactivée par l'utilisateur";
}
}
this.erreurGeolocalisationMessage = null;
@@ -1045,6 +1032,10 @@ export default {
.ui.segment {
margin: 1rem 0 !important;
}
+
+.error-message {
+ color: red;
+}
/* override to display buttons under the dimmer of modal */
.leaflet-top,
.leaflet-bottom {
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index f5d4b5ba5abd4560312d060de958d326739424b2..667e974de35c926248f704fa1a6c94f85bf44362 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -4,7 +4,7 @@
type="application/javascript"
:src="
baseUrl +
- '/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
+ 'resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
"
></script>
<div id="feature-list-container" class="ui grid mobile-column">
@@ -37,7 +37,11 @@
</div>
<div
- v-if="project && feature_types && permissions.can_create_feature"
+ v-if="
+ project &&
+ feature_types.length > 0 &&
+ permissions.can_create_feature
+ "
class="item right"
>
<div
@@ -87,7 +91,6 @@
<div class="field wide four column no-margin-mobile">
<label>Type</label>
<Dropdown
- @update:selection="onFilterTypeChange($event)"
:options="form.type.choices"
:selected="form.type.selected"
:selection.sync="form.type.selected"
@@ -99,8 +102,7 @@
<label>Statut</label>
<!-- //* giving an object mapped on key name -->
<Dropdown
- @update:selection="onFilterStatusChange($event)"
- :options="form.status.choices"
+ :options="statusChoices"
:selected="form.status.selected.name"
:selection.sync="form.status.selected"
:search="true"
@@ -116,7 +118,7 @@
type="text"
name="title"
v-model="form.title"
- @input="onFilterChange()"
+ @input="onFilterChange"
/>
<button
type="button"
@@ -128,7 +130,7 @@
</div>
</div>
</div>
- <!-- map params, updated on map move // todo : brancher sur la carte probablement -->
+ <!-- map params, updated on map move -->
<input type="hidden" name="zoom" v-model="zoom" />
<input type="hidden" name="lat" v-model="lat" />
<input type="hidden" name="lng" v-model="lng" />
@@ -255,15 +257,15 @@ export default {
filteredFeatures() {
let results = this.geojsonFeatures;
- if (this.filterType) {
+ if (this.form.type.selected) {
results = results.filter(
- (el) => el.properties.feature_type.title === this.filterType
+ (el) => el.properties.feature_type.title === this.form.type.selected
);
}
- if (this.filterStatus) {
- console.log("filter by" + this.filterStatus);
+ if (this.form.status.selected.value) {
+ console.log("filter by" + this.form.status.selected.value);
results = results.filter(
- (el) => el.properties.status.value === this.filterStatus
+ (el) => el.properties.status.value === this.form.status.selected.value
);
}
if (this.form.title) {
@@ -278,6 +280,21 @@ export default {
}
return results;
},
+
+ statusChoices() {
+ //* if project is not moderate, remove pending status
+ return this.form.status.choices.filter((el) =>
+ this.project.moderation ? true : el.value !== "pending"
+ );
+ },
+ },
+
+ watch: {
+ filteredFeatures(newValue, oldValue) {
+ if (newValue && newValue !== oldValue) {
+ this.onFilterChange()
+ }
+ }
},
methods: {
@@ -308,30 +325,11 @@ export default {
this.modalAllDelete();
},
- onFilterStatusChange(newvalue) {
- this.filterStatus = null;
- if (newvalue) {
- console.log("filter change", newvalue.value);
- this.filterStatus = newvalue.value;
- }
-
- this.onFilterChange();
- },
-
- onFilterTypeChange(newvalue) {
- this.filterType = null;
- if (newvalue) {
- console.log("filter change", newvalue);
- this.filterType = newvalue;
- }
- this.onFilterChange();
- },
-
onFilterChange() {
- var features = this.filteredFeatures;
- this.featureGroup.clearLayers();
- this.featureGroup = mapUtil.addFeatures(features, {});
- if (features.length > 0) {
+ if (this.featureGroup) {
+ const features = this.filteredFeatures;
+ this.featureGroup.clearLayers();
+ this.featureGroup = mapUtil.addFeatures(features, {});
mapUtil
.getMap()
.fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
@@ -362,9 +360,8 @@ export default {
});
// --------- End sidebar events ----------
- if (this.$store.state.map.geojsonFeatures) {
- this.loadFeatures(this.$store.state.map.geojsonFeatures);
- } else {
+ if (this.features && this.features.length > 0) {
+ //* features are updated consistently, then if features exists, we can fetch the geojson version
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
this.$store.commit(
"DISPLAY_LOADER",
@@ -373,7 +370,9 @@ export default {
axios
.get(url)
.then((response) => {
- this.loadFeatures(response.data.features);
+ if (response.status === 200 && response.data.features.length > 0) {
+ this.loadFeatures(response.data.features);
+ }
this.$store.commit("DISCARD_LOADER");
})
.catch((error) => {
diff --git a/src/views/feature/Feature_offline.vue b/src/views/feature/Feature_offline.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb8a89bd8e14f663924e90e294a8a43dc60956dd
--- /dev/null
+++ b/src/views/feature/Feature_offline.vue
@@ -0,0 +1,41 @@
+<template>
+ <div v-frag>
+ Erreur Réseau lors de l'envoi du signalement. Votre signalement devra être envoyé au serveur quand vous aurez de nouveau accès à internet.
+ Veuillez à ce moment là cliquer sur Envoyer sur la page principale du projet
+ <router-link
+ :to="{
+ name: 'project_detail',
+ params: { slug: $route.params.slug },
+ }"
+ class="header"
+ >Retour au projet</router-link
+ >
+ </div>
+</template>
+
+<script>
+import frag from "vue-frag";
+
+export default {
+ name: "Feature_offline",
+
+ directives: {
+ frag,
+ },
+
+ data() {
+ return {
+ };
+ },
+
+ computed: {
+ },
+ methods: {
+
+ }
+};
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 5087954315d796ba8161c98966784ce467d44505..d4a8636f340ea9e0a3189a21f33be644403afac6 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -52,9 +52,19 @@
<h1 class="ui header">
<div class="content">
{{ project.title }}
+ <div v-if="arraysOffline.length>0">{{arraysOffline.length}} modifications en attente
+ <button
+ :disabled="isOffline()"
+ @click="sendOfflineFeatures()"
+ class="ui fluid teal icon button"
+ >
+ <i class="upload icon"></i> Envoyer au serveur
+ </button>
+
+ </div>
<div class="ui icon right floated compact buttons">
<a
- v-if="permissions && permissions.can_view_project"
+ v-if="user && permissions && permissions.can_view_project && isOffline()!=true"
id="subscribe-button"
class="ui button button-hover-green"
data-tooltip="S'abonner au projet"
@@ -65,7 +75,7 @@
<i class="inverted grey envelope icon"></i>
</a>
<router-link
- v-if="permissions && permissions.can_update_project"
+ v-if="permissions && permissions.can_update_project && isOffline()!=true"
:to="{ name: 'project_edit', params: { slug: project.slug } }"
class="ui button button-hover-orange"
data-tooltip="Modifier le projet"
@@ -156,7 +166,7 @@
v-if="
project &&
permissions &&
- permissions.can_create_feature_type
+ permissions.can_create_feature_type && isOffline()!=true
"
class="
ui
@@ -182,7 +192,7 @@
project &&
type.is_editable &&
permissions &&
- permissions.can_create_feature_type
+ permissions.can_create_feature_type && isOffline()!=true
"
class="
ui
@@ -208,7 +218,7 @@
<div class="nouveau-type-signalement">
<router-link
- v-if="permissions && permissions.can_update_project"
+ v-if="permissions && permissions.can_update_project && isOffline()!=true"
:to="{
name: 'ajouter-type-signalement',
params: { slug: project.slug },
@@ -220,7 +230,7 @@
</div>
<div class="nouveau-type-signalement">
<a
- v-if="permissions && permissions.can_update_project"
+ v-if="permissions && permissions.can_update_project && isOffline()!=true"
class="
ui
compact
@@ -493,6 +503,7 @@ export default {
data() {
return {
infoMessage: "",
+ arraysOffline: [],
geojsonImport: [],
fileToImport: { name: "", size: 0 },
slug: this.$route.params.slug,
@@ -520,7 +531,68 @@ export default {
refreshId() {
return "?ver=" + Math.random();
},
+ isOffline(){
+ return navigator.onLine==false;
+ },
+ checkForOfflineFeature(){
+ let arraysOffline=[];
+ let localStorageArray=localStorage.getItem("geocontrib_offline");
+ if(localStorageArray){
+ arraysOffline=JSON.parse(localStorageArray);
+ this.arraysOffline=arraysOffline.filter(x=>x.project==this.project.slug);
+ }
+ },
+ sendOfflineFeatures(){
+ var promises = [];
+ this.arraysOffline.forEach((feature, index, object)=>{
+ console.log(feature);
+ if(feature.type=='post') {
+ promises.push(
+ axios
+ .post(`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/`, feature.geojson)
+ .then((response) => {
+ console.log(response)
+ if (response.status === 201 && response.data) {
+ object.splice(index, 1);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ }));
+ }
+ else if(feature.type=='put') {
+ promises.push(
+ axios
+ .put(`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature.featureId}`, feature.geojson)
+ .then((response) => {
+ console.log(response)
+ if (response.status === 200 && response.data) {
+ object.splice(index, 1);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ }));
+ }
+ });
+ Promise.all(promises).then(() => {
+ this.updateLocalStorage();
+ window.location.reload();
+ }
+ );
+
+ },
+ updateLocalStorage(){
+ let arraysOffline=[];
+ let localStorageArray=localStorage.getItem("geocontrib_offline");
+ if(localStorageArray){
+ arraysOffline=JSON.parse(localStorageArray);
+ }
+ let arraysOfflineOtherProject = arraysOffline.filter(x=>x.project!=this.project.slug);
+ arraysOffline=arraysOfflineOtherProject.concat(this.arraysOffline);
+ localStorage.setItem("geocontrib_offline",JSON.stringify(arraysOffline));
+ },
toNewFeatureType() {
this.$router.push({
name: "ajouter-type-signalement",
@@ -567,12 +639,7 @@ export default {
else
this.infoMessage =
"Vous ne recevrez plus les notifications de ce projet.";
- setTimeout(
- function () {
- this.infoMessage = "";
- }.bind(this),
- 3000
- );
+ setTimeout(() => (this.infoMessage = ""), 3000);
});
},
},
@@ -591,21 +658,28 @@ export default {
this.$store.dispatch("map/INITIATE_MAP");
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
let self = this;
+ this.checkForOfflineFeature();
axios
.get(url)
.then((response) => {
- const features = response.data.features;
+ let features = response.data.features;
+ self.arraysOffline.forEach(x=>x.geojson.properties.color="red");
+ features=response.data.features.concat(self.arraysOffline.map(x=>x.geojson));
const featureGroup = mapUtil.addFeatures(features);
if (featureGroup && featureGroup.getLayers().length > 0) {
mapUtil
.getMap()
.fitBounds(featureGroup.getBounds(), { padding: [25, 25] });
- self.$store.commit("map/SET_GEOJSON_FEATURES", features);
+ this.$store.commit("map/SET_GEOJSON_FEATURES", features);
+ } else {
+ this.$store.commit("map/SET_GEOJSON_FEATURES", []);
}
})
.catch((error) => {
throw error;
});
+
+
}
if (this.message) {
@@ -613,10 +687,7 @@ export default {
document
.getElementById("message")
.scrollIntoView({ block: "end", inline: "nearest" });
- setTimeout(() => {
- //* hide message after 5 seconds
- this.tempMessage = null;
- }, 5000);
+ setTimeout(() => (this.tempMessage = null), 5000); //* hide message after 5 seconds
}
},
};
diff --git a/vue.config.js b/vue.config.js
index 8e550623b56b7de8f5580c7b8d6bbe6144f5310d..777fbbbaf0383828440b5391b142cb44add79982 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -3,15 +3,36 @@ const fs = require('fs')
const packageJson = fs.readFileSync('./package.json')
const version = JSON.parse(packageJson).version || 0
module.exports = {
- publicPath: '/geocontrib/',
- configureWebpack: {
- plugins: [
- new webpack.DefinePlugin({
- 'process.env': {
- PACKAGE_VERSION: '"' + version + '"'
+ publicPath: '/geocontrib/',
+ devServer: {
+ proxy: {
+ '^/api': {
+ target: 'https://geocontrib.dev.neogeo.fr/api',
+ ws: true,
+ changeOrigin: true
+ }
}
- })
- ]
- },
- // the rest of your original module.exports code goes here
+ },
+ pwa: {
+ workboxPluginMode: 'InjectManifest',
+ workboxOptions: {
+ swSrc: 'src/service-worker.js',
+ exclude: [
+ /\.map$/,
+ /config\/config.*\.json$/,
+ /manifest\.json$/
+ ],
+ },
+ themeColor: '#1da025'
+ },
+ configureWebpack: {
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env': {
+ PACKAGE_VERSION: '"' + version + '"'
+ }
+ })
+ ]
+ },
+// the rest of your original module.exports code goes here
}