plxdcma_eshop/public/js/registrymanager.js

Instala todo lo necesario para una tienda virtual

var preselectionSizeSpanArray=[]
var myshopMyStandarSizes=null
var shpregproImagesDatas=[]
var shRegistryCaracteristicsList=[]
var shopRegisterProductHx
var shopRegisterProductbaseConfig;
var myShopDidRegisterAProduct;
var myShopIsGoingToRegisterAProduct;
var productregistryDiferentSize=[{
  precio:null,
  inventario:null
}]
function rerenderImageRowsOnProductRegistry(datas,handler){
  for(var i = 0 ; i < datas.length;i++){
    var h=appendImageToShop(datas[i].big,datas[i])
    handler(i,h)
  }
}
function rerenderRowsWithRemoveBtns(array,showRemoveBtn,handler){
  var htmls=[]
  for(var i = 0 ; i < array.length;i++){

    var h=document.createElement("div")
    h.classList.add("shopregistryitemcaracteristic")

    var px=document.createElement("p")
    px.classList.add("shopitemcaracteristictext")
    px.innerHTML=array[i]

    var tx=document.createElement("i")
    tx.classList.add("fa")
    tx.classList.add("fa-times")
    tx.classList.add("shopitemcaracteristictextremoveicon")

    h.appendChild(px)
    if(showRemoveBtn){
      h.appendChild(tx)
    }
    if(handler != null){
      handler(i,h,px,tx)
    }
    htmls.push(h)
  }
  return htmls
}
function rehandleWidthOfImagesOnShopProdRegistry(){
  var ch=ProductRegistryImageDisplayerVerticalFunction.children
  var w=100
  for(var i = 0 ; i < ch.length;i++){

    var z=ch[i].getBoundingClientRect()
    w=w+z.width
  }

  ProductRegistryImageDisplayerVerticalFunction.style.width=`${w}px`
}

function shpmdpraddnewimage(){


  if(shopRegisterProductbaseConfig != null){
    shopRegisterProductbaseConfig.didPickeImage(function(images){

      if(images.length != null){
        for(var each in images){
          var image=images[each]
          var imgplhimg=document.createElement("div")
          imgplhimg.classList.add("productRegistryImageOfItemPreview")
          imgplhimg.data=image.data

          var d=document.createElement("div")
          //d.src=image.url
          d.style.width="95%"
          d.style.height="90%"
          var imageurl=image.url
          if(image.data == null){
            imgplhimg.data=image
            imageurl=image.original
            var imag=document.createElement("img")
            imag.src=imageurl
            imag.style.width="100%"
            d.appendChild(imag)
          }else{
            d.style.background=`url('${imageurl}')`
            d.style.backgroundPosition="center";
            d.style.backgroundSize="cover";
          }

          d.style.margin="auto"

          var p=document.createElement("p")
          p.innerHTML="<i class='fa fa-times'></i>"
          p.style.textAlign="center"
          p.style.borderBottom="solid 1px #e9e9e9"
          p.onclick=function(){
            this.imageholder.parentNode.removeChild(this.imageholder)
          }.bind({imageholder:imgplhimg})
          imgplhimg.appendChild(d)
          imgplhimg.appendChild(p)
          ProductRegistryImageDisplayerVerticalFunction.appendChild(imgplhimg)
        }
      }
      rehandleWidthOfImagesOnShopProdRegistry()
    })
  }
}
function clearRegisterProductImages(){
  var n=shopproductproregaddimageaddicon
  shopproductproregaddimageaddicon.parentNode.removeChild(n)
  ProductRegistryImageDisplayerVerticalFunction.innerHTML=""
  ProductRegistryImageDisplayerVerticalFunction.appendChild(n)
}
function rerenderShopRegisterProductImages(){

}

function registerPreFabricStandares(standaresArray){
  for(var each in standaresArray){
    var ux=standaresArray[each]
    var isInside=false
    for(var each2 in myshopMyStandarSizes){
      if(myshopMyStandarSizes[each2].texto == ux[ux.length-2]){
        isInside=true
        break
      }
    }
    if(isInside == false){
      myshopMyStandarSizes.push({
        texto:ux[ux.length-2]
      })
    }
  }
}
function getMyStandarSizes(f){
  if(myshopMyStandarSizes == null){
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/myshop/myproductstandars')
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.onload=function(e){
      myshopMyStandarSizes = JSON.parse(e.target.responseText)
      if(f != null){
        f()
      }
    }
    // send rquest with JSON payload
    xhr.send(JSON.stringify({state:1}))
  }else{
    if(f != null){
      f()
    }
  }
}
function shopRegisterProduct(preset,config,handler){
  getMyStandarSizes()

  shopRegisterProductHx=handler
  shpregproImagesDatas.length=0
  ProductRegistryModal.style.display="block"
  shopRegisterProductbaseConfig=config
  shopproductregistrynameinput.value=""
  shoploadingdescription.value=""
  shopregistrycaracteristicssection.innerHTML=""
  shopInputInventario.value=""
  shopInputPrice.value=""
  shopproductrcartextinput.value="";
  shRegistryCaracteristicsList=[]
  productregistryDiferentSize=[{
    precio:null,
    inventario:null,
    texto:"standar"
  }]
  shopSizeList.innerHTML=""
  var standaroption=document.createElement("option")
  standaroption.value="standar"
  standaroption.innerHTML="Standar"
  shopSizeList.appendChild(standaroption)
  shopInputInventario.value=""
  shopInputPrice.value=""
  var titl=null
  if(config != null){
    titl=config.title ?? config.titulo;
  }else{

  }
  if(titl == null){
    shopregisbtn.innerHTML="<i class='fa fa-plus'></i>Agregando un nuevo producto"
  }else{
    shopregisbtn.innerHTML=titl
  }
  clearRegisterProductImages()
  var images=[]
  if(preset != null){
    images=preset.images
  }
  rerenderImageRowsOnProductRegistry(images,function(index,html){
    var imgplhimg=document.createElement("div")
    imgplhimg.classList.add("productRegistryImageOfItemPreview")
    imgplhimg.data=preset.images[index]
    html.style.width="90%"
    html.style.height="90%"
    html.style.margin="auto"
    imgplhimg.appendChild(html)
    var p=document.createElement("p")
    p.innerHTML="<i class='fa fa-times'></i>"
    p.onclick=function(){
      this.imageholder.parentNode.removeChild(this.imageholder)
    }.bind({imageholder:imgplhimg})
    imgplhimg.appendChild(p)
    ProductRegistryImageDisplayerVerticalFunction.appendChild(imgplhimg)
  })
  rehandleWidthOfImagesOnShopProdRegistry()
  if(config != null && config.submitBtnText != null){
    btnshreg.innerHTML=`<i class='fa fa-edit'></i> Editar articulo`
  }else{
    btnshreg.innerHTML=`<i class='fa fa-plus'></i> Registrar articulo`
  }
  if(preset != null){
    shopproductregistrynameinput.value=preset.nombre ?? preset.name ?? preset.titulo ?? preset.title;
    shoploadingdescription.value=preset.descripcion ?? shoploadingdescription.description;
    shRegistryCaracteristicsList=preset.caracteristics ?? preset.caracteritcs ?? preset.caracteristicas ?? preset.Caracteristicas;
    if(shRegistryCaracteristicsList == null){
      shRegistryCaracteristicsList=[]
    }


    shopInputInventario.value=preset.inventario
    shopInputPrice.value=preset.precio ?? preset.price;

    var selected=null
    var scru=preset.currency ?? preset.moneda ?? preset.curency;
    if(scru != null){
      scru = scru.toLowerCase()
    }
    for(var i = 0 ; i < currencyList.length;i++){
      if(currencyList[i].toLowerCase() == scru){

        shopCurrencyList.value=currencyList[i]

        break
      }
    }


  }

  reloadCaracteristics()
  shopCurrencyList.onchange=function(){
    var option=shopCurrencyList.options[shopCurrencyList.selectedIndex]

  }
  rerenderShopRegisterProductImages()
  rerenderSelectList(config.currencies)
  btnshreg.onclick=postNewProduct
}
function shopModifyCaracteristic(preset,config,handler){

  ProductRegistryModal.style.display="block"
  ProductRegistryImageDisplayer.style.display="none"
  shopproductregistrynameinput.style.display="none"
  descriptionSection.style.display="none"
  shopProductSizeSection.style.display="none"
  caracteristicsection.style.display="block"
  shopregistrycaracteristicssection.style.display="block"
  btnshreg.innerHTML="Modificando las caracteristicas"
  btnshreg.onclick=function(){
    ProductRegistryModal.style.display="none"
    handler(shRegistryCaracteristicsList)
  }
  shRegistryCaracteristicsList.length=0
  if(config.using != null){
    shRegistryCaracteristicsList.push(...config.using)
  }
  reloadCaracteristics()
  btnshreg.innerHTML=`Modificando las características`
}
var textosinsideAtStart=[]
function shopModifyStandar(config,handler){


  shopregisbtn.innerHTML=`Modificando las dimensiones`
  var productId=product
  if(product.id != null){
    productId=product.id
  }
  getMyStandarSizes(function(){
    ProductRegistryModal.style.display="block"
    ProductRegistryImageDisplayer.style.display="none"
    shopProductSizeSection.style.display="block"
    shopproductregistrynameinput.style.display="none"
    descriptionSection.style.display="none"
    caracteristicsection.style.display="none"
    btnshreg.innerHTML="Modificar"
    shopSizeList.innerHTML=""
    productregistryDiferentSize.length=0
    if(config.using != null){
      if(config.using.sizes.length == 0){
        productregistryDiferentSize.push({
          precio:null,
          inventario:null,
          texto:"standar"
        })
        shopSizeList.innerHTML=""
        var option=document.createElement("option")
        option.value="standar"
        option.innerHTML="Standar"
        shopSizeList.appendChild(option)
      }else{
        productregistryDiferentSize.length=0
        shopSizeList.innerHTML=""
        for(var each in config.using.sizes){
          var sx=config.using.sizes[each]
          productregistryDiferentSize.push({
            precio:sx.precio,
            inventario:sx.inventario,
            texto:sx.texto
          })

          var option=document.createElement("option")
          option.value=sx.texto;
          option.innerHTML=sx.texto;
          shopSizeList.appendChild(option)
        }
        var index=currencyList.indexOf(config.using.coin)
        shopCurrencyList.selectedIndex=index

        var sindx=shopSizeList.selectedIndex
        var t=productregistryDiferentSize[sindx]
        shopInputInventario.value=t.inventario
        shopInputPrice.value=t.precio

      }
    }

    btnshreg.onclick=function(){

      if(verifyDiferentSizes()){
        if(handler != null){
          ProductRegistryModal.style.display="none"

          handler({
            sizes:[].concat(productregistryDiferentSize),
            coin:shopCurrencyList.options[shopCurrencyList.selectedIndex].value
          })

          return
        }

        let xhr = new XMLHttpRequest();

        xhr.open('POST', '/myshop/update/product/standars')
        xhr.setRequestHeader('Content-Type', 'application/json')
        var inserts=diferentSizeInserts()
        xhr.onload=function(e){
          var t=JSON.parse(e.target.responseText)
          registerPreFabricStandares(inserts)
          handler(productregistryDiferentSize,t)
        }
        xhr.send(JSON.stringify(inserts))
        btnshreg.innerHTML="<i class='fa fa-spinner fa-spin'></i>"
      }
    }
    reloadCaracteristics()
    recallRemoveBtn()
    textosinsideAtStart.length=0
    for(var each in productregistryDiferentSize){
      textosinsideAtStart.push(productregistryDiferentSize[each].texto)
    }
  })

}
function reloadCaracteristics(){
  shopregistrycaracteristicssection.innerHTML=""
  rerenderRowsWithRemoveBtns(shRegistryCaracteristicsList,true,function(index,div,p,i){
    p.contentEditable=true;
    p.onkeyup=function(){
      shRegistryCaracteristicsList[this.index]=this.dap.innerText.trim("")
    }.bind({index:index,dap:p})
    shopregistrycaracteristicssection.appendChild(div)
    i.onclick=function(){
      shRegistryCaracteristicsList.splice(this.index,1)
      reloadCaracteristics()
    }.bind({index:index})
  })
}
function appendshpcaract(){

  var v=shopproductrcartextinput.value.trim()
  if(v.length == 0 || v == "" || v == null){
    return
  }
  shopproductrcartextinput.style.border="solid 1px rgba(0,0,0,0)"
  shopproductrcartextinput.style.borderBottom="solid 1px black"
  if(v.length > 299){
    shopregproerrorlbl.style.opacity=1
    shopregproerrorlbl.innerHTML="Esta caracteristica es demasiado grande, como maximo debe tener 299 caracteres."
    shopproductrcartextinput.style.border="solid 1px red"
    errorize(shopregproerrorlbl)
    return
  }
  shRegistryCaracteristicsList.push(shopproductrcartextinput.value.trim())
  shopproductrcartextinput.value=""
  reloadCaracteristics()
}
var registerProductToMyShop=shopRegisterProduct

var showhopcaracteristicsdatasource;
var showhopcaracteristicsdelegate;
function showShopReloadCaracteristics(datasource,delegate){

  shopSellCaracteristics.style.display="block"
  shopTableItems.style.display="none"
  showhopcaracteristicsdatasource=datasource
  showhopcaracteristicsdelegate=delegate
  reloadshowShopReloadCaracteristics()
}
function rerenderSelectList(array){
  for(var each in array){
    var z=array[each]
    var o=document.createElement("option")
    o.innerHTML=z
    shopCurrencyList.appendChild(o)
  }
}

function removeRdcowicnweList(){
  productregistryDiferentSize.splice(shopSizeList.selectedIndex,1)

  updateShopSizeList()
  recallRemoveBtn()
}
var rmnuevotamanoisdown=false
function nuevotamanoparalalista(){
  if(rmnuevotamanoisdown){
    ntIcon.classList.remove("fa-caret-up")
    ntIcon.classList.add("fa-edit")
    rmnuevotamanoisdown=false
    rflist.style.opacity=0
    rflist.style.height="0px"
    shprlisection.style.display="block"
    setTimeout(function(){
      rflist.style.display="none"

    },600)
    recallRemoveBtn()
    return
  }
  rmnuevotamanoisdown=true
  ntIcon.classList.remove("fa-plus")
  ntIcon.classList.add("fa-caret-up")
  rflist.style.opacity=0
  rflist.style.display="block"
  acceptedoptionalicuiew.style.display="inline-block"
  setTimeout(function(){
    sizelizeinputproductregistryinput.focus()
    regsizeoptionsiconsholders.innerHTML=""
    var selectionArray=preselectionSizeSpanArray
    selectionArray.length=0
    for(var each in myshopMyStandarSizes){
      var t=myshopMyStandarSizes[each]
      var span=document.createElement("span")
      span.classList.add("sizeoption")
      span.innerHTML=`${t.texto}`
      var isSelected=false
      for(var each2 in productregistryDiferentSize){
        var z=productregistryDiferentSize[each2]
        var tx=z.texto;
        if(tx == t.texto){
          isSelected=true
          break
        }
      }
      span.onclick=function(){
          if(this.isSelected){
            this.isSelected=isSelected
            this.h.classList.remove("sizeoptioncheck")
            this.h.innerHTML=this.t.texto
            var index=this.selectionArray.indexOf(this.t)
            if(index >= 0){
              this.selectionArray.splice(index,1)
            }
          }else{
            this.isSelected=true
            this.h.classList.add("sizeoptioncheck")
            this.selectionArray.push(this.t)
            this.h.innerHTML=`#${this.selectionArray.length+1} )${this.t.texto}`

          }
      }.bind({h:span,t:t,isSelected:isSelected,selectionArray:selectionArray})

      if(isSelected){
        span.classList.add("sizeoptioncheck")
        selectionArray.push(t)
      }

      regsizeoptionsiconsholders.appendChild(span)
    }
    rflist.style.opacity=1
    rflist.style.height="90px"
    shprlisection.style.display="none"
    recallRemoveBtn()
  },100)
}
function myshoprefresherror(){
  shopregproerrorlbl.style.opacity=0
}
function didUpdateInventarioInput(){
  myshoprefresherror()
  var index=shopSizeList.selectedIndex
  var t=productregistryDiferentSize[index]
  var value=parseInt(shopInputInventario.value)

  if(isNaN(value)){
    shopInputInventario.style.color="red"
    t.inventario=null
    return
  }
  shopInputInventario.style.color="black"
  shopInputInventario.style.border="solid 1px white"
  shopInputInventario.style.borderBottom="solid 1px black"

  t.inventario=value
}
function didUpdatePriceInput(){
  myshoprefresherror()
  var index=shopSizeList.selectedIndex
  var t=productregistryDiferentSize[index]
  var value=parseInt(shopInputPrice.value)
  if(isNaN(value)){
    shopInputPrice.style.color="red"
    t.precio=null
    return
  }
  shopInputPrice.style.color="black"
  shopInputPrice.style.border="solid 1px white"
  shopInputPrice.style.borderBottom="solid 1px black"
  t.precio=value
}
function didchangesizeilst(){
  var index=shopSizeList.selectedIndex
  var t=productregistryDiferentSize[index]
  shopInputInventario.value=t.inventario
  shopInputPrice.value=t.precio
  recallRemoveBtn()
}
var FXN=false
function didPressToAddIntoTamanoList(){
  rmnuevotamanoisdown=false
  ntIcon.classList.remove("fa-caret-up")
  ntIcon.classList.remove("fa-plus")
  ntIcon.classList.add("fa-edit")
  var value=sizelizeinputproductregistryinput.value.toLowerCase().trim("")
  sizelizeinputproductregistryinput.value=""
  if(value.length >= 45){
    rflist.style.opacity=0
    rflist.style.height="50px"
    setTimeout(function(){
      rflist.style.display="none"
    },600)
    return
  }
  if((value == "" || value == null) && preselectionSizeSpanArray.length == 0 ){
    rflist.style.opacity=0
    rflist.style.height="50px"
    setTimeout(function(){
      rflist.style.display="none"
    },600)
    return
  }
  if(FXN == false){
    FXN=true
    //shopSizeList.innerHTML=""
    //productregistryDiferentSize.length=0
  }
  var listOfWords=[]
  if(value.length >= 45){
    value=value.substr(0,44)
  }
  var wasInside=false
  for(var each in myshopMyStandarSizes){
    if(myshopMyStandarSizes[each].texto == value){
      wasInside=true
      break
    }

  }

  if(wasInside == false && value != ""){
    myshopMyStandarSizes.push({texto:value})
  }

  var allregistered=[]
  for(var each in preselectionSizeSpanArray){
    var inputed=preselectionSizeSpanArray[each]
    var option=document.createElement("option")
    option.value=productregistryDiferentSize.length
    option.innerHTML=inputed.texto
    if(listOfWords.indexOf(inputed.texto.toLowerCase()) == -1){
      listOfWords.push(inputed.texto.toLowerCase())
    }
  }
  if(value != ""){
    listOfWords.push(value)
  }
  var oldDs=JSON.parse(JSON.stringify(productregistryDiferentSize))
  productregistryDiferentSize.length=0
  shopSizeList.innerHTML=""
  for(var each in listOfWords){
    var lw=listOfWords[each].toLowerCase()
    var option=document.createElement("option")
    option.value=productregistryDiferentSize.length
    option.innerHTML=lw.toLowerCase()
    shopSizeList.appendChild(option)
    var z={
      precio:null,
      inventario:null,
      texto:lw
    }
    for(var each2 in oldDs){
      var ox=oldDs[each2]
      if(ox.texto == lw){
        z.precio=ox.precio
        z.inventario=ox.inventario
        break
      }
    }
    productregistryDiferentSize.push(z)
  }


  //preselectionSizeSpanArray.length=0

  rflist.style.opacity=0
  rflist.style.height="50px"
  setTimeout(function(){
    rflist.style.display="none"
    shprlisection.style.display="block"
  },600)
  recallRemoveBtn()
  updateShopSizeList()
}
function updateShopSizeList(){
  shopSizeList.innerHTML=""
  for(var each in productregistryDiferentSize){
    var sx=productregistryDiferentSize[each]
    var option=document.createElement("option")
    option.value=sx.texto;
    option.innerHTML=sx.texto;
    shopSizeList.appendChild(option)
  }
  var selectedIndex=shopSizeList.selectedIndex
  var z=productregistryDiferentSize[selectedIndex]
  if(z != null){
    shopInputInventario.value=z.inventario
    shopInputPrice.value=z.precio
  }else{
    shopInputInventario.value=""
    shopInputPrice.value=""
  }

  //var index=currencyList.indexOf(config.using.coin)
  //shopCurrencyList.selectedIndex=index
  recallRemoveBtn()
}
function recallRemoveBtn(){
  if(productregistryDiferentSize.length > 1 ){
    rmvtIcon.style.display="block"
  }else{
    rmvtIcon.style.display="none"
  }
}








//----