Fix misunderstanding (#177)

- Change survey selection
DTU-SE-Group-D · Dec 16, 2023 · 94e40c3 · 94e40c3
1 parent 7781d1c
commit 94e40c3
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 91 deletions.
diff --git a/backend/src/models.ts b/backend/src/models.ts
@@ -26,6 +26,16 @@ export interface ISurvey {
   timestamp: string;
 }
 
+/**
+ * Type of answer from backend for a survey.
+ */
+export interface SurveyListItem {
+  id: string;
+  geometry: number[][];
+  timestamp: string;
+  dynatest_id: number;
+}
+
 /**
  * The data of a survey.
  */
@@ -109,9 +119,3 @@ export enum MeasurementType {
   mu_std = 32,
   IRI = 33,
 }
-
-/** An array of surveys, identified by their id and timestamp. */
-export type SurveyList = {
-  id: string;
-  timestamp: string;
-}[];
diff --git a/backend/src/surveys/survey.controller.ts b/backend/src/surveys/survey.controller.ts
@@ -1,6 +1,6 @@
 import { Controller, Get, Query } from '@nestjs/common';
 
-import { ISurvey } from 'src/models';
+import { ISurvey, SurveyListItem } from 'src/models';
 import { SurveyService } from './survey.service';
 
 @Controller('surveys')
@@ -23,7 +23,7 @@ export class SurveyController {
    * @author Lyons
    */
   @Get('all')
-  getAllSurveys(): Promise<ISurvey[]> {
+  getAllSurveys(): Promise<SurveyListItem[]> {
     return this.service.getAllSurveys();
   }
 }
diff --git a/backend/src/surveys/survey.service.ts b/backend/src/surveys/survey.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@nestjs/common';
 import { InjectConnection, Knex } from 'nestjs-knex';
 import { Measurement, Survey } from '../tables';
-import { ISurvey, MeasurementType } from '../models';
+import { ISurvey, MeasurementType, SurveyListItem } from '../models';
 
 @Injectable()
 export class SurveyService {
@@ -59,9 +59,21 @@ export class SurveyService {
   /**
    * Asynchronously retrieves all surveys from the database, including their IDs and timestamps.
    *
-   * @author Lyons
+   * @author Lyons, Kerbourc'h
    */
-  async getAllSurveys(): Promise<ISurvey[]> {
-    return Survey(this.knex_group_d).select('id', 'timestamp');
+  async getAllSurveys(): Promise<SurveyListItem[]> {
+    return Survey(this.knex_group_d)
+      .select(
+        'id',
+        'timestamp',
+        this.knex_group_d.raw('ST_AsGeoJSON(section_geom)::json as geometry'),
+        'survey_id as dynatest_id',
+      )
+      .then((result) =>
+        result.map((survey) => ({
+          ...survey,
+          geometry: survey.geometry.coordinates[0],
+        })),
+      );
   }
 }
diff --git a/frontend/src/Components/Map/InfoCard.tsx b/frontend/src/Components/Map/InfoCard.tsx
@@ -2,15 +2,15 @@ import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../../css/roadinfo_card.css';
 import { IRoad } from '../../models/path';
-import { ISurvey } from '../../../../backend/src/models';
+import { SurveyListItem } from '../../models/models';
 
 interface Props {
   /** To control visibility */
   hidden: boolean;
   /** The road data to display */
   roadData?: IRoad;
   /** The survey data to display */
-  surveyData?: ISurvey;
+  surveyData?: SurveyListItem;
 }
 /**
  * A components that renders the info card when users click on a road with data
@@ -31,7 +31,11 @@ const InfoCard: React.FC<Props> = ({ hidden, roadData, surveyData }) => {
       });
     } else if (surveyData) {
       navigate(`/inspect/surveys/${surveyData.id}`, {
-        state: { name: new Date(surveyData.timestamp).toLocaleDateString() },
+        state: {
+          name: `${surveyData.dynatest_id} (${new Date(
+            surveyData.timestamp,
+          ).toLocaleDateString()})`,
+        },
       });
     }
   }, [roadData, surveyData, navigate]);
@@ -42,32 +46,26 @@ const InfoCard: React.FC<Props> = ({ hidden, roadData, surveyData }) => {
 
   return (
     <div className="roadinfo-card-content">
-      {roadData && (
-        <div className="roadinfo-text-container">
-          <div className="roadinfo-card-text">
-            <span className="text-title">Road Name:</span>{' '}
-            <span className="card-road-name">{roadData.way_name}</span>
-          </div>
-          <div className="roadinfo-card-text">
-            <span className="text-title"> Branch Number: </span>
-            <span className="card-road-length">{roadData.branches.length}</span>
-          </div>
+      <div className="roadinfo-text-container">
+        <div className="roadinfo-card-text">
+          <span className="text-title">
+            {roadData ? 'Road Name:' : 'Dynatest survey id:'}
+          </span>{' '}
+          <span className="card-road-name">
+            {roadData ? roadData.way_name : surveyData!.dynatest_id}
+          </span>
         </div>
-      )}
-      {surveyData && (
-        <div className="roadinfo-text-container">
-          <div className="roadinfo-card-text">
-            <span className="text-title">Survey ID:</span>
-            <span className="card-road-name">{surveyData.id}</span>
-          </div>
-          <div className="roadinfo-card-text">
-            <span className="text-title">Last updated:</span>
-            <span className="card-road-length">
-              {new Date(surveyData.timestamp).toLocaleDateString()}
-            </span>
-          </div>
+        <div className="roadinfo-card-text">
+          <span className="text-title">
+            {roadData ? 'Branch Number:' : 'Date: '}
+          </span>
+          <span className="card-road-length">
+            {roadData
+              ? roadData.branches.length
+              : new Date(surveyData!.timestamp).toLocaleDateString()}
+          </span>
         </div>
-      )}
+      </div>
       <button onClick={handleInspect} className="inspect-button">
         Inspect
       </button>

diff --git a/frontend/src/Components/Map/Inputs/Hamburger.tsx b/frontend/src/Components/Map/Inputs/Hamburger.tsx
@@ -1,32 +1,29 @@
 import React, { useEffect, useRef, useState } from 'react';
 import '../../../css/Sidebar.css';
 import { getAllSurveyData } from '../../../queries/conditions';
-import { SurveyList, ISurvey } from '../../../../../backend/src/models';
-import InfoCard from '../InfoCard';
+import { SurveyListItem } from '../../../models/models';
 
 interface HamburgerProps {
   /** Indicates if the sidebar is currently open. */
   isOpen: boolean;
   /** A function to open or close the sidebar. */
   toggle: () => void;
+  /** Callback to set the selected survey. */
+  setSelectedSurvey: (survey: SurveyListItem) => void;
 }
 
 /**
  *A component representing a burger menu icon and sidebar. It handles the display
  * of a sidebar based on the 'isOpen' state, and toggles visibility with 'toggle'.
  *
- * @param {HamburgerProps} props - The properties passed to the hamburger component.
- * @returns {JSX.Element} A React functional component rendering the sidebar and the hamburger menu icon.
- *
- * @author Lyons
+ * @author Lyons, Kerbourc'h
  */
-
-const HEIGHT_OF_EACH_SURVEY_ITEM = 40; // Define this constant if not defined elsewhere
-
-const Hamburger: React.FC<HamburgerProps> = ({ isOpen, toggle }) => {
-  const [surveys, setSurveys] = useState<ISurvey[]>([]);
-  const [selectedSurvey, setSelectedSurvey] = useState<ISurvey | null>(null);
-  const [, setSelectedSurveyPosition] = useState<number>(0);
+const Hamburger: React.FC<HamburgerProps> = ({
+  isOpen,
+  toggle,
+  setSelectedSurvey,
+}) => {
+  const [surveys, setSurveys] = useState<SurveyListItem[]>([]);
 
   const sidebarRef = useRef<HTMLDivElement>(null);
 
@@ -65,22 +62,14 @@ const Hamburger: React.FC<HamburgerProps> = ({ isOpen, toggle }) => {
   }, [isOpen, toggle]);
 
   useEffect(() => {
-    getAllSurveyData((data: SurveyList) => {
-      const transformedData: ISurvey[] = data.map((survey) => ({
-        id: survey.id,
-        timestamp: survey.timestamp,
-        geometry: [],
-        data: [],
-      }));
-      setSurveys(transformedData);
+    getAllSurveyData((data: SurveyListItem[]) => {
+      setSurveys(data);
     });
   }, []);
 
-  const handleSurveyClick = (surveyId: string, surveyIndex: number) => {
-    const survey = surveys.find((s) => s.id === surveyId);
-    setSelectedSurvey(survey || null);
-    const topPosition = surveyIndex * HEIGHT_OF_EACH_SURVEY_ITEM;
-    setSelectedSurveyPosition(topPosition);
+  const handleSurveyClick = (surveyIndex: number) => {
+    setSelectedSurvey(surveys[surveyIndex]);
+    toggle();
   };
 
   return (
@@ -98,7 +87,7 @@ const Hamburger: React.FC<HamburgerProps> = ({ isOpen, toggle }) => {
               <div
                 key={survey.id}
                 className="survey-block"
-                onClick={() => handleSurveyClick(survey.id, index + 1)}
+                onClick={() => handleSurveyClick(index)}
               >
                 <h4>Survey {index + 1}</h4>
                 <p>Date: {new Date(survey.timestamp).toLocaleDateString()}</p>
@@ -107,9 +96,6 @@ const Hamburger: React.FC<HamburgerProps> = ({ isOpen, toggle }) => {
           )}
         </div>
       </div>
-      {selectedSurvey && (
-        <InfoCard hidden={!isOpen} surveyData={selectedSurvey} />
-      )}
     </>
   );
 };

diff --git a/frontend/src/Components/RoadDetails/TopBar.tsx b/frontend/src/Components/RoadDetails/TopBar.tsx
@@ -123,7 +123,7 @@ const TopBar: React.FC<TopBarProps> = ({
         style={{ fontSize: '16px', marginLeft: '60px' }}
       >
         <span className="road-name-text">
-          {type === 'paths' ? 'Road Name' : 'Survey Date'} : {wayName}
+          {type === 'paths' ? 'Road Name' : 'Dynatest survey id'}: {wayName}
         </span>
       </div>
     </div>

diff --git a/frontend/src/css/roadinfo_card.css b/frontend/src/css/roadinfo_card.css
@@ -2,7 +2,7 @@
 .roadinfo-card-content {
   position: absolute;
   top: 90px;
-  left: 260px;
+  left: 20px;
   background: white;
   padding: 10px;
   border: 1px solid #ccc;

diff --git a/frontend/src/models/models.ts b/frontend/src/models/models.ts
@@ -41,11 +41,20 @@ export interface Conditions {
   distance: number;
 }
 
-export interface PathWithConditions {
+export interface Path {
   geometry: number[][];
+}
+
+export interface PathWithConditions extends Path {
   data: Conditions[];
 }
 
 export interface Survey extends PathWithConditions {
   id: string;
 }
+
+export interface SurveyListItem extends Path {
+  id: string;
+  timestamp: string;
+  dynatest_id: number;
+}