Skip to content

Commit

Permalink
add critical filter, print button and neighbor layer
Browse files Browse the repository at this point in the history
  • Loading branch information
@gurdenbatra
gurdenbatra committed Jun 28, 2024
1 parent 6442875 commit 16c7cb6
Show file tree
Hide file tree
Showing 9 changed files with 418 additions and 55 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react-swc": "^3.5.0",
"@watergis/mapbox-gl-export": "^3.5.1",
"autoprefixer": "^10.4.18",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
Expand Down
9 changes: 9 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,3 +83,12 @@ html {
height: 100vh;
z-index: 10;
}

.mapboxgl-ctrl-geocoder--input {
padding-left: 26px !important;
}

.mapboxgl-export-list {
position: relative;
z-index: 90 !important;
}
13 changes: 13 additions & 0 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState } from "react";
import { ArrowRightCircleIcon } from "@heroicons/react/24/outline";
import "@watergis/mapbox-gl-export/dist/mapbox-gl-export.css";

import "./App.css";
import NavBar from "./components/NavBar";
Expand All @@ -13,7 +14,9 @@ export default function App() {
const [topo, setTopo] = useState(false);
const [cityTrees, setCityTrees] = useState(false);
const [aIndex, setAIndex] = useState(false);
const [neighbors, setNeighbors] = useState(false);
const [activeHazard, setActiveHazard] = useState(0);
const [onlyCritical, setOnlyCritical] = useState(false);

// TODO: Move this to util
const [currentGrid, setCurrentGrid] = useState({
Expand Down Expand Up @@ -78,6 +81,8 @@ export default function App() {
show={showInfoPanel}
setShowPanel={setShowInfoPanel}
currentGrid={currentGrid}
onlyCritical={onlyCritical}
setOnlyCritical={setOnlyCritical}
/>
<LayerSelector
raster={raster}
Expand All @@ -88,6 +93,8 @@ export default function App() {
setCityTrees={setCityTrees}
aIndex={aIndex}
setAIndex={setAIndex}
neighbors={neighbors}
setNeighbors={setNeighbors}
/>
</div>
<LBSMap
Expand All @@ -98,6 +105,8 @@ export default function App() {
cityTrees={cityTrees}
risk={showInfoPanel}
aIndex={aIndex}
neighbors={neighbors}
onlyCritical={onlyCritical}
/>
</div>
) : (
Expand All @@ -123,6 +132,8 @@ export default function App() {
setCityTrees={setCityTrees}
aIndex={aIndex}
setAIndex={setAIndex}
neighbors={neighbors}
setNeighbors={setNeighbors}
/>
</div>
<LBSMap
Expand All @@ -133,6 +144,8 @@ export default function App() {
cityTrees={cityTrees}
risk={showInfoPanel}
aIndex={aIndex}
neighbors={neighbors}
onlyCritical={onlyCritical}
/>
</div>
)}
Expand Down
Binary file modified src/assets/hitze_card.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
184 changes: 176 additions & 8 deletions src/components/InfoPanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Fragment, useState } from "react";
import { ArrowLeftCircleIcon } from "@heroicons/react/24/outline";
import { Transition } from "@headlessui/react";
import PropTypes from "prop-types";
import { Switch } from "@headlessui/react";

import RiskRadar from "./RadarChart";
import heatCard from "../assets/heat_card.png";
Expand Down Expand Up @@ -108,11 +109,39 @@ export default function InfoPanel(props) {
<div className="px-4 pt-4">
{currentRisk === 0 ? (
<>
<h2>Gesamtrisikobewertung</h2>
<p className="book-info-sm">
Klicken Sie bitte auf ein Rasterfeld auf der Karte, um Details
anzuzeigen.
</p>
<div className="flex justify-between items-center">
<div>
<h2>Gesamtrisikobewertung</h2>
<p className="book-info-sm">
Klicken Sie bitte auf ein Rasterfeld auf der Karte, um
Details anzuzeigen.
</p>
</div>
<div>
<span className="pr-2 book-info-sm ">alle Daten</span>
<Switch
checked={props.onlyCritical}
onChange={props.setOnlyCritical}
className={classNames(
props.onlyCritical ? "bg-green-600" : "bg-gray-200",
"justify-self-end relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-1 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2",
)}
>
<span className="sr-only">Critical or all</span>
<span
aria-hidden="true"
className={classNames(
props.onlyCritical
? "translate-x-5"
: "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
<span className="pl-2 book-info-sm">nur kritisch</span>
</div>
</div>

<div className="grid grid-cols-2 border-t border-t-green-600 my-4">
<div className="pt-2 border-r border-r-green-600">
<span className="book-info-sm ">LEGENDE</span>
Expand Down Expand Up @@ -300,7 +329,34 @@ export default function InfoPanel(props) {
</>
) : currentRisk === 1 ? (
<>
<h2>Wirkungskette</h2>
<div className="flex justify-between items-center pb-2">
<div>
<h2>Wirkungskette</h2>
</div>
<div>
<span className="pr-2 book-info-sm ">alle Daten</span>
<Switch
checked={props.onlyCritical}
onChange={props.setOnlyCritical}
className={classNames(
props.onlyCritical ? "bg-green-600" : "bg-gray-200",
"justify-self-end relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-1 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2",
)}
>
<span className="sr-only">Critical or all</span>
<span
aria-hidden="true"
className={classNames(
props.onlyCritical
? "translate-x-5"
: "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
<span className="pl-2 book-info-sm">nur kritisch</span>
</div>
</div>
<img src={heatCard} />
<div className="flex border-t border-t-green-600 mt-4">
<div className="pt-2 border-r border-r-green-600">
Expand Down Expand Up @@ -492,7 +548,34 @@ export default function InfoPanel(props) {
</>
) : currentRisk === 2 ? (
<>
<h2>Wirkungskette</h2>
<div className="flex justify-between items-center pb-2">
<div>
<h2>Wirkungskette</h2>
</div>
<div>
<span className="pr-2 book-info-sm ">alle Daten</span>
<Switch
checked={props.onlyCritical}
onChange={props.setOnlyCritical}
className={classNames(
props.onlyCritical ? "bg-green-600" : "bg-gray-200",
"justify-self-end relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-1 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2",
)}
>
<span className="sr-only">Critical or all</span>
<span
aria-hidden="true"
className={classNames(
props.onlyCritical
? "translate-x-5"
: "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
<span className="pl-2 book-info-sm">nur kritisch</span>
</div>
</div>
<img src={hitzeCard} />
<div className="flex border-t border-t-green-600 mt-4">
<div className="pt-2 border-r border-r-green-600">
Expand Down Expand Up @@ -739,7 +822,34 @@ export default function InfoPanel(props) {
</>
) : currentRisk === 3 ? (
<>
<h2>Wirkungskette</h2>
<div className="flex justify-between items-center pb-2">
<div>
<h2>Wirkungskette</h2>
</div>
<div>
<span className="pr-2 book-info-sm ">alle Daten</span>
<Switch
checked={props.onlyCritical}
onChange={props.setOnlyCritical}
className={classNames(
props.onlyCritical ? "bg-green-600" : "bg-gray-200",
"justify-self-end relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-1 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2",
)}
>
<span className="sr-only">Critical or all</span>
<span
aria-hidden="true"
className={classNames(
props.onlyCritical
? "translate-x-5"
: "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
<span className="pl-2 book-info-sm">nur kritisch</span>
</div>
</div>
<img src={luftCard} />
<div className="flex border-t border-t-green-600 mt-4">
<div className="pt-2 border-r border-r-green-600">
Expand Down Expand Up @@ -943,6 +1053,34 @@ export default function InfoPanel(props) {
</>
) : currentRisk === 4 ? (
<>
<div className="flex justify-between items-center pb-2">
<div>
<h2>Wirkungskette</h2>
</div>
<div>
<span className="pr-2 book-info-sm ">alle Daten</span>
<Switch
checked={props.onlyCritical}
onChange={props.setOnlyCritical}
className={classNames(
props.onlyCritical ? "bg-green-600" : "bg-gray-200",
"justify-self-end relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-1 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2",
)}
>
<span className="sr-only">Critical or all</span>
<span
aria-hidden="true"
className={classNames(
props.onlyCritical
? "translate-x-5"
: "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
<span className="pl-2 book-info-sm">nur kritisch</span>
</div>
</div>
<div className="flex">
<h2
className={classNames(
Expand Down Expand Up @@ -1186,6 +1324,34 @@ export default function InfoPanel(props) {
</>
) : currentRisk === 5 ? (
<>
<div className="flex justify-between items-center pb-2">
<div>
<h2>Wirkungskette</h2>
</div>
<div>
<span className="pr-2 book-info-sm ">alle Daten</span>
<Switch
checked={props.onlyCritical}
onChange={props.setOnlyCritical}
className={classNames(
props.onlyCritical ? "bg-green-600" : "bg-gray-200",
"justify-self-end relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-1 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2",
)}
>
<span className="sr-only">Critical or all</span>
<span
aria-hidden="true"
className={classNames(
props.onlyCritical
? "translate-x-5"
: "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
)}
/>
</Switch>
<span className="pl-2 book-info-sm">nur kritisch</span>
</div>
</div>
<div className="flex">
<h2
className={classNames(
Expand Down Expand Up @@ -1443,4 +1609,6 @@ InfoPanel.propTypes = {
setActiveHazard: PropTypes.func,
activeHazard: PropTypes.number,
currentGrid: PropTypes.object,
onlyCritical: PropTypes.bool,
setOnlyCritical: PropTypes.func,
};
21 changes: 20 additions & 1 deletion src/components/LayerSelector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ export default function InfoPanel({
setCityTrees,
aIndex,
setAIndex,
neighbors,
setNeighbors,
}) {
return (
<Transition.Root
show={true}
as={Fragment}
className="mt-56 justify-self-end z-10"
className="mt-[24rem] justify-self-end z-10"
>
<Transition.Child
enter="transform transition ease-in-out duration-500 sm:duration-700"
Expand Down Expand Up @@ -125,6 +127,21 @@ export default function InfoPanel({
{" "}
</button>
</div>
<div className="flex justify-center items-center my-2">
<span className="text-green-600 book-info-sm">Stadbezirk</span>
<button
type="button"
onClick={() => {
setNeighbors(!neighbors);
}}
className={classNames(
neighbors ? "bg-green-600" : "bg-dark-wood-700",
"bold-intro-sm inline-flex justify-center rounded-full border border-transparent py-4 px-4 border-white ml-2",
)}
>
{" "}
</button>
</div>
</div>
</div>
</Transition.Child>
Expand All @@ -141,4 +158,6 @@ InfoPanel.propTypes = {
setCityTrees: PropTypes.func,
aIndex: PropTypes.bool,
setAIndex: PropTypes.func,
neighbors: PropTypes.bool,
setNeighbors: PropTypes.func,
};
Loading

0 comments on commit 16c7cb6

Please sign in to comment.