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

complete project_mapping form

parent 3df894af
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/project/ProjectMappingContextLayer.vue
+ 54
− 57
View file @ 83cc6a45
......@@ -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
src/components/project/project_mapping_basemap.vue
+ 43
− 54
View file @ 83cc6a45
......@@ -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>
......
src/store/modules/map.js
+ 46
− 20
View file @ 83cc6a45
......@@ -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": "&copy; 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: {
......
src/views/project/Project_mapping.vue
+ 3
− 21
View file @ 83cc6a45
......@@ -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");
},
......
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