From 14d234c07a21a4386f9558382e912cc0d24822d9 Mon Sep 17 00:00:00 2001
From: fu1106jv <fu1106jv@fu-berlin.de>
Date: Fri, 14 Jan 2022 11:04:00 +0100
Subject: [PATCH] wip
---
client/public/locales/de/translation.json | 5 ++--
client/public/locales/en/translation.json | 5 ++--
client/src/Router.tsx | 25 +++++++++++--------
client/src/components/RentedBoatTile.tsx | 5 ++--
client/src/components/StaffLayout.tsx | 4 +--
client/src/pages/{ => public}/BookingForm.tsx | 4 +--
.../src/pages/{ => public}/BookingSignOut.tsx | 2 +-
.../{ => public}/BookingSignOutSuccess.tsx | 4 +--
.../pages/{ => public}/BookingSuccessful.tsx | 4 +--
client/src/pages/{ => public}/Home.tsx | 2 +-
client/src/pages/{ => staff}/BoatManager.tsx | 8 +++---
client/src/pages/{ => staff}/BoatOverview.tsx | 20 +++++++--------
.../pages/{ => staff}/BoatTypeOverview.tsx | 4 +--
client/src/pages/{ => staff}/StaffLogin.tsx | 12 ++++-----
client/src/pages/staff/Statistics.tsx | 15 +++++++++++
15 files changed, 71 insertions(+), 48 deletions(-)
rename client/src/pages/{ => public}/BookingForm.tsx (98%)
rename client/src/pages/{ => public}/BookingSignOut.tsx (97%)
rename client/src/pages/{ => public}/BookingSignOutSuccess.tsx (91%)
rename client/src/pages/{ => public}/BookingSuccessful.tsx (92%)
rename client/src/pages/{ => public}/Home.tsx (95%)
rename client/src/pages/{ => staff}/BoatManager.tsx (94%)
rename client/src/pages/{ => staff}/BoatOverview.tsx (71%)
rename client/src/pages/{ => staff}/BoatTypeOverview.tsx (97%)
rename client/src/pages/{ => staff}/StaffLogin.tsx (96%)
create mode 100644 client/src/pages/staff/Statistics.tsx
diff --git a/client/public/locales/de/translation.json b/client/public/locales/de/translation.json
index 1d6c6a3..639c916 100644
--- a/client/public/locales/de/translation.json
+++ b/client/public/locales/de/translation.json
@@ -80,6 +80,7 @@
"/login": "Login",
"/staff/overview": "Bootsübersicht",
"/staff/boattypes": "Bootstypen",
- "/staff/manage": "Boote Verwalten"
+ "/staff/manage": "Boote Verwalten",
+ "/staff/statistics": "Statistiken"
}
-}
\ No newline at end of file
+}
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index 31b1ff7..86732e7 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -79,6 +79,7 @@
"/login": "Login",
"/staff/overview": "Boat Overview",
"/staff/boattypes" : "Boat Types",
- "/staff/manage": "Manage Boats"
+ "/staff/manage": "Manage Boats",
+ "/staff/statistics": "Statistics"
}
-}
\ No newline at end of file
+}
diff --git a/client/src/Router.tsx b/client/src/Router.tsx
index 9e4bb84..929a337 100644
--- a/client/src/Router.tsx
+++ b/client/src/Router.tsx
@@ -1,16 +1,17 @@
import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import StaffLayout from "./components/StaffLayout";
import UserLayout from "./components/UserLayout";
-import BoatManager from "./pages/BoatManager";
-import BoatOverview from "./pages/BoatOverview";
-import BoatTypeOverview from "./pages/BoatTypeOverview";
-import BookingForm from "./pages/BookingForm";
-import BookingSignOut from "./pages/BookingSignOut";
-import BookingSignOutSuccess from "./pages/BookingSignOutSuccess";
-import BookingSuccessful from "./pages/BookingSuccessful";
-import Home from "./pages/Home";
-import StaffLogin from "./pages/StaffLogin"
+import BoatManager from "./pages/staff/BoatManager";
+import BoatOverview from "./pages/staff/BoatOverview";
+import BoatTypeOverview from "./pages/staff/BoatTypeOverview";
+import BookingForm from "./pages/public/BookingForm";
+import BookingSignOut from "./pages/public/BookingSignOut";
+import BookingSignOutSuccess from "./pages/public/BookingSignOutSuccess";
+import BookingSuccessful from "./pages/public/BookingSuccessful";
+import Home from "./pages/public/Home";
+import StaffLogin from "./pages/staff/StaffLogin"
+import StatisticOverview from "./pages/staff/Statistics";
function Router() {
return (
@@ -36,9 +37,13 @@ function Router() {
</Route>
</Route>
<Route path="staff" element={<StaffLayout />}>
+ <Route path="" element={<Navigate to="/staff/overview" />}/>
<Route path="overview" element={<BoatOverview />} />
<Route path="boattypes" element={<BoatTypeOverview />} />
<Route path="manage" element={<BoatManager />} />
+
+ <Route path="statistics" element={<StatisticOverview />} />
+
</Route>
</Routes>
</BrowserRouter>
diff --git a/client/src/components/RentedBoatTile.tsx b/client/src/components/RentedBoatTile.tsx
index df40ea0..d75327f 100644
--- a/client/src/components/RentedBoatTile.tsx
+++ b/client/src/components/RentedBoatTile.tsx
@@ -6,7 +6,8 @@ import { Col } from "react-bootstrap";
function RentedBoatTile(props: any) {
return (
<Col>
- <div className={`card-body shadow position-relative mb-1 rounded-2 ${props.overdue ? 'bg-danger' : 'bg-secondary'} rentedBoatTile`} style={{ height: "90px" }}>
+ <div className={`card-body shadow position-relative mb-1 rounded-2 ${props.overdue ? 'bg-danger' : 'bg-secondary'} rentedBoatTile`}
+ onClick={props.clickEvent} style={{ height: "90px" }}>
<div className="text-uppercase fs-4 tile-label-boatName position-absolute ms-2 mt-1 top-0 start-0 text-white fw-bold"
style={{ maxWidth: "98%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{props.boatName}</div>
<div className="tile-label-time position-absolute me-2 mt-2 top-0 end-0 text-white">{props.time}</div>
@@ -21,4 +22,4 @@ function RentedBoatTile(props: any) {
);
}
-export default RentedBoatTile;
\ No newline at end of file
+export default RentedBoatTile;
diff --git a/client/src/components/StaffLayout.tsx b/client/src/components/StaffLayout.tsx
index 518f1dd..596bbad 100644
--- a/client/src/components/StaffLayout.tsx
+++ b/client/src/components/StaffLayout.tsx
@@ -17,7 +17,7 @@ function StaffLayout() {
<Nav activeKey={location.pathname}>
<Nav.Link href="/staff/overview">{t("staffNav.buttonBoatOverview")}</Nav.Link>
<Nav.Link href="/staff/manage">{t("staffNav.buttonManageBoats")}</Nav.Link>
- <Nav.Link>{t("staffNav.buttonStatistics")}</Nav.Link>
+ <Nav.Link href="/staff/statistics">{t("staffNav.buttonStatistics")}</Nav.Link>
</Nav>
</div>
<div>
@@ -32,4 +32,4 @@ function StaffLayout() {
);
}
-export default StaffLayout;
\ No newline at end of file
+export default StaffLayout;
diff --git a/client/src/pages/BookingForm.tsx b/client/src/pages/public/BookingForm.tsx
similarity index 98%
rename from client/src/pages/BookingForm.tsx
rename to client/src/pages/public/BookingForm.tsx
index 66f6bdc..75c2cff 100644
--- a/client/src/pages/BookingForm.tsx
+++ b/client/src/pages/public/BookingForm.tsx
@@ -4,8 +4,8 @@ import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router";
import validator from "validator";
-import Divider from "../components/Divider";
-import Modal from "../components/Modal";
+import Divider from "../../components/Divider";
+import Modal from "../../components/Modal";
type FormData = {
sport: string;
diff --git a/client/src/pages/BookingSignOut.tsx b/client/src/pages/public/BookingSignOut.tsx
similarity index 97%
rename from client/src/pages/BookingSignOut.tsx
rename to client/src/pages/public/BookingSignOut.tsx
index 0a00534..ef538c6 100644
--- a/client/src/pages/BookingSignOut.tsx
+++ b/client/src/pages/public/BookingSignOut.tsx
@@ -3,7 +3,7 @@ import { Button, Col, Container, Form, Row } from "react-bootstrap";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router";
-import Modal from "../components/Modal";
+import Modal from "../../components/Modal";
type FormData = {
annotations: string;
diff --git a/client/src/pages/BookingSignOutSuccess.tsx b/client/src/pages/public/BookingSignOutSuccess.tsx
similarity index 91%
rename from client/src/pages/BookingSignOutSuccess.tsx
rename to client/src/pages/public/BookingSignOutSuccess.tsx
index eaf652f..86c75bb 100644
--- a/client/src/pages/BookingSignOutSuccess.tsx
+++ b/client/src/pages/public/BookingSignOutSuccess.tsx
@@ -3,8 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
-import Divider from "../components/Divider";
-import Modal from "../components/Modal";
+import Divider from "../../components/Divider";
+import Modal from "../../components/Modal";
function BookingSignOutSuccess() {
const { t } = useTranslation(); //i18n
diff --git a/client/src/pages/BookingSuccessful.tsx b/client/src/pages/public/BookingSuccessful.tsx
similarity index 92%
rename from client/src/pages/BookingSuccessful.tsx
rename to client/src/pages/public/BookingSuccessful.tsx
index 3c2916b..3611c20 100644
--- a/client/src/pages/BookingSuccessful.tsx
+++ b/client/src/pages/public/BookingSuccessful.tsx
@@ -3,8 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
-import Divider from "../components/Divider";
-import Modal from "../components/Modal";
+import Divider from "../../components/Divider";
+import Modal from "../../components/Modal";
function BookingSuccessful() {
const { t } = useTranslation(); // i18n
diff --git a/client/src/pages/Home.tsx b/client/src/pages/public/Home.tsx
similarity index 95%
rename from client/src/pages/Home.tsx
rename to client/src/pages/public/Home.tsx
index 9d965c3..3af5a10 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/public/Home.tsx
@@ -2,7 +2,7 @@ import React from "react";
import { Button, Col, Container, Image, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
-import logo from "../assets/logo_unisport.png";
+import logo from "../../assets/logo_unisport.png";
function Home() {
const { t } = useTranslation(); // i18n
diff --git a/client/src/pages/BoatManager.tsx b/client/src/pages/staff/BoatManager.tsx
similarity index 94%
rename from client/src/pages/BoatManager.tsx
rename to client/src/pages/staff/BoatManager.tsx
index 589a222..ef79ed7 100644
--- a/client/src/pages/BoatManager.tsx
+++ b/client/src/pages/staff/BoatManager.tsx
@@ -1,12 +1,12 @@
import React, { useEffect, useState } from "react";
import { Button, Container, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
-import Divider from "../components/Divider";
-import ManagedBoatTile from "../components/ManagedBoatTile";
+import Divider from "../../components/Divider";
+import ManagedBoatTile from "../../components/ManagedBoatTile";
import { faEdit, faTrashAlt } from "@fortawesome/free-regular-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import StaffModal from "../components/StaffModal"
+import StaffModal from "../../components/StaffModal"
function BoatManager() {
const { t } = useTranslation();
@@ -56,4 +56,4 @@ function BoatManager() {
);
}
-export default BoatManager;
\ No newline at end of file
+export default BoatManager;
diff --git a/client/src/pages/BoatOverview.tsx b/client/src/pages/staff/BoatOverview.tsx
similarity index 71%
rename from client/src/pages/BoatOverview.tsx
rename to client/src/pages/staff/BoatOverview.tsx
index 876eafd..6adb69d 100644
--- a/client/src/pages/BoatOverview.tsx
+++ b/client/src/pages/staff/BoatOverview.tsx
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import { Button, Container, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
-import Divider from "../components/Divider";
-import RentedBoatTile from "../components/RentedBoatTile";
-import StaffModal from "../components/StaffModal";
+import Divider from "../../components/Divider";
+import RentedBoatTile from "../../components/RentedBoatTile";
+import StaffModal from "../../components/StaffModal";
function BoatOverview() {
@@ -18,11 +18,11 @@ function BoatOverview() {
<Container>
<div className="overdue-tiles text-center">
<Row xs={1} md={2} xxl={3}>
- <RentedBoatTile boatName="Canoe 1" time="13:15-15:14" persons="1 Person" overdue="Overdue!" onClick={()=>{setInfoElement({boatName:"ABC"})}}></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 7" time="13:15-15:14" persons="3 Person" overdue="Overdue!"></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 13" time="13:15-15:14" persons="3 Person" overdue="Overdue!"></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 16" time="13:15-15:14" persons="3 Person" overdue="Overdue!"></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 22" time="13:15-15:14" persons="3 Person" overdue="Overdue!"></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 1" time="13:15-15:14" persons="1 Person" overdue="Overdue!" clickEvent={()=>{setInfoElement({boatName:"ABC"})}}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 7" time="13:15-15:14" persons="3 Person" overdue="Overdue!" clickEvent={()=>{setInfoElement({boatName:"CDE"})}}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 13" time="13:15-15:14" persons="3 Person" overdue="Overdue!" clickEvent={()=>{setInfoElement({boatName:"DEF"})}}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 16" time="13:15-15:14" persons="3 Person" overdue="Overdue!" clickEvent={()=>{setInfoElement({boatName:"EFG"})}}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 22" time="13:15-15:14" persons="3 Person" overdue="Overdue!" clickEvent={()=>{setInfoElement({boatName:"FGH"})}}></RentedBoatTile>
</Row>
</div>
<Button variant="light" className="mt-3 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("boatOverview.buttonShowAll")}</Button>
@@ -45,10 +45,10 @@ function BoatOverview() {
<Button variant="light" className="mt-3 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("boatOverview.buttonShowAll")}</Button>
</Container>
</div>
- <StaffModal header={"Boat Info"} show={infoElement} hideSuccess={true} onHide={() => { setInfoElement(undefined) }} onSuccess={() => { setInfoElement(undefined) }}>
+ <StaffModal header={"Boat Info"} show={infoElement?.boatName} onHide={() => { setInfoElement(undefined) }} onSuccess={() => { setInfoElement(undefined) }}>
</StaffModal>
</div>
);
}
-export default BoatOverview;
\ No newline at end of file
+export default BoatOverview;
diff --git a/client/src/pages/BoatTypeOverview.tsx b/client/src/pages/staff/BoatTypeOverview.tsx
similarity index 97%
rename from client/src/pages/BoatTypeOverview.tsx
rename to client/src/pages/staff/BoatTypeOverview.tsx
index 3cff90c..142c0dc 100644
--- a/client/src/pages/BoatTypeOverview.tsx
+++ b/client/src/pages/staff/BoatTypeOverview.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
import { faEdit, faTrashAlt } from "@fortawesome/free-regular-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import StaffModal from "../components/StaffModal";
+import StaffModal from "../../components/StaffModal";
function BoatTypeOverview() {
const { t } = useTranslation();
@@ -66,4 +66,4 @@ function BoatTypeOverview() {
);
}
-export default BoatTypeOverview;
\ No newline at end of file
+export default BoatTypeOverview;
diff --git a/client/src/pages/StaffLogin.tsx b/client/src/pages/staff/StaffLogin.tsx
similarity index 96%
rename from client/src/pages/StaffLogin.tsx
rename to client/src/pages/staff/StaffLogin.tsx
index 2dace98..f33bf23 100644
--- a/client/src/pages/StaffLogin.tsx
+++ b/client/src/pages/staff/StaffLogin.tsx
@@ -3,8 +3,8 @@ import { Button, Col, Container, Form, Row } from "react-bootstrap";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import validator from "validator";
-import Divider from "../components/Divider";
-import Modal from "../components/Modal";
+import Divider from "../../components/Divider";
+import Modal from "../../components/Modal";
type FormData = {
email: string;
@@ -25,8 +25,8 @@ function Login() {
/**
* Logic to handle authentication. Should be separated into a service in another file.
* await login(data);
- *
- *
+ *
+ *
* navigate("/boatManager");
*/
} catch (e) {
@@ -99,7 +99,7 @@ function Login() {
</Row>
</Container>
);
-
+
}
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/client/src/pages/staff/Statistics.tsx b/client/src/pages/staff/Statistics.tsx
new file mode 100644
index 0000000..197d8b5
--- /dev/null
+++ b/client/src/pages/staff/Statistics.tsx
@@ -0,0 +1,15 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+
+function StatisticOverview() {
+ const { t } = useTranslation();
+
+ return (
+ <div className="m-1 h-100">
+
+ </div>
+ );
+}
+
+export default StatisticOverview;
--
GitLab