Merge pull request #41 from NotMash/luke_front_end_new

almost done
NotMash · Apr 8, 2024 · 38f0ccc · 38f0ccc
2 parents e25557a + c448c6c
commit 38f0ccc
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 105 deletions.
diff --git a/backend/timesheets/routes.py b/backend/timesheets/routes.py
@@ -159,9 +159,15 @@ def get(self):
             return jsonify({"Error": "Unauthorised"}), 401
         timesheets = Timesheet.query.filter_by(consultant_id=user_id).all()
         json_dict = {}
-        timesheet_ids = [timesheet.id for timesheet in timesheets]
+
         for timesheet in timesheets:
-            json_dict[timesheet.id] = {"id": timesheet.id, "name": timesheet.consultant_name, "status": timesheet.status}
+            json_dict[timesheet.id] = {
+                "id": timesheet.id,
+                "name": timesheet.consultant_name,
+                "status": timesheet.status,
+                "day": timesheet.day.strftime('%Y-%m-%d')  # Format the day as a string in YYYY-MM-DD format
+            }
+
         return jsonify(json_dict), 200
 
 class ListWeeklyTimesheetsView(MethodView):

diff --git a/frontend/src/Components/Consultant_Home_Page/Calendar.js b/frontend/src/Components/Consultant_Home_Page/Calendar.js
@@ -12,6 +12,8 @@ function Calendar() {
   const [myEvents, setEvents] = useState([]);
   const [isToastOpen, setToastOpen] = useState(false);
   const [toastText, setToastText] = useState();
+  const [timesheets, setTimesheets] = useState([]);
+  var arrayOfDays = []
 
   const handleToastClose = useCallback(() => {
     setToastOpen(false);
@@ -30,52 +32,70 @@ function Calendar() {
   const myView = useMemo(() => ({ calendar: { labels: true } }), []);
 
   useEffect(() => {
-    const events = [
-      {
-        id: 1,
-        start: new Date(2024, 3, 1, 10), // Year, Month (0-11), Day, Hour (24-hour format)
-        end: new Date(2024, 3, 1, 12),
-        title: 'Approved',
-        color: 'darkgreen'
-      },
-      {
-        id: 3,
-        start: new Date(2024, 3, 2, 10),
-        end: new Date(2024, 3, 2, 12),
-        title: 'Approved',
-        color: 'darkgreen'
-      },
-      {
-        id: 4,
-        start: new Date(2024, 3, 3, 10),
-        end: new Date(2024, 3, 3, 12),
-        title: 'Disapproved',
-        color: 'darkred' 
-      },
-      {
-        id: 2,
-        start: new Date(2024, 3, 5, 14),
-        end: new Date(2024, 3, 5, 15, 30),
-        title: 'Pending',
-        color: 'darkorange'
-      },
-    ];
+    const fetchData = async () =>{
+        try{
+            await fetch('http://127.0.0.1:5000/list_timesheets', {
+                    method: "GET",
+                    headers: { "Content-Type": "application/json" },
+                    credentials: 'include',
+                }).then(response => {
+                    if (response.ok) {
+                        return response.json();
+                    } 
+                    else {
+                        throw new Error('User Creation Failed with Status: ' + response.status);
+                    }
+                }).then(data => {
+                    // Data fetched successfully
+                    console.log(data)
+                    setTimesheets(data);
+                }).catch(error => {
+                    console.error(error);
+                });
+        } catch(error) {
+            console.log("error fetching data")
+        }
+    };
+    fetchData();
+  }, []);
+
+  console.log("stored stuff:",timesheets)
+
+  let counter = 0
+  Object.entries(timesheets).map(entry => {
+      arrayOfDays.push(entry[1])
+      console.log(new Date(arrayOfDays[counter].day))
+      counter++
+  })
+  console.log(arrayOfDays)
+
+
+  console.log(arrayOfDays.length)
+
+
+  useEffect(() => {
+    const eventsFromTimesheets = Object.values(timesheets).map(ts => ({
+      start: new Date(ts.day),
+      end: new Date(ts.day),
+      title: ts.status,
+      color: ts.status === 'approved' ? 'darkgreen' : ts.status=='disapproved' ? 'red' : '#FFD700'
+    }));
 
     const today = new Date();
-    const formattedToday = new Date(today.getFullYear(), today.getMonth(), today.getDate()); // Remove time part
-    const todayEvent = events.find(event => event.start.getTime() === formattedToday.getTime());
+    const formattedToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const todayEvent = eventsFromTimesheets.find(event => event.start.toDateString() === formattedToday.toDateString());
+
     if (!todayEvent) {
-      events.push({
-        id: events.length + 1,
+      eventsFromTimesheets.push({
         start: formattedToday,
         end: formattedToday,
         title: 'Check In',
         color: '#454545'
       });
     }
 
-    setEvents(events);
-  }, []);
+    setEvents(eventsFromTimesheets);
+  }, [timesheets]);
 
   return (
     <>

diff --git a/frontend/src/Components/View_Saved_Timesheets_Page/TimesheetCard.js b/frontend/src/Components/View_Saved_Timesheets_Page/TimesheetCard.js
@@ -8,8 +8,8 @@ export default function TimesheetCard(props) {
     const [hasResubmitted, setHasResubmitted] = useState(false)
 
     function resubmitTimesheet() {
-        if(hasResubmitted != true) {
-            if(/^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(newStartTime) && /^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(newEndTime)) {
+        if (hasResubmitted != true) {
+            if (/^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(newStartTime) && /^([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/.test(newEndTime)) {
                 console.log("Resubmitting timesheet " + props.id)
                 fetch('http://127.0.0.1:5000/update_timesheet/' + props.id, {
                     method: "PUT",
@@ -36,36 +36,44 @@ export default function TimesheetCard(props) {
         }
     }
 
-    if(props.status != "disapproved") {
-        return(<div className={styles.timesheetCard}>
+    if (props.status != "disapproved") {
+        return (<div className={styles.timesheetCard}>
             <h2 className={styles.day}>Day : {props.day}</h2>
             <h2 className={styles.workStart}>Start Time : {props.workStart}</h2>
             <h2 className={styles.workEnd}>End Time : {props.workEnd}</h2>
             <h2 className={styles.status}>Status : {props.status}</h2>
         </div>)
     }
-    else{
-        return(<div className={styles.timesheetCard}>
-            <h2 className={styles.day}>Day : {props.day}</h2>
-            <h2 className={styles.workEnd} >Old Work Start : {props.workStart}</h2>
-            <input type="text" pattern="[a-z]{4,8}" 
-            title="Please enter a valid timestamp (HH:MM:SS)"
-            required
-            value={newStartTime}
-            onChange={(e) => setNewStartTime(e.target.value)}
-            />
-            <h2 className={styles.workStart} >Old Work End : {props.workEnd}</h2>
-            <input type="text" pattern="[a-z]{4,8}"
-            title="Please enter a valid timestamp (HH:MM:SS)"
-            required
-            value={newEndTime}
-            onChange={(e) => setNewEndTime(e.target.value)}
-            />
-            <h2 className={styles.status}>Status : {props.status}</h2>
-            <input onClick={resubmitTimesheet} 
-            type="submit" 
-            value="Resubmit Timesheet"
-            disabled={hasResubmitted}/>
+    else {
+        return (<div className={styles.timesheetCard}>
+            <h2 className={styles.day}>Date : {props.day}</h2>
+            <div className={styles.disapprovedInput}>
+                <h2 className={styles.workEnd} >Old Work Start : {props.workStart}</h2>
+                <input type="text" pattern="[a-z]{4,8}"
+                    title="Please enter a valid timestamp (HH:MM:SS)"
+                    required
+                    value={newStartTime}
+                    onChange={(e) => setNewStartTime(e.target.value)}
+                />
+            </div>
+            <div className={styles.disapprovedInput}>
+                <h2 className={styles.workStart} >Old Work End : {props.workEnd}</h2>
+                <input type="text" pattern="[a-z]{4,8}"
+                    title="Please enter a valid timestamp (HH:MM:SS)"
+                    required
+                    value={newEndTime}
+                    onChange={(e) => setNewEndTime(e.target.value)}
+                />
+            </div>
+            <div className={styles.disapprovedInput}>
+                <h2 className={styles.status}>Status : {hasResubmitted==false ? props.status : "Pending "}</h2>
+                <button onClick={resubmitTimesheet}
+                    type="submit"
+                    value="Resubmit Timesheet"
+                    disabled={hasResubmitted}>
+                        Resubmit
+                </button>
+            </div>
         </div>)
     }
 }
diff --git a/frontend/src/Components/View_Saved_Timesheets_Page/TimesheetCard.module.css b/frontend/src/Components/View_Saved_Timesheets_Page/TimesheetCard.module.css
@@ -32,3 +32,48 @@
     color: #e3fa96;
 }
 
+.disapprovedInput {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.disapprovedInput input {
+    font-weight: 500;
+    font-size: 11pt;
+    color: #fff;
+    background-color: rgb(41, 41, 43);
+    box-shadow: 0 0 .4vw rgba(0,0,0,0.5), 0 0 0 .15vw transparent;
+    border-radius: 15px;
+    border: none;
+    outline: none;
+    padding: 1.1vw;
+    max-width: 100%;
+    height: 25px;
+    transition: .4s;
+    text-align: center;
+    margin: 5%;
+}
+
+.disapprovedInput button{
+    display: flex;
+    align-items: center;
+    background-color: #29292b;
+    box-shadow: 0 0 .4vw rgba(0,0,0,0.5), 0 0 0 .15vw transparent;
+    color: rgb(255, 255, 255);
+    width: 100%;
+    height: 25px;    
+    padding: 1.1vw;
+    margin: 5%;
+    justify-content: center;
+}
+
+.disapprovedInput button:disabled {
+    display: none;
+}
+
+.disapprovedInput button:hover{
+    box-shadow: 0 0 .4vw #c5ff00, 0 0 0 .15vw transparent;
+}
+
diff --git a/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.js b/frontend/src/Components/View_Timesheet_Page/ConsultantDetails.js
@@ -30,7 +30,7 @@ export default function ConsultantDetails(props) {
                 <p className={styles.element}>{lineManagerName}</p>
             </div>
             <div className={styles.userNameContainer}>
-                <DailyRate/>
+                <DailyRate hourlyRate={props.hourlyRate}/>
             </div>
         </div>)
 }
diff --git a/frontend/src/Components/View_Timesheet_Page/TimesheetTable.js b/frontend/src/Components/View_Timesheet_Page/TimesheetTable.js
@@ -94,7 +94,7 @@ export default function TimesheetTable() {
             {arrayOfDays.length > 0 && <ViewTimesheetHeader currentWeek={arrayOfDays[0].week_start} />}
             <div className={styles.mainContainer}>
                 <div className={styles.sidePanel}>
-                    {arrayOfDays.length > 0 && <ConsultantDetails consultantName={arrayOfDays[0].consultant_name} lineManagerName={arrayOfDays[0].line_manager_name} />}
+                    {arrayOfDays.length > 0 && <ConsultantDetails consultantName={arrayOfDays[0].consultant_name} lineManagerName={arrayOfDays[0].line_manager_name} hourlyRate={arrayOfDays[0].hourly_rate}/>}
                 </div>
                 <div className={styles.mainPanel}>
                     <table className={styles.timesheetTable}>

diff --git a/frontend/src/Pages/Consultant/ConsultantHomePage.module.css b/frontend/src/Pages/Consultant/ConsultantHomePage.module.css
@@ -1,3 +1,14 @@
+@keyframes slidein {
+    0% {
+      transform: translateY(20%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
 .main{
     padding-left: 5rem;
     padding-right: 5rem;
@@ -27,4 +38,5 @@ body{
     background-color: #101010;
     box-shadow: 0 0 15px black;
     margin-bottom: 3%;
+    animation: slidein 1s ease-out;
 }
diff --git a/frontend/src/Pages/Consultant/ViewSavedTimesheets.module.css b/frontend/src/Pages/Consultant/ViewSavedTimesheets.module.css
@@ -1,42 +1,3 @@
-/* .main{
-    padding: 1rem;
-}
-
-body{
-    margin: 0;
-    padding: 0;
-}
-
-.filterTitle{
-    color: aliceblue;
-}
-
-
-#chosenFilter{
-    color: white;
-    margin-top: 30px;
-    margin-bottom: 30px;
-}
-
-
-.filterTitle{
-    margin-right: 30px;
-}
-
-#select1{
-    margin-right: 200px;
-}
-
-
-.header{
-    text-align: center;
-}
-
-
-.select{
-    border-radius: 5px;
-} */
-
 
 .mainContainer {
     width: 100%;
@@ -53,6 +14,7 @@ body{
     justify-content: center;
     gap: 10%;
     margin-top: 3%;
+    z-index: 0;
 }
 
 .cardContainer {