added assignmentcreation during slicing

ui/imageSlicer.php

@@ -40,6 +40,8 @@
         $filename = substr($filename, 0, -1);
         $filename = $filename . ".jpg";
         
+        $asocarray["url"][$counter] = $filename;
+        
         //check if file exists if so, create file with other name and return as json
         if(file_exists($filename)) {
           $asocarray[$counter]["old"] = $filename;

ui/index.html

@@ -434,6 +434,22 @@
             </div>
 
                 
+            <template id="RectanglesAssignmentValue">
+              <span>
+                <a data-class='AssignmentDelete' style="padding-left: 2em;"> - </a>
+                <span data-class='AssignmentText' class="RectanglesAssignmentValue" style="width: 4em;">
+                </span>
+              </span>
+            </template>
+            
+            <template id="RectanglesAssignment">
+              <div data-class='Assignment'>
+                <span data-class='AssignmentAbk' style="display: inline-block; width: 3em;"></span>
+                <select data-class='AssignmentOptionen' name="" style="width: 7em"></select>
+                <a data-class='AssignmentAdd'> + </a>
+                <span data-class='AllAssignments'></span>
+              </div>
+            </template>
                 
                 
             <template id="RectanglesSetup">
@@ -461,7 +477,14 @@
                     <input data-class='h' type="number" class="patternPart2Input noarrow" maxlength="4" size="4" value="0" required>
                   </div>
                   <br>
-                  <div data-class='RectanglePattern' lass="RectanglePattern">
+                  <div data-class='RectanglePattern' class="RectanglePattern">
+                  </div>
+                  <a href="#" onclick="togglenext($(this));">Assignments</a>
+                  <div style="display: none">
+                    <div data-class='RectangleAssignmentStation' class="RectangleAssignmentStation">
+                    </div>
+                    <div data-class='RectangleAssignment' class="RectangleAssignment">
+                    </div>
                   </div>
                 </div>
               </div>

ui/js/assignment.js

@@ -88,19 +88,26 @@ function getImgText(imgtext){
   }
 }
 
