diff --git a/src/components/project/ProjectMappingContextLayer.vue b/src/components/project/ProjectMappingContextLayer.vue
index f28852d0303e574ee6368e0fccffd55c56e26f7a..4b1f2072d0b20c8441f28da15bd4d48ead3dc253 100644
--- a/src/components/project/ProjectMappingContextLayer.vue
+++ b/src/components/project/ProjectMappingContextLayer.vue
@@ -24,22 +24,12 @@
class="field three wide {% if form.opacity.errors %} error{% endif %}"
>
<label for="opacity">Opacité</label>
- <input
- type="number"
- v-model.number="layerForm.opacity"
- step="0.01"
- @change="updateLayer"
- />
+ <input type="number" v-model.number="layerOpacity" step="0.01" />
<!-- {{ form.opacity.errors }} -->
</div>
<div class="field three wide">
<div class="ui checkbox">
- <input
- type="checkbox"
- :checked="layerForm.queryable"
- name="queryable"
- @change="updateLayer"
- />
+ <input type="checkbox" v-model="layerQueryable" name="queryable" />
<label for="queryable">Requêtable</label>
</div>
<!-- {{ form.queryable.errors }} -->
@@ -62,21 +52,51 @@ import { mapState } from "vuex";
export default {
name: "ProjectMappingContextLayer",
- props: ["layer"],
+
+ props: ["layer", "basemapid"],
+
components: {
Dropdown,
},
- data() {
- return {
- layerForm: null,
- selectedLayer: {
- name: null,
- value: null,
- },
- };
- },
+
computed: {
- ...mapState("map", ["layers"]),
+ ...mapState("map", ["layers", "availableLayers"]),
+
+ selectedLayer: {
+ get() {
+ return {
+ name: this.layer ? this.layer.service : "",
+ value: this.layer ? this.layer.title : "",
+ };
+ },
+
+ set(newValue) {
+ this.updateLayer({
+ ...this.layer,
+ service: newValue.name,
+ title: newValue.value,
+ });
+ },
+ },
+
+ layerOpacity: {
+ get() {
+ return this.layer.opacity;
+ },
+ set(newValue) {
+ this.updateLayer({ ...this.layer, opacity: newValue });
+ },
+ },
+
+ layerQueryable: {
+ get() {
+ return this.layer.queryable;
+ },
+ set(newValue) {
+ this.updateLayer({ ...this.layer, queryable: newValue });
+ },
+ },
+
availableLayers: function () {
return this.layers.map((el) => {
return { name: el.service, value: el.title };
@@ -89,44 +109,21 @@ export default {
: "Choisissez une couche";
},
},
- watch: {
- selectedLayer(newValue, oldValue) {
- if (newValue !== oldValue) {
- this.updateLayer()
- }
- },
- layer(newValue, oldValue) {
- console.log(newValue)
- if (newValue !== oldValue) {
- console.log(newValue)
- }
- }
- },
+
methods: {
removeLayer() {
- this.$emit("delete-layer");
+ this.$store.commit("map/DELETE_BASEMAP_LAYER", {
+ basemapId: this.basemapid,
+ layerId: this.layer.dataKey,
+ });
},
- updateLayer() {
- this.$emit("update-layer", this.layerForm);
+ updateLayer(layer) {
+ this.$store.commit("map/UPDATE_BASEMAP_LAYER", {
+ basemapId: this.basemapid,
+ layerId: this.layer.dataKey,
+ layer,
+ });
},
},
- created() {
- this.layerForm = {
- opacity: "1.00",
- order: 0,
- queryable: false,
- title: "Open street map",
- ...this.layer, //* spread other values from props and overide previous ones if defined
- };
- },
- mounted() {
- let selectedLayer = this.layers.find((el) => el.title === this.layer.title);
- if (selectedLayer) {
- this.selectedLayer = {
- name: selectedLayer.service,
- value: selectedLayer.title,
- };
- }
- },
};
</script>
\ No newline at end of file
diff --git a/src/components/project/project_mapping_basemap.vue b/src/components/project/project_mapping_basemap.vue
index f85129e43e9d3e02653cf0f1d1b1b7afc1f34186..4359218adcb4c52eff0bc85769443dd4b7c21a0d 100644
--- a/src/components/project/project_mapping_basemap.vue
+++ b/src/components/project/project_mapping_basemap.vue
@@ -2,26 +2,24 @@
<div class="ui segment">
<div class="field required">
<label for="basemap-title">Titre</label>
- <input type="text" name="basemap-title" :value="title" required />
- <!-- @blur="$emit('update-basemap', basemapForm)" -->
+ <input v-model="title" type="text" name="basemap-title" required />
<!-- {{ basemapForm.title.errors }} -->
</div>
<div class="nested">
- <div v-if="layers" class="ui segments layers-container">
- {{ layers }}
- {{ layers.length }}
+ <div v-if="basemap.layers" class="ui segments layers-container">
<ProjectMappingContextLayer
- v-for="layer in layers"
+ v-for="layer in basemap.layers"
:key="'layer-' + layer.dataKey"
:layer="layer"
+ :basemapid="basemap.id"
/>
- <!-- v-on:update-layer="updateLayer"
- v-on:delete-layer="removeLayer(layer.dataKey)" -->
</div>
<div class="ui buttons">
- <!-- @click="addLayer" -->
- <a class="ui compact small icon left floated button green">
+ <a
+ @click="addLayer"
+ class="ui compact small icon left floated button green"
+ >
<i class="ui plus icon"></i>
<span>Ajouter une couche</span>
</a>
@@ -53,70 +51,61 @@ import ProjectMappingContextLayer from "@/components/project/ProjectMappingConte
export default {
name: "Project_mapping_basemap",
+
props: ["basemap"],
+
components: {
ProjectMappingContextLayer,
},
- data() {
- return {
- dataKey: 0,
- title: "Fond par défaut",
- layers: [
- {
- id: 1,
- title: "Open street map",
- opacity: "1.00",
- order: 0,
- queryable: false,
- },
- ],
- };
+
+ computed: {
+ maxLayersCount: function () {
+ console.log("maxLayersCount", this.basemap.layers);
+ return this.basemap.layers.reduce((acc, curr) => {
+ if (curr.dataKey > acc) {
+ return curr.dataKey;
+ } else {
+ return acc;
+ }
+ }, 0);
+ },
+
+ title: {
+ get() {
+ return this.basemap.title || `Fond ${this.basemap.id}`;
+ },
+ set(newValue) {
+ this.$store.commit("map/UPDATE_BASEMAP", {
+ id: this.basemap.id,
+ title: newValue,
+ });
+ },
+ },
},
methods: {
deleteBasemap() {
this.$store.commit("map/DELETE_BASEMAP", this.basemap.id);
},
- /* 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");
- this.dataKey += 1;
- this.layers.push({
- dataKey: this.dataKey,
+ console.log("addLayer", this.maxLayersCount);
+ const newLayer = {
+ dataKey: this.maxLayersCount + 1,
opacity: "1.00",
order: 0,
queryable: false,
title: "Open street map",
+ };
+ this.$store.commit("map/UPDATE_BASEMAP", {
+ layers: [...this.basemap.layers, newLayer],
+ id: this.basemap.id,
});
},
+
removeLayer(dataKey) {
this.layers = this.layers.filter((layer) => layer.dataKey !== dataKey);
},
- updateLayer(payload) {
- const index = this.layers.findIndex(
- (el) => el.dataKey === payload.dataKey
- );
- //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.title = this.basemap.title;
- this.layers = this.basemap.layers;
- // this.basemapForm = this.basemap;
- //this.basemapForm = this.basemap.layers;
- // this.mapLayersDataKey();
},
};
</script>
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index ed3953c03ff0e5842675262528450bcad325c01a..751cb4203ffd9104f9488ad6db6dab51ba3e1609 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -5,19 +5,19 @@ const map = {
namespaced: true,
state: {
basemaps: [
- {
- "id": 1,
- "title": "Fond mock",
- "layers": [
- {
- "id": 1,
- "title": "Open street map mock",
- "opacity": "1.50",
- "order": 2,
- "queryable": true
- }
- ]
- },
+ /* {
+ "id": 1,
+ "title": "Fond mock",
+ "layers": [
+ {
+ "id": 1,
+ "title": "Open street map mock",
+ "opacity": "1.50",
+ "order": 2,
+ "queryable": true
+ }
+ ]
+ }, */
/* {
"id": 10,
"title": "Fond mock",
@@ -47,7 +47,7 @@ const map = {
],
features: [],
layers: [
- /* {
+ {
"id": 1,
"options": {
"maxZoom": 20,
@@ -56,27 +56,53 @@ 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: {
"attribution": "© contributeurs d'<a href=\"https://osm.org/copyright\">OpenStreetMap</a>",
"maxZoom": 20
- }
+ },
+ //availableLayers: ["https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"]
},
mutations: {
SET_BASEMAPS(state, basemaps) {
state.basemaps = basemaps;
},
CREATE_BASEMAP(state, id) {
- state.basemaps = [...state.basemaps, { id }]
+ state.basemaps = [...state.basemaps, { id, layers: [] }]
},
- DELETE_BASEMAP(state, dataKey) {
- state.basemaps = state.basemaps.filter(el => el.dataKey !== dataKey)
+ DELETE_BASEMAP(state, id) {
+ state.basemaps = state.basemaps.filter(el => el.id !== id)
},
UPDATE_BASEMAPS(state, basemaps) {
state.basemaps = basemaps;
- }
+ },
+ UPDATE_BASEMAP(state, { title, id, layers }) {
+ const index = state.basemaps.findIndex((el) => el.id === id);
+ if (index !== -1) {
+ if (title) {
+ state.basemaps[index].title = title
+ }
+ if (layers) {
+ state.basemaps[index].layers = layers
+ }
+ }
+ },
+ DELETE_BASEMAP_LAYER(state, { basemapId, layerId }) {
+ const index = state.basemaps.findIndex((el) => el.id === basemapId);
+ if (index !== -1) {
+ state.basemaps[index].layers = state.basemaps[index].layers.filter((el) => el.dataKey !== layerId)
+ }
+ },
+ UPDATE_BASEMAP_LAYER(state, { basemapId, layerId, layer }) {
+ const index = state.basemaps.findIndex((el) => el.id === basemapId);
+ if (index !== -1) {
+ state.basemaps[index].layers = state.basemaps[index].layers.map(
+ (el) => el.dataKey === layerId ? layer : el
+ )
+ }
+ },
},
getters: {
diff --git a/src/views/project/Project_mapping.vue b/src/views/project/Project_mapping.vue
index 9fef56ccb94c10cef3d354282cf8ca4cefdf11f5..0820aca628f3e31e6a1081f065e0cfa362be5b3f 100644
--- a/src/views/project/Project_mapping.vue
+++ b/src/views/project/Project_mapping.vue
@@ -27,7 +27,6 @@
:key="basemap.dataKey"
:basemap="basemap"
/>
- <!-- v-on:update-basemap="updateBasemap2store" -->
</div>
<button
@@ -52,33 +51,16 @@ export default {
ProjectMappingBasemap: Project_mapping_basemap,
},
- /* data() {
- return {
- dataKey: 0,
- };
- }, */
computed: {
...mapState("map", ["basemaps"]),
...mapGetters("map", ["basemapMaxId"]),
- /* basemapForms: function () {
- return this.basemaps.map((el) => {
- this.dataKey += 1;
- return { dataKey: this.dataKey, ...el };
- });
- }, */
},
+
methods: {
- addBasemap() { // * ajout d'un fond cartographique
+ addBasemap() {
this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
},
- /* updateBasemap2store(payload) {
- const index = this.basemapForms.findIndex(
- (el) => el.dataKey === payload.dataKey
- );
- // console.log("updateBasemap2store", index);
- this.basemapForms[index] = payload;
- this.$store.commit("map/UPDATE_BASEMAPS", this.basemapForms);
- }, */
+
saveChanges() {
this.$store.dispatch("map/SAVE_BASEMAPS");
},