Added image Override dialogue, ui updates, productCode creation

ui/TransformProductCode.php

@@ -5,7 +5,7 @@
   
   header('Content-Type: application/json');
   
-  $url = realpath("./json/ProductCode.json");
+  $url = realpath("./../server/json/ProductCode.json");
   $json = file_get_contents($url);
   $json = json_decode($json);
   

ui/css/design.css

@@ -102,6 +102,13 @@ td {
 	width: 1em;
 }
 
+.handle3{
+	cursor: grab;
+	font-style: normal;
+	font-size:2em;
+	width: 1em;
+}
+
 .inspect{
 	font-style: normal;
 	font-size:2em;
@@ -165,7 +172,7 @@ td {
 }
 
 
-#overlay {
+#overlay, #overlayNotClickable {
   position: fixed; /* Sit on top of the page content */
   display: none; /* Hidden by default */
   width: 100%; /* Full width (cover the whole page) */
@@ -176,22 +183,32 @@ td {
   bottom: 0;
   background-color: rgba(0,0,0,0.5); /* Black background with opacity */
   z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
-  cursor: pointer; /* Add a pointer on hover */
   text-align: center;
   vertical-align: middle;
 }
 
-#overlaycontentsize{
+#overlay {
+  cursor: pointer; /* Add a pointer on hover */
+}
+
+#overlaycontentsize, #overlaycontentsizeNotClickable{
   position: absolute;
   top: 50%;
   left: 50%;
-  font-size: 50px;
-  color: white;
+  font-size: 12px;
+  color: black;
   transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   background-color: rgba(255,255,255,1);
   max-height: 100%;
   max-width: 100%;
+  z-index:5;
+  overflow:hidden;
+  border-radius: 10px;
+}
+
+#overlaycontentsizeNotClickable .noDeco:hover{
+  text-decoration: none;
 }
 
 #overlaycontent{

ui/css/imageSlicer.css

@@ -7,6 +7,8 @@
   width: 100%;
 }
 
+
+
 .rect {
   box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -23,10 +25,6 @@
 }
 
 
-
-
-
-
 .patternPart2 span{
 	display:block;
 	text-align: center;
@@ -64,9 +62,47 @@
   background-color: #efefef;
 }
 
+/* Overlay */
 
+.slicerRedlink{
+  text-align: center;
+  color: red;
+  border: 1px solid;
+  height: 1.4em;
+  padding: 0.2em 0.55em;
+  
+}
+
+.CloseOverlayTopRight{
+  float: right;
+  margin: 0.2em;
+  position: absolute;
+  top: 0.2em;
+  right: 2.0em;
+  z-index:6;
+}
 
 
+
+.slicerOldImg, .slicerNewImg{
+  width:150px;
+}
+  
+#overlaycontentsizeNotClickable .slicerChangeButton{
+  width: auto;
+}
+
+.slicerScrollbar{
+  overflow-y: scroll;
+  position: relative;
+  height: 90vh;
+  padding: 2em 1em;
+}
+
+.SlicerScrolling{
+  position: relative;
+}
+
 /*.image-with-rect {
  position: relative;
  width: 100%;

ui/css/settings.css

@@ -0,0 +1,3 @@
+#jsonfiletxtarea{
+  width: 100%;
+}

ui/imageOverride.php

@@ -0,0 +1,15 @@
+<?php
+  ini_set('display_errors', 1);
+  ini_set('display_startup_errors', 1);
+  error_reporting(E_ALL);
+  
+  
+  $overridden = htmlspecialchars($_GET["overridden"]);
+  $urlnew = htmlspecialchars($_GET["new"]);
+  
+  unlink($overridden);
+  rename($urlnew, $overridden);
+  echo "img overriden";
+
+  
+?>

ui/imageReplacement.php

@@ -84,6 +84,11 @@
   $asocarray = json_decode($json, true);
  
   
+  
+  
+  
+  
+  $curstation = $_GET["Station"];
   //Einzelbilder vom Universal Storage laden
   foreach ($keyValueStore as $key => $value) {
   
@@ -96,16 +101,22 @@
     
     foreach($keyarray as $keypart){
       //only if all keyparts (Pb Sy Pk Of) can be found within the asociative array (Pb -> E, Sy -> X) the file can be linked otherwise there is a problem.
-      if(array_key_exists ($keypart, $asocarray)){
+      if($keypart == "ID"){
+        $fullfilename = $fullfilename . "_ID;" . substr($keyorig, strrpos($keyorig, "ID:") + 3);
+        break;
+        
+      }
+      else if(array_key_exists ($keypart, $asocarray)){
         $fullfilename = $fullfilename . "_" . $keypart . ";" . $asocarray[$keypart];
       }
       else{
+        //echo "Continue";
         continue 2;
       }
     }
     $fullfilename = substr($fullfilename, 1); 
-    $fullfilename = "https://centurio.work/customers/evva/universal-storage/storage/Einzelbilder/" . $fullfilename . ".jpg";
-    //echo $fullfilename;
+    $fullfilename = "https://centurio.work/customers/evva/universal-storage/storage/JohannesEinzelbilder/" . $curstation . "_" . $fullfilename . ".jpg";
+    //echo $fullfilename . "<br>";
   
     
     $element3 = $doc->createElement('pattern');

ui/imageSlicer.php

@@ -0,0 +1,57 @@
+<?php
+  ini_set('display_errors', 1);
+  ini_set('display_startup_errors', 1);
+  error_reporting(E_ALL);
+  
+  header('Content-Type: application/json');
+  $asocarray = array();
+  
+  $imgurl = htmlspecialchars($_POST["url"]);
+  $alldata = json_decode($_POST["alldata"]);
+  //var_dump( $alldata->rects );
+  $savelocation = $_POST["savelocation"];
+  //echo $savelocation;
+  
+  if ( ! is_writable($savelocation)) {
+    $asocarray["error"] = $savelocation . ' must be writable!!!';
+    //echo $savelocation . ' must be writable!!!';
+  }
+  else{
+    $im = imagecreatefromjpeg($imgurl);
+    $counter = 0;
+    foreach($alldata->rects as $rect){
+      $filename = $savelocation;
+      
+      $filename = $filename . $alldata->name . "_";
+      $filenamecpy = $filename;
+        
+      foreach($rect->pattern as $key => $val) {
+        $filename = $filename . $key . ";" . $val . "_";
+      }
+      if($rect->idtext != ""){
+        $filename = $filename . "ID" . ";" . $rect->idtext . "_";
+      }
+      
+      //only save image if at least one checkbox is active or a text is set.
+      if($filenamecpy != $filename){
+        
+        $filename = substr($filename, 0, -1);
+        $filename = $filename . ".jpg";
+        
+        //check if file exists if so, create file with other name and return as json
+        if(file_exists($filename)) {
+          $asocarray[$counter]["old"] = $filename;
+          $filename = $savelocation . "zwischen" . $counter . ".jpg";
+          $asocarray[$counter]["new"] = $filename;
+        }
+      
+        //echo $filename;
+        $im2 = imagecrop($im, ['x' => $rect->X, 'y' => $rect->Y, 'width' => $rect->W, 'height' => $rect->H]);
+        imagejpeg($im2, $filename);
+        imagedestroy($im2);
+      }
+      ++$counter;
+    }
+  }
+  echo json_encode($asocarray);
+?>

ui/index.html

@@ -50,10 +50,12 @@
     <!-- custom stuff, play arround  -->
     <link   rel="stylesheet"      href="css/design.css" type="text/css"/>
     <link   rel="stylesheet"      href="css/imageSlicer.css" type="text/css"/>
+    <link   rel="stylesheet"      href="css/settings.css" type="text/css"/>
     
     
     <script type="text/javascript" src="js/design.js"></script>
     <script type="text/javascript" src="js/imageSlicer.js"></script>
+    <script type="text/javascript" src="js/settings.js"></script>
     
     
     <script type="text/javascript" src="js/imageUpload.js"></script>
@@ -78,6 +80,8 @@
       <ui-before                                  ><a class="logo" href="/customers/evva"></a></ui-before>
       <ui-tab class=""         data-tab="station"           >Stations</ui-tab>
       <ui-tab class="inactive" data-tab="cutter"            >Slicer</ui-tab>
+      <ui-tab class="inactive" data-tab="settings"          >Settings</ui-tab>
+      <ui-tab class="inactive" data-tab="assignment"          >Assignment</ui-tab>
       <!-- <ui-tab class="inactive" data-tab="patternAlignment"  >Alignment</ui-tab> -->
       <ui-behind                                  ></ui-behind>
     </ui-tabbar>
@@ -347,6 +351,12 @@
             <div class="wasLeft">Status:</div>
             <div class="wasRight"><b>Work in Progress</b></div>
           </div>
+          
+          
+          <div class="wasGroup">
+            <div class="wasLeft">Fill From Name: <a class="mouseOver" href="#" title="Press 'enter' after editing to fill the form with the pattern."></a></div>
+            <input type="text" id="slicerpatterninput" name="description">
+          </div>
             
           <form id="sliceform"  onsubmit="submitSlices()">
           
@@ -406,6 +416,7 @@
                 <div data-class='description' class="wasLeft">
                   RectID: 
                   <span data-class='RectID' class="RectID"></span>
+                  <div class="handle3">⇅</div>
                 </div>
                 <div class="wasRight">
                   <div class="patternPart2">
@@ -444,14 +455,58 @@
                 <input data-class='input' type="text" class="patternPart3Input " maxlength="4" size="4" value="">
               </div>
             </template>
+            
+            
+            
+            <template id="SlicerDupliOverlay">
+              <div class="SlicerScrolling">
+                <a class="noDeco" href="javascript:overlayOff()">
+                  <div class="slicerRedlink CloseOverlayTopRight" >
+                        ⨯
+                  </div>
+                </a>
+                <div class="slicerScrollbar" data-class='mainDiv'>
+                  <div data-class='header'>
+                    <h1>Achtung Bilder werden Überschrieben</h1>
+                  </div>
+                  <table data-class='ImgList'>
+                    <tr>
+                      <th>Old</th>
+                      <th>New</th>
+                      <th></th>
+                    </tr>
+                  </table>
+                <a class="noDeco" href="javascript:overlayOff()">
+                  <div class="slicerRedlink" >
+                        ⨯ Schließen
+                  </div>
+                </a>
+                </div>
+              </div>
+            </template>
+            
+            
+  
+            <template id="SlicerDupliImageRow">
+              <tr>
+                <td>
+                  <img data-class='oldimg' class="slicerOldImg">
+                </td>
+                <td>
+                  <img data-class='newimg' class="slicerNewImg">
+                </td>
+                <td>
+                  <button class="slicerChangeButton" data-class='changebutton'>Übernehmen</button>
+                </td>
+              </tr>
+            </template>
+            
+            
               
-            <div class="wasGroup">
+            <div id="addRectanglesGroup" class="wasGroup">
               <div class="wasLeft">Rectangles</div>
               <div class="wasRight">
-                
                 <a href="javascript:addRectangle();">Add Rectangle</a>
-                  
-                  
               </div>
             </div>
           
@@ -460,14 +515,130 @@
               
             </div>
           
-            <button  class="width100" type="button" id="showJson">Json2Clipboard</button>
-            <input class="width100" type="submit" value="startCutting">
+            <div id="Json2ClipboardGroup" class="wasGroup">
+              <button  class="width100" type="button" id="showJson">Json2Clipboard</button>
+            </div>
+            <div class="wasGroup">
+              <input class="width100" type="submit" value="startCutting">
+            </div>
           </form>
           
             
         </div>
       </ui-area>
       
+      
+      
+      
+      
+      
+      
+     <ui-area data-belongs-to-tab="settings" class="inactive">
+      
+      <template id="JsonFile">
+        <div>
+          <a href="" data-class='jsonlink'></a>
+        </div>
+      </template>
+      
+      Json Files:
+      
+      <div id="JsonFiles">
+      
+      </div>
+      
+    </ui-area>
+      
+      <!--<ui-resizehandle data-belongs-to-tab="cutter" data-label="drag to resize" ></ui-resizehandle>-->
+      
+    <ui-area data-belongs-to-tab="settings" id="detailcolumn3" class="inactive">
+        <div class='x-ui-layout' style="padding: 10px">        
+          <div class="wasGroup">
+            <div class="wasLeft">Status:</div>
+            <div class="wasRight"><b>Work in Progress</b></div>
+          </div>
+          
+          
+          
+          <div class="wasGroup">
+            <form id="jsonfileform">
+              <textarea id="jsonfiletxtarea" rows="30" cols="50"></textarea>
+            
+              <input class="width100" type="submit" value="SaveJson">
+            
+            
+            </form>
+          </div>
+        </div>
+    </ui-area>
+    
+    
+    
+    <ui-area data-belongs-to-tab="assignment" class="inactive">
+      Once its Functional will be moved before Settings.
+      List of all Images
+      
+    </ui-area>
+      
+      <!--<ui-resizehandle data-belongs-to-tab="cutter" data-label="drag to resize" ></ui-resizehandle>-->
+      
+    <ui-area data-belongs-to-tab="assignment" id="detailcolumn4" class="inactive">
+      
+      Create new Link (die spalten werden aus dem namen aufgebaut das zb. nur System und Bauart ausgewählt werden können)
+      <table>
+        <tr>
+          <th>Station</th>
+          <th>Produktbereich</th>
+          <th>System</th>
+          <th>Produktkategorie</th>
+          <th>Bauart</th>
+          <th>Zylinderlänge außen</th>
+          <th>...</th>
+        </tr>
+        <tr>
+          <td>[ ] Station1</td>
+          <td>[ ] E</td>
+          <td>[ ] X</td>
+          <td>[ ] PZ</td>
+          <td>[ ] KZ-S</td>
+          <td>[ ] 31</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <td>[ ] Station2</td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td>[ ] RKZ-S</td>
+          <td>[ ] 36</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <td>[ ] Station3</td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td>[ ] HZ-S</td>
+          <td>[ ] 41</td>
+          <td>...</td>
+        </tr>
+        <tr>
+          <td>[ ] Station4</td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td>[ ] RHZ-S</td>
+          <td>[ ] 46</td>
+          <td>...</td>
+        </tr>
+      </table>
+      
+    </ui-area>
+    
+    
+    
+    
+    
       <!---
       <ui-area data-belongs-to-tab="patternAlignment" class="inactive">
       aa [Model, OutsideCyl, InsideCyl]
@@ -481,12 +652,14 @@
       <ui-area data-belongs-to-tab="patternAlignment" id="detailcolumn3" class="inactive">
       --->
         
-      </ui-area>
     </ui-content>
   </ui-rest>
   
         <div id="overlay" onclick="overlayOff()">
           <div id="overlaycontentsize"></div>        
         </div>
+        <div id="overlayNotClickable">
+          <div id="overlaycontentsizeNotClickable"></div>        
+        </div>
 </body>
 </html>

ui/js/design.js

@@ -12,7 +12,12 @@ var pictureHeight = 720;
 
 function overlayOn(value, showimage=false) {
   
+      if(showimage){
+  url = "https://centurio.work/customers/evva/universal-storage/ui/?iframe&path=Stationsbilder/Gesamtbilder/Station3"
+      }
+      else{
   url = "https://centurio.work/customers/evva/universal-storage/ui/?iframe"
+        }
   document.getElementById("overlay").style.display = "block";
   
   var iframe = $('#overlaycontentsize').append("<iframe id='overlaycontent' src='" + url + "' width='900' height='600'></iframe>");
@@ -31,7 +36,28 @@ function overlayOn(value, showimage=false) {
         $(data.xyz).parent().parent().find(".abbreviationInput").val(extra1.url)
       }
       else{
-        $("#sliceImg").attr("src",extra1.url)
+        
+        clearForm();
+        
+        //hide current image
+        var newSrc = extra1.url + "?rand=" + Math.random();
+        image = new Image();    
+        $("#sliceImg").hide("puff")
+        
+        //show new image and perform a resize of the rectangle
+        image.onload = function() {
+          $("#sliceImg").hide("puff", function() {
+                $(this).attr("src", newSrc).show("fold");
+                resizeAllRect();
+                fillFormName(extra1.url.substring(extra1.url.lastIndexOf('/') + 1).replace(/\.[^/.]+$/, ""));
+          });
+        }
+        image.src = newSrc;
+      
+      
+      
+        //  $("#sliceImg").attr("src",extra1.url + "?rand=" + Math.random() )
+        //  resizeAllRect()
       }
     });
   });
@@ -73,6 +99,8 @@ function overlayOnImg(data) {
 function overlayOff() {
   document.getElementById("overlay").style.display = "none";
   $('#overlaycontentsize').text("");
+  document.getElementById("overlayNotClickable").style.display = "none";
+  $('#overlaycontentsizeNotClickable').text("");
 }
 
 
@@ -452,7 +480,7 @@ function getImages(stationID, patternID){ //Get From DB 2 HTML
                 
                 
                 //Image Preview
-                $('[data-class=showimage]',clone).attr("href", "imageReplacement.php?___image___="+stationID+ "/" + patternID + "/" + curID + "/"+ $(this).attr('lang') + ".svg" +"&ProductCode=" + pattern );
+                $('[data-class=showimage]',clone).attr("href", "imageReplacement.php?___image___="+stationID+ "/" + patternID + "/" + curID + "/"+ $(this).attr('lang') + ".svg" +"&ProductCode=" + pattern + "&Station=" + "Station" + stationID);
                
                 
                 
@@ -494,9 +522,6 @@ function getImages(stationID, patternID){ //Get From DB 2 HTML
     }
   });
   
-  
-  
-  
   new Sortable(document.getElementById('imageListing'),{
 	  handle: '.handle',
 	  animation: 150

ui/js/imageSlicer.js

@@ -15,12 +15,21 @@ 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){
+function addRectangle1(id,x,y,w,h,pattern,idtext){
   //Show input fields
   var clone = document.importNode(document.querySelector('#RectanglesSetup').content,true);
   
@@ -63,30 +72,29 @@ function addRectangle1(id,x,y,w,h,pattern){
   
   //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);
+    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");
@@ -109,15 +117,16 @@ function addRectangle1(id,x,y,w,h,pattern){
      $('#Rect' + localID).css("background", "none");
   });
   
-  
   $('#imgrect').append(clone);
   
-  
-  
-  
   refitRect(localID);
   
   ++rectID;
+  
+  new Sortable(document.getElementById('imgRectangles'),{
+	  handle: '.handle3',
+	  animation: 150
+  });
 }
 
 
@@ -130,7 +139,7 @@ function createPatternForm(){
  
   var first = true;
   populate.forEach(function(populate2){
-    $.getJSON( "json/ProductCode.json", function( data ) {
+    $.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"]);
@@ -145,8 +154,6 @@ function createPatternForm(){
         $('#' + populate2).append(clone);
       });
       //Add "Text" to abk to show it within rects
-      if(first)
-        abk.push("Text")
       first = false;
     });
   });
@@ -154,7 +161,7 @@ function createPatternForm(){
   console.log(abk);
   
   //get Save locations
-  $.getJSON( "json/SlicerConfig.json", function( data ) {
+  $.getJSON( "../server/json/SlicerConfig.json", function( data ) {
     $.each( data["saveLocation"], function(i, item){
       $("#savelocation").append('<option value="' + item +'">' + item +'</option>');
     });
@@ -170,21 +177,21 @@ function createRectForm(station){
   
   
   $('#imgrect').html('<img class="image" id="sliceImg" src=' + imgsrc +' alt="Alt text" />');
-  $.getJSON( "json/Rectangle.json", function( data ) {
+  $.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"]);
+          addRectangle1(item["id"],item["X"],item["Y"],item["W"],item["H"],item["pattern"],item["idtext"]);
         });
       }
     });
-  });
+    });
 }
 
 
 function loadStationsForm(){
   
-  $.getJSON( "json/Rectangle.json", function( data ) {
+  $.getJSON( "../server/json/Rectangle.json", function( data ) {
     $.each( data["Configs"], function(i, item){
       $("#loadconfig").append('<option value="' + item["name"] +'">' + item["name"] +'</option>');
     });
@@ -204,11 +211,12 @@ function createJson(){
         pats[$(this).attr('name')] = true;
       });
     });
+    var txt;
     $(this).find(".patternPart3Text").each(function() {
-      pats[$(this).children("span").text()] = $(this).children("input").val();
+      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};
+    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};
@@ -240,36 +248,85 @@ function createJsonCutting(){
 function submitSlices(){
   //createJsonCutting();
   
-  console.log(JSON.stringify(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: "https://centurio.work/customers/evva/was/ui/images/imageSlicer.php",
+        url: "imageSlicer.php",
         data: { url: $("#sliceImg").attr("src"), savelocation: $("#savelocation").val(), alldata: JSON.stringify(createJsonCutting()) },
         success: function(data){
-          console.log(data);
+          if ( data.length <= 4 ) {
+            //clearFormFull();
+            alert("Saved Images");
+          }
+          else{
+            overlayOnDupliImages(data);
+            //clearFormFull();
+          }
+          
+          
         },
          error: function(xhr, status, error){
           console.error(xhr);
         }
     });
+  }
   
-  /*
+}
+
+
+function overlayOnDupliImages(data) {
   
-    imageurl,
-    savelocation,
-    code,
-    rectangles,
+  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) {
@@ -281,10 +338,70 @@ function copy2Clipboard(datalink) {
   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;
   });
@@ -300,4 +417,8 @@ $(document).ready(function() {
   $("#pattern2").append(clone);
   
   
+  //handle zoom event in order to fix rectangle position
+  window.addEventListener("resize", resizeAllRect, false); 
+  
+  
 });

ui/js/settings.js

@@ -0,0 +1,56 @@
+
+function IsJsonString(str) {
+    if (typeof str !== 'string') return false;
+    try {
+        const result = JSON.parse(str);
+        const type = Object.prototype.toString.call(result);
+        return type === '[object Object]' 
+            || type === '[object Array]';
+    } catch (err) {
+      alert("Json not valide: " + err);
+      return false;
+    }
+}
+
+function submitJson(filename){
+  jsonstring = $('#jsonfiletxtarea').val();
+  if(IsJsonString(jsonstring)){
+    $.ajax({
+      type: "PUT",
+      data: jsonstring,
+      headers: {"content-id": "list"},
+      contentType: "application/json",
+      url: "../server/json/" + filename,
+      success: function(res) {
+        alert("Saved!")
+      }
+    });
+  }
+}
+
+function showjsonfiles(){
+  $.getJSON( "../server/json", function( data ) {
+    $.each( data, function(i, item){
+      var clone = document.importNode(document.querySelector('#JsonFile').content,true);
+      $('[data-class=jsonlink]',clone).text(item);
+      $('[data-class=jsonlink]',clone).attr('href','javascript:openjson("' + item + '");');
+      $('#JsonFiles').append(clone);
+    });      
+  });
+}
+
+function openjson(filename){
+  $.getJSON( "../server/json/" + filename, function( data ) {
+    $('#jsonfiletxtarea').val(JSON.stringify(data, null, 2));
+    $('#jsonfileform').attr('onsubmit','submitJson("' + filename + '");');
+  });
+}
+  
+  
+$(document).ready(function() {
+  $(document).on('submit', '#jsonfileform', function() { //prevent page reload on form submit
+    return false;
+  });
+  $('#jsonfiletxtarea').val("");
+  showjsonfiles();
+});

ui/json/ProductCode.json

@@ -1,143 +0,0 @@
-{
-  "pattern": [
-    {
-      "name": "Produktbereich",
-      "abk": "Pb",
-      "types": [
-        "E"
-      ]
-    },
-    {
-      "name": "System",
-      "abk": "Sy",
-      "types": [
-        "X"
-      ]
-    },
-    {
-      "name": "Produktkategorie",
-      "abk": "Pk",
-      "types": [
-        "PZ"
-      ]
-    },
-    {
-      "name": "Bauart",
-      "abk": "Ba",
-      "types": [
-        "*",
-        "KZ-S",
-        "RKZ-S",
-        "HZ-S",
-        "RHZ-S",
-        "DZ-S",
-        "RDZ-S"
-      ]
-    },
-    {
-      "name": "Zylinderlänge außen",
-      "abk": "Za",
-      "types": [
-        "*",
-        "31",
-        "36",
-        "41",
-        "46",
-        "51",
-        "56",
-        "61"
-      ]
-    },
-    {
-      "name": "Zylinderlänge Innen",
-      "abk": "Zi",
-      "types": [
-        "*",
-        "31",
-        "36",
-        "41",
-        "46",
-        "51",
-        "56",
-        "61",
-        "K31",
-        "K36",
-        "K41",
-        "K46",
-        "K51",
-        "K56",
-        "K61"
-      ]
-    },
-    {
-      "name": "Oberfläche",
-      "abk": "Of",
-      "types": [
-        "",
-        "*",
-        "NI",
-        "NP",
-        "MP",
-        "PB",
-        "PS"
-      ]
-    },
-    {
-      "name": "Knaufform",
-      "abk": "Kf",
-      "types": [
-        "",
-        "*",
-        "X1K",
-        "ATA",
-        "Blind",
-        "2GW4"
-      ]
-    },
-    {
-      "name": "Panikfunktion",
-      "abk": "Pf",
-      "types": [
-        "",
-        "*",
-        "FZG",
-        "FAP",
-        "FLU",
-        "FSR"
-      ]
-    },
-    {
-      "name": "Verlängerte Außenkante",
-      "abk": "Va",
-      "types": [
-        "",
-        "*",
-        "AV05",
-        "AV10",
-        "AV15"
-      ]
-    },
-    {
-      "name": "Schließnase",
-      "abk": "Sn",
-      "types": [
-        "",
-        "*",
-        "SEP",
-        "SRP",
-        "BIF",
-        "Z10",
-        "Z18"
-      ]
-    },
-    {
-      "name": "Zusatzzertifikat",
-      "abk": "Zs",
-      "types": [
-        "",
-        "*",
-        "SKG"
-      ]
-    }
-  ]
-}

ui/json/SlicerConfig.json

@@ -1,6 +0,0 @@
-{
-  "saveLocation": [
-    "../../../universal-storage/storage/Einzelbilder/",
-    "../../../universal-storage/storage/JohannesEinzelbilder/"
-  ]
-}