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

WIP: fixing project_basemap form generation

parent d14a21e8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/feature_type/FeatureTypeCustomForm.vue
+ 0
− 1
View file @ 3df894af
......@@ -225,7 +225,6 @@ export default {
for (let el in this.customForm) {
if (el && this.form[el]) this.form[el].value = this.customForm[el].value;
}
},
};
</script>
src/components/project/project_mapping_basemap.vue
+ 42
− 36
View file @ 3df894af
......@@ -2,31 +2,26 @@
<div class="ui segment">
<div class="field required">
<label for="basemap-title">Titre</label>
<input
type="text"
name="basemap-title"
:value="basemapForm.title"
required
@blur="$emit('update-basemap', basemapForm)"
/>
<input type="text" name="basemap-title" :value="title" required />
<!-- @blur="$emit('update-basemap', basemapForm)" -->
<!-- {{ basemapForm.title.errors }} -->
</div>
<div v-if="basemapForm" class="nested">
<div class="ui segments layers-container">
<div class="nested">
<div v-if="layers" class="ui segments layers-container">
{{ layers }}
{{ layers.length }}
<ProjectMappingContextLayer
v-for="layer in basemapForm.layers"
v-for="layer in layers"
:key="'layer-' + layer.dataKey"
:layer="layer"
v-on:update-layer="updateLayer"
v-on:delete-layer="removeLayer(layer.dataKey)"
/>
<!-- v-on:update-layer="updateLayer"
v-on:delete-layer="removeLayer(layer.dataKey)" -->
</div>
<div class="ui buttons">
<a
@click="addLayer"
class="ui compact small icon left floated button green"
>
<!-- @click="addLayer" -->
<a class="ui compact small icon left floated button green">
<i class="ui plus icon"></i>
<span>Ajouter une couche</span>
</a>
......@@ -65,28 +60,36 @@ export default {
data() {
return {
dataKey: 0,
basemapForm: {
layers: [],
},
title: "Fond par défaut",
layers: [
{
id: 1,
title: "Open street map",
opacity: "1.00",
order: 0,
queryable: false,
},
],
};
},
methods: {
deleteBasemap() {
this.$store.commit("map/DELETE_BASEMAP", this.basemapForm.dataKey);
this.$store.commit("map/DELETE_BASEMAP", this.basemap.id);
},
mapLayersDataKey() {
if (this.basemapForm) {
if (!this.basemapForm.layers) this.basemapForm["layers"] = [];
this.basemapForm.layers = this.basemapForm.layers.map((el) => {
/* mapLayersDataKey() {
if (this.layers) {
if (!this.layers) this.layers = [];
this.layers = this.layers.map((el) => {
this.dataKey += 1;
return { dataKey: this.dataKey, ...el };
});
}
},
addLayer() {
console.log("addLayer");
// console.log("addLayer");
this.dataKey += 1;
this.basemapForm.layers.push({
this.layers.push({
dataKey: this.dataKey,
opacity: "1.00",
order: 0,
......@@ -95,22 +98,25 @@ export default {
});
},
removeLayer(dataKey) {
this.basemapForm.layers = this.basemapForm.layers.filter(
(layer) => layer.dataKey !== dataKey
);
this.layers = this.layers.filter((layer) => layer.dataKey !== dataKey);
},
updateLayer(payload) {
const index = this.basemapForm.layers.findIndex(
const index = this.layers.findIndex(
(el) => el.dataKey === payload.dataKey
);
console.log("updateLayer", index);
this.basemapForm.layers[index] = payload;
this.$emit("update-basemap", this.basemapForm); //* update store
},
//console.log("updateLayer", index);
this.layers[index] = payload;
let basemapData = this.basemapForm;
basemapData["layers"] = this.layers;
this.$emit("update-basemap", basemapData); //* update store
}, */
},
mounted() {
this.basemapForm = this.basemap;
this.mapLayersDataKey();
this.title = this.basemap.title;
this.layers = this.basemap.layers;
// this.basemapForm = this.basemap;
//this.basemapForm = this.basemap.layers;
// this.mapLayersDataKey();
},
};
</script>
......
src/store/modules/map.js
+ 49
− 10
View file @ 3df894af
......@@ -7,21 +7,47 @@ const map = {
basemaps: [
{
"id": 1,
"title": "Fond par défaut",
"title": "Fond mock",
"layers": [
{
"id": 1,
"title": "Open street map",
"opacity": "1.00",
"order": 0,
"queryable": false
"title": "Open street map mock",
"opacity": "1.50",
"order": 2,
"queryable": true
}
]
}
},
/* {
"id": 10,
"title": "Fond mock",
"layers": [
{
"id": 1,
"title": "Open street map mock",
"opacity": "1.50",
"order": 2,
"queryable": true
}
]
},
{
"id": 5,
"title": "Fond mock",
"layers": [
{
"id": 1,
"title": "Open street map mock",
"opacity": "1.50",
"order": 2,
"queryable": true
}
]
}, */
],
features: [],
layers: [
{
/* {
"id": 1,
"options": {
"maxZoom": 20,
......@@ -30,7 +56,7 @@ const map = {
"title": "Open street map",
"service": "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
"schema_type": "tms"
}
} */
],
serviceMap: "https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png",
optionsMap: {
......@@ -39,8 +65,11 @@ const map = {
}
},
mutations: {
CREATE_BASEMAP(state, dataKey) {
state.basemaps = [...state.basemaps, { dataKey }]
SET_BASEMAPS(state, basemaps) {
state.basemaps = basemaps;
},
CREATE_BASEMAP(state, id) {
state.basemaps = [...state.basemaps, { id }]
},
DELETE_BASEMAP(state, dataKey) {
state.basemaps = state.basemaps.filter(el => el.dataKey !== dataKey)
......@@ -50,6 +79,16 @@ const map = {
}
},
getters: {
basemapMaxId: (state) => state.basemaps.reduce((acc, curr) => {
if (curr.id > acc) {
return curr.id;
} else {
return acc;
}
}, 0)
},
actions: {
INITIATE_MAP({ state, rootGetters }) {
const project = rootGetters.project
......
src/views/project/Project_mapping.vue
+ 14
− 14
View file @ 3df894af
......@@ -14,7 +14,7 @@
<a
class="ui compact small icon left floated button green"
data-variation="mini"
@click="createBasemap"
@click="addBasemap"
>
<i class="ui plus icon"></i>
<span>Créer un fond cartographique</span>
......@@ -23,11 +23,11 @@
<div class="ui">
<ProjectMappingBasemap
v-for="basemap in basemapForms"
v-for="basemap in basemaps"
:key="basemap.dataKey"
:basemap="basemap"
v-on:update-basemap="updateBasemap2store"
/>
<!-- v-on:update-basemap="updateBasemap2store" -->
</div>
<button
......@@ -43,7 +43,7 @@
<script>
import Project_mapping_basemap from "@/components/project/project_mapping_basemap.vue";
import { mapState } from "vuex";
import { mapState, mapGetters } from "vuex";
export default {
name: "Project_mapping",
......@@ -52,33 +52,33 @@ export default {
ProjectMappingBasemap: Project_mapping_basemap,
},
data() {
/* data() {
return {
dataKey: 0,
};
},
}, */
computed: {
...mapState("map", ["basemaps"]),
basemapForms: function () {
...mapGetters("map", ["basemapMaxId"]),
/* basemapForms: function () {
return this.basemaps.map((el) => {
this.dataKey += 1;
return { dataKey: this.dataKey, ...el };
});
},
}, */
},
methods: {
createBasemap() {
this.$store.commit("map/CREATE_BASEMAP", this.dataKey);
this.dataKey += 1;
addBasemap() { // * ajout d'un fond cartographique
this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
},
updateBasemap2store(payload) {
/* updateBasemap2store(payload) {
const index = this.basemapForms.findIndex(
(el) => el.dataKey === payload.dataKey
);
console.log("updateBasemap2store", index);
// console.log("updateBasemap2store", index);
this.basemapForms[index] = payload;
this.$store.commit("map/UPDATE_BASEMAPS", this.basemapForms);
},
}, */
saveChanges() {
this.$store.dispatch("map/SAVE_BASEMAPS");
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment