When the dots begin to fall

SAS/TMSS/frontend/tmss_webapp/src/App.css

@@ -293,3 +293,6 @@ body > iframe {
 .report-wrap {
     flex-wrap: wrap;
 }
+.pi-rotate {
+  transform: rotate(135deg);
+}
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/App.js

@@ -70,7 +70,7 @@ class App extends Component {
             { label: 'Week View', icon: 'pi pi-fw pi-calendar-times', to: '/su/timelineview/week', section: 'su/timelineview/week', isBreadCrumbVisible: false ,isDateTimeVisible:true},
             { label: 'Reports', icon: 'pi pi-fw pi-chart-bar', to: '/reports', section: 'reports', isBreadCrumbVisible: false ,isDateTimeVisible:false},
             { label: 'System Events', icon: 'pi pi-fw pi-bolt', to: '/systemevent/list', section: 'system', isBreadCrumbVisible: false ,isDateTimeVisible:true},
-            { label: 'Stations View', icon: 'pi pi-fw pi-wifi', to: '/station/list', section: 'system', isBreadCrumbVisible: false ,isDateTimeVisible:true},
+            { label: 'Stations View', icon: 'pi pi-fw pi-wifi pi-rotate', to: '/station/list', section: 'system', isBreadCrumbVisible: false ,isDateTimeVisible:true},
             
         ];
     }

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/station.scss

@@ -53,4 +53,24 @@
 
 }
 
+.custom-marker-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .marker-circle {
+    width: 20px;
+    height: 20px;
+    opacity: 50%;
+    background-color: #0a0d3a; /* Replace with your desired background color */
+    border-radius: 50%;
+    margin-bottom: 5px; /* Adjust as needed for spacing between the circle and text */
+  }
+  
+  .marker-text {
+    font-size: 14px;
+    color: #333; /* Replace with your desired text color */
+    background-color:rgba(255, 255, 255, 0.5);
+  }
 

SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationGeoView.js

 import 'leaflet/dist/leaflet.css'
 import {MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
 import L from 'leaflet'
-import MarkerClusterGroup from "react-leaflet-cluster";
+import { useMap } from 'react-leaflet/hooks'
 
 
 
 delete L.Icon.Default.prototype._getIconUrl;
 
+
 L.Icon.Default.mergeOptions({
   iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
   iconUrl: require('leaflet/dist/images/marker-icon.png'),
   shadowUrl: require('leaflet/dist/images/marker-shadow.png')
 });
 
+function GetMapComponent(props) {
+    const {
+        mapRef
+    } = props
+
+    
+    if (mapRef!=null) {
+        const map = useMap()
+       setTimeout(() => { mapRef(map)},0);
+    }
+    return null
+  }
 
 function StationGeoView(props) {
     const {
         stations,
+        mapRef
     } = props
 
 
-  return (
+
+    return (
     <div className="GeoBlock">
         
       <MapContainer
@@ -35,20 +50,33 @@ function StationGeoView(props) {
         
           url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        
-          {stations.map((station, index) => (
+         
+        {stations.map((station, index) => {
+          const markerPosition = [
+            station.geometry.coordinates[1],
+            station.geometry.coordinates[0],
+          ];
+
+          const customIcon = new L.divIcon({
+            className: 'custom-marker-icon',
+            html: `
+            <div >
+              <div class="marker-circle"></div>
+              <div class="marker-text">${station.id}</div>
+            </div>
+          `,
+          });
+
+          return (
             <Marker
-              key={station.properties['@id']}
-              position={[station.geometry.coordinates[1], station.geometry.coordinates[0]]}
-            >
-              <Popup>
-                {station.properties.name}
-                <br />
-                {station.properties['name:en']}
-              </Popup>
+              key={station.id}
+              position={markerPosition}
+              icon={customIcon}>
+             
             </Marker>
-          ))}
-        
+          );
+        })}
+        <GetMapComponent mapRef={mapRef}/>
       </MapContainer>
     </div>
   );

SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationView.js

@@ -6,16 +6,19 @@ import { ListBox } from 'primereact/listbox';
 import  {useEffect, useState} from "react";
 import  StationGeoView from './StationGeoView'
 
+
 import PageHeader from '../../layout/components/PageHeader';
 // see https://react-leaflet.js.org/docs/api-map/
 export default  function StationView(props) { 
     const {
-        title,
         location
     } = props
 
     const [stations, setStations] = useState()
     const [stationsGeo, setStationsGeo] = useState([])
+    const [selectedStation, setSelectedStation] = useState()
+
+    const [map, setMap] = useState()
 
 
     async function fetchStations() {
@@ -51,7 +54,7 @@ export default  function StationView(props) {
 
      function MakeGeoJson(stations) {
         let StationgeojsonArray = [] 
-        for (var station in  stations){
+        for (let station in  stations){
             const geostationJson = generateGeoJson(station,stations[station]);
             StationgeojsonArray.push(geostationJson);
         }
@@ -59,7 +62,12 @@ export default  function StationView(props) {
      }
 
     
-
+     
+   function ZoomTo(station)  {
+   let longitude = station[1].longitude;
+    let latitude = station[1].latitude;
+    map?.setView([latitude,longitude],14);
+   }
     useEffect ( () => {
         fetchStations();
     }, []);
@@ -73,13 +81,13 @@ export default  function StationView(props) {
     <TabView>
     <TabPanel header="Station List" className="TabStation">
             <div className="StationListWrap" >
-            <ListBox options={stations} optionLabel="0"  className="StationListbox"/>
-            <StationGeoView stations={stationsGeo}></StationGeoView >
+            <ListBox options={stations} optionLabel="0"  className="StationListbox" onChange={(e) => ZoomTo(e.value)}/>
+            <StationGeoView stations={stationsGeo }  selected={selectedStation} mapRef={ setMap} ></StationGeoView >
             </div>
     </TabPanel>
     <TabPanel header="Geo Plot">
         <div className="GeoMap">
-       <StationGeoView stations={stationsGeo}></StationGeoView >
+       <StationGeoView stations={stationsGeo} selected={selectedStation}></StationGeoView >
        </div>
     
     </TabPanel>

SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.listlite.js

-import  { Component, useState } from 'react';
+import  { Component  } from 'react';
 import _ from 'lodash';
 import moment from 'moment';
 import "flatpickr/dist/flatpickr.css";

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/week.view.helper.js

@@ -217,8 +217,8 @@ async function GetStationLst(isSingleStation, cursorDateTimeUTC, stationName = U
          shift = await fetchLSTStationShift(cursorDateTimeUTC, stationName);
         timecache[key] = { isRetrieved: true, shift };
     }
-    const stationLST  = moment(cursorDateTimeUTC).add(shift.shiftLSTStation, 'second').format("HH:mm");;
-    const coreLST  = moment(cursorDateTimeUTC).add(shift.shiftLSTCore, 'second').format("HH:mm");;
+    const stationLST  = moment(cursorDateTimeUTC).add(shift.shiftLSTStation, 'second').format("HH:mm");
+    const coreLST  = moment(cursorDateTimeUTC).add(shift.shiftLSTCore, 'second').format("HH:mm");