wip

TobiasSchaeuble-EH · Oct 29, 2023 · 84ccb77 · 84ccb77
1 parent 3d85491
commit 84ccb77
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 9 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -25,6 +25,7 @@ function App() {
     location: "Basel",
     department: "LunchHeroes",
     groupSize: 2,
+    timeSlot: "12:00",
     interests: ["Coding", "Traveling", "Reading"],
     isScheduled: true
   };
@@ -103,6 +104,11 @@ function App() {
           </>
         )}
       </Routes>
+      <br/>
+      <br/>
+      <br/>
+      <br/>
+      <br/>
     </>
   );
 }

diff --git a/frontend/src/Components/Scheduling.js b/frontend/src/Components/Scheduling.js
@@ -31,7 +31,7 @@ const Scheduling = (props) => {
     const timer = setTimeout(() => {
       setMatchRequestResult(true);
       clearTimeout(timer); // Clear the timer after execution
-    }, 1000); // 10 seconds or 10,000 milliseconds
+    }, 4789); // 10 seconds or 10,000 milliseconds
   };
 
   const sendSchedulingData = () => {
@@ -42,7 +42,9 @@ const Scheduling = (props) => {
       <div className="scheduling-header scheduling-container">
         Fancy having lunch together with interesting people?
       </div>
-      {matchRequest && <Status isScheduled={
+      {matchRequest && <Status 
+      timeSlot={props.timeSlot}
+      isScheduled={
         matchRequestResult
       } />}
 

diff --git a/frontend/src/Components/Status.js b/frontend/src/Components/Status.js
@@ -8,13 +8,18 @@ function Status(props) {
         <>
           <p className="scheduled">Lunch meeting was successfully scheduled!</p>
           <div className="details">
-            <p className="detail-item">Time <strong>12:00</strong></p>
-            <p className="detail-item">Table Number <strong>12</strong></p>
-            <p className="detail-item">Guests: <strong>4</strong></p>
+            <p className="detail-item">Time <strong>{props.timeSlot}</strong></p>
+            <p className="detail-item">Table Number <strong>{Math.floor(Math.random() * 4) + 1}</strong></p>
+            <p className="detail-item">Guests: <strong>{Math.floor(Math.random() * 4) + 2}</strong></p>
           </div>
         </>
       ) : (
-        <p className="not-scheduled">Request for the Lunch meeting is pending...</p>
+        <>
+          <p className="not-scheduled">Request for the Lunch meeting is pending...</p>
+          <div className="loading-bar-container">
+            <div className="loading-bar-fill"></div>
+          </div>
+        </>
       )}
     </div>
   );

diff --git a/frontend/src/SCSS/Status.css b/frontend/src/SCSS/Status.css
@@ -1,7 +1,7 @@
 .status-container {
   margin-top: 20px;
   padding: 20px;
-  border: 2px solid #8f2a2c; 
+  border: 2px solid #3498db; 
   background-color: #e6ecf0;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -19,7 +19,7 @@
 }
 
 .scheduled {
-  color: #a8005c;
+  color: #3498db;
   font-weight: 600;
   margin-bottom: 10px; /* Added margin to space out from the details */
 }
@@ -41,10 +41,38 @@
 }
 
 .detail-item strong {
-  color: #2a2a8f;
+  color: #3498db;
   font-size: 1.1em;
 }
 
 .status-container:hover .detail-item strong {
   color: #a8005c;
 }
+
+
+
+.loading-bar-container {
+  width: 100%;
+  height: 20px;
+  background-color: #e0e0e0; /* Light gray */
+  border-radius: 10px;
+  overflow: hidden; /* Makes sure the inner bar doesn't overflow */
+  position: relative; /* Allows for absolute positioning of inner elements */
+}
+
+.loading-bar-fill {
+  height: 100%;
+  width: 0%; /* Starts off empty */
+  background-color: #3498db; /* Blue */
+  border-radius: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: loadingAnimation 10s infinite; /* 2 seconds duration for a simple animation */
+}
+
+@keyframes loadingAnimation {
+  0% { width: 0%; }
+  50% { width: 100%; }
+  100% { width: 0%; }
+}