WAS/ui/js/imageSlicer.js

rectID = 0;
colors = ["#edd400","#73d216","#cc0000","#f57900","#3465a4","#c17d11","#75507b","#fce94f","#8ae234","#ef2929","#fcaf3e","#729fcf","#eeeeec","#e9b96e","#ad7fa8","#888a85","#c4a000","#4e9a06","#a40000","#ce5c00","#204a87","#babdb6","#8f5902","#5c3566","#2e3436"].map(i => i + "70"); //Tango Colors with opacity
abk = [];

function addRectangle(){
  addRectangle1("", 0,0,1000,100)
}

function scalefactor(){
  return $('#sliceImg').innerWidth() / $('#sliceImg').prop('naturalWidth');
}

function refitRect(id){
   $('#Rect' + id).css('transform', 'scale(' + scalefactor() + ')');
}

function resizeAllRect() {
  console.log("resizing");
  for (var i = 0; i < rectID; i++) {
    refitRect(i);
    $('#Rect' + i).css("top", $('#Rect' + i).attr("y") * scalefactor() + "px");
    $('#Rect' + i).css("left", $('#Rect' + i).attr("x")  * scalefactor() + "px");
  }
} 

function changeRectPosition(id, style, amount){   
   $('#Rect' + id).css(style, amount + "px");
   refitRect(id);
}

function addRectangle1(id,x,y,w,h,pattern,idtext){
  //Show input fields
  var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
  
  var localID = rectID
  if(id != "")
    localID = id;
  
  $('[data-class=RectID]',clone).text("" + localID);
    
  $('[data-class=mainDiv]',clone).hover(function(){
    $('#Rect' + localID).css("background", colors[localID % colors.length]);
    $('#FormRect' + localID).css("background", colors[localID % colors.length]);
  },
  function(){
     $('#Rect' + localID).css("background", "none");
     $('#FormRect' + localID).css("background", "none");
  });
  $('[data-class=mainDiv]',clone).attr('id', 'FormRect' + localID); 
  
  $('[data-class=x]',clone).val(x);
  $('[data-class=x]',clone).on('input', function(e) {
    changeRectPosition(localID, "left", this.value * scalefactor() );
  });
  
  $('[data-class=y',clone).val(y);
  $('[data-class=y]',clone).on('input', function(e) {
    changeRectPosition(localID, "top", this.value * scalefactor());
  });
  
  $('[data-class=w',clone).val(w);
  $('[data-class=w]',clone).on('input', function(e) {
    changeRectPosition(localID, "width", this.value );
  });
  
  $('[data-class=h',clone).val(h);
  $('[data-class=h]',clone).on('input', function(e) {
    changeRectPosition(localID, "height", this.value );
  });
  
  
  //Alle Abkürzungen einfügen und prüfen ob im pattern angegeben
  abk.forEach(function(item){
    var clonepattern = document.importNode(document.querySelector('#RectanglePattern').content,true);
    $('[data-class=abk]',clonepattern).text(item);
    $('[data-class=input]',clonepattern).prop('name', item);
    if(typeof pattern !== 'undefined' && pattern[item]){
        $('[data-class=input]',clonepattern).prop('checked', true);
    }
    $('[data-class=RectanglePattern',clone).append(clonepattern);
    
  });
  
  var clonepatternidtext = document.importNode(document.querySelector('#RectanglePatternText').content,true);
  if(typeof idtext !== 'undefined'){
    $('[data-class=input]',clonepatternidtext).val(idtext);
  }
  $('[data-class=RectanglePattern',clone).append(clonepatternidtext);
      
      
  $('#imgRectangles').append(clone);
  
  //add rectangle
  var clone = document.importNode(document.querySelector('#RectanglesImage').content,true);
  $('[data-class=RectID]',clone).attr("id","Rect" + localID);
  $('[data-class=RectID]',clone).attr("y",y);
  $('[data-class=RectID]',clone).text("Rect" + localID);
  
  $('[data-class=RectID]',clone).css("top", y * scalefactor() + "px");
  $('[data-class=RectID]',clone).css("left", x  * scalefactor() + "px");
  $('[data-class=RectID]',clone).css("width", w + "px");
  $('[data-class=RectID]',clone).css("height", h + "px");
  
  
  $('[data-class=RectID]',clone).hover(function(){
    $('#FormRect' + localID).css("background", colors[localID % colors.length]);
    $('#Rect' + localID).css("background", colors[localID % colors.length]);
    

    $('#detailcolumn2').scrollTop( 0 );
    $('#detailcolumn2').scrollTop($('#FormRect' + localID).position().top - 50 );
  },
  function(){
     $("#detailcolumn2").stop();
     $('#FormRect' + localID).css("background", "none");
     $('#Rect' + localID).css("background", "none");
  });
  
  $('#imgrect').append(clone);
  
  refitRect(localID);
  
  ++rectID;
  
  new Sortable(document.getElementById('imgRectangles'),{
	  handle: '.handle3',
	  animation: 150
  });
}



