Merge pull request #38 from lucashicks1/react-ui

center the mf divs !!!!!!!!!! grrrrr

build/ui-display/frontend-app/src/App.css

@@ -12,34 +12,71 @@
 .App-header {
   background-color: #edf6f9;
   display: flex;
+  height: 20%;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: --darkgrey;
   border-radius: 20px;
 }
 
 .Sky-box {
   border-radius: 20px;
   border: 1px solid #454545;
   background: var(--blue);
-  width: 962px;
-  height: 1100px;
-  margin: auto;
-  position: relative;
-
+  width: 95%;
+  height: 95%;
+  margin: 2.5%;
 }
 
 .Grass-box {
   border-radius: 20px;
   border: 1px solid #454545;
   background: var(--lightgreen);
-  width: 962px;
-  height: 279px;
+  width: 1080px;
+  height: 20%;
+  margin: auto;
+  position: absolute;
   bottom: 0px;
-  position: absolute
-  ;
+}
+
+.shared-div {
+  position: relative;
+  width: 100%;
+  height: 20%;
+  display: flex;
+  justify-content: space-between;
+  /* border: 1px solid #454545; */
+}
+
+.left-widget {
+  border-radius: 20px;
+  width: 47.5%;
+  height: 100%;
+  display: flex; /* Use flexbox to center content vertically and horizontally */
+  justify-content: center;
+  align-items: center;
+  /* border: 1px solid #454545; */
+}
+
+.right-widget {
+  border-radius: 20px;
+  width: 47.5%;
+  height: 100%;
+  display: flex; /* Use flexbox to center content vertically and horizontally */
+  justify-content: center;
+  align-items: center;
+  /* border: 1px solid #454545; */
+}
+
+.SuggestedTime-box {
+  display: flex;
+  background-color: var(--cream);
+  border-radius: 20px;
+  border: 1px solid #454545;
+  width: 100%;
+  height: 20%;
 }
 
 :root {

build/ui-display/frontend-app/src/App.js

@@ -2,23 +2,52 @@ import './App.css';
 import DateWidget from './components/widgets/DateWidget';
 import ClockWidget from './components/widgets/ClockWidget';
 import WeatherWidget from './components/widgets/WeatherWidget';
+import SuggestedActivityWidget from './components/widgets/SuggestedActivityWidget';
 import BusiestWidget from './components/widgets/BusiestWidget';
 import SuggestedTimeWidget from './components/widgets/SuggestedTimeWidget';
 
 function App() {
   return (
+    // <div className="App">
+    //   <header className="App-header">
+    //     <div className="Clock-box">
+    //     <ClockWidget />
+    //     </div>
+    //     <DateWidget />
+    //   </header>
+    //   <div className="Sky-box">
+    //     <BusiestWidget />
+    //     <SuggestedTimeWidget />
+    //     here's the sky
+    //   </div>
+    //   <div className='Grass-box'>
+    //       here's the grass :D
+    //   </div>
+    // </div>
     <div className="App">
-      <header className="App-header">
-        <ClockWidget />
-        <DateWidget />
-      </header>
       <div className="Sky-box">
-        <BusiestWidget />
-        <SuggestedTimeWidget />
-        here's the sky
-        <div className='Grass-box'>
-          here's the grass :D
+        <div>
+          <div className="Clock-box">
+            <ClockWidget />
+            <div className="Date-box">
+              <DateWidget />
+            </div>
+          </div>
         </div>
+        <div className="shared-div">
+          <div className="left-widget">
+            <WeatherWidget />
+          </div>
+          <div className="right-widget">
+            <SuggestedActivityWidget />
+          </div>
+        </div>
+        <div className="SuggestedTime-box">
+          {/* <SuggestedTimeWidget /> */}
+        </div>
+      </div>
+      <div className="Grass-box">
+        {/* grass here */}
       </div>
     </div>
   );

build/ui-display/frontend-app/src/components/widgets/BusiestWidget.js

@@ -5,15 +5,15 @@ export default function BusiestWidget() {
     const [busiest, setBusiest] = useState("");
     const [loading, setLoading] = useState(true);
 
-    const baseURL = 'https://localhost:8000/display/';
+    const baseURL = 'https://localhost:3000/display/';
 
     useEffect(() => {
         const fetchData = async () => {
-            const response = await fetch("http://localhost:8000/display/user-totals");
+            const response = await fetch("http://localhost:3000/display/user-totals");
             const data = await response.json();
             if (data) {
                 const times = Object.values(data);
-                setBusiest(Object.entries(data).filter(([key, value]) => value == Math.max(...times)).map(([key, value]) => key));
+                setBusiest(Object.entries(data).filter(([key, value]) => value === Math.max(...times)).map(([key, value]) => key));
                 setLoading(false);
 
             } 

build/ui-display/frontend-app/src/components/widgets/DateWidget.js

@@ -2,12 +2,6 @@ import React from "react";
 
 export default function DateWidget() {
     const prettyDate = (date) => {
-        /*
-        const timeOptions = {
-            hour: "2-digit",
-            minute: "2-digit",
-            hour12: true
-        };*/
 
         const dateOptions = {
             day: "numeric",
@@ -16,10 +10,6 @@ export default function DateWidget() {
         };
 
         return new Date(date).toLocaleString('en-AU', dateOptions); 
-
-        /*
-        return [new Date(date).toLocaleTimeString('en-AU', timeOptions), "on",
-        new Date(date).toLocaleString('en-AU', dateOptions)].join(" "); */
     }
 
     return (

build/ui-display/frontend-app/src/components/widgets/SuggestedActivityWidget.js

@@ -0,0 +1,52 @@
+// import React from "react";
+
+// export default function ClockWidget() { 
+//     const Activities = ({ weatherCondition }) => {
+
+//         const weatherActivities = {
+//             'Thunderstorm': 'movie marathon',
+//             'Drizzle': 'bake off',
+//             'Rain': 'trip to the library',
+//             'Clear': 'picnic',
+//             'Clouds': 'game of Catan'
+//         };
+
+//         const weather = 'Clear';
+//         const activity = weatherActivities[weather] || 'movie';
+//     }
+
+
+
+//         return (
+//             <div>
+//                 <h1>It's looking {weatherCondition} today, how about a {activity}?</h1>
+//             </div>
+//         );
+// }
+
+import React from 'react';
+
+const weatherActivities = {
+    'Thunderstorm': 'movie marathon',
+    'Drizzle': 'bake off',
+    'Rain': 'trip to the library',
+    'Clear': 'picnic',
+    'Clouds': 'game of Catan'
+};
+
+const Activities = ({ weatherCondition }) => {
+    // hard code this value for now
+    if (!weatherCondition) {
+        weatherCondition = 'Clear';
+    }
+// Get the corresponding activity based on the weatherCondition
+    const activity = weatherActivities[weatherCondition] || 'movie';
+
+    return (
+        <div>
+            <h1>It's looking {weatherCondition} today, how about a {activity}?</h1>
+        </div>
+    );
+}
+
+export default Activities;

build/ui-display/frontend-app/src/components/widgets/WeatherWidget.js

@@ -35,19 +35,22 @@ class WeatherWidget extends Component {
     };
 
     render() {
-        const { temperature, icon } = this.state;
+        const { temperature, icon, condition } = this.state;
 
         return (
             <div>
                 {temperature !== null && (
                     <div>
-                        <h2>{temperature}°C</h2>
                         {icon && (
                             <img
                                 src={`https://openweathermap.org/img/w/${icon}.png`}
                                 alt="Weather Icon"
                             />
                         )}
+                        <h1>{temperature}°C</h1>
+                        <h1>
+                            {condition}
+                        </h1>
                     </div>
                 )}
             </div>

build/ui-display/frontend-app/src/components/widgets/Widgets.css

@@ -1,14 +1,28 @@
 @import "../../App.css";
 
 .Clock-box {
-    background-color: var(--purple);
+    background-color: var(--cream);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: calc(10px + 2vmin);
-    color: white;
+    height: 20%;
+    color: var(--darkgrey);
     border-radius: 20px;
-    margin-top: 200px;
+    margin-top: 0%;
+    text-shadow: 0 2px 2px var(--darkgrey);
 }
 
+.Date-box {
+    border-radius: 20px;
+    margin-bottom: 0%;
+    height: 5%;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(5px + 2vmin);
+    background-color: var(--cream);
+
+}