fix bug with boxes (width,bottom)

client/src/components/GetImageAndQuestion.jsx

@@ -73,33 +73,33 @@ export const QuizDataImageFromDb = [
     },
   },
   {
-    img: '../qweqweqsadqw',
+    img: '',
     boxStyle: {
       name: "",
-      top: "50%",
+      top: "",
-      left: "15%",
+      left: "",
-      height: "39%",
+      height: "",
-      width: "15.5%",
+      width: "",
   },
   boxStyle1: {
-    name1: "Dowódca 2",
+    name1: "",
-    top1: "42%",
+    top1: "",
-    left1: "32%",
+    left1: "",
-    height1: "24%",
+    height1: "",
-    width1: "18%",
+    width1: "",
   },
   boxStyle2: {
-    name2: "Dowódca 1",
+    name2: "",
-    top2: "52%",
+    top2: "",
-    left2: "49%",
+    left2: "",
-    height2: "39%",
+    height2: "",
-    width2: "14%",
+    width2: "",
   },
   boxStyle3: {
-    top2: "50%",
+    top3: "",
-    left2: "49%",
+    left3: "",
-    height2: "0",
+    height3: "",
-    width2: "0",
+    width3: "",
   },
 
   },
@@ -108,14 +108,32 @@ export const QuizDataImageFromDb = [
     img: '',
     boxStyle: {
       name: "",
-      top: "42%",
+      top: "",
-      left: "50.5%",
+      left: "",
-      height: "41%",
+      height: "",
-      width: "18%",
+      width: "",
+  },
+  boxStyle1: {
+    name1: "",
+    top1: "",
+    left1: "",
+    height1: "",
+    width1: "",
+  },
+  boxStyle2: {
+    name2: "",
+    top2: "",
+    left2: "",
+    height2: "",
+    width2: "",
+  },
+  boxStyle3: {
+    name3: "",
+    top3: "",
+    left3: "",
+    height3: "",
+    width3: "",
   },
-  boxStyle1: {},
-  boxStyle2: {},
-  boxStyle3: {},
   }
 ];
 
@@ -138,11 +156,17 @@ export const QuizGetImage = ({onPress, isClick,setButtonState}) => {
 //          TEN CAŁY KOD JEST DO REFACTORU !!!
 
 
+
+
+   
+
   let name0ArrayFromDB = [];
   let name1ArrayFromDB = [];
   let name2ArrayFromDB = [];
   let name3ArrayFromDB = [];
 
+
+
   const [name0Array] = useState([name0ArrayFromDB]);
   const [name1Array] = useState([name1ArrayFromDB]);
   const [name2Array] = useState([name2ArrayFromDB]);
@@ -233,6 +257,9 @@ useEffect(() => {
          
 
       
+
+
+
         const {caches, sideImagePath} =singleProperty;
         imageArrayFromDB.push(sideImagePath);
 
@@ -240,15 +267,8 @@ useEffect(() => {
           case 1: 
               name0ArrayFromDB.push(caches[0].cacheName);
               cacheID0ArrayFromDB.push(caches[0].cacheID);
-
-
               left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x)
               top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
-
-              cacheID0ArrayFromDB.push(caches[0].cacheID);
-
-
-
               sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x)
               sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
             
@@ -276,6 +296,7 @@ useEffect(() => {
            
           break;
           case 3: 
+          console.log('Wykonało sie 3')
             name0ArrayFromDB.push(caches[0].cacheName);
             name1ArrayFromDB.push(caches[1].cacheName);
             name2ArrayFromDB.push(caches[2].cacheName);
@@ -326,6 +347,7 @@ useEffect(() => {
 
             sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
             sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
+            sizeX2ArrayFromDB.push(caches[2].cacheRectangle.size.x);
             sizeX3ArrayFromDB.push(caches[3].cacheRectangle.size.x);
 
             sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
@@ -421,8 +443,8 @@ useEffect(() => {
         <button ref = {buttonQuiz} name = {cacheID0Array[0][index]} onClick = {onPress} className="quiz_button"  style = {{
           "width": `${sizeX0Array[0][index] * 100}%`,
           "height": `${sizeY0Array[0][index] * 100}%`,
-          "top": `${left0Array[0][index] * 100}%`,
+          "left": `${left0Array[0][index]* 100}%` !== "undefined%" ?  `${left0Array[0][index]* 100}%` : "-500%",
-          "left": `${top0Array[0][index] * 100}%` !== "undefined%" ?  `${top0Array[0][index] * 100}%` : "-300%",
+          "bottom": `${top0Array[0][index] * 100}%`,
         }}>{name0Array[0][index]}</button>
 
 
@@ -430,24 +452,24 @@ useEffect(() => {
         style = {{
           "width": `${sizeX1Array[0][index]* 100}%`,
           "height": `${sizeY1Array[0][index]* 100}%`,
-          "top": `${left1Array[0][index]* 100}%`,
+          "left": `${left1Array[0][index]* 100}%` !== "undefined%" ?  `${left1Array[0][index]* 100}%` : "-500%",
-          "left": `${top1Array[0][index]* 100}%` !== "undefined%" ?  `${top1Array[0][index]* 100}%` : "-300%",
+          "bottom": `${top1Array[0][index]* 100}%`,
         }}>{name1Array[0][index]}</button>
 
         <button ref = {buttonQuiz} name = {cacheID2Array[0][index]}  className="quiz_button" onClick = {onPress}
         style = {{
           "width": `${sizeX2Array[0][index]* 100}%`,
           "height": `${sizeY2Array[0][index]* 100}%`,
-          "top": `${left2Array[0][index]* 100}%`,
+          "left": `${left2Array[0][index]* 100}%` !== "undefined%" ?  `${left2Array[0][index]* 100}%` : "-500%",
-          "left": `${top2Array[0][index]* 100}%` !== "undefined%" ?  `${top2Array[0][index]* 100}%`  : "-300%",
+          "bottom": `${top2Array[0][index]* 100}%`,
         }}>{name2Array[0][index]}</button>
 
         <button ref = {buttonQuiz} name = {cacheID3Array[0][index]}  className="quiz_button" onClick = {onPress}
          style = {{
           "width": `${sizeX3Array[0][index]* 100}%`,
           "height": `${sizeY3Array[0][index]* 100}%`,
-          "top": `${left3Array[0][index]* 100}%`,
+          "left": `${left3Array[0][index]* 100}%` !== "undefined%" ?  `${left3Array[0][index]* 100}%` : "-500%",
-          "left": `${top3Array[0][index]* 100}%` !== "undefined%" ?  `${top3Array[0][index] * 100}%` : "-300%",
+          "bottom": `${top3Array[0][index]* 100}%`,
         }}>{name3Array[0][index]}</button>
   
 

client/src/components/QuizGetData.jsx

@@ -1,206 +0,0 @@
-import React, {useState, useEffect} from 'react';
-
-export const QuizGetData = () => {
-   
-
-
-
-
-//////////////////////////////////////////////////////////////
-/////////////////////////////////////////////////////////////////
-/////////////////////////////////////////////////////////////////////
-
-// TEN CAŁY KOD JEST DO REFACTORU 
-
-
-  let imageArrayFromDB = [];
-
-  // NAME 
-
-  let name0ArrayFromDB = [];
-  let name1ArrayFromDB = [];
-  let name2ArrayFromDB = [];
-  let name3ArrayFromDB = [];
-
-  const [name0Array] = useState([name0ArrayFromDB]);
-  const [name1Array] = useState([name1ArrayFromDB]);
-  const [name2Array] = useState([name2ArrayFromDB]);
-  const [name3Array] = useState([name3ArrayFromDB]);
-
-
-  // CACHE ID
-
-  console.log(name0ArrayFromDB, name0Array)
-
-  let cacheID0ArrayFromDB = [];
-  let cacheID1ArrayFromDB = [];
-  let cacheID2ArrayFromDB = [];
-  let cacheID3ArrayFromDB = [];
-
-  const [cacheID0Array] = useState([cacheID0ArrayFromDB]);
-  const [cacheID1Array] = useState([cacheID1ArrayFromDB]);
-  const [cacheID2Array] = useState([cacheID2ArrayFromDB]);
-  const [cacheID3Array] = useState([cacheID3ArrayFromDB]);
-
- // LEFt position
-
- let left0ArrayFromDB = [];
- let left1ArrayFromDB = [];
- let left2ArrayFromDB = [];
- let left3ArrayFromDB = [];
-
- const [left0Array] = useState([left0ArrayFromDB]);
- const [left1Array] = useState([left1ArrayFromDB]);
- const [left2Array] = useState([left2ArrayFromDB]);
- const [left3Array] = useState([left3ArrayFromDB]);
-
-
- // TOp Postion
-
- let top0ArrayFromDB = [];
- let top1ArrayFromDB = [];
- let top2ArrayFromDB = [];
- let top3ArrayFromDB = [];
-
- const [top0Array] = useState([top0ArrayFromDB]);
- const [top1Array] = useState([top1ArrayFromDB]);
- const [top2Array] = useState([top2ArrayFromDB]);
- const [top3Array] = useState([top3ArrayFromDB]);
-
-
- // Size x
-  let sizeX0ArrayFromDB = [];
-  let sizeX1ArrayFromDB = [];
-  let sizeX2ArrayFromDB = [];
-  let sizeX3ArrayFromDB = [];
-
-  const [sizeX0Array] = useState([sizeX0ArrayFromDB]);
-  const [sizeX1Array] = useState([sizeX1ArrayFromDB]);
-  const [sizeX2Array] = useState([sizeX2ArrayFromDB]);
-  const [sizeX3Array] = useState([sizeX3ArrayFromDB]);
-
-
-  // SIZe 3
-
-  let sizeY0ArrayFromDB = [];
-  let sizeY1ArrayFromDB = [];
-  let sizeY2ArrayFromDB = [];
-  let sizeY3ArrayFromDB = [];
-
-  const [sizeY0Array] = useState([sizeY0ArrayFromDB]);
-  const [sizeY1Array] = useState([sizeY1ArrayFromDB]);
-  const [sizeY2Array] = useState([sizeY2ArrayFromDB]);
-  const [sizeY3Array] = useState([sizeY3ArrayFromDB]);
-
-
-  const [myArray] = useState([imageArrayFromDB]);
- 
-    
-useEffect(() => {
-  
-  fetch(`/quiz-pages?fire-truck=${TruckId}`)
-    .then(res => res.json())
-    .then(data => {
-      const propertValuesObjectFromDb = Object.values(data);
-
-
-   
-      propertValuesObjectFromDb.forEach((singleProperty,index) => {
-
-        
-        const {caches, sideImagePath} =singleProperty;
-        imageArrayFromDB.push(sideImagePath);
-
-        switch(caches.length){
-          case 1: 
-              cachesLength0();
-            
-          break;
-          case 2: 
-            name0ArrayFromDB.push(caches[0].cacheName);
-            name1ArrayFromDB.push(caches[1].cacheName);
-
-
-          cacheID0ArrayFromDB.push(caches[0].cacheID);
-          cacheID1ArrayFromDB.push(caches[1].cacheID);
-        
-
-            left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x)
-            left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x)
-
-            top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
-            top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
-
-            sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
-            sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
-
-            sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
-            sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
-           
-          break;
-          case 3: 
-            name0ArrayFromDB.push(caches[0].cacheName);
-            name1ArrayFromDB.push(caches[1].cacheName);
-            name2ArrayFromDB.push(caches[2].cacheName);
-
-
-            cacheID0ArrayFromDB.push(caches[0].cacheID);
-            cacheID1ArrayFromDB.push(caches[1].cacheID);
-            cacheID2ArrayFromDB.push(caches[2].cacheID);
-
-            left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x);
-            left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x);
-            left2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.x);
-
-            top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
-            top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
-            top2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.y);
-
-
-            sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
-            sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
-            sizeX2ArrayFromDB.push(caches[2].cacheRectangle.size.x);
-
-            sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
-            sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
-            sizeY2ArrayFromDB.push(caches[2].cacheRectangle.size.y)
-        break;
-        case 4: 
-            name0ArrayFromDB.push(caches[0].cacheName);
-            name1ArrayFromDB.push(caches[1].cacheName);
-            name2ArrayFromDB.push(caches[2].cacheName);
-            name3ArrayFromDB.push(caches[3].cacheName);
-
-            cacheID0ArrayFromDB.push(caches[0].cacheID);
-            cacheID1ArrayFromDB.push(caches[1].cacheID);
-            cacheID2ArrayFromDB.push(caches[2].cacheID);
-            cacheID3ArrayFromDB.push(caches[3].cacheID);
-
-            left0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.x);
-            left1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.x);
-            left2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.x);
-            left3ArrayFromDB.push(caches[3].cacheRectangle.leftBottomPoint.x);
-
-            top0ArrayFromDB.push(caches[0].cacheRectangle.leftBottomPoint.y);
-            top1ArrayFromDB.push(caches[1].cacheRectangle.leftBottomPoint.y);
-            top2ArrayFromDB.push(caches[2].cacheRectangle.leftBottomPoint.y);
-            top3ArrayFromDB.push(caches[3].cacheRectangle.leftBottomPoint.y);
-
-
-            sizeX0ArrayFromDB.push(caches[0].cacheRectangle.size.x);
-            sizeX1ArrayFromDB.push(caches[1].cacheRectangle.size.x);
-            sizeX3ArrayFromDB.push(caches[3].cacheRectangle.size.x);
-
-            sizeY0ArrayFromDB.push(caches[0].cacheRectangle.size.y)
-            sizeY1ArrayFromDB.push(caches[1].cacheRectangle.size.y)
-            sizeY2ArrayFromDB.push(caches[2].cacheRectangle.size.y)
-            sizeY3ArrayFromDB.push(caches[3].cacheRectangle.size.y)
-
-         break;
-        }
-
-      });
-    })
-  })
-
-}