From d062f925610d09ea39df7b5dc56240ce257e8de9 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 30 Mar 2023 15:01:41 +0200 Subject: [PATCH 01/33] add Mobile and Desktop Pages --- src/pages/DesktopPage.tsx | 23 +++++++++++++++++++++++ src/pages/MobilePage.tsx | 23 +++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 src/pages/DesktopPage.tsx create mode 100644 src/pages/MobilePage.tsx diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx new file mode 100644 index 0000000..6cee6ae --- /dev/null +++ b/src/pages/DesktopPage.tsx @@ -0,0 +1,23 @@ +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, +} from "@ionic/react"; +import React from "react"; + +const DesktopPage: React.FC = () => { + return ( + + + + Desktop Page + + + UI goes here... + + ); +}; + +export default DesktopPage; diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx new file mode 100644 index 0000000..83f1164 --- /dev/null +++ b/src/pages/MobilePage.tsx @@ -0,0 +1,23 @@ +import { + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, +} from "@ionic/react"; +import React from "react"; + +const MobilePage: React.FC = () => { + return ( + + + + Mobile Page + + + UI goes here... + + ); +}; + +export default MobilePage; From 56ceed903b3b84b9cc4e98e9e697f1173ee841b2 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 31 Mar 2023 13:57:31 +0200 Subject: [PATCH 02/33] adding mobile and Desktop Navigation --- src/App.tsx | 50 +++++++++-------- src/DesktopNavigation.tsx | 109 ++++++++++++++++++++++---------------- src/MobileNavigation.tsx | 38 +++++++++++++ 3 files changed, 130 insertions(+), 67 deletions(-) create mode 100644 src/MobileNavigation.tsx diff --git a/src/App.tsx b/src/App.tsx index 0a0f9bc..d980a15 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,42 @@ -import {IonApp, IonGrid, IonRow, IonSpinner, setupIonicReact} from '@ionic/react'; +import { + IonApp, + IonGrid, + IonRow, + IonSpinner, + setupIonicReact, +} from "@ionic/react"; /* Core CSS required for Ionic components to work properly */ -import '@ionic/react/css/core.css'; +import "@ionic/react/css/core.css"; /* Basic CSS for apps built with Ionic */ -import '@ionic/react/css/normalize.css'; -import '@ionic/react/css/structure.css'; -import '@ionic/react/css/typography.css'; +import "@ionic/react/css/normalize.css"; +import "@ionic/react/css/structure.css"; +import "@ionic/react/css/typography.css"; /* Optional CSS utils that can be commented out */ -import '@ionic/react/css/padding.css'; -import '@ionic/react/css/float-elements.css'; -import '@ionic/react/css/text-alignment.css'; -import '@ionic/react/css/text-transformation.css'; -import '@ionic/react/css/flex-utils.css'; -import '@ionic/react/css/display.css'; +import "@ionic/react/css/padding.css"; +import "@ionic/react/css/float-elements.css"; +import "@ionic/react/css/text-alignment.css"; +import "@ionic/react/css/text-transformation.css"; +import "@ionic/react/css/flex-utils.css"; +import "@ionic/react/css/display.css"; /* Theme variables */ -import './theme/variables.css'; +import "./theme/variables.css"; // import application wide Navigation -import DesktopNavigation from './DesktopNavigation'; -import MobileNavigation from './DesktopNavigation'; -import { useSettings } from './context/settings'; +import DesktopNavigation from "./DesktopNavigation"; +import MobileNavigation from "./MobileNavigation"; +import { useSettings } from "./context/settings"; setupIonicReact(); const App: React.FC = () => { // get the screenSize from settings context const { screenSize } = useSettings(); - + // console.log("screenSize", screenSize); + // if screenSize is still undefined return IonGrid with centered IonSpinner if (!screenSize) { return ( @@ -40,14 +47,15 @@ const App: React.FC = () => { - ) + ); } // return MobileNavigation if the screenSize is smaller than md return ( - - { screenSize?.width < 768 ? : } - -)}; + + {screenSize?.width < 768 ? : } + + ); +}; export default App; diff --git a/src/DesktopNavigation.tsx b/src/DesktopNavigation.tsx index 60d07d8..79d9049 100644 --- a/src/DesktopNavigation.tsx +++ b/src/DesktopNavigation.tsx @@ -21,58 +21,75 @@ import TreeOverviewPage from "./pages/TreeOverviewPage"; import InventoryListPage from "./pages/InventoryListPage"; import MapPage from "./pages/MapPage"; import SettingsPage from "./pages/SettingsPage"; +import DesktopPage from "./pages/DesktopPage"; -const MainTabs: React.FC = () => { +const MobileNavigation: React.FC = () => { + console.log("Running Desktop Navigation"); return ( - + - - - - - - + + + - - - Map - - - - List - - - - - ); -}; - -const SplitPaneNavigation: React.FC = () => { - return ( - - - - - - Data Layer - - - - - - - - - - - - - - - ); }; -export default SplitPaneNavigation; +export default MobileNavigation; + +// const MainTabs: React.FC = () => { +// return ( +// +// +// +// +// +// +// +// +// +// +// +// +// Map +// +// +// +// List +// +// +// +// +// ); +// }; + +// const SplitPaneNavigation: React.FC = () => { +// return ( +// +// +// +// +// +// Data Layer +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// ); +// }; + +// export default SplitPaneNavigation; diff --git a/src/MobileNavigation.tsx b/src/MobileNavigation.tsx new file mode 100644 index 0000000..c9113aa --- /dev/null +++ b/src/MobileNavigation.tsx @@ -0,0 +1,38 @@ +import { + IonContent, + IonHeader, + IonPage, + IonRouterOutlet, + IonTitle, + IonToolbar, +} from "@ionic/react"; +import { IonReactRouter } from "@ionic/react-router"; +import React from "react"; +import { Redirect, Route } from "react-router"; +import InventoryListPage from "./pages/InventoryListPage"; +import MapPage from "./pages/MapPage"; +import SettingsPage from "./pages/SettingsPage"; +import TreeOverviewPage from "./pages/TreeOverviewPage"; + +const MobileNavigation: React.FC = () => { + console.log("Running Mobile Navigation"); + return ( + + + + + + + + + + + + + + + + ); +}; + +export default MobileNavigation; From 125488b47a0da4818e8124f188132c52fe116ae2 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 31 Mar 2023 13:58:56 +0200 Subject: [PATCH 03/33] build DesktopPage --- src/pages/DesktopPage.tsx | 48 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 6cee6ae..8a338ec 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -1,21 +1,65 @@ import { + IonButton, + IonButtons, + IonCol, IonContent, + IonFab, + IonFabButton, + IonGrid, IonHeader, + IonIcon, + IonMenu, + IonMenuButton, + IonMenuToggle, IonPage, + IonPopover, + IonRow, IonTitle, IonToolbar, } from "@ionic/react"; +import { layers, map, settingsOutline } from "ionicons/icons"; import React from "react"; +import InventoryList from "../components/InventoryList"; +import MainMap from "../components/MainMapMaplibre"; +import { BaseLayerPopover } from "../components/BaseLayerSelector"; + +// import "./DesktopPage.css"; const DesktopPage: React.FC = () => { return ( - Desktop Page + + + + + + Mathislewald - UI goes here... + + + + + + + + + +
+ + + +
+ + + + + + + + ); }; From ba0945d62ece9df66d316987ce97349ccddd5f86 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 31 Mar 2023 13:59:17 +0200 Subject: [PATCH 04/33] adjust InventoryList --- src/pages/InventoryListPage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/pages/InventoryListPage.tsx b/src/pages/InventoryListPage.tsx index 9584710..2b6e6eb 100644 --- a/src/pages/InventoryListPage.tsx +++ b/src/pages/InventoryListPage.tsx @@ -1,6 +1,8 @@ import { IonButtons, IonContent, + IonFab, + IonFabButton, IonHeader, IonIcon, IonMenuButton, @@ -8,7 +10,7 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { layers } from "ionicons/icons"; +import { layers, listSharp, map } from "ionicons/icons"; import React from "react"; import InventoryList from "../components/InventoryList"; @@ -27,6 +29,11 @@ const InventoryListPage: React.FC = () => { + + + + + ); From 3ffa5132dc1501c9aaa8aad7bceb3d3d71fd95a4 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 31 Mar 2023 13:59:33 +0200 Subject: [PATCH 05/33] adjust base layer selection --- src/components/BaseLayerSelector.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/BaseLayerSelector.tsx b/src/components/BaseLayerSelector.tsx index 8cb1ac8..6a94f7e 100644 --- a/src/components/BaseLayerSelector.tsx +++ b/src/components/BaseLayerSelector.tsx @@ -250,8 +250,6 @@ export const BaseLayerPopover: React.FC = () => { style={{ "--offset-y": "-10px" }} >
- {/* */} -
From d3ef153b4d1f626eea74f7814584d1f9300966b8 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 31 Mar 2023 13:59:39 +0200 Subject: [PATCH 06/33] adjust map --- src/pages/MapPage.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx index 60b13e7..b4f3525 100644 --- a/src/pages/MapPage.tsx +++ b/src/pages/MapPage.tsx @@ -11,7 +11,7 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { layers, map, settings, settingsOutline } from "ionicons/icons"; +import { layers, listSharp, map, settingsOutline } from "ionicons/icons"; import { useRef } from "react"; import MainMap from "../components/MainMapMaplibre"; @@ -21,13 +21,13 @@ import { } from "../components/BaseLayerSelector"; import "./MapPage.css"; -const MapButton: React.FC = () => { - return ( - - - - ); -}; +// const MapButton: React.FC = () => { +// return ( +// +// +// +// ); +// }; const MapPage: React.FC = () => { const modal = useRef(null); @@ -48,13 +48,17 @@ const MapPage: React.FC = () => { Mathislewald - + + + + + {window.innerWidth > 768 ? ( From b4f6447cda416df68c19d8be9aadb7718286acfb Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 31 Mar 2023 13:59:47 +0200 Subject: [PATCH 07/33] delete mobile page --- src/pages/MobilePage.tsx | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 src/pages/MobilePage.tsx diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx deleted file mode 100644 index 83f1164..0000000 --- a/src/pages/MobilePage.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { - IonContent, - IonHeader, - IonPage, - IonTitle, - IonToolbar, -} from "@ionic/react"; -import React from "react"; - -const MobilePage: React.FC = () => { - return ( - - - - Mobile Page - - - UI goes here... - - ); -}; - -export default MobilePage; From 649856a5328e057550ef1cfd32f99b02502c723d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mirko=20M=C3=A4licke?= Date: Sun, 2 Apr 2023 17:22:11 +0200 Subject: [PATCH 08/33] implemt TreeDetails using navigation --- src/DesktopNavigation.tsx | 6 ++---- src/pages/DesktopPage.tsx | 32 ++++++++++++++++++++++++++++---- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/DesktopNavigation.tsx b/src/DesktopNavigation.tsx index 79d9049..036be12 100644 --- a/src/DesktopNavigation.tsx +++ b/src/DesktopNavigation.tsx @@ -28,10 +28,8 @@ const MobileNavigation: React.FC = () => { return ( - - - - + + ); diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 8a338ec..165f448 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -1,6 +1,9 @@ import { IonButton, IonButtons, + IonCard, + IonCardContent, + IonCardHeader, IonCol, IonContent, IonFab, @@ -13,6 +16,7 @@ import { IonMenuToggle, IonPage, IonPopover, + IonRouterOutlet, IonRow, IonTitle, IonToolbar, @@ -22,10 +26,14 @@ import React from "react"; import InventoryList from "../components/InventoryList"; import MainMap from "../components/MainMapMaplibre"; import { BaseLayerPopover } from "../components/BaseLayerSelector"; +import { Route, RouteComponentProps } from "react-router"; +import TreeOverviewPage from "./TreeOverviewPage"; +import TreeDetails from "../components/TreeDetails"; // import "./DesktopPage.css"; -const DesktopPage: React.FC = () => { +const DesktopPage: React.FC> = ({ match }) => { + console.log(match) return ( @@ -47,15 +55,31 @@ const DesktopPage: React.FC = () => { -
- +
+ {/* */} - + {/* */}
+ + {match.url.startsWith('/list/') ? ( + + + + + CLOSE + + + + + + + + ) : null} + From 4931923239f1b680deeb6448a422ba74ccaf5b06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mirko=20M=C3=A4licke?= Date: Mon, 3 Apr 2023 08:23:33 +0200 Subject: [PATCH 09/33] use react-router directly --- src/DesktopNavigation.tsx | 15 ++++++++----- src/pages/DesktopPage.tsx | 45 ++++++++++++++++++++++++--------------- 2 files changed, 38 insertions(+), 22 deletions(-) diff --git a/src/DesktopNavigation.tsx b/src/DesktopNavigation.tsx index 036be12..505bd07 100644 --- a/src/DesktopNavigation.tsx +++ b/src/DesktopNavigation.tsx @@ -27,12 +27,17 @@ const MobileNavigation: React.FC = () => { console.log("Running Desktop Navigation"); return ( - - - - + - ); + ) + // return ( + // + // + // + // {/* */} + // + // + // ); }; export default MobileNavigation; diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 165f448..bc1194e 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -26,14 +26,15 @@ import React from "react"; import InventoryList from "../components/InventoryList"; import MainMap from "../components/MainMapMaplibre"; import { BaseLayerPopover } from "../components/BaseLayerSelector"; -import { Route, RouteComponentProps } from "react-router"; +import { Route, RouteComponentProps, Switch } from "react-router"; import TreeOverviewPage from "./TreeOverviewPage"; import TreeDetails from "../components/TreeDetails"; // import "./DesktopPage.css"; -const DesktopPage: React.FC> = ({ match }) => { - console.log(match) +//const DesktopPage: React.FC> = ({ match }) => { +const DesktopPage: React.FC = () => { + //console.log(match) return ( @@ -65,20 +66,30 @@ const DesktopPage: React.FC> = ({ match }) => - {match.url.startsWith('/list/') ? ( - - - - - CLOSE - - - - - - - - ) : null} + {/* {match.url.startsWith('/list/') ? ( */} + + + ( + + + + + CLOSE + + + + + + + + )} /> + + + <> + + + + {/* ) : null} */} From 76389a02b6d8e042b2f0de1ad4b0a604c4716c84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mirko=20M=C3=A4licke?= Date: Mon, 3 Apr 2023 08:28:11 +0200 Subject: [PATCH 10/33] cleanup --- src/DesktopNavigation.tsx | 9 +-------- src/pages/DesktopPage.tsx | 8 -------- 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/src/DesktopNavigation.tsx b/src/DesktopNavigation.tsx index 505bd07..b6e38bd 100644 --- a/src/DesktopNavigation.tsx +++ b/src/DesktopNavigation.tsx @@ -30,14 +30,7 @@ const MobileNavigation: React.FC = () => { ) - // return ( - // - // - // - // {/* */} - // - // - // ); + }; export default MobileNavigation; diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index bc1194e..3d9f15e 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -27,14 +27,10 @@ import InventoryList from "../components/InventoryList"; import MainMap from "../components/MainMapMaplibre"; import { BaseLayerPopover } from "../components/BaseLayerSelector"; import { Route, RouteComponentProps, Switch } from "react-router"; -import TreeOverviewPage from "./TreeOverviewPage"; import TreeDetails from "../components/TreeDetails"; -// import "./DesktopPage.css"; -//const DesktopPage: React.FC> = ({ match }) => { const DesktopPage: React.FC = () => { - //console.log(match) return ( @@ -57,16 +53,13 @@ const DesktopPage: React.FC = () => {
- {/* */} - {/* */}
- {/* {match.url.startsWith('/list/') ? ( */} ( @@ -89,7 +82,6 @@ const DesktopPage: React.FC = () => { - {/* ) : null} */} From 3c79137b01ca68f15dd1c53d02e7f35eb0def2cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mirko=20M=C3=A4licke?= Date: Mon, 3 Apr 2023 08:47:27 +0200 Subject: [PATCH 11/33] add Settings page to desktop navigation --- src/components/Settings.tsx | 112 ++++++++++++++++++++++++++++++++ src/pages/DesktopPage.tsx | 34 ++++++++-- src/pages/SettingsPage.tsx | 126 +----------------------------------- 3 files changed, 143 insertions(+), 129 deletions(-) create mode 100644 src/components/Settings.tsx diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx new file mode 100644 index 0000000..b289140 --- /dev/null +++ b/src/components/Settings.tsx @@ -0,0 +1,112 @@ +import { useState } from "react" + +import { IonAccordion, IonAccordionGroup, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonGrid, IonIcon, IonInput, IonItem, IonLabel, IonList, IonRow, IonSpinner, IonToggle } from "@ionic/react" +import { checkmark, close } from "ionicons/icons" + +import { useOffline } from "../context/offline" +import pack from '../../package.json'; +import { useSettings } from "../context/settings"; + +const Settings: React.FC = () => { + // load offline context + const { baselayers, localChecksums, remoteChecksums, status } = useOffline() + const settings = useSettings() + const [newUrl, setNewUrl] = useState(settings.serverUrl) + + return ( + + + + Application settings + + + Application version + v{ pack.version } + + + Backend status + { status } + { status === 'downloading' ? : } + + + Backend URL + setNewUrl(e.target.value as string)} /> + settings.changeBaseUrl(newUrl)}>SAVE + + + + + + Checksums + + + Checksum Inventory data + { localChecksums?.inventory } + + + + Checksum Image data + { localChecksums?.images } + + + + Checksum Baselayer data + { localChecksums?.baselayer } + + + + + + + Local baselayers cache +
+ + + { baselayers?.map(layer => ( + + + thumbnail + + {layer.title} + + + { layer.abstract } + + { Object.entries(layer.opt).map(([key, value]) => ( + + { key } + { value } + + )) } + + + + + )) } + + + CLEAR baselayer cache +
+ + + + Device position + + settings.positionEnabled ? settings.deactivatePosition() : settings.activatePosition() } style={{curser: 'pointer'}}> + enable GPS positioning + + + + Last position + { settings.position ? ( + Lon: {settings.position.coords.longitude} Lat: {settings.position.coords.latitude} + ) : (no GPS, or not activated)} + + + + + + ) +} + +export default Settings \ No newline at end of file diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 3d9f15e..718b14b 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -1,4 +1,5 @@ import { + IonBackButton, IonButton, IonButtons, IonCard, @@ -28,6 +29,7 @@ import MainMap from "../components/MainMapMaplibre"; import { BaseLayerPopover } from "../components/BaseLayerSelector"; import { Route, RouteComponentProps, Switch } from "react-router"; import TreeDetails from "../components/TreeDetails"; +import Settings from "../components/Settings"; const DesktopPage: React.FC = () => { @@ -61,14 +63,18 @@ const DesktopPage: React.FC = () => { - + + { /* Tree detail card */ } ( - + - - CLOSE - + + + + + CLOSE + @@ -77,10 +83,26 @@ const DesktopPage: React.FC = () => { )} /> + {/* Settings card */} + + + + + + CLOSE + + + + + + + + + <> - + diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx index 43cf974..bc11635 100644 --- a/src/pages/SettingsPage.tsx +++ b/src/pages/SettingsPage.tsx @@ -1,18 +1,8 @@ -import { useState } from "react" +import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/react" -import { IonAccordion, IonAccordionGroup, IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonPage, IonRow, IonSpinner, IonTitle, IonToggle, IonToolbar } from "@ionic/react" -import { checkmark, close } from "ionicons/icons" - -import { useOffline } from "../context/offline" -import pack from '../../package.json'; -import { useSettings } from "../context/settings"; +import Settings from "../components/Settings"; const SettingsPage: React.FC = () => { - // load offline context - const { baselayers, localChecksums, remoteChecksums, status } = useOffline() - const settings = useSettings() - const [newUrl, setNewUrl] = useState(settings.serverUrl) - return ( @@ -26,117 +16,7 @@ const SettingsPage: React.FC = () => { - - - - Application settings - - - Application version - v{ pack.version } - - - Backend status - { status } - { status === 'downloading' ? : } - - - Backend URL - setNewUrl(e.target.value as string)} /> - settings.changeBaseUrl(newUrl)}>SAVE - - - - - - Checksums - - - Checksum Inventory data - { localChecksums?.inventory } - - - - Checksum Image data - { localChecksums?.images } - - - - Checksum Baselayer data - { localChecksums?.baselayer } - - - - - - - Local baselayers cache -
- - - { baselayers?.map(layer => ( - - - thumbnail - - {layer.title} - - - { layer.abstract } - - { Object.entries(layer.opt).map(([key, value]) => ( - - { key } - { value } - - )) } - - - - - )) } - - - CLEAR baselayer cache -
- - - - Device position - - settings.positionEnabled ? settings.deactivatePosition() : settings.activatePosition() } style={{curser: 'pointer'}}> - enable GPS positioning - - - - Last position - { settings.position ? ( - Lon: {settings.position.coords.longitude} Lat: {settings.position.coords.latitude} - ) : (no GPS, or not activated)} - - - - - - - - - {/* - - - { imgs.map((img, idx) => ( - - preview - - )) } - - - - 
-                    
-                        { JSON.stringify(baselayers, null, 4) }
-                    
-
*/} + From 9f32fb67a1746f072a99ad40a3e62a870f5eb3ca Mon Sep 17 00:00:00 2001 From: JesJehle Date: Tue, 4 Apr 2023 12:03:11 +0200 Subject: [PATCH 12/33] using list instead of cards, add a add to bockmark button. --- src/components/InventoryList.css | 4 + src/components/InventoryList.tsx | 129 ++++++++++++++++++++----------- 2 files changed, 86 insertions(+), 47 deletions(-) create mode 100644 src/components/InventoryList.css diff --git a/src/components/InventoryList.css b/src/components/InventoryList.css new file mode 100644 index 0000000..3b36148 --- /dev/null +++ b/src/components/InventoryList.css @@ -0,0 +1,4 @@ +ion-thumbnail { + /* --size: 140px; */ + --border-radius: 14px; +} diff --git a/src/components/InventoryList.tsx b/src/components/InventoryList.tsx index f93875f..ef6cd13 100644 --- a/src/components/InventoryList.tsx +++ b/src/components/InventoryList.tsx @@ -1,4 +1,5 @@ import { + IonBadge, IonButton, IonCard, IonCardSubtitle, @@ -6,24 +7,30 @@ import { IonCol, IonGrid, IonIcon, + IonItem, IonLabel, + IonList, IonListHeader, IonRow, + IonThumbnail, } from "@ionic/react"; import { arrowForwardOutline, + bookmark, + bookmarkOutline, filterOutline, navigateOutline, } from "ionicons/icons"; import { useState } from "react"; import { useHistory } from "react-router"; -import distance from "@turf/distance" +import distance from "@turf/distance"; import { useData } from "../context/data"; import { useSettings } from "../context/settings"; import { InventoryFeature } from "../context/data.model"; +import "./InventoryList.css"; const InventoryList: React.FC = () => { const [hovered, setHovered] = useState(0); @@ -35,7 +42,7 @@ const InventoryList: React.FC = () => { const history = useHistory(); // get the current position from the Settings - const { positionEnabled, position } = useSettings() + const { positionEnabled, position } = useSettings(); const handleOnHover = (id: number) => { setHovered(id); @@ -48,20 +55,24 @@ const InventoryList: React.FC = () => { }; const distString = (feature: InventoryFeature) => { - if (!position) return ' - ' - const d = distance(feature.geometry.coordinates, [position.coords.longitude, position.coords.latitude], {units: 'meters'}) + if (!position) return " - "; + const d = distance( + feature.geometry.coordinates, + [position.coords.longitude, position.coords.latitude], + { units: "meters" } + ); if (d < 100) { - return `${d.toFixed(1)} m` + return `${d.toFixed(1)} m`; } if (d < 10000) { - return `${d.toFixed(0)} m` + return `${d.toFixed(0)} m`; } else { - return `${(d / 1000).toFixed(0)} km` + return `${(d / 1000).toFixed(0)} km`; } - } + }; return ( - <> + List View @@ -69,44 +80,38 @@ const InventoryList: React.FC = () => { - - {filteredInventory?.features.map((f) => { - return ( - - - - TREE ID - {f.properties.treeid} - - - { positionEnabled && position ? ( - - DISTANCE - - -   {distString(f)} - - - ) : null} - - - RADIUS - {f.properties.radius.toFixed(1)} - - - onNavigate(`/list/${f.properties.treeid}`)} - > - - - - - - ); - })} - - + {filteredInventory?.features.map((f) => { + return ( + onNavigate(`/list/${f.properties.treeid}`)} + > + + Silhouette of mountains + + +

ID: {f.properties.treeid}

+
+

{f.properties.height.toFixed(1)}

+

{""}m

+
+ {/* Height */} + + +

{distString(f)} away

+ + + + + + ); + })} + ); }; @@ -131,6 +136,36 @@ export default InventoryList; /* */ } +// +// +// +// TREE ID +// {f.properties.treeid} +// +// {positionEnabled && position ? ( +// +// DISTANCE +// +// +//   {distString(f)} +// +// +// ) : null} +// +// RADIUS +// {f.properties.radius.toFixed(1)} +// +// +// onNavigate(`/list/${f.properties.treeid}`)} +// > +// +// +// +// +// + // onNavigate(`/list/${f.i`}`)} From 2d6cf51389074da98e041f6ca0b4ca845f567ed2 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Tue, 4 Apr 2023 14:49:06 +0200 Subject: [PATCH 13/33] updating VisualMapSelection --- public/assets/{dem.png => dtm.png} | Bin src/components/BaseLayerSelector.tsx | 174 ++++-------------- src/components/InventoryList.tsx | 2 +- src/components/MapSelectionButton.tsx | 76 ++++++++ .../map-components/InventorySource.tsx | 76 ++++---- 5 files changed, 150 insertions(+), 178 deletions(-) rename public/assets/{dem.png => dtm.png} (100%) create mode 100644 src/components/MapSelectionButton.tsx diff --git a/public/assets/dem.png b/public/assets/dtm.png similarity index 100% rename from public/assets/dem.png rename to public/assets/dtm.png diff --git a/src/components/BaseLayerSelector.tsx b/src/components/BaseLayerSelector.tsx index 6a94f7e..a1d8a73 100644 --- a/src/components/BaseLayerSelector.tsx +++ b/src/components/BaseLayerSelector.tsx @@ -12,6 +12,7 @@ import { IonList, IonListHeader, IonModal, + IonNote, IonPopover, IonRadio, IonRadioGroup, @@ -24,160 +25,53 @@ import { close, layers } from "ionicons/icons"; import { useState } from "react"; import { useLayers } from "../context/layers"; // import "./BaseLayerSelector.css"; +import MapSelectionButton from "./MapSelectionButton"; const BaseLayerVisualSelector: React.FC = () => { - const [isHoverOSM, setIsHoverOSM] = useState(false); - const [isHoverDTM, setIsHoverDTM] = useState(false); - const [isHoverDens, setIsHoverDesn] = useState(false); - const [isHoverOrtho, setIsHoverOrtho] = useState(false); - const layers = useLayers(); - - const isActiveBaseLayer = (name: string) => { - return layers.activeBaseLayer.toString() === name; - }; - // console.log("BaseLayerVisualSelector: ", layers.activateBaseLayer); - return ( - + -
- setIsHoverOSM(true)} - onMouseLeave={() => setIsHoverOSM(false)} - onClick={() => { - layers.setBaseLayerTo([""]); - }} - style={{ - height: 150, - width: 150, - padding: isHoverOSM ? 2 : 0, - borderColor: "lightgreen", - borderWidth: 4, - borderStyle: isActiveBaseLayer("") ? "solid" : "none", - borderRadius: isActiveBaseLayer("") ? 8 : 0, - }} - > - - - OSM -
+ -
- setIsHoverDesn(true)} - onMouseLeave={() => setIsHoverDesn(false)} - onClick={() => { - layers.setBaseLayerTo(["density"]); - }} - style={{ height: 150, width: 150 }} - > - - - Density -
+ -
- setIsHoverDTM(true)} - onMouseLeave={() => setIsHoverDTM(false)} - onClick={() => { - layers.setBaseLayerTo(["dtm"]); - }} - style={{ height: 150, width: 150 }} - > - - - DTM -
+ -
- setIsHoverOrtho(true)} - onMouseLeave={() => setIsHoverOrtho(false)} - onClick={() => { - layers.setBaseLayerTo(["ortho"]); - }} - style={{ height: 150, width: 150 }} - > - - - Ortho -
+ - //
); }; @@ -244,12 +138,12 @@ export const BaseLayerPopover: React.FC = () => { trigger="open-modal" triggerAction="click" reference="trigger" - side="top" + side="left" arrow={true} showBackdrop={false} - style={{ "--offset-y": "-10px" }} + style={{ "--offset-x": "-20px" }} > -
+
diff --git a/src/components/InventoryList.tsx b/src/components/InventoryList.tsx index ef6cd13..1e43bb8 100644 --- a/src/components/InventoryList.tsx +++ b/src/components/InventoryList.tsx @@ -73,7 +73,7 @@ const InventoryList: React.FC = () => { return ( - + List View diff --git a/src/components/MapSelectionButton.tsx b/src/components/MapSelectionButton.tsx new file mode 100644 index 0000000..95e442c --- /dev/null +++ b/src/components/MapSelectionButton.tsx @@ -0,0 +1,76 @@ +import { + IonButton, + IonContent, + IonHeader, + IonImg, + IonNote, + IonPage, + IonTitle, + IonToolbar, +} from "@ionic/react"; +import React from "react"; +import { useLayers } from "../context/layers"; + +interface MapSelectionButtonProps { + name: string; + titel: string; + src: string; + height: number; + width: number; +} + +const MapSelectionButton: React.FC = ({ + name, + src, + titel, + height, + width, +}) => { + const layers = useLayers(); + const isActiveBaseLayer = (name: string) => { + return layers.activeBaseLayer.toString() === name; + }; + + return ( + { + layers.setBaseLayerTo([name]); + }} + style={{ height: height, width: width }} + > +
+
+ +
+
+ {titel} +
+
+ + ); +}; + +export default MapSelectionButton; diff --git a/src/components/map-components/InventorySource.tsx b/src/components/map-components/InventorySource.tsx index 0f0301e..0060323 100644 --- a/src/components/map-components/InventorySource.tsx +++ b/src/components/map-components/InventorySource.tsx @@ -13,6 +13,7 @@ import { IonCardTitle, IonItem, IonLabel, + IonPopover, } from "@ionic/react"; import { useHistory } from "react-router"; import { useOffline } from "../../context/offline"; @@ -97,9 +98,9 @@ const InventoryLayer: React.FC = () => { setHovered((e.features as any)[0]); // set the preview Image - getImageData(JSON.parse((e.features as any)[0].properties.images)[0]) - .then(val => setCurrentImg(`data:image/png;base64,${val}`)) - + getImageData( + JSON.parse((e.features as any)[0].properties.images)[0] + ).then((val) => setCurrentImg(`data:image/png;base64,${val}`)); map.current?.setFeatureState( { source: "inventory", id: e.features[0].id }, @@ -114,7 +115,7 @@ const InventoryLayer: React.FC = () => { // mouseLeave map.current.on("mouseleave", "inventory", (e: MapLayerMouseEvent) => { setHovered(undefined); - setCurrentImg(null) + setCurrentImg(null); // disable hover state for all features, not matter what src?.features.forEach((f) => { map.current?.setFeatureState( @@ -184,39 +185,40 @@ const InventoryLayer: React.FC = () => { ) : null} {hovered ? ( - - img - - TreeID: {hovered.properties.treeid} - - - - Height: - {hovered.properties.height.toFixed(1)} m - - - Radius: - - {(hovered.properties.radius * 100).toFixed(0)} cm - - - - - ) : null} + test + ) : // + // img + // + // TreeID: {hovered.properties.treeid} + // + // + // + // Height: + // {hovered.properties.height.toFixed(1)} m + // + // + // Radius: + // + // {(hovered.properties.radius * 100).toFixed(0)} cm + // + // + // + // + null} ); }; From b7ca57ab0f206c54c693f517640a9cff7304e7fb Mon Sep 17 00:00:00 2001 From: JesJehle Date: Tue, 4 Apr 2023 15:10:42 +0200 Subject: [PATCH 14/33] added additional map buttons --- src/pages/DesktopPage.tsx | 112 ++++++++++++++++++++++++++++---------- 1 file changed, 84 insertions(+), 28 deletions(-) diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 718b14b..71360b1 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -12,6 +12,7 @@ import { IonGrid, IonHeader, IonIcon, + IonLabel, IonMenu, IonMenuButton, IonMenuToggle, @@ -22,7 +23,16 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { layers, map, settingsOutline } from "ionicons/icons"; +import { + bookmarks, + chevronDown, + chevronDownOutline, + chevronDownSharp, + layers, + map, + options, + settingsOutline, +} from "ionicons/icons"; import React from "react"; import InventoryList from "../components/InventoryList"; import MainMap from "../components/MainMapMaplibre"; @@ -31,7 +41,6 @@ import { Route, RouteComponentProps, Switch } from "react-router"; import TreeDetails from "../components/TreeDetails"; import Settings from "../components/Settings"; - const DesktopPage: React.FC = () => { return ( @@ -53,43 +62,92 @@ const DesktopPage: React.FC = () => { - -
- + +
+
+
+ + Height + + + + + Filter + + + + Selection + + +
- - { /* Tree detail card */ } - ( - - - - - - - - CLOSE - - - - - - - - )} /> + {/* Tree detail card */} + ( + + + + + + + + + CLOSE + + + + + + + + + )} + /> {/* Settings card */} - + - CLOSE + + CLOSE + @@ -103,8 +161,6 @@ const DesktopPage: React.FC = () => { <> - - From 7cdca4b7a127b1489fcee626f9ad93c2c5e9c87e Mon Sep 17 00:00:00 2001 From: JesJehle Date: Wed, 5 Apr 2023 22:21:52 +0200 Subject: [PATCH 15/33] added RangeFilter as popover for desktop --- src/components/FilterBarPopover.tsx | 25 +++++++++++++++++++++++++ src/components/RangeFilter.tsx | 13 +++++++++---- src/pages/DesktopPage.tsx | 15 +++++++++++---- 3 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 src/components/FilterBarPopover.tsx diff --git a/src/components/FilterBarPopover.tsx b/src/components/FilterBarPopover.tsx new file mode 100644 index 0000000..4e6f00d --- /dev/null +++ b/src/components/FilterBarPopover.tsx @@ -0,0 +1,25 @@ +import { IonPopover } from "@ionic/react"; +import React from "react"; +import RangeFilter from "./RangeFilter"; + +const FilterBarPopover: React.FC = () => { + return ( + + + + ); +}; + +export default FilterBarPopover; diff --git a/src/components/RangeFilter.tsx b/src/components/RangeFilter.tsx index 0919d44..4f0cdf7 100644 --- a/src/components/RangeFilter.tsx +++ b/src/components/RangeFilter.tsx @@ -6,8 +6,10 @@ import { IonGrid, IonHeader, IonItem, + IonItemDivider, IonLabel, IonList, + IonListHeader, IonPage, IonRange, IonRow, @@ -31,9 +33,12 @@ const RangeFilter: React.FC = () => { return ( + + Filter + - + Height @@ -62,7 +67,7 @@ const RangeFilter: React.FC = () => { - + Radius @@ -91,8 +96,8 @@ const RangeFilter: React.FC = () => { - - Dist. + + Distance { return ( @@ -76,22 +77,27 @@ const DesktopPage: React.FC = () => { paddingLeft: 20, }} > - + Height - + Filter - + Selection
+ {/* Tree detail card */} @@ -102,7 +108,8 @@ const DesktopPage: React.FC = () => { Date: Wed, 5 Apr 2023 23:05:39 +0200 Subject: [PATCH 16/33] adding map buttons to map component --- src/components/MainMapMaplibre.tsx | 43 +++++++++++++++++++++++++++++- src/pages/DesktopPage.tsx | 32 +++------------------- src/pages/MapPage.css | 6 ++--- src/pages/MapPage.tsx | 10 +++---- 4 files changed, 51 insertions(+), 40 deletions(-) diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx index 5e6d9b0..42fcf2f 100644 --- a/src/components/MainMapMaplibre.tsx +++ b/src/components/MainMapMaplibre.tsx @@ -8,6 +8,9 @@ import InventorySource from "./map-components/InventorySource"; import BaseLayerSource from "./map-components/BaseLayerSource"; import UserLocationSource from "./map-components/UserLocationSource"; import LayerInteraction from "./map-components/LayerInteraction"; +import { IonButton, IonIcon, IonLabel } from "@ionic/react"; +import { bookmarks, chevronDownOutline, options } from "ionicons/icons"; +import MapSelectionButton from "./MapSelectionButton"; const MainMap: React.FC = () => { // onload callback handler const onLoad = (e: any) => { @@ -59,7 +62,6 @@ const MainMap: React.FC = () => { }, ], } as Style; - return ( { // 47.884438269626294, 8.088652498339387 }} > +
+
+ +
+
+ + Height + + + + {/* */} + Filter + + + + Selection + + +
+
diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 90062f7..9a5b517 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -56,45 +56,19 @@ const DesktopPage: React.FC = () => { - + {/* - + */} -
+
-
- - Height - - - - - Filter - - - - Selection - - -
diff --git a/src/pages/MapPage.css b/src/pages/MapPage.css index 115cbdb..ad2f9d5 100644 --- a/src/pages/MapPage.css +++ b/src/pages/MapPage.css @@ -7,6 +7,6 @@ width: 40px; } -ion-fab-button { - --border-radius: 15px; -} +/* ion-fab-button { */ +/* --border-radius: 15px; */ +/* } */ diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx index b4f3525..a9613f2 100644 --- a/src/pages/MapPage.tsx +++ b/src/pages/MapPage.tsx @@ -49,11 +49,11 @@ const MapPage: React.FC = () => { - + {/* - + */} @@ -61,11 +61,7 @@ const MapPage: React.FC = () => { - {window.innerWidth > 768 ? ( - - ) : ( - - )} + ); From bf79de2978cc4004e72a6975edf1556ee9a7de9a Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 09:31:27 +0200 Subject: [PATCH 17/33] wip --- src/DesktopNavigation.tsx | 5 ++-- src/MobileNavigation.tsx | 2 +- src/components/MainMapMaplibre.tsx | 22 ------------------ src/components/MapButtonGroup.tsx | 28 +++++++++++++++++++++++ src/pages/{MapPage.css => MobilePage.css} | 0 src/pages/{MapPage.tsx => MobilePage.tsx} | 0 6 files changed, 31 insertions(+), 26 deletions(-) create mode 100644 src/components/MapButtonGroup.tsx rename src/pages/{MapPage.css => MobilePage.css} (100%) rename src/pages/{MapPage.tsx => MobilePage.tsx} (100%) diff --git a/src/DesktopNavigation.tsx b/src/DesktopNavigation.tsx index b6e38bd..1daf9af 100644 --- a/src/DesktopNavigation.tsx +++ b/src/DesktopNavigation.tsx @@ -19,7 +19,7 @@ import { listSharp, map } from "ionicons/icons"; import DataLayerDrawer from "./components/DataLayerSelector"; import TreeOverviewPage from "./pages/TreeOverviewPage"; import InventoryListPage from "./pages/InventoryListPage"; -import MapPage from "./pages/MapPage"; +import MapPage from "./pages/MobilePage"; import SettingsPage from "./pages/SettingsPage"; import DesktopPage from "./pages/DesktopPage"; @@ -29,8 +29,7 @@ const MobileNavigation: React.FC = () => { - ) - + ); }; export default MobileNavigation; diff --git a/src/MobileNavigation.tsx b/src/MobileNavigation.tsx index c9113aa..d2bda97 100644 --- a/src/MobileNavigation.tsx +++ b/src/MobileNavigation.tsx @@ -10,7 +10,7 @@ import { IonReactRouter } from "@ionic/react-router"; import React from "react"; import { Redirect, Route } from "react-router"; import InventoryListPage from "./pages/InventoryListPage"; -import MapPage from "./pages/MapPage"; +import MapPage from "./pages/MobilePage"; import SettingsPage from "./pages/SettingsPage"; import TreeOverviewPage from "./pages/TreeOverviewPage"; diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx index 42fcf2f..3ce5fbd 100644 --- a/src/components/MainMapMaplibre.tsx +++ b/src/components/MainMapMaplibre.tsx @@ -92,28 +92,6 @@ const MainMap: React.FC = () => { width={100} />
-
- - Height - - - - {/* */} - Filter - - - - Selection - - -
diff --git a/src/components/MapButtonGroup.tsx b/src/components/MapButtonGroup.tsx new file mode 100644 index 0000000..b23d56e --- /dev/null +++ b/src/components/MapButtonGroup.tsx @@ -0,0 +1,28 @@ +import { IonButton, IonIcon, IonLabel } from "@ionic/react"; +import { bookmarks, chevronDownOutline } from "ionicons/icons"; + +const MapButtonGroup = () => { + return ( +
+ + Height + + + + {/* */} + Filter + + + + Selection + + +
+ ); +}; +export default MapButtonGroup; diff --git a/src/pages/MapPage.css b/src/pages/MobilePage.css similarity index 100% rename from src/pages/MapPage.css rename to src/pages/MobilePage.css diff --git a/src/pages/MapPage.tsx b/src/pages/MobilePage.tsx similarity index 100% rename from src/pages/MapPage.tsx rename to src/pages/MobilePage.tsx From d1118e289a23f88e2e72fe4098d81ea766a1739f Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 12:31:51 +0200 Subject: [PATCH 18/33] set fixed width for Tree Details and adjust IonGrid --- src/pages/DesktopPage.tsx | 32 ++++++-------------------------- src/pages/MobilePage.tsx | 2 +- 2 files changed, 7 insertions(+), 27 deletions(-) diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 9a5b517..6ba1083 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -7,37 +7,20 @@ import { IonCardHeader, IonCol, IonContent, - IonFab, - IonFabButton, IonGrid, IonHeader, IonIcon, - IonLabel, - IonMenu, - IonMenuButton, - IonMenuToggle, IonPage, - IonPopover, - IonRouterOutlet, IonRow, IonTitle, IonToolbar, } from "@ionic/react"; -import { - bookmarks, - chevronDown, - chevronDownOutline, - chevronDownSharp, - layers, - map, - options, - settingsOutline, -} from "ionicons/icons"; +import { settingsOutline } from "ionicons/icons"; import React from "react"; import InventoryList from "../components/InventoryList"; import MainMap from "../components/MainMapMaplibre"; import { BaseLayerPopover } from "../components/BaseLayerSelector"; -import { Route, RouteComponentProps, Switch } from "react-router"; +import { Route, Switch } from "react-router"; import TreeDetails from "../components/TreeDetails"; import Settings from "../components/Settings"; import FilterBarPopover from "../components/FilterBarPopover"; @@ -63,7 +46,7 @@ const DesktopPage: React.FC = () => { */} - +
@@ -74,7 +57,6 @@ const DesktopPage: React.FC = () => { - {/* Tree detail card */} { position: "absolute", top: 60, left: 12, - width: "33vw", - maxWidth: "400px", + // width: "33vw", + width: "400px", height: "90%", zIndex: 999, overflowY: "auto", @@ -138,9 +120,7 @@ const DesktopPage: React.FC = () => { - - <> - + diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx index a9613f2..9b568e3 100644 --- a/src/pages/MobilePage.tsx +++ b/src/pages/MobilePage.tsx @@ -19,7 +19,7 @@ import { BaseLayerPopover, BaseLayerSheetModal, } from "../components/BaseLayerSelector"; -import "./MapPage.css"; +import "./MobilePage.css"; // const MapButton: React.FC = () => { // return ( From ef8b5b0df2f3f7147c271e5cca4c6706fb04dd84 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 12:40:19 +0200 Subject: [PATCH 19/33] adding MapButtonGroup to Desktop --- src/components/MapButtonGroup.tsx | 25 +++++++++++++++++++------ src/pages/DesktopPage.tsx | 16 +++++++++++----- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/components/MapButtonGroup.tsx b/src/components/MapButtonGroup.tsx index b23d56e..7a0edac 100644 --- a/src/components/MapButtonGroup.tsx +++ b/src/components/MapButtonGroup.tsx @@ -1,19 +1,32 @@ import { IonButton, IonIcon, IonLabel } from "@ionic/react"; import { bookmarks, chevronDownOutline } from "ionicons/icons"; -const MapButtonGroup = () => { +interface MapButtonGroupProps { + padding: number; +} + +const MapButtonGroup: React.FC = ({ padding }) => { return (
Height - + {/* */} Filter diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 6ba1083..bbf1d8b 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -24,6 +24,7 @@ import { Route, Switch } from "react-router"; import TreeDetails from "../components/TreeDetails"; import Settings from "../components/Settings"; import FilterBarPopover from "../components/FilterBarPopover"; +import MapButtonGroup from "../components/MapButtonGroup"; const DesktopPage: React.FC = () => { return ( @@ -39,11 +40,6 @@ const DesktopPage: React.FC = () => { - {/* - - - - */} @@ -52,6 +48,16 @@ const DesktopPage: React.FC = () => {
+
+ +
From 1fbd9718052bf494fe388af7079bc06873819040 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 14:22:46 +0200 Subject: [PATCH 20/33] working on activeActionButton --- src/components/ActiveMapSelectionButton.tsx | 7 ++ src/components/BaseLayerSelector.tsx | 93 ++++++++++----------- src/components/MainMapMaplibre.tsx | 18 +--- src/components/MapButtonGroup.tsx | 19 +++-- src/pages/DesktopPage.tsx | 23 ++++- src/pages/MobilePage.tsx | 15 ++-- 6 files changed, 94 insertions(+), 81 deletions(-) create mode 100644 src/components/ActiveMapSelectionButton.tsx diff --git a/src/components/ActiveMapSelectionButton.tsx b/src/components/ActiveMapSelectionButton.tsx new file mode 100644 index 0000000..08388e5 --- /dev/null +++ b/src/components/ActiveMapSelectionButton.tsx @@ -0,0 +1,7 @@ +import { IonButton } from "@ionic/react"; + +const ActiveMapSelectionButton = () => { + return ; +}; + +export default ActiveMapSelectionButton; diff --git a/src/components/BaseLayerSelector.tsx b/src/components/BaseLayerSelector.tsx index a1d8a73..c9280db 100644 --- a/src/components/BaseLayerSelector.tsx +++ b/src/components/BaseLayerSelector.tsx @@ -29,49 +29,42 @@ import MapSelectionButton from "./MapSelectionButton"; const BaseLayerVisualSelector: React.FC = () => { return ( - - - - - - - - - - - - - - - - - - - +
+ + + + +
); }; @@ -135,17 +128,19 @@ export const BaseLayerSheetModal: React.FC<{ export const BaseLayerPopover: React.FC = () => { return ( -
- -
+ ); }; diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx index 3ce5fbd..c990e15 100644 --- a/src/components/MainMapMaplibre.tsx +++ b/src/components/MainMapMaplibre.tsx @@ -76,23 +76,7 @@ const MainMap: React.FC = () => { // 47.884438269626294, 8.088652498339387 }} > -
-
- -
-
+
diff --git a/src/components/MapButtonGroup.tsx b/src/components/MapButtonGroup.tsx index 7a0edac..1f4a550 100644 --- a/src/components/MapButtonGroup.tsx +++ b/src/components/MapButtonGroup.tsx @@ -3,17 +3,21 @@ import { bookmarks, chevronDownOutline } from "ionicons/icons"; interface MapButtonGroupProps { padding: number; + // top: number; + // left: number; } -const MapButtonGroup: React.FC = ({ padding }) => { +const MapButtonGroup: React.FC = ({ + padding, + // top, + // left, +}) => { return (
Height @@ -27,7 +31,6 @@ const MapButtonGroup: React.FC = ({ padding }) => { paddingRight: padding, }} > - {/* */} Filter diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index bbf1d8b..0a0a334 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -25,6 +25,8 @@ import TreeDetails from "../components/TreeDetails"; import Settings from "../components/Settings"; import FilterBarPopover from "../components/FilterBarPopover"; import MapButtonGroup from "../components/MapButtonGroup"; +import MapSelectionButton from "../components/MapSelectionButton"; +import ActiveMapSelectionButton from "../components/ActiveMapSelectionButton"; const DesktopPage: React.FC = () => { return ( @@ -50,14 +52,31 @@ const DesktopPage: React.FC = () => {
+
+ + {/* */} +
diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx index 9b568e3..7db6f45 100644 --- a/src/pages/MobilePage.tsx +++ b/src/pages/MobilePage.tsx @@ -20,6 +20,7 @@ import { BaseLayerSheetModal, } from "../components/BaseLayerSelector"; import "./MobilePage.css"; +import MapButtonGroup from "../components/MapButtonGroup"; // const MapButton: React.FC = () => { // return ( @@ -49,11 +50,15 @@ const MapPage: React.FC = () => { - {/* - - - - */} +
+ +
From 37266d9e2d5dba052c1d430b84561526d15de7f7 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 18:33:30 +0200 Subject: [PATCH 21/33] updated visual map selection --- src/components/ActiveMapSelectionButton.tsx | 68 ++++++++++++++++++++- src/components/BaseLayerSelector.tsx | 4 +- 2 files changed, 68 insertions(+), 4 deletions(-) diff --git a/src/components/ActiveMapSelectionButton.tsx b/src/components/ActiveMapSelectionButton.tsx index 08388e5..2043e2e 100644 --- a/src/components/ActiveMapSelectionButton.tsx +++ b/src/components/ActiveMapSelectionButton.tsx @@ -1,7 +1,71 @@ -import { IonButton } from "@ionic/react"; +import { IonButton, IonImg, IonNote } from "@ionic/react"; +import { useEffect, useState } from "react"; +import { useLayers } from "../context/layers"; +import { setCacheNameDetails } from "workbox-core"; const ActiveMapSelectionButton = () => { - return ; + const layers = useLayers(); + + const [src, setSrc] = useState("assets/openstreetmap.png"); + const [titel, setTitel] = useState("OSM"); + + useEffect(() => { + if (layers.activeBaseLayer.toString() === "density") { + setSrc("assets/density.png"); + setTitel("Density"); + } else if (layers.activeBaseLayer.toString() === "dtm") { + setSrc("assets/dtm.png"); + setTitel("DTM"); + } else if (layers.activeBaseLayer.toString() === "ortho") { + setSrc("assets/ortho.png"); + setTitel("Ortho"); + } else { + setSrc("assets/openstreetmap.png"); + setTitel("OSM"); + } + }, [layers.activeBaseLayer]); + + return ( + +
+
+ +
+
+ {titel} +
+
+ + ); }; export default ActiveMapSelectionButton; diff --git a/src/components/BaseLayerSelector.tsx b/src/components/BaseLayerSelector.tsx index c9280db..7d4b3c7 100644 --- a/src/components/BaseLayerSelector.tsx +++ b/src/components/BaseLayerSelector.tsx @@ -135,8 +135,8 @@ export const BaseLayerPopover: React.FC = () => { arrow={true} showBackdrop={false} style={{ - "--offset-x": "20px", - "--offset-y": "-20px", + "--offset-x": "10px", + // "--offset-y": "-20px", "--min-width": "350px", }} > From 3f5e9602f82fcdc4ed8326d543041ab5757a3610 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 19:27:27 +0200 Subject: [PATCH 22/33] map style selection on mobile --- src/components/ActiveMapSelectionButton.tsx | 20 +- src/components/BaseLayerSelector.tsx | 204 +++++++++++++++----- src/pages/DesktopPage.tsx | 2 +- src/pages/MobilePage.tsx | 18 ++ 4 files changed, 187 insertions(+), 57 deletions(-) diff --git a/src/components/ActiveMapSelectionButton.tsx b/src/components/ActiveMapSelectionButton.tsx index 2043e2e..0d4d181 100644 --- a/src/components/ActiveMapSelectionButton.tsx +++ b/src/components/ActiveMapSelectionButton.tsx @@ -3,7 +3,15 @@ import { useEffect, useState } from "react"; import { useLayers } from "../context/layers"; import { setCacheNameDetails } from "workbox-core"; -const ActiveMapSelectionButton = () => { +interface ActiveMapSelectionButtonProps { + height: number; + width: number; +} + +const ActiveMapSelectionButton: React.FC = ({ + height, + width, +}) => { const layers = useLayers(); const [src, setSrc] = useState("assets/openstreetmap.png"); @@ -30,14 +38,14 @@ const ActiveMapSelectionButton = () => { id="open-map-selection-popover" class="ion-no-padding" style={{ - height: 100, - width: 100, + height: height, + width: width, }} >
{
{ +interface BaseLayerPopoverProps { + height: number; + width: number; +} + +const BaseLayerVisualSelector: React.FC = ({ + height, + width, +}) => { return (
@@ -40,87 +49,146 @@ const BaseLayerVisualSelector: React.FC = () => { name="" src="assets/openstreetmap.png" titel="OSM" - height={80} - width={80} + height={height} + width={width} />
); }; -const BaseLayerSelector: React.FC = () => { - // subscribe to the available Inventories - const layers = useLayers(); +// const BaseLayerSelector: React.FC = () => { +// // subscribe to the available Inventories +// const layers = useLayers(); - return ( - - - Base Layer - - - - !!e.detail.value - ? layers.setBaseLayerTo([e.detail.value]) - : layers.setBaseLayerTo([]) - } - value={layers.activeBaseLayer.toString()} - > - {layers.availableBaseLayer.map((l) => ( - - {l.title} - - - ))} - - - - Description - - - - This is the Description of the base layer - - - - ); -}; +// return ( +// +// +// Base Layer +// +// +// +// !!e.detail.value +// ? layers.setBaseLayerTo([e.detail.value]) +// : layers.setBaseLayerTo([]) +// } +// value={layers.activeBaseLayer.toString()} +// > +// {layers.availableBaseLayer.map((l) => ( +// +// {l.title} +// +// +// ))} +// +// +// +// Description +// +// +// +// This is the Description of the base layer +// +// +// +// ); +// }; export const BaseLayerSheetModal: React.FC<{ modal: React.RefObject; }> = ({ modal }) => { return ( - + - Map Selection + Map Type Selection modal.current?.dismiss()}> - +
+
+ + +
+
+ + +
+
+ {/*
*/} ); }; @@ -140,7 +208,43 @@ export const BaseLayerPopover: React.FC = () => { "--min-width": "350px", }} > - +
+ + + + +
); }; diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 0a0a334..5d72b8f 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -68,7 +68,7 @@ const DesktopPage: React.FC = () => { left: 20, }} > - + {/* { // return ( @@ -64,6 +65,23 @@ const MapPage: React.FC = () => { +
+ + {/* */} +
From d20b5a0cacb7b42bac5c7934baacaf9785e71873 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 20:48:10 +0200 Subject: [PATCH 23/33] finished visual map selection --- src/components/BaseLayerSelector.tsx | 6 +++--- src/components/MapButtonGroup.tsx | 7 +------ src/pages/MobilePage.tsx | 16 ++++++++-------- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/components/BaseLayerSelector.tsx b/src/components/BaseLayerSelector.tsx index aab7390..e26e06a 100644 --- a/src/components/BaseLayerSelector.tsx +++ b/src/components/BaseLayerSelector.tsx @@ -21,7 +21,7 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { close, layers } from "ionicons/icons"; +import { close, closeCircle, layers } from "ionicons/icons"; import { useState } from "react"; import { useLayers } from "../context/layers"; // import "./BaseLayerSelector.css"; @@ -123,13 +123,13 @@ export const BaseLayerSheetModal: React.FC<{ Map Type Selection modal.current?.dismiss()}> - + diff --git a/src/components/MapButtonGroup.tsx b/src/components/MapButtonGroup.tsx index 1f4a550..1a62a55 100644 --- a/src/components/MapButtonGroup.tsx +++ b/src/components/MapButtonGroup.tsx @@ -13,12 +13,7 @@ const MapButtonGroup: React.FC = ({ // left, }) => { return ( -
+
Height diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx index 9b0f622..cd6cc1f 100644 --- a/src/pages/MobilePage.tsx +++ b/src/pages/MobilePage.tsx @@ -58,7 +58,14 @@ const MapPage: React.FC = () => { left: 5, }} > - +
+ +
@@ -74,13 +81,6 @@ const MapPage: React.FC = () => { }} > - {/* */}
From d0e50ed72431d5f31ef18568c34b2ffad6abdd59 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 21:13:14 +0200 Subject: [PATCH 24/33] added RangeFilter to desktop and mobile --- src/components/MapButtonGroup.tsx | 2 +- src/components/RangeFilter.tsx | 13 +------- src/components/RangeFilterModal.tsx | 30 +++++++++++++++++++ ...rBarPopover.tsx => RangeFilterPopover.tsx} | 2 +- src/pages/DesktopPage.tsx | 10 +------ src/pages/MobilePage.tsx | 11 ++++--- 6 files changed, 39 insertions(+), 29 deletions(-) create mode 100644 src/components/RangeFilterModal.tsx rename src/components/{FilterBarPopover.tsx => RangeFilterPopover.tsx} (92%) diff --git a/src/components/MapButtonGroup.tsx b/src/components/MapButtonGroup.tsx index 1a62a55..b22e967 100644 --- a/src/components/MapButtonGroup.tsx +++ b/src/components/MapButtonGroup.tsx @@ -20,7 +20,7 @@ const MapButtonGroup: React.FC = ({ { const { filterValues, setFilterValues, inventoryStats } = useData(); const [radius, setRadius] = useState({ ...filterValues.radius }); const [height, setHeight] = useState({ ...filterValues.height }); + // console.log("filterValues:", filterValues); return ( - - Filter - diff --git a/src/components/RangeFilterModal.tsx b/src/components/RangeFilterModal.tsx new file mode 100644 index 0000000..370aa60 --- /dev/null +++ b/src/components/RangeFilterModal.tsx @@ -0,0 +1,30 @@ +import { + IonButton, + IonButtons, + IonIcon, + IonModal, + IonTitle, + IonToolbar, +} from "@ionic/react"; +import { closeCircle } from "ionicons/icons"; +import RangeFilter from "./RangeFilter"; + +const RangeFilterSheetModal: React.FC<{ + modal: React.RefObject; +}> = ({ modal }) => { + return ( + + + Filter Data + + modal.current?.dismiss()}> + + + + + + + ); +}; + +export default RangeFilterSheetModal; diff --git a/src/components/FilterBarPopover.tsx b/src/components/RangeFilterPopover.tsx similarity index 92% rename from src/components/FilterBarPopover.tsx rename to src/components/RangeFilterPopover.tsx index 4e6f00d..7348148 100644 --- a/src/components/FilterBarPopover.tsx +++ b/src/components/RangeFilterPopover.tsx @@ -5,7 +5,7 @@ import RangeFilter from "./RangeFilter"; const FilterBarPopover: React.FC = () => { return ( { @@ -69,13 +68,6 @@ const DesktopPage: React.FC = () => { }} > - {/* */}
diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx index cd6cc1f..d482282 100644 --- a/src/pages/MobilePage.tsx +++ b/src/pages/MobilePage.tsx @@ -11,17 +11,15 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { layers, listSharp, map, settingsOutline } from "ionicons/icons"; +import { layers, listSharp, settingsOutline } from "ionicons/icons"; import { useRef } from "react"; import MainMap from "../components/MainMapMaplibre"; -import { - BaseLayerPopover, - BaseLayerSheetModal, -} from "../components/BaseLayerSelector"; +import { BaseLayerSheetModal } from "../components/BaseLayerSelector"; import "./MobilePage.css"; import MapButtonGroup from "../components/MapButtonGroup"; import ActiveMapSelectionButton from "../components/ActiveMapSelectionButton"; +import RangeFilterSheetModal from "../components/RangeFilterModal"; // const MapButton: React.FC = () => { // return ( @@ -84,7 +82,8 @@ const MapPage: React.FC = () => {
- + + ); From d42b802445f242e4c59b0ca068a3133531957217 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 21:23:15 +0200 Subject: [PATCH 25/33] inspecting bug --- src/components/RangeFilter.tsx | 2 ++ src/context/data.tsx | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/RangeFilter.tsx b/src/components/RangeFilter.tsx index 99a5c1b..db1d3bf 100644 --- a/src/components/RangeFilter.tsx +++ b/src/components/RangeFilter.tsx @@ -22,6 +22,8 @@ const RangeFilter: React.FC = () => { const [radius, setRadius] = useState({ ...filterValues.radius }); const [height, setHeight] = useState({ ...filterValues.height }); // console.log("filterValues:", filterValues); + // console.log("radius", radius); + // console.log("height", height); return ( diff --git a/src/context/data.tsx b/src/context/data.tsx index 55692e8..a8bf4ae 100644 --- a/src/context/data.tsx +++ b/src/context/data.tsx @@ -55,8 +55,8 @@ const initialState: DataState = { inventoryCount: { total: 0, filtered: 0 }, synced: false, filterValues: { - radius: { lower: 10, upper: 90 }, - height: { lower: 10, upper: 90 }, + radius: { lower: 4, upper: 50 }, + height: { lower: 3, upper: 43 }, }, setFilterValues: (value: FilterValues) => {}, inventoryStats: null, @@ -80,8 +80,8 @@ export const DataProvider: React.FC = ({ const [synced, setSynced] = useState(false); //TODO: Use real values instread. const [filterValues, setFilterValues] = useState({ - radius: { lower: 0, upper: 90 }, - height: { lower: 0, upper: 90 }, + radius: { lower: 4, upper: 50 }, + height: { lower: 3, upper: 43 }, }); // use the offline context @@ -166,9 +166,9 @@ export const DataProvider: React.FC = ({ // re-filter inventory when allInventory changes useEffect(() => { if (allInventory) { -// console.log("allInventory:", allInventory); -// console.log("filterValues:", filterValues); - + // console.log("allInventory:", allInventory); + // console.log("filterValues:", filterValues); + // TODO build the filter here const inv = { type: "FeatureCollection", @@ -186,9 +186,9 @@ export const DataProvider: React.FC = ({ } as InventoryData; // update the bounding box - inv.bbox = bbox(inv) + inv.bbox = bbox(inv); setFilteredInventory(inv); - + // set the counts as state for performance reasons setInventoryCount({ total: allInventory.features.length, @@ -199,7 +199,7 @@ export const DataProvider: React.FC = ({ setFilteredInventory(undefined); setInventoryCount({ total: 0, filtered: 0 }); } -// console.log("filteredInventory:", filteredInventory); + // console.log("filteredInventory:", filteredInventory); }, [allInventory, filterValues]); // create the final value From d9dfcb30a7077851f8618c4ec1d4da5680e9a042 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Thu, 6 Apr 2023 22:01:36 +0200 Subject: [PATCH 26/33] added variable selection component and satte --- src/components/MapButtonGroup.tsx | 7 +++-- src/components/VariableSelector.tsx | 31 ++++++++++++++++++++ src/components/VvariableSelectionPopover.tsx | 25 ++++++++++++++++ src/context/data.tsx | 7 +++++ src/pages/DesktopPage.tsx | 2 ++ 5 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 src/components/VariableSelector.tsx create mode 100644 src/components/VvariableSelectionPopover.tsx diff --git a/src/components/MapButtonGroup.tsx b/src/components/MapButtonGroup.tsx index b22e967..2934eb1 100644 --- a/src/components/MapButtonGroup.tsx +++ b/src/components/MapButtonGroup.tsx @@ -1,5 +1,6 @@ import { IonButton, IonIcon, IonLabel } from "@ionic/react"; import { bookmarks, chevronDownOutline } from "ionicons/icons"; +import { useData } from "../context/data"; interface MapButtonGroupProps { padding: number; @@ -12,10 +13,12 @@ const MapButtonGroup: React.FC = ({ // top, // left, }) => { + const { activeVariable } = useData(); + return (
- - Height + + {activeVariable} { + const { activeVariable, setActiveVariable } = useData(); + return ( + + + Height + { + setActiveVariable("Height"); + }} + > + + + + BHD + + + + ); +}; + +export default VarialbeSelector; diff --git a/src/components/VvariableSelectionPopover.tsx b/src/components/VvariableSelectionPopover.tsx new file mode 100644 index 0000000..7c79f0e --- /dev/null +++ b/src/components/VvariableSelectionPopover.tsx @@ -0,0 +1,25 @@ +import { IonPopover } from "@ionic/react"; +import React from "react"; +import VarialbeSelector from "./VariableSelector"; + +const VariableSelectionPopover: React.FC = () => { + return ( + + + + ); +}; + +export default VariableSelectionPopover; diff --git a/src/context/data.tsx b/src/context/data.tsx index a8bf4ae..64eb1a6 100644 --- a/src/context/data.tsx +++ b/src/context/data.tsx @@ -46,6 +46,8 @@ interface DataState { filterValues: FilterValues; setFilterValues: (value: FilterValues) => void; inventoryStats: InventoryDataStats | null; + activeVariable: string; + setActiveVariable: (value: string) => void; } // initial empty state @@ -60,6 +62,8 @@ const initialState: DataState = { }, setFilterValues: (value: FilterValues) => {}, inventoryStats: null, + activeVariable: "height", + setActiveVariable: (value: string) => {}, }; // build the context @@ -75,6 +79,7 @@ export const DataProvider: React.FC = ({ const [inventoryCount, setInventoryCount] = useState( initialState.inventoryCount ); + const [activeVariable, setActiveVariable] = useState("height"); // create state for synchronization const [synced, setSynced] = useState(false); @@ -211,6 +216,8 @@ export const DataProvider: React.FC = ({ filterValues: filterValues, setFilterValues: setFilterValues, inventoryStats: inventoryStats || null, + activeVariable: activeVariable, + setActiveVariable: setActiveVariable, }; return ( diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index aaa5b1f..638647c 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -26,6 +26,7 @@ import Settings from "../components/Settings"; import FilterBarPopover from "../components/RangeFilterPopover"; import MapButtonGroup from "../components/MapButtonGroup"; import ActiveMapSelectionButton from "../components/ActiveMapSelectionButton"; +import VariableSelectionPopover from "../components/VvariableSelectionPopover"; const DesktopPage: React.FC = () => { return ( @@ -72,6 +73,7 @@ const DesktopPage: React.FC = () => { + Date: Fri, 7 Apr 2023 12:16:08 +0200 Subject: [PATCH 27/33] addded correct variable state to button --- src/components/RangeFilter.tsx | 2 +- src/components/RangeFilterPopover.tsx | 2 +- src/components/VariableSelector.tsx | 10 ++++++++-- src/pages/DesktopPage.tsx | 2 +- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/RangeFilter.tsx b/src/components/RangeFilter.tsx index db1d3bf..e87f92f 100644 --- a/src/components/RangeFilter.tsx +++ b/src/components/RangeFilter.tsx @@ -26,7 +26,7 @@ const RangeFilter: React.FC = () => { // console.log("height", height); return ( - + diff --git a/src/components/RangeFilterPopover.tsx b/src/components/RangeFilterPopover.tsx index 7348148..51cdf18 100644 --- a/src/components/RangeFilterPopover.tsx +++ b/src/components/RangeFilterPopover.tsx @@ -12,7 +12,7 @@ const FilterBarPopover: React.FC = () => { arrow={false} showBackdrop={false} style={{ - "--offset-x": "16px", + "--offset-x": "10px", "--offset-y": "20px", "--min-width": "350px", }} diff --git a/src/components/VariableSelector.tsx b/src/components/VariableSelector.tsx index 2cb12f3..4216294 100644 --- a/src/components/VariableSelector.tsx +++ b/src/components/VariableSelector.tsx @@ -7,7 +7,7 @@ const VarialbeSelector: React.FC = () => { Height @@ -22,7 +22,13 @@ const VarialbeSelector: React.FC = () => { BHD - + { + setActiveVariable("Radius"); + }} + > ); diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 638647c..90caa6b 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -55,7 +55,7 @@ const DesktopPage: React.FC = () => { position: "absolute", zIndex: 4, top: 12, - left: 10, + left: 20, }} > From f58fa1a4de1a22aeddcb19032124e9e1db6f17f8 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 7 Apr 2023 12:48:00 +0200 Subject: [PATCH 28/33] reorganising and cleaning --- src/DesktopNavigation.tsx | 2 +- src/components/ActiveMapSelectionButton.tsx | 1 - src/components/BaseLayerSelector.tsx | 250 ------------------ src/components/InventoryList.tsx | 1 - src/components/MainMapMaplibre.tsx | 4 +- src/components/MapSelectionButton.tsx | 11 +- src/components/TreeDetails.tsx | 8 - src/components/VariableSelector.tsx | 2 +- .../{ => archive}/DataLayerSelector.tsx | 24 +- src/components/{ => archive}/FilterBar.css | 0 src/components/{ => archive}/FilterBar.tsx | 0 .../map-components/InventorySource.tsx | 12 +- src/components/modal/BaseLayerModal.tsx | 89 +++++++ .../{ => modal}/RangeFilterModal.tsx | 11 +- .../modal/VariableSelectionModal.tsx | 37 +++ src/components/popover/BaseLayerPopover.tsx | 60 +++++ .../{ => popover}/RangeFilterPopover.tsx | 2 +- .../VariableSelectionPopover.tsx} | 2 +- src/pages/DesktopPage.tsx | 6 +- src/pages/InventoryListPage.tsx | 2 +- src/pages/MobilePage.tsx | 6 +- src/pages/SettingsPage.tsx | 46 ++-- src/pages/TreeOverviewPage.tsx | 2 - 23 files changed, 251 insertions(+), 327 deletions(-) delete mode 100644 src/components/BaseLayerSelector.tsx rename src/components/{ => archive}/DataLayerSelector.tsx (74%) rename src/components/{ => archive}/FilterBar.css (100%) rename src/components/{ => archive}/FilterBar.tsx (100%) create mode 100644 src/components/modal/BaseLayerModal.tsx rename src/components/{ => modal}/RangeFilterModal.tsx (70%) create mode 100644 src/components/modal/VariableSelectionModal.tsx create mode 100644 src/components/popover/BaseLayerPopover.tsx rename src/components/{ => popover}/RangeFilterPopover.tsx (92%) rename src/components/{VvariableSelectionPopover.tsx => popover/VariableSelectionPopover.tsx} (91%) diff --git a/src/DesktopNavigation.tsx b/src/DesktopNavigation.tsx index 1daf9af..4b2c803 100644 --- a/src/DesktopNavigation.tsx +++ b/src/DesktopNavigation.tsx @@ -16,7 +16,7 @@ import { import { IonReactRouter } from "@ionic/react-router"; import { Redirect, Route } from "react-router"; import { listSharp, map } from "ionicons/icons"; -import DataLayerDrawer from "./components/DataLayerSelector"; +import DataLayerDrawer from "./components/archive/DataLayerSelector"; import TreeOverviewPage from "./pages/TreeOverviewPage"; import InventoryListPage from "./pages/InventoryListPage"; import MapPage from "./pages/MobilePage"; diff --git a/src/components/ActiveMapSelectionButton.tsx b/src/components/ActiveMapSelectionButton.tsx index 0d4d181..0559f1d 100644 --- a/src/components/ActiveMapSelectionButton.tsx +++ b/src/components/ActiveMapSelectionButton.tsx @@ -1,7 +1,6 @@ import { IonButton, IonImg, IonNote } from "@ionic/react"; import { useEffect, useState } from "react"; import { useLayers } from "../context/layers"; -import { setCacheNameDetails } from "workbox-core"; interface ActiveMapSelectionButtonProps { height: number; diff --git a/src/components/BaseLayerSelector.tsx b/src/components/BaseLayerSelector.tsx deleted file mode 100644 index e26e06a..0000000 --- a/src/components/BaseLayerSelector.tsx +++ /dev/null @@ -1,250 +0,0 @@ -import { - IonButton, - IonButtons, - IonCheckbox, - IonCol, - IonContent, - IonGrid, - IonIcon, - IonImg, - IonItem, - IonLabel, - IonList, - IonListHeader, - IonModal, - IonNote, - IonPopover, - IonRadio, - IonRadioGroup, - IonRow, - IonText, - IonTitle, - IonToolbar, -} from "@ionic/react"; -import { close, closeCircle, layers } from "ionicons/icons"; -import { useState } from "react"; -import { useLayers } from "../context/layers"; -// import "./BaseLayerSelector.css"; -import MapSelectionButton from "./MapSelectionButton"; - -interface BaseLayerPopoverProps { - height: number; - width: number; -} - -const BaseLayerVisualSelector: React.FC = ({ - height, - width, -}) => { - return ( -
- - - - -
- ); -}; - -// const BaseLayerSelector: React.FC = () => { -// // subscribe to the available Inventories -// const layers = useLayers(); - -// return ( -// -// -// Base Layer -// -// -// -// !!e.detail.value -// ? layers.setBaseLayerTo([e.detail.value]) -// : layers.setBaseLayerTo([]) -// } -// value={layers.activeBaseLayer.toString()} -// > -// {layers.availableBaseLayer.map((l) => ( -// -// {l.title} -// -// -// ))} -// -// -// -// Description -// -// -// -// This is the Description of the base layer -// -// -// -// ); -// }; - -export const BaseLayerSheetModal: React.FC<{ - modal: React.RefObject; -}> = ({ modal }) => { - return ( - - - Map Type Selection - - modal.current?.dismiss()}> - - - - -
-
- - -
-
- - -
-
- {/*
*/} - - ); -}; - -export const BaseLayerPopover: React.FC = () => { - return ( - -
- - - - -
- - ); -}; diff --git a/src/components/InventoryList.tsx b/src/components/InventoryList.tsx index 1e43bb8..111aacc 100644 --- a/src/components/InventoryList.tsx +++ b/src/components/InventoryList.tsx @@ -19,7 +19,6 @@ import { bookmark, bookmarkOutline, filterOutline, - navigateOutline, } from "ionicons/icons"; import { useState } from "react"; import { useHistory } from "react-router"; diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx index c990e15..53f11bb 100644 --- a/src/components/MainMapMaplibre.tsx +++ b/src/components/MainMapMaplibre.tsx @@ -8,9 +8,7 @@ import InventorySource from "./map-components/InventorySource"; import BaseLayerSource from "./map-components/BaseLayerSource"; import UserLocationSource from "./map-components/UserLocationSource"; import LayerInteraction from "./map-components/LayerInteraction"; -import { IonButton, IonIcon, IonLabel } from "@ionic/react"; -import { bookmarks, chevronDownOutline, options } from "ionicons/icons"; -import MapSelectionButton from "./MapSelectionButton"; + const MainMap: React.FC = () => { // onload callback handler const onLoad = (e: any) => { diff --git a/src/components/MapSelectionButton.tsx b/src/components/MapSelectionButton.tsx index 95e442c..3448566 100644 --- a/src/components/MapSelectionButton.tsx +++ b/src/components/MapSelectionButton.tsx @@ -1,13 +1,4 @@ -import { - IonButton, - IonContent, - IonHeader, - IonImg, - IonNote, - IonPage, - IonTitle, - IonToolbar, -} from "@ionic/react"; +import { IonButton, IonImg, IonNote } from "@ionic/react"; import React from "react"; import { useLayers } from "../context/layers"; diff --git a/src/components/TreeDetails.tsx b/src/components/TreeDetails.tsx index 1b86196..fc30df1 100644 --- a/src/components/TreeDetails.tsx +++ b/src/components/TreeDetails.tsx @@ -1,6 +1,4 @@ import { - IonBackButton, - IonButtons, IonCard, IonCardContent, IonCardHeader, @@ -8,18 +6,12 @@ import { IonCardTitle, IonCol, IonGrid, - IonHeader, IonItem, IonLabel, - IonListHeader, IonNote, - IonPage, IonRow, IonSegment, IonSegmentButton, - IonText, - IonTitle, - IonToolbar, } from "@ionic/react"; import { Data, Layout } from "plotly.js"; import { useEffect, useState } from "react"; diff --git a/src/components/VariableSelector.tsx b/src/components/VariableSelector.tsx index 4216294..1db3d78 100644 --- a/src/components/VariableSelector.tsx +++ b/src/components/VariableSelector.tsx @@ -26,7 +26,7 @@ const VarialbeSelector: React.FC = () => { slot="end" value="BHD" onClick={() => { - setActiveVariable("Radius"); + setActiveVariable("BHD"); }} > diff --git a/src/components/DataLayerSelector.tsx b/src/components/archive/DataLayerSelector.tsx similarity index 74% rename from src/components/DataLayerSelector.tsx rename to src/components/archive/DataLayerSelector.tsx index 4d2b1db..7867534 100644 --- a/src/components/DataLayerSelector.tsx +++ b/src/components/archive/DataLayerSelector.tsx @@ -12,17 +12,16 @@ import { } from "@ionic/react"; import { scanOutline } from "ionicons/icons"; -import { useData } from "../context/data"; -import { useLayers } from "../context/layers"; -import FilterBar from "./FilterBar"; -import RangeFilter from "./RangeFilter"; +import { useData } from "../../context/data"; +import { useLayers } from "../../context/layers"; +import RangeFilter from "../RangeFilter"; const DataLayerDrawer: React.FC = () => { // subscribe to the available Inventories const layers = useLayers(); // get the current filter state for badges - const { inventoryCount } = useData() + const { inventoryCount } = useData(); const toggleInventoryLayer = (name: string) => { if (layers.activeInventoryLayer.includes(name)) { @@ -37,14 +36,21 @@ const DataLayerDrawer: React.FC = () => { Data - { inventoryCount.total } + + {inventoryCount.total} + {layers.availableInventoryLayer.map((l) => ( {l.title} - layers.flyToFeature('inventory')}> + layers.flyToFeature("inventory")} + > { Filter - { inventoryCount.filtered } + + {inventoryCount.filtered} + diff --git a/src/components/FilterBar.css b/src/components/archive/FilterBar.css similarity index 100% rename from src/components/FilterBar.css rename to src/components/archive/FilterBar.css diff --git a/src/components/FilterBar.tsx b/src/components/archive/FilterBar.tsx similarity index 100% rename from src/components/FilterBar.tsx rename to src/components/archive/FilterBar.tsx diff --git a/src/components/map-components/InventorySource.tsx b/src/components/map-components/InventorySource.tsx index 0060323..e1b3e35 100644 --- a/src/components/map-components/InventorySource.tsx +++ b/src/components/map-components/InventorySource.tsx @@ -1,20 +1,12 @@ import { useEffect, useState } from "react"; import cloneDeep from "lodash.clonedeep"; import { CirclePaint, CircleLayout, MapLayerMouseEvent } from "mapbox-gl"; -import { Source, Layer, useMap, MapRef } from "react-map-gl"; +import { Source, Layer, useMap } from "react-map-gl"; import { useData } from "../../context/data"; import { InventoryData, InventoryFeature } from "../../context/data.model"; import { useLayers } from "../../context/layers"; -import { - IonCard, - IonCardContent, - IonCardHeader, - IonCardTitle, - IonItem, - IonLabel, - IonPopover, -} from "@ionic/react"; +import { IonPopover } from "@ionic/react"; import { useHistory } from "react-router"; import { useOffline } from "../../context/offline"; diff --git a/src/components/modal/BaseLayerModal.tsx b/src/components/modal/BaseLayerModal.tsx new file mode 100644 index 0000000..8594fb4 --- /dev/null +++ b/src/components/modal/BaseLayerModal.tsx @@ -0,0 +1,89 @@ +import { + IonButton, + IonButtons, + IonIcon, + IonModal, + IonTitle, + IonToolbar, +} from "@ionic/react"; +import MapSelectionButton from "../MapSelectionButton"; +import { closeCircle } from "ionicons/icons"; + +const BaseLayerSheetModal: React.FC<{ + modal: React.RefObject; +}> = ({ modal }) => { + return ( + + + Map Type Selection + + modal.current?.dismiss()}> + + + + +
+
+ + +
+
+ + +
+
+ {/* */} + + ); +}; + +export default BaseLayerSheetModal; diff --git a/src/components/RangeFilterModal.tsx b/src/components/modal/RangeFilterModal.tsx similarity index 70% rename from src/components/RangeFilterModal.tsx rename to src/components/modal/RangeFilterModal.tsx index 370aa60..324cb28 100644 --- a/src/components/RangeFilterModal.tsx +++ b/src/components/modal/RangeFilterModal.tsx @@ -1,13 +1,14 @@ import { IonButton, IonButtons, + IonContent, IonIcon, IonModal, IonTitle, IonToolbar, } from "@ionic/react"; -import { closeCircle } from "ionicons/icons"; -import RangeFilter from "./RangeFilter"; +import { closeCircleOutline } from "ionicons/icons"; +import RangeFilter from "../RangeFilter"; const RangeFilterSheetModal: React.FC<{ modal: React.RefObject; @@ -18,11 +19,13 @@ const RangeFilterSheetModal: React.FC<{ Filter Data modal.current?.dismiss()}> - + - + + + ); }; diff --git a/src/components/modal/VariableSelectionModal.tsx b/src/components/modal/VariableSelectionModal.tsx new file mode 100644 index 0000000..e229c62 --- /dev/null +++ b/src/components/modal/VariableSelectionModal.tsx @@ -0,0 +1,37 @@ +import { + IonButton, + IonButtons, + IonContent, + IonIcon, + IonModal, + IonTitle, + IonToolbar, +} from "@ionic/react"; +import { closeCircleOutline } from "ionicons/icons"; +import VarialbeSelector from "../VariableSelector"; + +const VariableSelectionModal: React.FC<{ + modal: React.RefObject; +}> = ({ modal }) => { + return ( + + + Select Variable + + modal.current?.dismiss()}> + + + + + + + + + ); +}; + +export default VariableSelectionModal; diff --git a/src/components/popover/BaseLayerPopover.tsx b/src/components/popover/BaseLayerPopover.tsx new file mode 100644 index 0000000..d27404b --- /dev/null +++ b/src/components/popover/BaseLayerPopover.tsx @@ -0,0 +1,60 @@ +import { IonPopover } from "@ionic/react"; +import MapSelectionButton from "../MapSelectionButton"; + +const BaseLayerPopover: React.FC = () => { + return ( + +
+ + + + +
+ + ); +}; + +export default BaseLayerPopover; diff --git a/src/components/RangeFilterPopover.tsx b/src/components/popover/RangeFilterPopover.tsx similarity index 92% rename from src/components/RangeFilterPopover.tsx rename to src/components/popover/RangeFilterPopover.tsx index 51cdf18..865ce92 100644 --- a/src/components/RangeFilterPopover.tsx +++ b/src/components/popover/RangeFilterPopover.tsx @@ -1,6 +1,6 @@ import { IonPopover } from "@ionic/react"; import React from "react"; -import RangeFilter from "./RangeFilter"; +import RangeFilter from "../RangeFilter"; const FilterBarPopover: React.FC = () => { return ( diff --git a/src/components/VvariableSelectionPopover.tsx b/src/components/popover/VariableSelectionPopover.tsx similarity index 91% rename from src/components/VvariableSelectionPopover.tsx rename to src/components/popover/VariableSelectionPopover.tsx index 7c79f0e..d6dba7a 100644 --- a/src/components/VvariableSelectionPopover.tsx +++ b/src/components/popover/VariableSelectionPopover.tsx @@ -1,6 +1,6 @@ import { IonPopover } from "@ionic/react"; import React from "react"; -import VarialbeSelector from "./VariableSelector"; +import VarialbeSelector from "../VariableSelector"; const VariableSelectionPopover: React.FC = () => { return ( diff --git a/src/pages/DesktopPage.tsx b/src/pages/DesktopPage.tsx index 90caa6b..40c6c79 100644 --- a/src/pages/DesktopPage.tsx +++ b/src/pages/DesktopPage.tsx @@ -19,14 +19,14 @@ import { settingsOutline } from "ionicons/icons"; import React from "react"; import InventoryList from "../components/InventoryList"; import MainMap from "../components/MainMapMaplibre"; -import { BaseLayerPopover } from "../components/BaseLayerSelector"; +import BaseLayerPopover from "../components/popover/BaseLayerPopover"; import { Route, Switch } from "react-router"; import TreeDetails from "../components/TreeDetails"; import Settings from "../components/Settings"; -import FilterBarPopover from "../components/RangeFilterPopover"; +import FilterBarPopover from "../components/popover/RangeFilterPopover"; import MapButtonGroup from "../components/MapButtonGroup"; import ActiveMapSelectionButton from "../components/ActiveMapSelectionButton"; -import VariableSelectionPopover from "../components/VvariableSelectionPopover"; +import VariableSelectionPopover from "../components/popover/VariableSelectionPopover"; const DesktopPage: React.FC = () => { return ( diff --git a/src/pages/InventoryListPage.tsx b/src/pages/InventoryListPage.tsx index 2b6e6eb..16c4a0c 100644 --- a/src/pages/InventoryListPage.tsx +++ b/src/pages/InventoryListPage.tsx @@ -10,7 +10,7 @@ import { IonTitle, IonToolbar, } from "@ionic/react"; -import { layers, listSharp, map } from "ionicons/icons"; +import { layers, map } from "ionicons/icons"; import React from "react"; import InventoryList from "../components/InventoryList"; diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx index d482282..73fd8a2 100644 --- a/src/pages/MobilePage.tsx +++ b/src/pages/MobilePage.tsx @@ -15,11 +15,12 @@ import { layers, listSharp, settingsOutline } from "ionicons/icons"; import { useRef } from "react"; import MainMap from "../components/MainMapMaplibre"; -import { BaseLayerSheetModal } from "../components/BaseLayerSelector"; +import BaseLayerSheetModal from "../components/modal/BaseLayerModal"; import "./MobilePage.css"; import MapButtonGroup from "../components/MapButtonGroup"; import ActiveMapSelectionButton from "../components/ActiveMapSelectionButton"; -import RangeFilterSheetModal from "../components/RangeFilterModal"; +import RangeFilterSheetModal from "../components/modal/RangeFilterModal"; +import VariableSelectionModal from "../components/modal/VariableSelectionModal"; // const MapButton: React.FC = () => { // return ( @@ -84,6 +85,7 @@ const MapPage: React.FC = () => { + ); diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx index bc11635..65d82dc 100644 --- a/src/pages/SettingsPage.tsx +++ b/src/pages/SettingsPage.tsx @@ -1,26 +1,32 @@ -import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/react" +import { + IonBackButton, + IonButtons, + IonContent, + IonHeader, + IonPage, + IonTitle, + IonToolbar, +} from "@ionic/react"; import Settings from "../components/Settings"; const SettingsPage: React.FC = () => { - return ( - - - - - - - - Settings - - + return ( + + + + + + + Settings + + - - - + + + + + ); +}; - - ) -} - -export default SettingsPage \ No newline at end of file +export default SettingsPage; diff --git a/src/pages/TreeOverviewPage.tsx b/src/pages/TreeOverviewPage.tsx index f814811..e8471dc 100644 --- a/src/pages/TreeOverviewPage.tsx +++ b/src/pages/TreeOverviewPage.tsx @@ -9,8 +9,6 @@ import { IonToolbar, } from "@ionic/react"; import { RouteComponentProps } from "react-router"; - - import TreeDetails from "../components/TreeDetails"; const TreeOverviewPage: React.FC> = ({ From 576a148c2876301cbdcaa344f3f71670336a2cc9 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 7 Apr 2023 12:55:21 +0200 Subject: [PATCH 29/33] adding modal reference for each modal --- src/components/modal/BaseLayerModal.tsx | 4 ++-- src/pages/MobilePage.tsx | 11 +++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/modal/BaseLayerModal.tsx b/src/components/modal/BaseLayerModal.tsx index 8594fb4..dc4d1e0 100644 --- a/src/components/modal/BaseLayerModal.tsx +++ b/src/components/modal/BaseLayerModal.tsx @@ -7,7 +7,7 @@ import { IonToolbar, } from "@ionic/react"; import MapSelectionButton from "../MapSelectionButton"; -import { closeCircle } from "ionicons/icons"; +import { closeCircle, closeCircleOutline } from "ionicons/icons"; const BaseLayerSheetModal: React.FC<{ modal: React.RefObject; @@ -22,7 +22,7 @@ const BaseLayerSheetModal: React.FC<{ Map Type Selection modal.current?.dismiss()}> - + diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx index 73fd8a2..20690a6 100644 --- a/src/pages/MobilePage.tsx +++ b/src/pages/MobilePage.tsx @@ -31,7 +31,10 @@ import VariableSelectionModal from "../components/modal/VariableSelectionModal"; // }; const MapPage: React.FC = () => { - const modal = useRef(null); + const baseLayerModal = useRef(null); + const filterModal = useRef(null); + const variableSelectionModal = useRef(null); + return ( @@ -83,9 +86,9 @@ const MapPage: React.FC = () => { - - - + + + ); From a906c0b5d9c01a0c585caf2d23df58cb0597abe5 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 7 Apr 2023 12:57:22 +0200 Subject: [PATCH 30/33] clean up --- src/pages/MobilePage.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/pages/MobilePage.tsx b/src/pages/MobilePage.tsx index 20690a6..db4cede 100644 --- a/src/pages/MobilePage.tsx +++ b/src/pages/MobilePage.tsx @@ -22,14 +22,6 @@ import ActiveMapSelectionButton from "../components/ActiveMapSelectionButton"; import RangeFilterSheetModal from "../components/modal/RangeFilterModal"; import VariableSelectionModal from "../components/modal/VariableSelectionModal"; -// const MapButton: React.FC = () => { -// return ( -// -// -// -// ); -// }; - const MapPage: React.FC = () => { const baseLayerModal = useRef(null); const filterModal = useRef(null); From 33dba9731fc64a1338ef22dfde10ca5dd1c251b9 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 7 Apr 2023 12:59:28 +0200 Subject: [PATCH 31/33] fixing spacing --- src/components/modal/RangeFilterModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modal/RangeFilterModal.tsx b/src/components/modal/RangeFilterModal.tsx index 324cb28..d7a9ad2 100644 --- a/src/components/modal/RangeFilterModal.tsx +++ b/src/components/modal/RangeFilterModal.tsx @@ -14,7 +14,7 @@ const RangeFilterSheetModal: React.FC<{ modal: React.RefObject; }> = ({ modal }) => { return ( - + Filter Data From c98804374c41adb18947a28b83c8dde18ecf8b33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mirko=20M=C3=A4licke?= Date: Fri, 7 Apr 2023 13:06:40 +0200 Subject: [PATCH 32/33] disable Selection button --- src/components/MapButtonGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MapButtonGroup.tsx b/src/components/MapButtonGroup.tsx index 2934eb1..9a43616 100644 --- a/src/components/MapButtonGroup.tsx +++ b/src/components/MapButtonGroup.tsx @@ -32,7 +32,7 @@ const MapButtonGroup: React.FC = ({ Filter - + Selection From 85d328f183b450d2a7b884b62f23fc629c1adf08 Mon Sep 17 00:00:00 2001 From: JesJehle Date: Fri, 7 Apr 2023 15:11:26 +0200 Subject: [PATCH 33/33] fixing issues of review --- src/components/ActiveMapSelectionButton.tsx | 1 + src/components/InventoryList.tsx | 98 +-------------------- src/components/MainMapMaplibre.tsx | 1 - src/components/MapSelectionButton.tsx | 4 +- src/components/modal/BaseLayerModal.tsx | 8 +- src/components/popover/BaseLayerPopover.tsx | 8 +- 6 files changed, 13 insertions(+), 107 deletions(-) diff --git a/src/components/ActiveMapSelectionButton.tsx b/src/components/ActiveMapSelectionButton.tsx index 0559f1d..e6671a4 100644 --- a/src/components/ActiveMapSelectionButton.tsx +++ b/src/components/ActiveMapSelectionButton.tsx @@ -17,6 +17,7 @@ const ActiveMapSelectionButton: React.FC = ({ const [titel, setTitel] = useState("OSM"); useEffect(() => { + // set the src and titel of the active map if (layers.activeBaseLayer.toString() === "density") { setSrc("assets/density.png"); setTitel("Density"); diff --git a/src/components/InventoryList.tsx b/src/components/InventoryList.tsx index 111aacc..70249fa 100644 --- a/src/components/InventoryList.tsx +++ b/src/components/InventoryList.tsx @@ -1,26 +1,13 @@ import { - IonBadge, IonButton, - IonCard, - IonCardSubtitle, - IonCardTitle, - IonCol, - IonGrid, IonIcon, IonItem, IonLabel, IonList, IonListHeader, - IonRow, IonThumbnail, } from "@ionic/react"; -import { - arrowForwardOutline, - bookmark, - bookmarkOutline, - filterOutline, -} from "ionicons/icons"; -import { useState } from "react"; +import { bookmarkOutline, filterOutline } from "ionicons/icons"; import { useHistory } from "react-router"; import distance from "@turf/distance"; @@ -32,8 +19,6 @@ import { InventoryFeature } from "../context/data.model"; import "./InventoryList.css"; const InventoryList: React.FC = () => { - const [hovered, setHovered] = useState(0); - // load the filtered inventory list const { filteredInventory } = useData(); @@ -41,11 +26,7 @@ const InventoryList: React.FC = () => { const history = useHistory(); // get the current position from the Settings - const { positionEnabled, position } = useSettings(); - - const handleOnHover = (id: number) => { - setHovered(id); - }; + const { position } = useSettings(); // we need to close the modal on navigate const onNavigate = (path: string) => { @@ -99,7 +80,6 @@ const InventoryList: React.FC = () => {

{f.properties.height.toFixed(1)}

{""}m

- {/* Height */}

{distString(f)} away

@@ -115,77 +95,3 @@ const InventoryList: React.FC = () => { }; export default InventoryList; - -{ - /* onNavigate(`/list/${f.id}`)} */ -} -{ - /* > */ -} -{ - /* */ -} -{ - /* */ -} - -// -// -// -// TREE ID -// {f.properties.treeid} -// -// {positionEnabled && position ? ( -// -// DISTANCE -// -// -//   {distString(f)} -// -// -// ) : null} -// -// RADIUS -// {f.properties.radius.toFixed(1)} -// -// -// onNavigate(`/list/${f.properties.treeid}`)} -// > -// -// -// -// -// - -// onNavigate(`/list/${f.i`}`)} -// style={{ -// marginBottom: "1.3rem", -// padding: "1rem 3rem", -// display: "flex", -// justifyContent: "space-between", -// }} -// > -//
-// TREE ID -// {f.id} -// -// -//   42m away -// -//
-//
-// -// -// -//
-// diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx index 53f11bb..e981675 100644 --- a/src/components/MainMapMaplibre.tsx +++ b/src/components/MainMapMaplibre.tsx @@ -74,7 +74,6 @@ const MainMap: React.FC = () => { // 47.884438269626294, 8.088652498339387 }} > -
diff --git a/src/components/MapSelectionButton.tsx b/src/components/MapSelectionButton.tsx index 3448566..0fa0b3c 100644 --- a/src/components/MapSelectionButton.tsx +++ b/src/components/MapSelectionButton.tsx @@ -4,7 +4,7 @@ import { useLayers } from "../context/layers"; interface MapSelectionButtonProps { name: string; - titel: string; + title: string; src: string; height: number; width: number; @@ -13,7 +13,7 @@ interface MapSelectionButtonProps { const MapSelectionButton: React.FC = ({ name, src, - titel, + title: titel, height, width, }) => { diff --git a/src/components/modal/BaseLayerModal.tsx b/src/components/modal/BaseLayerModal.tsx index dc4d1e0..67a28c7 100644 --- a/src/components/modal/BaseLayerModal.tsx +++ b/src/components/modal/BaseLayerModal.tsx @@ -47,14 +47,14 @@ const BaseLayerSheetModal: React.FC<{ @@ -68,14 +68,14 @@ const BaseLayerSheetModal: React.FC<{ diff --git a/src/components/popover/BaseLayerPopover.tsx b/src/components/popover/BaseLayerPopover.tsx index d27404b..3f7d0dc 100644 --- a/src/components/popover/BaseLayerPopover.tsx +++ b/src/components/popover/BaseLayerPopover.tsx @@ -27,28 +27,28 @@ const BaseLayerPopover: React.FC = () => {