fixed viz page

cornellh4i · Dec 5, 2023 · a991361 · a991361
1 parent 0df1dba
commit a991361
Show file tree

Hide file tree

Showing 8 changed files with 711 additions and 1,009 deletions.
diff --git a/backend/src/index.ts b/backend/src/index.ts
@@ -8,9 +8,7 @@ import { dbConnect } from "./database";
 
 import cors from "cors";
 
-
 const app = express();
-const cors = require("cors");
 app.use(cors());
 
 app.use(cors());

diff --git a/backend/src/users/firebase-functions.ts b/backend/src/users/firebase-functions.ts
@@ -1,6 +1,6 @@
 var admin = require("firebase-admin");
 
-var serviceAccount = require("../../serviceAccountKey.json");
+var serviceAccount = require("../users/serviceAccountKey.json");
 
 // admin.initializeApp({
 //   credential: admin.credential.cert(serviceAccount),

diff --git a/backend/yarn.lock b/backend/yarn.lock
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,59 +1,22 @@
-import "./App.css";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Landing from "./pages/landing";
-import Admin from "./pages/admin";
-import Data_viz from "./pages/data-viz";
-import Login from "./pages/login";
-import Forms from "./pages/forms";
-import Navbar from "./components/navbar";
-
+import './App.css';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Landing from './pages/landing';
+import Admin from './pages/admin';
+import Data_viz from './pages/data-viz';
+import Login from './pages/login';
+import Forms from './pages/forms';
+import Navbar from './components/navbar';
 
 function App() {
-  const bottomLeft = [-30, -10];
-  const topRight = [40, 30];
-  const markers = [
-    [-30, -10],
-    [5, 10],
-    [40, 30],
-  ];
-  const locations = ["Ithaca", "Saigon", "Long Island", "New York"];
-  const meshes = ["Raschel", "Stainless", "3D Net"];
-  const locationElement = (
-    <p className="filter-location">
-      <label htmlFor="location">Location</label>
-      <select id="location">
-        <option disabled selected>
-          -- select an option--
-        </option>
-        {locations.map((location) => (
-          <option key={location} value={location}>
-            {location}
-          </option>
-        ))}
-      </select>
-    </p>
-  );
-  const meshElement = (
-    <p className="filter-mesh-type">
-      <p>Mesh Type</p>
-      {meshes.map((meshType) => (
-        <div key={meshType}>
-          <input type="radio" id={meshType} name="meshType"></input>
-          <label htmlFor={meshType}>{meshType}</label>
-        </div>
-      ))}
-    </p>
-  );
-  const components = [locationElement, meshElement];
   return (
     <Router>
       <Navbar />
       <Routes>
-        <Route path="/" element={<Landing />} />
-        <Route path="/admin" element={<Admin />} />
-        <Route path="/dataviz" element={<Data_viz />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/forms" element={<Forms />} />
+        <Route path='/' element={<Landing />} />
+        <Route path='/admin' element={<Admin />} />
+        <Route path='/dataviz' element={<Data_viz />} />
+        <Route path='/login' element={<Login />} />
+        <Route path='/forms' element={<Forms />} />
       </Routes>
     </Router>
   );

diff --git a/frontend/src/components/LocationSelector.tsx b/frontend/src/components/LocationSelector.tsx
@@ -0,0 +1,62 @@
+import { FC, useState, ReactNode } from 'react';
+import { useCollapse } from 'react-collapsed';
+import { FaChevronRight, FaChevronDown } from 'react-icons/fa';
+import './MeshSelector.css';
+
+interface MeshSelectorProps {
+  typeList: string[];
+}
+
+type SectionProps = {
+  title: string;
+  children: ReactNode;
+};
+
+function Section(props: SectionProps) {
+  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();
+  return (
+    <div className='collapsible'>
+      <div className='header' {...getToggleProps()}>
+        <span className='icon'>
+          {isExpanded ? (
+            <FaChevronDown size={10} />
+          ) : (
+            <FaChevronRight size={10} />
+          )}
+          <span className='title'>{props.title}</span>
+        </span>
+      </div>
+      <div {...getCollapseProps()}>
+        <div className='content'>{props.children}</div>
+      </div>
+    </div>
+  );
+}
+
+const LocationSelector: FC<MeshSelectorProps> = ({ typeList }) => {
+  const [selected, setSelected] = useState([] as string[]);
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!e.target.checked) {
+      setSelected(selected.filter((number) => number !== e.target.value));
+    } else {
+      setSelected(selected.concat(e.target.value));
+    }
+  }
+
+  return (
+    <div className='preferences'>
+      <Section title='Location'>
+        <div onChange={handleChange}>
+          {typeList.map((type, i) => (
+            <label key={i}>
+              <input type='checkbox' key={i} value={type} /> {type}
+            </label>
+          ))}
+        </div>
+      </Section>
+    </div>
+  );
+};
+
+export default LocationSelector;
diff --git a/frontend/src/pages/data-viz.tsx b/frontend/src/pages/data-viz.tsx
@@ -1,30 +1,29 @@
-
 import MapChart from '../components/MapChart';
 import MeshSelector from '../components/MeshSelector';
 import SliderSelector from '../components/SliderSelector';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import './data-viz.css';
-import { useEffect, useState } from "react";
-import AltitudeComponent from "../components/altitude-component";
-import GraphCard from "../components/GraphCard";
-import LocationSelector from "../components/LocationSelector";
+import { useEffect, useState } from 'react';
+import AltitudeComponent from '../components/altitude-component';
+import GraphCard from '../components/GraphCard';
+import LocationSelector from '../components/LocationSelector';
 
 const Data_viz = () => {
   const initalData: { id: string; location: number[] }[] = [];
   const [markers, setMarkers] = useState(initalData);
 
   const fetchClustersHandler = async () => {
     try {
-      const response = await fetch("http://localhost:8000/clusters");
+      const response = await fetch('http://localhost:8000/clusters');
       if (!response.ok) {
-        throw new Error("Something went wrong!");
+        throw new Error('Something went wrong!');
       }
       let loadedMarkers = [];
       const data = await response.json();
       for (const key in data) {
         loadedMarkers.push({
-          id: data[key]["_id"],
+          id: data[key]['_id'],
           location: data[key].location,
         });
       }
@@ -48,23 +47,27 @@ const Data_viz = () => {
     <div>
       <div
         style={{
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
         }}
       >
-        <MeshSelector typeList={["test1", "test2"]} />
-        <LocationSelector typeList={["location1", "location2", "location 3"]} />
-        <SliderSelector title="Time Frame" min={new Date('01-01-2023')} max={new Date()} />
-        <SliderSelector title="Altitude" min={1000} max={2000} />
+        <MeshSelector typeList={['test1', 'test2']} title={''} />
+        <LocationSelector typeList={['location1', 'location2', 'location 3']} />
+        <SliderSelector
+          title='Time Frame'
+          min={new Date('01-01-2023')}
+          max={new Date()}
+        />
+        <SliderSelector title='Altitude' min={1000} max={2000} />
       </div>
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
         <MapChart
           bottomLeft={bottomLeft}
           topRight={topRight}
           markers={markers}
         />
-        <GraphCard title="graph goes here" />
+        <GraphCard title='graph goes here' />
       </div>
     </div>
   );