Timon/SmartCane
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[Done] Remove and update the map then you delete a file input

Browse source
This commit is contained in:
guillaume91 2024-06-12 15:06:06 +02:00
parent 750a760d38
commit 233281a494
2 changed files with 84 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
laravel_app/resources/views/livewire/projects/tabs/settings.blade.php
View file

@ -1,66 +1,90 @@
@push('map')
@endpush
<div class="flex flex-col divide-y space-y-4 m-2"
x-data="{
processFile(file) {
let filetype = ['json','geojson'];
if(!filetype.includes(file.name.split('.').pop())) return;
const reader = new FileReader();
reader.onload = (event) => {
const data = event.target.result;
try {
processFile(file, action='add') {
let filetype = ['json','geojson'];
if(!filetype.includes(file.name.split('.').pop())) return;
const reader = new FileReader();
reader.onload = (event) => {
const data = event.target.result;
try {
switch(action){
case 'add':
this.showMap(JSON.parse(data));
} catch (error) {
console.error('Error parsing GeoJSON:', error);
}
};
reader.readAsText(file);
},
initMap(){
if(window.geoJsonMap) return;
try{
let map = document.getElementById('map');
map.style.height = '300px';
window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
}).addTo(window.geoJsonMap);
}catch(err){
console.log(err);
break;
case 'remove':
this.removeLayer(JSON.parse(data));
break;
default:
console.log('No action provided');
break;
}
},
initMapLayer(){
if(window.geoJsonMap && window.geoJsonLayer) return;
window.geoJsonLayer = L.geoJSON();
window.geoJsonLayer.addTo(window.geoJsonMap);
},
showMap(data){
this.initMap();
this.initMapLayer();
this.addLayer(data);
console.log('GeoJson loaded on the map.');
},
addLayer(layerData){
var basicColors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];
var randomIndex = Math.floor(Math.random() * basicColors.length);
window.geoJsonLayer.addData(layerData);
window.geoJsonLayer.setStyle(function(feature) {
return {
color: basicColors[randomIndex],
weight: 2,
opacity: 0.5,
fillOpacity: 0.5
};
});
window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
},
removeLayer(){
console.log('in removeLayer');
} catch (error) {
console.error('Error parsing GeoJSON:', error);
}
}"
};
reader.readAsText(file);
},
initMap(){
if(window.geoJsonMap) return;
try{
let map = document.getElementById('map');
map.style.height = '300px';
window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
}).addTo(window.geoJsonMap);
}catch(err){
console.log(err);
}
},
initMapLayer(){
if(window.geoJsonMap && window.geoJsonLayer) return;
window.geoJsonLayer = L.geoJSON();
window.geoJsonLayer.addTo(window.geoJsonMap);
window.mapLayers=[];
},
showMap(data){
this.initMap();
this.initMapLayer();
this.addLayer(data);
console.log('GeoJson loaded on the map.');
},
addLayer(layerData){
window.mapLayers.push(layerData);
this.updateLayer(layerData);
},
updateLayer(layerData){
var basicColors = ['red', 'blue', 'orange', 'purple'];
var randomIndex = Math.floor(Math.random() * basicColors.length);
window.geoJsonLayer.addData(layerData);
window.geoJsonLayer.setStyle(function(feature) {
return {
color: basicColors[randomIndex],
weight: 2,
opacity: 0.5,
fillOpacity: 0.5
};
});
window.geoJsonMap.fitBounds(geoJsonLayer.getBounds());
},
removeLayer(type){
window.geoJsonLayer.clearLayers();
switch(type){
case 'pivot_file':
window.mapLayers.shift();
break;
case 'span_file':
window.mapLayers.pop();
break;
default:
break;
}
window.mapLayers.forEach((data) => this.updateLayer(data));
}
}"
x-on:livewire-upload-finish.document="processFile($event.target.files[0]);"
>
<div id="edit" class="flex flex-col md:flex-row gap-2">

5
laravel_app/resources/views/vendor/livewire-dropzone/livewire/dropzone.blade.php vendored
View file

@ -116,7 +116,7 @@ class="hidden"
</div>
</div>
<div class="flex items-center mr-3">
<button type="button" @click="removeUpload('{{ $file['tmpFilename'] }}')">
<button type="button" x-on:click="removeUpload('{{ $file['tmpFilename'] }}',$root.parentElement.id);">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-black dark:text-white">
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
@ -171,8 +171,9 @@ class="hidden"
this.isDragging = true;
}
},
removeUpload(tmpFilename) {
removeUpload(tmpFilename,dropzoneName) {
// Dispatch an event to remove the temporarily uploaded file
this.removeLayer(dropzoneName);
_this.dispatch(uuid + ':fileRemoved', { tmpFilename })
}
};