Merge pull request #37 from InspectorIncognito/dev

Dev
InspectorIncognito · Nov 17, 2024 · eef4f08 · eef4f08
2 parents db0d169 + 949874a
commit eef4f08
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 37 deletions.
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
-@media (width >= 1024px) {
+@media (width >= 512px) {
     body {
         display: flex;
         place-items: center;
@@ -15,6 +15,7 @@
 
 
     .metrics-container {
+        margin-top: 8px;
         display: flex;
         gap: 16px;
         flex-direction: row;
@@ -42,4 +43,57 @@
         font-weight: bold;
         font-size: 16px;
     }
+    .custom-popup .mapboxgl-popup-content {
+        border: 1px solid #161a30;
+        border-radius: 8px;
+        background-color: #31304d ;
+        color: #b6bbc4;
+    }
+    .custom-popup .mapboxgl-popup-tip{
+        border-top-color: #b6bbc4 !important;
+    }
+    .custom-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
+        color: #b6bbc4;
+        transition: color 0.2s ease;
+    }
+    .custom-popup .mapboxgl-popup-content .mapboxgl-popup-close-button:hover {
+        color:  #161a30;
+    }
+}
+
+.segment-popup {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  padding: 0 8px;
+}
+.segment-popup .header {
+  font-size: 16px;
+  font-family: Roboto, sans-serif;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.section-container{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.section {
+  display: flex;
+  flex-direction: column;
+  font-size: 15px;
+}
+.section-icons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.section-data {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.section-data.speed {
+  justify-content: space-between;
 }
diff --git a/src/components/MapView.vue b/src/components/MapView.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
-import { onMounted, ref } from "vue";
+import { h, onMounted, ref, render } from "vue";
 import MapAPI from "@/components/api/MapAPI";
 import { ElNotification } from "element-plus";
 import UpdateStatusComponent from "@/components/map/UpdateStatusComponent.vue";
 import SpeedInfoComponent from "@/components/map/SpeedInfoComponent.vue";
 import { Cron } from "croner";
+import SegmentPopup from "@/components/map/SegmentPopup.vue";
+import AlertPopup from "@/components/map/AlertPopup.vue";
 
 interface AlertData {
   coords: number[];
@@ -75,25 +77,27 @@ function parseTemporalSegment(idx: number) {
 
   return `${start} - ${end}`;
 }
-
+function getAlertPopupContent(keyValue: string, useful: number, useless: number) {
+  return h(AlertPopup, {
+    keyValue: keyValue,
+    useful: useful,
+    useless: useless,
+  });
+}
 function getPopupContent(feature) {
-  return `
-    <h3>
-    Segmento ${feature.properties.sequence} de Shape(${feature.properties.shape_id})
-    </h3>
-    <h3>
-    ${parseTemporalSegment(feature.properties.temporal_segment)}
-    </h3>
-
-    <h3>
-    ${
-      Number(feature.properties.speed) >= 0
-        ? `Velocidad: ${Number(feature.properties.speed)} km/h`
-        : "No se registró una velocidad"
-    }
-    </h3>
-    <h3>Histórico: ${feature.properties.historic_speed ? feature.properties.historic_speed : "No existe"}</h3>
-`;
+  const sequence = Number(feature.properties.sequence);
+  const shapeId = feature.properties.shape_id;
+  const speedValue = Number(feature.properties.speed);
+  const historicSpeedValue = Number(feature.properties.historic_speed);
+  const temporalRange = parseTemporalSegment(feature.properties.temporal_segment);
+
+  return h(SegmentPopup, {
+    sequence: sequence,
+    shapeId: shapeId,
+    speed: speedValue,
+    historicSpeed: historicSpeedValue,
+    temporalRange: temporalRange,
+  });
 }
 
 function onFeatureClick(e) {
@@ -103,9 +107,14 @@ function onFeatureClick(e) {
     popup.value = new mapboxgl.Popup({
       closeButton: true,
       closeOnClick: false,
+      className: "custom-popup",
     });
   }
-  popup.value.setLngLat(e.lngLat).setHTML(getPopupContent(feature)).addTo(map.value);
+  const popupContent = document.createElement("div");
+  const componentVNode = getPopupContent(feature);
+  render(componentVNode, popupContent);
+  popup.value.setDOMContent(popupContent);
+  popup.value.setLngLat(e.lngLat).addTo(map.value);
   map.value.getSource(selectedGeoJsonSourceId).setData({
     type: "FeatureCollection",
     features: [feature],
@@ -205,22 +214,13 @@ function createPopup(alertData: AlertData, marker) {
   const popup = new mapboxgl.Popup({
     closeButton: true,
     closeOnClick: false,
-  })
-    .setLngLat(coords)
-    .setHTML(
-      "<div class='popup-title'><h1>Alerta de anomalía</h1>" +
-        `<span class='key-value'>${keyValue}</span></div>` +
-        "<div class='metrics-container'>" +
-        "<div class='metric'>" +
-        "<span class='material-icons' style='color:green'>thumb_up</span>" +
-        `<span>${useful}</span>` +
-        "</div>" +
-        "<div class='metric'>" +
-        "<span class='material-icons' style='color:red'>thumb_down</span>" +
-        `<span>${useless}</span>` +
-        "</div>" +
-        "</div>"
-    );
+    className: "custom-popup",
+  });
+  const popupContent = document.createElement("div");
+  const componentVNode = getAlertPopupContent(keyValue, useful, useless);
+  render(componentVNode, popupContent);
+  popup.setDOMContent(popupContent);
+  popup.setLngLat(coords);
   hideMarker(marker);
   popup.addTo(map.value);
   popup.on("close", () => {

diff --git a/src/components/map/AlertPopup.vue b/src/components/map/AlertPopup.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps({
+  keyValue: String,
+  useful: Number,
+  useless: Number,
+});
+</script>
+
+<template>
+  <div class="segment-popup">
+    <div class="header">Alerta de congestión</div>
+    <div class="section-container">
+      <div class="section">
+        <div class="section-icons">
+          <span class="material-icons">info</span>
+        </div>
+        <div class="section-data">{{ keyValue }}</div>
+      </div>
+      <div class="metrics-container">
+        <div class="metric">
+          <span class="material-icons">thumb_up</span>
+          <span>{{ useful }}</span>
+        </div>
+
+        <div class="metric">
+          <span class="material-icons">thumb_down</span>
+          <span>{{ useless }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/map/SegmentPopup.vue b/src/components/map/SegmentPopup.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps({
+  sequence: Number,
+  shapeId: String,
+  speed: Number,
+  historicSpeed: Number,
+  temporalRange: String,
+});
+</script>
+
+<template>
+  <div class="segment-popup">
+    <div class="header">Shape {{ shapeId }} - Segmento {{ sequence }}</div>
+    <div class="section-container">
+      <div class="section">
+        <div class="section-icons">
+          <span class="material-icons">schedule</span>
+        </div>
+        <div class="section-data">
+          <span>{{ temporalRange }}</span>
+        </div>
+      </div>
+      <div class="section">
+        <div class="section-icons">
+          <span class="material-icons">directions_bus</span>
+          <span class="material-icons">double_arrow</span>
+        </div>
+        <div class="section-data speed">
+          <b>Velocidad:</b>
+          <span>{{ speed ? `${speed} km/h` : "No registrada" }}</span>
+        </div>
+        <div class="section-data speed">
+          <b>Histórico:</b>
+          <span>{{ historicSpeed ? `${historicSpeed} km/h` : "No calculada" }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>