feat: inventary with the map

Projecte-UrbanTree · Dec 16, 2024 · 596f4c5 · 596f4c5
1 parent b262e0c
commit 596f4c5
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 3 deletions.
diff --git a/.env.example b/.env.example
@@ -14,3 +14,6 @@ DB_PORT=3306
 #* Sentry
 SENTRY_DSN_API=https://{PUBLIC_KEY}@{HOST}.ingest.de.sentry.io/{PROJECT_ID}
 SENTRY_DSN_APP=https://{PUBLIC_KEY}@{HOST}.ingest.de.sentry.io/{PROJECT_ID}
+
+# MapBox
+MAPBOX=pk.
diff --git a/app/src/app/Layouts/Admin/AdminInventoryLayout.php b/app/src/app/Layouts/Admin/AdminInventoryLayout.php
@@ -14,6 +14,19 @@
     <link rel="stylesheet" href="/assets/css/app.css">
     <script src="/assets/js/tailwind.js"></script>
     <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 {
+            height: 100%; /* Asegúrate de que el body ocupe toda la pantalla */
+            margin: 0;
+        }
+
+        #map {
+            height: calc(100% - 65px); /* O cualquier porcentaje que necesites */
+            width: 100%; /* Para que ocupe todo el ancho */
+        }
+    </style>
 </head>
 
 <body>
@@ -93,7 +106,6 @@ class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-whi
     </div>
 
     <!-- Main Content -->
-    <div class="max-w-7xl mx-auto px-6">
         <?php if (Session::has('success')): ?>
             <div id="alert-msg" class="bg-blue-500 text-white px-4 py-3 rounded-lg mb-6" role="alert">
                 <strong class="font-bold">Success: </strong>
@@ -102,7 +114,6 @@ class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-whi
         <?php endif;
         echo $content;
         ?>
-    </div>
 
     <script src="/assets/js/app.js"></script>
     <!-- Javascript, add class d-none to alert-msg after 5 seconds if it exists -->

diff --git a/app/src/app/Views/Admin/Inventory.php b/app/src/app/Views/Admin/Inventory.php
@@ -1 +1,64 @@
-Mapa inventario de la aplicación
+<div id="map"></div>
+<script>
+	mapboxgl.accessToken = '<?= getenv("MAPBOX")?>';
+    const map = new mapboxgl.Map({
+        container: 'map',
+        style: 'mapbox://styles/mapbox/streets-v9',
+        projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
+        zoom: 1,
+        center: [30, 15]
+    });
+
+    map.addControl(new mapboxgl.NavigationControl());
+    map.scrollZoom.disable();
+
+    map.on('style.load', () => {
+        map.setFog({}); // Set the default atmosphere style
+    });
+
+    // The following values can be changed to control rotation speed:
+
+    // At low zooms, complete a revolution every two minutes.
+    const secondsPerRevolution = 240;
+    // Above zoom level 5, do not rotate.
+    const maxSpinZoom = 5;
+    // Rotate at intermediate speeds between zoom levels 3 and 5.
+    const slowSpinZoom = 3;
+
+    let userInteracting = false;
+    const spinEnabled = true;
+
+    function spinGlobe() {
+        const zoom = map.getZoom();
+        if (spinEnabled && !userInteracting && zoom < maxSpinZoom) {
+            let distancePerSecond = 360 / secondsPerRevolution;
+            if (zoom > slowSpinZoom) {
+                // Slow spinning at higher zooms
+                const zoomDif =
+                    (maxSpinZoom - zoom) / (maxSpinZoom - slowSpinZoom);
+                distancePerSecond *= zoomDif;
+            }
+            const center = map.getCenter();
+            center.lng -= distancePerSecond;
+            // Smoothly animate the map over one second.
+            // When this animation is complete, it calls a 'moveend' event.
+            map.easeTo({ center, duration: 1000, easing: (n) => n });
+        }
+    }
+
+    // Pause spinning on interaction
+    map.on('mousedown', () => {
+        userInteracting = true;
+    });
+    map.on('dragstart', () => {
+        userInteracting = true;
+    });
+
+    // When animation is complete, start spinning if there is no ongoing interaction
+    map.on('moveend', () => {
+        spinGlobe();
+    });
+
+    spinGlobe();
+</script>
+
diff --git a/compose.yml b/compose.yml
@@ -60,6 +60,7 @@ services:
       - DB_USER=${DB_USER}
       - DB_PASS_FILE_PATH=/run/secrets/db_pass
       - SENTRY_DSN=${SENTRY_DSN_APP}
+      - MAPBOX=${MAPBOX}
     develop:
       watch:
         - action: sync