main features working, UI and better date generation left

'

backend/db.js

@@ -54,5 +54,6 @@ export { getTopTen };
 // FROM Timelog t
 // INNER JOIN Project p ON p.id=t.project
 // INNER JOIN User u ON u.id=t.user
+//   WHERE User = "100";
 // ORDER BY time
 // LIMIT 10 OFFSET 10

backend/index.js

@@ -1,6 +1,7 @@
 import express from "express";
 import mysql from "mysql2/promise";
 import { getTopTen } from "./db.js";
+import { resourceUsage } from "process";
 
 export const connection = await mysql.createConnection({
   host: "localhost",
@@ -14,7 +15,7 @@ const router = express.Router();
 
 router.get("/getall", async (req, res) => {
   let sql =
-    "SELECT u.f_name,u.l_name,u.mail,p.name,t.time,t.date \
+    "SELECT u.f_name,u.l_name,u.mail,p.name,t.time,t.date,t.user \
     FROM Timelog t \
     INNER JOIN Project p ON p.id=t.project \
     INNER JOIN User u ON u.id=t.user ";
@@ -127,6 +128,49 @@ router.get("/gettopten", async (req, res) => {
 
   res.json(results2);
 });
+router.get("/reset", async (req, res) => {
+  try {
+    const [results, fields] = await connection.query("CALL InitDb;", []);
+  } catch (err) {
+    console.log(err);
+  }
+  res.status(200).json({ message: "Success" });
+});
+router.get("/getUser", async (req, res) => {
+  const userId = req.query.userid;
+  let results, fields;
+  console.log(userId);
+  try {
+    [results, fields] = await connection.query(
+      "SELECT p.name,t.time,t.project \
+    FROM Timelog t \
+    INNER JOIN Project p ON p.id=t.project \
+    INNER JOIN User u ON u.id=t.user \
+    WHERE USER = ? ;",
+      [userId],
+    );
+  } catch (err) {
+    console.log(err);
+  }
+  let projects = {};
+  let projectIdtoName = {};
+  for (let i = 0; i < results.length; i++) {
+    if (results[i].project in projects) {
+      projects[results[i].project] += results[i].time;
+    } else {
+      projects[results[i].project] = results[i].time;
+      projectIdtoName[results[i].project] = results[i].name;
+    }
+  }
+  // map projectIds to project names before sending the data
+  let respData = {};
+  for (let key in projects) {
+    if (projects.hasOwnProperty(key)) {
+      respData[projectIdtoName[key]] = projects[key];
+    }
+  }
+  res.json(respData);
+});
 
 const app = express();
 app.use(express.json());

frontend/src/components/LeftSide.tsx

@@ -5,6 +5,8 @@ const LeftSide = () => {
   const [users, setUsers] = useState();
   const [params, setParams] = useState({ offset: 0, sortby: "f_name" });
 
+  const [reset, setReset] = useState(true);
+
   // date
   const [date, setDate] = useState({ from: "2021-01-01", to: "2028-01-01" });
   const [dateToSubmit, setDateToSubmit] = useState({});
@@ -16,15 +18,33 @@ const LeftSide = () => {
       });
       setUsers(resp.data);
     }
+    async function resetData() {
+      await api.get("/reset");
+    }
+    if (!reset) {
+      setReset(true);
+      resetData();
+    }
     fetchData();
-  }, [params, dateToSubmit]);
+  }, [reset, params, dateToSubmit]);
 
   const handleButtonClick = () => {
     // When the button is clicked, update the dateToShow state and trigger a re-render
-    console.log(dateToSubmit);
     setDateToSubmit(date);
   };
 
+  const viewProjectHours = (user) => {
+    console.log(user);
+    async function fetchHours() {
+      const resp = await api.get("/getUser", {
+        params: { userid: user },
+      });
+      const entriesArray = Object.entries(resp.data);
+      alert(entriesArray);
+    }
+    fetchHours();
+  };
+
   if (!users) return <></>;
   return (
     <div>
@@ -83,29 +103,40 @@ const LeftSide = () => {
       >
         Prev users
       </button>
-      <button
+      <table>
-        onClick={() =>
+        <thead>
-          setParams((prevParams) => {
+          <tr>
-            return { ...prevParams, to: "2028-12-12", from: "2028-01-01" };
+            <th>First Name</th>
-          })
+            <th>Last Name</th>
-        }
+            <th>Email</th>
-      >
+            <th>Project name</th>
-        Filter by date
+            <th>Date</th>
-      </button>
+            <th>Hours</th>
-      {users.length > 0 && Array.isArray(users) ? (
+          </tr>
-        users.map((post, idx) => (
+        </thead>
-          <div key={idx}>
+        <tbody>
-            <span>{post.f_name} </span>
+          {users.length > 0 && Array.isArray(users) ? (
-            <span>{post.l_name} </span>
+            users.map((post, idx) => (
-            <span>{post.mail} </span>
+              <tr key={idx}>
-            <span>{post.name} </span>
+                <td>{post.f_name} </td>
-            <span>{post.date} </span>
+                <td>{post.l_name} </td>
-            <span>{post.time} </span>
+                <td>{post.mail} </td>
-          </div>
+                <td>{post.name} </td>
-        ))
+                <td>{post.date} </td>
-      ) : (
+                <td>{post.time} </td>
-        <div>No posts found...</div>
+                <td>
-      )}
+                  <button onClick={() => viewProjectHours(post.user)}>
+                    View Project Hours
+                  </button>
+                </td>
+              </tr>
+            ))
+          ) : (
+            <div>No posts found...</div>
+          )}
+        </tbody>
+      </table>
+      <button onClick={() => setReset(!reset)}>RESET</button>
     </div>
   );
 };