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 = [];
fullpattern = [];

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,assignmentsstation,assignments){
  //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);
      
  //add Assignment Station
  var clonepattern = document.importNode(document.querySelector('#RectanglesAssignment').content,true);
  $('[data-class=Assignment]',clonepattern).attr("name", "Station");
  $('[data-class=AssignmentAbk]',clonepattern).text("Station");
  //Stationen einfügen
  $.ajax({
    type: "GET",
    url: "../server/",
	  dataType: "xml",
    success: function(xml) {
      $(xml).find('station').each(function(index){
        console.log($(this).attr('id'));
        $('[data-class=AssignmentOptionen]',clonepattern).append('<option value="' + $(this).attr('id') +'">' + $(this).attr('id') +'</option>');
      });
    },
    async: false
  });
  //station hinzufügen/löschen
  $('[data-class=AssignmentAdd]',clonepattern).on('click', function(e) {
      var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
      
      $('[data-class=AssignmentText]',clonepatternvalue).text(e.target.previousElementSibling.value);
      
      //löschen
      $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
        e.target.parentNode.remove();
      });
      e.target.nextElementSibling.append(clonepatternvalue)
    });
  
  
  //Station Ausfüllen
  if(typeof assignmentsstation !== 'undefined' && assignmentsstation){
    $.each(assignmentsstation, function(i, item){
      var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
      $('[data-class=AssignmentText]',clonepatternvalue).text(item);
      //löschen
      $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
        e.target.parentNode.remove();
      });
      $('[data-class=AllAssignments]',clonepattern).append(clonepatternvalue)
    });
  }  
  
  $('[data-class=RectangleAssignmentStation]',clone).append(clonepattern);
  

  //add assignments
  $.each( fullpattern["pattern"], function(i, item){
    var clonepattern = document.importNode(document.querySelector('#RectanglesAssignment').content,true);
    
    $('[data-class=Assignment]',clonepattern).attr("name", item["abk"]);
    $('[data-class=AssignmentAbk]',clonepattern).text(item["abk"]);
    
    $.each( item["types"], function(i, item){        
      if(item != "")
        $('[data-class=AssignmentOptionen]',clonepattern).append('<option value="' + item +'">' + item +'</option>');
    });
    
    //einfügen
    $('[data-class=AssignmentAdd]',clonepattern).on('click', function(e) {
      var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
      
      $('[data-class=AssignmentText]',clonepatternvalue).text(e.target.previousElementSibling.value);
      
      //löschen
      $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
        e.target.parentNode.remove();
      });
      e.target.nextElementSibling.append(clonepatternvalue)
    });
    
    //Assignment Ausfüllen
    if(typeof assignments !== 'undefined' && assignments[item["abk"]]){
      $.each(assignments[item["abk"]], function(i, item){    
      
      
        var clonepatternvalue = document.importNode(document.querySelector('#RectanglesAssignmentValue').content,true);
        $('[data-class=AssignmentText]',clonepatternvalue).text(item);
        //löschen
        $('[data-class=AssignmentDelete]',clonepatternvalue).on('click', function(e) {
          e.target.parentNode.remove();
        });
        
        $('[data-class=AllAssignments]',clonepattern).append(clonepatternvalue)
      });
    
    }
    $('[data-class=RectangleAssignment]',clone).append(clonepattern);
     
  
  });  
  
      
      
      
  $('#imgRectangles').append(clone);
  
  //add rectangle to image
  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","FormPatternAssignment"]
  
  var first = true;
  populate.forEach(function(populate2){
    $.getJSON( "../server/json/ProductCode.json", function( data ) {
      fullpattern = 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;
  
  //get Save locations
  $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
    $.each( data["saveLocation"], function(i, item){
      $("#savelocation").append('<option value="' + item +'">' + item +'</option>');
    });
  });
  
}

function updateSlicerPatternForm(){
  
  
  
}

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"],item["assignmentsstation"], item["assignments"]);
        });
      }
    });
  });
}


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();
    });
    
    //get All stations
    var assignmentstation = assignmentGetAllStatios($(this));
    
    //get all assignments of current Rectangle
    var assignments = assignmentGetAllAssignments($(this));
    
    
    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, assignmentsstation: assignmentstation, assignments: assignments};
    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'){
        if(pattern[item]){
          //if rectangle is checked but nothing has been selected
          if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
            pattern[item] = "NoSelection";
          }
          else{
            pattern[item] = $("#FormPattern2_Form_" + item).find(":selected").text();
          }
        }
      }
    });
  });
  return rects;
}


function recCombi(data, currindex, result, cur) {
  var Keys = Object.keys(data);
  var optionKey = Keys[currindex];
  var vals = data[optionKey];
  for (var i = 0; i < vals.length; i++) {
    cur[optionKey] = vals[i];
    if (currindex + 1 < Keys.length) {
      recCombi(data, currindex + 1, result, cur);
    }
    else {
      var res = JSON.parse(JSON.stringify(cur));
      result.push(res);
    }
  }
  return result;
}

