[New #94] Add aircraft model in the header

src/components/Legend.module.scss

@@ -7,6 +7,10 @@
   height: 100%;
 }
 
+.legend-title {
+  color: #263238;
+}
+
 .item {
   display: flex;
   align-items: center;

src/components/Legend.tsx

@@ -36,7 +36,7 @@ const Legend = ({ title, items, onSelectLegendItem }: Props) => {
 
   return (
     <div className={styles["container"]}>
-      <h3>{title}</h3>
+      <h3 className={styles["legend-title"]}>{title}</h3>
       <>
         {items.map((legendItem, index) => {
           return (

src/components/PlanEditor.module.scss

@@ -1,3 +1,8 @@
+h3, h4 {
+  color: white;
+  padding: .5rem;
+}
+
 .container {
   display: flex;
   flex-direction: column;
@@ -18,11 +23,6 @@
     }
   }
 
-  h4 {
-    color: white;
-    padding: .5rem;
-  }
-
   .header {
     display: flex;
     flex-direction: column;

src/components/PlanEditor.tsx

@@ -7,6 +7,7 @@ import {
   pushResourcesToTaskList,
   getRestrictedTasks,
   pushRestrictionsToTaskList,
+  getAircraftModel,
 } from "../utils/Utils";
 import Legend from "./Legend";
 import Tooltip from "./Tooltip";
@@ -43,6 +44,7 @@ const PlanEditor = ({
   >([]);
   const [filteredTaskTypes, setFilteredTaskTypes] = useState<Array<string>>([]);
   const [unplannedTasksCount, setUnplannedTasksCount] = useState<number>(0);
+  const [aircraftModel, setAircraftModel] = useState<string | null>();
 
   const workPackageItems: Array<PlanPartInterface> = [];
   const taskListWithResources: Array<PlanPartInterface> = [];
@@ -92,6 +94,13 @@ const PlanEditor = ({
     );
   };
 
+  useEffect(() => {
+    const acmodel = getAircraftModel(taskList);
+    if (acmodel) {
+      setAircraftModel(acmodel.taskType.acmodel);
+    }
+  }, [taskList]);
+
   const showPopUp = () => {
     if (!isFullScreen) {
       return { ["--display" as string]: "none" };
@@ -141,7 +150,8 @@ const PlanEditor = ({
 
       {isActive.planEditor && taskList.length > 0 && taskList && (
         <div style={showPopUp()}>
-          <h4>{workPackageTitle}</h4>
+          <h3>{workPackageTitle}</h3>
+          {aircraftModel && <h4>Aircraft Model: {aircraftModel}</h4>}
           <div className={styles["editor-container"]}>
             <div className={styles["editor"]}>
               <PlanningTool

src/utils/Utils.ts

@@ -38,6 +38,10 @@ const getItemTitle = (items, item, itemParentId) => {
   return item.title;
 };
 
+const getAircraftModel = (items) => {
+  return items.find((i) => i.taskType?.acmodel);
+};
+
 const pushItem = (
   items: Array<any>,
   itemId: number,
@@ -247,4 +251,5 @@ export {
   pushResourcesToTaskList,
   getRestrictedTasks,
   pushRestrictionsToTaskList,
+  getAircraftModel,
 };