Added cards on project info, user info, add scaffolding

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>

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,9 +25,7 @@ const Signup = () => {
     e.preventDefault();
     setError("");
     try {
-      const newUser = await signUp(email, password);
-
-      //Todo Add user in API
+      signUp(email, password).then(newUser => {
         console.log(newUser.user.uid)
         const user =
             {
@@ -36,13 +37,14 @@ const Signup = () => {
               "role": role,
               "phone": phone,
               "email": email,
-          "admin": admin
+              "admin": admin,
+              "dateOfBirth": birthDay
             }
-
-      await postModel("http://localhost:8080/stillastracking/v1/api/user", user)
+        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"

webstillas/src/components/logistics/scaffold/addScaffolding.css

 .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%;
+}

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,13 +74,15 @@ class AddScaffolding extends React.Component{
 
     render() {
         return(
-            <div className={"input-fields"}>
+            <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>
+
 
 
     )

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;
+}

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" }} />
+                    <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"}>

webstillas/src/components/projects/elements/preView.js

@@ -22,7 +22,6 @@ const Map = ReactMapboxGl({
 });
 
 
-
 //mapboxgl.accessToken = 'pk.eyJ1IjoiYWxla3NhYWIxIiwiYSI6ImNrbnFjbms1ODBkaWEyb3F3OTZiMWd6M2gifQ.vzOmLzHH3RXFlSsCRrxODQ';
 /*
 //Todo refactor class to function
@@ -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"}>
+        <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"}>Navn/Bedrift</span>
+                            <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"}>Telefon nummer</span>
-                        <span className={"right-contact-text"}>{project[0].customer.number}</span>
+                            <span className={"left-contact-text"}>Størrelse</span>
+                            <span className={"right-contact-text"}>{project[0].size} &#13217;</span>
                         </li>
                         <li className={"horizontal-list-contact"}>
-                        <span className={"left-contact-text"}>Adresse</span>
+                            <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].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</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"}>Periode</span>
+                            <span className={"left-contact-text"}>Adresse</span>
                             <span
-                            className={"right-contact-text"}>{project[0].period.startDate} to {project[0].period.endDate}  </span>
+                                className={"right-contact-text"}>{project[0].address.street}, {project[0].address.zipcode} {project[0].address.municipality}</span>
                         </li>
                     </ul>
                 </div>
             </section>
+
+
+        </div>
+
     )
 }
 

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;
 }

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>

webstillas/src/components/userinformation/userInfo.css

+.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;
+}
+

webstillas/src/components/userinformation/userInfo.js

 import React from "react";
 import { auth } from "../../firebase";
-import {formatDate} from "../projects/projects";
-
-
-
-function UserInfo(){
-
+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={"information-text"}>
-                <h3 className={"header-information"}>
-
-                </h3>
-                <h3 className={"under-information"}>
-
-                </h3>
-
+                    <div className={"image-frame"}>
+                        <img src={profileImg} alt={""} className={"profile-image"}/>
 
                     </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>
+
         )
     }
+}
+
+

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"
 

webstillas/src/modelData/postModel.js

@@ -24,6 +24,6 @@ export default function postModel(url, body) {
             }
         });
 
-        xhr.send(body);
+        xhr.send(JSON.stringify(body));
     });
 }