From b313913c9c8cd796604c24a0f6e540e68180dee8 Mon Sep 17 00:00:00 2001 From: Wahyu Ramadhan Date: Mon, 14 Aug 2023 09:26:32 +0700 Subject: [PATCH] Multiple site --- edit-mode/function/activityLocation.js | 104 ++++++++++++++++++------- 1 file changed, 77 insertions(+), 27 deletions(-) diff --git a/edit-mode/function/activityLocation.js b/edit-mode/function/activityLocation.js index cd8f394..1d35491 100644 --- a/edit-mode/function/activityLocation.js +++ b/edit-mode/function/activityLocation.js @@ -5,7 +5,7 @@ let long = 106.559242; let zoom = 10; let currentIdAct = 0; let map = L.map('map_activity').setView([lat, long], zoom); - +let drawnItems = new L.FeatureGroup().addTo(map); let inter = 5; let circLat = "", @@ -15,8 +15,6 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); -let drawnItem = L.featureGroup().addTo(map); - var drawControl = new L.Control.Draw({ draw: { circlemarker: false, @@ -24,7 +22,7 @@ var drawControl = new L.Control.Draw({ polyline: false }, edit:{ - featureGroup:drawnItem, + featureGroup:drawnItems, edit:false, delete:false } @@ -33,7 +31,7 @@ var drawControl = new L.Control.Draw({ var drawnControlEdit = new L.Control.Draw({ draw: false, edit:{ - featureGroup:drawnItem, + featureGroup:drawnItems, delete:true } }); @@ -42,7 +40,21 @@ map.addControl(drawControl); // add searching location (nominatim) on map L.Control.geocoder().addTo(map); +function addDrawnLayer(layer) { + drawnItems.addLayer(layer); +} +function updateCurrentGeoJson() { + let shapes = []; + drawnItems.eachLayer(function (layer) { + let geojson = layer.toGeoJSON(); + shapes.push(geojson); + }); + currentGeoJson = { + type: 'FeatureCollection', + features: shapes + }; +} function openActivityMap(id) { currentIdAct = id; @@ -53,23 +65,30 @@ function openActivityMap(id) success: function (data) { let dataRes = data.data // console.log("cek data", data); - drawnItem.clearLayers(); + drawnItems.clearLayers(); if(dataRes.geom){ let datageojson = JSON.parse(dataRes.geom); currentGeoJson = datageojson // console.log("cek data geojson", datageojson); + if (datageojson.type === 'FeatureCollection') { + datageojson.features.forEach(feature => { + let layer = L.geoJSON(feature); + addDrawnLayer(layer) + }); + } else { if(datageojson.properties.radius){ let radius = datageojson.properties.radius let lGeoJson = L.geoJson(datageojson); let layers = lGeoJson.getLayers(); let latlon = layers[0].getLatLng(); let newCircle = L.circle([latlon.lat,latlon.lng], {radius: radius}); - drawnItem.addLayer(newCircle); + addDrawnLayer(newCircle) // console.log("cek layers", layers[0]); }else{ let lGeoJson = L.geoJson(datageojson); let layers = lGeoJson.getLayers(); - drawnItem.addLayer(layers[0]); + addDrawnLayer(layers[0]) + } } actionLocationAc = "edit"; drawControl.remove(); @@ -127,22 +146,22 @@ $(document).ready(function () { // console.log("cek layer", layer.toGeoJSON()); // layer.bindTooltip("cek"); // Do whatever else you need to. (save to db; add to map etc) - drawnItem.addLayer(layer); - drawControl.remove(); + addDrawnLayer(layer); + updateCurrentGeoJson(); map.addControl(drawnControlEdit); // map.addLayer(layer); }); map.on(L.Draw.Event.DELETED, function (e) { - var type = e.layerType, - layer = e.layer; - + var type = e.layerType; + let layers = e.layers.getLayers(); + layers.forEach(layer => { + drawnItems.removeLayer(layer); + }); + updateCurrentGeoJson() // console.log("cek layer", layer.toGeoJSON()); // Do whatever else you need to. (save to db; add to map etc) - currentGeoJson = ""; - drawnItem.removeLayer(layer); - drawnControlEdit.remove(); - map.addControl(drawControl); + // map.addLayer(layer); }); @@ -150,18 +169,16 @@ $(document).ready(function () { // var type = e.layerType, // layer = e.layer; let layers = e.layers.getLayers(); - let layer = layers[0] - let geoJson = layers[0].toGeoJSON(); + layers.forEach(layer => { + let geoJson = layer.toGeoJSON(); if(layer instanceof L.Circle){ geoJson.properties.radius = layer.getRadius(); - currentGeoJson = geoJson - }else{ - currentGeoJson = geoJson } + updateCurrentGeoJson(); + }); // console.log("cek layer", layers[0].toGeoJSON()); // console.log("cek layer", layer.toGeoJSON()); // Do whatever else you need to. (save to db; add to map etc) - // drawnItem.removeLayer(layer); // drawnControlEdit.remove(); // map.addControl(drawControl); // map.addLayer(layer); @@ -177,15 +194,49 @@ $(document).ready(function () { if(!result){ return false }else{ - submitLocation(); + submitShapes(); } } }); }else{ - submitLocation() + submitShapes(); } }); + function submitShapes() { + let payload + + if(currentGeoJson && currentGeoJson!=""){ + payload = { + geom: JSON.stringify(currentGeoJson), + } + }else{ + payload = { + geom: null, + } + } + + $.ajax({ + data: JSON.stringify(payload), + url: `${base_url}task/update-regular/${currentIdAct}`, + type: "PUT", + processData: false, + contentType: false, + success: function (data) { + $("#modal_activity_location").modal("hide"); + currentGeoJson ="" + currentIdAct = 0; + gantt.alert("Activity Location successfully updated!"); + }, + error: function (data) { + $("#modal_activity_location").modal("hide"); + currentGeoJson ="" + currentIdAct = 0; + gantt.alert("Activity Location failed updated!, try again later!"); + } + }); + } + function submitLocation() { let payload @@ -238,8 +289,7 @@ function submitCircle(radius) geojsoncircle.properties.radius = radius currentGeoJson = geojsoncircle // console.log("geojsoncircle", geojsoncircle); - drawnItem.addLayer(circle); - drawControl.remove(); + addDrawnLayer(circle); map.addControl(drawnControlEdit); $("#modal_radius").modal('hide');