-function submitAssignment(){
+function submitAssignment(newassignment){
+  
   var obj = new Object();
-  obj.img = $('#addExternalImageAssignment').val();
-  obj.station = $('#assignmentstation option:selected').text();
-  obj.parts = {};  
-  abk.forEach(function(item){
-    if(typeof $("#FormPatternAssignment_Form_" + item).val() !== 'undefined' && typeof $("#FormPatternAssignment_Form_" + item).val() !== 'undefined'){
-      //if($("#FormPatternAssignment_Form_" + item).find(":selected").text() != ""){
-        obj.parts[item] = $("#FormPatternAssignment_Form_" + item).find(":selected").text();
-      //}
-    }
-  });
-  obj.assignmentText = $('#assignmentText').val();
+  if(typeof newassignment !== "undefined"){
+    obj = newassignment;
+  }
+  else{
+    obj.img = $('#addExternalImageAssignment').val();
+    obj.station = $('#assignmentstation option:selected').text();
+    obj.parts = {};  
+    abk.forEach(function(item){
+      if(typeof $("#FormPatternAssignment_Form_" + item).val() !== 'undefined' && typeof $("#FormPatternAssignment_Form_" + item).val() !== 'undefined'){
+        //if($("#FormPatternAssignment_Form_" + item).find(":selected").text() != ""){
+          obj.parts[item] = $("#FormPatternAssignment_Form_" + item).find(":selected").text();
+        //}
+      }
+    });
+    obj.assignmentText = $('#assignmentText').val();
+  }
+  
   $.ajax({
     type: "Post",
 		data: JSON.stringify(obj),
@@ -113,9 +120,6 @@ function submitAssignment(){
       alert(request.responseText + status + error);
     }
   });
-  
-  
-  
 }
 
 function deleteAssignment(assignmentID) { //Delete From DB

ui/js/config.js

@@ -1,2 +1,2 @@
 
-var urlUniversalStorage = "https://centurio.evva.com/departments/emontage/universal-storage/";
+var urlUniversalStorage = "https://centurio.work/customers/evva/universal-storage/";

ui/js/imageSlicer.js

@@ -2,6 +2,7 @@
 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)
@@ -29,7 +30,7 @@ function changeRectPosition(id, style, amount){
    refitRect(id);
 }
 
-function addRectangle1(id,x,y,w,h,pattern,idtext){
+function addRectangle1(id,x,y,w,h,pattern,idtext,assignmentsstation,assignments){
   //Show input fields
   var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
   
@@ -40,12 +41,12 @@ function addRectangle1(id,x,y,w,h,pattern,idtext){
   $('[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");
+      $('#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); 
   
@@ -88,10 +89,105 @@ function addRectangle1(id,x,y,w,h,pattern,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
+  //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);
@@ -104,18 +200,19 @@ function addRectangle1(id,x,y,w,h,pattern,idtext){
   
   
   $('[data-class=RectID]',clone).hover(function(){
-    $('#FormRect' + localID).css("background", colors[localID % colors.length]);
-    $('#Rect' + localID).css("background", colors[localID % colors.length]);
+      $('#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");
+      $('#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);
   
@@ -137,6 +234,7 @@ function createPatternForm(){
   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"]);
@@ -163,6 +261,12 @@ function createPatternForm(){
     });
   });
   
+}
+
+function updateSlicerPatternForm(){
+  
+  
+  
 }
 
 function createRectForm(station){
@@ -177,7 +281,7 @@ function createRectForm(station){
     $.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"]);
+          addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"],item["idtext"],item["assignmentsstation"], item["assignments"]);
         });
       }
     });
@@ -211,7 +315,14 @@ function createJson(){
       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};
+    //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};
@@ -221,13 +332,11 @@ function createJson(){
 
 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";
@@ -236,16 +345,61 @@ function createJsonCutting(){
             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();
   
@@ -273,39 +427,72 @@ function submitSlices(skip = false){
   }
   
   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){
-        
-          if ( JSON.stringify(data) === '[]') {
-            //clearFormFull();
-            
-            if(!skip){
-              alert("Saved Images");
-            }
-          }
-          else if(data.hasOwnProperty('error')){
-            alert("Achtung Fehler: \n" + data.error)
-            console.log(data);
+    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(!skip){
-              overlayOnDupliImages(data);
-            }
-            //clearFormFull();
+        }
+        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();
+            });
           
-        },
-         error: function(xhr, status, error){
-          console.error(xhr);
-        }
+            //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);
+      }
     });
-  }
+  }  
 }
 
 
@@ -326,24 +513,18 @@ function overlayOnDupliImages(data) {
 }
 
 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;
@@ -376,15 +557,6 @@ function fillpatternForm(e) {
 
 function fillslicerpattern(){
   clearForm();
-  /*
-  $.getJSON( "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(), function( data ) {
-    $.each( data, function(i, item){        
-      $("#FormPattern2_Form_" + i).val(item);
-    });
-  });
-  */
-  
-  
   jQuery.ajax({
     url: "TransformProductCode.php?ProductCode=" + $("#slicerpatterninput").val(),
     success: function (data) {
@@ -438,8 +610,14 @@ function getAllFiles(folder = ""){ //Get DB 2 HTML //has to be synchronus in ord
  });
 }
 
+
+function togglenext(currelement){
+    currelement.next().slideToggle();
+}
+
 $(document).ready(function() {
   createPatternForm();
+  updateSlicerPatternForm();
   loadStationsForm();
   getAllFolders();
   //press enter to fill out patternform
@@ -476,15 +654,12 @@ $('#sliceImg').on('load',function(){
     return false;
   });
   
-  
-  
   $("#showJson").click(function() {
     showJson();
   });
   
   $("#multiCut").click(function() {
     getAllFiles($('#selectfolders').val());
-    
   });
   
   $('#pattern2').text("");
@@ -496,5 +671,6 @@ $('#sliceImg').on('load',function(){
   //handle zoom event in order to fix rectangle position
   window.addEventListener("resize", resizeAllRect, false); 
   
+
   
 });