diff --git a/webstillas/src/components/Login.js b/webstillas/src/components/Login.js
index 1ed3ecdc591cc76f19b276f9ccdb778a774e40e4..e9129acccd5c575b844a20ba61b467b80a3c3bd1 100644
--- a/webstillas/src/components/Login.js
+++ b/webstillas/src/components/Login.js
@@ -4,6 +4,7 @@ import { Form, Alert } from "react-bootstrap";
import { Button } from "react-bootstrap";
import { useUserAuth } from "../context/UserAuthContext";
import {PROJECT_URL, SIGNUP} from "./constants";
+import "../firebaselogin.css"
const Login = () => {
const [email, setEmail] = useState("");
@@ -25,8 +26,8 @@ const Login = () => {
return (
- <>
- <div className="p-4 box">
+ <div className={"card loginpage"}>
+ <div className="box">
<h2 className="mb-3">Stillas Login</h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={handleSubmit}>
@@ -46,7 +47,7 @@ const Login = () => {
/>
</Form.Group>
- <div className="d-grid gap-2">
+ <div className="loginbtn">
<Button variant="primary" type="Submit">
Logg inn
</Button>
@@ -54,10 +55,10 @@ const Login = () => {
</Form>
<hr />
</div>
- <div className="p-4 box mt-3 text-center">
+ <div className="logintxt">
Har du ikke en bruker? <Link to={SIGNUP}>Registrer</Link>
</div>
- </>
+ </div>
);
};
diff --git a/webstillas/src/components/ProtectedRoute.js b/webstillas/src/components/ProtectedRoute.js
index 3cc9297bb608528265c4d72def5284f646633bbc..48fb7ca8ceaf5e740e3231b227efda1bfc174b9d 100644
--- a/webstillas/src/components/ProtectedRoute.js
+++ b/webstillas/src/components/ProtectedRoute.js
@@ -1,6 +1,13 @@
import React from "react";
import { Navigate } from "react-router-dom";
import { useUserAuth } from "../context/UserAuthContext";
+
+/**
+ * Function that will check if the user is authenticated, before sending the user to a protected route
+ *
+ * @param children the element route.
+ * @returns {JSX.Element|*}
+ */
const ProtectedRoute = ({ children }) => {
const { user } = useUserAuth();
diff --git a/webstillas/src/components/Signup.js b/webstillas/src/components/Signup.js
index 0894b34690d3a5a484afcf5617dacee4435589aa..a2ed0e4f8ea2795d029673ccbeebd712ce8ad845 100644
--- a/webstillas/src/components/Signup.js
+++ b/webstillas/src/components/Signup.js
@@ -4,8 +4,17 @@ import {Form, Alert} from "react-bootstrap";
import {Button} from "react-bootstrap";
import {useUserAuth} from "../context/UserAuthContext";
import postModel from "../modelData/postModel";
-import { formatDateToString} from "./projects/projects";
+import {formatDateToString} from "./projects/projects";
+import {LOGIN} from "./constants";
+import {USER_POST_URL, USER_URL} from "../modelData/constantsFile";
+import "../firebaselogin.css"
+/**
+ * Function that will register a new user to the system.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
const Signup = () => {
const [email, setEmail] = useState("");
const [firstName, setFirstName] = useState("");
@@ -14,16 +23,18 @@ const Signup = () => {
const [phone, setPhone] = useState(0);
const [admin, setAdmin] = useState(false);
const [birthDay, setBirthDay] = useState("");
-
const [error, setError] = useState("");
const [password, setPassword] = useState("");
const {signUp} = useUserAuth();
-
let navigate = useNavigate();
- const handleSubmit = async (e) => {
- e.preventDefault();
- setError("");
+ /**
+ * Will sign up the user, then add the user to the database.
+ * On sucsess the user is navigated back to log in site
+ *
+ * @returns {Promise<void>}
+ */
+ const handleSubmit = async () => {
try {
signUp(email, password).then(newUser => {
const user =
@@ -39,13 +50,11 @@ const Signup = () => {
"admin": admin,
"dateOfBirth": birthDay
}
- postModel("user", user)
- .then(() => navigate("/"))
- .catch(e => console.log(e))
- }).catch(
- e => console.log(e)
- )
+ JSON.stringify(user)
+ postModel(USER_POST_URL, user)
+ .then(() => navigate(LOGIN))
+ })
} catch (err) {
setError(err.message);
}
@@ -53,9 +62,8 @@ const Signup = () => {
return (
- <>
- <div className="p-4 box">
- <h2 className="mb-3">Firebase Auth Signup</h2>
+ <div className={"card signup-box"}>
+ <h2 className="mb-3">Stillas bruker registrering </h2>
{error && <Alert variant="danger">{error}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="firstName">
@@ -81,24 +89,29 @@ const Signup = () => {
/>
</Form.Group>
- <Form.Group className="mb-3" controlId="admin">
- <Form.Select onChange={(e) => setAdmin(Boolean(e.target.value))}>
- <option value={"false"}>False</option>
- <option value={"true"}>True</option>
- </Form.Select>
- </Form.Group>
+ <div className={"selectors"}>
+ <Form.Group className="admin-select" controlId="admin">
+ <Form.Select onChange={(e) => setAdmin(Boolean(e.target.value))}>
+ <option value={"false"}>False</option>
+ <option value={"true"}>True</option>
+ </Form.Select>
+ </Form.Group>
- <Form.Group className="mb-3" controlId="role">
- <Form.Select onChange={(e) => setRole(e.target.value)}>
- <option value={"admin"}>Administrator</option>
- <option value={"installer"}>Installatør</option>
- <option value={"storage"}>Lagerarbeider</option>
+ <Form.Group className="role-select" controlId="role">
+ <Form.Select onChange={(e) => setRole(e.target.value)}>
+ <option value={"admin"}>Administrator</option>
+ <option value={"installer"}>Installatør</option>
+ <option value={"storage"}>Lagerarbeider</option>
- </Form.Select>
- </Form.Group>
+ </Form.Select>
+ </Form.Group>
+ </div>
- <label htmlFor="startDate">Fødselsdag</label>
- <input type="date" onChange={(event) => setBirthDay(formatDateToString(event.target.value))}/>
+
+ <div className={"date-picker-signup"}>
+ <label className={"date"} htmlFor="startDate">Fødselsdag</label>
+ <input type="date" onChange={(event) => setBirthDay(formatDateToString(event.target.value))}/>
+ </div>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Control
@@ -114,17 +127,17 @@ const Signup = () => {
onChange={(e) => setPassword(e.target.value)}
/>
</Form.Group>
- <div className="d-grid gap-2">
+ <div className="signup-btn">
<Button variant="primary" type="Submit">
Registrer
</Button>
+
</div>
</Form>
+ <div className="signup-text ">
+ Har du allerede en bruker? <Link to={LOGIN}>Logg inn</Link>
</div>
- <div className="p-4 box mt-3 text-center">
- Har du allerede en bruker? <Link to="/">Logg inn</Link>
- </div>
- </>
+ </div>
);
};
diff --git a/webstillas/src/components/Spinner.js b/webstillas/src/components/Spinner.js
index 57a870499519d291c8e8772437e8f97a057c69f4..00c67e4748958add30a4e7af834680dcdfad08d2 100644
--- a/webstillas/src/components/Spinner.js
+++ b/webstillas/src/components/Spinner.js
@@ -2,6 +2,12 @@ import {Spinner} from "react-bootstrap";
import React from "react";
import "./Spinner.css"
+/**
+ * Function that will return a spinner
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
export const SpinnerDefault = () =>{
return(
<Spinner className={"spinner"} animation="border" style={{ width: '5rem', height: '5rem' }} role="status">
diff --git a/webstillas/src/components/logistics/scaffold/addScaffolding.js b/webstillas/src/components/logistics/scaffold/addScaffolding.js
index a7a6fadf5c4b33c1cefaafaeeb2d4372e82b45ff..ec279de2ea3235846364e6318ed0517a5106965c 100644
--- a/webstillas/src/components/logistics/scaffold/addScaffolding.js
+++ b/webstillas/src/components/logistics/scaffold/addScaffolding.js
@@ -48,7 +48,7 @@ function AddScaffolding() {
<p className={"input-sorting-text"}>Stillasdel:</p>
<select
className={"form-select scaffolding-input"}
- value={"Test"}
+ value={scaffolding.type}
onChange={(e) => {
//setting the type
setScaffolding({...scaffolding, type: e.target.value})
diff --git a/webstillas/src/components/projects/elements/Modal.js b/webstillas/src/components/projects/elements/Modal.js
index 00f4b93bf03a773040e9a32242cb0efedfedd517..37c795a83008d9dd24863980081a272ba2f5c861 100644
--- a/webstillas/src/components/projects/elements/Modal.js
+++ b/webstillas/src/components/projects/elements/Modal.js
@@ -3,9 +3,16 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import {Button, Modal} from 'react-bootstrap';
import img from "../../scaffolding/images/spirstillas_solideq_spir_klasse_5_stillas_135_1.jpg";
import putModel from "../../../modelData/putData";
-import {TRANSFER_SCAFFOLDING} from "../../../modelData/constantsFile";
+import {
+ PROJECTS_URL_WITH_ID,
+ PROJECTS_WITH_SCAFFOLDING_URL,
+ TRANSFER_SCAFFOLDING,
+ WITH_SCAFFOLDING_URL
+} from "../../../modelData/constantsFile";
import {useQueryClient} from "react-query";
import "./Modal.css"
+import {GetDummyData} from "../../../modelData/addData";
+import {SpinnerDefault} from "../../Spinner";
@@ -69,9 +76,7 @@ export default function InfoModalFunc(props) {
const handleShow = () => setShow(true);
const queryClient = useQueryClient()
- let jsonProjects
- jsonProjects = queryClient.getQueryData("allProjects")
-
+ const {data: jsonProjects} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL)
let jsonProject = queryClient.getQueryData(["project", props.id])
const [scaffolding, setScaffolding] = useState(scaffoldingMove);
@@ -128,89 +133,94 @@ export default function InfoModalFunc(props) {
+
+
//Checks if the user did not set to project equal to from project.
const validFormat = ToProject !== FromProject
- return (
- <>
- <Button className="nextButton" onClick={handleShow}>
- Overfør deler til Prosjekt
- </Button>
-
- <Modal show={show}
- onHide={handleClose}
- centered
- backdrop="static"
- dialogClassName="modal-dialog modal-xl"
- >
- <Modal.Header closeButton>
- <Modal.Title>Stillas Overføring</Modal.Title>
- </Modal.Header>
- <Modal.Body>
- <div className={"scaffoldingElement-modal"}>
- <div className={"transfer-options"}>
- <span>Overfør til prosjekt:</span>
- <select
- className={"form-select"}
- value={ToProject}
- onChange={(e) => setToProject(e.target.value)}>
- <option selected defaultValue="">Choose here</option>
- <option value={0}>Storage</option>
- {jsonProjects?.map(e => {
- return (
- <option value={e.projectID}>{e.projectName}</option>
- )
- })}
- </select>
- </div>
- <div>
- <span>Overfør fra prosjekt:</span>
- <select
- className={"form-select"}
- value={FromProject}
+ return (
+ <>
+ <Button className="nextButton" onClick={handleShow}>
+ Overfør deler til Prosjekt
+ </Button>
+
+ <Modal show={show}
+ onHide={handleClose}
+ centered
+ backdrop="static"
+ dialogClassName="modal-dialog modal-xl"
+ >
+ <Modal.Header closeButton>
+ <Modal.Title>Stillas Overføring</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <div className={"scaffoldingElement-modal"}>
+ <div className={"transfer-options"}>
+ <span>Overfør til prosjekt:</span>
+ <select
+ className={"form-select"}
+ value={ToProject}
+ onChange={(e) => setToProject(e.target.value)}>
+ <option selected defaultValue="">Choose here</option>
+ <option value={0}>Storage</option>
+ {jsonProjects?.map(e => {
+ return (
+ <option value={e.projectID}>{e.projectName}</option>
+ )
+ })}
+ </select>
+ </div>
+ <div>
+ <span>Overfør fra prosjekt:</span>
+ <select
+ className={"form-select"}
+ value={FromProject}
onChange={(e) => setFromProject(e.target.value)}>
- <option selected defaultValue="">Choose here</option>
- <option value={0}>Storage</option>
- {jsonProjects.map(e => {
+ <option selected defaultValue="">Choose here</option>
+ <option value={0}>Storage</option>
+ {jsonProjects?.map(e => {
+ return (
+ <option value={e.projectID}>{e.projectName}</option>
+ )
+ })}
+ </select>
+ </div>
+ {jsonProject[0].scaffolding.map(e => {
return (
- <option value={e.projectID}>{e.projectName}</option>
+ <div key={e.type} className={"card"}>
+ <section className={"header"}>
+ <h3>{e.type.toUpperCase()}</h3>
+ </section>
+ <section className={"image"}>
+ <img className={"img"}
+ src={require(`../../scaffolding/images/${e.type.charAt(0).toUpperCase() + e.type.slice(1)}.jpg`)}
+ alt={""}></img>
+ </section>
+ <input
+ className={"form-control"}
+ placeholder={"Enter quantity of scaffolding parts to transfer"}
+ type="number"
+ min={0}
+ key={"input" + e.type}
+ onChange={(j) => setQuantity(j, e.type)}/>
+ </div>
)
- })}
- </select>
+ }
+ )}
+
</div>
- {jsonProject[0].scaffolding.map(e => {
- return (
- <div className={"card"}>
- <section className={"header"}>
- <h3>{e.type.toUpperCase()}</h3>
- </section>
- <section className={"image"}>
- <img className={"img"} src={require(`../../scaffolding/images/${e.type.charAt(0).toUpperCase() + e.type.slice(1)}.jpg`)} alt={""}></img>
- </section>
- <input
- className={"form-control"}
- placeholder={"Enter quantity of scaffolding parts to transfer"}
- type="number"
- min={0}
- key={"input" + e.type}
- onChange={(j) => setQuantity(j, e.type)}/>
- </div>
- )
- }
- )}
-
- </div>
- </Modal.Body>
- <Modal.Footer>
- <Button variant="secondary" onClick={handleClose}>
- Close
- </Button>
- <Button variant="primary" disabled={!validFormat} onClick={AddScaffold}>
- Save Changes
- </Button>
- </Modal.Footer>
- </Modal>
- </>
- );
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={handleClose}>
+ Close
+ </Button>
+ <Button variant="primary" disabled={!validFormat} onClick={AddScaffold}>
+ Save Changes
+ </Button>
+ </Modal.Footer>
+ </Modal>
+ </>
+ );
+
}
diff --git a/webstillas/src/components/projects/elements/card.js b/webstillas/src/components/projects/elements/card.js
index 869c8ba9b496b58e895023454438db046873d064..04037f912e7c8567d747c57c9af66a6338b74509 100644
--- a/webstillas/src/components/projects/elements/card.js
+++ b/webstillas/src/components/projects/elements/card.js
@@ -33,11 +33,11 @@ function CardElement(props) {
}
]
try {
- const result = await deleteModel(PROJECTS_URL, (deleteBody))
+ await deleteModel(PROJECTS_URL, (deleteBody)).then(() =>
+ window.alert("Sucsessfylly deleted project")
+ )
await queryClient.invalidateQueries("allProjects")
-
} catch (e) {
- console.log(e)
window.alert("Something wrong happened! Try again later")
}
}
diff --git a/webstillas/src/components/projects/elements/preView.css b/webstillas/src/components/projects/elements/preView.css
index c987c4ca49fb222f434926d841e701aa51b4970b..0e6a758e1944f5427e1c05f2f7fef39ce643c2d5 100644
--- a/webstillas/src/components/projects/elements/preView.css
+++ b/webstillas/src/components/projects/elements/preView.css
@@ -56,3 +56,6 @@
width: 600px;
}
+.contact-information{
+ margin-top: 50px;
+}
diff --git a/webstillas/src/components/projects/elements/preView.js b/webstillas/src/components/projects/elements/preView.js
index 5322441f5d206ead960a8646967bf5404fbf681e..85b5048a1bb5870b1cc8663660d05bfbe7498783 100644
--- a/webstillas/src/components/projects/elements/preView.js
+++ b/webstillas/src/components/projects/elements/preView.js
@@ -1,100 +1,38 @@
import React from "react";
-import mapboxgl from "mapbox-gl";
import "./preView.css"
import Tabs from "../tabView/Tabs"
import ScaffoldingCardProject from "../../scaffolding/elements/scaffoldingCardProject";
import InfoModal from "./Modal";
import {
+ MAP_STYLE_V11,
PROJECTS_URL_WITH_ID,
PROJECTS_WITH_SCAFFOLDING_URL,
WITH_SCAFFOLDING_URL
} from "../../../modelData/constantsFile";
import img from "./../../mapPage/marker.png"
import {GetDummyData} from "../../../modelData/addData";
-import {useQueryClient} from "react-query";
import {SpinnerDefault} from "../../Spinner";
import ReactMapboxGl, {Marker} from "react-mapbox-gl";
+import {MapBoxAPIKey} from "../../../firebaseConfig";
+import {InternalServerError} from "../../error/error";
const Map = ReactMapboxGl({
- accessToken:
- "pk.eyJ1IjoiYWxla3NhYWIxIiwiYSI6ImNrbnFjbms1ODBkaWEyb3F3OTZiMWd6M2gifQ.vzOmLzHH3RXFlSsCRrxODQ"
+ accessToken: MapBoxAPIKey
});
-
-//mapboxgl.accessToken = 'pk.eyJ1IjoiYWxla3NhYWIxIiwiYSI6ImNrbnFjbms1ODBkaWEyb3F3OTZiMWd6M2gifQ.vzOmLzHH3RXFlSsCRrxODQ';
-/*
-//Todo refactor class to function
-class PreViewClass extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: props.data
- }
- this.mapContainer = React.createRef();
- }
-
- async componentDidMount() {
- const {data} = this.state
- console.log(data)
- try {
- const map = new mapboxgl.Map({
- container: this.mapContainer.current,
- style: MAP_STYLE_V11,
- center: [data.longitude, data.latitude],
- zoom: 15
- });
-
- // Create a DOM element for each marker.
- const el = document.createElement('div');
- const width = 50;
- const height = 50;
- el.className = 'marker';
- el.style.backgroundImage = (img);
- el.style.width = `${width}px`;
- el.style.height = `${height}px`;
- el.style.backgroundSize = '100%';
-
- el.addEventListener('click', () => {
- window.alert("Project: " + data.projectName)
- });
-
- // Add markers to the map.
- new mapboxgl.Marker(el)
- .setLngLat([data.longitude, data.latitude])
- .addTo(map);
-
- } catch (e) {
- console.log(e)
- }
-
- }
-
-
- getProjectID() {
- const pathSplit = window.location.href.split("/")
- return pathSplit[pathSplit.length - 1]
- }
-
-
- render() {
- return (
- <div className={"preView-Project-Main"}>
- <div ref={this.mapContainer} className="map-container-project"/>
- </div>
- )
- }
-}*/
-
-
+/**
+ * Function that will display a map where the project is located
+ * @param props the project to be displayed
+ * @returns {JSX.Element}
+ */
function PreViewFunction(props) {
const data = props.data
-
return (
<div className={"preView-Project-Main"}>
<Map
- style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
+ style= {MAP_STYLE_V11} // eslint-disable-line
containerStyle={{
height: "93vh",
width: "40vw"
@@ -117,13 +55,21 @@ function PreViewFunction(props) {
}
-
+/**
+ * Function that will get the project id form the url.
+ * @returns {string} project id
+ */
function getProjectID() {
const pathSplit = window.location.href.split("/")
return pathSplit[pathSplit.length - 1]
}
+/**
+ * Function that will display all the different types of scaffolding
+ * @param data scaffolding parts
+ * @returns {JSX.Element}
+ */
function scaffoldingComponents(data) {
return (
<div className={"grid-container-project-scaffolding"}>
@@ -142,6 +88,11 @@ function scaffoldingComponents(data) {
}
+/**
+ * Will return cards with project information
+ * @param project to be displayed
+ * @returns {JSX.Element}
+ */
function contactInformation(project) {
return (
<div>
@@ -170,7 +121,7 @@ function contactInformation(project) {
</ul>
</div>
</section>
- <section className={"info-card"}>
+ <section className={"info-card contact-information"}>
<div className={"information-highlights preview-info"}>
<h3>Kontakt Informasjon</h3>
<ul className={"contact-list"}>
@@ -200,26 +151,18 @@ function contactInformation(project) {
}
+/**
+ * Function that displays the whole page.
+ * @returns {JSX.Element}
+ */
export const PreView = () => {
- const queryClient = useQueryClient()
-
- const {
- isLoading: projectLoad,
- data: project
- } = GetDummyData(["project", getProjectID()], PROJECTS_URL_WITH_ID + getProjectID() + WITH_SCAFFOLDING_URL)
- let projects
- let allProjectsLoading
- if (queryClient.getQueryData("allProjects") !== undefined) {
- projects = queryClient.getQueryData("allProjects")
- }
- const {isLoading: allProjects, data} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL)
- projects = data
- allProjectsLoading = allProjects
+ //Fetching the data of specific project.
+ const {isLoading: projectLoad, data: project, isError } = GetDummyData(["project", getProjectID()], PROJECTS_URL_WITH_ID + getProjectID() + WITH_SCAFFOLDING_URL)
-
- if (allProjectsLoading || projectLoad) {
+ if (projectLoad) {
return <SpinnerDefault/>
-
+ } else if(isError){
+ return <InternalServerError />
} else {
return (
<div className={"preView-Project-Main"}>
@@ -231,7 +174,7 @@ export const PreView = () => {
<div label="Kontakt">
{contactInformation(project)}
</div>
- <div label="stillas-komponenter">
+ <div label="Stillasdeler">
<InfoModal id={getProjectID()}/>
{scaffoldingComponents(project[0])}
</div>
diff --git a/webstillas/src/components/projects/tabView/Tab.js b/webstillas/src/components/projects/tabView/Tab.js
index f2ee28e12084c2e8c2285f6200a69bc895d77df7..7247f90533d2168412257dd9539407fe678f6554 100644
--- a/webstillas/src/components/projects/tabView/Tab.js
+++ b/webstillas/src/components/projects/tabView/Tab.js
@@ -2,7 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types';
-//https://www.digitalocean.com/community/tutorials/react-tabs-component
+/**
+ * Class of a single tab.
+ *
+ * Code acquired from https://www.digitalocean.com/community/tutorials/react-tabs-component
+ */
class Tab extends React.Component {
static propTypes = {
activeTab: PropTypes.string.isRequired,
diff --git a/webstillas/src/components/projects/tabView/Tabs.js b/webstillas/src/components/projects/tabView/Tabs.js
index 7a7b65f35b2d3fcbf1bf9937ed8276b189c0f41e..027fb36febfbb9a6c10bc57db42fbad8bbef788b 100644
--- a/webstillas/src/components/projects/tabView/Tabs.js
+++ b/webstillas/src/components/projects/tabView/Tabs.js
@@ -2,7 +2,12 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tab from './Tab';
-//https://www.digitalocean.com/community/tutorials/react-tabs-component
+
+/**
+ * Class to handle tabs
+ *
+ * Code aquired from https://www.digitalocean.com/community/tutorials/react-tabs-component
+ */
class Tabs extends Component {
static propTypes = {
children: PropTypes.instanceOf(Array).isRequired,
diff --git a/webstillas/src/components/userinformation/userInfo.css b/webstillas/src/components/userinformation/userInfo.css
index db9d96897ecc2b5206a7ed9abe22be7a825f940a..1c314746eae6f89bb7015b211b80b687096fceea 100644
--- a/webstillas/src/components/userinformation/userInfo.css
+++ b/webstillas/src/components/userinformation/userInfo.css
@@ -29,6 +29,9 @@ body {
margin-left: 35%;
}
+
+
+
.info-card{
alignment: center;
width: fit-content;
diff --git a/webstillas/src/components/userinformation/userInfo.js b/webstillas/src/components/userinformation/userInfo.js
index 915f56c2344b0d8ed9d6e8581ae885b8b31ffcbe..ca6a22a8b9232dbf487678baedd758eda3ba7a71 100644
--- a/webstillas/src/components/userinformation/userInfo.js
+++ b/webstillas/src/components/userinformation/userInfo.js
@@ -6,8 +6,15 @@ import {SpinnerDefault} from "../Spinner";
import "./userInfo.css"
import profileImg from "./profile-png-icon-2.png"
+
+/**
+ * Function that will return information about the user.
+ * @returns {JSX.Element}
+ * @constructor
+ */
export function UserInfo(){
- const {isLoading, data} = GetDummyData("user", USER_URL + auth.currentUser.uid)
+ //Todo add if error
+ const {isLoading, data, isError} = GetDummyData("user", USER_URL + auth.currentUser.uid)
if (isLoading) {
return (<SpinnerDefault/>)
@@ -17,7 +24,6 @@ export function UserInfo(){
<div className={"info-card"}>
<div className={"image-frame"}>
<img src={profileImg} alt={""} className={"profile-image"}/>
-
</div>
<div className={"information-text"}>
<h4 className={"header-information"}>
diff --git a/webstillas/src/context/UserAuthContext.js b/webstillas/src/context/UserAuthContext.js
index fdbc08fa5d5125e9036fa01c20bd5d828fde9ac6..a5762e8a0ec65833358ede400b03d9539b724d26 100644
--- a/webstillas/src/context/UserAuthContext.js
+++ b/webstillas/src/context/UserAuthContext.js
@@ -51,11 +51,8 @@ export function UserAuthContextProvider({ children }) {
}
- /**
- *
- *
- */
- //Todo kommenter
+
+ //todo kommenter
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (currentuser) => {
console.log("Auth", currentuser);
diff --git a/webstillas/src/firebaselogin.css b/webstillas/src/firebaselogin.css
new file mode 100644
index 0000000000000000000000000000000000000000..3731ebe60b71162e92d0ba096947d3047c67b8fb
--- /dev/null
+++ b/webstillas/src/firebaselogin.css
@@ -0,0 +1,56 @@
+.signup-box{
+ width: 50%;
+ margin-left: 25%;
+ margin-top: 5%;
+ padding: 20px 20px 20px 20px;
+}
+
+.selectors{
+ display: flex;
+}
+
+.admin-select{
+ padding-right: 40px;
+}
+
+.role-select{
+ padding-right: 40px;
+}
+
+.date-picker-signup{
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
+.date{
+ padding-right: 20px;
+}
+
+.signup-btn{
+ margin-left: 250px;
+}
+
+.signup-text {
+ padding-top: 10px;
+ margin-left: 250px;
+
+}
+
+.box{
+ padding: 20px 20px 20px 20px;
+}
+
+.loginpage{
+ margin-left: 35%;
+ margin-top: 5%;
+}
+
+.loginbtn{
+ margin-left: 20%;
+}
+
+.logintxt{
+ margin-left: 25%;
+ margin-top: -5%;
+ padding-bottom: 10px;
+}
diff --git a/webstillas/src/modelData/addData.js b/webstillas/src/modelData/addData.js
index cd7c16716c6b7fdb207da0783594834039e92ca4..e4933ec672c99e9c11415030b8d7e61fa340aaa2 100644
--- a/webstillas/src/modelData/addData.js
+++ b/webstillas/src/modelData/addData.js
@@ -3,6 +3,14 @@ import fetchModel from "./fetchData";
import { useQuery } from 'react-query'
//Todo set timeout
+
+/**
+ * Function that will fetch data from api, and cache data
+ *
+ * @param dataName key to data caching
+ * @param url to the api
+ * @returns {{isLoading: boolean, isLoadingError: boolean, isError: boolean, data: unknown}}
+ */
export const GetDummyData = (dataName, url) => {
const { isLoading, data, isError, isLoadingError} = useQuery(dataName, ()=>{
return fetchModel(url)
@@ -12,7 +20,6 @@ export const GetDummyData = (dataName, url) => {
refetchOnReconnect: false
})
-
return {isLoading, data, isError, isLoadingError}
}
diff --git a/webstillas/src/modelData/constantsFile.js b/webstillas/src/modelData/constantsFile.js
index 944117bb987e530e25fa1cb938f14dbed1b95c85..10dd7cb7b569ba5f3cd585810d5efd31d21e5d01 100644
--- a/webstillas/src/modelData/constantsFile.js
+++ b/webstillas/src/modelData/constantsFile.js
@@ -3,6 +3,8 @@ 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?id="
+export const USER_POST_URL = "user"
+
export const PROJECTS_URL = "project"
export const PROJECTS_URL_WITH_SCAFFOLDING = "project?scaffolding=true"