Commit a3abc9c4 authored by Tim Sollbach's avatar Tim Sollbach Committed by Tim

feat: added control implementations for day and toggle

parent 1166fcc0
import React, { FC, useState } from 'react'
// import { IoIosArrowBack } from "react-icons/io";
import { AutoSearchBox } from '../../../components'
import { Row, Col } from 'react-flexbox-grid'
import Select from 'react-select'
import Switch from 'react-switch'
import 'rc-slider/assets/index.css'
import Slider from 'rc-slider'
import { AutoSearchBox } from '../../../components'
import './ControlPanel.scss'
interface ControlPanelProps {}
export enum CapacityType {
lc,
hc,
ecmo,
}
export interface ControlProps {
showInfections: boolean
showCapacity: boolean
capacityType: CapacityType
predictionDay: number
}
interface ControlPanelProps {
controlProps: ControlProps
onChange: (controlProps: ControlProps) => void
}
interface CapacityType {
value: string | number
interface CapacityOptionType {
value: CapacityType
label: string
}
const capacityTypes: Array<CapacityType> = [
{ value: 'lc', label: 'Low care (nicht-invasive Beatmung (NIV), keine Organersatztherapie)' },
const capacityTypes: Array<CapacityOptionType> = [
{ value: CapacityType.lc, label: 'Low care (nicht-invasive Beatmung (NIV), keine Organersatztherapie)' },
{
value: 'hc',
value: CapacityType.hc,
label: 'High care (invasive Beatmung, Organersatztherapie, vollständige intensivmedizinische Therapiemöglichkeiten)',
},
{ value: 'ecmo', label: 'ECMO (Zusätzlich ECMO / Lungenunterstützung)' },
{ value: CapacityType.ecmo, label: 'ECMO (Zusätzlich ECMO / Lungenunterstützung)' },
]
export const ControlPanel: FC<ControlPanelProps> = props => {
export const ControlPanel: FC<ControlPanelProps> = ({ controlProps, onChange }) => {
const [selectedRegion, setSelectedRegion] = useState<string>('')
const [predictionPeriode, setPredictionPeriode] = useState(0)
const [capacityType, setCapacityType] = useState<CapacityType>(capacityTypes[1])
const [showCapacity, setShowCapacity] = useState(controlProps.showCapacity)
const [showInfections, setShowInfections] = useState(controlProps.showInfections)
const [predictionPeriode, setPredictionPeriode] = useState(controlProps.predictionDay)
const [capacityType, setCapacityType] = useState<CapacityOptionType>(
capacityTypes.find((c) => c.value === controlProps.capacityType) || capacityTypes[0]
)
const onChangeShowCapacity = (checked: boolean) => {
setShowCapacity(checked)
onChange({
...controlProps,
showCapacity: checked,
})
}
const onChangeShowInfections = (checked: boolean) => {
setShowInfections(checked)
onChange({
...controlProps,
showInfections: checked,
})
}
const handlePredictionSlider = (predictionPeriode: number): void => {
setPredictionPeriode(predictionPeriode)
const handlePredictionSlider = (newPredictionDay: number): void => {
setPredictionPeriode(newPredictionDay)
onChange({
...controlProps,
predictionDay: newPredictionDay,
})
}
const handleAccuracy = (predictionPeriode: number): JSX.Element => {
......@@ -50,7 +88,7 @@ export const ControlPanel: FC<ControlPanelProps> = props => {
const generateRangeLabels = (maxValue: number): Array<string> => {
return Array(maxValue + 1)
.fill(null)
.map((x, i) => {
.map((_, i) => {
return i === 0 ? 'Heute' : i.toString()
})
}
......@@ -63,7 +101,7 @@ export const ControlPanel: FC<ControlPanelProps> = props => {
<div className="control-panel">
<AutoSearchBox
value={selectedRegion}
onChange={region => setSelectedRegion(region)}
onChange={(region) => setSelectedRegion(region)}
resetInput={() => setSelectedRegion('')}
className="search-box"
/>
......@@ -81,7 +119,7 @@ export const ControlPanel: FC<ControlPanelProps> = props => {
<Row middle="xs" between="xs" className="control-panel-row">
<Col>Auf Karte zeigen</Col>
<Col>
<Switch onChange={() => {}} checked={true} className="react-switch" />
<Switch onChange={onChangeShowInfections} checked={showInfections} className="react-switch" />
</Col>
</Row>
</Col>
......@@ -99,7 +137,7 @@ export const ControlPanel: FC<ControlPanelProps> = props => {
<Row middle="xs" between="xs" className="control-panel-row">
<Col>Auf Karte zeigen </Col>
<Col>
<Switch onChange={() => {}} checked={true} className="react-switch" />
<Switch onChange={onChangeShowCapacity} checked={showCapacity} className="react-switch" />
</Col>
</Row>
</Col>
......@@ -128,8 +166,8 @@ export const ControlPanel: FC<ControlPanelProps> = props => {
onChange={handlePredictionSlider}
step={1}
dots
max={10}
marks={generateRangeLabels(10)}
max={9}
marks={generateRangeLabels(9)}
/>
</Col>
</Row>
......
......@@ -17,7 +17,7 @@ import {
} from './settings'
import { getElementWidth, getElementHeight, isGeoJSONSource } from './utils'
import { ControlPanel } from './ControlPanel/ControlPanel'
import { ControlPanel, ControlProps, CapacityType } from './ControlPanel/ControlPanel'
import diviData from './__fixtures__/divi.json'
import predictionData from './__fixtures__/prediction.json'
......@@ -27,6 +27,12 @@ import './Map.scss'
* Displays fullscreen map from react-map-gl.
*/
export const Map: FC = () => {
const [controlState, setControlState] = useState<ControlProps>({
showInfections: true,
showCapacity: true,
capacityType: CapacityType.lc,
predictionDay: 0,
})
const sourceRef = useRef<MapType>(null)
const containerRef = useRef(null)
const [viewport, setViewport] = useState<InteractiveMapProps>({
......@@ -82,7 +88,7 @@ export const Map: FC = () => {
[viewport]
)
const predictionSettings = getPredictionSettings(9)
const predictionSettings = getPredictionSettings(controlState.predictionDay)
return (
<div ref={containerRef} className="mapContainer">
......@@ -93,34 +99,38 @@ export const Map: FC = () => {
interactiveLayerIds={[clusterLayer.id!]}
onClick={onClick}
>
<Source
id={THREAT_SOURCE_ID}
type="geojson"
data={diviData as FeatureCollection}
cluster={true}
clusterMaxZoom={12}
clusterRadius={40}
clusterProperties={clusterProperties}
ref={sourceRef as any}
>
<Layer {...clusterLayer} />
<Layer {...pointLayer} />
</Source>
<Source
id={PREDICTION_SOURCE_ID}
type="geojson"
data={predictionData as FeatureCollection}
cluster={true}
clusterMaxZoom={12}
clusterRadius={30}
clusterProperties={predictionSettings.clusterProperties}
ref={sourceRef as any}
>
<Layer {...predictionSettings.clusterLayer} />
<Layer {...predictionSettings.pointLayer} />
</Source>
{controlState.showCapacity && (
<Source
id={THREAT_SOURCE_ID}
type="geojson"
data={diviData as FeatureCollection}
cluster={true}
clusterMaxZoom={12}
clusterRadius={40}
clusterProperties={clusterProperties}
ref={sourceRef as any}
>
<Layer {...clusterLayer} />
<Layer {...pointLayer} />
</Source>
)}
{controlState.showInfections && (
<Source
id={PREDICTION_SOURCE_ID}
type="geojson"
data={predictionData as FeatureCollection}
cluster={true}
clusterMaxZoom={12}
clusterRadius={30}
clusterProperties={predictionSettings.clusterProperties}
ref={sourceRef as any}
>
<Layer {...predictionSettings.clusterLayer} />
<Layer {...predictionSettings.pointLayer} />
</Source>
)}
</ReactMapGL>
<ControlPanel />
<ControlPanel controlProps={controlState} onChange={setControlState} />
</div>
)
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment