feat/ color cell

hackathon-Gazprom · Aug 10, 2024 · 442107e · 442107e
1 parent 99dfbc3
commit 442107e
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 53 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -81,7 +81,7 @@ export default function App() {
     const dropTarget = e.currentTarget;
     const dropTargetRect = dropTarget.getBoundingClientRect();
 
-    const cellWidth = 300;
+    const cellWidth = 355;
     const cellHeight = 157;
 
     const columnIndex = Math.floor(

diff --git a/src/pages/Main/Main.module.scss b/src/pages/Main/Main.module.scss
@@ -9,4 +9,10 @@
   grid-template-columns: repeat(3, 300px);
   gap: 24px;
   position: relative;
+}
+
+.cell {
+  // background-color: lightgray; 
+  width: 100%;
+  border-radius: $border-radius-s;
 }
diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
@@ -3,7 +3,7 @@ import styles from 'src/pages/Main/Main.module.scss';
 import { useOutletContext } from 'react-router-dom';
 import { initialCardsProps } from 'src/services/types';
 import Arrow from 'src/ui/Arrow/Arrow';
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 export default function Main() {
   const { allowDrop, handleDrop, cards } = useOutletContext<{
@@ -12,38 +12,24 @@ export default function Main() {
     cards: initialCardsProps[];
   }>();
 
-  // const [allCards, setAllCards] = useState<initialCardsProps[]>([]);
-
-  // useEffect(() => {
-  //   const collectCards = (card: initialCardsProps, collected: initialCardsProps[]) => {
-  //     collected.push(card);
-  //     card.subordinates.forEach((subordinate) => collectCards(subordinate, collected));
-  //   };
-
-  //   const newAllCards: initialCardsProps[] = [];
-  //   cards.forEach((card) => collectCards(card, newAllCards));
-
-  //   setAllCards(newAllCards);
-  // }, [cards]);
-
-  const allCards: initialCardsProps[] = [];
-
-  const collectCards = (card: initialCardsProps) => {
-    allCards.push(card);
-    if (card.subordinates) {
-      card.subordinates.forEach(collectCards);
-    }
-  };
-
-  cards.forEach(collectCards);
+  const [allCards, setAllCards] = useState<initialCardsProps[]>([]);
+  const [arrows, setArrows] = useState<JSX.Element[]>([]);
+  const occupiedCells = allCards.map(card => card.cellId);
+  const freeCells = ['0-1', '1-1', '2-1'];
 
   const renderCards = (card: initialCardsProps) => {
+    console.log('allCards: ', allCards);
     const [col, row] = card.cellId.split('-').map(Number);
+    const isOccupied = occupiedCells.includes(card.cellId); // Проверяем, занята ли ячейка
+    const isFreeCell = freeCells.includes(card.cellId); // Проверяем, свободная ли ячейка
     return (
       <div
         key={card.id}
         data-cell-id={card.id}
-        style={{ gridColumn: col + 1, gridRow: row + 1 }}
+        className={styles.cell}
+        style={{ gridColumn: col + 1, gridRow: row + 1,
+          backgroundColor: isOccupied ? 'lightgray' : (isFreeCell ? 'green' : 'yelow'),
+         }}
       >
         <Card
           id={card.id}
@@ -58,16 +44,18 @@ export default function Main() {
   };
 
   const renderArrows = () => {
-    return allCards.map((card) => {
-      const parentCard = cards.find((item) => item.id === card.parentId);
-      console.log('parentCard: ', parentCard);
+    const newArrows = allCards.map((card) => {
+      const parentCard = allCards.find((item) => item.id === card.parentId);
 
       if (parentCard) {
-        const parentElement = document.querySelector(`[data-cell-id="${parentCard.id}"]`);
-        const childElement = document.querySelector(`[data-cell-id="${card.id}"]`);
-
-             if (parentElement && childElement) {
-          console.log('parentElement: ', parentElement);
+        const parentElement = document.querySelector(
+          `[data-cell-id="${parentCard.id}"]`
+        ) as HTMLElement;
+        const childElement = document.querySelector(
+          `[data-cell-id="${card.id}"]`
+        ) as HTMLElement;
+
+        if (parentElement && childElement) {
           const from = {
             x: parentElement.offsetLeft + parentElement.offsetWidth / 2,
             y: parentElement.offsetTop + parentElement.offsetHeight,
@@ -90,22 +78,38 @@ export default function Main() {
       }
       return null;
     });
+    setArrows(
+      newArrows.filter((arrow): arrow is JSX.Element => arrow !== null)
+    );
   };
 
+  useEffect(() => {
+    const collectCards = (
+      card: initialCardsProps,
+      collected: initialCardsProps[]
+    ) => {
+      collected.push(card);
+      card.subordinates.forEach((subordinate) =>
+        collectCards(subordinate, collected)
+      );
+    };
+    const newAllCards: initialCardsProps[] = [];
+    cards.forEach((card) => collectCards(card, newAllCards));
+    setAllCards(newAllCards);
+  }, [cards]);
+
+  useLayoutEffect(() => {
+    if (allCards.length > 0) {
+      renderArrows();
+    }
+  }, [allCards]);
+
   return (
     <section className={styles.main} onDragOver={allowDrop} onDrop={handleDrop}>
       <div className={styles.cardContainer}>
         {allCards.map((card) => renderCards(card))}
-        {renderArrows()}
+        {arrows}
       </div>
     </section>
   );
 }
-
-
-// const parentElement = document.getElementById(parentCard.id);
-// const childElement = document.getElementById(card.id);
-
-
-// const parentElement = document.querySelector(`[data-cell-id="${parentCard.id}"]`);
-// const childElement = document.querySelector(`[data-cell-id="${card.id}"]`);
diff --git a/src/services/mock.ts b/src/services/mock.ts
@@ -16,7 +16,18 @@ export const initialCards = [
       //   photo: 'https://example.com/photo1.jpg',
       //   parentId: '',
       //   cellId: '1-1',
-      //   subordinates: [],
+      //   subordinates: [
+      //     {
+      //       id: '1211',
+      //       name: 'Иван',
+      //       position: 'Разработчик',
+      //       title: 'Frontend Developer',
+      //       photo: 'https://example.com/photo1.jpg',
+      //       parentId: '',
+      //       cellId: '1-1',
+      //       subordinates: [],
+      //     },
+      //   ],
       // },
     ],
   },

diff --git a/src/ui/Arrow/Arrow.tsx b/src/ui/Arrow/Arrow.tsx
@@ -6,10 +6,6 @@ interface ArrowProps {
 }
 
 const Arrow = ({ startX, startY, endX, endY }: ArrowProps) => {
-  // console.log('startY: ', startY);
-  // console.log('startX: ', startX);
-  // console.log('endX: ', endX);
-  // console.log('endY: ', endY);
 
   const arrowHeadSize = 11;
   const angle = Math.atan2(endY - startY, endX - startX);
@@ -25,30 +21,30 @@ const Arrow = ({ startX, startY, endX, endY }: ArrowProps) => {
     <svg
     width={svgWidth}
     height={svgHeight}
-      style={{ position: 'absolute', pointerEvents: 'none', zIndex: '10' }}
+      style={{ position: 'absolute', pointerEvents: 'none' }}
     >
       <line
         x1={startX}
         y1={startY}
         x2={endX}
         y2={endY}
-        stroke='gray'
+        stroke='#8c8c8c'
         strokeWidth='2'
       />
       <line
         x1={endX}
         y1={endY}
         x2={arrowX1}
         y2={arrowY1}
-        stroke='gray'
+        stroke='#8c8c8c'
         strokeWidth='2'
       />
       <line
         x1={endX}
         y1={endY}
         x2={arrowX2}
         y2={arrowY2}
-        stroke='gray'
+        stroke='#8c8c8c'
         strokeWidth='2'
       />
     </svg>