Merge pull request #254 from green-ecolution/feature/add-vehicle-api

feat: add vehilce api

frontend/src/api/backendApi.ts

@@ -12,6 +12,7 @@ import {
   TreeApi,
   TreeClusterApi,
   UserApi,
+  VehicleApi,
 } from '@green-ecolution/backend-client'
 import { redirect } from '@tanstack/react-router'
 
@@ -79,6 +80,7 @@ export const infoApi = new InfoApi(config)
 export const userApi = new UserApi(config)
 export const regionApi = new RegionApi(config)
 export const sensorApi = new SensorApi(config)
+export const vehicleApi = new VehicleApi(config)
 export const importApi = new FileImportApi(
   new Configuration({
     ...configParams,

frontend/src/api/queries.ts

@@ -11,6 +11,8 @@ import {
   TreeCluster,
   TreeClusterList,
   TreeList,
+  vehicleApi,
+  VehicleList,
 } from './backendApi'
 
 export const treeClusterQuery = () =>
@@ -59,3 +61,9 @@ export const infoQuery = () =>
     queryKey: ['info'],
     queryFn: () => infoApi.getAppInfo(),
   })
+
+export const vehicleQuery = () =>
+  queryOptions<VehicleList>({
+    queryKey: ['vehicle'],
+    queryFn: () => vehicleApi.getAllVehicles(),
+  })

frontend/src/routeTree.gen.ts

@@ -19,7 +19,6 @@ import { Route as ProtectedImport } from './routes/_protected'
 import { Route as IndexImport } from './routes/index'
 import { Route as AuthCallbackImport } from './routes/auth/callback'
 import { Route as ProtectedWaypointsImport } from './routes/_protected/waypoints'
-import { Route as ProtectedVehiclesImport } from './routes/_protected/vehicles'
 import { Route as ProtectedTreeclusterImport } from './routes/_protected/treecluster'
 import { Route as ProtectedTeamImport } from './routes/_protected/team'
 import { Route as ProtectedSettingsImport } from './routes/_protected/settings'
@@ -30,6 +29,7 @@ import { Route as ProtectedInfoImport } from './routes/_protected/info'
 import { Route as ProtectedDebugImport } from './routes/_protected/debug'
 import { Route as ProtectedDashboardImport } from './routes/_protected/dashboard'
 import { Route as ProtectedWaypointsIndexImport } from './routes/_protected/waypoints/index'
+import { Route as ProtectedVehiclesIndexImport } from './routes/_protected/vehicles/index'
 import { Route as ProtectedTreeclusterIndexImport } from './routes/_protected/treecluster/index'
 import { Route as ProtectedSettingsIndexImport } from './routes/_protected/settings/index'
 import { Route as ProtectedMapIndexImport } from './routes/_protected/map/index'
@@ -92,11 +92,6 @@ const ProtectedWaypointsRoute = ProtectedWaypointsImport.update({
   getParentRoute: () => ProtectedRoute,
 } as any)
 
-const ProtectedVehiclesRoute = ProtectedVehiclesImport.update({
-  path: '/vehicles',
-  getParentRoute: () => ProtectedRoute,
-} as any)
-
 const ProtectedTreeclusterRoute = ProtectedTreeclusterImport.update({
   path: '/treecluster',
   getParentRoute: () => ProtectedRoute,
@@ -147,6 +142,11 @@ const ProtectedWaypointsIndexRoute = ProtectedWaypointsIndexImport.update({
   getParentRoute: () => ProtectedWaypointsRoute,
 } as any)
 
+const ProtectedVehiclesIndexRoute = ProtectedVehiclesIndexImport.update({
+  path: '/vehicles/',
+  getParentRoute: () => ProtectedRoute,
+} as any)
+
 const ProtectedTreeclusterIndexRoute = ProtectedTreeclusterIndexImport.update({
   path: '/',
   getParentRoute: () => ProtectedTreeclusterRoute,
@@ -352,13 +352,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProtectedTreeclusterImport
       parentRoute: typeof ProtectedImport
     }
-    '/_protected/vehicles': {
-      id: '/_protected/vehicles'
-      path: '/vehicles'
-      fullPath: '/vehicles'
-      preLoaderRoute: typeof ProtectedVehiclesImport
-      parentRoute: typeof ProtectedImport
-    }
     '/_protected/waypoints': {
       id: '/_protected/waypoints'
       path: '/waypoints'
@@ -443,6 +436,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProtectedTreeclusterIndexImport
       parentRoute: typeof ProtectedTreeclusterImport
     }
+    '/_protected/vehicles/': {
+      id: '/_protected/vehicles/'
+      path: '/vehicles'
+      fullPath: '/vehicles'
+      preLoaderRoute: typeof ProtectedVehiclesIndexImport
+      parentRoute: typeof ProtectedImport
+    }
     '/_protected/waypoints/': {
       id: '/_protected/waypoints/'
       path: '/'
@@ -567,7 +567,6 @@ export const routeTree = rootRoute.addChildren({
         }),
       ProtectedTreeclusterIndexRoute,
     }),
-    ProtectedVehiclesRoute,
     ProtectedWaypointsRoute: ProtectedWaypointsRoute.addChildren({
       ProtectedWaypointsNewRoute,
       ProtectedWaypointsIndexRoute,
@@ -582,6 +581,7 @@ export const routeTree = rootRoute.addChildren({
         ProtectedTreeFormularNewRoute,
       }),
     }),
+    ProtectedVehiclesIndexRoute,
   }),
   LoginRoute,
   LogoutRoute,
@@ -618,10 +618,10 @@ export const routeTree = rootRoute.addChildren({
         "/_protected/settings",
         "/_protected/team",
         "/_protected/treecluster",
-        "/_protected/vehicles",
         "/_protected/waypoints",
         "/_protected/tree/$treeId",
-        "/_protected/tree"
+        "/_protected/tree",
+        "/_protected/vehicles/"
       ]
     },
     "/login": {
@@ -681,10 +681,6 @@ export const routeTree = rootRoute.addChildren({
         "/_protected/treecluster/"
       ]
     },
-    "/_protected/vehicles": {
-      "filePath": "_protected/vehicles.tsx",
-      "parent": "/_protected"
-    },
     "/_protected/waypoints": {
       "filePath": "_protected/waypoints.tsx",
       "parent": "/_protected",
@@ -751,6 +747,10 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "_protected/treecluster/index.tsx",
       "parent": "/_protected/treecluster"
     },
+    "/_protected/vehicles/": {
+      "filePath": "_protected/vehicles/index.tsx",
+      "parent": "/_protected"
+    },
     "/_protected/waypoints/": {
       "filePath": "_protected/waypoints/index.tsx",
       "parent": "/_protected/waypoints"

frontend/src/routes/_protected/vehicles/index.tsx

@@ -0,0 +1,60 @@
+import { vehicleQuery } from "@/api/queries";
+import LoadingInfo from "@/components/general/error/LoadingInfo";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export const Route = createFileRoute("/_protected/vehicles/")({
+  component: Vehicles,
+  meta: () => [
+    {
+      title: 'Fahrzeuge',
+      path: '/vehicles',
+    },
+  ]
+});
+
+function Vehicles() {
+  const { data: vehicleRes } = useSuspenseQuery(vehicleQuery())
+
+  return (
+    <div className="container mt-6">
+      <article className="mb-20 2xl:w-4/5">
+        <h1 className="font-lato font-bold text-3xl mb-4 lg:text-4xl xl:text-5xl">
+          Auflistung aller Fahrzeuge
+        </h1>
+        <p>
+          Hier finden Sie eine Übersicht aller Fahrzeuge, welche für Einsätze verwendet werden können.
+        </p>
+      </article>
+
+      <Suspense fallback={<LoadingInfo label="Daten werden geladen" />}>
+          <ErrorBoundary
+            fallback={
+              <p className="text-center text-dark-600 mt-10">
+                Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später
+                erneut.
+              </p>
+            }
+          >
+            <ul>
+              {vehicleRes.data?.length === 0 ? (
+                <li className="text-center text-dark-600 mt-10">
+                  <p>
+                    Es wurden leider keine Fahrzeuge gefunden.
+                  </p>
+                </li>
+              ) : (
+                vehicleRes.data?.map((vehicle, key) => (
+                  <li key={key} className="mb-5 last:mb-0">
+                    Fahrzeug {vehicle.id}
+                  </li>
+                ))
+              )}
+            </ul>
+          </ErrorBoundary>
+        </Suspense>
+    </div>
+  );
+}