[New] Add status of wp + add logo

kbss-cvut · Apr 1, 2022 · b8c06a3 · b8c06a3
1 parent d73651c
commit b8c06a3
Show file tree

Hide file tree

Showing 12 changed files with 763 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "axios": "^0.26.1",
+    "classnames": "^2.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>CSAT Maintenance Planner</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "CSAT Maintenance Planner",
+  "name": "CSAT Maintenance Planner",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/Constants.ts b/src/Constants.ts
@@ -2,7 +2,7 @@ const Constants = {
   API: "/api",
   CSAT_PLANNING_URL: "https://kbss.felk.cvut.cz/csat",
   CSAT_PLANNING_WORKPACKAGES_LIST_URL: "/workpackages/list",
-  CSAT_PLANNING_WORKPACKAGE_DASHBOARD: "/dashboard.html?wp="
+  CSAT_PLANNING_WORKPACKAGE_DASHBOARD: "/dashboard.html?wp=",
 };
 
 export default Constants;
diff --git a/src/components/WorkPackage.module.scss b/src/components/WorkPackage.module.scss
@@ -9,5 +9,5 @@
 }
 
 .header {
-  padding: 3rem;
+  border-bottom: white solid 2px;
 }
diff --git a/src/components/WorkPackage.tsx b/src/components/WorkPackage.tsx
@@ -45,10 +45,13 @@ const WorkPackage = () => {
   return (
     <div className={styles.container}>
       <div className={styles.header}>
-        <h1>Czech Airlines Techniques</h1>
+        <img
+          alt="CSAT logo"
+          src="https://www.csatechnics.com/img/lower-logo.png"
+        />
       </div>
-
-      <h2>List work packages: </h2>
+      <br />
+      <h2>Available Dashboards</h2>
       {renderWorkPackageList()}
     </div>
   );

diff --git a/src/components/WorkPackageList.module.scss b/src/components/WorkPackageList.module.scss
@@ -1,12 +1,30 @@
 .workPackageItems {
   overflow-y: scroll;
-  padding: 1rem;
+  padding: 1rem 1rem;
 }
 
 .workPackageItem {
-  padding: 1rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+
   a:hover {
-    transition: .3s;
+    transition: 0.3s;
     opacity: 20%;
   }
-}
+
+  &.wp-progress-status-AOS {
+    color: #00b050;
+  }
+  &.wp-progress-status-BS {
+    color: #b70d00;
+  }
+  &.wp-progress-status-OS {
+    color: #00b050;
+  }
+  &.wp-progress-status-ROD {
+    color: #ff6d34;
+  }
+  &.wp-progress-status-C {
+    color: #c2c2c2;
+  }
+}
diff --git a/src/components/WorkPackageList.tsx b/src/components/WorkPackageList.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { WorkPackageInterface } from "../utils/Interfaces";
 import Constants from "../Constants";
+import classNames from "classnames/bind";
 
 import styles from "./WorkPackageList.module.scss";
 
@@ -9,12 +10,22 @@ interface Props {
 }
 
 const WorkPackageList = ({ workPackageList }: Props) => {
+  const applyProgressStatusClass = (workPackage: WorkPackageInterface) => {
+    const progressStatus = workPackage.progressStatus.toUpperCase();
+    return "wp-progress-status-" + progressStatus;
+  };
+
+  const cn = classNames.bind(styles);
+
   return (
     <ul className={styles.workPackageItems}>
       {workPackageList.map((workPackage: WorkPackageInterface) => (
         <li
           key={workPackage.objectIdentifier}
-          className={styles.workPackageItem}
+          className={cn(
+            "workPackageItem",
+            applyProgressStatusClass(workPackage)
+          )}
         >
           <a
             target="_blank"

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,7 +1,7 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    text-decoration: none;
-    color: white;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+  color: white;
 }
diff --git a/src/utils/Interfaces.ts b/src/utils/Interfaces.ts
@@ -1,9 +1,9 @@
 export interface WorkPackageInterface {
-    endTime: string;
-    identifier: string;
-    objectIdentifier: string;
-    progressStatus: string;
-    scheduledEndTime: string;
-    scheduledStartTime: string;
-    startTime: string;
-}
+  endTime: string;
+  identifier: string;
+  objectIdentifier: string;
+  progressStatus: string;
+  scheduledEndTime: string;
+  scheduledStartTime: string;
+  startTime: string;
+}