Skip to content
Snippets Groups Projects
Commit ca2c238d authored by Reinder Kraaij's avatar Reinder Kraaij :eye:
Browse files

When the dots begin to fall

parent 23b85f44
No related branches found
No related tags found
1 merge request!1223Resolve TMSS-2294 "Station info"
...@@ -293,3 +293,6 @@ body > iframe { ...@@ -293,3 +293,6 @@ body > iframe {
.report-wrap { .report-wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
.pi-rotate {
transform: rotate(135deg);
}
\ No newline at end of file
...@@ -70,7 +70,7 @@ class App extends Component { ...@@ -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: '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: '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: '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},
]; ];
} }
......
...@@ -53,4 +53,24 @@ ...@@ -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);
}
import 'leaflet/dist/leaflet.css' import 'leaflet/dist/leaflet.css'
import {MapContainer, Marker, Popup, TileLayer } from 'react-leaflet' import {MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import L from 'leaflet' import L from 'leaflet'
import MarkerClusterGroup from "react-leaflet-cluster"; import { useMap } from 'react-leaflet/hooks'
delete L.Icon.Default.prototype._getIconUrl; delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({ L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'), iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.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) { function StationGeoView(props) {
const { const {
stations, stations,
mapRef
} = props } = props
return (
return (
<div className="GeoBlock"> <div className="GeoBlock">
<MapContainer <MapContainer
...@@ -35,20 +50,33 @@ function StationGeoView(props) { ...@@ -35,20 +50,33 @@ function StationGeoView(props) {
url="https://tile.openstreetmap.org/{z}/{x}/{y}.png" 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 <Marker
key={station.properties['@id']} key={station.id}
position={[station.geometry.coordinates[1], station.geometry.coordinates[0]]} position={markerPosition}
> icon={customIcon}>
<Popup>
{station.properties.name}
<br />
{station.properties['name:en']}
</Popup>
</Marker> </Marker>
))} );
})}
<GetMapComponent mapRef={mapRef}/>
</MapContainer> </MapContainer>
</div> </div>
); );
......
...@@ -6,16 +6,19 @@ import { ListBox } from 'primereact/listbox'; ...@@ -6,16 +6,19 @@ import { ListBox } from 'primereact/listbox';
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import StationGeoView from './StationGeoView' import StationGeoView from './StationGeoView'
import PageHeader from '../../layout/components/PageHeader'; import PageHeader from '../../layout/components/PageHeader';
// see https://react-leaflet.js.org/docs/api-map/ // see https://react-leaflet.js.org/docs/api-map/
export default function StationView(props) { export default function StationView(props) {
const { const {
title,
location location
} = props } = props
const [stations, setStations] = useState() const [stations, setStations] = useState()
const [stationsGeo, setStationsGeo] = useState([]) const [stationsGeo, setStationsGeo] = useState([])
const [selectedStation, setSelectedStation] = useState()
const [map, setMap] = useState()
async function fetchStations() { async function fetchStations() {
...@@ -51,7 +54,7 @@ export default function StationView(props) { ...@@ -51,7 +54,7 @@ export default function StationView(props) {
function MakeGeoJson(stations) { function MakeGeoJson(stations) {
let StationgeojsonArray = [] let StationgeojsonArray = []
for (var station in stations){ for (let station in stations){
const geostationJson = generateGeoJson(station,stations[station]); const geostationJson = generateGeoJson(station,stations[station]);
StationgeojsonArray.push(geostationJson); StationgeojsonArray.push(geostationJson);
} }
...@@ -59,7 +62,12 @@ export default function StationView(props) { ...@@ -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 ( () => { useEffect ( () => {
fetchStations(); fetchStations();
}, []); }, []);
...@@ -73,13 +81,13 @@ export default function StationView(props) { ...@@ -73,13 +81,13 @@ export default function StationView(props) {
<TabView> <TabView>
<TabPanel header="Station List" className="TabStation"> <TabPanel header="Station List" className="TabStation">
<div className="StationListWrap" > <div className="StationListWrap" >
<ListBox options={stations} optionLabel="0" className="StationListbox"/> <ListBox options={stations} optionLabel="0" className="StationListbox" onChange={(e) => ZoomTo(e.value)}/>
<StationGeoView stations={stationsGeo}></StationGeoView > <StationGeoView stations={stationsGeo } selected={selectedStation} mapRef={ setMap} ></StationGeoView >
</div> </div>
</TabPanel> </TabPanel>
<TabPanel header="Geo Plot"> <TabPanel header="Geo Plot">
<div className="GeoMap"> <div className="GeoMap">
<StationGeoView stations={stationsGeo}></StationGeoView > <StationGeoView stations={stationsGeo} selected={selectedStation}></StationGeoView >
</div> </div>
</TabPanel> </TabPanel>
......
import { Component, useState } from 'react'; import { Component } from 'react';
import _ from 'lodash'; import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import "flatpickr/dist/flatpickr.css"; import "flatpickr/dist/flatpickr.css";
......
...@@ -217,8 +217,8 @@ async function GetStationLst(isSingleStation, cursorDateTimeUTC, stationName = U ...@@ -217,8 +217,8 @@ async function GetStationLst(isSingleStation, cursorDateTimeUTC, stationName = U
shift = await fetchLSTStationShift(cursorDateTimeUTC, stationName); shift = await fetchLSTStationShift(cursorDateTimeUTC, stationName);
timecache[key] = { isRetrieved: true, shift }; timecache[key] = { isRetrieved: true, shift };
} }
const stationLST = moment(cursorDateTimeUTC).add(shift.shiftLSTStation, '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");; const coreLST = moment(cursorDateTimeUTC).add(shift.shiftLSTCore, 'second').format("HH:mm");
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment