WAS/ui/js/imageSlicer.js

rectID = 0;
colors = ["rgba(0,255,0,0.7)","rgba(255,0,0,0.7)","rgba(0,0,255,0.7)","rgba(0,255,255,0.7)","rgba(255,255,0,0.7)","rgba(255,0,255,0.7)","rgba(0,122,0,0.7)","rgba(122,0,0,0.7)","rgba(0,0,122,0.7)","rgba(0,122,122,0.7)","rgba(122,122,0,0.7)","rgba(122,0,122,0.7)"]
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 changeRectPosition(id, style, amount){   
   $('#Rect' + id).css(style, amount + "px");
   refitRect(id);
}

function addRectangle1(id,x,y,w,h,pattern){
  //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){
    if(item == "Text"){
      var clonepattern = document.importNode(document.querySelector('#RectanglePatternText').content,true);
      if(typeof pattern !== 'undefined' && typeof pattern[item] !== 'undefined'){
        $('[data-class=input]',clonepattern).val(pattern[item]);
      }
      $('[data-class=RectanglePattern',clone).append(clonepattern);
      
    }
    else {
      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);
    }
  });
  
  $('#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).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;
}



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( "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
      if(first)
        abk.push("Text")
      first = false;
    });
  });
  abk.length = 0;
  console.log(abk);
  
  //get Save locations
  $.getJSON( "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( "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"]);
        });
      }
    });
  });
}


function loadStationsForm(){
  
  $.getJSON( "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;
      });
    });
    $(this).find(".patternPart3Text").each(function() {
      pats[$(this).children("span").text()] = $(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};
    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()));
  
  request = $.ajax({
        type: "POST",
        url: "https://centurio.work/customers/evva/was/ui/images/imageSlicer.php",
        data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
        success: function(data){
          console.log(data);
        },
         error: function(xhr, status, error){
          console.error(xhr);
        }
    });
  
  /*
  
    imageurl,
    savelocation,
    code,
    rectangles,
  
  
  */
  
}

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);
}

$(document).ready(function() {
  createPatternForm();
  loadStationsForm();
  
  $(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);
  
  
});