updated dashboard for space

frontend/src/css/space_overview.css

@@ -4,4 +4,140 @@
     position: relative;
     margin-bottom: 1%;
     padding: 1%;
-}
+}
+
+/* have card that pops out when hovered over and that has a min width of 320px /3 */
+.card_td {
+    padding: 10%;
+    min-width: 105px;  
+    min-height: 150px;
+    height: 30vw; 
+    max-height: 50vh;
+    border: 2px solid #2c3e5055;
+    border-radius: 20px;
+    background-color: #91cedf33;
+}
+
+.card_td:hover {
+    border: 2px solid #ccc;
+    border-radius: 20px;
+    box-shadow: 0 4px 8px 0 #2c3e5055, 0 6px 20px 0 #2c3e5055;
+    background-color: #91cedf55;
+}
+
+.card_row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 320px;
+}
+
+/* class that will display checkmark svg */
+.checkmark {
+    background-image: url('../static/checkmark-circle.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 30%;
+    animation: pulsate-opacity 1.5s ease-in-out infinite alternate forwards;
+}
+
+.checkmark:hover {
+    animation-play-state: paused;
+}
+
+.cross-red {
+    background-image: url('../static/cross-circle-red.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 30%;
+    animation: pulsate-opacity 1.5s ease-in-out infinite alternate forwards;
+}
+
+/* pause animation */
+.cross-red:hover {
+    animation-play-state: paused;
+}
+
+.cross-orange {
+    background-image: url('../static/cross-circle-orange.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 30%;
+    animation: pulsate-opacity 1.5s ease-in-out infinite alternate forwards;
+}
+
+.cross-orange:hover {
+    animation-play-state: paused;
+}
+
+.checkmark-orange {
+    background-image: url('../static/checkmark-circle-orange.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 30%;
+    animation: pulsate-opacity 1.5s ease-in-out infinite alternate forwards;
+}
+
+.checkmark-orange:hover {
+    animation-play-state: paused;
+}
+
+.git {
+    background-image: url('../static/git-svgrepo-light.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 60%;
+}
+
+.git:hover {
+    background-image: url('../static/git-svgrepo-dark.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 60%;
+}
+
+.ship {
+    background-image: url('../static/oceanic-cargo-ship-global-distribution-light.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 60%;
+}
+
+.ship:hover {
+    background-image: url('../static/oceanic-cargo-ship-global-distribution-dark.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 60%;
+}
+
+.ship-non-clickable {
+    background-image: url('../static/oceanic-cargo-ship-global-distribution-light.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 60%;
+    cursor: default;
+    pointer-events: none;
+}
+
+.publication-message-text {
+    color:black;
+}
+
+/*make animation that will alternate opacity and backgrouund size when hovered over */
+@keyframes pulsate-opacity {
+    0% {
+        background-size: 30%;
+    }
+    50% {
+        background-size: 40%;
+    }
+    100% {
+        background-size: 30%;
+    }
+}
+
+
+
+
+

frontend/src/pages/space_overview.js

@@ -5,6 +5,7 @@ import {BASE_URL_SERVER} from '../App.js';
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
 import { Doughnut } from 'react-chartjs-2';
 import ReactLoading from 'react-loading';
+import '../css/space_overview.css';
 function SpaceOverviewPage() {
 
     //define all constants first
@@ -13,6 +14,8 @@ function SpaceOverviewPage() {
     const [ShaclSummary, SetShaclSummary] = useState({});
     const [ShaclOverview, SetShaclOverview] = useState([{}]);
     const [Loading, setLoading] = useState(true); 
+    const [DoughnutSvg, SetDoughnutSvg] = useState('');
+    const [PublicationSvg, SetPublicationSvg] = useState('');
     const [ShaclErrors, SetShaclErrors] = useState(0);
     const [Graphdata, SetGraphdata] = useState({});
 
@@ -48,7 +51,10 @@ function SpaceOverviewPage() {
                 console.log(shacl_requirements);
                 SetShaclOverview(shacl_requirements);
                 SetShaclSummary(res.data.summary);
-                console.log(res.data.summary["red"]);
+                //determine aextra css properties for the svgs
+                if (res.data.summary["green"] == 100){SetDoughnutSvg("checkmark");SetPublicationSvg("ship");}
+                if (res.data.summary["red"] > 0){SetDoughnutSvg("cross-red");SetPublicationSvg("ship-non-clickable");}
+                if (res.data.summary["red"] == 0 && res.data.summary["green"] != 100){SetDoughnutSvg("checkmark-orange");SetPublicationSvg("ship");}
                 //set graphdata
                 SetGraphdata(
                     {
@@ -81,6 +87,26 @@ function SpaceOverviewPage() {
 
     }
 
+    const PublicationMessage = () => {
+      if(PublicationSvg == "ship-non-clickable"){
+        return(
+          <div className="publication-message">
+            <div className="publication-message-text">
+              <b>Fix errors before publishing</b>
+            </div>
+          </div>
+        )
+      }else{
+        return(
+          <div className="publication-message">
+            <div className="publication-message-text">
+              <p>Publish</p>
+            </div>
+          </div>
+        )
+      }
+    }
+
     useEffect(() => {
         fetchShaclOverview();
     }, [])
@@ -94,14 +120,21 @@ function SpaceOverviewPage() {
     }else{
         return (
             <div>
-                <h1>TODO: dashboard space </h1>
-                <ol>
-                    <li>semantic progress overview</li>
-                    <li>git overview</li>
-                    <li>publish overview</li>
-                </ol>
-                <a href={`/spaces/${SpaceId}/all_files`}>see all files</a>
-                <div><Doughnut data={Graphdata} width="200px" height="200px" options={{maintainAspectRatio:false, plugins:{legend:{display:false}}}}/></div>
+                <br />
+                <table style={{width:"100%"}}>
+                  <tr className='card_row'>
+                    <td style={{width:"33%"}}>
+                      <a href={`/spaces/${SpaceId}/all_files`}><div className={'card_td ' + DoughnutSvg}><Doughnut data={Graphdata} width="15px" height="15px" options={{maintainAspectRatio:false, plugins:{legend:{display:false}}}}/></div></a>
+                    </td>
+                    <td style={{width:"33%"}}>
+                      <a href={`/spaces/${SpaceId}/git`}><div className='card_td git'></div></a>
+                    </td>
+                    <td style={{width:"33%"}}>
+                      <a href={`/`} className={PublicationSvg}><div className={'card_td ' + PublicationSvg}><PublicationMessage/></div></a>
+                    </td>
+                  </tr>
+                </table>
+
 
             </div>
         )