From a2e3824c63ac8c533fe4bc7d728411789ea95a81 Mon Sep 17 00:00:00 2001 From: santiago <108626122+marcosantiagomuro@users.noreply.github.com> Date: Sun, 8 Oct 2023 19:44:50 +0200 Subject: [PATCH] test-graph-view | integration with dev --- .../RoadConditions/ConditionsMap.tsx | 21 ----- .../ConditionsGraph.tsx | 0 .../src/Components/RoadDetails/MapArea.tsx | 10 ++- .../src/Components/RoadDetails/RoadImage.tsx | 1 - frontend/src/css/road_conditions.css | 13 ---- frontend/src/css/road_details.css | 10 ++- frontend/src/pages/RoadConditions.tsx | 76 ------------------- frontend/src/pages/RoadDetails.tsx | 66 +++++++++++++++- 8 files changed, 79 insertions(+), 118 deletions(-) delete mode 100644 frontend/src/Components/RoadConditions/ConditionsMap.tsx rename frontend/src/Components/{RoadConditions => RoadDetails}/ConditionsGraph.tsx (100%) delete mode 100644 frontend/src/css/road_conditions.css delete mode 100644 frontend/src/pages/RoadConditions.tsx diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx deleted file mode 100644 index 9e4d6214..00000000 --- a/frontend/src/Components/RoadConditions/ConditionsMap.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import MapWrapper from '../Map/MapWrapper'; -import { FC } from 'react'; -import '../../css/road_conditions.css'; -import ForceMapUpdate from '../Map/ForceMapUpdate'; - -interface Props { - triggerUpdate: number; -} - -const ConditionsMap: FC = ({ triggerUpdate }) => { - //TODO trigger redrwaw the plot - - return ( -
- - - -
- ); -}; -export default ConditionsMap; diff --git a/frontend/src/Components/RoadConditions/ConditionsGraph.tsx b/frontend/src/Components/RoadDetails/ConditionsGraph.tsx similarity index 100% rename from frontend/src/Components/RoadConditions/ConditionsGraph.tsx rename to frontend/src/Components/RoadDetails/ConditionsGraph.tsx diff --git a/frontend/src/Components/RoadDetails/MapArea.tsx b/frontend/src/Components/RoadDetails/MapArea.tsx index 0d435662..4fb54da0 100644 --- a/frontend/src/Components/RoadDetails/MapArea.tsx +++ b/frontend/src/Components/RoadDetails/MapArea.tsx @@ -1,15 +1,21 @@ import React from 'react'; import ImageGallery from './ImageGallery'; import MapWrapper from '../Map/MapWrapper'; +import ForceMapUpdate from '../Map/ForceMapUpdate'; +interface Props { + triggerUpdate: number; +} /** * The map area op the road details(road inspect) page */ -const MapArea: React.FC = () => { +const MapArea: React.FC = ({ triggerUpdate }) => { return (
- + + +
{/* Use the imageGallery component */} diff --git a/frontend/src/Components/RoadDetails/RoadImage.tsx b/frontend/src/Components/RoadDetails/RoadImage.tsx index 640320b1..46ad113f 100644 --- a/frontend/src/Components/RoadDetails/RoadImage.tsx +++ b/frontend/src/Components/RoadDetails/RoadImage.tsx @@ -3,7 +3,6 @@ import React from 'react'; const maproadStyles = { margin: 0, padding: 20, - color: '#333', }; const road_area =

Road surface image

; diff --git a/frontend/src/css/road_conditions.css b/frontend/src/css/road_conditions.css deleted file mode 100644 index 0f2ca40a..00000000 --- a/frontend/src/css/road_conditions.css +++ /dev/null @@ -1,13 +0,0 @@ -.road-conditions-page-wrapper { - height: calc(100vh - var(--navbar-height)); - display: flex; - flex-direction: column; -} - -.road-conditions-graph { - position: relative; - width: 100vw; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/frontend/src/css/road_details.css b/frontend/src/css/road_details.css index 43eab5fa..cd96b9f9 100644 --- a/frontend/src/css/road_details.css +++ b/frontend/src/css/road_details.css @@ -13,7 +13,7 @@ .road-image, .map-area { /* background-color: #eee; Example color for the middle area */ - height: 60vh; /* Occupying half of the page vertically */ + height: 100%; /* Occupying half of the page vertically */ display: flex; flex-direction: column; justify-content: flex-start; @@ -81,6 +81,14 @@ transition: 0.4s; } +.road-conditions-graph { + position: relative; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; +} + /* Style to change the background color when switched on */ input:checked + .slider { background-color: #4caf50; diff --git a/frontend/src/pages/RoadConditions.tsx b/frontend/src/pages/RoadConditions.tsx deleted file mode 100644 index 3797b18b..00000000 --- a/frontend/src/pages/RoadConditions.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { ChartData } from 'chart.js'; - -import ConditionsMap from '../Components/RoadConditions/ConditionsMap'; -import ConditionsGraph from '../Components/RoadConditions/ConditionsGraph'; - -import { GraphProvider } from '../context/GraphContext'; - -import Split from 'react-split'; - -import '../css/split.css'; -import '../css/road_conditions.css'; -import { useEffect, useState } from 'react'; -import { getConditionsWay } from '../queries/conditions'; - -//this is to visualise the Road Conditions (GP) map -const RoadConditions = () => { - const [wayData, setWayData] = - useState>(); - const [triggerUpdate, setTriggerUpdate] = useState(0); - - console.log(wayData); - - useEffect(() => { - getConditionsWay('0cba0666-d75e-45bd-9da6-62ef0fe9544c', (wc) => { - console.log(wc); - setWayData({ - labels: wc.map((p) => p.way_dist * 100), - datasets: [ - { - //@ts-ignore - type: 'line' as const, - label: 'KPI', - borderColor: 'rgb(255, 99, 132)', - borderWidth: 2, - fill: false, - tension: 0.2, - data: wc.map((p) => p.KPI), - yAxisID: 'KPI', - }, - { - //@ts-ignore - type: 'line' as const, - label: 'DI', - borderColor: 'rgb(120, 245, 23)', - borderWidth: 2, - fill: false, - tension: 0.2, - data: wc.map((p) => p.DI), - yAxisID: 'DI', - }, - ], - }); - }); - }, []); - - return ( - - { - setTriggerUpdate((prev) => prev + 1); - }} - // dragInterval={50} - > - - - - - ); -}; - -export default RoadConditions; diff --git a/frontend/src/pages/RoadDetails.tsx b/frontend/src/pages/RoadDetails.tsx index b6cf86ba..81c19c31 100644 --- a/frontend/src/pages/RoadDetails.tsx +++ b/frontend/src/pages/RoadDetails.tsx @@ -1,19 +1,77 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import '../css/road_details.css'; // Import the CSS file import MapArea from '../Components/RoadDetails/MapArea'; import RoadImage from '../Components/RoadDetails/RoadImage'; import TopBar from '../Components/RoadDetails/TopBar'; +import Split from 'react-split'; +import ConditionsGraph from '../Components/RoadDetails/ConditionsGraph'; +import { ChartData } from 'chart.js'; +import { getConditionsWay } from '../queries/conditions'; +import '../css/split.css'; const RoadDetails = () => { const [showMapImageMode, setShowRoadImageMode] = useState(false); + const [wayData, setWayData] = + useState>(); + const [triggerUpdate, setTriggerUpdate] = useState(0); + + useEffect(() => { + getConditionsWay('0cba0666-d75e-45bd-9da6-62ef0fe9544c', (wc) => { + console.log(wc); + setWayData({ + labels: wc.map((p) => p.way_dist * 100), + datasets: [ + { + //@ts-ignore + type: 'line' as const, + label: 'KPI', + borderColor: 'rgb(255, 99, 132)', + borderWidth: 2, + fill: false, + tension: 0.2, + data: wc.map((p) => p.KPI), + yAxisID: 'KPI', + }, + { + //@ts-ignore + type: 'line' as const, + label: 'DI', + borderColor: 'rgb(120, 245, 23)', + borderWidth: 2, + fill: false, + tension: 0.2, + data: wc.map((p) => p.DI), + yAxisID: 'DI', + }, + ], + }); + }); + }, []); return (
- {showMapImageMode ? : } - {/* TODO: putting plots here */} -
{/* Content for the plot area */}
+ { + setTriggerUpdate((prev) => prev + 1); + }} + > +
+ {showMapImageMode ? ( + + ) : ( + + )} +
+ + + ,
); };