Skip to content
Snippets Groups Projects
Commit 6c777483 authored by Martin Iversen's avatar Martin Iversen
Browse files

Merge branch 'main' of https://git.gvk.idi.ntnu.no/aleksaab/stillastracker into Martin

parents af6731b4 31d3a9a4
No related branches found
No related tags found
1 merge request!108Martin
Hide whitespace changes
Inline Side-by-side
Showing
with 253 additions and 108 deletions
webstillas/src/App.js
+ 2
− 0
View file @ 6c777483
......@@ -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
+ 30
− 21
View file @ 6c777483
......@@ -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"
......
webstillas/src/components/logistics/scaffold/addScaffolding.css
+ 13
− 1
View file @ 6c777483
.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
+ 10
− 8
View file @ 6c777483
......@@ -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>
)
}
}
......
webstillas/src/components/projects/elements/card.css
+ 4
− 15
View file @ 6c777483
......@@ -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
+ 7
− 3
View file @ 6c777483
......@@ -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"}>
......
webstillas/src/components/projects/elements/preView.js
+ 58
− 36
View file @ 6c777483
......@@ -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} &#13217;</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"}>
......
webstillas/src/components/scaffolding/scaffolding.css
+ 2
− 0
View file @ 6c777483
......@@ -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
+ 5
− 5
View file @ 6c777483
......@@ -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
+ 43
− 0
View file @ 6c777483
.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
+ 77
− 17
View file @ 6c777483
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>
)
}
webstillas/src/modelData/constantsFile.js
+ 1
− 1
View file @ 6c777483
......@@ -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
+ 1
− 1
View file @ 6c777483
......@@ -24,6 +24,6 @@ export default function postModel(url, body) {
}
});
xhr.send(body);
xhr.send(JSON.stringify(body));
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment