Merge pull request #65 from SELab-2/project-cards

Project cards

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;
+}
+
+.p-positive {
+    color: green;
+}

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>

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>
         </>

frontend/src/pages/student/ProjectCardStudent.tsx

@@ -0,0 +1,35 @@
+import {JSX} from "react";
+
+
+export default function ProjectCardStudent(): JSX.Element {
+    // 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 (
+        <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>
+                {!hasSubmission && <p className={"px-2 py-1"}>—</p>}
+                {hasSubmission && isSuccess &&
+                    <div className={"card"}><p className={"p-positive px-2 py-1"}>Success</p></div>}
+                {hasSubmission && !isSuccess &&
+                    <div className={"card"}><p className={"p-negative px-2 py-1"}>Failed</p></div>}
+            </div>
+        </div>
+    )
+}
+
+
+