diff --git a/webstillas/src/components/mapPage/mapPage.js b/webstillas/src/components/mapPage/mapPage.js index 63069804ed42f806dcacfc4cfab6a8a1ba975277..49ada1ce131e4732d9e56e3d0b3f0e670deffdd6 100644 --- a/webstillas/src/components/mapPage/mapPage.js +++ b/webstillas/src/components/mapPage/mapPage.js @@ -45,6 +45,7 @@ function MapPageClass(props) { {projectData.map(res => { return ( <Marker + key = {res.projectID} offsetTop={-48} offsetLeft={-24} coordinates={[res.longitude, res.latitude]} diff --git a/webstillas/src/components/projects/elements/Modal.js b/webstillas/src/components/projects/elements/Modal.js index 9296a3a6119b4493331b80aa2fba138cc323bdcc..cb9a4b86debaa5705536853ca5e788985f9191a9 100644 --- a/webstillas/src/components/projects/elements/Modal.js +++ b/webstillas/src/components/projects/elements/Modal.js @@ -83,7 +83,7 @@ export default function InfoModalFunc(props) { const [scaffolding, setScaffolding] = useState(scaffoldingMove); const [ToProject, setToProject] = useState(""); const [FromProject, setFromProject] = useState(""); - + const [buttonPressed, setButtonPressed] = useState(false) /** * Function to set quantity of scaffolding types @@ -112,8 +112,10 @@ export default function InfoModalFunc(props) { * @returns {Promise<void>} */ const AddScaffold = async () => { + setButtonPressed(true) try { - await putModel(TRANSFER_SCAFFOLDING, JSON.stringify(move)) + const adding = await putModel(TRANSFER_SCAFFOLDING, JSON.stringify(move)) + console.log(adding) await queryClient.resetQueries(["project", props.id]) } catch (e) { if (e.text === "invalid body"){ @@ -172,7 +174,7 @@ export default function InfoModalFunc(props) { className={"form-select"} value={ToProject} onChange={(e) => setToProject(e.target.value)}> - <option selected defaultValue="">Choose here</option> + <option defaultValue="">Choose here</option> <option value={0}>Storage</option> {jsonProjects?.map(e => { return ( @@ -187,11 +189,11 @@ export default function InfoModalFunc(props) { className={"form-select"} value={FromProject} onChange={(e) => setFromProject(e.target.value)}> - <option selected defaultValue="">Choose here</option> + <option defaultValue="">Choose here</option> <option value={0}>Storage</option> {jsonProjects?.map(e => { return ( - <option value={e.projectID}>{e.projectName}</option> + <option key={e.projectID} value={e.projectID}>{e.projectName}</option> ) })} </select> @@ -225,9 +227,29 @@ export default function InfoModalFunc(props) { <Button variant="secondary" onClick={handleClose}> Close </Button> - <Button variant="primary" disabled={!validFormat} onClick={AddScaffold}> - Save Changes - </Button> + + + {buttonPressed ? <Button disabled> + <Spinner + as="span" + animation="grow" + size="sm" + role="status" + aria-hidden="true" + /> + Transferring... + </Button> : + <Button variant="primary" disabled={!validFormat} onClick={AddScaffold}> + Save Changes + </Button>} + + + + + + + + </Modal.Footer> </Modal> </> diff --git a/webstillas/src/components/projects/elements/preView.js b/webstillas/src/components/projects/elements/preView.js index fec37ef6d8502e8eaadd8a8be2ec350451468c9a..80378eb9c0d1646b5e8eb8a23778a531ee76f20f 100644 --- a/webstillas/src/components/projects/elements/preView.js +++ b/webstillas/src/components/projects/elements/preView.js @@ -6,7 +6,6 @@ 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" @@ -165,8 +164,6 @@ export const PreView = () => { return <InternalServerError /> } else { const project = JSON.parse(data.text) - - return ( <div className={"preView-Project-Main"}> <div className={"map-preview"}> diff --git a/webstillas/src/components/projects/projects.js b/webstillas/src/components/projects/projects.js index 6f55896ccb0a6fac856ecc426ffd48d9370efcda..b8d32b9ab8a77b499a4cda0dc68fccea470e8560 100644 --- a/webstillas/src/components/projects/projects.js +++ b/webstillas/src/components/projects/projects.js @@ -12,7 +12,7 @@ import {InternalServerError} from "../error/error"; /** Class that will create an overview of the projects */ -export function Project(){ +export function Project() { const [fromSize, setFromSize] = useState(0) const [toSize, setToSize] = useState(0) @@ -22,37 +22,27 @@ export function Project(){ const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); - const [focusedInput, setFocusedInput] = useState(null); - const handleDatesChange = ({ startDate, endDate }) => { - setStartDate(startDate); - setEndDate(endDate); - }; - - - - - const {isLoading, data, isError} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) - + //If data is loading if (isLoading) { - return( - <SpinnerDefault /> + return ( + <SpinnerDefault/> ) - } else if (isError){ + } else if (isError) //If an error while fetching data has occurred + { return <InternalServerError/> } else { const allProjects = (JSON.parse(data.text)) - return ( <div className={"main-project-window"}> - <div className={"main-sidebar"} > + <div className={"main-sidebar"}> <div className={"search-filter"}> - <p className = {"input-sorting-text"}>Status</p> + <p className={"input-sorting-text"}>Status</p> <select className={"form-select options"} onChange={(e) => setSelectedOption(e.target.value)}> <option defaultValue="">Velg her</option> @@ -62,7 +52,7 @@ export function Project(){ </select> </div> <div className={"search-filter"}> - <p className = {"input-sorting-text"}>Prosjekt navn: </p> + <p className={"input-sorting-text"}>Prosjekt navn: </p> <input className={"form-control"} type="text" @@ -73,7 +63,7 @@ export function Project(){ }}/> </div> <div className={"search-filter"}> - <p className = {"input-sorting-text"}>Stillsmengde: </p> + <p className={"input-sorting-text"}>Stillsmengde: </p> <div className={"search-filter size"}> <input className={"form-control size-search"} @@ -95,7 +85,7 @@ export function Project(){ </div> </div> <div className={"date-filter"}> - <p className = {"input-sorting-text"}>Fra dato: </p> + <p className={"input-sorting-text"}>Fra dato: </p> <input className={"form-control"} type="date" @@ -104,7 +94,7 @@ export function Project(){ }}/> </div> <div className={"search-filter"}> - <p className = {"input-sorting-text"}>Til dato: </p> + <p className={"input-sorting-text"}>Til dato: </p> <input className={"form-control"} type="date" @@ -126,7 +116,7 @@ export function Project(){ }) .filter(data => { console.log(startDate) - if (startDate !== null ) { + if (startDate !== null) { return formatDate(data.period.startDate) >= formatDate(startDate) } else { return true @@ -184,13 +174,22 @@ export function Project(){ } - -export function formatDate (inputDate) { +/** + * Function to format date from "mm-dd-yyyy" to "dd-mm-yyyy" + * @param inputDate in format "mm-dd-yyyy" + * @returns {Date} in format "dd-mm-yyyy" + */ +export function formatDate(inputDate) { const dateArray = inputDate.split('-') return new Date(dateArray[2] + '-' + dateArray[1] + '-' + dateArray[0]) } -export function formatDateToString (inputDate) { +/** + * Function to format date from "mm-dd-yyyy" to "dd-mm-yyyy" + * @param inputDate in format "mm-dd-yyyy" + * @returns {string} in format "dd-mm-yyyy" + */ +export function formatDateToString(inputDate) { const dateArray = inputDate.split('-') return (dateArray[2] + '-' + dateArray[1] + '-' + dateArray[0]) } diff --git a/webstillas/src/components/scaffolding/elements/ModalScaffolding.js b/webstillas/src/components/scaffolding/elements/ModalScaffolding.js index 53c470dcb9b8b0ee796c09e4d828e337ee069240..f057db5ec1341a0d7af2a2602eb01f87485c5057 100644 --- a/webstillas/src/components/scaffolding/elements/ModalScaffolding.js +++ b/webstillas/src/components/scaffolding/elements/ModalScaffolding.js @@ -8,7 +8,13 @@ import {PROJECTS_WITH_SCAFFOLDING_URL} from "../../../modelData/constantsFile"; import "./Modalscaffolding.css" -function ScaffoldingInProject(type, projects) { +/** + * Function will return information about quantity of scaffolding in a specific project, including the end date of the project. + * + * @param type of scaffolding, the user would like more information about + * @returns {JSX.Element|*} + */ +function ScaffoldingInProject(type) { const {isLoading, data} = GetDummyData("allProjects", PROJECTS_WITH_SCAFFOLDING_URL) if (isLoading){ @@ -65,6 +71,12 @@ function ScaffoldingInProject(type, projects) { } +/** + * Function will display a Modal, of with information of the projects that has the selected scaffolding types. + * + * @param props is type of scaffolding. + * @returns {JSX.Element} + */ export default function InfoModal(props) { const [show, setShow] = useState(false); const handleClose = () => setShow(false); diff --git a/webstillas/src/components/scaffolding/elements/scaffoldingCard.js b/webstillas/src/components/scaffolding/elements/scaffoldingCard.js index 267dc4b2ae0bd7700b1479d66a570656c9c5cf3e..5781c30881a3ab8d3249994c5067b6d41ff3d4c4 100644 --- a/webstillas/src/components/scaffolding/elements/scaffoldingCard.js +++ b/webstillas/src/components/scaffolding/elements/scaffoldingCard.js @@ -3,7 +3,13 @@ import './scaffoldingCard.css' import InfoModal from "./ModalScaffolding"; - +/** + * Will return an infromation card, where the user get information about how many of the specific + * scaffolding the storage has, including total amount that is in projects. + * + * @param props type of scaffolding + * @returns {JSX.Element} + */ function CardElement(props){ console.log(props.type) console.log(`../images/${props.type}.jpg`) diff --git a/webstillas/src/components/scaffolding/elements/scaffoldingCardProject.js b/webstillas/src/components/scaffolding/elements/scaffoldingCardProject.js index 37f3249bdaab3734a258425278a851218d3b6bad..d0c68fc9b9de206335d10cf634cb0fa14569c1f7 100644 --- a/webstillas/src/components/scaffolding/elements/scaffoldingCardProject.js +++ b/webstillas/src/components/scaffolding/elements/scaffoldingCardProject.js @@ -1,5 +1,12 @@ import React from "react"; + +/** + * Function that will display number of expected and registered scaffolding parts in the project. + * + * @param props wil return key, type, expected and registered, of that scaffolding + * @returns {JSX.Element} + */ function ScaffoldingProject(props){ return( <div className={"scaffoldingElement"}>