//gets assignment station for current rectangle
function assignmentGetAllStatios(cur) {
  var assignmentstation = []
  cur.find(".RectangleAssignmentStation div").each(function() {
    var allass = new Set();
    $(this).find(".RectanglesAssignmentValue").each(function() {
      allass.add($(this).text());
    });
    if(allass.size)
      assignmentstation = Array.from(allass);
  });
  return assignmentstation;
}

//gets assignments for current rectangle
function assignmentGetAllAssignments(cur) {
  var assignments = {};
  cur.find(".RectangleAssignment div").each(function() {
    assname = cur.attr('name')
    var allass = new Set();
    $(this).find(".RectanglesAssignmentValue").each(function() {
      allass.add($(this).text());
    });
    if(allass.size){
      assignments[assname] = Array.from(allass);
    }
  });
  return assignments;
}


function submitSlices(skip = false){
  //createJsonCutting();
  
  
  //check if selected options are also selected in drop down menus
  
  var skippall = false;
  if(!skip){
    var checkedoptions = new Set();
    $("#imgRectangles input[type=checkbox]:checked").each(function(index, data){
      checkedoptions.add($(data).attr("name"))
    });
    var allskips = [];
    checkedoptions.forEach(function(item){ 
      if($("#FormPattern2_Form_" + item).find(":selected").text() == ""){
        allskips.push(item);
      }
    });
    
    if (Array.isArray(allskips) && allskips.length) {
      if(!confirm("Achtung: [" + allskips + "] nicht ausgefüllt, fortfahren?")){
        skippall = true;
      }
    }
  }
  
  if(!skippall){
    request = $.ajax({
      type: "POST",
      url: "imageSlicer.php",
      async: false,
      data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
      success: function(data){
      
      
        console.log(Object.keys(data).length);
        if ( Object.keys(data).length == 1) {
          //clearFormFull();
          if(!skip){
            alert("Saved Images");
          }
        }
        else if(data.hasOwnProperty('error')){
          alert("Achtung Fehler: \n" + data.error)
          console.log(data);
        }
        else{
          if(!skip){
            overlayOnDupliImages(data);
          }
        }
      
        //Create Assignments (first returned url == first rectangle)
        if(data.hasOwnProperty('url')){          
          var counter = 0;
          $(".singleRect").each(function() {
          
            var txt = "";
            $(this).find(".patternPart3Text").each(function() {
              txt = $(this).children("input").val();
            });
          
            //get All stations
            var assignmentstation = assignmentGetAllStatios($(this));
            
            //get all assignments of current Rectangle
            var assignments = assignmentGetAllAssignments($(this));

            //get all combinations of assignments
            var result = recCombi(assignments, 0, [], {});
            
            //Save assignments
            $.each(assignmentstation, function(i, station) {
              $.each(result, function(i, item) {
                var obj = new Object();
                obj.img = data.url[counter];
                obj.station = station;
                obj.parts = item;
                obj.assignmentText = txt;
                
                //use storage function from assignment.js
                submitAssignment(obj);
              });
            });
            ++counter;
          });
        }        
      },
       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);
  });
}


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();
  jQuery.ajax({
    url: "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(),
    success: function (data) {
      $.each( data, function(i, item){        
        $("#FormPattern2_Form_" + i).val(item);
      });
    },
    async: false
  });
}


function getAllFolders(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
	$('#selectfolders').find('option').remove()
  $('#selectfolders').append("<option></option>")
  $.ajax({
	  type: "GET",
	  url: urlUniversalStorage + "server/allfolders/" + folder,
    async: false,
	  dataType: "json",
	  success: function(data) {
      $.each( data, function( key, value ) {
        $('#selectfolders').append("<option>" + value.slice(0,-1) +"</option>")
        
      });
    }
  });
}

function getAllFiles(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
 $.ajax({
	  type: "GET",
	  url: urlUniversalStorage + "server/images/" + folder,
	  dataType: "json",
	  success: function(data) {
      $.each( data, function( key, value ) {
      
      
        console.log(value);
        console.log(urlUniversalStorage + "storage/" + folder + "/" + value);
        $("#sliceImg").attr("src", urlUniversalStorage + "storage/" + folder + "/" + value)
        fillFormName(value);
        
        submitSlices(true);
        /*
        $("#slicerpatterninput").val(value);
        fillslicerpattern();
        */
      });
    }
 });
}


function togglenext(currelement){
    currelement.next().slideToggle();
}

$(document).ready(function() {
  createPatternForm();
  updateSlicerPatternForm();
  loadStationsForm();
  getAllFolders();
  //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();
  });
  
  $("#multiCut").click(function() {
    getAllFiles($('#selectfolders').val());
  });
  
  $('#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); 
  

  
});