Browse Source

Merge pull request 'dev-wahyu' (#9) from dev-wahyu into staging

Reviewed-on: ordo/adw-gantt#9
pull/1/head
ibnu 1 year ago
parent
commit
285a3b1326
  1. 104
      edit-mode/function/activityLocation.js

104
edit-mode/function/activityLocation.js

@ -5,7 +5,7 @@ let long = 106.559242;
let zoom = 10; let zoom = 10;
let currentIdAct = 0; let currentIdAct = 0;
let map = L.map('map_activity').setView([lat, long], zoom); let map = L.map('map_activity').setView([lat, long], zoom);
let drawnItems = new L.FeatureGroup().addTo(map);
let inter = 5; let inter = 5;
let circLat = "", let circLat = "",
@ -15,8 +15,6 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map); }).addTo(map);
let drawnItem = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({ var drawControl = new L.Control.Draw({
draw: { draw: {
circlemarker: false, circlemarker: false,
@ -24,7 +22,7 @@ var drawControl = new L.Control.Draw({
polyline: false polyline: false
}, },
edit:{ edit:{
featureGroup:drawnItem, featureGroup:drawnItems,
edit:false, edit:false,
delete:false delete:false
} }
@ -33,7 +31,7 @@ var drawControl = new L.Control.Draw({
var drawnControlEdit = new L.Control.Draw({ var drawnControlEdit = new L.Control.Draw({
draw: false, draw: false,
edit:{ edit:{
featureGroup:drawnItem, featureGroup:drawnItems,
delete:true delete:true
} }
}); });
@ -42,7 +40,21 @@ map.addControl(drawControl);
// add searching location (nominatim) on map // add searching location (nominatim) on map
L.Control.geocoder().addTo(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) function openActivityMap(id)
{ {
currentIdAct = id; currentIdAct = id;
@ -53,23 +65,30 @@ function openActivityMap(id)
success: function (data) { success: function (data) {
let dataRes = data.data let dataRes = data.data
// console.log("cek data", data); // console.log("cek data", data);
drawnItem.clearLayers(); drawnItems.clearLayers();
if(dataRes.geom){ if(dataRes.geom){
let datageojson = JSON.parse(dataRes.geom); let datageojson = JSON.parse(dataRes.geom);
currentGeoJson = datageojson currentGeoJson = datageojson
// console.log("cek data geojson", 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){ if(datageojson.properties.radius){
let radius = datageojson.properties.radius let radius = datageojson.properties.radius
let lGeoJson = L.geoJson(datageojson); let lGeoJson = L.geoJson(datageojson);
let layers = lGeoJson.getLayers(); let layers = lGeoJson.getLayers();
let latlon = layers[0].getLatLng(); let latlon = layers[0].getLatLng();
let newCircle = L.circle([latlon.lat,latlon.lng], {radius: radius}); let newCircle = L.circle([latlon.lat,latlon.lng], {radius: radius});
drawnItem.addLayer(newCircle); addDrawnLayer(newCircle)
// console.log("cek layers", layers[0]); // console.log("cek layers", layers[0]);
}else{ }else{
let lGeoJson = L.geoJson(datageojson); let lGeoJson = L.geoJson(datageojson);
let layers = lGeoJson.getLayers(); let layers = lGeoJson.getLayers();
drawnItem.addLayer(layers[0]); addDrawnLayer(layers[0])
}
} }
actionLocationAc = "edit"; actionLocationAc = "edit";
drawControl.remove(); drawControl.remove();
@ -127,22 +146,22 @@ $(document).ready(function () {
// console.log("cek layer", layer.toGeoJSON()); // console.log("cek layer", layer.toGeoJSON());
// layer.bindTooltip("cek"); // layer.bindTooltip("cek");
// Do whatever else you need to. (save to db; add to map etc) // Do whatever else you need to. (save to db; add to map etc)
drawnItem.addLayer(layer); addDrawnLayer(layer);
drawControl.remove(); updateCurrentGeoJson();
map.addControl(drawnControlEdit); map.addControl(drawnControlEdit);
// map.addLayer(layer); // map.addLayer(layer);
}); });
map.on(L.Draw.Event.DELETED, function (e) { map.on(L.Draw.Event.DELETED, function (e) {
var type = e.layerType, var type = e.layerType;
layer = e.layer; let layers = e.layers.getLayers();
layers.forEach(layer => {
drawnItems.removeLayer(layer);
});
updateCurrentGeoJson()
// console.log("cek layer", layer.toGeoJSON()); // console.log("cek layer", layer.toGeoJSON());
// Do whatever else you need to. (save to db; add to map etc) // 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); // map.addLayer(layer);
}); });
@ -150,18 +169,16 @@ $(document).ready(function () {
// var type = e.layerType, // var type = e.layerType,
// layer = e.layer; // layer = e.layer;
let layers = e.layers.getLayers(); let layers = e.layers.getLayers();
let layer = layers[0] layers.forEach(layer => {
let geoJson = layers[0].toGeoJSON(); let geoJson = layer.toGeoJSON();
if(layer instanceof L.Circle){ if(layer instanceof L.Circle){
geoJson.properties.radius = layer.getRadius(); geoJson.properties.radius = layer.getRadius();
currentGeoJson = geoJson
}else{
currentGeoJson = geoJson
} }
updateCurrentGeoJson();
});
// console.log("cek layer", layers[0].toGeoJSON()); // console.log("cek layer", layers[0].toGeoJSON());
// console.log("cek layer", layer.toGeoJSON()); // console.log("cek layer", layer.toGeoJSON());
// Do whatever else you need to. (save to db; add to map etc) // Do whatever else you need to. (save to db; add to map etc)
// drawnItem.removeLayer(layer);
// drawnControlEdit.remove(); // drawnControlEdit.remove();
// map.addControl(drawControl); // map.addControl(drawControl);
// map.addLayer(layer); // map.addLayer(layer);
@ -177,14 +194,48 @@ $(document).ready(function () {
if(!result){ if(!result){
return false return false
}else{ }else{
submitLocation(); submitShapes();
} }
} }
}); });
}else{ }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() function submitLocation()
{ {
@ -238,8 +289,7 @@ function submitCircle(radius)
geojsoncircle.properties.radius = radius geojsoncircle.properties.radius = radius
currentGeoJson = geojsoncircle currentGeoJson = geojsoncircle
// console.log("geojsoncircle", geojsoncircle); // console.log("geojsoncircle", geojsoncircle);
drawnItem.addLayer(circle); addDrawnLayer(circle);
drawControl.remove();
map.addControl(drawnControlEdit); map.addControl(drawnControlEdit);
$("#modal_radius").modal('hide'); $("#modal_radius").modal('hide');

Loading…
Cancel
Save