Skip to content

Commit

Permalink
feat: inventory (#221)
Browse files Browse the repository at this point in the history 
This pull request introduces significant enhancements to the
`Inventory.php` view and some minor updates to the
`AdminInventoryLayout.php` layout. The main changes include the addition
of a filter panel, integration of GeoJSON data for displaying map
features, and improved map interaction capabilities.

### Enhancements to `Inventory.php`:

* **Filter Panel Implementation**:
- Added a button to open the filter panel and the filter panel itself
with options to filter zones and elements.
- Included JavaScript to handle the display logic for the filter panel
and its buttons.

* **Map Enhancements**:
- Changed the map style to `satellite-streets-v12` and updated the
initial zoom and center coordinates.
- Integrated GeoJSON data to add a polygon representing Valencia's
historic center and several points of interest.
- Added layers to display the polygon and points on the map, and
implemented click events to show popups with descriptions.
- Enhanced user interaction by changing the cursor to a pointer when
hovering over the map features.

### Minor Update to `AdminInventoryLayout.php`:

* **Layout Adjustment**:
  - Added a blank line to improve code readability.
  • Loading branch information
@albert1413
albert1413 authored Dec 18, 2024
2 parents 8ac526c + b4f7378 commit db0bc96
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 7 deletions.
1 change: 1 addition & 0 deletions app/src/app/Layouts/Admin/AdminInventoryLayout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<script src="https://kit.fontawesome.com/f80b94bd90.js" crossorigin="anonymous"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>

<style>
html,
body {
Expand Down
212 changes: 205 additions & 7 deletions app/src/app/Views/Admin/Inventory.php
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,84 @@
<div id="map"></div>
<div id="map" class="relative">
<!-- Botón para abrir el panel de filtros -->
<button class="absolute z-10 bottom-5 right-5 p-2 bg-blue-500 text-white rounded-full" id="openMore">
<span class="material-icons">Filtros</span>
</button>


<div id="firstPanel" class="absolute z-10 bottom-0 right-20 bg-white shadow-lg sm:w-64 h-1/4 p-5 transform translate-y-full transition-transform ease-in-out duration-300 rounded-xl">
<button class="absolute text-xl top-3" id="openFilters">
<span class="text-lg font-semibold">Filtros</span>
</button>
<button class="absolute text-xl top-1/3" id="openZones">
<span class="text-lg font-semibold">Agregar Zonas</span>
</button>
<button class="absolute text-xl top-2/3" id="openElements">
<span class="text-lg font-semibold">Agregar Elementos</span>
</button>
</div>

<!-- Panel de filtros (desaparece desde abajo) -->
<div id="filterPanel" class="absolute z-10 bottom-0 right-80 bg-white shadow-lg sm:w-64 h-1/4 p-5 transform translate-y-full transition-transform ease-in-out duration-300 rounded-xl">
<div class="space-y-2">
<label class="block">
<input type="checkbox" class="mr-2" /> Zonas
</label>
<label class="block">
<input type="checkbox" class="mr-2" /> Elementos
</label>
<label class="block">
<input type="checkbox" class="mr-2" /> Opción 3
</label>
<button class="absolute z-10 bottom-5 right-5 p-2 bg-blue-500 text-white rounded-full">
<span class="material-icons">Aplicar</span>
</button>
</div>
</div>
</div>

<script>
const openFiltersButton = document.getElementById("openMore");
const firstPanel = document.getElementById("firstPanel");
const openElementsButton = document.getElementById("openFilters");
const filterPanel = document.getElementById("filterPanel");

// Primer Panel
let panel = false
let panel2 = false

openFiltersButton.addEventListener("click", () => {
if (panel === false){
firstPanel.style.transform = "translateY(0)"; // Mostrar panel
panel = true
}
else{
firstPanel.style.transform = "translateY(100%)"; // Ocultar panel
panel = false
}
});
openElementsButton.addEventListener("click",() =>{
if (panel2 === false){
filterPanel.style.transform = "translateY(0)";
panel2 = true
}
else{
filterPanel.style.transform = "translateY(100%)";
panel2=false
}
})
</script>

<script>
mapboxgl.accessToken = '<?= getenv("MAPBOX_TOKEN") ?>';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
style: 'mapbox://styles/mapbox/satellite-streets-v12', // Estil del mapa
projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
zoom: 1,
center: [30, 15]
zoom: 12,
center: [-0.3763, 39.4699]
});

map.addControl(new mapboxgl.NavigationControl());
map.scrollZoom.disable();
map.addControl(new mapboxgl.NavigationControl()); // Ampliar o alejar-se con el cursor

map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
Expand Down Expand Up @@ -60,4 +128,134 @@ function spinGlobe() {
});

spinGlobe();
</script>

//GeoJSON
map.on('load', () => {
// Agregar fuente con GeoJSON
map.addSource('valencia-area', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
// Zona: Polígono
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[-0.379946, 39.472606], // Estación del Norte
[-0.377255, 39.470085], // Mercado Central
[-0.374091, 39.470914], // Plaza Redonda
[-0.372027, 39.472846], // Plaza de la Reina
[-0.374709, 39.475012], // Torres de Serranos
[-0.378901, 39.474073], // Plaza del Ayuntamiento
[-0.379946, 39.472606] // Cierra el polígono
]
]
},
'properties': {
'name': 'Centro Histórico de Valencia',
'description': 'Una de las zonas más emblemáticas de Valencia, que incluye plazas, mercados y torres históricas.'
}
},
// Punto: Plaza del Ayuntamiento
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-0.3789, 39.4740]
},
'properties': {
'name': 'Plaza del Ayuntamiento',
'description': 'Centro neurálgico de Valencia con vistas icónicas y actividades culturales.'
}
},
// Punto: Mercado Central
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-0.377255, 39.470085]
},
'properties': {
'name': 'Mercado Central',
'description': 'Un mercado icónico lleno de productos frescos y arquitectura modernista.'
}
},
// Punto: Plaza de la Reina
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-0.372027, 39.472846]
},
'properties': {
'name': 'Plaza de la Reina',
'description': 'Una plaza histórica rodeada de cafeterías y la famosa Catedral de Valencia.'
}
}
]
}
});

// Añadir capas de polígono y puntos
map.addLayer({
'id': 'valencia-boundary',
'type': 'fill',
'source': 'valencia-area',
'paint': {
'fill-color': '#0080ff',
'fill-opacity': 0.3
},
'filter': ['==', '$type', 'Polygon']
});

map.addLayer({
'id': 'valencia-points',
'type': 'circle',
'source': 'valencia-area',
'paint': {
'circle-radius': 6,
'circle-color': '#ff5733'
},
'filter': ['==', '$type', 'Point']
});

// Evento para clic en el polígono
map.on('click', 'valencia-boundary', (e) => {
const coordinates = e.lngLat;
const properties = e.features[0].properties;

new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(`<strong>${properties.name}</strong><p>${properties.description}</p>`)
.addTo(map);
});

// Evento para clic en los puntos
map.on('click', 'valencia-points', (e) => {
const coordinates = e.features[0].geometry.coordinates.slice();
const properties = e.features[0].properties;

new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(`<strong>${properties.name}</strong><p>${properties.description}</p>`)
.addTo(map);
});

// Cambiar el cursor a "pointer" al pasar por los puntos o la zona
map.on('mouseenter', 'valencia-boundary', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'valencia-boundary', () => {
map.getCanvas().style.cursor = '';
});
map.on('mouseenter', 'valencia-points', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'valencia-points', () => {
map.getCanvas().style.cursor = '';
});
});
</script>

0 comments on commit db0bc96

Please sign in to comment.