rcs-flow.git - Gitblit

			@@ -19,8 +19,11 @@
			import * as Http from './http';
			import WebSocketClient from './websocket'
			import ConfirmButton from "../page/components/ConfirmButton";
			import { FitScreen } from '@mui/icons-material';
			import { FitScreen, AltRoute, RotateRight } from '@mui/icons-material';
			import MapSearch from "./header/MapSearch";
			import { startupOrShutdown } from "./http";
			import PulseSignal from "../page/components/PulseSignal";
			import FakeFab from "./header/FakeFab";

			let player;
			let websocket;
			@@ -37,7 +40,7 @@
			const [app, setApp] = useState(null);
			const [mapContainer, setMapContainer] = useState(null);

			const [mode, setMode] = useState(null);
			const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE);
			const [dataFetched, setDataFetched] = useState(false);
			const [insightVisible, setInsightVisible] = useState(false);
			const [deviceVisible, setDeviceVisible] = useState(false);
			@@ -45,9 +48,10 @@
			const [batchSelectionVisible, setBatchSelectionVisible] = useState(false);

			const [curSprite, setCurSprite] = useState(null);
			const prevCurSpriteRef = useRef();
			const [batchSprites, setBatchSprites] = useState([]);

			const [rcsStatus, setRcsStatus] = useState(null);
			const [showRoutes, setShowRoutes] = useState(false);
			const [curZone, setCurZone] = useState(() => {
			const storedValue = localStorage.getItem('curZone');
			return storedValue !== null ? JSON.parse(storedValue) : null;
			@@ -73,17 +77,17 @@
			Http.setMapContainer(player.mapContainer);
			websocket = new WebSocketClient('/ws/map/websocket');

			await Http.fetchMapData();
			await Http.fetchMapData(curZone, setRcsStatus, setCurSprite);
			websocket.connect();
			websocket.onMessage = (wsMsg) => {
			Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite);
			}

			player.rotateMap(localStorage.getItem('mapRotation'));
			setTimeout(() => {
			notify.info(translate('page.map.welcome'));
			player.adaptScreen();
			setDataFetched(true);
			setMode(MAP_MODE.OBSERVER_MODE);
			}, 200)
			}
			initialize();
			@@ -115,6 +119,7 @@

			const switchMode = (mode) => {
			Tool.removeSelectedEffect();
			player.hideGridLines();

			setInsightVisible(false);
			setDeviceVisible(false);
			@@ -126,9 +131,6 @@

			switch (mode) {
			case MAP_MODE.OBSERVER_MODE:
			player.hideGridLines();
			player.hideStarryBackground();

			player.activateMapMultiSelect((selectedSprites, restartFn) => {
			Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
			});
			@@ -139,7 +141,7 @@
			break
			case MAP_MODE.MOVABLE_MODE:
			player.showGridLines();
			player.hideStarryBackground();
			Tool.hideRoutes(curZone, setShowRoutes);

			player.activateMapMultiSelect((selectedSprites, restartFn) => {
			Tool.spriteListBeMovable(selectedSprites, () => {
			@@ -152,9 +154,6 @@
			})
			break
			case MAP_MODE.SETTINGS_MODE:
			player.hideGridLines();
			// player.showStarryBackground(); // 0x2f68ac

			player.activateMapMultiSelect((selectedSprites, restartFn) => {
			Tool.multipleSelectEnhancer(selectedSprites, setCurSprite, setBatchSprites);
			});
			@@ -190,25 +189,22 @@
			if (!mapContainer) {
			return;
			}
			prevCurSpriteRef.current = curSprite;
			if (curSprite && prevCurSprite !== curSprite) {
			Tool.removeSelectedEffect();
			}
			Tool.removeSelectedEffect();
			if (curSprite) {
			if (mode === MAP_MODE.OBSERVER_MODE) {
			Tool.showSelectedEffect(curSprite)
			setInsightVisible(true)
			Tool.showSelectedEffect(curSprite);
			setInsightVisible(true);
			}
			if (mode === MAP_MODE.SETTINGS_MODE) {
			Tool.showSelectedEffect(curSprite)
			setSettingsVisible(true)
			Tool.showSelectedEffect(curSprite);
			setSettingsVisible(true);
			}
			} else {
			Tool.removeSelectedEffect();
			setInsightVisible(false)
			setInsightVisible(false);
			setSettingsVisible(false);
			}
			}, [curSprite]);
			const prevCurSprite = prevCurSpriteRef.current;

			// watch batchSprites
			React.useEffect(() => {
			@@ -258,12 +254,25 @@

			{mode === MAP_MODE.OBSERVER_MODE && (
			<>
			<Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
			<PulseSignal
			negative
			negativeColor='#a4b0be'
			flag={rcsStatus}
			width={12}
			/>
			</Box>
			<Button
			variant="contained"
			color="primary"
			color={rcsStatus ? 'inherit' : 'primary'}
			sx={{ mr: 2 }}
			onClick={() => {
			startupOrShutdown(() => {
			setRcsStatus(!rcsStatus);
			});
			}}
			>
			{translate('page.map.action.startup')}
			{rcsStatus ? translate('page.map.action.shutdown') : translate('page.map.action.startup')}
			</Button>
			<Button variant="contained" color="primary">
			{translate('page.map.action.monitor')}
			@@ -388,19 +397,46 @@
			bottom: 30,
			display: 'flex',
			flexDirection: 'column',
			gap: 1
			gap: 2
			}}
			>
			{mode !== MAP_MODE.MOVABLE_MODE && (
			<>
			<Fab
			variant="extended"
			color={showRoutes ? 'primary' : 'default'}
			size="small"
			onClick={() => {
			showRoutes ? Tool.hideRoutes(curZone, setShowRoutes) : Tool.showRoutes(curZone, setShowRoutes)
			}}
			>
			<AltRoute />
			</Fab>
			<FakeFab
			/>
			</>
			)}
			<Fab
			variant="extended"
			color="primary"
			size="medium"
			size="small"
			onClick={() => {
			player.rotateMap(Math.PI / 2);
			}}
			>
			<RotateRight />
			{/*  {translate('page.map.action.adapt')} */}
			</Fab>
			<Fab
			variant="extended"
			color="primary"
			size="small"
			onClick={() => {
			player.adaptScreen();
			}}
			>
			<FitScreen />
			{translate('page.map.action.adapt')}
			{/*  {translate('page.map.action.adapt')} */}
			</Fab>
			</Box>
			</Box>
			@@ -427,7 +463,6 @@
			open={settingsVisible}
			onCancel={() => {
			setCurSprite(null);
			setSettingsVisible(false);
			}}
			sprite={curSprite}
			setSpriteSettings={setCurSprite}
			@@ -438,7 +473,6 @@
			open={batchSelectionVisible}
			onCancel={() => {
			setBatchSprites([]);
			setBatchSelectionVisible(false);
			}}
			batchSprites={batchSprites}
			mode={mode}