[Upd #71] Added new custom legend component

kbss-cvut · Oct 4, 2022 · 0259c5e · 0259c5e
1 parent 2356ebe
commit 0259c5e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 27 deletions.
diff --git a/src/assets/PlanningTool.css b/src/assets/PlanningTool.css
@@ -66,18 +66,6 @@
   margin-right: 1.3rem;
 }
 
-.explanatory-notes .note .color.scheduled-wo {
-  background-color: #aa0000;
-}
-
-.explanatory-notes .note .color.task-card {
-  background-color: #00aa00;
-}
-
-.explanatory-notes .note .color.maintenance-wo {
-  background-color: #0000aa;
-}
-
 .static-item:after {
   content: '';
   display: block;

diff --git a/src/components/Legend.jsx b/src/components/Legend.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+const Legend = ({ title, legendItems }) => {
+  return (
+    <div className="explanatory-notes">
+      <h3>{title}</h3>
+      <React.Fragment>
+        {legendItems.map((item, index) => {
+          return (
+            <div key={index} className="note">
+              <span
+                className="color"
+                style={{ backgroundColor: `${item.color}` }}
+              ></span>
+              {item.name}
+            </div>
+          );
+        })}
+      </React.Fragment>
+    </div>
+  );
+};
+
+export default Legend;
diff --git a/src/components/PlanningTool.jsx b/src/components/PlanningTool.jsx
@@ -15,6 +15,7 @@ import Popup from './Popup'
 import Modal from './Modal'
 import EditItemModal from './EditItemModal'
 import Constants from '../constants/Constants'
+import Legend from "./Legend";
 
 const keys = {
   groupIdKey: "id",
@@ -1627,21 +1628,7 @@ class PlanningTool extends Component {
             }
           </Timeline>
           <div className="explanatory-notes-container">
-            <div className="explanatory-notes">
-              <h3>Task types</h3>
-              <div className="note">
-                <span className="color scheduled-wo"/>
-                Scheduled_wo
-              </div>
-              <div className="note">
-                <span className="color task-card"/>
-                Task_card
-              </div>
-              <div className="note">
-                <span className="color maintenance-wo"/>
-                Maintenance_wo
-              </div>
-            </div>
+            <Legend legendItems={this.props.legendItems} title="Legend" />
             {this.renderPopup(popup)}
             {/*undo redo*/}
             <div className="action-buttons">
@@ -1710,6 +1697,10 @@ PlanningTool
     date: PropTypes.instanceOf(moment).isRequired,
     label: PropTypes.string,
     color: PropTypes.string,
+  })),
+  legendItems: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string
   }))
 }
 
@@ -1734,5 +1725,19 @@ PlanningTool
   ],
   groups: [],
   popup: Popup,
+  legendItems: [
+      {
+        name: "scheduled_wo",
+        color: "red"
+      },
+    {
+      name: "maintenance_wo",
+      color: "green"
+    },
+    {
+      name: "task group",
+      color: "blue"
+    }
+    ]
 }
 export default PlanningTool