display multiple kml files on same leaflet map component

* adding flights page

* adding flights page

* adding flights page

* adding flights page

* removing unused dependencies

* adding flights page

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "",
   "author": "",
   "private": true,

api/src/file/file.service.ts

@@ -7,6 +7,20 @@ import { ConfigService } from '@nestjs/config';
 
   private containerName: string;
 
+  private streamToBuffer(readableStream: NodeJS.ReadableStream) {
+    return new Promise<Buffer>((resolve, reject) => {
+      const chunks = [];
+
+      readableStream.on('data', (data) => {
+        chunks.push(data instanceof Buffer ? data : Buffer.from(data));
+      });
+      readableStream.on('end', () => {
+        resolve(Buffer.concat(chunks));
+      });
+      readableStream.on('error', reject)
+    })
+  }
+
   async getBlobServiceInstance() {
     const connectionString = this.configService.get<string>('azureStorageConnectionString');
     const blobServiceClient: BlobServiceClient = await BlobServiceClient.fromConnectionString(connectionString)
@@ -23,7 +37,7 @@ import { ConfigService } from '@nestjs/config';
     return blockBlobClient;
   }
 
-  async uploadFile(file: Express.Multer.File, containerName: string, rowKey: string) {
+  async uploadFile(file: Express.Multer.File, containerName: string, rowKey: string): Promise<string> {
     this.containerName = containerName;
 
     const blockBlobClient = await this.getBlobClient(`${rowKey}/${file.originalname}`);
@@ -34,7 +48,17 @@ import { ConfigService } from '@nestjs/config';
     return fileUrl;
   }
 
-  async deleteFile(containerName: string, rowKey:string, fileName: string) {
+  async downloadFile(containerName: string, rowKey: string, fileName: string): Promise<string> {
+    this.containerName = containerName;
+
+    const blockBlobClient = await this.getBlobClient(`${rowKey}/${fileName}`);
+    const downloadBlockBlobResponse = await blockBlobClient.download();
+    const downloaded: string = (await this.streamToBuffer(downloadBlockBlobResponse.readableStreamBody)).toString()
+    
+    return downloaded
+  }
+
+  async deleteFile(containerName: string, rowKey:string, fileName: string): Promise<void> {
       this.containerName = containerName;
 
       const blockBlobClient = await this.getBlobClient(`${rowKey}/${fileName}`);

api/src/log/log.controller.ts

@@ -8,6 +8,7 @@ import {
   Post,
   Put,
   Query,
+  StreamableFile,
   UploadedFile,
   UseGuards,
   UseInterceptors
@@ -22,14 +23,15 @@ import { FileService } from '../file/file.service';
 import { FileInterceptor } from '@nestjs/platform-express';
 
 @Controller('logs')
-@UseInterceptors(new LogInterceptor())
 export class LogController {
   constructor(
     private readonly fileService: FileService,
     private readonly logService: LogService
   ) {}
 
+ 
   @Get(':partitionKey/:rowKey')
+  @UseInterceptors(new LogInterceptor())
   async find(
     @Param('partitionKey') partitionKey: string,
     @Param('rowKey') rowKey: string
@@ -44,6 +46,7 @@ export class LogController {
   }
 
   @Get()
+  @UseInterceptors(new LogInterceptor())
   async findAll(): Promise<Log[]> {
     try {
       return await this.logService.findAll();
@@ -121,11 +124,18 @@ export class LogController {
     }
   }
 
+  @Get(':partitionKey/:rowKey/track')
+  async downloadTrack(@Param('rowKey') rowKey: string, @Query('fileName') fileName: string): Promise<string> {
+    const containerName = 'tracks';
+    const downloadedFile: string = await this.fileService.downloadFile(containerName, rowKey, fileName)
+
+    return downloadedFile;
+  }
+
   @UseGuards(AuthGuard)
   @Delete(':partitionKey/:rowKey/track')
   async deleteTrack(@Param('rowKey') rowKey: string, @Query('fileName') fileName: string): Promise<void> {
     try {
-      console.log(fileName)
       const containerName = 'tracks';
       
       return await this.fileService.deleteFile(containerName, rowKey, fileName)

app/.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,16 +13,21 @@
   "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",
+    "leaflet": "^1.9.4",
+    "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",

app/src/App.tsx

@@ -1,6 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import Pilots from './components/pilots/Pilots';
+import Flights from './components/flights/Flights';
 import Logbook from './components/logbook/Logbook';
+import Pilots from './components/pilots/Pilots';
 import SiteNav from './components/siteNav/SiteNav';
 import { useIsAuthenticated } from '@azure/msal-react';
 
@@ -19,8 +20,10 @@ const App = () => {
     <>
       <SiteNav />
       <Routes>
+        <Route path='/' element={<Flights />} />
+        <Route path="/logbook" element={<Logbook />} />
         <Route path="/pilots" element={<Pilots />} />
-        <Route path="/" element={<Logbook />} />
+        
       </Routes>
     </>
   );

app/src/components/flights/Flights.tsx

@@ -0,0 +1,48 @@
+import { Box, Container, Grid, Spinner } from "@noahspan/noahspan-components";
+import LogbookCard from "../logbookCard/LogbookCard";
+import { useEffect, useState } from "react";
+import { useLogs } from "../../hooks/logs/UseLogs";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+
+const Flights = () => {
+  const [flights, setFlights] = useState<ILogbookEntry[]>([]);
+  const { logs, isLoading } = useLogs();
+
+  useEffect(() => {
+    const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
+      if (log.tracks && JSON.parse(log.tracks).length > 0) {
+        return log;
+      }
+    })
+
+    if (flights && flights.length > 0) {
+      setFlights(flights)
+    }
+  }, [logs])
+  
+  return (
+    <Container>
+      <Box sx={{ margin: '20px' }}>
+        <Grid container spacing={2}>
+          {isLoading &&
+            <>
+              <Grid display="flex" justifyContent="center" size={12}>
+                <Spinner />
+              </Grid>
+              <Grid display="flex" justifyContent="center" size={12}>
+                Loading...
+              </Grid>
+            </>
+          }
+          {!isLoading &&
+            <Grid size={12}>
+              <LogbookCard logs={flights} mode='flights' />
+            </Grid>
+          }
+        </Grid>
+      </Box>
+    </Container>
+  )
+}
+
+export default Flights;

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;
+}

app/src/components/logTrackMaps/LogTrackMaps.tsx

@@ -0,0 +1,64 @@
+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 { 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')
+         
+        convertedTracks.push(kml);
+      }
+
+      setTracks(convertedTracks)
+    }
+
+    getTracks();
+  }, [trackUrls])
+
+  return (
+    <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"
+      />
+      {tracks.length > 0 && tracks.map((track) => (
+        <ReactLeafletKml kml={track} />
+      ))}
+    </MapContainer>
+  );
+}
+
+export default LogTrackMaps;

app/src/components/logTrackMaps/LogTrackMapsProps.interface.ts

@@ -0,0 +1,4 @@
+export interface LogTrackMapsProps {
+  rowKey: string;
+  trackUrls: string[];
+}

app/src/components/logTracks/LogTracks.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useReducer, useState } from "react";
-import { Button, Drawer, Grid, Icon, IconButton, IconName, TextField, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
+import { useEffect, useReducer } from "react";
+import { Button, Drawer, Grid, Icon, IconButton, IconName, Spinner, TextField, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
 import { useHttpClient } from "../../hooks/httpClient/UseHttpClient";
 import { AxiosInstance, AxiosResponse } from "axios";
 import { useAccessToken } from "../../hooks/accessToken/UseAcessToken";
@@ -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)
@@ -55,7 +56,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
       const uploadResponse: AxiosResponse = await httpClient.post(`api/logs/log/${selectedRowKey}/track`, formData, formDataConfig);
       const uploadUrl = uploadResponse.data.url;
       const log = await getLog();
-      const tracks: string[] = JSON.parse(log.tracks!);
+      const tracks: string[] = log.tracks ? JSON.parse(log.tracks!) : [];
 
       tracks.push(uploadUrl)
       log.tracks = JSON.stringify(tracks);
@@ -131,47 +132,64 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
           <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Tracks`}</Typography>
         </Grid>
         <Grid display="flex" justifyContent="right" size={1}>
-          <IconButton onClick={onCancel}>
+          <IconButton disabled={state.isLoading ? true : false} onClick={onCancel}>
             <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];
-
-            return (
+        {mode === FormMode.EDIT &&
+          <>
+            {state.isLoading &&
               <>
-                <Grid size={11}>
-                  <TextField disabled={true} fullWidth value={filename} />
+                <Grid display="flex" justifyContent="center" size={12}>
+                  <Spinner />
                 </Grid>
-                <Grid size={1}>
-                  <IconButton onClick={() => onDeleteTrack(filename, index)}><Icon iconName={IconName.TRASH} /></IconButton>
+                <Grid display="flex" justifyContent="center" size={12}>
+                  Loading...
                 </Grid>
               </>
-            )
-          })
+            }
+            {!state.isLoading && 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>
+                </>
+              )
+            })}
+            <Grid display='flex' gap={2} justifyContent='right' size={12}>
+              <Button
+                disabled={state.isLoading ? true : false}
+                startIcon={<Icon iconName={IconName.XMARK} />}
+                variant="outlined"
+                onClick={onCancel}
+                size="small"
+              >
+                Close
+              </Button>
+              {mode.toString() !== FormMode.VIEW && (
+                <Button
+                  component='label'
+                  disabled={state.isLoading ? true : false}
+                  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 +201,7 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
           title="Confirm Delete"
         />
       )}
+      
     </Drawer>
   )
 }

app/src/components/logbook/Logbook.tsx

@@ -53,7 +53,7 @@ const Logbook: React.FC<unknown> = () => {
     accessorKey: 'tracks',
     header: 'Tracks',
     cell: (info: any) => {
-      if (info.row.original.tracks && info.row.original.tracks.length > 0) {
+      if (info.row.original.tracks && JSON.parse(info.row.original.tracks).length > 0) {
         return (
           <IconButton onClick={() => onOpenCloseTracks(FormMode.VIEW, info.row.original.rowKey)}><Icon iconName={IconName.MAP_LOCATION_DOT} /></IconButton>
         )
@@ -261,7 +261,7 @@ const Logbook: React.FC<unknown> = () => {
               <Table columns={state.columns} data={state.entries} />
             )}
             {!isMedium && state.entries.length > 0 &&
-              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
+              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} mode='logbook' onOpenCloseForm={onOpenCloseEntryForm} />
             }
           </Grid>
         )}

app/src/components/logbookCard/LogbookCard.tsx

@@ -1,18 +1,19 @@
 import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components";
 import { LogbookCardProps } from "./LogbookCardProps.interface";
-import { useEffect } from "react";
 import ActionMenu from "../actionMenu/ActionMenu";
+import LogTrackMaps from "../logTrackMaps/LogTrackMaps";
 
 
-const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
   return (
     <Grid container spacing={2}>
       {logs.map((log) => {
+        console.log(log)
         return (
           <Grid size={12}>
             <Card key={log.rowKey}>
               <CardHeader
-                action={<ActionMenu id={log.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
+                action={mode === 'logbook' ? <ActionMenu id={log.rowKey} onDelete={onDelete!} onOpenCloseForm={onOpenCloseForm!} /> : null}
                 subheader={log.pilotName}
                 title={log.date}
                 slotProps={{
@@ -26,6 +27,14 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {
               />
               <CardContent>
                 <Grid container spacing={1}>
+                  {mode === 'flights' && log.tracks && JSON.parse(log.tracks).length > 0 &&
+                    <Grid size={12}>
+                      <LogTrackMaps 
+                        rowKey={log.rowKey}
+                        trackUrls={JSON.parse(log.tracks)}
+                      />
+                    </Grid>
+                  }
                   <Grid size={12}>
                     <Typography variant="subtitle2">Aircraft Make and Model</Typography>
                   </Grid>
@@ -50,6 +59,24 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {
                   <Grid size={12}>
                     <Typography variant="body1">{log.durationOfFlight}</Typography>
                   </Grid>
+                  {mode === 'logbook' && log.tracks && JSON.parse(log.tracks).length > 0 && 
+                    <>
+                      <Grid size={12}>
+                        <Typography variant="subtitle2">Tracks</Typography>
+                      </Grid>
+                      {JSON.parse(log.tracks).map((track: string) => {
+                        const trackSplit = track.split('/')
+                        const filename = trackSplit[trackSplit.length - 1];
+
+                        return (
+                          <Grid size={12}>
+                            <Typography variant="body1">{filename}</Typography>
+                          </Grid>
+                        )
+                        
+                      })}
+                    </>
+                  }
                   {log.notes &&
                     <>
                       <Grid size={12}>

app/src/components/logbookCard/LogbookCardProps.interface.ts

@@ -3,6 +3,7 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry";
 
 export interface LogbookCardProps {
   logs: ILogbookEntry[];
-  onDelete: (entryId: string) => void;
-  onOpenCloseForm: (formMode: FormMode, id: string) => void;
+  mode: 'flights' | 'logbook';
+  onDelete?: (entryId: string) => void;
+  onOpenCloseForm?: (formMode: FormMode, id: string) => void;
 }

app/src/components/siteNav/SiteNav.tsx

@@ -32,9 +32,13 @@ const SiteNav = () => {
   const getPages = () => {
     const pages = [
       {
-        name: 'Logbook',
+        name: 'Flights',
         url: '/'
       },
+      {
+        name: 'Logbook',
+        url: '/logbook'
+      },
       {
         name: 'Pilots',
         url: '/pilots'
@@ -79,7 +83,6 @@ const SiteNav = () => {
 
       return imageUrl;
     } catch (error) {
-      console.log(error);
       throw new Error();
     }
   };

app/src/hooks/logs/UseLogs.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { useHttpClient } from "../httpClient/UseHttpClient";
+import { useAccessToken } from "../accessToken/UseAcessToken";
+import { useIsAuthenticated } from "@azure/msal-react";
+import { AxiosInstance, AxiosResponse } from "axios";
+import { ILogbookEntry } from "../../components/logbook/ILogbookEntry";
+
+export const useLogs = () => {
+  const [logs, setLogs] = useState<ILogbookEntry[]>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    const getLogs = async () => {
+      try {
+        setIsLoading(true);
+
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/logs`,
+          config
+        );
+        const logs: ILogbookEntry[] = response.data;
+
+        logs.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+        setLogs(logs)
+      } catch (error) {
+        return error;
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    getLogs();
+  }, [])
+
+  return {
+    logs,
+    isLoading
+  }
+}

app/src/index.css

@@ -1,3 +1,4 @@
 body {
   background-color: #f2f2f2;
+  margin: 8px;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "scripts": {
     "start": "concurrently 'npm run start:azure -w api' 'wait-on tcp:0.0.0.0:7071 && npm run dev -w app'",
     "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",