Skip to content
GitLab
Commit 4290aeb0 authored by Emil Friberg's avatar Emil Friberg
Browse files

#14 Create content to StationInfo (SattionFacts and Legendinfo with pointer) 

Reuse Components across the app.
parent 5d054ae6
Hide whitespace changes
Inline Side-by-side
source/src/assets/locales/ba/translation.json
View file @ 4290aeb0
......@@ -24,14 +24,17 @@
"menu-language": "Jezik",
"menu-english": "Engleski",
"menu-bosnian": "Bosanski",
"request-popup-date": "Datum",
"request-popup-location": "Lokacija",
"request-popup-classification": "Klasifikacija",
"request-popup-area": "Područje",
"request-popup-ra": "Odgovorni autor",
"request-popup-oc": "Operativan od",
"request-popup-mp": "Izmjereni zagađivači ( \u00b5g/m3 )",
"request-popup-sp": "Odabrani zagađivač ( \u00b5g/m3 )",
"station-facts-date": "Datum",
"station-facts-location": "Lokacija",
"station-facts-classification": "Klasifikacija",
"station-facts-area": "Područje",
"station-facts-ra": "Odgovorni autor",
"station-facts-oc": "Operativan od",
"station-facts-pos": "Pozicija",
"station-facts-lat": "Širina",
"station-facts-lng": "Zemljopisna dužina",
"station-facts-mp": "Izmjereni zagađivači ( \u00b5g/m3 )",
"station-facts-sp": "Odabrani zagađivač ( \u00b5g/m3 )",
"Traffic": "Saobraćaj",
"Background": "Pozadina",
"Industrial": "Industrijski",
......
source/src/assets/locales/en/translation.json
View file @ 4290aeb0
......@@ -24,14 +24,17 @@
"menu-language": "Language",
"menu-english": "English",
"menu-bosnian": "Bosnian",
"request-popup-date": "Date",
"request-popup-location": "Location",
"request-popup-classification": "Classification",
"request-popup-area": "Area",
"request-popup-ra": "Responsible authory",
"request-popup-oc": "Operational since",
"request-popup-mp": "Mesured pollutants ( \u00b5g/m3 )",
"request-popup-sp": "Selected pollutant ( \u00b5g/m3 )",
"station-facts-date": "Date",
"station-facts-location": "Location",
"station-facts-classification": "Classification",
"station-facts-area": "Area",
"station-facts-ra": "Responsible authory",
"station-facts-oc": "Operational since",
"station-facts-pos": "Position",
"station-facts-lat": "Latitude",
"station-facts-lng": "Longitude",
"station-facts-mp": "Mesured pollutants ( \u00b5g/m3 )",
"station-facts-sp": "Selected pollutant ( \u00b5g/m3 )",
"Traffic": "Traffic",
"Background": "Background",
"Industrial": "Industrial",
......
source/src/compoonents/AirMap/Legend/LegendDetails.js
View file @ 4290aeb0
......@@ -13,6 +13,7 @@ const LegendDetails = ({ toggleOpen }) => {
const buttonRef = useRef();
const { t } = useTranslation();
const legendInfo = Object.keys(LEGEND_INFO);
legendInfo.pop(); //Remove Historical in detailview
const isMobile = useIsMobile();
const LEGEND_DETAILS_INFO = {
......
source/src/compoonents/AirMap/Legend/index.js
View file @ 4290aeb0
......@@ -6,7 +6,7 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
import { makeStyles } from '@material-ui/core/styles';
import '../Map.css';
import { LEGEND_INFO } from '../../../utils/enums';
import LegendInfo from '../LegendInfo';
import { materialTextButtonStyle } from '../../../utils/styles';
import { materialButtonStyle } from '../../../utils/styles';
import LegendDetails from './LegendDetails';
......@@ -54,38 +54,13 @@ const Legend = ({ setOpenDetails, openDetails }) => {
setOpenDetails(!openDetails);
};
const legendItems = Object.keys(LEGEND_INFO);
return (
<>
<Control position="bottomleft" className="request-popup">
<Control position="bottomleft">
{open && (
<>
<div className="legend-container">
{legendItems.map((item, i) => {
return (
<div className="row" key={`legend ${i}`}>
<div className="column1">
<div
className={`square-box ${item
.substring(0, 4)
.toLowerCase()}`}
>
<div className="square-content">
<div>
<span
className={`${item
.substring(0, 4)
.toLowerCase()}`}
>{`${i + 1}`}</span>
</div>
</div>
</div>
</div>
<div className="column2">{`${t(item)}`}</div>
</div>
);
})}
<LegendInfo />
<div className={classes.root} style={{ textAlign: 'right' }}>
<Button
ref={buttonRef}
......
source/src/compoonents/AirMap/LegendInfo.js 0 → 100644
View file @ 4290aeb0
import React from 'react';
import './Map.css';
import { LEGEND_INFO } from '../../utils/enums';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import { ArrowRightOutline24 } from '@aurora/icons-react';
const LegendInfo = ({ selectedStation }) => {
const { t } = useTranslation();
const legendItems = Object.keys(LEGEND_INFO);
return (
<>
{legendItems.map((item, i) => {
const isSelectedPollutant =
selectedStation &&
selectedStation.selectedPollutant &&
selectedStation.selectedPollutant.meta.level === i + 1;
return (
<div className="legend-row" key={`legend ${i}`}>
{selectedStation && (
<div className="legend-column-flex-1">
{isSelectedPollutant && (
<ArrowRightOutline24 style={{ margin: '0px' }} />
)}
</div>
)}
<div className="legend-column-flex-1">
<div className={`square-box ${LEGEND_INFO[item].colorClass}`}>
<div className="square-content">
<div>
<span className={LEGEND_INFO[item].colorClass}>{`${
i === 6 ? '' : i + 1
}`}</span>
</div>
</div>
</div>
</div>
<div
className={
selectedStation
? 'legend-column-flex-7'
: 'legend-column-flex-2'
}
style={{ fontWeight: isSelectedPollutant ? 'bold' : '' }}
>{`${t(item)} ${
isSelectedPollutant
? `(${selectedStation.selectedPollutant.pollutantnotation})`
: ''
}`}</div>
</div>
);
})}
</>
);
};
LegendInfo.propTypes = {
selectedStation: PropTypes.object,
};
export default LegendInfo;
source/src/compoonents/AirMap/Map.css
View file @ 4290aeb0
......@@ -9,11 +9,6 @@
left: 8rem;
}
#raven-map .request-popup .row {
display: flex;
margin-bottom: 6px;
}
#raven-map .legend-container {
background-color: #ffffff;
padding: 1rem;
......@@ -64,52 +59,64 @@
margin: 0;
}
.legend-details-container .content .row {
.legend-row {
display: flex;
margin-bottom: 0;
height: 1.4rem;
}
.legend-details-container .content .column1 {
.legend-column-flex-1 {
flex: 1;
text-align: center;
}
.legend-details-container .content .column2 {
.legend-column-flex-2 {
flex: 2;
text-align: center;
text-align: left;
}
.legend-details-container .content .column3 {
flex: 3;
.legend-column-flex-7 {
flex: 7;
text-align: left;
}
#raven-map .request-popup .row {
.row {
display: flex;
margin-bottom: 6px;
}
#raven-map .request-popup .column1 {
.facts-column {
flex: 1;
text-align: left;
}
.facts-column-3 {
flex: 3;
text-align: left;
}
#raven-map .request-popup .column2 {
.column1 {
flex: 1;
text-align: center;
}
.column2 {
flex: 2;
margin-right: 5px;
text-align: center;
}
#raven-map .request-popup .column3 {
.column3 {
flex: 3;
margin-right: 5px;
text-align: center;
text-align: left;
}
#raven-map .bold {
.bold {
font-weight: bold;
}
#raven-map .request-popup .topbar {
#raven-map .station-facts .topbar {
width: 100%;
height: 1.3rem;
position: absolute;
......@@ -117,7 +124,7 @@
left: 0;
}
#raven-map .request-popup .buttons {
#raven-map .station-facts .buttons {
margin-top: 1rem;
}
......@@ -125,20 +132,20 @@
padding-top: 0.5rem;
}
#raven-map .request-popup .square-box {
.square-box {
position: relative;
width: 20px;
overflow: hidden;
background: #4679bd;
}
#raven-map .request-popup .square-box:before {
.square-box:before {
content: '';
display: block;
padding-top: 100%;
}
#raven-map .request-popup .square-content {
.square-content {
position: absolute;
top: 0;
left: 0;
......@@ -147,20 +154,20 @@
color: black;
}
#raven-map .request-popup .square-content div {
.square-content div {
display: table;
width: 100%;
height: 100%;
}
#raven-map .request-popup .square-content span {
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
font-weight: bold;
}
#raven-map .circle-with-txt {
.circle-with-txt {
position: relative;
color: white;
font-size: 12px;
......@@ -173,41 +180,41 @@
display: inline-block;
}
#raven-map .good {
background-color: #00fce5;
color: black;
.good {
background-color: #00fce5 !important;
color: black !important;
}
#raven-map .fair {
background-color: #00daa9;
color: white;
.fair {
background-color: #00daa9 !important;
color: white !important;
}
#raven-map .mode {
background-color: #e2f746;
color: black;
.mode {
background-color: #e2f746 !important;
color: black !important;
}
#raven-map .poor {
background-color: #ff0054;
color: white;
.poor {
background-color: #ff0054 !important;
color: white !important;
}
#raven-map .very {
background-color: #a50034;
color: white;
.very {
background-color: #a50034 !important;
color: white !important;
}
#raven-map .extr {
background-color: #910081;
color: white;
.extr {
background-color: #910081 !important;
color: white !important;
}
#raven-map .circle-with-txt:hover {
.circle-with-txt:hover {
border: 3px solid #1798d5;
}
#raven-map .txt {
.txt {
margin: 0;
position: absolute;
top: 50%;
......
source/src/compoonents/AirMap/PollutantList.js
View file @ 4290aeb0
......@@ -10,13 +10,13 @@ const PollutantList = ({ station, selectedPollutant, pollutant }) => {
const PollutantItem = ({ pollutant, rowKey }) => {
return (
<div key={rowKey} className="row">
<div className="column1">{`${pollutant.pollutantnotation}`}</div>
<div className="column1">{`${
<div className="facts-column">{`${pollutant.pollutantnotation}`}</div>
<div className="facts-column">{`${
pollutant.aqipollutantvalue
? pollutant.aqipollutantvalue
: pollutant.pollutantvalue
}`}</div>
<div className="column1">
<div className="facts-column">
<div className={`square-box ${pollutant.meta.colorClass}`}>
<div className="square-content">
<div>
......@@ -27,7 +27,7 @@ const PollutantList = ({ station, selectedPollutant, pollutant }) => {
</div>
</div>
</div>
<div className="column2">{t(pollutant.meta.text)}</div>
<div className="facts-column-3">{t(pollutant.meta.text)}</div>
</div>
);
};
......
source/src/compoonents/AirMap/PollutantSelector.js
View file @ 4290aeb0
......@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import Control from 'react-leaflet-control';
import 'react-dropdown/style.css';
import { SELECTED_POLLUTANT } from '../../utils/enums';
import { appendSelectedPollutant } from '../../utils/funcs';
import Button from '@material-ui/core/Button';
import { materialButtonStyle } from '../../utils/styles';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
......@@ -12,7 +13,12 @@ import '../AirMap/SideMenu/SideMenu.css';
import FocusTrap from 'focus-trap-react';
import { useTranslation } from 'react-i18next';
const PollutantSelector = ({ setSelectedPollutant, selectedPollutant }) => {
const PollutantSelector = ({
setSelectedPollutant,
selectedPollutant,
selectedStation,
setSelectedStation,
}) => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
......@@ -20,6 +26,8 @@ const PollutantSelector = ({ setSelectedPollutant, selectedPollutant }) => {
const changePollutant = (pollutant) => () => {
setSelectedPollutant(pollutant);
const station = appendSelectedPollutant(selectedStation, pollutant);
setSelectedStation(station);
setOpen(false);
};
......@@ -92,6 +100,8 @@ const PollutantSelector = ({ setSelectedPollutant, selectedPollutant }) => {
PollutantSelector.propTypes = {
setSelectedPollutant: PropTypes.func,
selectedPollutant: PropTypes.string,
selectedStation: PropTypes.object,
setSelectedStation: PropTypes.func,
};
export default PollutantSelector;
source/src/compoonents/AirMap/RightMenu/RightMenu.css
View file @ 4290aeb0
.right-menu {
font-family: 'Noto Sans', Verdana, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5rem;
letter-spacing: 0.02rem;
font-weight: 400;
}
.right-menu .station-info-wrapper {
min-width: 55rem;
}
......@@ -48,6 +40,25 @@
padding: 1rem;
}
.right-menu .station-info-wrapper .collapsable .children .facts {
display: flex;
flex-direction: row;
}
.right-menu .station-info-wrapper .collapsable .children .facts .flex-item4 {
flex: 4;
border-right: 1px solid #d0d6db;
}
.right-menu .station-info-wrapper .collapsable .children .facts .flex-item2 {
flex: 2;
padding: 0rem 1rem 1rem 1rem;
}
.right-menu .station-info-wrapper .collapsable .children .facts .flex-item2 .head {
font-weight: bold;
padding: 0rem 0rem 0.5rem 1.7rem;
}
.right-menu .station-info-wrapper .collapsable.divider {
border-bottom: 0.0625rem solid #d0d6db;
}
......
source/src/compoonents/AirMap/RightMenu/StationInfo/index.js
View file @ 4290aeb0
......@@ -6,6 +6,8 @@ import {
GraphOutline32,
} from '@aurora/icons-react';
import Collapsible from './Collapsible';
import StationFacts from '../../StationFacts';
import LegendInfo from '../../LegendInfo';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import '../RightMenu.css';
......@@ -34,7 +36,15 @@ const StationInfo = ({ setRightMenuContent, selectedStation }) => {
text={t('station-information')}
open={true}
>
<h1>Content</h1>
<div className="facts">
<div className="flex-item4">
<StationFacts station={selectedStation} viewAllFacts={true} />
</div>
<div className="flex-item2">
<div className="head">Current status</div>
<LegendInfo selectedStation={selectedStation} />
</div>
</div>
</Collapsible>
<Collapsible
divider
......@@ -50,7 +60,6 @@ const StationInfo = ({ setRightMenuContent, selectedStation }) => {
StationInfo.propTypes = {
setRightMenuContent: PropTypes.func,
test: PropTypes.string,
selectedStation: PropTypes.object,
};
......
source/src/compoonents/AirMap/SideMenu/index.js
View file @ 4290aeb0
......@@ -6,6 +6,7 @@ import AccessibleDrawer from '../../AccessibleDrawer';
import MenuItem from './MenuItem';
import './SideMenu.css';
import { SELECTED_POLLUTANT, LANGUAGE_MAP } from '../../../utils/enums';
import { appendSelectedPollutant } from '../../../utils/funcs';
import { materialButtonStyle } from '../../../utils/styles';
import Button from '@material-ui/core/Button';
import MenuIcon from '@material-ui/icons/Menu';
......@@ -28,6 +29,8 @@ const SideMenu = ({
setOpen,
setSelectedPollutant,
selectedPollutant,
selectedStation,
setSelectedStation,
}) => {
const globalContext = useContext(AppContext);
const { t } = useTranslation();
......@@ -43,6 +46,14 @@ const SideMenu = ({
setOpen(!open);
};
const handlePollutantClick = (pollutant) => {
setSelectedPollutant(pollutant);
const station = appendSelectedPollutant(selectedStation, pollutant);
setSelectedStation(station);
closePanel();
buttonRef.current.focus();
};
const pollutants = Object.keys(SELECTED_POLLUTANT);
return (
......@@ -87,11 +98,7 @@ const SideMenu = ({
key={i}
divider={pollutants.length === i + 1}
text={pollutant}
onClick={() => {
setSelectedPollutant(pollutant);
closePanel();
buttonRef.current.focus();
}}
onClick={() => handlePollutantClick(pollutant)}
selected={pollutant === selectedPollutant}
indent
/>
......@@ -133,6 +140,8 @@ SideMenu.propTypes = {
open: PropTypes.bool,
setSelectedPollutant: PropTypes.func,
selectedPollutant: PropTypes.string,
selectedStation: PropTypes.object,
setSelectedStation: PropTypes.func,
};
export default SideMenu;
source/src/compoonents/AirMap/StationCircleMarker.js
View file @ 4290aeb0
......@@ -9,9 +9,10 @@ import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
import { SELECTED_POLLUTANT } from '../../utils/enums';
import { RIGHT_MENU_CONTENT } from '../../utils/enums';
import PollutantList from './PollutantList';
import { useTranslation } from 'react-i18next';
import StationFacts from './StationFacts';
import { Button } from '@aurora/widgets-react';
import { DatabaseOutline24 } from '@aurora/icons-react';
import { useTranslation } from 'react-i18next';
delete L.Icon.Default.prototype._getIconUrl;
......@@ -39,17 +40,15 @@ const StationCircleMarker = ({
(x) => x.pollutantnotation === selectedPollutant
)[0];
pollutant = p;
} else {
pollutant = station.maxPollutant;
}
const pollutantColor =
selectedPollutant === SELECTED_POLLUTANT.AQI
? `${station.maxPollutant.meta.colorClass}`
: `${pollutant.meta.colorClass}`;
const pollutantLevel =