function createPatternForm(){
  /* Load pattern config */
  //Create form for WAS/Stations/Pattern and WAS/Slicer
  var populate = ["FormPattern","FormPattern2"]
  
 
  var first = true;
  populate.forEach(function(populate2){
    $.getJSON( "../server/json/ProductCode.json", function( data ) {
      $.each( data["pattern"], function(i, item){
        var clone = document.importNode(document.querySelector('#PatternFormInit').content,true);
        $('[data-class=Name]',clone).text(item["name"]);
        $('[data-class=Abkürzung]',clone).text(item["abk"]);
        if(first)
          abk.push(item["abk"])
        $.each( item["types"], function(i, item){        
          $('[data-class=Optionen]',clone).append('<option value="' + item +'">' + item +'</option>');
        });
        $('[data-class=Optionen]',clone).attr("id", populate2 + "_Form_" + item["abk"]);
        
        $('#' + populate2).append(clone);
      });
      //Add "Text" to abk to show it within rects
      first = false;
    });
  });
  abk.length = 0;
  console.log(abk);
  
  //get Save locations
  $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
    $.each( data["saveLocation"], function(i, item){
      $("#savelocation").append('<option value="' + item +'">' + item +'</option>');
    });
  });
  
}

function createRectForm(station){
  
  var imgsrc = $("#sliceImg").attr("src")
  rectID = 0;
  $('#imgRectangles').text("");
  
  
  $('#imgrect').html('<img class="image" id="sliceImg" src=' + imgsrc +' alt="Alt text" />');
  $.getJSON( "../server/json/Rectangle.json", function( data ) {
    $.each( data["Configs"], function(i, item){
      if(item["name"] == station){
        $.each( item["rects"], function(i, item){
          addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"],item["idtext"]);
        });
      }
    });
    });
}


function loadStationsForm(){
  
  $.getJSON( "../server/json/Rectangle.json", function( data ) {
    $.each( data["Configs"], function(i, item){
      $("#loadconfig").append('<option value="' + item["name"] +'">' + item["name"] +'</option>');
    });
    $("#loadconfig").on('change', function() {
      createRectForm(this.value);
    });
  });
}

function createJson(){
  rects = []
  $(".singleRect").each(function() {
  
    var pats = {}
    $(this).find(".patternPart3").each(function() {
      $(this).find('.patternPart3Input:checked').each(function() {
        pats[$(this).attr('name')] = true;
      });
    });
    var txt;
    $(this).find(".patternPart3Text").each(function() {
      txt = $(this).children("input").val();
    });
    
    rect = {id: $( this ).find(".RectID").text(), X:$( this ).find('input[data-class="x"]').val(), Y:$( this ).find('input[data-class="y"]').val(), W:$( this ).find('input[data-class="w"]').val(), H:$( this ).find('input[data-class="h"]').val(), pattern: pats, idtext: txt};
    rects.push(rect);
  });
  allrects = {name: $("#loadconfig").val(), rects: rects};
  return allrects;
}


function createJsonCutting(){
  var rects = createJson();
  
  rects.rects.forEach(function(value) {
    pattern = value.pattern;
    abk.forEach(function(item){
      if(typeof $("#FormPattern2_Form_" + item).val() !== 'undefined' && typeof $("#FormPattern2_Form_" + item).val() !== 'undefined' && $("#FormPattern2_Form_" + item).val() !== ''){
        if(pattern[item]){
          pattern[item] = $("#FormPattern2_Form_" + item).find(":selected").text();
        }
        //console.log($("#Form_" + item).val())

      }
    });
      
      
      
  });
  return rects;
}

function submitSlices(){
  //createJsonCutting();
  
  //console.log(JSON.stringify(createJsonCutting()));
  
  //check if selected options are also selected in drop down menus
  var checkedoptions = new Set();
  $("#imgRectangles input[type=checkbox]:checked").each(function(index, data){
    checkedoptions.add($(data).attr("name"))
  });
  var allskips = [];
  var skippall = false;
  checkedoptions.forEach(function(item){ 
    if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
      allskips.push(item);
    }
  });
  
  
  if(!confirm("Achtung: [" + allskips + "] nicht ausgefüllt, fortfahren?")){
    skippall = true;
  }
  
  if(!skippall){
  request = $.ajax({
        type: "POST",
        url: "imageSlicer.php",
        data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
        success: function(data){
          if ( data.length <= 4 ) {
            //clearFormFull();
            alert("Saved Images");
          }
          else{
            overlayOnDupliImages(data);
            //clearFormFull();
          }
          
          
        },
         error: function(xhr, status, error){
          console.error(xhr);
        }
    });
  }
  
}


function overlayOnDupliImages(data) {
  
  document.getElementById("overlayNotClickable").style.display = "block";
  
  var clone = document.importNode(document.querySelector('#SlicerDupliOverlay').content,true);
  $.each( data, function(i, item){   
    var clone2 = document.importNode(document.querySelector('#SlicerDupliImageRow').content,true);
    $('[data-class=oldimg]',clone2).attr("src", item["old"] + '?rand=' + Math.random());
    $('[data-class=newimg]',clone2).attr("src", item["new"] + '?rand=' + Math.random());
    $('[data-class=changebutton]',clone2).attr("onclick", "javascript:changeimg(\"" + item["old"] + "\", \"" + item["new"] +"\", this )");
    $('[data-class=ImgList]',clone).append(clone2);
  });
  $('#overlaycontentsizeNotClickable').append(clone)
  
}

function changeimg(oldimg, newimg, buttonelement) {
  
  $.get( "imageOverride.php?overridden=" + oldimg + "&new=" + newimg , function( data ) {
    //hide button
    $(buttonelement).hide(200);
  
    //console.log(data);
  });

}





function showJson(){
  copy2Clipboard(JSON.stringify(createJson()))
}

function copy2Clipboard(datalink) {
  const el = document.createElement('textarea');
  el.value = datalink;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}

function clearFormFull(){
  clearForm();
  $('#slicerpatterninput').val("");
}
  
function clearForm(){
  $('#FormPattern2').find("select").prop("selectedIndex",0);
}

function fillFormName(value){
  $("#slicerpatterninput").val(value);
  fillslicerpattern();
}

function fillpatternForm(e) {
  var code = (e.keyCode ? e.keyCode : e.which);
  if (code == 13) { //Enter keycode
    fillslicerpattern();
  }
};

function fillslicerpattern(){
  clearForm();
  $.getJSON( "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(), function( data ) {
    $.each( data, function(i, item){        
      $("#FormPattern2_Form_" + i).val(item);
    });
  });
}

$(document).ready(function() {
  createPatternForm();
  loadStationsForm();
  
  //press enter to fill out patternform
  $("#slicerpatterninput").bind("keypress", {}, fillpatternForm);

  
  /*
$("#sliceImg").bind('load', function() {
  
  resizeAllRect();
  });*/

/*
$("#sliceImg").on('load', function () {
 resizeAllRect();
});
*/
/*
$('#sliceImg').on('load',function(){
    resizeAllRect();
});
*/

  
  $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
    if(!data["SlicerRectForm"]){
      $("#addRectanglesGroup").hide();
      $("#imgRectangles").hide();
      $("#Json2ClipboardGroup").hide();
    }
  });
  
  $(document).on('submit', '#sliceform', function() { //prevent page reload on form submit
    return false;
  });
  
  
  $("#showJson").click(function() {
    showJson();
  });
  
  $('#pattern2').text("");
  var clone = document.importNode(document.querySelector('#patternClone').content,true);
  $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
  $("#pattern2").append(clone);
  
  
  //handle zoom event in order to fix rectangle position
  window.addEventListener("resize", resizeAllRect, false); 
  
  
});