Merge pull request #272 from UofA-Blueprint/fix/borrowPage

Fix/borrow page
UofA-Blueprint · Dec 16, 2023 · dc335b3 · dc335b3
2 parents 04808fd + 7f0807f
commit dc335b3
Show file tree

Hide file tree

Showing 9 changed files with 422 additions and 147 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/fontawesome-free": "^6.5.1",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",

diff --git a/app/src/routes/borrow.tsx b/app/src/routes/borrow.tsx
@@ -1,92 +1,43 @@
+/*eslint-disable*/
 import { useState, useEffect } from "react";
-import React from 'react';
-import { useNavigate } from "react-router-dom";
-import Scanner from "../widgets/scanner";
-import Modal from "react-bootstrap/Modal";
-import Button from "react-bootstrap/Button";
-import { faCoffee, faExclamation } from "@fortawesome/free-solid-svg-icons";
+import { useNavigate, useLocation } from "react-router-dom";
+import React from "react";
+//import Scanner from "../widgets/scanner"
+//import DishAPI from "../features/api"
+import "../styles/QRScanner.css";
+//import { Button, Modal } from 'react-bootstrap'
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import axios from "axios";
+import Modal from "react-bootstrap/Modal";
+import { AppHeader } from "../widgets/appHeader";
+import BottomTextInput from "../widgets/bottomTextInput";
 import { useAuth } from "../contexts/AuthContext";
+import { faCoffee, faExclamation,faLeaf } from "@fortawesome/free-solid-svg-icons";
+import '@fortawesome/fontawesome-free/css/all.css';
 
-const Confirm = ({ show, onSubmit, onCancel, id }) => {
-  return (
-    <Modal
-      onHide={onCancel}
-      show={show}
-      className="modal-dialog-centered modal-sm"
-      centered
-    >
-      <Modal.Header closeButton></Modal.Header>
-      <Modal.Body className="text-center">
-        <FontAwesomeIcon icon={faCoffee} size="4x" />
-        <p style={{ textAlign: "center" }}>ID: {id}</p>
-      </Modal.Body>
-      <Modal.Footer className="justify-content-center">
-        <Button variant="secondary" onClick={onSubmit}>
-          Borrow
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  );
-};
+import axios from "axios";
 
-const DishNotFound = ({ show, onCancel, id }) => {
-  return (
-    <Modal
-      onHide={onCancel}
-      show={show}
-      className="modal-dialog-centered modal-sm"
-      centered
-    >
-      <Modal.Header closeButton></Modal.Header>
-      <Modal.Body className="text-center">
-        <FontAwesomeIcon
-          style={{ color: '#BF4949', margin: '16 0 16 0' }}
-          icon={faExclamation}
-          size="4x"
-        />
-        <p style={{ textAlign: 'center' }}>
-          Dish ID: {id} does not exist. Please try again.
-        </p>
-      </Modal.Body>
-    </Modal>
-  );
-};
 
