From b50717c88ff5297e505ad3a663622593c0b8f03d Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Fri, 8 Mar 2024 21:52:36 +0100
Subject: [PATCH 1/4] feat: projectcards for student first look done

---
 .../src/assets/styles/students_components.css | 19 ++++++++++++
 frontend/src/components/Header.tsx            |  2 +-
 frontend/src/pages/student/HomeStudent.tsx    | 16 ++++++++--
 .../src/pages/student/ProjectCardStudent.tsx  | 29 +++++++++++++++++++
 4 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/assets/styles/students_components.css
 create mode 100644 frontend/src/pages/student/ProjectCardStudent.tsx

diff --git a/frontend/src/assets/styles/students_components.css b/frontend/src/assets/styles/students_components.css
new file mode 100644
index 00000000..4f05acd9
--- /dev/null
+++ b/frontend/src/assets/styles/students_components.css
@@ -0,0 +1,19 @@
+.student-main {
+    width: 60vw;
+    flex-wrap: wrap;
+    overflow-y: scroll;
+}
+
+.project-card {
+    background-color: #9c9afd !important;
+    width: 25vw;
+    height: 25vh;
+}
+
+.p-negative {
+    color: red !important;
+}
+
+.p-positive {
+    color: green !important;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 7c900e71..96584f90 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -5,7 +5,7 @@ export function Header(): JSX.Element {
     return (
         <nav className={"main-nav is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center"}>
             <img src={"/delphi_favicon_circle.png"} alt={"image"}/>
-            <p className={"is-align-self-center"}><p>Project</p></p>
+            <p className={"is-align-self-center"}><p>Home</p></p>
             <button className={"button mx-2 is-transparent"}>
                 <div className={"icon-text"}>
                     <p>Username</p>
diff --git a/frontend/src/pages/student/HomeStudent.tsx b/frontend/src/pages/student/HomeStudent.tsx
index 47d6c2a0..e4ab35e5 100644
--- a/frontend/src/pages/student/HomeStudent.tsx
+++ b/frontend/src/pages/student/HomeStudent.tsx
@@ -1,6 +1,8 @@
 import {JSX} from "react";
 import {Header} from "../../components/Header.tsx";
 import {Sidebar} from "../../components/Sidebar.tsx";
+import ProjectCardStudent from "./ProjectCardStudent.tsx";
+import '../../assets/styles/students_components.css'
 
 export default function HomeStudent(): JSX.Element {
     return (
@@ -12,8 +14,18 @@ export default function HomeStudent(): JSX.Element {
                 <div className={"side-bar is-flex is-justify-content-center"}>
                     <Sidebar/>
                 </div>
-                <div>
-                    <>Homescreen for a student</>
+                <div className={"student-main px-5 py-5 mx-5 my-5 is-flex is-justify-content-space-evenly"}>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
+                    <ProjectCardStudent/>
                 </div>
             </div>
         </>
diff --git a/frontend/src/pages/student/ProjectCardStudent.tsx b/frontend/src/pages/student/ProjectCardStudent.tsx
new file mode 100644
index 00000000..b960a38b
--- /dev/null
+++ b/frontend/src/pages/student/ProjectCardStudent.tsx
@@ -0,0 +1,29 @@
+import {JSX} from "react";
+
+
+export default function ProjectCardStudent(): JSX.Element {
+    // as for now I'm not sure how the info will come in, so using
+    // static values for now (change to true and true/false to see how they'll look like):
+    let has_submission: boolean = false;
+    let isSuccess: boolean = false;
+
+    return (
+        <div
+            className={"card project-card px-5 py-5 my-5 is-flex is-flex-direction-column is-justify-content-space-between"}>
+            <p className={"title is-5"}>Markov Decision Diagram</p>
+            <div className={"is-flex is-flex-direction-row"}>
+                <p className={"pr-2"}>vak: </p>
+                <p>Computationele Biologie</p>
+            </div>
+            <div className={"is-flex is-flex-direction-row is-align-items-center py-5"}>
+                <p className={"pr-2"}>status: </p>
+                {!has_submission && <p className={"px-2 py-1"}>—</p>}
+                {has_submission && isSuccess && <p className={"card p-positive px-2 py-1"}>Success</p>}
+                {has_submission && !isSuccess && <p className={"card p-negative px-2 py-1"}>Failed</p>}
+            </div>
+        </div>
+    )
+}
+
+
+

From 8d9a714c7737df0d39456cae0fb1b254767dbe59 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Sat, 9 Mar 2024 16:37:31 +0100
Subject: [PATCH 2/4] fix: layout cards and important force removed

---
 frontend/src/assets/styles/students_components.css |  4 ++--
 frontend/src/pages/student/ProjectCardStudent.tsx  | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/styles/students_components.css b/frontend/src/assets/styles/students_components.css
index 4f05acd9..4872219b 100644
--- a/frontend/src/assets/styles/students_components.css
+++ b/frontend/src/assets/styles/students_components.css
@@ -11,9 +11,9 @@
 }
 
 .p-negative {
-    color: red !important;
+    color: red;
 }
 
 .p-positive {
-    color: green !important;
+    color: green;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/student/ProjectCardStudent.tsx b/frontend/src/pages/student/ProjectCardStudent.tsx
index b960a38b..a1b3e033 100644
--- a/frontend/src/pages/student/ProjectCardStudent.tsx
+++ b/frontend/src/pages/student/ProjectCardStudent.tsx
@@ -4,8 +4,8 @@ import {JSX} from "react";
 export default function ProjectCardStudent(): JSX.Element {
     // as for now I'm not sure how the info will come in, so using
     // static values for now (change to true and true/false to see how they'll look like):
-    let has_submission: boolean = false;
-    let isSuccess: boolean = false;
+    let has_submission: boolean = true;
+    let isSuccess: boolean = true;
 
     return (
         <div
@@ -18,8 +18,10 @@ export default function ProjectCardStudent(): JSX.Element {
             <div className={"is-flex is-flex-direction-row is-align-items-center py-5"}>
                 <p className={"pr-2"}>status: </p>
                 {!has_submission && <p className={"px-2 py-1"}>—</p>}
-                {has_submission && isSuccess && <p className={"card p-positive px-2 py-1"}>Success</p>}
-                {has_submission && !isSuccess && <p className={"card p-negative px-2 py-1"}>Failed</p>}
+                {has_submission && isSuccess &&
+                    <div className={"card"}><p className={"p-positive px-2 py-1"}>Success</p></div>}
+                {has_submission && !isSuccess &&
+                    <div className={"card"}><p className={"p-negative px-2 py-1"}>Failed</p></div>}
             </div>
         </div>
     )

From 126ec83465260cf53a395f6344feec28962d4590 Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Sat, 9 Mar 2024 16:51:31 +0100
Subject: [PATCH 3/4] fix: linting for static value (temp value)

---
 frontend/src/pages/student/ProjectCardStudent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/student/ProjectCardStudent.tsx b/frontend/src/pages/student/ProjectCardStudent.tsx
index a1b3e033..8d0ad6b4 100644
--- a/frontend/src/pages/student/ProjectCardStudent.tsx
+++ b/frontend/src/pages/student/ProjectCardStudent.tsx
@@ -4,8 +4,8 @@ import {JSX} from "react";
 export default function ProjectCardStudent(): JSX.Element {
     // as for now I'm not sure how the info will come in, so using
     // static values for now (change to true and true/false to see how they'll look like):
-    let has_submission: boolean = true;
-    let isSuccess: boolean = true;
+    const has_submission: boolean = false;
+    const isSuccess: boolean = true;
 
     return (
         <div

From d49a3ac1380c0be6329c591dcfda05bf8bec93ca Mon Sep 17 00:00:00 2001
From: EmmaVandewalle <emmatje.vandewalle@gmail.com>
Date: Mon, 11 Mar 2024 10:41:54 +0100
Subject: [PATCH 4/4] fix: written explanation for later usage

---
 .../src/pages/student/ProjectCardStudent.tsx     | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/student/ProjectCardStudent.tsx b/frontend/src/pages/student/ProjectCardStudent.tsx
index 8d0ad6b4..b38aad19 100644
--- a/frontend/src/pages/student/ProjectCardStudent.tsx
+++ b/frontend/src/pages/student/ProjectCardStudent.tsx
@@ -2,9 +2,13 @@ import {JSX} from "react";
 
 
 export default function ProjectCardStudent(): JSX.Element {
-    // as for now I'm not sure how the info will come in, so using
-    // static values for now (change to true and true/false to see how they'll look like):
-    const has_submission: boolean = false;
+    // TODO: {{
+    //      hasSubmission: check if there is a submission found in the database, if not it must return '-' on the screen
+    //      isSuccess: when there is a submission, it must return either 'success' or 'failed'
+    //      => if hasSubmission is false, isSuccess won't be checked (so ignoring all value changes)
+    //      => when this isn't prefetched, useState will be needed for hasSubmission to rerender status correctly
+    //  }}
+    const hasSubmission: boolean = false;
     const isSuccess: boolean = true;
 
     return (
@@ -17,10 +21,10 @@ export default function ProjectCardStudent(): JSX.Element {
             </div>
             <div className={"is-flex is-flex-direction-row is-align-items-center py-5"}>
                 <p className={"pr-2"}>status: </p>
-                {!has_submission && <p className={"px-2 py-1"}>—</p>}
-                {has_submission && isSuccess &&
+                {!hasSubmission && <p className={"px-2 py-1"}>—</p>}
+                {hasSubmission && isSuccess &&
                     <div className={"card"}><p className={"p-positive px-2 py-1"}>Success</p></div>}
-                {has_submission && !isSuccess &&
+                {hasSubmission && !isSuccess &&
                     <div className={"card"}><p className={"p-negative px-2 py-1"}>Failed</p></div>}
             </div>
         </div>