diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.css b/SAS/TMSS/frontend/tmss_webapp/src/App.css
index 5b200d221199dd02a152e172d2b5fe5c230c6405..9d498c710fc3765b35308b156d4e449b2d008c1d 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/App.css
+++ b/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
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/App.js b/SAS/TMSS/frontend/tmss_webapp/src/App.js
index 17c8bbbc75a90c8f4ee72547c1732e4ad6ba8428..698ee2caca3295e7807c6355ecadbd9f2bb2b2d6 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/App.js
+++ b/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},
];
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/station.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/station.scss
index c4c613dcbc9682c4001c87a10a9024fa3de422cb..9d328042a9d92866a38c6b6b37ab2a70436fefec 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/station.scss
+++ b/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);
+ }
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationGeoView.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationGeoView.js
index 4128fea43eb71dd0a81830691bbc77f244a2f24a..847889a0178d76d741b36c26809eb0a42b8837b3 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationGeoView.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationGeoView.js
@@ -1,26 +1,41 @@
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>
);
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationView.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationView.js
index c08205b77cd61e4340f5d951ee222c8414c3579c..032028e4b4796d7c3457bcfd39ff67c9fd053566 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Station/StationView.js
+++ b/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>
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.listlite.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.listlite.js
index 1ea8ac81a9bb32b5a887acc329534409ed99550d..7d4b22cf686f6ea7ebd1c9c70222ea818bbe2e33 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.listlite.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.listlite.js
@@ -1,4 +1,4 @@
-import { Component, useState } from 'react';
+import { Component } from 'react';
import _ from 'lodash';
import moment from 'moment';
import "flatpickr/dist/flatpickr.css";
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/week.view.helper.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/week.view.helper.js
index 5bdc01d7f240c6e9185e8d43051e02d4a5a0950c..e4e175cd86e8fb54bddfe57975aceb110d5d6f54 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/week.view.helper.js
+++ b/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");