Added button 4 Image Preview, added product code demo

server/was.rb

@@ -362,6 +362,7 @@ class AddExternalImage < Riddl::Implementation
     </svg>'
     
     path = File.join(File.dirname(__dir__),'images/uploads', @r[0], @r[1], id.to_s)
+    FileUtils.mkdir_p(path)
     File.open(File.join(path, lang + ".svg"), 'wb') do |file|
       file.write(image)
     end
@@ -696,6 +697,7 @@ end
 
 class SearchImages2 < Riddl::Implementation
   def response
+  
     iter = @p[0].value.split(".")
     searchstring = ""
     count = 0
@@ -711,6 +713,7 @@ class SearchImages2 < Riddl::Implementation
     iter.each do |item|
       if !item.nil?
         if item.to_s != "*"
+          item.to_s.gsub! '_empty_', '/'
           searchstring = searchstring + " and (P" + count.to_s + "='*' or P" + count.to_s + " = '" + item.to_s + "')"
           else
           searchstring = searchstring + " and (P" + count.to_s + "!=''" + ")"

ui/css/design.css

@@ -73,7 +73,6 @@ td {
 .removeImage a{
 	color:var(--x-ui-light-text-color) !important;
 	text-decoration:none !important;
-
 }
 
 .mouseOver{
@@ -103,6 +102,18 @@ td {
 	width: 1em;
 }
 
+.inspect{
+	font-style: normal;
+	font-size:2em;
+	width: 1em;
+  height: 100px;
+}
+
+.inspect a{
+	color:var(--x-ui-light-text-color) !important;
+	text-decoration:none !important;
+}
+
 #error, #replacements {
 	background-color: #efefef;
 	padding-bottom: 1em;

ui/imageReplacement.php

@@ -67,6 +67,7 @@
   foreach ($style as $result) {
     $style2 = $xpath->query('./preceding-sibling::*[1]', $result);
     //echo $style2[0]->nodeName;
+    //echo $result->nodeValue . " ";
     //get Rect
     foreach ($style2 as $result3) {
       //echo $result->nodeValue;

ui/index.html

@@ -126,6 +126,65 @@
               </div>
             </div>
             
+            <div style="background-color: #efefef; padding-bottom: 1em; margin-top:1em">
+            <div class="wasGroup">
+              <div class="wasLeft">Status:</div>
+              <div class="wasRight"><b>Work in Progress</b></div>
+            </div>
+            <div class="wasGroup">
+              <div class="wasLeft">Electronic</div>
+              <div class="wasRight">E</div>
+            </div>
+            
+            <div class="wasGroup">
+              <div class="wasLeft">...</div>
+              <div class="wasRight">...</div>
+            </div>
+            
+            <div class="wasGroup">
+              <div class="wasLeft">Model</div>
+              <div class="wasRight">
+                <select name="cylModel" id="cylModel">
+                  <option value="*">*</option>
+                  <option value="KZ-S">KZ-S</option>
+                  <option value="RKZ-S">RKZ-S</option>
+                  <option value="HZ-S">HZ-S</option>
+                  <option value="RHZ-S">RHZ-S</option>
+                  <option value="DZ-S">DZ-S</option>
+                  <option value="RDZ-S">RDZ-S</option>
+                </select>
+              </div>
+            </div>
+            
+            <div class="wasGroup">
+              <div class="wasLeft">Outside Cyl. Length</div>
+              <div class="wasRight">
+                <select name="outsideCyl" id="outsideCyl">
+                  <option value="*">*</option>
+                  <option value="31">31</option>
+                  <option value="36">36</option>
+                  <option value="41">41</option>
+                  <option value="46">46</option>
+                  <option value="51">51</option>
+                  <option value="56">56</option>
+                  <option value="61">61</option>
+                </select>
+              </div>
+            </div>
+            
+            <div class="wasGroup">
+              <div class="wasLeft">Inside Cyl.</div>
+              <div class="wasRight">
+                <select name="insidecyl" id="insidecyl">
+                  <option value="*">*</option>
+                  <option value="31">31 ... 61</option>
+                  <option value="36">K31 ... K61</option>
+                </select>
+              </div>
+            </div>
+            
+            
+            </div>
             
             <div class="wasGroup">
               <div class="wasLeft">Description</div>
@@ -175,6 +234,7 @@
                   <table style="width:100%">
                     <tr>
                       <td class="handle">⇅</td>
+                      <td class="inspect"><a target="_blank" data-class='showimage' href="">👁</a></td>
                       <td data-class='image' class="image"></td>
                     </tr>
                   </table>

ui/js/design.js

@@ -25,8 +25,9 @@ function overlayOn(value) {
     ref.bind('getUrl',{"xyz": event.data.ka}, function(event, extra1){
       var data = event.data                      
       overlayOff();
+      
       //fill input with url
-      $(data.xyz).prev().val(extra1.url)
+      $(data.xyz).parent().parent().find(".abbreviationInput").val(extra1.url)
     });
   });
 }
@@ -245,7 +246,6 @@ function savePattern(stationID) { //Save 2 DB
     url: "../server/"+stationID,
     success: function(res) {
 		  getPattern(stationID, res.id)
-		  loadStations()
     },
     error: function (request, status, error) {
       alert(request.responseText + status + error);
@@ -398,72 +398,94 @@ function getImages(stationID, patternID){ //Get From DB 2 HTML
   $('#addExternalImage').attr("onclick", "addExternalImage(" + stationID + "," + patternID + ")");
   
   
+  //Image preview needs pattern
   $.ajax({
-	  type: "GET",
-	  url: "../server/"+stationID+ "/" + patternID + "/images",
-	  dataType: "xml",
-	  success: function(xml) {
-      var count = 0;
-      $(xml).find('image').each(function(index){
-        
-        curID = $(this).attr('id')
-        $(this).find('variant').each(function(){
-          
-          if($(this).attr('lang') == $('#image_language option:selected').text()){
-            ++count;
-            var clone = document.importNode(document.querySelector('#imagePreview').content,true);
-            
-            var imgsrcsingle = "../images/uploads/"+stationID+ "/" + patternID + "/" + curID + "/"+ $(this).attr('lang') + ".svg";
-            var imgsrc = imgsrcsingle + "?" + Date.now();
-            
-            //$('[data-class=image]',clone).append('<img id="theImg" src="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
-            
-            //$('[data-class=image]',clone).append('<object class="theImg" id="theImg" data="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
+    type: "GET",
+    url: "../server/"+stationID+ "/" + patternID,
+    dataType: "xml",
+    success: function(xml) {
+      pattern = xml.getElementsByTagName('pattern')[0].getAttribute("value");
+  
+      //get all images
+      $.ajax({
+        type: "GET",
+        url: "../server/"+stationID+ "/" + patternID + "/images",
+        dataType: "xml",
+        success: function(xml) {
+          var count = 0;
+          $(xml).find('image').each(function(index){
             
+            curID = $(this).attr('id')
+            $(this).find('variant').each(function(){
+              
+              if($(this).attr('lang') == $('#image_language option:selected').text()){
+                ++count;
+                var clone = document.importNode(document.querySelector('#imagePreview').content,true);
+                
+                var imgsrcsingle = "../images/uploads/"+stationID+ "/" + patternID + "/" + curID + "/"+ $(this).attr('lang') + ".svg";
+                var imgsrc = imgsrcsingle + "?" + Date.now();
+                
+                //$('[data-class=image]',clone).append('<img id="theImg" src="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
+                
+                //$('[data-class=image]',clone).append('<object class="theImg" id="theImg" data="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
+                
+                
+                //managing that internal and external pictures look the same
+                $('[data-class=image]',clone).load(imgsrc, function(){
+                    var width = $(this).children("svg").attr("width")
+                    var height = $(this).children("svg").attr("height")
+                    
             
-            //managing that internal and external pictures look the same
-            $('[data-class=image]',clone).load(imgsrc, function(){
-                var width = $(this).children("svg").attr("width")
-                var height = $(this).children("svg").attr("height")
+                    $(this).children("svg").attr("viewBox","0 0 " + pictureWidth + " " + pictureHeight + "");
+                    $(this).children("svg").attr("width","200");
+                    $(this).children("svg").attr("height","100");
+                });
                 
-        
-                $(this).children("svg").attr("viewBox","0 0 " + pictureWidth + " " + pictureHeight + "");
-                $(this).children("svg").attr("width","200");
-                $(this).children("svg").attr("height","100");
+                $('[data-class=image]',clone).attr("onclick", "overlayOnImg('" + imgsrcsingle + "')" );
+                
+                
+                
+                
+                //Image Preview
+                $('[data-class=showimage]',clone).attr("href", "imageReplacement.php?___image___="+stationID+ "/" + patternID + "/" + curID + "/"+ $(this).attr('lang') + ".svg" +"&*ProductCode=" + pattern );
+               
+                
+                
+                
+                
+                
+                //$('[data-class=image]',clone).append('<object class="theImg" id="theImg" data="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
+                
+                
+                //$('[data-class=image]',clone).append('<div style="background-image: url(' + imgsrc+ ')" height="100px" />')
+                
+                $('[data-class=label]',clone).val($(this).attr('label'));
+                $('[data-class=label]',clone).attr("origValue", $(this).attr('label'));			
+                $('[data-class=imageId]',clone).text(curID);
+                $('[data-class=imageId]',clone).attr("class", "imageID")
+                
+                $('[data-class=options] a',clone).attr('href','javascript:deleteImage(' + stationID + ','+ patternID + ',' + curID + ',"' + $(this).attr('lang') +  '");');
+                $('#imageListing').append(clone);
+              }
             });
+          });
+          $('#image_count').text(count);
+          
+          
+          
+          /*
+          $(".image").each(function() {
+            alert("mhm");
             
-            $('[data-class=image]',clone).attr("onclick", "overlayOnImg('" + imgsrcsingle + "')" );
-            
-            //$('[data-class=image]',clone).append('<object class="theImg" id="theImg" data="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
-            
-            
-            //$('[data-class=image]',clone).append('<div style="background-image: url(' + imgsrc+ ')" height="100px" />')
             
-            $('[data-class=label]',clone).val($(this).attr('label'));
-            $('[data-class=label]',clone).attr("origValue", $(this).attr('label'));			
-            $('[data-class=imageId]',clone).text(curID);
-            $('[data-class=imageId]',clone).attr("class", "imageID")
             
-            $('[data-class=options] a',clone).attr('href','javascript:deleteImage(' + stationID + ','+ patternID + ',' + curID + ',"' + $(this).attr('lang') +  '");');
-            $('#imageListing').append(clone);
-          }
-        });
-      });
-	    $('#image_count').text(count);
-      
-      
-      
-      /*
-      $(".image").each(function() {
-        alert("mhm");
-        
-        
-        
-        $(this).children().attr("viewBox","0 0 " + "300" + " 300");
-      
+            $(this).children().attr("viewBox","0 0 " + "300" + " 300");
+          
+          });
+          */
+          
+        }
       });
-      */
-      
     }
   });
   
@@ -487,7 +509,7 @@ function addExternalImage(stationID, patternID){
   var extImage = $.parseXML("<externalImage/>");
   $(extImage).find("externalImage").append("<url>" + $('#addExternalImageUrl').val() +"</url>");
   $(extImage).find("externalImage").append("<lang>" + $('#image_language option:selected').text() + "</lang>");
-  
+  console.log(extImage);
   
   $.ajax({
     type: "POST",

ui/js/imageUpload.js

@@ -169,17 +169,12 @@ function imageInit(){
 						alert( 'Error. Please, try again!' );
 					};
 					ajax.send( ajaxData );
-          
-          
-          
           form.classList.remove( 'is-uploading' );
 					form.classList.remove( 'is-error', 'is-success' );
           
           e.target.files = [];
 					input.value = "";
           droppedFiles = false;
-          
-          
 				}
 				else // fallback Ajax solution upload for older browsers
 				{