Permit UI Code



{"L01":{"slots":{"L01S01":{"t":"390.33px","l":"193.142px","c":"black"},"L01S02":{"t":"402.187px","l":"193.571px","c":"black"},"L01S03":{"t":"414.044px","l":"193.999px","c":"black"},"L01S04":{"t":"425.901px","l":"194.428px","c":"black"},"L01S05":{"t":"437.759px","l":"194.857px","c":"black"},"L01S06":{"t":"449.616px","l":"195.285px","c":"black"},"L01S07":{"t":"461.473px","l":"195.714px","c":"black"},"L01S08":{"t":"473.33px","l":"196.142px","c":"black"}},"details":{"h":"33.34px","w":"5.71543px","r":"57.93deg"},"status":"ACTIVE","filter":{"ct_type":"general_cargo"}}}





import React, { useEffect, useState, useContext } from 'react';
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import { MainPageContext } from "../mainPageContext"
import axios from "../../../config/axios/axios"

export default function YardMap(props) {

  const mainPageContext = useContext(MainPageContext)

  let zoomFactor
  let parentWidth
  let parentHeight
  let orgImgWidth
  let orgImgHeight

  const createYardMap = (url, divId) => {

    var img = new Image();
    img.onload = function () {
      orgImgWidth = this.width
      orgImgHeight = this.height
      document.getElementById(divId).style.width = "100%"
      document.getElementById(divId).style.height = "100%"

      // if (this.width > this.height) {
      //     document.getElementById(divId).style.width = "100%"
      //     document.getElementById(divId).style.height = `${(this.height / this.width) * 100}%`

      // }
      // if (this.width < this.height) {
      //     document.getElementById(divId).style.height = "100%"
      //     document.getElementById(divId).style.width = `${(this.width / this.height) * 100}%`

      // }
      document.getElementById(divId).style.backgroundImage = `url(${url})`
      parentWidth = document.getElementById(divId).offsetWidth
      parentHeight = document.getElementById(divId).offsetHeight
      if (parentWidth > parentHeight) {
        document.getElementById("yardImgContainer").style.height = `${(document.getElementById("yardImgContainer").offsetWidth - 2 * parseFloat(document.getElementById("yardImgContainer").style.borderWidth.slice(0, -2))) * (orgImgHeight / orgImgWidth)}px`
        zoomFactor = parentWidth / orgImgWidth
      } else {




        document.getElementById("yardImgContainer").style.width = `${(document.getElementById("yardImgContainer").offsetHeight - 2 * parseFloat(document.getElementById("yardImgContainer").style.borderWidth.slice(0, -2))) * ((orgImgWidth) / orgImgHeight)}px`
        // alert(document.getElementById("yardImgContainer").offsetHeight * (parentWidth / parentHeight))

        zoomFactor = parentHeight / orgImgHeight
      }
      fillTrucksInYard()
    }
    img.src = url;
  }

  const fillTrucksInYard = () => {
    for (const key in jsonFile) {
      if (Object.hasOwnProperty.call(jsonFile, key)) {
        const element = jsonFile[key];

        let r = parseFloat(element.details.r.slice(0, -3));
        let h = parseFloat(element.details.h.slice(0, -2));
        let w = parseFloat(element.details.w.slice(0, -2));

        let slots = element.slots;

        for (const elemntKey in slots) {
          if (Object.hasOwnProperty.call(slots, elemntKey)) {
            const slot = slots[elemntKey];
            let slot_id = elemntKey;
            let l = parseFloat(slot.l.slice(0, -2));
            let t = parseFloat(slot.t.slice(0, -2));
            createTruck("yardImage", slot_id, w, h, t, l, r, "black")
          }
        }
      }
    }
  }

  const createTruck = (parentID, id, width, height, top, left, rotate, color) => {


    width = width * zoomFactor
    height = height * zoomFactor
    top = top * zoomFactor
    left = left * zoomFactor

    let truckDiv = document.createElement("div")

    truckDiv.style.backgroundColor = color
    truckDiv.id = id
    truckDiv.style.left = `${left}px`
    truckDiv.style.top = `${top}px`
    truckDiv.style.height = `${height}px`
    truckDiv.style.width = `${width}px`
    truckDiv.style.rotate = `${rotate}deg`
    truckDiv.style.position = "absolute"

    document.getElementById(parentID).appendChild(truckDiv)
  }

  const [jsonFile, setJsonFile] = useState(null)

  useEffect(() => {

    if (mainPageContext.locationsInManifest) {
      let params = {
        method: "getYardBluePrint",
        url: `${mainPageContext.locationsInManifest.yards[props.yardID].blue_print_url}`
      }
      axios.get("/permit", { params: params }).then(res => {
        if(Object.entries(mainPageContext.yardsOccupiedLocations[props.yardID])[0][1] == "show"){
          Object.entries(mainPageContext.yardsOccupiedLocations[props.yardID])[0][0]
        }
        
      }).catch(error => {
        console.log(error, "error")
      })

      createYardMap(props.yardImgSRC, "yardImage")

    }
  }, [])
  return (
    <div id="yardImgContainer" style={{ width: `${props.width}px`, height: `${props.height}px`, border: "8px solid red", backgroundColor: "red" }}>
      <div id="yardImage" style={{ backgroundSize: "contain", backgroundRepeat: "no-repeat", position: "relative" }}>

      </div>
    </div>
  )
}