{"id":25007,"date":"2024-01-27T03:24:41","date_gmt":"2024-01-27T03:24:41","guid":{"rendered":"https:\/\/prodapproval.com\/?page_id=25007"},"modified":"2024-01-27T03:32:44","modified_gmt":"2024-01-27T03:32:44","slug":"start-new-form","status":"publish","type":"page","link":"https:\/\/prodapproval.com\/index.php\/start-new-form\/","title":{"rendered":"Start New Form"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"25007\" class=\"elementor elementor-25007\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e53e4c8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e53e4c8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-89fea3e\" data-id=\"89fea3e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4193c67 elementor-widget elementor-widget-html\" data-id=\"4193c67\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"https:\/\/html2canvas.hertzen.com\/dist\/html2canvas.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.5.25\/jspdf.plugin.autotable.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/require.js\/2.3.6\/require.min.js\"><\/script>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\ninput{\r\n  box-sizing: border-box;\r\n}\r\ndatalist option { \r\n  word-wrap: break-word;\r\n\/*   \r\n  -moz-white-space: pre-wrap;\r\n  -o-white-space: pre-wrap;\r\n  white-space: pre-wrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; *\/\r\n}\r\ntable, th, td {\r\n  border:1px solid black;\r\n  font-size: 12px;\r\n  \r\n  border-collapse: collapse;\r\n}\r\n.wrap-loc{\r\n  text-align: center;\r\n  display: inline-block;\r\n\r\n}\r\ntable, .button-div, .wrap-wrap-loc{\r\n  max-width: 1465px;\r\n  align-content: center;\r\n  margin: auto;\r\n}\r\n.manufacturer-select, .description-select{\r\n\r\n  max-height: 300px; \/* Set the maximum height *\/\r\n  max-width: 700px;\r\n  \/* min-width: 300;\r\n  min-height: 100; *\/\r\n  height: auto;\r\n  width: auto;\r\n  overflow-y: auto; \r\n  overflow-x: auto; \r\n}\r\n.message{\r\n  max-width: 1465px;\r\n  margin: auto;\r\n}\r\n\r\nselect{\r\n  \r\n  width: 100%;\r\n}\r\n.other{\r\n  width: 100%;\r\n  \r\n}\r\n\r\ntd:nth-child(1){\r\n  width: 450px;\r\n} \r\ntd:nth-child(2), td:nth-child(3) {\r\n        width: 330px;\r\n}\r\ntd:nth-child(4), td:nth-child(5), td:nth-child(6) {\r\n  width: 140px;\r\n}\r\n.wind, .design, .approval, .description, .manufacturer{\r\n  width: 100%;\r\n  direction:ltr;\r\n  overflow:hidden;\r\n}\r\n.header{\r\n  font-weight: bold;\r\n  font-size: 14pt;\r\n}\r\n.catagory{\r\n  display: inline-block;\r\n  font-weight: bold;\r\n  font-size: large;\r\n}\r\n.plus-button{\r\n  float: right;\r\n  \/* display: inline-block; *\/\r\n  \/* height: 20px; *\/\r\n  \/* font-size: 20pt; *\/\r\n  \/* margin: auto; *\/\r\n  margin-top: 2px;\r\n  \r\n}\r\n.catagory-text{\r\n  display: inline-block;\r\n  font-weight: bold;\r\n  font-size: large;\r\n  padding-right: 5px;\r\n}\r\n.catagory-row{\r\n  background-color: rgb(233, 236, 236);\r\n}\r\n.subcatagory{\r\n  display: inline-block;\r\n}\r\n.subcatagory-text{\r\n  display: inline-block;\r\n  padding-right: 4px;\r\n\r\n}\r\n\r\n.loc-pro{\r\n  display:inline-block;\r\n\r\n}\r\n.first{\r\n  padding: 0px 60px;\r\n}\r\n.title{\r\n  text-align: center;\r\n}\r\n.location{\r\n\r\n  width: 330px;\r\n}\r\n.project{\r\n  width: 330px;\r\n}\r\n.second{\r\n  margin-left: 50px;\r\n}\r\n<\/style>\r\n<script>\r\nasync function getData(url) {\r\n  const response = await fetch(url);\r\n\r\n  return response.json();\r\n}\r\n\r\n  window.jsPDF = window.jspdf.jsPDF;\r\n  let INFO;\r\n  window.onload = function() {\r\n    fetch(\"output.json\").then(\r\n        function(u){ return u.json();}\r\n      ).then(\r\n        function(json){\r\n          INFO = json;\r\n          loadData()\r\n        }\r\n      )\r\n  }\r\n  var letters = [\"A\",\"B\",\"C\",\"D\",\"E\",\"F\",\"G\",\"H\",\"I\",\"J\",\"K\",\"L\",\"M\",\"N\",\"O\",\"P\",\"Q\",\"R\",\"S\",\"T\",\"U\",\"V\",\"W\",\"X\",\"Y\",\"Z\"]\r\n\r\n  function manufacturerSelectListener(){\r\n    const select = event.target.parentElement;\r\n    if(select.tagName != \"SELECT\") return;\r\n    const currentInput = select.previousElementSibling;\r\n    console.log(event.target, select);\r\n    \r\n    select.style.display = 'none';\r\n    if(!select.value) {\r\n      console.log(\"Its empty\")\r\n      return;\r\n    }\r\n    for (let i = 0; i < select.options.length; i++) {\r\n      select.options[i].style.display = '';\r\n    } \r\n    currentInput.value = select.value;\r\n\r\n    var currentCatagory = getCatagory(currentInput);\r\n    var currentSubcatagoryChildren = currentInput.parentElement.previousElementSibling.children;\r\n    var currentSubcatagory = currentSubcatagoryChildren[0].innerHTML\r\n    \/\/ console.log(currentSubcatagoryChildren.length)\r\n    if(currentSubcatagoryChildren.length >= 2){\r\n      currentSubcatagory = currentSubcatagoryChildren[1].innerHTML\r\n    } \r\n\r\n    var currentSelect = currentInput.parentElement.nextElementSibling.lastElementChild;\r\n    var currentDescriptionInput = currentInput.parentElement.nextElementSibling.firstElementChild;\r\n    \/\/ console.log(currentDescription);\r\n    currentSelect.innerHTML = \"\"\r\n    currentDescriptionInput.value = \"\"\r\n    \r\n    \/\/ console.log(currentCatagory, currentSubcatagory, currentInput.value);\r\n    \/\/ console.log(INFO[currentCatagory][currentSubcatagory][currentInput.value]);\r\n    var descriptions = INFO[currentCatagory][currentSubcatagory][currentInput.value];\r\n\r\n    if(descriptions != null){\r\n      for (var i = 0; i < descriptions.length; i++) {\r\n        currentSelect.appendChild(new Option(descriptions[i].model, descriptions[i].model));\r\n      }\r\n      event.target.blur();\r\n      currentDescriptionInput.focus()\r\n      currentSelect.style.display = 'block';\r\n    \tcurrentSelect.size = select.length;\r\n    }\r\n  }\r\n\r\n  function descriptionSelectListener(event){\r\n    const select = event.target.parentElement;\r\n    if(select.tagName != \"SELECT\") return;\r\n    const currentInput = select.previousElementSibling;\r\n    select.style.display = 'none';\r\n    console.log(event.target);\r\n    \r\n    if(!select.value) {\r\n      return;\r\n    }\r\n    \r\n    for (let i = 0; i < select.options.length; i++) {\r\n      select.options[i].style.display = '';\r\n    }\r\n     \r\n    currentInput.value = select.value;\r\n    console.log(currentInput.value);\r\n    var currentCatagory = getCatagory(currentInput);\r\n    var currentSubcatagoryChildren = currentInput.parentElement.previousElementSibling.previousElementSibling.children\r\n    var currentSubcatagory = currentSubcatagoryChildren[0].innerHTML\r\n    if(currentSubcatagoryChildren.length >= 2){\r\n      currentSubcatagory = currentSubcatagoryChildren[1].innerHTML\r\n      console.log(currentSubcatagory)\r\n      console.log(currentSubcatagoryChildren[1])\r\n    } \r\n    \r\n    \r\n    var currentManufacturer = currentInput.parentElement.previousElementSibling.lastElementChild.value\r\n    var currentDescription = currentInput.value\r\n    var currentApproval = currentInput.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild\r\n    var currentDesign = currentInput.parentElement.nextElementSibling.firstElementChild\r\n    var currentWind = currentInput.parentElement.nextElementSibling.nextElementSibling.firstElementChild\r\n    \r\n    var selectedIndex = select.selectedIndex;\r\n    console.log(selectedIndex)\r\n    var currentInfo = INFO[currentCatagory][currentSubcatagory][currentManufacturer][selectedIndex];\r\n    if(currentInfo != null){\r\n      currentApproval.value = currentInfo.fl_num;\r\n      currentDesign.value = currentInfo.design;\r\n      currentWind.value = currentInfo.wind_born;\r\n    }\r\n  }\r\n  function descriptionClickListener(){\r\n    const select = event.target.nextElementSibling\r\n    if(select.tagName != \"SELECT\") return;\r\n    const input = event.target;\r\n  \tif(select.offsetParent === null){\r\n      if(select.length == 0) return;\r\n      if(select.length == 1) select.appendChild(new Option(\"\", \"\"));\r\n    \tselect.style.display = 'block';\r\n    \tselect.size = select.length;\r\n      \/* select.focus() *\/;\r\n    }else{\r\n    \tselect.style.display = 'none';\r\n    }\r\n  }\r\n  function approvalNumberListener(event){\r\n    const testNum = event.target.value.trim()\r\n    const currentApproval = event.target\r\n    if(event.key){\r\n      if (event.key != \"Enter\") return\r\n    }\r\n    if(testNum === \"\") return;\r\n    var currentManufacturer = currentApproval.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild\r\n    var currentDescription = currentApproval.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild\r\n    var currentDesign = currentApproval.parentElement.previousElementSibling.previousElementSibling.firstElementChild\r\n    var currentWind = currentApproval.parentElement.previousElementSibling.firstElementChild\r\n    \r\n    if(currentManufacturer.value != \"\") return; \r\n    console.log(\"testNum =\", testNum);\r\n\r\n    var currentCatagory = getCatagory(currentApproval);\r\n    var currentSubcatagory = currentApproval.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.children[1].innerHTML\r\n    \/\/ console.log(currentCatagory, currentSubcatagory)\r\n\r\n    for (const manufacturerKey in INFO[currentCatagory][currentSubcatagory]) {\r\n      \/\/ console.log(parentKey, grandParentKey, manufacturerKey);\r\n      const flNums = INFO[currentCatagory][currentSubcatagory][manufacturerKey];\r\n      for (const flNum of flNums) {\r\n        if (flNum.fl_num === testNum) {\r\n          console.log(`Manufacturer: ${manufacturerKey}`);\r\n          console.log(`Description: ${flNum.model}`);\r\n          currentDesign.value = flNum.design;\r\n          currentWind.value = flNum.wind_born;\r\n          currentDescription.value = flNum.model;\r\n          currentManufacturer.value = manufacturerKey;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  function manufacturerClickListener(){\r\n    const select = event.target.nextElementSibling\r\n    if(select.tagName != \"SELECT\") return;\r\n    console.log(select);\r\n    const input = event.target;\r\n  \tif(select.offsetParent === null){\r\n    \tselect.style.display = 'block';\r\n    \tselect.size = select.length;\r\n      \/* select.focus() *\/;\r\n    }else{\r\n    \tselect.style.display = 'none';\r\n    }\r\n\r\n  }\r\n  function loadData(){\r\n  var tableSel = document.getElementById(\"main-table\")\r\n  var catagoryCount = 0\r\n  var subCount = 1;\r\n  let manufacturerSelect;\r\n  let descriptionSelect;\r\n  for (var catagoryValue in INFO) {\r\n    newRow(tableSel, letters[catagoryCount]+\". \", catagoryValue, subCount)\r\n    \r\n    var subcatagorys = INFO[catagoryValue];\r\n    \/\/ console.log(Sels);\r\n    for (var sub in subcatagorys) {\r\n      var Sels = newRow(tableSel, subCount.toString()+\". \", sub, subCount,isCatagory=false)\r\n      manufacturerSelect = Sels[0].lastElementChild\r\n      manufacturerInput = Sels[0].firstElementChild\r\n\r\n      descriptionSelect = Sels[1].lastElementChild\r\n      descriptionInput = Sels[1].firstElementChild\r\n      approvalNumerinput = Sels[2].lastElementChild\r\n      approvalNumerinput.addEventListener('keypress', approvalNumberListener)\r\n      approvalNumerinput.addEventListener('blur', approvalNumberListener)\r\n      manufacturerInput.addEventListener('input', () => {\r\n        const select = event.target.nextElementSibling\r\n        const options = select.options;\r\n        const inputValue = event.target.value.toLowerCase(); \/\/ Get the input value and convert to lowercase\r\n        reg = new RegExp(`^${inputValue}`) ;\r\n        console.log(reg);\r\n        for (let i = 0; i < options.length; i++) {\r\n          const optionText = options[i].textContent.toLowerCase(); \/\/ Get the option text and convert to lowercase\r\n          if (reg.test(optionText)) {\r\n            options[i].style.display = ''; \/\/ Show the option if it matches the input value\r\n          } else {\r\n            options[i].style.display = 'none'; \/\/ Hide the option if it does not match the input value\r\n          }\r\n        }\r\n      });\r\n\r\n      descriptionInput.addEventListener('input', () => {\r\n        const select = event.target.nextElementSibling\r\n        const options = select.options;\r\n        const inputValue = event.target.value.toLowerCase(); \/\/ Get the input value and convert to lowercase\r\n        reg = new RegExp(`^${inputValue}`) ;\r\n        console.log(reg);\r\n        for (let i = 0; i < options.length; i++) {\r\n          const optionText = options[i].textContent.toLowerCase(); \/\/ Get the option text and convert to lowercase\r\n          if (reg.test(optionText)) {\r\n            options[i].style.display = ''; \/\/ Show the option if it matches the input value\r\n          } else {\r\n            options[i].style.display = 'none'; \/\/ Hide the option if it does not match the input value\r\n          }\r\n        }\r\n      });\r\n      descriptionInput.addEventListener('blur', (event) => {\r\n        const select = event.target.nextElementSibling\r\n        setTimeout(() => {\r\n          if(select != document.activeElement){\r\n            select.style.display = 'none';\r\n          }\r\n        }, 100);\r\n      });\r\n\r\n      manufacturerInput.addEventListener('blur', (event) => {\r\n        const select = event.target.nextElementSibling\r\n        setTimeout(() => {\r\n          if(select != document.activeElement){\r\n            select.style.display = 'none';\r\n          }\r\n        }, 100);\r\n      });\r\n      manufacturerSelect.addEventListener('blur', (event) => {\r\n        const select = event.target;\r\n        setTimeout(() => {\r\n          select.style.display = 'none';\r\n        }, 100);\r\n      });\r\n      descriptionSelect.addEventListener('blur', (event) => {\r\n        const select = event.target\r\n        setTimeout(() => {\r\n          select.style.display = 'none';\r\n        }, 100);\r\n      });\r\n      manufacturerSelect.addEventListener('click', manufacturerSelectListener)\r\n      manufacturerInput.addEventListener('click', manufacturerClickListener)\r\n\r\n      descriptionSelect.addEventListener('click', descriptionSelectListener)\r\n      descriptionInput.addEventListener('click', descriptionClickListener)\r\n\r\n      var manufacturers = INFO[catagoryValue][sub]\r\n      console.log(\"sorted\")\r\n      const sortedObj = Object.fromEntries(\r\n        Object.entries(manufacturers).sort((a, b) => a[0].localeCompare(b[0]))\r\n      );\r\n      console.log(sortedObj);\r\n      for (var man in sortedObj) {\r\n        manufacturerSelect.appendChild(new Option(man, man));\r\n      }\r\n      subCount+=1\r\n    }\r\n    newOther(tableSel, subCount);\r\n    catagoryCount +=1;\r\n  }\r\n  \/\/ saveToPDF();\r\n}\r\nfunction getCatagory(element){\r\n  var row = element.parentElement.parentElement;\r\n  var className = \"\"\r\n  while(className != \"catagory-row\"){\r\n    row = row.previousElementSibling\r\n    className = row.getAttribute(\"class\")\r\n  }\r\n  return row.children[0].lastElementChild.innerHTML\r\n}\r\nfunction newOther(table, num){\r\n  var row = table.insertRow(table.rows.length);\r\n  var wrapper = document.createElement(\"div\");\r\n  wrapper.setAttribute(\"class\", \"wrapper\");\r\n  var div1 = document.createElement(\"div\");\r\n  div1.innerHTML = num.toString()+\".\"\r\n  var div2 = document.createElement(\"div\");\r\n  div2.innerHTML = \"Other\"\r\n  div1.setAttribute(\"class\", \"subcatagory-text\");\r\n  div2.setAttribute(\"class\", \"subcatagory\");\r\n  wrapper.appendChild(div1);\r\n  wrapper.appendChild(div2);\r\n  var cell1 = row.insertCell(0);\r\n  cell1.innerHTML = wrapper.innerHTML;\r\n  var pbutton = plusButton()\r\n  cell1.appendChild(pbutton)\r\n  var cell2 = row.insertCell(1);\r\n  cell2.innerHTML = newInput(\"other\").innerHTML;\r\n  var cell3 = row.insertCell(2);\r\n  cell3.innerHTML = newInput(\"other\").innerHTML;\r\n  var cell4 = row.insertCell(3);\r\n  cell4.innerHTML = newInput(\"other\").innerHTML;\r\n  var cell5 = row.insertCell(4);\r\n  cell5.innerHTML = newInput(\"other\").innerHTML;\r\n  var cell6 = row.insertCell(5);\r\n  cell6.innerHTML = newInput(\"other\").innerHTML;\r\n  row.setAttribute(\"class\", \"subcatagory-row\")\r\n}\r\nfunction removeRow(event) {\r\n  const button = event.target;\r\n  \/\/ Traverse the DOM to get the row that contains the button\r\n  const row = button.closest('tr');\r\n  \r\n  \/\/ Remove the row from the table\r\n  row.remove();\r\n}\r\nfunction duplicateRow(event){\r\n  \/\/ var table = document.getElementById(\"main-table\");\r\n  var button = event.target\r\n  if(event.target.getAttribute(\"class\") == null){\r\n    button = button.parentNode\r\n  }\r\n  var row = button.parentNode.parentNode;\r\n  var inputBox =  button.parentNode.nextElementSibling.lastElementChild\r\n  var table = row.parentNode\r\n  var numChildren = table.children.length\r\n  \r\n  var duplicate = row.cloneNode(true);\r\n  var children = duplicate.firstElementChild.children\r\n  if(inputBox.getAttribute(\"class\") != \"other\"){\r\n\r\n    \r\n    var manufacturer = duplicate.children[1].firstElementChild\r\n    var manufacturerSelect = duplicate.children[1].lastElementChild\r\n    var description = duplicate.children[2].firstElementChild\r\n    var descriptionSelect = duplicate.children[2].lastElementChild\r\n    var descriptionClass = \"description-select\"\r\n    var manufacturerClass = \"manufacturer-select\"\r\n\r\n    descriptionSelect.setAttribute(\"class\", descriptionClass)\r\n    manufacturerSelect.setAttribute(\"class\", manufacturerClass)\r\n\r\n    manufacturerSelect.addEventListener('click', manufacturerSelectListener)\r\n    manufacturer.addEventListener('click', manufacturerClickListener)\r\n    descriptionSelect.addEventListener('click', descriptionSelectListener)\r\n    description.addEventListener('click', descriptionClickListener)\r\n  \r\n  }\r\n  duplicate.firstElementChild.removeChild(children[0])\r\n  duplicate.firstElementChild.removeChild(children[1])\r\n  const removeButton = document.createElement('button');\r\n  removeButton.textContent = '-';\r\n  removeButton.setAttribute('style', 'font-size: 18px; border: none; background-color: transparent;');\r\n  removeButton.onclick = removeRow;\r\n  duplicate.firstElementChild.insertAdjacentElement('afterbegin', removeButton);\r\n\r\n  for (let i = 0; i < duplicate.children.length; i++) {\r\n    if(i==0) continue\r\n    const element = duplicate.children[i];\r\n    element.firstElementChild.value = \"\";\r\n  }\r\n  \r\n  \/\/ console.log(duplicate)\r\n  table.insertBefore(duplicate, row.nextElementSibling)\r\n}\r\nfunction plusButton(){\r\n  const svg = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"svg\");\r\n  svg.setAttribute(\"width\", \"10\");\r\n  svg.setAttribute(\"height\", \"10\");\r\n  svg.setAttribute(\"viewBox\", \"0 0 10 10\");\r\n\r\n  const rect1 = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\r\n  rect1.setAttribute(\"x\", \"4\");\r\n  rect1.setAttribute(\"y\", \"1\");\r\n  rect1.setAttribute(\"width\", \"2\");\r\n  rect1.setAttribute(\"height\", \"8\");\r\n  rect1.setAttribute(\"fill\", \"#000\");\r\n\r\n  const rect2 = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"rect\");\r\n  rect2.setAttribute(\"x\", \"1\");\r\n  rect2.setAttribute(\"y\", \"4\");\r\n  rect2.setAttribute(\"width\", \"8\");\r\n  rect2.setAttribute(\"height\", \"2\");\r\n  rect2.setAttribute(\"fill\", \"#000\");\r\n\r\n\r\n  svg.appendChild(rect1);\r\n  svg.appendChild(rect2);\r\n  svg.addEventListener(\"click\", duplicateRow);\r\n  svg.setAttribute(\"class\", \"plus-button\")\r\n  return svg\r\n}\r\nfunction newRow(table, countString, catagoryValue, count, isCatagory = true){\r\n  var row = table.insertRow(table.rows.length);\r\n  var cell1 = row.insertCell(0);\r\n  cell1.innerHTML = newLabel(countString, catagoryValue, isCatagory).innerHTML;\r\n  var cell2 = row.insertCell(1);\r\n  var cell3 = row.insertCell(2);\r\n  var cell4 = row.insertCell(3)\r\n  var cell5 = row.insertCell(4)\r\n  var cell6 = row.insertCell(5)\r\n  if(!isCatagory){\r\n    var pbutton = plusButton()\r\n    cell1.appendChild(pbutton)\r\n\r\n    cell2.innerHTML = newSelect(\"manufacturer\", count).innerHTML\r\n    cell3.innerHTML = newSelect(\"description\", count).innerHTML\r\n    cell4.innerHTML = newInput(\"design\").innerHTML\r\n    cell5.innerHTML = newInput(\"wind\").innerHTML\r\n    cell6.innerHTML = newInput(\"approval\").innerHTML\r\n    row.setAttribute(\"class\", \"subcatagory-row\")\r\n  }else{\r\n    row.setAttribute(\"class\", \"catagory-row\")\r\n  }\r\n  \/\/ console.log(cell2, cell3);\r\n  return [cell2, cell3, cell6]\r\n}\r\nfunction newLabel(firstString, secondString, isCatagory=true){\r\n  var wrapper = document.createElement(\"div\");\r\n  wrapper.setAttribute(\"class\", \"wrapper\");\r\n  var div1 = document.createElement(\"div\");\r\n  var div2 = document.createElement(\"div\");\r\n  if(isCatagory){\r\n    div1.setAttribute(\"class\", \"catagory-text\");\r\n    div2.setAttribute(\"class\", \"catagory\");\r\n  }else{\r\n    div1.setAttribute(\"class\", \"subcatagory-text\");\r\n    div2.setAttribute(\"class\", \"subcatagory\");\r\n  }\r\n  div1.innerHTML = firstString;\r\n  div2.innerHTML = secondString;\r\n  wrapper.appendChild(div1);\r\n  wrapper.appendChild(div2);\r\n  return wrapper;\r\n}\r\nfunction newInput(className){\r\n  var wrapper = document.createElement(\"div\");\r\n  wrapper.setAttribute(\"class\", \"wrapper\");\r\n  var input = document.createElement(\"input\");\r\n  input.setAttribute(\"class\", className);\r\n  input.setAttribute(\"type\", \"text\");\r\n  input.setAttribute(\"autocomplete\", \"off\");\r\n  wrapper.appendChild(input)\r\n  return wrapper;\r\n}\r\nfunction newSelect(className, count) {\r\n    var newSelect = document.createElement(\"select\");\r\n    var input = document.createElement(\"input\");\r\n    input.setAttribute(\"class\", className)\r\n    input.setAttribute(\"type\", \"text\")\r\n    var wrapper = document.createElement(\"div\");\r\n    wrapper.setAttribute(\"class\", \"wrapper\");\r\n    newSelect.setAttribute(\"class\", className+\"-select\");\r\n    newSelect.style.display = \"none\";\r\n    newSelect.style.position = \"absolute\";\r\n    wrapper.appendChild(input)\r\n    wrapper.appendChild(newSelect);\r\n    return wrapper;\r\n}\r\nfunction getData(){\r\n  var body_list = [];\r\n  var head_list = [];\r\n  var highlight = []\r\n  var all = document.getElementsByTagName(\"tr\");\r\n  for (var i=0; i < all.length; i++) {\r\n    var row= all[i].children;\r\n    \/\/ console.log(row);\r\n    if(all[i].getAttribute(\"class\") === \"catagory-row\"){\r\n      highlight.push(i-1)\r\n    }\r\n    var tempList = [];\r\n    for (let t = 0; t < row.length; t++) {\r\n      var currentElement = row[t];\r\n      \/\/ console.log(currentElement)\r\n      \r\n      if(currentElement.firstElementChild == null){\r\n        tempList.push(currentElement.innerHTML)\r\n      }else if(currentElement.firstElementChild.tagName == \"INPUT\"){\r\n        tempList.push(currentElement.firstElementChild.value)\r\n      }else if(currentElement.firstElementChild.tagName == \"SELECT\"){\r\n        tempList.push(currentElement.firstElementChild.nextElementSibling.value)\r\n      }else{\r\n        var total = \"\"\r\n        \/\/ console.log(currentElement.children);\r\n        for (var c=0; c < currentElement.children.length; c++) {\r\n          total += currentElement.children[c].textContent+\" \"\r\n        }\r\n        \/\/ console.log(total);\r\n        tempList.push(total)\r\n      }\r\n      \r\n    }\r\n    if(i == 0){\r\n      head_list.push(tempList)\r\n      \r\n    }else{\r\n      body_list.push(tempList)\r\n    }\r\n  }\r\n  console.log(highlight);\r\n  return [head_list,body_list, highlight];\r\n}\r\n\r\n\r\n\/\/ window.onload = (event) => {\r\n\/\/   saveToPDF()\r\n\/\/ };\r\nfunction saveToPDF() {\r\n  const buttons = document.querySelectorAll(\".plus-button\");\r\n  for (const button of buttons) {\r\n    button.style.display = \"none\";\r\n  }\r\n  var location = document.getElementById(\"location\").value\r\n  var project = document.getElementById(\"project\").value\r\n  var data = getData();\r\n  var paragraph = \"As required by Florida Statue 553.842 and Florida Administrative Code 9B-72, please provide the information and the product approval number(s) on the building components listed below if they will be utilized on the construction project for which you are applying for a building permit on or after April 1, 2004. We recommend you contact your local product supplier should you not know the product approval number for any of the applicable listed products. More information about statewide product approval can be obtained at\";\r\n  var doc = new jsPDF(\"l\", 'pt', [612, 792]);\r\n  doc.setFontSize(16);\r\n  doc.setFont(\"times\", \"bold\");\r\n  doc.text('PRODUCT APPROVAL SPECIFICATION SHEET', 223, 43.5);\r\n  doc.setLineWidth(1.5);\r\n  var lineHight = 46.1\r\n  doc.line(223, lineHight, 583, lineHight);\r\n  doc.setFontSize(14);\r\n  var linesHieght = 83\r\n  doc.text('Location: ', 29, linesHieght);\r\n  doc.text('Project Name: ', 387, linesHieght);\r\n  doc.setFont(\"times\", \"normal\");\r\n  doc.setLineWidth(0.5);\r\n  doc.line(89, linesHieght+2.6, 355, linesHieght+2.6);\r\n  doc.line(476, linesHieght+2.6, 750, linesHieght+2.6);\r\n\r\n  doc.setFontSize(11);\r\n  lines = doc.setFont(\"times\", \"normal\").splitTextToSize(paragraph, 735)\r\n  doc.text(29, 103, lines)\r\n  doc.setTextColor(0, 0, 238)\r\n  doc.text(189, 140.8, \"www.floridabuilding.org\")\r\n  doc.setTextColor(0,0,0)\r\n  doc.setFontSize(15);\r\n  doc.text(91, 84, location)\r\n  doc.text(480, 84, project)\r\n  doc.autoTable({margin: {right: 24, left: 24}, startY: 145.5, head: data[0], bodyStyles:{fontSize: 9},headStyles:{fontSize: 11}, body:data[1], theme:'plain', styles: {font:\"times\",lineWidth:.05, lineColor: [0,0,0], cellPadding:2},\r\n  didParseCell: function(cellData) {\r\n            if (data[2].includes(cellData.row.index) && cellData.row.section != 'head') {\r\n                cellData.cell.styles.fillColor = [224, 224, 224];\r\n                cellData.cell.styles.fontSize = 10;\r\n                cellData.cell.styles.fontStyle = \"bold\";\r\n                cellData.cell.text = cellData.cell.text.toString().toUpperCase();\r\n                \r\n            }else if(cellData.row.section != 'head'){\r\n              var cell = cellData.cell\r\n\r\n              if(cell.text[0].indexOf(\"+\") !== -1){\r\n                cell.text = [cell.text[0].replace(\"+\", \"\")]\r\n              }\r\n              cell.styles.cellPadding = {top:2, right:2, left:15, bottom:2}\r\n            }\r\n        }\r\n})\r\ndoc.addPage()\r\nvar end_paragraph = \"The products listed below did not demonstrate product approval at plan review. I understand that at the time of inspection of these products, the following information must be available to the inspector on the jobsite; 1) Copy of the product approval 2) The performance characteristics which the product was tested and certified to comply with 3) Copy of the applicable manufactures installation requirements.\"\r\n\r\n\r\nvar bottom_y = 50 \r\nvar bottom_x = 29\r\nvar end_line_length = 720\r\n\r\n\r\n\r\n\r\n\r\ndoc.setFontSize(14);\r\ndoc.setDrawColor(0, 0, 0);\r\ndoc.setLineWidth(0.5);\r\ndoc.line(bottom_x, bottom_y+75, end_line_length, bottom_y+75);\r\ndoc.line(bottom_x, bottom_y+105, end_line_length, bottom_y+105);\r\ndoc.line(bottom_x, bottom_y+135, end_line_length, bottom_y+135);\r\ndoc.line(bottom_x, bottom_y+230, 350, bottom_y+230);\r\ndoc.line(470, bottom_y+230, end_line_length-30, bottom_y+230);\r\ndoc.line(bottom_x, bottom_y+180, 300, bottom_y+180);\r\ndoc.line(380, bottom_y+180, end_line_length, bottom_y+180);\r\n\r\n\r\n\r\ndoc.setFontSize(12);\r\ndoc.setFont(\"times\", \"normal\");\r\nother_lines = doc.setFont(\"times\", \"normal\").splitTextToSize(end_paragraph, 690)\r\ndoc.text(bottom_x, bottom_y, other_lines)\r\ndoc.text('I understand these products may have to be removed if approval cannot be demonstrated during inspection', bottom_x, bottom_y+50);\r\ndoc.text('Contractor or Contractor\u00e2\u20ac\u2122s Authorized Agent Signature', bottom_x, bottom_y+190);\r\ndoc.text('Print Name', bottom_x+380, bottom_y+190);\r\ndoc.text('Date', bottom_x+550, bottom_y+190);\r\ndoc.text('Location', bottom_x, bottom_y+241);\r\ndoc.text('Permit Number', bottom_x+440, bottom_y+241);\r\ndoc.setFont(\"times\", \"bold\");\r\ndoc.text('(FOR STAFF USE ONLY)', bottom_x+520, bottom_y+241);\r\n\r\ndoc.output('dataurlnewwindow');\r\n  \r\n}\r\n<\/script>\r\n<\/head>   \r\n<body>\r\n\r\n<div id=\"printableArea\">\r\n    \r\n  <h1 class=\"title\">PRODUCT APPROVAL SPECIFICATION SHEET<\/h1>\r\n  <div class=wrap-wrap-loc>\r\n    \r\n    <div class=\"wrap-loc\">\r\n      <div class=\"loc-pro\">\r\n        <h2 class=\"loc-pro\">Location:<\/h2>\r\n        <input type=\"text\" class=\"location loc-pro\" id=\"location\">\r\n      <\/div>\r\n      <div class=\"loc-pro second\">\r\n        <h2 class=\"loc-pro\">Project Name:<\/h2>\r\n        <input type=\"text\" class=\"project loc-pro\" id=\"project\">\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <p class=\"message\">As required by Florida Statue 553.842 and Florida Administrative Code 9B-72, please provide the information and the product approval number(s) on the building components listed below if they will be utilized on the construction project for which you are applying for a building permit on or after April 1, 2004. We recommend you contact your local product supplier should you not know the product approval number for any of the applicable listed products. More information about statewide product approval can be obtained at <a href=\"www.floridabuilding.org\">www.floridabuilding.org<\/a><\/p>\r\n  <table id=\"main-table\" style=\"width:100%\">\r\n    <tr>\r\n    <th class=\"header\">Category\/Subcategory<\/th>\r\n    <th class=\"header\">Manufacturer<\/th>\r\n    <th class=\"header\">Product Description<\/th>\r\n    <th class=\"header\" width=\"150px\">Design Pressure +\/- <\/th>\r\n    <th class=\"header\" width=\"150px\">Wind Borne Debris Protection<\/th>\r\n    <th class=\"header\" width=\"150px\">Approval Number (s)<\/th>\r\n  <\/tr>\r\n  \r\n\r\n\r\n<\/table>\r\n<\/div>\r\n<div class=\"button-div\" >\r\n  <input type=\"button\" id=\"ignore\" onclick=\"saveToPDF()\" value=\"Save to PDF\"\/>  \r\n<\/div>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PRODUCT APPROVAL SPECIFICATION SHEET Location: Project Name: As required by Florida Statue 553.842 and Florida Administrative Code 9B-72, please provide the information and the product approval number(s) on the building components listed below if they will be utilized on the construction project for which you are applying for a building permit on or after April [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-25007","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/pages\/25007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/comments?post=25007"}],"version-history":[{"count":5,"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/pages\/25007\/revisions"}],"predecessor-version":[{"id":25015,"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/pages\/25007\/revisions\/25015"}],"wp:attachment":[{"href":"https:\/\/prodapproval.com\/index.php\/wp-json\/wp\/v2\/media?parent=25007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}