More rebranding para ETBSA!

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 };