adding tracks swiper

api/package.json

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

app/.gitignore

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

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.3.1",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,7 +16,9 @@
     "@noahspan/noahspan-components": "1.6.0",
     "axios": "^1.7.2",
     "dotenv": "^16.4.7",
+    "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",

app/src/App.tsx

@@ -1,7 +1,6 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import Flights from './components/flights/Flights';
-import Logbook from './components/logbook/Logbook';
 import Pilots from './components/pilots/Pilots';
+import Logbook from './components/logbook/Logbook';
 import SiteNav from './components/siteNav/SiteNav';
 import { useIsAuthenticated } from '@azure/msal-react';
 
@@ -20,10 +19,8 @@ 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

@@ -1,48 +0,0 @@
-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.tsx

@@ -4,6 +4,8 @@ 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';
@@ -33,7 +35,10 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
           config
         );
         const kml = new DOMParser().parseFromString(response.data, 'text/xml')
-         
+        // const converted = toGeoJSON.kml(dom);
+        
+        // rewind(converted, false);
+        
         convertedTracks.push(kml);
       }
 
@@ -44,20 +49,35 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
   }, [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>
+    <>
+      <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>
+    </>
   );
 }
 

app/src/components/logTracks/LogTracks.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useReducer } from "react";
-import { Button, Drawer, Grid, Icon, IconButton, IconName, Spinner, TextField, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
+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";
 import { useAccessToken } from "../../hooks/accessToken/UseAcessToken";
@@ -56,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[] = log.tracks ? JSON.parse(log.tracks!) : [];
+      const tracks: string[] = JSON.parse(log.tracks!);
 
       tracks.push(uploadUrl)
       log.tracks = JSON.stringify(tracks);
@@ -132,23 +132,13 @@ 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 disabled={state.isLoading ? true : false} onClick={onCancel}>
+          <IconButton onClick={onCancel}>
             <Icon iconName={IconName.XMARK} />
           </IconButton>
         </Grid>
         {mode === FormMode.EDIT &&
           <>
-            {state.isLoading &&
-              <>
-                <Grid display="flex" justifyContent="center" size={12}>
-                  <Spinner />
-                </Grid>
-                <Grid display="flex" justifyContent="center" size={12}>
-                  Loading...
-                </Grid>
-              </>
-            }
-            {!state.isLoading && state.tracks.length > 0 && state.tracks.map((track, index) => {
+            {state.tracks.length > 0 && state.tracks.map((track, index) => {
               const trackSplit = track.split('/')
               const filename = trackSplit[trackSplit.length - 1];
 
@@ -165,18 +155,17 @@ const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTrack
             })}
             <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
+                {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
               </Button>
               {mode.toString() !== FormMode.VIEW && (
                 <Button
                   component='label'
-                  disabled={state.isLoading ? true : false}
+                  loading={state.isLoading}
                   startIcon={<Icon iconName={IconName.UPLOAD} />}
                   variant='contained'
                 >

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 && JSON.parse(info.row.original.tracks).length > 0) {
+      if (info.row.original.tracks && 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} mode='logbook' onOpenCloseForm={onOpenCloseEntryForm} />
+              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
             }
           </Grid>
         )}

app/src/components/logbookCard/LogbookCard.tsx

@@ -1,19 +1,18 @@
 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, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
   return (
     <Grid container spacing={2}>
       {logs.map((log) => {
-        console.log(log)
         return (
           <Grid size={12}>
             <Card key={log.rowKey}>
               <CardHeader
-                action={mode === 'logbook' ? <ActionMenu id={log.rowKey} onDelete={onDelete!} onOpenCloseForm={onOpenCloseForm!} /> : null}
+                action={<ActionMenu id={log.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
                 subheader={log.pilotName}
                 title={log.date}
                 slotProps={{
@@ -27,14 +26,6 @@ const LogbookCard = ({ logs, mode, 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>
@@ -59,24 +50,6 @@ const LogbookCard = ({ logs, mode, 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,7 +3,6 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry";
 
 export interface LogbookCardProps {
   logs: ILogbookEntry[];
-  mode: 'flights' | 'logbook';
-  onDelete?: (entryId: string) => void;
-  onOpenCloseForm?: (formMode: FormMode, id: string) => void;
+  onDelete: (entryId: string) => void;
+  onOpenCloseForm: (formMode: FormMode, id: string) => void;
 }

app/src/components/siteNav/SiteNav.tsx

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

app/src/hooks/logs/UseLogs.tsx

@@ -1,46 +0,0 @@
-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,4 +1,3 @@
 body {
   background-color: #f2f2f2;
-  margin: 8px;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "1.3.0",
+  "version": "1.2.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\"",

pnpm-lock.yaml

@@ -166,9 +166,15 @@ importers:
       dotenv:
         specifier: ^16.4.7
         version: 16.4.7
+      install:
+        specifier: ^0.13.0
+        version: 0.13.0
       leaflet:
         specifier: ^1.9.4
         version: 1.9.4
+      pure-react-carousel:
+        specifier: ^1.32.0
+        version: 1.32.0(react-dom@19.0.0-rc.1(react@19.0.0-rc.1))(react@19.0.0-rc.1)
       react:
         specifier: 19.0.0-rc.1
         version: 19.0.0-rc.1
@@ -3031,9 +3037,16 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  deep-freeze@0.0.1:
+    resolution: {integrity: sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  deepmerge@2.2.1:
+    resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==}
+    engines: {node: '>=0.10.0'}
+
   deepmerge@4.2.2:
     resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
     engines: {node: '>=0.10.0'}
@@ -3172,6 +3185,9 @@ packages:
     resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
     engines: {node: '>=18'}
 
+  equals@1.0.5:
+    resolution: {integrity: sha512-wI15a6ZoaaXPv+55+Vh2Kqn3+efKRv8QPtcGTjW5xmanMnQzESdAt566jevtMZyt3W/jwLDTzXpMph5ECDJ2zg==}
+
   errno@0.1.8:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
     hasBin: true
@@ -3725,6 +3741,10 @@ packages:
     resolution: {integrity: sha512-vI2w4zl/mDluHt9YEQ/543VTCwPKWiHzKtm9dM2V0NdFcqEexDAjUHzO1oA60HRNaVifGXXM1tRRNluLVHa0Kg==}
     engines: {node: '>=18'}
 
+  install@0.13.0:
+    resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==}
+    engines: {node: '>= 0.10'}
+
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -4006,6 +4026,9 @@ packages:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
 
+  jkroso-type@1.1.1:
+    resolution: {integrity: sha512-zZgay+fPG6PgMUrpyFADmQmvLo39+AZa7Gc5pZhev2RhDxwANEq2etwD8d0e6rTg5NkwOIlQmaEmns3draC6Ng==}
+
   joi@17.13.3:
     resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
 
@@ -4768,6 +4791,12 @@ packages:
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
+  pure-react-carousel@1.32.0:
+    resolution: {integrity: sha512-RW0zKjjId1Xmspcqdu3v0pmlce3BVDACJ0fzt1+ZPJ4GxqJbIqt2kPAh1e5M19S5BDewihnq6kz4kIaGXleO3w==}
+    peerDependencies:
+      react: 15.x || 16.x || 17.x || 18.x
+      react-dom: 15.x || 16.x || 17.x || 18.x
+
   qs@6.13.0:
     resolution: {integrity: sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==}
     engines: {node: '>=0.6'}
@@ -9038,8 +9067,12 @@ snapshots:
     optionalDependencies:
       babel-plugin-macros: 3.1.0
 
+  deep-freeze@0.0.1: {}
+
   deep-is@0.1.4: {}
 
+  deepmerge@2.2.1: {}
+
   deepmerge@4.2.2: {}
 
   deepmerge@4.3.1: {}
@@ -9144,6 +9177,10 @@ snapshots:
 
   environment@1.1.0: {}
 
+  equals@1.0.5:
+    dependencies:
+      jkroso-type: 1.1.1
+
   errno@0.1.8:
     dependencies:
       prr: 1.0.1
@@ -9920,6 +9957,8 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 6.2.0
 
+  install@0.13.0: {}
+
   ipaddr.js@1.9.1: {}
 
   is-arguments@1.2.0:
@@ -10376,6 +10415,8 @@ snapshots:
 
   jiti@1.21.7: {}
 
+  jkroso-type@1.1.1: {}
+
   joi@17.13.3:
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -11125,6 +11166,16 @@ snapshots:
 
   pure-rand@6.1.0: {}
 
+  pure-react-carousel@1.32.0(react-dom@19.0.0-rc.1(react@19.0.0-rc.1))(react@19.0.0-rc.1):
+    dependencies:
+      '@babel/runtime': 7.26.10
+      deep-freeze: 0.0.1
+      deepmerge: 2.2.1
+      equals: 1.0.5
+      prop-types: 15.8.1
+      react: 19.0.0-rc.1
+      react-dom: 19.0.0-rc.1(react@19.0.0-rc.1)
+
   qs@6.13.0:
     dependencies:
       side-channel: 1.1.0