diff --git a/README.md b/README.md
index 4dff9b773d40817684e983369d1689a6a6162447..e6dac1e007bb826886f81701906d2085cac14f76 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,5 @@
# front-end
+All links should be <!-- <link to='/something'><span><"all content"></span></link> -->
+insdide the span you can put whatever divs you want, text still inherit some uggly link-properties and will need to be dealt with in a global .css file.
+
diff --git a/package-lock.json b/package-lock.json
index 33de3467df75edb65ea734157f28e6fccc01b267..d2c09f5a0c54a403bab186d444f2467c8f3ddf7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2150,6 +2150,11 @@
"@xtuc/long": "4.2.2"
}
},
+ "@wojtekmaj/date-utils": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz",
+ "integrity": "sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw=="
+ },
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -6203,6 +6208,14 @@
"pump": "^3.0.0"
}
},
+ "get-user-locale": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-1.4.0.tgz",
+ "integrity": "sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==",
+ "requires": {
+ "lodash.once": "^4.1.1"
+ }
+ },
"get-value": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -8104,6 +8117,11 @@
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
+ "lodash.once": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+ "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+ },
"lodash.sortby": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -8267,6 +8285,11 @@
}
}
},
+ "merge-class-names": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.3.0.tgz",
+ "integrity": "sha512-k0Qaj36VBpKgdc8c188LEZvo6v/zzry/FUufwopWbMSp6/knfVFU/KIB55/hJjeIpg18IH2WskXJCRnM/1BrdQ=="
+ },
"merge-deep": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -10679,6 +10702,17 @@
}
}
},
+ "react-calendar": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-3.1.0.tgz",
+ "integrity": "sha512-xoKdRe6FrnZ30LD9pyr20fhet1uwSbc6srLGm1ib7G4b7tAXniZrwzrJ4YV/Hbmmwf/zAFGyXtBzLAIV1KNvuA==",
+ "requires": {
+ "@wojtekmaj/date-utils": "^1.0.2",
+ "get-user-locale": "^1.2.0",
+ "merge-class-names": "^1.1.1",
+ "prop-types": "^15.6.0"
+ }
+ },
"react-dev-utils": {
"version": "10.2.1",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
diff --git a/package.json b/package.json
index d6096c3476af5966ea511e41f8ab4682d99a486e..c4682a6737a760fba94d1ef645c044c0ab93aa9f 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-bootstrap-validation": "^0.1.11",
+ "react-calendar": "^3.1.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3"
diff --git a/public/index.html b/public/index.html
index 21f580f9c1834397caf01e43d90fcfe412eefe95..a98c0f383513a17663b92278815c033ddf9d498c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,6 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
+ <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
+
+<script
+ src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+ crossorigin></script>
+
+<script
+ src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
+ crossorigin></script>
+
+<script>var Alert = ReactBootstrap.Alert;</script>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/src/AddMedData.js b/src/AddMedData.js
new file mode 100644
index 0000000000000000000000000000000000000000..fa4302ec103b502155d2b9303c0f10508aeb78d4
--- /dev/null
+++ b/src/AddMedData.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import { Button } from "react-bootstrap";
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+
+
+class AddMedData extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ showDate: true,
+ date: new Date(),
+ showMedtype: false,
+ showInput : false,
+ medtype: "diabetes",
+ showSummary: true,
+ input: null,
+ dateString: null
+ };
+
+ }
+ // calendar date update
+ onChange = date => this.setState({ date })
+ //changes which code will be shown from the render statement
+ secondView = () => this.setState({ showDate: false, showMedtype: true, dateString : this.state.date})
+ thirdView = () => this.setState({ showMedtype: false, showInput: true })
+ fourthView = () => this.setState({ showInput: false, showSummary: true})
+ handleChange = event => this.setState({input: event.target.value});
+ submit = () => alert("submited");
+
+ render() {
+
+ if (this.state.showDate) {
+ return (
+ <div>
+
+ <Calendar
+ onChange={this.onChange}
+ showWeekNumbers
+ value={this.state.date}
+ Date
+ />
+ <Button onClick={this.secondView}>Next</Button>
+ </div>
+ );
+ }
+ if (this.state.showMedtype) {
+ return (
+ <div>
+ <h1 >vad vill du lämna för data?</h1>
+ <Button onClick={this.thirdView}>Next</Button>
+
+ </div>
+ );
+ }
+ if (this.state.showInput) {
+ return (
+ <div>
+ <h1>{this.state.medtype}</h1>
+ <input onChange={this.handleChange} placeholder="fyll i här"></input>
+ <Button onClick ={this.fourthView}>Next</Button>
+ </div>
+ );
+ }
+ if (this.state.showSummary) {
+ return (
+ <div>
+ <h1>Summary</h1>
+ {<h3>{this.state.date.toString().split(0,14)}</h3>}
+ <h3>{this.state.medtype} : {this.state.input}</h3>
+
+ <Button onClick={this.submit}>submit</Button>
+ </div>
+ );
+ }
+ }
+}
+
+export default AddMedData;
\ No newline at end of file
diff --git a/src/Components/Footer.css b/src/Components/Footer.css
new file mode 100644
index 0000000000000000000000000000000000000000..286fde0d5f7350ff70c7e45cb833b2b2eb58309c
--- /dev/null
+++ b/src/Components/Footer.css
@@ -0,0 +1,13 @@
+.style {
+ overflow: auto;
+ padding: "20px";
+ /* position: "fixed"; */
+ left: "0";
+ bottom: "0";
+ height: 51px;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+}
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
new file mode 100644
index 0000000000000000000000000000000000000000..2cfcd6721344c6be0c389b84deb41cf82c8ea448
--- /dev/null
+++ b/src/Components/Footer.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { ListGroup, Button } from "react-bootstrap";
+import { Link, Router } from "react-router-dom";
+import "./Footer.css"
+
+
+export const Footer = () => {
+ return (
+ <div>
+
+ <div className="style">
+ <ListGroup horizontal>
+ <ListGroup.Item action tolink={"/"} ><Link to="/">H</Link>
+
+ </ListGroup.Item>
+ <ListGroup.Item action ><Link to="/">A</Link>
+{/* This one below is the one that works */}
+ </ListGroup.Item>
+ <Link to="/MedicalData"><span><ListGroup.Item action >H
+
+ </ListGroup.Item></span></Link>
+ <ListGroup.Item action ><Link to="/contact">M</Link>
+
+ </ListGroup.Item>
+ <ListGroup.Item action ><Link to="/Profile">P</Link>
+
+ </ListGroup.Item>
+
+ </ListGroup>,
+ </div>
+
+ </div>
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/Components/Navigationbar.css b/src/Components/Navigationbar.css
new file mode 100644
index 0000000000000000000000000000000000000000..5702e354e9ae3c4240f79b09c60e69c4d4591419
--- /dev/null
+++ b/src/Components/Navigationbar.css
@@ -0,0 +1,10 @@
+.active {
+ background-color: lightgray;
+}
+a:hover {
+ color : initial;
+ text-decoration-line: none;
+}
+.Link {
+ text-emphasis: Bold;
+}
\ No newline at end of file
diff --git a/src/Components/Navigationbar.js b/src/Components/Navigationbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..99de95431828839f4a928d520c240a408a7cc828
--- /dev/null
+++ b/src/Components/Navigationbar.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import { Button,Nav, Navbar, Form, FormControl } from 'react-bootstrap';
+import { useHistory, Link} from "react-router-dom";
+import { createBrowserHistory } from "history";
+
+import "./Navigationbar.css";
+
+function componentWillReceiveProps(nextProps) {
+ if (nextProps.location !== this.props.location) {
+ // navigated!
+ }
+}
+
+
+ export const NavigationBar = () => (
+ <div>
+ <Navbar expand="lg">
+ <Navbar.Toggle aria-controls="basic-navbar-nav" />
+ <Form className="form-center">
+ </Form>
+
+ <navbar-brand ID='NavbarID'>Home</navbar-brand>
+ <Navbar.Collapse id="basic-navbar-nav">
+ <Nav className="ml-auto">
+ <Link to="/"><span><Nav.Item><div>Home</div></Nav.Item></span></Link>
+
+ <Nav.Item><Nav.Link to="/MedicalData">MedicalData</Nav.Link></Nav.Item>
+ <Nav.Item><Link to="/Profile">Profile</Link></Nav.Item>
+
+ </Nav>
+ </Navbar.Collapse>
+ </Navbar>
+ </div>
+ )
+
+
+ export default NavigationBar;
\ No newline at end of file
diff --git a/src/Components/Streak.css b/src/Components/Streak.css
new file mode 100644
index 0000000000000000000000000000000000000000..1d6059e9be130f81692af0d494935e7fdb1d5b41
--- /dev/null
+++ b/src/Components/Streak.css
@@ -0,0 +1,12 @@
+.mainStreakDiv {
+ margin-top: 1,5rem;
+ border: 5px, black;
+ border-radius: 4px;
+ background-color: lightgrey;
+ align-items: center;
+}
+
+h3 {
+ padding-left: auto;
+
+}
\ No newline at end of file
diff --git a/src/Components/Streak.js b/src/Components/Streak.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c5b35bfc91a4e9d09b400e22b6e332dcefe792b
--- /dev/null
+++ b/src/Components/Streak.js
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import ListGroup from "react-bootstrap/ListGroup"
+import "./Streak.css"
+
+export default function Streak() {
+
+ return (
+ <div className="mainStreakDiv">
+ <div className="header">
+ <h3>Streaks</h3>
+ </div>
+ <ListGroup horizontal>
+ <ListGroup.Item>4 days
+ <h5>Streak</h5>
+ </ListGroup.Item>
+ <ListGroup.Item>18 days
+ <h5>Longest streak</h5>
+ </ListGroup.Item>
+
+ </ListGroup>
+
+ </div>
+ );
+}
\ No newline at end of file
diff --git a/src/Home.js b/src/Home.js
index 4c240e5425884e4571295c99c8cb98f263aca4e5..54b1e43ea0852355f32a2e16a632b4273b480704 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,24 +1,44 @@
import React, { Component } from "react";
+import Streak from "./Components/Streak";
+import { Button, ListGroup } from "react-bootstrap";
+import { Link, BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
+
class Home extends Component {
render() {
return (
<div>
- <h2>HELLO</h2>
- <p>Cras facilisis urna ornare ex volutpat, et
- convallis erat elementum. Ut aliquam, ipsum vitae
- gravida suscipit, metus dui bibendum est, eget rhoncus nibh
- metus nec massa. Maecenas hendrerit laoreet augue
- nec molestie. Cum sociis natoque penatibus et magnis
- dis parturient montes, nascetur ridiculus mus.</p>
-
-
-
-
-
- <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
+ <Streak />
+ {/* <ListGroup> */}
+ <Link to="/addmeddata">
+ <span className="card" >
+ <Button>New Measurment</Button>
+ </span>
+ </Link>
+ <Link to="/history">
+ <span className="card" >
+ <Button>Measurements/History</Button>
+ </span>
+ </Link>
+ <Link to="/profile">
+ <span className="card" >
+ <Button linkto='/profile'>Profile</Button>
+ </span>
+ </Link>
+ <Link to="/goals">
+ <span className="card" >
+ <Button>Goals</Button>
+ </span>
+ </Link>
+ <Link to="/contact">
+ <span className="card" >
+ <Button>Messages</Button>
+ </span>
+ </Link>
+ {/* </ListGroup> */}
</div>
);
}
}
-
+
export default Home;
\ No newline at end of file
diff --git a/src/Main.js b/src/Main.js
index a12d516dc06ea2207ddc7fe436851969a9b63fb0..44516d6288c379db4d855dc0a6f98c7e224fdd30 100644
--- a/src/Main.js
+++ b/src/Main.js
@@ -1,42 +1,41 @@
import React, { Component } from "react";
-import {
- Route,
- NavLink,
- HashRouter
-}
-from "react-router-dom";
+import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
import Home from "./Home";
import MedicalData from "./MedicalData";
-import Contact from "./Contact";
-import Login from "./Login";
+import Contact from "./Contact";
+import Login from "./Login";
import ProfilePage from "./ProfilePage";
+import Navbar from "./Components/Navigationbar";
+import Footer from "./Components/Footer";
+import AddMedData from "./AddMedData";
class Main extends Component {
render() {
- return (
- <HashRouter>
- <div>
- <h1>Sickness game 101</h1>
- <ul className="header">
- <li><NavLink exact to="/">Home</NavLink></li>
- <li><NavLink to="/MedicalData">MedicalData</NavLink></li>
- <li><NavLink to="/contact">Contact</NavLink></li>
- <li><NavLink to="/login">Login</NavLink></li>
- <li><NavLink to="/profilepage">profil</NavLink></li>
+ return (
+ <>
+ <React.Fragment>
+ <Router>
+ <Navbar />
+ <Switch>
+ <Route exact path="/" component={Home} />
+ <Route path="/contact" component={Contact} />
+ <Route path="/login" component={Login} />
+ <Route path="/medicaldata" component={MedicalData} />
+ <Route path="/profile" component={ProfilePage} />
+ <Route path="/AddMedData" component={AddMedData} />
- </ul>
- <div className="content">
- <Route exact path="/" component={Home}/>
- <Route path="/medicalData" component={MedicalData}/>
- <Route path="/contact" component={Contact}/>
- <Route path="/login" component={Login}/>
- <Route path="/profilepage" component={ProfilePage}/>
- </div>
- </div>
- </HashRouter>
+ {/* <Route component={NoMatch} /> */}
+ </Switch>
+ <Footer />
+ </Router>
+ </React.Fragment>
+
+ </>
);
}
}
-
+
export default Main;
\ No newline at end of file
diff --git a/src/Navbar.js b/src/Navbar.js
deleted file mode 100644
index 46b8e97c62f98695c3f9a76ac0df1cc5d9c17def..0000000000000000000000000000000000000000
--- a/src/Navbar.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { Component } from 'react';
-import Navitem from './Navitem';
-class Navbar extends Component {
-constructor(props)
-{
-super(props);
-this.state={
-'NavItemActive':''
-}
-}
-activeitem=(x)=>
-{
-if(this.state.NavItemActive.length>0){
-document.getElementById(this.state.NavItemActive).classList.remove('active');
-}
-this.setState({'NavItemId':x},()=>{
-document.getElementById(this.state.NavItemActive).classList.add('active');
-});
-};
-render() {
-return (
-<nav>
-<ul>
-<Navitem item="Home" tolink="/" activec={this.activeitem}></Navitem>
-<Navitem item="About" tolink="/about" activec={this.activeitem}></Navitem>
-<Navitem item="Education" tolink="/education" activec={this.activeitem}></Navitem>
-<Navitem item="Skills" tolink="/skills" activec={this.activeitem}></Navitem>
-<Navitem item="Contact" tolink="/contact" activec={this.activeitem}></Navitem>
-</ul>
-</nav>
-)
-}
-}
-export default Navbar
\ No newline at end of file
diff --git a/src/Navitem.js b/src/Navitem.js
deleted file mode 100644
index a473daa11987863600355683992483b78ae6bd30..0000000000000000000000000000000000000000
--- a/src/Navitem.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from "react-router-dom";
-class Navitem extends Component {
-render() {
-return (
-<li id={this.props.item}>
-<Link to={this.props.tolink} onClick={this.props.activec.bind(this,this.props.item)}>{this.props.item}</Link>
-</li>
-)
-}
-}
-export default Navitem
diff --git a/src/index.css b/src/index.css
index 343242eb4f96f647b05ec50337652cfe648dd8f9..13c9454a9377cd1da4019ab0e7c6959af8b10aeb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
body {
- background-color: #FFCC00;
+ background-color: white;
padding: 20px;
margin: 0;
}