diff options
| -rw-r--r-- | modern/src/DevicesList.js | 36 | ||||
| -rw-r--r-- | modern/src/StartPage.js | 2 | ||||
| -rw-r--r-- | modern/src/common/formatter.js | 12 | ||||
| -rw-r--r-- | modern/src/map/Map.js | 4 | ||||
| -rw-r--r-- | modern/src/map/PositionsMap.js | 14 | ||||
| -rw-r--r-- | modern/src/map/StatusView.js | 6 | ||||
| -rw-r--r-- | modern/src/theme/palette.js | 30 |
7 files changed, 28 insertions, 76 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js index 10ac4fc7..a2495f9d 100644 --- a/modern/src/DevicesList.js +++ b/modern/src/DevicesList.js @@ -17,7 +17,7 @@ import { ReactComponent as IgnitionIcon } from '../public/images/ignition.svg'; import { devicesActions } from './store'; import EditCollectionView from './EditCollectionView'; import { useEffectAsync } from './reactHelper'; -import { formatPosition } from './common/formatter'; +import { formatPosition, getBatteryStatus, getStatusColor } from './common/formatter'; import { getDevices, getPosition } from './common/selectors'; import { useTranslation } from './LocalizationProvider'; @@ -45,42 +45,20 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 'normal', lineHeight: '0.875rem', }, - green: { - color: theme.palette.common.green, + positive: { + color: theme.palette.colors.positive, }, - red: { - color: theme.palette.common.red, + negative: { + color: theme.palette.colors.negative, }, - gray: { - color: theme.palette.common.gray, + neutral: { + color: theme.palette.colors.neutral, }, indicators: { lineHeight: 1, }, })); -const getStatusColor = (status) => { - switch (status) { - case 'online': - return 'green'; - case 'offline': - return 'red'; - case 'unknown': - default: - return 'gray'; - } -}; - -const getBatteryStatus = (batteryLevel) => { - if (batteryLevel >= 70) { - return 'green'; - } - if (batteryLevel > 30) { - return 'gray'; - } - return 'red'; -}; - const DeviceRow = ({ data, index, style }) => { const classes = useStyles(); const dispatch = useDispatch(); diff --git a/modern/src/StartPage.js b/modern/src/StartPage.js index 1e204c22..fcfaccca 100644 --- a/modern/src/StartPage.js +++ b/modern/src/StartPage.js @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme) => ({ justifyContent: 'center', alignItems: 'center', color: theme.palette.secondary.contrastText, - background: theme.palette.common.purple, + background: theme.palette.primary.main, paddingBottom: theme.spacing(5), width: theme.dimensions.sidebarWidth, [theme.breakpoints.down('md')]: { diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js index 0ff4e741..32df04c2 100644 --- a/modern/src/common/formatter.js +++ b/modern/src/common/formatter.js @@ -104,21 +104,21 @@ export const formatCoordinate = (key, value, unit) => { export const getStatusColor = (status) => { switch (status) { case 'online': - return 'green'; + return 'positive'; case 'offline': - return 'red'; + return 'negative'; case 'unknown': default: - return 'gray'; + return 'neutral'; } }; export const getBatteryStatus = (batteryLevel) => { if (batteryLevel >= 70) { - return 'green'; + return 'positive'; } if (batteryLevel > 30) { - return 'gray'; + return 'neutral'; } - return 'red'; + return 'negative'; }; diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js index bbfe4764..deb2ec9b 100644 --- a/modern/src/map/Map.js +++ b/modern/src/map/Map.js @@ -48,9 +48,9 @@ const initMap = async () => { }); await Promise.all(deviceCategories.map(async (category) => { const results = []; - ['green', 'red', 'gray'].forEach((color) => { + ['positive', 'negative', 'neutral'].forEach((color) => { results.push(loadImage(`images/icon/${category}.svg`).then((icon) => { - map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.common[color]), { + map.addImage(`${category}-${color}`, prepareIcon(background, icon, palette.colors[color]), { pixelRatio: window.devicePixelRatio, }); })); diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js index 8d100534..791c7abe 100644 --- a/modern/src/map/PositionsMap.js +++ b/modern/src/map/PositionsMap.js @@ -9,6 +9,7 @@ import { map } from './Map'; import store from '../store'; import StatusView from './StatusView'; import theme from '../theme'; +import { getStatusColor } from '../common/formatter'; const PositionsMap = ({ positions }) => { const id = 'positions'; @@ -17,24 +18,13 @@ const PositionsMap = ({ positions }) => { const history = useHistory(); const devices = useSelector((state) => state.devices.items); - const deviceColor = (device) => { - switch (device.status) { - case 'online': - return 'green'; - case 'offline': - return 'red'; - default: - return 'gray'; - } - }; - const createFeature = (devices, position) => { const device = devices[position.deviceId]; return { deviceId: position.deviceId, name: device.name, category: device.category || 'default', - color: deviceColor(device), + color: getStatusColor(device.status), }; }; diff --git a/modern/src/map/StatusView.js b/modern/src/map/StatusView.js index 5526e148..cec71f98 100644 --- a/modern/src/map/StatusView.js +++ b/modern/src/map/StatusView.js @@ -25,7 +25,9 @@ const useStyles = makeStyles((theme) => ({ paper: { width: '300px', }, - ...theme.palette.colors, + negative: { + color: theme.palette.colors.negative, + }, listItemContainer: { maxWidth: '240px', }, @@ -124,7 +126,7 @@ const StatusView = ({ </IconButton> </Grid> <Grid item> - <IconButton onClick={handleRemove} className={classes.red}> + <IconButton onClick={handleRemove} className={classes.negative}> <DeleteIcon /> </IconButton> </Grid> diff --git a/modern/src/theme/palette.js b/modern/src/theme/palette.js index 622e49b0..46f82ae9 100644 --- a/modern/src/theme/palette.js +++ b/modern/src/theme/palette.js @@ -1,32 +1,14 @@ -const traccarWhite = '#FFF'; -const traccarPurple = '#333366'; -const traccarGreen = '#4CAF50'; -const traccarRed = '#CC2222'; -const traccarGray = '#888888'; - export default { - common: { - purple: traccarPurple, - green: traccarGreen, - red: traccarRed, - gray: traccarGray, - }, primary: { - main: traccarPurple, + main: '#333366', }, secondary: { - main: traccarGreen, - contrastText: traccarWhite, + main: '#4CAF50', + contrastText: '#FFFFFF', }, colors: { - red: { - color: traccarRed, - }, - green: { - color: traccarGreen, - }, - gray: { - color: traccarGray, - }, + positive: '#4CAF50', + negative: '#CC2222', + neutral: '#888888', }, }; |