diff --git a/webstillas/src/App.js b/webstillas/src/App.js index dc377bd01afb0e25a4aa09360ace0f493dc905a8..2086fe1746a1a218d08f6ec3cd14ca191d5be00c 100644 --- a/webstillas/src/App.js +++ b/webstillas/src/App.js @@ -16,6 +16,7 @@ import {UserAuthContextProvider, useUserAuth} from "./context/UserAuthContext"; import auth from "./firebase"; import AddProjectFunc from "./components/logistics/project/addProject"; import AddScaffolding from "./components/logistics/scaffold/addScaffolding"; +import {UserInfo} from "./components/userinformation/userInfo"; @@ -39,6 +40,7 @@ function App() { <Route path="/signup" element={<Signup/>}/> <Route path="/addproject/" element={<ProtectedRoute> <AddProjectFunc/></ProtectedRoute>}/> <Route path="/addscaffolding/" element={<ProtectedRoute> <AddScaffolding/></ProtectedRoute>}/> + <Route path="/userinfo/" element={<ProtectedRoute> <UserInfo/></ProtectedRoute>}/> </Routes> diff --git a/webstillas/src/components/Signup.js b/webstillas/src/components/Signup.js index b3b3373c0e057113656e1a681f1c9b4d6918b7a0..aa6bdcdda99638330bb16cd00e2bbc3b1b7718b3 100644 --- a/webstillas/src/components/Signup.js +++ b/webstillas/src/components/Signup.js @@ -4,6 +4,8 @@ import { Form, Alert } from "react-bootstrap"; import { Button } from "react-bootstrap"; import { useUserAuth } from "../context/UserAuthContext"; import postModel from "../modelData/postModel"; +import {formatDate, formatDateToString} from "./projects/projects"; + const Signup = () => { const [email, setEmail] = useState(""); const [firstName, setFirstName] = useState(""); @@ -11,6 +13,7 @@ const Signup = () => { const [role, setRole] = useState(""); const [phone, setPhone] = useState(0); const [admin, setAdmin] = useState(false); + const [birthDay, setBirthDay] = useState(""); const [error, setError] = useState(""); const [password, setPassword] = useState(""); @@ -22,27 +25,26 @@ const Signup = () => { e.preventDefault(); setError(""); try { - const newUser = await signUp(email, password); - - //Todo Add user in API - console.log(newUser.user.uid) - const user = - { - "employeeID": newUser.user.uid, - "name": { - "firstName": firstName, - "lastName": lastName - }, - "role": role, - "phone": phone, - "email": email, - "admin": admin - } - - await postModel("http://localhost:8080/stillastracking/v1/api/user", user) - .then(() => navigate("/")) - .catch(e => console.log(e)) - + signUp(email, password).then(newUser => { + console.log(newUser.user.uid) + const user = + { + "employeeID": newUser.user.uid, + "name": { + "firstName": firstName, + "lastName": lastName + }, + "role": role, + "phone": phone, + "email": email, + "admin": admin, + "dateOfBirth": birthDay + } + console.log(JSON.stringify(user)) + postModel("user", user) + .then(() => navigate("/")) + .catch(e => console.log(e)) + }) } catch (err) { setError(err.message); } @@ -50,6 +52,10 @@ const Signup = () => { + + + console.log(birthDay) + return ( <> <div className="p-4 box"> @@ -95,6 +101,9 @@ const Signup = () => { </Form.Select> </Form.Group> + <label htmlFor="startDate">Birthday</label> + <input type="date" onChange={(event) => setBirthDay(formatDateToString(event.target.value))}/> + <Form.Group className="mb-3" controlId="formBasicEmail"> <Form.Control type="email" diff --git a/webstillas/src/components/logistics/scaffold/addScaffolding.css b/webstillas/src/components/logistics/scaffold/addScaffolding.css index 439cceb5590c5942986d68b44e323712925ccb3c..0bea57a075d09bdb40abd2230762c3645a168d1a 100644 --- a/webstillas/src/components/logistics/scaffold/addScaffolding.css +++ b/webstillas/src/components/logistics/scaffold/addScaffolding.css @@ -1,8 +1,12 @@ .scaffolding-input{ + display: flex; + justify-content: center; width: 400px; } .btn-add-scaffolding{ + display: flex; + justify-content: center; padding-top: 20px; } @@ -11,8 +15,16 @@ margin-left: 35%; margin-top: 10%; width: 500px; - background-color: #9f9e9e; align-content: center; } +.input-fields-add{ + padding-bottom: 20px; + justify-content: center; +} + +.main-add-scaffolding{ + margin-left: 35%; + margin-top: 7%; +} diff --git a/webstillas/src/components/logistics/scaffold/addScaffolding.js b/webstillas/src/components/logistics/scaffold/addScaffolding.js index 1432805ec1891dc40bc1a2faaed6e383f533e76f..c062a8c959ac6a737c7de4cabd727b323c660cee 100644 --- a/webstillas/src/components/logistics/scaffold/addScaffolding.js +++ b/webstillas/src/components/logistics/scaffold/addScaffolding.js @@ -25,7 +25,7 @@ class AddScaffolding extends React.Component{ scaffoldingInformation(){ return( <div className={"input-information"}> - <div> + <div className={"input-fields-add"}> <p className = {"input-sorting-text"}>Enter ID</p> <input type={"text"} className={"form-control scaffolding-input"} onChange={event => @@ -33,10 +33,10 @@ class AddScaffolding extends React.Component{ scaffolding.id = Number(event.target.value); this.setState({scaffolding})}}/> </div> - <div> + <div className={"input-fields-add"}> <p className = {"input-sorting-text"}>Overfør til prosjekt:</p> <select - className={"form-select"} + className={"form-select scaffolding-input"} value={"Test"} onChange={(e) => {const scaffolding = {...this.state.scaffolding}; @@ -74,15 +74,17 @@ class AddScaffolding extends React.Component{ render() { return( - <div className={"input-fields"}> - {this.scaffoldingInformation()} - <div className={"btn-add-scaffolding"}> - <button className={"btn"} onClick={() => this.postRequest()}>Legg til</button> - + <div className={"main-add-scaffolding"}> + <div className={"info-card"}> + {this.scaffoldingInformation()} + <div className={"btn-add-scaffolding"}> + <button className={"btn"} onClick={() => this.postRequest()}>Legg til</button> + </div> </div> </div> + ) } } diff --git a/webstillas/src/components/projects/elements/card.css b/webstillas/src/components/projects/elements/card.css index 975e533a3fba39bfa5d79f53ba41b92d76d04979..a6542bf37768d90a295a247cfe689d2a9ad78bc1 100644 --- a/webstillas/src/components/projects/elements/card.css +++ b/webstillas/src/components/projects/elements/card.css @@ -6,9 +6,6 @@ } -.body { - background: black; -} .name-btn{ display: flex; @@ -20,22 +17,13 @@ .btn-delete{ height: fit-content; width: fit-content; - align-content: center; - right: 10px; - -} - - -.btn-delete{ background-size: cover; } - .header { display: flex; justify-content: space-between; padding: 24px; - } .image-project { @@ -78,9 +66,6 @@ border-left-color: gray; } - - - .card-btn{ padding: 0 24px 24px; } @@ -131,3 +116,7 @@ padding-right: 35px; padding-bottom: 30px; } + +.preview-info{ + width: 500px; +} diff --git a/webstillas/src/components/projects/elements/card.js b/webstillas/src/components/projects/elements/card.js index 251f2b809f58e46211c04f8bc275ab80492844e3..36dfa1e68d157f82062742afea91456cdfc21c48 100644 --- a/webstillas/src/components/projects/elements/card.js +++ b/webstillas/src/components/projects/elements/card.js @@ -30,14 +30,18 @@ function CardElement(props) { <section className={"header"}> <h3>{props.name}</h3> </section> - <IconButton className={"btn-delete"} onClick={DeleteProject}> - <DeleteIcon style={{ fontSize: 50, float: "right" }} /> - </IconButton> + <div className={"btn-delete"}> + <IconButton onClick={DeleteProject}> + <DeleteIcon style={{ fontSize: 50}} /> + </IconButton> + </div> + </div> <section className={"image-project"}> <img src={img} alt={""}/> </section> + <section className={"information-highlights-cta"}> <div className={"information-highlights"}> <ul className={"information-list"}> diff --git a/webstillas/src/components/projects/elements/preView.js b/webstillas/src/components/projects/elements/preView.js index ee45a3df2bf624de33137ca33da8304d94f65198..2dc2af39d7c0704c8874d1a9220df2b69f807c90 100644 --- a/webstillas/src/components/projects/elements/preView.js +++ b/webstillas/src/components/projects/elements/preView.js @@ -22,7 +22,6 @@ const Map = ReactMapboxGl({ }); - //mapboxgl.accessToken = 'pk.eyJ1IjoiYWxla3NhYWIxIiwiYSI6ImNrbnFjbms1ODBkaWEyb3F3OTZiMWd6M2gifQ.vzOmLzHH3RXFlSsCRrxODQ'; /* //Todo refactor class to function @@ -88,12 +87,12 @@ class PreViewClass extends React.Component { }*/ -function PreViewFunction(props){ +function PreViewFunction(props) { const data = props.data - return( - <div className = {"preView-Project-Main"}> + return ( + <div className={"preView-Project-Main"}> <Map style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line containerStyle={{ @@ -119,9 +118,6 @@ function PreViewFunction(props){ } - - - function getProjectID() { const pathSplit = window.location.href.split("/") return pathSplit[pathSplit.length - 1] @@ -148,34 +144,60 @@ function scaffoldingComponents(data) { function contactInformation(project) { return ( - <section className={"contact-highlights-cta preview-text"}> - <div className={"information-highlights"}> - <ul className={"contact-list"}> - <li className={"horizontal-list-contact"}> - <span className={"left-contact-text"}>Navn/Bedrift</span> - <span className={"right-contact-text"}>{project[0].customer.name}</span> - </li> - <li className={"horizontal-list-contact"}> - <span className={"left-contact-text"}>Telefon nummer</span> - <span className={"right-contact-text"}>{project[0].customer.number}</span> - </li> - <li className={"horizontal-list-contact"}> - <span className={"left-contact-text"}>Adresse</span> - <span - className={"right-contact-text"}>{project[0].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</span> - </li> - <li className={"horizontal-list-contact"}> - <span className={"left-contact-text"}>E-mail</span> - <span className={"right-contact-text"}>{project[0].customer.email}</span> - </li> - <li className={"horizontal-list-contact"}> - <span className={"left-contact-text"}>Periode</span> - <span - className={"right-contact-text"}>{project[0].period.startDate} to {project[0].period.endDate} </span> - </li> - </ul> - </div> - </section> + <div> + <section className={"info-card"}> + <div className={"information-highlights preview-info"}> + <h3>Prosjekt Informasjon</h3> + <ul className={"contact-list"}> + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>Kunde</span> + <span className={"right-contact-text"}>{project[0].customer.name}</span> + </li> + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>Størrelse</span> + <span className={"right-contact-text"}>{project[0].size} ㎡</span> + </li> + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>Status</span> + <span className={"right-contact-text"}>{project[0].state}</span> + </li> + + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>Periode</span> + <span + className={"right-contact-text"}>{project[0].period.startDate} - {project[0].period.endDate} </span> + </li> + </ul> + </div> + </section> + <section className={"info-card"}> + <div className={"information-highlights preview-info"}> + <h3>Kontakt Informasjon</h3> + <ul className={"contact-list"}> + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>Kontakt person</span> + <span className={"right-contact-text"}>{project[0].customer.name}</span> + </li> + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>Telefon nummer</span> + <span className={"right-contact-text"}>{project[0].customer.number}</span> + </li> + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>E-mail</span> + <span className={"right-contact-text"}>{project[0].customer.email}</span> + </li> + <li className={"horizontal-list-contact"}> + <span className={"left-contact-text"}>Adresse</span> + <span + className={"right-contact-text"}>{project[0].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</span> + </li> + </ul> + </div> + </section> + + + </div> + ) } @@ -203,7 +225,7 @@ export const PreView = () => { } else { return ( <div className={"preView-Project-Main"}> - <div className = {"map-preview"}> + <div className={"map-preview"}> <PreViewFunction data={project[0]}/> </div> <div className={"tabs"}> diff --git a/webstillas/src/components/scaffolding/scaffolding.css b/webstillas/src/components/scaffolding/scaffolding.css index 3d4c2d3d20be65743514139bc3eb2836d44f3e84..4519052cb16603d34b40b7a6c390de9a69a4142c 100644 --- a/webstillas/src/components/scaffolding/scaffolding.css +++ b/webstillas/src/components/scaffolding/scaffolding.css @@ -8,6 +8,8 @@ .input-sorting-text{ margin-bottom: 0; + display: flex; + justify-content: center; font-weight: initial; font-size: 15px; } diff --git a/webstillas/src/components/topBar/topBar.js b/webstillas/src/components/topBar/topBar.js index 01ccbdb1d31ec25e272ddcb40146bd23e7c3d663..eb61859ea0942748d95b729e73e9d33ac205460a 100644 --- a/webstillas/src/components/topBar/topBar.js +++ b/webstillas/src/components/topBar/topBar.js @@ -8,6 +8,7 @@ import {DropdownButton, NavDropdown} from "react-bootstrap"; import DropdownItem from "react-bootstrap/DropdownItem"; import {useUserAuth} from "../../context/UserAuthContext"; import {auth} from "../../firebase" +import {orange} from "@material-ui/core/colors"; /** Class that will create a topbar for the application. @@ -45,11 +46,10 @@ const TopBar = () => { <Button className="button">Logistikk</Button> </Link>*/} - <NavDropdown id="basic-nav-dropdown" + <NavDropdown id="basic-nav-dropdown1" title={"Logistikk"} size="sm" - style={{textDecorationColor: "black"}} - + menuVariant={"dark"} > <DropdownItem> @@ -58,16 +58,16 @@ const TopBar = () => { <DropdownItem> <Link to={"/addscaffolding/"}>Legg til stillas</Link> </DropdownItem> + </NavDropdown> - </NavDropdown> <DropdownButton id="dropdown-button" title={"Bruker"} size="sm" > <DropdownItem> - <Link to={"/addscaffolding/"}>Bruker Informasjon</Link> + <Link to={"/userinfo/"}>Bruker Informasjon</Link> </DropdownItem> <DropdownItem onClick={logOut}>Logg ut</DropdownItem> diff --git a/webstillas/src/components/userinformation/userInfo.css b/webstillas/src/components/userinformation/userInfo.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..db9d96897ecc2b5206a7ed9abe22be7a825f940a 100644 --- a/webstillas/src/components/userinformation/userInfo.css +++ b/webstillas/src/components/userinformation/userInfo.css @@ -0,0 +1,43 @@ +.under-information{ + display: flex; + justify-content: center; + color: #9f9e9e; + +} + +.image-frame{ + display: flex; + justify-content: center; + padding-bottom: 10px; +} + +body { + font-family: sans-serif; +} +.profile-image{ + width: 100px; + +} + +.header-information{ + display: flex; + justify-content: center; +} + +.main-userinfo{ + margin-top: 5%; + margin-left: 35%; +} + +.info-card{ + alignment: center; + width: fit-content; + padding: 20px 20px 20px 20px; + Box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); +} + +.information-text{ + justify-content: center; + padding-bottom: 10px; +} + diff --git a/webstillas/src/components/userinformation/userInfo.js b/webstillas/src/components/userinformation/userInfo.js index eb7430f50a18805b108a55d8dee00d99c1cf6d38..915f56c2344b0d8ed9d6e8581ae885b8b31ffcbe 100644 --- a/webstillas/src/components/userinformation/userInfo.js +++ b/webstillas/src/components/userinformation/userInfo.js @@ -1,25 +1,85 @@ import React from "react"; import { auth } from "../../firebase"; -import {formatDate} from "../projects/projects"; +import {GetDummyData} from "../../modelData/addData"; +import { USER_URL} from "../../modelData/constantsFile"; +import {SpinnerDefault} from "../Spinner"; +import "./userInfo.css" +import profileImg from "./profile-png-icon-2.png" +export function UserInfo(){ + const {isLoading, data} = GetDummyData("user", USER_URL + auth.currentUser.uid) + if (isLoading) { + return (<SpinnerDefault/>) + } else { + return ( + <div className={"main-userinfo"}> + <div className={"info-card"}> + <div className={"image-frame"}> + <img src={profileImg} alt={""} className={"profile-image"}/> -function UserInfo(){ - - - - return( - <div className={"info-card"}> - <div className={"information-text"}> - <h3 className={"header-information"}> - - </h3> - <h3 className={"under-information"}> + </div> + <div className={"information-text"}> + <h4 className={"header-information"}> + {data.name.firstName} {data.name.lastName} + </h4> + <h4 className={"under-information"}> + Navn + </h4> + </div> + <div className={"information-text"}> + <h4 className={"header-information"}> + {data.phone} + </h4> + <h4 className={"under-information"}> + Telefonnummer + </h4> + </div> + <div className={"information-text"}> + <h4 className={"header-information"}> + {data.email} + </h4> + <h4 className={"under-information"}> + Email + </h4> + </div> + <div className={"information-text"}> + <h4 className={"header-information"}> + {data.employeeID} + </h4> + <h4 className={"under-information"}> + Ansatt ID + </h4> + </div> + <div className={"information-text"}> + <h4 className={"header-information"}> + {data.dateOfBirth} + </h4> + <h4 className={"under-information"}> + Fødselsdato + </h4> + </div> + <div className={"information-text"}> + <h4 className={"header-information"}> + {data.role} + </h4> + <h4 className={"under-information"}> + Stilling + </h4> + </div> + <div className={"information-text"}> + <h4 className={"header-information"}> + {data.admin.toString()} + </h4> + <h4 className={"under-information"}> + Administrerende rettigheter + </h4> + </div> + </div> + </div> - </h3> + ) + } +} - </div> - </div> - ) -} diff --git a/webstillas/src/modelData/constantsFile.js b/webstillas/src/modelData/constantsFile.js index ba7387fb3c3ddde3fb3a6d68401748af7b1b8b85..944117bb987e530e25fa1cb938f14dbed1b95c85 100644 --- a/webstillas/src/modelData/constantsFile.js +++ b/webstillas/src/modelData/constantsFile.js @@ -2,7 +2,7 @@ export const PROJECTS_WITH_SCAFFOLDING_URL = "project?scaffolding=true" export const BASE_URL = "http://10.212.138.205:8080/stillastracking/v1/api/" export const SCAFFOLDING_URL = "unit" export const STORAGE_URL = "storage" -export const USER_URL = "user" +export const USER_URL = "user?id=" export const PROJECTS_URL = "project" export const PROJECTS_URL_WITH_SCAFFOLDING = "project?scaffolding=true" diff --git a/webstillas/src/modelData/postModel.js b/webstillas/src/modelData/postModel.js index 0f1a395acd27e89678444e89cdd93f4d05d7eb19..48fb7b976507b8d68dd62641af4657131b94d92b 100644 --- a/webstillas/src/modelData/postModel.js +++ b/webstillas/src/modelData/postModel.js @@ -24,6 +24,6 @@ export default function postModel(url, body) { } }); - xhr.send(body); + xhr.send(JSON.stringify(body)); }); }