aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/DevicesList.js5
-rw-r--r--modern/src/MainPage.js10
-rw-r--r--modern/src/common/deviceCategories.js1
-rw-r--r--modern/src/map/Map.js18
-rw-r--r--modern/src/map/PositionsMap.js2
-rw-r--r--modern/src/map/mapUtil.js6
-rw-r--r--modern/src/setupProxy.js6
-rw-r--r--modern/src/store/index.js3
-rw-r--r--modern/src/store/ui.js16
9 files changed, 46 insertions, 21 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 9b2a5bf..5f7892c 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -14,7 +14,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
import BatteryFullIcon from '@material-ui/icons/BatteryFull';
import { ReactComponent as IgnitionIcon } from '../public/images/ignition.svg';
-import { devicesActions } from './store';
+import { devicesActions, uiActions } from './store';
import EditCollectionView from './EditCollectionView';
import { useEffectAsync } from './reactHelper';
import { formatPosition } from './common/formatter';
@@ -94,13 +94,14 @@ const DeviceRow = ({ data, index, style }) => {
<div style={style}>
<ListItem button key={item.id} className={classes.listItem} onClick={() => {
dispatch(devicesActions.select(item));
+ dispatch(uiActions.setCollapsed(true));
setTimeout (() => {
dispatch(devicesActions.unselect());
}, 1000);
}}>
<ListItemAvatar>
<Avatar>
- <img className={classes.icon} src={`images/icon/${item.category || 'default'}.png`} alt="" />
+ <img className={classes.icon} src={`images/icon/${(item.category || 'default').toLowerCase()}.png`} alt="" />
</Avatar>
</ListItemAvatar>
<ListItemText primary={item.name} secondary={item.status} classes={{ secondary: classes[getStatusColor(item.status)] }} />
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 7fd4315..08ba343 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -3,6 +3,8 @@ import { useHistory } from 'react-router-dom';
import {
makeStyles, Paper, Toolbar, TextField, IconButton, Button,
} from '@material-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import { uiActions } from './store/ui';
import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
@@ -22,7 +24,6 @@ import BottomMenu from './components/BottomMenu';
import { useTranslation } from './LocalizationProvider';
import PoiMap from './map/PoiMap';
import MapPadding from './map/MapPadding';
-
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
@@ -93,19 +94,20 @@ const MainPage = () => {
const classes = useStyles();
const history = useHistory();
const theme = useTheme();
+ const dispatch = useDispatch();
const t = useTranslation();
const isTablet = useMediaQuery(theme.breakpoints.down('md'));
const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
const [deviceName, setDeviceName] = useState('');
- const [collapsed, setCollapsed] = useState(false);
+ const collapsed = useSelector((state) => state.ui.collapsed);
const handleClose = () => {
- setCollapsed(!collapsed);
+ dispatch(uiActions.setCollapsed(!collapsed));
};
- useEffect(() => setCollapsed(isTablet), [isTablet]);
+ useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]);
return (
<div className={classes.root}>
diff --git a/modern/src/common/deviceCategories.js b/modern/src/common/deviceCategories.js
index f5d749a..69e4eb5 100644
--- a/modern/src/common/deviceCategories.js
+++ b/modern/src/common/deviceCategories.js
@@ -1,6 +1,7 @@
export default [
'default',
'animal',
+ 'backhoe',
'bicycle',
'boat',
'bus',
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index a5f69e0..10630d8 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -20,6 +20,8 @@ element.style.height = '100%';
export const map = new maplibregl.Map({
container: element,
+ center: [-100.360, 23.191],
+ zoom: 5
});
let ready = false;
@@ -48,13 +50,11 @@ const initMap = async () => {
});
await Promise.all(deviceCategories.map(async (category) => {
const results = [];
- ['green', 'red', 'gray'].forEach((color) => {
- results.push(loadImage(`images/icon/${category}.png`).then((icon) => {
- map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), {
- pixelRatio: window.devicePixelRatio,
- });
- }));
- });
+ results.push(loadImage(`images/icon/${category.toLowerCase()}.png`).then((icon) => {
+ map.addImage(`${category.toLowerCase()}-map`, prepareIcon(background, icon, null), {
+ pixelRatio: window.devicePixelRatio,
+ });
+ }));
await Promise.all(results);
}));
}
@@ -62,7 +62,7 @@ const initMap = async () => {
};
map.addControl(new maplibregl.NavigationControl({
- showCompass: false,
+ showCompass: false
}));
const switcher = new SwitcherControl(
@@ -70,7 +70,7 @@ const switcher = new SwitcherControl(
() => {
const waiting = () => {
if (!map.loaded()) {
- setTimeout(waiting, 100);
+ setTimeout(waiting, 2000);
} else {
initMap();
}
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 8d10053..f1ac3b7 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -104,7 +104,7 @@ const PositionsMap = ({ positions }) => {
source: id,
filter: ['!', ['has', 'point_count']],
layout: {
- 'icon-image': '{category}-{color}',
+ 'icon-image': '{category}-map',
'icon-allow-overlap': true,
'text-field': '{name}',
'text-allow-overlap': true,
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index ca7b3af..43038ef 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -36,10 +36,12 @@ export const prepareIcon = (background, icon, color) => {
canvas.style.height = `${background.height}px`;
const context = canvas.getContext('2d');
- context.drawImage(background, 0, 0, canvas.width, canvas.height);
+ if (!icon) {
+ context.drawImage(background, 0, 0, canvas.width, canvas.height);
+ }
if (icon) {
- const iconRatio = 0.8;
+ const iconRatio = 1;
const imageWidth = canvas.width * iconRatio;
const imageHeight = canvas.height * iconRatio;
/*if (navigator.userAgent.indexOf('Firefox') > 0) {*/
diff --git a/modern/src/setupProxy.js b/modern/src/setupProxy.js
index cd6a2fa..bc0daf0 100644
--- a/modern/src/setupProxy.js
+++ b/modern/src/setupProxy.js
@@ -3,6 +3,6 @@
const proxy = require('http-proxy-middleware');
module.exports = (app) => {
- app.use(proxy('/api/socket', { target: `ws://${process.env.REACT_APP_URL_NAME}`, ws: true }));
- app.use(proxy('/api', { target: `http://${process.env.REACT_APP_URL_NAME}` }));
-};
+ app.use(proxy('/api/socket', { target: `wss://${process.env.REACT_APP_URL_NAME}`, changeOrigin: true, ws: true }));
+ app.use(proxy('/api', { target: `https://${process.env.REACT_APP_URL_NAME}`, changeOrigin: true }));
+}; \ No newline at end of file
diff --git a/modern/src/store/index.js b/modern/src/store/index.js
index 6e2bb20..ebd3f43 100644
--- a/modern/src/store/index.js
+++ b/modern/src/store/index.js
@@ -7,6 +7,7 @@ import { geofencesReducer as geofences } from './geofences';
import { groupsReducer as groups } from './groups';
import { driversReducer as drivers } from './drivers';
import { maintenancesReducer as maintenances } from './maintenances';
+import { uiReducer as ui } from './ui';
const reducer = combineReducers({
session,
@@ -16,6 +17,7 @@ const reducer = combineReducers({
groups,
drivers,
maintenances,
+ ui
});
export { sessionActions } from './session';
@@ -25,5 +27,6 @@ export { geofencesActions } from './geofences';
export { groupsActions } from './groups';
export { driversActions } from './drivers';
export { maintenancesActions } from './maintenances';
+export { uiActions } from './ui';
export default configureStore({ reducer });
diff --git a/modern/src/store/ui.js b/modern/src/store/ui.js
new file mode 100644
index 0000000..0783492
--- /dev/null
+++ b/modern/src/store/ui.js
@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const { reducer, actions } = createSlice({
+ name: 'ui',
+ initialState: {
+ collapsed: true
+ },
+ reducers: {
+ setCollapsed(state, action) {
+ state.collapsed = action.payload;
+ },
+ },
+});
+
+export { actions as uiActions };
+export { reducer as uiReducer };
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-26 17:28:22 +0000