-const BorrowDishSuccess = ({ show, success, onCancel, id }) => {
-  return (
-    <Modal onHide={onCancel} show={show} className="modal-dialog-bottom modal-sm" centered>
-      <Modal.Header closeButton></Modal.Header>
-      <Modal.Body style={{ width: '100%', display: 'flex', gap: '0.5rem' }}>
-        {success ? (
-          <>
-            <FontAwesomeIcon icon={faCoffee} size="4x" />
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <div>Successfully borrowed</div>
-              <div>Dish # {id} </div>
-            </div>
-          </>
-        ) : (
-          <>
-            <FontAwesomeIcon
-              style={{ color: '#BF4949' }}
-              icon={faExclamation}
-              size="4x"
-            />
-            <div style={{ display: 'flex', flexDirection: 'column' }}>
-              <div>Failed to borrow</div>
-              <div>Dish # {id} </div>
-              <div>Please scan and try again</div>
-            </div>
-          </>
-        )}
-      </Modal.Body>
-    </Modal>
-  );
-}
-
-export default () => {
+const Borrow = () => {
+  const [scanId, setScanId] = useState("");
+  const [showNotif, setShowNotif] = useState(false);
+  const [popUp, setPopUp] = useState(false);
+  const [dishType, setDishType] = useState("");
+  const [qid, setQid] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [dishIcon, setDishIcon] = useState();
+  const [notifType, setNotifType] = useState("returned");
+  const [error, setError] = useState("");
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const [reportPopUp, setReportPopUp] = useState(false);
+  const [reportValue, setReportValue] = useState("alright");
+  const [dishID, setDishID] = useState("");
+  const { currentUser, sessionToken } = useAuth();
+  const [confirm, setConfirm] = useState(false);
+  const [dishNotFound, setDishNotFound] = useState(false);
+  const [borrowDishResult, setBorrowDishResult] = useState({
+    show: false,
+    success: false,
+  });
   useEffect(() => {
     const queryParams = new URLSearchParams(window.location.search);
     const previousURL = queryParams.get('previousURL');
@@ -98,29 +49,90 @@ export default () => {
     }
   }, []);
 
-  const {currentUser, sessionToken} = useAuth()
-  const [scanId, setScanId] = useState("");
-  const [confirm, setConfirm] = useState(false);
-  const [dishNotFound, setDishNotFound] = useState(false);
-  const [borrowDishResult, setBorrowDishResult] = useState({
-    show: false,
-    success: false,
-  });
+
 
   const navigate = useNavigate();
-  const onScan = confirm
-    ? null
-    : (id: string) => {
-        const urlID = id.match(/dishID=([^&]+)/);
-        const dishID = urlID ? urlID[1] : id;
-        setScanId(dishID);
-        setConfirm(true);
-      };
 
+
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (popUp) {
+        setPopUp(false);
+      }
+    }, 5000);
+    return () => clearTimeout(timer);
+  }, [popUp]);
+
+  // const onCancel = popUp
+  //   ? () => {
+  //       setPopUp(false);
+  //     }
+  //   : null;
+
+  const onClick = () => {
+    setPopUp(true);
+  };
+
+  const DishNotFound = ({ show, onCancel, id }) => {
+    return (
+      <Modal
+        onHide={onCancel}
+        show={show}
+        className="modal-dialog-centered modal-sm"
+        centered
+      >
+        <Modal.Header closeButton></Modal.Header>
+        <Modal.Body className="text-center">
+          <FontAwesomeIcon
+            style={{ color: '#BF4949', margin: '16 0 16 0' }}
+            icon={faExclamation}
+            size="4x"
+          />
+          <p style={{ textAlign: 'center' }}>
+            Dish ID: {id} does not exist. Please try again.
+          </p>
+        </Modal.Body>
+      </Modal>
+    );
+  };
+
+  const BorrowDishSuccess = ({ show, success, onCancel, id }) => {
+    return (
+      <Modal onHide={onCancel} show={show} className="modal-dialog-bottom modal-sm" centered>
+        <Modal.Header closeButton></Modal.Header>
+        <Modal.Body style={{ width: '100%', display: 'flex', gap: '0.5rem' }}>
+          {success ? (
+            <>
+              <FontAwesomeIcon icon={faCoffee} size="4x" />
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <div>Successfully borrowed</div>
+                <div>Dish # {id} </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <FontAwesomeIcon
+                style={{ color: '#BF4949' }}
+                icon={faExclamation}
+                size="4x"
+              />
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <div>Failed to borrow</div>
+                <div>Dish # {id} </div>
+                <div>Please scan and try again</div>
+              </div>
+            </>
+          )}
+        </Modal.Body>
+      </Modal>
+    );
+  }
+
   const onConfirm = async () => {
-    if (!confirm) {
-      return false;
-    }
+    // if (!confirm) {
+    //   return false;
+    // }
     setConfirm(false);
     const user = currentUser?.id || null;
     console.log("USER: " + user);
@@ -149,29 +161,48 @@ export default () => {
     setDishNotFound(false);
     setBorrowDishResult({ ...borrowDishResult, show: false });
   };
-
   return (
-    <>
-      <Scanner
-        mode="Scan Dishes"
-        onScan={onScan}
-        onClose={() => navigate("/home")}
-      />
-      <Confirm
-        show={confirm}
-        id={scanId}
-        onSubmit={async () => {
-          await onConfirm();
-        }}
-        onCancel={onCancel}
-      />
-      <DishNotFound show={dishNotFound} id={scanId} onCancel={onCancel} />
-      <BorrowDishSuccess
-        show={borrowDishResult.show}
-        success={borrowDishResult.success}
-        onCancel={onCancel}
-        id={scanId}
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#464646",
+      }}
+    >
+
+      <AppHeader title={"Borrow Dishes"} className={"headerDiv"} />
+
+
+      <div className = "qr-body-wrapper">
+
+            <div className="b-text-wrapper">
+                <div className="borrow-icon">
+                  <FontAwesomeIcon icon= {faLeaf} color="white" fontSize="2.5em"/>
+                </div>
+              <h1 className="borrow-header">
+              Use phone camera to scan QR Code or type in the ID in the box below
+              </h1>
+            </div>
+          <BottomTextInput disabled = {false} value = {scanId} onChange = {(e) => setScanId(e.target.value)} onSubmit={async () => {
+              await onConfirm();
+
+            }}  />
+
+        <DishNotFound show={dishNotFound} id={scanId} onCancel={onCancel} />
+        <BorrowDishSuccess
+          show={borrowDishResult.show}
+          success={borrowDishResult.success}
+          onCancel={onCancel}
+          id={scanId}
       />
-    </>
+       </div>
+    </div>
   );
 };
+
+export default Borrow;
+
+
diff --git a/app/src/routes/return.tsx b/app/src/routes/return.tsx
@@ -245,7 +245,6 @@ const Return = () => {
     );
   };
   const onSubmit = async (condition: string) => {
-    console.log("peewoop"); //Remove this
 
     console.log("Session-token: ", sessionToken);
     let dishID;
@@ -410,7 +409,7 @@ const Return = () => {
         style={{ height: "100%" }}
         onSubmit={onSubmit}
       />
-      <BottomTextInput disabled={isLoading} onSubmit={onSubmit} />
+      <BottomTextInput disabled={isLoading} value = {scanId} onChange = {(e) => setScanId(e.target.value)} onSubmit={ onSubmit}  />
     </div>
   );
 };

diff --git a/app/src/styles/QRScanner.css b/app/src/styles/QRScanner.css
@@ -1,3 +1,29 @@
+.borrow-pg {
+  background-color: #323232;
+  position: absolute;
+  top:0;
+  left:0;
+}
+.borrow-icon {
+  position:absolute;
+  right: 45%;
+  bottom: 62%;
+}
+.borrow-header {
+  color:#d6d6d6;
+  position: absolute;
+  font-size:20px;
+  top: 40%;
+
+}
+.b-text-wrapper {
+  width: -webkit-fill-available;
+  height: -webkit-fill-available;
+  position: relative;
+  text-align: center;
+
+}
+
 .scanner-main {
   text-align: center;
   position: fixed;

diff --git a/app/src/styles/header.css b/app/src/styles/header.css
@@ -1,3 +1,6 @@
 .headerDiv {
     height: 25%;
-}
+}
+
+
+