web app update

Web-App/README.md

@@ -1,8 +1,3 @@
 A web app to display GPS tracking data on the UConn campus for research studies.
 
 For Senior Design project 2018-2019
-To run:
-(1)Install Node.js and npm
-(2)enter Web-App folder
-npm install
-npm start

Web-App/package.json

@@ -4,14 +4,19 @@
   "private": true,
   "dependencies": {
     "react": "^16.6.3",
+    "react-datepicker": "^2.1.0",
     "react-dom": "^16.6.3",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -23,6 +28,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "gh-pages": "^2.0.1",
     "node-sass": "^4.10.0"
-  }
+  },
+  "homepage": "https://renojvarghese.github.io/oncampus-walking-web-display/"
 }

Web-App/src/App.js

@@ -1,15 +1,11 @@
 import React, { Component } from "react";
 import "./scss/App.scss";
-import SearchBar from "./components/searchBar";
-import ParticipantContainer from "./components/participantContainer";
+import "react-datepicker/dist/react-datepicker.css";
+import AppRouter from "./components/router";
 class App extends Component {
     render() {
         return (
-            <div className="App">
-                Hello World!
-                <SearchBar />
-                <ParticipantContainer />
-            </div>
+            <AppRouter/>
         );
     }
 }

Web-App/src/components/participantBox/index.js

@@ -1,16 +1,15 @@
-import React, { Component } from "react";
-
+import React from "react";
 export const ParticipantBox = ({
-    name = "default",
-    start = "N/A",
-    end = "N/A",
-    miles = 0
+    name = "PARTICPANT ID",
+    start = "10/12",
+    end = "Present",
+    miles = 100
 }) => (
-    <div>
-        <div>{name}</div>
-        <div>{start}</div>
-        <div>{end}</div>
-        <div>{miles}</div>
+    <div className="part-box">
+        <div className="part-name">{name}</div>
+        <div className="part-start">Start Time: {start}</div>
+        <div className="part-end">End Time:{end}</div>
+        <div className="part-miles">Total Miles: {miles} mi</div>
     </div>
 );
 

Web-App/src/components/participantContainer/index.js

@@ -1,12 +1,12 @@
 import React, { Component } from "react";
 import ParticipantBox from "../participantBox";
-
+import { Link } from "react-router-dom";
 export default class ParticipantContainer extends Component {
     render() {
         return (
-            <div>
-                <ParticipantBox />
-                <ParticipantBox />
+            <div className="part-container">
+                <Link to="/map"><ParticipantBox /></Link>
+                <Link to="/map"><ParticipantBox /></Link>
             </div>
         );
     }

Web-App/src/components/searchBar/SearchBox.js

@@ -1,8 +1,12 @@
-import React, { Component } from "react";
+import React from "react";
 
-export const SearchBox = ({ onChange, placeholder }) => (
-    <div>
-        <input onChange={onChange} placeholder={placeholder} />
+export const SearchBox = ({ onChange, placeholder = "Search" }) => (
+    <div className="search-box">
+        <input
+            className="search-input"
+            onChange={onChange}
+            placeholder={placeholder}
+        />
     </div>
 );
 

Web-App/src/components/searchBar/SearchButton.js

@@ -1,8 +1,10 @@
-import React, { Component } from "react";
+import React from "react";
 
 export const SearchButton = ({ onClick, children }) => (
-    <div>
-        <button onClick={onClick}>{children}</button>
+    <div className="search-btn-container">
+        <button className="search-btn" onClick={onClick}>
+            {children}
+        </button>
     </div>
 );
 

Web-App/src/components/searchBar/index.js

@@ -5,7 +5,7 @@ import SearchButton from "./SearchButton";
 export default class SearchBar extends Component {
     render() {
         return (
-            <div>
+            <div className="search-container">
                 <SearchBox />
                 <SearchButton>Submit</SearchButton>
             </div>

Web-App/src/index.js

@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { BrowserRouter as Router } from "react-router-dom";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Router basename={process.env.PUBLIC_URL}><App /></Router>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

Web-App/src/scss/App.scss

@@ -1 +1,5 @@
 @import "partials/variables";
+@import "partials/common";
+@import "partials/search";
+@import "partials/map";
+@import "partials/participant";

Web-App/src/scss/partials/_variables.scss

@@ -5,3 +5,7 @@ $black: #000000;
 $grey-light: #f0f0f0;
 $grey: #7f7f7f;
 $grey-dark: $grey / 1.2;
+
+$san-serif: sans-serif;
+
+$box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);