fix: map page import.add utils

app/package.json

@@ -23,6 +23,7 @@
     "@electron/fuses": "^1.8.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@types/leaflet": "^1.9.12",
+    "@types/leaflet.vectorgrid": "^1.3.5",
     "@types/winston": "^2.4.4",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -50,6 +51,7 @@
     "electron-squirrel-startup": "^1.0.1",
     "leaflet": "^1.9.4",
     "leaflet.vectorgrid": "^1.3.0",
+    "pinia": "^2.1.7",
     "primevue": "^4.0.0-rc.1",
     "vue": "^3.4.30",
     "vue-router": "^4.4.0",

app/src/components/MapIndex.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="map" ref="mapElement" class="h-dvh w-full"></div>
+</template>
+
+<script setup lang="ts">
+import { getStationInfo } from "../ts/rts";
+import { useMapStore } from "../ts/store";
+import { ref, onMounted } from "vue";
+
+const mapElement = ref<HTMLElement>();
+const MapStore = useMapStore();
+const fetchStationData = async () => {
+  try {
+    const data = await getStationInfo();
+  } catch (error) {
+    console.error("Failed to fetch station data:", error);
+  }
+};
+
+onMounted(() => {
+  if (mapElement.value) {
+    console.log(MapStore);
+    MapStore.init_map(mapElement.value);
+  }
+  fetchStationData();
+  setInterval(fetchStationData, 300_000);
+});
+</script>

app/src/css/index.css

@@ -9,6 +9,15 @@
   --background-variant-hsl: 0deg 0% 16%;
 }
 
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 4px;
+}
+
 body {
   user-select: none;
   margin: 0;
@@ -43,3 +52,12 @@ body {
     -2px 2px black,
     2px -2px black;
 }
+
+.realtime-list {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hidden {
+  visibility: hidden;
+}

app/src/css/intensity.css

@@ -132,13 +132,13 @@
   border-radius: 25%;
 }
 
-.realtime-item {
+.rt-item {
   display: flex;
   background-color: #282828;
   border-radius: 17px;
 }
 
-.realtime-intensity {
+.rt-int {
   width: 44px;
   height: 23px;
   border-radius: 17px;
@@ -149,7 +149,7 @@
   justify-content: center;
 }
 
-.realtime-location {
+.rt-loc {
   padding-left: 8px;
   font-size: 13px;
   font-weight: 500;

app/src/main.ts

@@ -12,7 +12,7 @@ const createWindow = () => {
     minWidth: 750,
     width: 1280,
     height: 720,
-    icon: "TREM.ico",
+    icon: path.join(__dirname, "TREM.ico"),
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
       nodeIntegration: true,