From b10aba6f47c22dad6ccedfce9175c2ad71dcd269 Mon Sep 17 00:00:00 2001
From: Daniel Pettersson <danpe975@student.liu.se>
Date: Thu, 2 May 2024 10:44:43 +0200
Subject: [PATCH] SearchComponent has been updated now displaying varieties of
options depending on initial choice
---
frontend/src/Components/Navbar/Navbar.js | 8 ++-
frontend/src/Css/Navbar.css | 13 +++--
frontend/src/Css/Visualiser.css | 2 +-
frontend/src/Pages/Dashboard/Dashboard.jsx | 58 ++++++++++++++-------
frontend/src/Pages/Dashboard/Visualiser.jsx | 4 +-
5 files changed, 58 insertions(+), 27 deletions(-)
diff --git a/frontend/src/Components/Navbar/Navbar.js b/frontend/src/Components/Navbar/Navbar.js
index ffc4611..cd506b3 100644
--- a/frontend/src/Components/Navbar/Navbar.js
+++ b/frontend/src/Components/Navbar/Navbar.js
@@ -1,11 +1,17 @@
import React from 'react';
import '../../Css/Navbar.css'
-function TopNavBar() {
+function TopNavBar({toggleDisplay, displayMap}) {
return (
<div className="top-nav">
<button className='sign_out_button'>Sign Out</button>
+
+ {/* Toggle button to switch between Map and Visualiser */}
+ <button className='sign_out_button' onClick={toggleDisplay}>
+ {displayMap ? 'Switch to Visualiser' : 'Switch to Map'}
+ </button>
+
<h1 className='h1'>DASHBOARD</h1>
</div>
);
diff --git a/frontend/src/Css/Navbar.css b/frontend/src/Css/Navbar.css
index 9637c10..5330792 100644
--- a/frontend/src/Css/Navbar.css
+++ b/frontend/src/Css/Navbar.css
@@ -6,9 +6,14 @@
border-style: solid;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
+.sign_out_button{
+ margin: 5px;
+ height: 50px;
+
+}
.h1{
- margin-left: auto;
- margin-right: auto;
- margin-top: auto;
- margin-bottom: auto;
+ top: 4%;
+ left: 40%;
+ right: 50%;
+ position:absolute;
}
\ No newline at end of file
diff --git a/frontend/src/Css/Visualiser.css b/frontend/src/Css/Visualiser.css
index 5532c0f..03089fc 100644
--- a/frontend/src/Css/Visualiser.css
+++ b/frontend/src/Css/Visualiser.css
@@ -12,6 +12,6 @@
}
-.h1{
+.h2{
text-align: center;
}
\ No newline at end of file
diff --git a/frontend/src/Pages/Dashboard/Dashboard.jsx b/frontend/src/Pages/Dashboard/Dashboard.jsx
index 1d4aa10..68f05c8 100644
--- a/frontend/src/Pages/Dashboard/Dashboard.jsx
+++ b/frontend/src/Pages/Dashboard/Dashboard.jsx
@@ -1,46 +1,66 @@
-import '../../Css/Dashboard.css'
-import React, { useState } from 'react'
+import '../../Css/Dashboard.css';
+import React, { useState } from 'react';
import TopNavBar from '../../Components/Navbar/Navbar';
import Map from './Map';
import Visualiser from './Visualiser';
import { SearchComponent } from '../../Components/Search/SearchComponent';
-
export const Dashboard = () => {
const [data, setData] = useState({ label: "", id: "" });
const [region, setRegion] = useState({});
-
-
+ const [displayMap, setDisplayMap] = useState(true); // State variable to track the currently displayed component
const handlerFunction = (Region_data) => {
- setData(Region_data)
- }
+ setData(Region_data);
+ };
+
const changeRegion = (regionName) => {
// Update the region state to trigger re-render and change the color of the specified region's path
setRegion(regionName);
handlerFunction(data);
+ };
-
+ const toggleDisplay = () => {
+ setDisplayMap(!displayMap); // Toggle the displayMap state
};
+
return (
<div className='dashboard'>
- <TopNavBar />
+ <TopNavBar toggleDisplay = {toggleDisplay} displayMap = {displayMap} />
+
<div className='container'>
-
-
+
<div className='search_container'>
<SearchComponent data={data.label} changeRegion={changeRegion} />
-
</div>
<div className='map_container' id="d3_map">
- <Map handlerFunction={handlerFunction} selectedRegion={region} />
- </div>
- <div className='table_container'>
- <Visualiser Regiondata={data} />
- </div>
+ <Map handlerFunction={handlerFunction} selectedRegion={region} />
+ </div>
+ <div className='table_container'>
+ <Visualiser Regiondata={data} />
+ </div>
+
</div>
</div>
- )
-}
+ );
+};
+
+
+/*
+<div className='content_container'>
+ {/* Conditional rendering based on the displayMap state */
+ /*
+ }
+ {displayMap ? (
+ <div className='map_container' id="d3_map">
+ <Map handlerFunction={handlerFunction} selectedRegion={region} />
+ </div>
+ ) : (
+ <div className='table_container'>
+ <Visualiser Regiondata={data} />
+ </div>
+ )}
+ </div>
+*/
\ No newline at end of file
diff --git a/frontend/src/Pages/Dashboard/Visualiser.jsx b/frontend/src/Pages/Dashboard/Visualiser.jsx
index 0d93542..6b9e293 100644
--- a/frontend/src/Pages/Dashboard/Visualiser.jsx
+++ b/frontend/src/Pages/Dashboard/Visualiser.jsx
@@ -9,9 +9,9 @@ const Visualiser = ({Regiondata}) => {
return (
<div >
- <h1 className='h1'>
+ <h2 >
Visualiser
- </h1>
+ </h2>
<h2> LÄN:
{Regiondata.label}
--
GitLab