Navigation update separate mobile desktop #48
Conversation
|
I added the logic, how the navigation would be used within a single page to show different component. This is also not really working. It feels like we are extremely fighting the framework, trying to do stuff the components were not made for. I have to investigate a bit more, why the I am not sure, how we would implement navigation to tree details in mobile, but load the components directly on Desktop. My last shot are nested router-outlets, which gave me really weird animations in the first place. If that does not work, I guess we need to take a completely different route. |
|
check https://github.com/hydrocode-de/mathislewald/tree/use-nested-router this one implements the nested router. Works, kind of, but has a annoying delay. |
|
Got it. Works with the |
use react-router directly
|
Since, the initial draft is done, I would suggest merging this branch to main and continuing from there. |
|
To Do:
|
|
Ok, I think I am done. @mmaelicke have a look, merge if possible. |
| 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]); |
There was a problem hiding this comment.
a comment about the purpose would be nice
src/components/InventoryList.tsx
Outdated
| // <IonCard key={f.id}> | ||
| // <IonRow class="ion-padding ion-align-items-center"> | ||
| // <IonCol> | ||
| // <IonCardSubtitle>TREE ID</IonCardSubtitle> | ||
| // <IonCardTitle>{f.properties.treeid}</IonCardTitle> | ||
| // </IonCol> | ||
| // {positionEnabled && position ? ( | ||
| // <IonCol class="ion-text-center"> | ||
| // <IonCardSubtitle>DISTANCE</IonCardSubtitle> | ||
| // <IonCardTitle> | ||
| // <IonIcon icon={navigateOutline} size="small" /> | ||
| // {distString(f)} | ||
| // </IonCardTitle> | ||
| // </IonCol> | ||
| // ) : null} | ||
| // <IonCol class="ion-text-center ion-hide-sm-down"> | ||
| // <IonCardSubtitle>RADIUS</IonCardSubtitle> | ||
| // <IonCardTitle>{f.properties.radius.toFixed(1)}</IonCardTitle> | ||
| // </IonCol> | ||
| // <IonCol class="ion-text-end"> | ||
| // <IonButton | ||
| // // fill="outline" |
src/components/MainMapMaplibre.tsx
Outdated
| @@ -74,6 +74,7 @@ const MainMap: React.FC = () => { | |||
| // 47.884438269626294, 8.088652498339387 | |||
| }} | |||
| > | |||
| <div></div> | |||
|
|
||
| interface MapSelectionButtonProps { | ||
| name: string; | ||
| titel: string; |
src/components/VariableSelector.tsx
Outdated
There was a problem hiding this comment.
This component doesn't do anything up to now, right?
There was a problem hiding this comment.
No, this one is used in VariableSelectionPopover and VariableSelectionModal.
|
Ok, I resolved all issues you pointed out. I will merge this now. |
I made a first version of a separate navigation for mobile and desktop.
The mobile navigation is simple and I used the pages and routes for the map, list, settings and tree details.
The desktop navigation is more complicated and not finished yet. Since we are only working with one page and additional popovers and grids, I created a separate desktop page.
Here I used a grid to display the inventory list and map components, which works after some trial and error.
Now comes the more complicated part.
At the moment settings and treedetails are implemented as pages, to show them in a popup window next to the inventory list, I need to get the routing logic into some kind of state to render the clicked treedetails.
A short talk would be helpful here.
I would rather not merge the current branch, just yes, but please have a look and give feedback. I would implement the changes for the desktop version first and then merge.