Feature/71 add leaflet to view tracks drawer (#72)

* adding leaflet * adding tracks swiper * adding tracks swiper * adding tracks swiper * adding tracks swiper * adding tracks swiper * adding tracks swiper
2025-03-22 23:42:08 -05:00
parent 08498a64d8
commit 0f1e303c27
8 changed files with 857 additions and 785 deletions
--- a/app/package.json
+++ b/app/package.json
@@ -13,16 +13,23 @@
  "dependencies": {
    "@azure/msal-browser": "^4.0.1",
    "@azure/msal-react": "^3.0.1",
-    "@noahspan/noahspan-components": "^1.6.0",
+    "@noahspan/noahspan-components": "1.6.0",
    "axios": "^1.7.2",
    "dotenv": "^16.4.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "install": "^0.13.0",
+    "leaflet": "^1.9.4",
+    "pure-react-carousel": "^1.32.0",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
    "react-hook-form": "^7.51.4",
-    "react-router-dom": "^6.23.0"
+    "react-leaflet": "^5.0.0",
+    "react-leaflet-kml": "^2.1.2",
+    "react-router-dom": "^6.23.0",
+    "swiper": "^11.2.6"
  },
  "devDependencies": {
    "@microsoft/microsoft-graph-types": "^2.40.0",
+    "@types/leaflet": "^1.9.16",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
--- a/app/src/components/logTrackMaps/LogTrackMaps.css
+++ b/app/src/components/logTrackMaps/LogTrackMaps.css
@@ -0,0 +1,53 @@
+#app {
+  height: 100%;
+}
+html,
+body {
+  position: relative;
+  height: 100%;
+}
+
+body {
+  background: #eee;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #000;
+  margin: 0;
+  padding: 0;
+}
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-wrapper {
+  margin-bottom: 20px;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.swiper-pagination-bullet {
+  background-color: #000000;
+  height: 13px;
+  width: 13px;
+  border: 2px solid #FFFFFF;
+}
+
+.swiper-pagination-bullet-active {
+  box-shadow: 0 0 0 1px #000000;
+}
--- a/app/src/components/logTrackMaps/LogTrackMaps.tsx
+++ b/app/src/components/logTrackMaps/LogTrackMaps.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { LogTrackMapsProps } from './LogTrackMapsProps.interface';
+import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
+import { AxiosInstance, AxiosResponse } from 'axios';
+import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
+import { useIsAuthenticated } from '@azure/msal-react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination } from 'swiper/modules';
+import { MapContainer, TileLayer } from 'react-leaflet';
+import ReactLeafletKml from 'react-leaflet-kml';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css';
+import './LogTrackMaps.css';
+import 'leaflet/dist/leaflet.css';
+
+const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
+  const [tracks, setTracks] = useState<any[]>([])
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+  
+  useEffect(() => {
+    const getTracks = async () => {
+      const convertedTracks: any[] = []
+
+      for (const trackUrl of trackUrls) {
+        const trackUrlSplit = trackUrl.split('/')
+        const filename = trackUrlSplit[trackUrlSplit.length - 1];
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/logs/log/${rowKey}/track?fileName=${filename}`,
+          config
+        );
+        const kml = new DOMParser().parseFromString(response.data, 'text/xml')
+        // const converted = toGeoJSON.kml(dom);
+        
+        // rewind(converted, false);
+        
+        convertedTracks.push(kml);
+      }
+
+      setTracks(convertedTracks)
+    }
+
+    getTracks();
+  }, [trackUrls])
+
+  return (
+    <>
+      <Swiper
+        spaceBetween={30}
+        pagination={{
+          clickable: true,
+        }}
+        modules={[Pagination]}
+        className="mySwiper"
+      >
+        {tracks.length > 0 && tracks.map((track) => {
+          return (
+            <SwiperSlide>
+              <MapContainer 
+                center={[45.14489, -93.21019]} 
+                scrollWheelZoom={false}
+                style={{ height: '500px', width: '100%' }}
+                zoom={8}
+              >
+                <TileLayer
+                  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <ReactLeafletKml kml={track} />
+              </MapContainer>
+            </SwiperSlide>
+          )
+        })}
+      </Swiper>
+    </>
+  );
+}
+
+export default LogTrackMaps;
--- a/app/src/components/logTrackMaps/LogTrackMapsProps.interface.ts
+++ b/app/src/components/logTrackMaps/LogTrackMapsProps.interface.ts
@@ -0,0 +1,4 @@
+export interface LogTrackMapsProps {
+  rowKey: string;
+  trackUrls: string[];
+}
--- a/app/src/components/logTracks/LogTracks.tsx
+++ b/app/src/components/logTracks/LogTracks.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useReducer, useState } from "react";
+import { useEffect, useReducer } from "react";
 import { Button, Drawer, Grid, Icon, IconButton, IconName, TextField, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
 import { useHttpClient } from "../../hooks/httpClient/UseHttpClient";
 import { AxiosInstance, AxiosResponse } from "axios";
@@ -9,6 +9,7 @@ import { useIsAuthenticated } from "@azure/msal-react";
 import { ILogbookEntry } from "../logbook/ILogbookEntry";
 import ConfirmationDialog from "../confirmationDialog/ConfirmationDialog";
 import { initialState, reducer } from "./reducer";
+import LogTrackMaps from "../logTrackMaps/LogTrackMaps";

 const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTracksProps) => {
  const [state, dispatch] = useReducer(reducer, initialState)
@@ -135,43 +136,49 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
            <Icon iconName={IconName.XMARK} />
          </IconButton>
        </Grid>
-          {state.tracks.length > 0 && state.tracks.map((track, index) => {
-            const trackSplit = track.split('/')
-            const filename = trackSplit[trackSplit.length - 1];
+        {mode === FormMode.EDIT &&
+          <>
+            {state.tracks.length > 0 && state.tracks.map((track, index) => {
+              const trackSplit = track.split('/')
+              const filename = trackSplit[trackSplit.length - 1];

-            return (
-              <>
-                <Grid size={11}>
-                  <TextField disabled={true} fullWidth value={filename} />
-                </Grid>
-                <Grid size={1}>
-                  <IconButton onClick={() => onDeleteTrack(filename, index)}><Icon iconName={IconName.TRASH} /></IconButton>
-                </Grid>
-              </>
-            )
-          })
+              return (
+                <>
+                  <Grid size={11}>
+                    <TextField disabled={true} fullWidth value={filename} />
+                  </Grid>
+                  <Grid size={1}>
+                    <IconButton onClick={() => onDeleteTrack(filename, index)}><Icon iconName={IconName.TRASH} /></IconButton>
+                  </Grid>
+                </>
+              )
+            })}
+            <Grid display='flex' gap={2} justifyContent='right' size={12}>
+              <Button
+                startIcon={<Icon iconName={IconName.XMARK} />}
+                variant="outlined"
+                onClick={onCancel}
+                size="small"
+              >
+                {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
+              </Button>
+              {mode.toString() !== FormMode.VIEW && (
+                <Button
+                  component='label'
+                  loading={state.isLoading}
+                  startIcon={<Icon iconName={IconName.UPLOAD} />}
+                  variant='contained'
+                >
+                  Upload Track
+                  <input hidden onChange={handleFileUpload} type='file' />
+                </Button>
+              )}
+            </Grid>
+          </>
+        }
+        {mode === FormMode.VIEW && 
+          <LogTrackMaps rowKey={selectedRowKey!} trackUrls={state.tracks} />
        }
-        <Grid display='flex' gap={2} justifyContent='right' size={12}>
-          <Button
-            startIcon={<Icon iconName={IconName.XMARK} />}
-            variant="outlined"
-            onClick={onCancel}
-            size="small"
-          >
-            {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
-          </Button>
-          {mode.toString() !== FormMode.VIEW && (
-            <Button
-              component='label'
-              loading={state.isLoading}
-              startIcon={<Icon iconName={IconName.UPLOAD} />}
-              variant='contained'
-            >
-              Upload Track
-              <input hidden onChange={handleFileUpload} type='file' />
-            </Button>
-          )}
-        </Grid>
      </Grid>
      {state.isConfirmDialogOpen && (
        <ConfirmationDialog
@@ -183,6 +190,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
          title="Confirm Delete"
        />
      )}
+      
    </Drawer>
  )
 }