Merge pull request #6 from Kingforce01/algoprak-ws21-overlay

Algoprak ws21 overlay

ui/web/pages/App/App.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { useRouter} from 'next/router';
 
-import { Overlay } from '../Modules/Overlay';
-import { Translations, deTranslations, enTranslations, plTranslations } from '../Modules/Localization';
-import { StationSearch } from '../Modules/StationSearch';
-import { MapContainer } from '../Modules/MapContainer';
+import { Overlay } from '../Overlay/Overlay';
+import { Translations, deTranslations, enTranslations, plTranslations } from './Localization';
+import { StationSearch } from '../StationSearch/StationSearch';
+import { MapContainer } from '../Map/MapContainer';
 
 
 const getQuery = (): Translations => {
@@ -18,18 +18,34 @@ const getQuery = (): Translations => {
     }
     return enTranslations;
 }
+declare global{
+    interface Window {
+        portEvents : any;
+    }
+}  
 
 
 export const App: React.FC = () => {
+
+    let isMobile = false;
+
+    React.useEffect(() => {
+        isMobile = window.matchMedia("only screen and (max-width: 500px)").matches;
+    });
 
     return (
         <div className='app'>
-            {/* visible && <MapView />*/}
-            <MapContainer translation={getQuery()}/>
-            <Overlay translation={getQuery()}/>
-            {//<StationSearchView />
+            {isMobile ?
+                <Overlay translation={getQuery()}/>
+                :
+                <div>
+                    {/* visible && <MapView />*/}
+                    <MapContainer translation={getQuery()}/>
+                    <Overlay translation={getQuery()}/>
+                    {//<StationSearchView />}
+                    }<StationSearch translation={getQuery()}/>
+                </div>
             }
-            <StationSearch />
         </div>
     );
 };

ui/web/pages/Modules/MapContainer.tsx → ui/web/pages/Map/MapContainer.tsx

@@ -1,15 +1,22 @@
-import React from "react";
+import React, { useEffect } from "react";
 import moment from "moment";
 
-import { DatePicker } from "./DatePicker";
-import { Translations } from "./Localization";
+import { DatePicker } from "../Overlay/DatePicker";
+import { Translations } from "../App/Localization";
+import { RailvizContextMenu } from "./RailvizContextMenu";
 
 export const MapContainer: React.FC<{'translation': Translations}> = (props) => {
 
     const [simTimePickerSelected, setSimTimePickerSelected] = React.useState<Boolean>(false);
 
     const[currMoment, setCurrMoment] = React.useState<moment.Moment>(moment());
 
+    useEffect(() => {
+        window.portEvents.sub('mapInitFinished', function(){
+            window.portEvents.pub('mapSetLocale', props.translation.search);
+        });
+    });
+
     return (
         <div className="map-container">
             <div id="map-background" className="mapboxgl-map">
@@ -20,7 +27,7 @@ export const MapContainer: React.FC<{'translation': Translations}> = (props) =>
             </div>
             <div className="railviz-tooltip hidden"></div>
             <div className="map-bottom-overlay">
-                <div className="sim-time-overlay" onClick={() => simTimePickerSelected ? setSimTimePickerSelected(false) : setSimTimePickerSelected(true)}>
+                <div className="sim-time-overlay" onClick={() => setSimTimePickerSelected(!simTimePickerSelected)}>
                     <div id="railviz-loading-spinner" className="">
                         <div className="spinner">
                             <div className="bounce1"></div>
@@ -35,18 +42,23 @@ export const MapContainer: React.FC<{'translation': Translations}> = (props) =>
                     <div className="time" id="sim-time-overlay">19.10.2020 16:47:01</div>
                 </div>
                 <div className="train-color-picker-overlay">
-                    <div><input type="radio" id="train-color-picker-none" name="train-color-picker" /><label
-                        htmlFor="train-color-picker-none">Keine Züge</label></div>
-                    <div><input type="radio" id="train-color-picker-className" name="train-color-picker" /><label
-                        htmlFor="train-color-picker-className">Nach Kategorie</label></div>
-                    <div><input type="radio" id="train-color-picker-delay" name="train-color-picker" /><label
-                        htmlFor="train-color-picker-delay">Nach Verspätung</label></div>
+                    <div><input type="radio" id="train-color-picker-none" name="train-color-picker" onClick={() => {
+                        window.portEvents.pub('mapShowTrains', false);
+                    }}/><label
+                        htmlFor="train-color-picker-none">{props.translation.railViz.noTrains}</label></div>
+                    <div><input type="radio" id="train-color-picker-className" name="train-color-picker" defaultChecked onClick={() => {
+                        window.portEvents.pub('mapSetUseTrainClassColor', true);
+                        window.portEvents.pub('mapShowTrains', true);
+                    }}/><label
+                        htmlFor="train-color-picker-className">{props.translation.railViz.classColors}</label></div>
+                    <div><input type="radio" id="train-color-picker-delay" name="train-color-picker" onClick={() => {
+                        window.portEvents.pub('mapSetUseTrainClassColor', false);
+                        window.portEvents.pub('mapShowTrains', true);
+                    }}/><label
+                        htmlFor="train-color-picker-delay">{props.translation.railViz.delayColors}</label></div>
                 </div>
             </div>
-            <div className="railviz-contextmenu hidden" style={{ top: "0px", left: "0px" }}>
-                <div className="item">Routen von hier</div>
-                <div className="item">Routen hierher</div>
-            </div>
+            <RailvizContextMenu translation={props.translation}/>
             <div className={simTimePickerSelected ? "sim-time-picker-container" : "sim-time-picker-container hide"}>
                 <div className="sim-time-picker-overlay">
                     <div className="title">

ui/web/pages/Map/RailvizContextMenu.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+
+import { getFromLocalStorage, setLocalStorage } from '../App/LocalStorage';
+import {Translations} from '../App/Localization';
+
+export let markerSearch = null;
+
+export const RailvizContextMenu: React.FC<{'translation': Translations}> = (props) => {
+
+    const [x, setX] = useState(0);
+    const [y, setY] = useState(0);
+    const [lat, setLat] = useState(0);
+    const [lng, setLng] = useState(0);
+    const [contextMenuHidden, setContextMenuHidden] = useState<Boolean>(true);
+
+    useEffect(() => {
+        window.portEvents.sub('mapShowContextMenu', function(data){
+            setX(data.mouseX);
+            setY(data.mouseY);
+            setLat(data.lat);
+            setLng(data.lng);
+            setContextMenuHidden(false);
+        });
+        window.portEvents.sub('mapCloseContextMenu', function(data){
+            setContextMenuHidden(true);
+        })
+    })
+    return (
+        <div className={contextMenuHidden ? 'railviz-contextmenu hidden': 'railviz-contextmenu'} style={{ top: y+'px', left: x+'px' }}>
+            <div className='item' onClick={() => {
+                setContextMenuHidden(true);
+                setLocalStorage("motis.routing.from_location", {'name': lat+';'+lng, 'pos':{'lat': lat, 'lng': lng}, 'type_': '', 'regions': {}});
+                markerSearch = [true, {'name': lat+';'+lng, 'pos':{'lat': lat, 'lng': lng}, 'type_': '', 'regions': {}}];
+                window.portEvents.pub('mapSetMarkers', { 'startPosition':{'lat': lat,'lng': lng},
+                                                         'startName': lat+';'+lng,
+                                                         'destinationPosition': getFromLocalStorage("motis.routing.to_location").pos,
+                                                         'destinationName': getFromLocalStorage("motis.routing.to_location").name});
+                markerSearch = null;
+            }}>{props.translation.mapContextMenu.routeFromHere}</div>
+            <div className='item' onClick={() => {
+                setContextMenuHidden(true);
+                setLocalStorage("motis.routing.to_location", {'name': lat+';'+lng, 'pos':{'lat': lat, 'lng': lng}, 'type_': '', 'regions': {}})
+                markerSearch = [false, {'name': lat+';'+lng, 'pos':{'lat': lat, 'lng': lng}, 'type_': '', 'regions': {}}];
+                window.portEvents.pub('mapSetMarkers', {'startPosition': getFromLocalStorage("motis.routing.from_location").pos,
+                                                        'startName': getFromLocalStorage("motis.routing.from_location").name,
+                                                        'destinationPosition':{'lat': lat, 'lng': lng},
+                                                        'destinationName':lat+';'+lng});
+                markerSearch = null;
+            }}>{props.translation.mapContextMenu.routeToHere}</div>
+        </div>);
+};