diff --git a/webstillas/.gitignore b/webstillas/.gitignore index 4d29575de80483b005c29bfcac5061cd2f45313e..bce66b29e213959090fac1af58f045f16cde4397 100644 --- a/webstillas/.gitignore +++ b/webstillas/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +/src/firebaseConfig.js diff --git a/webstillas/.idea/webstillas.iml b/webstillas/.idea/webstillas.iml index ef98539bbef05aef314c9713772daa8f1a8eebd0..0e106ab2f10f9ee67004dd5fbd8292f84a42045d 100644 --- a/webstillas/.idea/webstillas.iml +++ b/webstillas/.idea/webstillas.iml @@ -5,6 +5,7 @@ <excludeFolder url="file://$MODULE_DIR$/temp" /> <excludeFolder url="file://$MODULE_DIR$/.tmp" /> <excludeFolder url="file://$MODULE_DIR$/tmp" /> + <excludeFolder url="file://$MODULE_DIR$/.idea/inspectionProfiles" /> </content> <orderEntry type="inheritedJdk" /> <orderEntry type="sourceFolder" forTests="false" /> diff --git a/webstillas/src/App.css b/webstillas/src/App.css index cf1503fcdbe26b4edcc10b6f2d1c8680aae0a9b9..7f1a941fb2025c886fc08eb12e2e345af7f99375 100644 --- a/webstillas/src/App.css +++ b/webstillas/src/App.css @@ -1,6 +1,7 @@ .link{ text-decoration: none; color: black; + } .button{ diff --git a/webstillas/src/components/Signup.js b/webstillas/src/components/Signup.js index ed9bd4b3180714f2fa4fdd598e0e606e7d47470c..82c52a45108aedba90eaaaabdbae907cd9f4f9f5 100644 --- a/webstillas/src/components/Signup.js +++ b/webstillas/src/components/Signup.js @@ -56,6 +56,7 @@ const Signup = () => { }) } catch (err) { + console.log(err) setError(err.message); } }; diff --git a/webstillas/src/components/constants.js b/webstillas/src/components/constants.js index 7ba12642b45fc92742cc3548bc985b82ffbc4290..c3aed2aecc5480cc8e7e93b09b5a42ea3e669a84 100644 --- a/webstillas/src/components/constants.js +++ b/webstillas/src/components/constants.js @@ -2,8 +2,8 @@ export const PROJECT_URL = "/project" export const MAP_URL = "/map" export const SCAFFOLDING_URL = "/scaffolding" export const PROJECT_URL_ID = "/project/:id" -export const ADD_PROJECT_URL = "/addproject" -export const ADD_SCAFFOLDING_URL = "/addscaffolding" +export const ADD_PROJECT_URL = "/add-project" +export const ADD_SCAFFOLDING_URL = "/add-scaffolding" export const USERINFO_URL = "/userinfo" export const NOTFOUND = "/*" export const SIGNUP = "/signup" diff --git a/webstillas/src/components/logistics/scaffold/addScaffolding.js b/webstillas/src/components/logistics/scaffold/addScaffolding.js index 870f90898e8e92fd5ee48a44cf85920a350a661e..3fc4f8f4cc1807456a6b1c17514f710a3c1aebad 100644 --- a/webstillas/src/components/logistics/scaffold/addScaffolding.js +++ b/webstillas/src/components/logistics/scaffold/addScaffolding.js @@ -22,8 +22,7 @@ function AddScaffolding() { address: "" } }) - - //Verification of + //Verification of a buttonPress const [buttonPress, setButtonPress] = useState(false) diff --git a/webstillas/src/components/mapPage/mapPage.js b/webstillas/src/components/mapPage/mapPage.js index 49ada1ce131e4732d9e56e3d0b3f0e670deffdd6..6039ff4ada087465aecce745f960c168df3f024d 100644 --- a/webstillas/src/components/mapPage/mapPage.js +++ b/webstillas/src/components/mapPage/mapPage.js @@ -1,7 +1,7 @@ import React from "react"; import "./mapPage.css" import {MAP_STYLE_V11, PROJECTS_WITH_SCAFFOLDING_URL} from "../../modelData/constantsFile"; -import {GetDummyData} from "../../modelData/addData"; +import {GetCachingData} from "../../modelData/addData"; import ReactMapboxGl, {ScaleControl, Marker, ZoomControl} from "react-mapbox-gl"; import {MapBoxAPIKey} from "../../firebaseConfig"; import img from "./marker.png" @@ -75,7 +75,7 @@ function MapPageClass(props) { * @returns {JSX.Element} */ export const MapPage = () => { - const {isLoading, data, isError} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) + const {isLoading, data, isError} = GetCachingData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) if (isLoading) { return <SpinnerDefault /> } else if(isError){ diff --git a/webstillas/src/components/projects/elements/Modal.js b/webstillas/src/components/projects/elements/Modal.js index cb9a4b86debaa5705536853ca5e788985f9191a9..448cb1e040204703c072d2a1abf2d37a49e7299f 100644 --- a/webstillas/src/components/projects/elements/Modal.js +++ b/webstillas/src/components/projects/elements/Modal.js @@ -1,18 +1,14 @@ import React, {useState} from "react"; import 'bootstrap/dist/css/bootstrap.min.css'; import {Button, Modal, Spinner} from 'react-bootstrap'; -import img from "../../scaffolding/images/spirstillas_solideq_spir_klasse_5_stillas_135_1.jpg"; import putModel from "../../../modelData/putData"; 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"; +import {GetCachingData} from "../../../modelData/addData"; @@ -76,7 +72,7 @@ export default function InfoModalFunc(props) { const handleShow = () => setShow(true); const queryClient = useQueryClient() - const {isLoading, data: projects} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) + const {isLoading, data: projects} = GetCachingData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) let project = queryClient.getQueryData(["project", props.id]) let jsonProject = JSON.parse(project.text) @@ -112,12 +108,14 @@ export default function InfoModalFunc(props) { * @returns {Promise<void>} */ const AddScaffold = async () => { - setButtonPressed(true) + + JSON.stringify(move) try { - const adding = await putModel(TRANSFER_SCAFFOLDING, JSON.stringify(move)) - console.log(adding) + setButtonPressed(true) + await putModel(TRANSFER_SCAFFOLDING, JSON.stringify(move)) await queryClient.resetQueries(["project", props.id]) } catch (e) { + setButtonPressed(false) if (e.text === "invalid body"){ window.alert("500 Internal Server Error\nNoe gikk galt! Prøv igjen senere") }else { @@ -244,12 +242,6 @@ export default function InfoModalFunc(props) { </Button>} - - - - - - </Modal.Footer> </Modal> </> diff --git a/webstillas/src/components/projects/elements/card.js b/webstillas/src/components/projects/elements/card.js index 04037f912e7c8567d747c57c9af66a6338b74509..d29eb3e0f9d7ea4563c4d383383265e4ee9a47a3 100644 --- a/webstillas/src/components/projects/elements/card.js +++ b/webstillas/src/components/projects/elements/card.js @@ -1,7 +1,7 @@ -import React, {useState} from 'react' +import React from 'react' import 'bootstrap/dist/css/bootstrap.min.css'; import './card.css' -import img from '../images/blog-item.jpg' +import img from '../images/scaffoldingimg.jpg' import {Link} from "react-router-dom"; import {PROJECTS_URL} from "../../../modelData/constantsFile"; import deleteModel from "../../../modelData/deleteProject"; diff --git a/webstillas/src/components/projects/elements/preView.js b/webstillas/src/components/projects/elements/preView.js index 80378eb9c0d1646b5e8eb8a23778a531ee76f20f..84626f76a3389c60b0bb8de28b25e8ca89d4245b 100644 --- a/webstillas/src/components/projects/elements/preView.js +++ b/webstillas/src/components/projects/elements/preView.js @@ -9,7 +9,7 @@ import { WITH_SCAFFOLDING_URL } from "../../../modelData/constantsFile"; import img from "./../../mapPage/marker.png" -import {GetDummyData} from "../../../modelData/addData"; +import {GetCachingData} from "../../../modelData/addData"; import {SpinnerDefault} from "../../Spinner"; import ReactMapboxGl, {Marker} from "react-mapbox-gl"; import {MapBoxAPIKey} from "../../../firebaseConfig"; @@ -156,7 +156,7 @@ function contactInformation(project) { */ export const PreView = () => { //Fetching the data of specific project. - const {isLoading: projectLoad, data, isError } = GetDummyData(["project", getProjectID()], PROJECTS_URL_WITH_ID + getProjectID() + WITH_SCAFFOLDING_URL) + const {isLoading: projectLoad, data, isError } = GetCachingData(["project", getProjectID()], PROJECTS_URL_WITH_ID + getProjectID() + WITH_SCAFFOLDING_URL) if (projectLoad) { return <SpinnerDefault/> diff --git a/webstillas/src/components/projects/images/scaffoldingimg.jpg b/webstillas/src/components/projects/images/scaffoldingimg.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9ecccc673c8bf0f1cad9b62553e678f35aca8d6d Binary files /dev/null and b/webstillas/src/components/projects/images/scaffoldingimg.jpg differ diff --git a/webstillas/src/components/projects/images/stillas.jpg b/webstillas/src/components/projects/images/stillas.jpg deleted file mode 100644 index 71796323d7e7ec91ef3034fcc6776cf73682af96..0000000000000000000000000000000000000000 Binary files a/webstillas/src/components/projects/images/stillas.jpg and /dev/null differ diff --git a/webstillas/src/components/projects/projects.js b/webstillas/src/components/projects/projects.js index 2ddefe85b05ae4575a7721757805fe7e57a84c6f..577e53cb09a7470bb6150cd72f34fc96a3bfa07b 100644 --- a/webstillas/src/components/projects/projects.js +++ b/webstillas/src/components/projects/projects.js @@ -3,7 +3,7 @@ import "./projects.css" import CardElement from './elements/card' import {Route, Routes} from "react-router-dom"; import {PROJECTS_WITH_SCAFFOLDING_URL} from "../../modelData/constantsFile"; -import {GetDummyData} from "../../modelData/addData"; +import {GetCachingData} from "../../modelData/addData"; import {SpinnerDefault} from "../Spinner"; import {InternalServerError} from "../error/error"; @@ -18,12 +18,11 @@ export function Project() { const [searchName, setSearchName] = useState("") const [selectedOption, setSelectedOption] = useState("") - const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); - const {isLoading, data, isError} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) + const {isLoading, data, isError} = GetCachingData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) //If data is loading diff --git a/webstillas/src/components/scaffolding/elements/ModalScaffolding.js b/webstillas/src/components/scaffolding/elements/ModalScaffolding.js index bbaf607b7b47d4a5ebfb1c86737473d9c87818b0..8bff8fa1cb2df02866fe6fe7c61f18783f8f018a 100644 --- a/webstillas/src/components/scaffolding/elements/ModalScaffolding.js +++ b/webstillas/src/components/scaffolding/elements/ModalScaffolding.js @@ -1,10 +1,10 @@ import React, {useState} from "react"; import {Button, Modal} from "react-bootstrap"; -import img from "../images/spirstillas_solideq_spir_klasse_5_stillas_135_1.jpg"; import {Link} from "react-router-dom"; -import {GetDummyData} from "../../../modelData/addData"; +import {GetCachingData} from "../../../modelData/addData"; import {PROJECTS_WITH_SCAFFOLDING_URL} from "../../../modelData/constantsFile"; import "./Modalscaffolding.css" +import img from "../../projects/images/scaffoldingimg.jpg" /** @@ -15,7 +15,7 @@ import "./Modalscaffolding.css" */ function ScaffoldingInProject(type) { - const {isLoading, data} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) + const {isLoading, data} = GetCachingData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) if (isLoading){ return <h1>Loading</h1> }else { @@ -59,8 +59,6 @@ function ScaffoldingInProject(type) { <Link className={"btn"} to={"/project/" + e.projectID}>Mer infromasjon</Link> </div> </div> - <hr/> - </div> ) } diff --git a/webstillas/src/components/scaffolding/elements/Modalscaffolding.css b/webstillas/src/components/scaffolding/elements/Modalscaffolding.css index 3b75c01d060bc611200d6e800b837e273f89eef7..567445e006687fd27ab7be33c79e70bf26f3944a 100644 --- a/webstillas/src/components/scaffolding/elements/Modalscaffolding.css +++ b/webstillas/src/components/scaffolding/elements/Modalscaffolding.css @@ -1,9 +1,10 @@ .card-scaffolding{ display: flex; + padding-top: 30px; } .list-and-btn{ - margin-top: 30px; + margin-top: 100px; margin-left: 150px; } diff --git a/webstillas/src/components/scaffolding/scaffolding.js b/webstillas/src/components/scaffolding/scaffolding.js index d28fcc77d8dd98922581b630a6e95c599456b180..8b9750bce76a02687e72635cef8181a4a111e8fd 100644 --- a/webstillas/src/components/scaffolding/scaffolding.js +++ b/webstillas/src/components/scaffolding/scaffolding.js @@ -2,7 +2,7 @@ import React from "react"; import "./scaffolding.css" import CardElement from "./elements/scaffoldingCard"; import {PROJECTS_WITH_SCAFFOLDING_URL, SCAFFOLDING_URL, STORAGE_URL} from "../../modelData/constantsFile"; -import {GetDummyData} from "../../modelData/addData"; +import {GetCachingData} from "../../modelData/addData"; import {SpinnerDefault} from "../Spinner"; import {InternalServerError} from "../error/error"; @@ -143,9 +143,9 @@ class ScaffoldingClass extends React.Component { * @constructor */ export const Scaffolding = () => { - const {isLoading: LoadingScaffolding, data: Scaffolding, isError: scaffoldingError} = GetDummyData("scaffolding", SCAFFOLDING_URL) - const {isLoading: LoadingStorage, data: Storage, isError: storageError} = GetDummyData("storage", STORAGE_URL) - const {isLoading: LoadingAll, data: Project, isError: allProjectError} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) + const {isLoading: LoadingScaffolding, data: Scaffolding, isError: scaffoldingError} = GetCachingData("scaffolding", SCAFFOLDING_URL) + const {isLoading: LoadingStorage, data: Storage, isError: storageError} = GetCachingData("storage", STORAGE_URL) + const {isLoading: LoadingAll, data: Project, isError: allProjectError} = GetCachingData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) diff --git a/webstillas/src/components/topBar/topBar.css b/webstillas/src/components/topBar/topBar.css index 5c271aa77a57d1e0a5ba796fb28b7729083a225e..b0a685c7f18912a6eb9f508d77ae624b0db6c3ff 100644 --- a/webstillas/src/components/topBar/topBar.css +++ b/webstillas/src/components/topBar/topBar.css @@ -3,6 +3,11 @@ justify-content: space-between; } +.dropdown-toggle-topbar{ + height: 70px; + width: 150px; + +} .button{ width: 150px; @@ -18,15 +23,14 @@ } - .link-dropdown{ text-decoration-color: black; } -.dropDownMenu{ - color: black; +.user-button-topbar{ + justify-content: center; } -.dropDownMenu:focus{ - background-color: black; +.profile-img{ + } diff --git a/webstillas/src/components/topBar/topBar.js b/webstillas/src/components/topBar/topBar.js index 45d906c0a57d2f52fd3c9bd68babca6c8ecae74d..1fd3447192e7c905480c4399455eb30df378dd19 100644 --- a/webstillas/src/components/topBar/topBar.js +++ b/webstillas/src/components/topBar/topBar.js @@ -4,15 +4,18 @@ import { AppBar, Toolbar, Button } from '@material-ui/core'; import {Link} from "react-router-dom"; -import {DropdownButton, NavDropdown} from "react-bootstrap"; +import {Dropdown } from "react-bootstrap"; import DropdownItem from "react-bootstrap/DropdownItem"; import {useUserAuth} from "../../context/UserAuthContext"; import {auth} from "../../firebase" -import {GetDummyData} from "../../modelData/addData"; +import {GetCachingData} from "../../modelData/addData"; import {USER_URL} from "../../modelData/constantsFile"; import {SpinnerDefault} from "../Spinner"; import "bootstrap/dist/css/bootstrap.min.css"; import {ADD_PROJECT_URL, ADD_SCAFFOLDING_URL, MAP_URL, PROJECT_URL, SCAFFOLDING_URL, USERINFO_URL} from "../constants"; +import DropdownToggle from "react-bootstrap/DropdownToggle"; +import DropdownMenu from "react-bootstrap/DropdownMenu"; +import profileImg from "../userinformation/profile-png-icon-2.png" /** Component that will be used as a top bar for the user to navigate throughout the application. @@ -26,7 +29,7 @@ const TopBar = () => { //If the user is authenticated, fetch data from database if (auth.currentUser){ - const {isLoading, data} = GetDummyData("user", USER_URL + auth.currentUser.uid) + const {isLoading, data} = GetCachingData("user", USER_URL + auth.currentUser.uid) loading = isLoading user = data } @@ -60,32 +63,39 @@ const TopBar = () => { <Button className="button">Kart</Button> </Link> - <NavDropdown id="basic-nav-dropdown1" - title={"Logistikk"} - size="sm" - className={"dropDownMenu"} - > - <DropdownItem> - <Link className={"link"} - to={ADD_PROJECT_URL}>Legg til prosjekt </Link> - </DropdownItem> - <DropdownItem> - <Link className={"link"} - to={ADD_SCAFFOLDING_URL}>Legg til stillas</Link> - </DropdownItem> - </NavDropdown> - <DropdownButton id="dropdown-button" - title={userData?.name.firstName} - size="sm" - className={"dropDownMenu"} - > - <DropdownItem> - <Link className={"link"} - to={USERINFO_URL}> - Bruker Informasjon</Link> - </DropdownItem> - <DropdownItem onClick={logOut}>Logg ut</DropdownItem> - </DropdownButton> + <Dropdown> + <DropdownToggle className={"dropdown-toggle-topbar"} variant=" primary" id="dropdown-basic"> + Logistikk + </DropdownToggle> + <DropdownMenu> + <DropdownItem className={"dropdown-item-topbar"}> + <Link className={"dropdown-item"} + to={ADD_PROJECT_URL}>Legg til prosjekt </Link> + </DropdownItem> + <DropdownItem> + <Link className={"dropdown-item"} + to={ADD_SCAFFOLDING_URL}>Legg til stillas</Link> + </DropdownItem> + </DropdownMenu> + </Dropdown> + + <Dropdown> + <DropdownToggle className={"dropdown-toggle-topbar user-button-topbar"} variant=" primary" id="dropdown-basic"> + <img src={profileImg} alt={""} style={{height: "30px"}}/> + <p>{userData?.name.firstName}</p> + </DropdownToggle> + <DropdownMenu > + <DropdownItem > + <Link className={"dropdown-item"} + to={USERINFO_URL}> + Bruker Informasjon</Link> + </DropdownItem> + <div className="dropdown-divider"></div> + <DropdownItem + className={"dropdown-item"} + onClick={logOut}>Logg ut</DropdownItem> + </DropdownMenu> + </Dropdown> </Toolbar> </AppBar> ); diff --git a/webstillas/src/components/userinformation/profile-png-icon-2.png b/webstillas/src/components/userinformation/profile-png-icon-2.png new file mode 100644 index 0000000000000000000000000000000000000000..1a56aa21df777e242c880ae368fed349cc789ba9 Binary files /dev/null and b/webstillas/src/components/userinformation/profile-png-icon-2.png differ diff --git a/webstillas/src/components/userinformation/userInfo.js b/webstillas/src/components/userinformation/userInfo.js index 1d50d082e222a83efd4df9118f910a8efc9a641b..38b23448beb85ae9988d4dbd129ff8ec3d428bfa 100644 --- a/webstillas/src/components/userinformation/userInfo.js +++ b/webstillas/src/components/userinformation/userInfo.js @@ -1,6 +1,6 @@ import React from "react"; import { auth } from "../../firebase"; -import {GetDummyData} from "../../modelData/addData"; +import {GetCachingData} from "../../modelData/addData"; import { USER_URL} from "../../modelData/constantsFile"; import {SpinnerDefault} from "../Spinner"; import "./userInfo.css" @@ -20,7 +20,7 @@ export function UserInfo(){ //If user is authenticated load user data if (auth.currentUser){ - const {isLoading, data, isError} = GetDummyData("user", USER_URL + auth.currentUser.uid) + const {isLoading, data, isError} = GetCachingData("user", USER_URL + auth.currentUser.uid) isLoadingUser = isLoading userData = data isErrorUser = isError diff --git a/webstillas/src/firebaseConfig.js b/webstillas/src/firebaseConfig.js new file mode 100644 index 0000000000000000000000000000000000000000..6d6fe73a76810a262105ba3d5754bb0176ec2f80 --- /dev/null +++ b/webstillas/src/firebaseConfig.js @@ -0,0 +1,7 @@ +export const FirbaseAPIKEY = "AIzaSyB5XxJ-AIC_Bm38oOH4TjdeIBA0eNLRl7w" +export const FirebaseAuthDomain = "stillas-16563.firebaseapp.com" +export const FirbaseprojectId = "stillas-16563" +export const FirbaseStorageBucket = "stillas-16563.appspot.com" +export const FirbaseMessagingSenderId = "586975019426" +export const FirbaseAppID = "1:586975019426:web:83a11475b6ae32ffbc32fb" +export const MapBoxAPIKey = "pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g" diff --git a/webstillas/src/modelData/addData.js b/webstillas/src/modelData/addData.js index e4933ec672c99e9c11415030b8d7e61fa340aaa2..1025810cd22ce1e8d5d30603267378be8b53a3a7 100644 --- a/webstillas/src/modelData/addData.js +++ b/webstillas/src/modelData/addData.js @@ -11,7 +11,7 @@ import { useQuery } from 'react-query' * @param url to the api * @returns {{isLoading: boolean, isLoadingError: boolean, isError: boolean, data: unknown}} */ -export const GetDummyData = (dataName, url) => { +export const GetCachingData = (dataName, url) => { const { isLoading, data, isError, isLoadingError} = useQuery(dataName, ()=>{ return fetchModel(url) }, { diff --git a/webstillas/src/modelData/fetchData.js b/webstillas/src/modelData/fetchData.js index 63689219143e7a0da3b215bfc77417702fe3b268..76e2709b49dfe49127cf51773df704309e67a3b1 100644 --- a/webstillas/src/modelData/fetchData.js +++ b/webstillas/src/modelData/fetchData.js @@ -9,10 +9,7 @@ import {BASE_URL} from "./constantsFile" export default function fetchModel(url) { return new Promise(function (resolve, reject) { const xhr = new XMLHttpRequest(); - /* - load event is also ok to use here, - but readystatechange was giving me more descriptive errors - */ + xhr.addEventListener('readystatechange', () => { if (xhr.readyState !== 4) { return;