WAS/ui/js/design.js

//delete = delets from DB
//remove = removes from HTML

//save = save to DB
//add = changes HTML

//get = get from DB
//new = changes HTML

var pictureWidth = 1280;
var pictureHeight = 720;

function overlayOn(value, showimage=false) {
  
  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>");
  
  iframe.find("#overlaycontent").bind('load',{"ka": value}, function(event){
    var ref = this.contentWindow.ref;
    //You can think that ref = $(this.contentWindow.test) but thery are different
    //they are two diferent references this might be a bug
    
    ref.bind('getUrl',{"xyz": event.data.ka}, function(event, extra1){
      var data = event.data                      
      overlayOff();
      
      //fill input with url
      if(!showimage){
        $(data.xyz).parent().parent().find(".abbreviationInput").val(extra1.url)
      }
      else{
        $("#sliceImg").attr("src",extra1.url)
      }
    });
  });
}

function overlayOnImg(data) {
  
  var url = new URL("" + data, document.baseURI).href  
  document.getElementById("overlay").style.display = "block";
  const imageext = ["png", "jpg", "svg"]
  const movieext = ["mp4"]
  var ext = url.substr(url.lastIndexOf('.') + 1);
  
  if(imageext.includes(ext)){
    $('#overlaycontentsize').load(url, function(){
    
      
        var width = $(this).children("svg").attr("width")
        var height = $(this).children("svg").attr("height")
      
        $(this).children("svg").attr("viewBox","0 0 " + width + " " + height);
        $(this).children("svg").attr("width",window.innerWidth * 0.7);
        $(this).children("svg").attr("height",window.innerHeight *0.7);
      
    });
  }
  else if(movieext.includes(ext)){
    $('#overlaycontentsize').append("<video id='overlaycontent' controls> <source src=" + url + " type=\"video/mp4\">Your browser does not support the video tag.</video>");
  }
  else{
    $('#overlaycontentsize').append("<iframe id='overlaycontent' src=" + url + "></iframe>");
  }
  
}




function overlayOff() {
  document.getElementById("overlay").style.display = "none";
  $('#overlaycontentsize').text("");
}



function saveStation() { //Save 2 DB
  if (confirm('Are you really, really, REALLY sure you want to create a New Station?')) {
    $.ajax({
      type: "POST",
      url: "../server/",
      success: function(res) {
        location.reload();
      }
    });
  }
}

function getStations(stationID , patternID ){ //Get DB 2 HTML
	$('#stations').text("");
	
	$.ajax({
    type: "GET",
    url: "../server/",
	  dataType: "xml",
    success: function(xml) {
      $(xml).find('station').each(function(index){
        
        var clone = document.importNode(document.querySelector('#line').content,true);
        $('[data-class=station]',clone).text($(this).attr('id'));
        $('[data-class=pattern] a',clone).before("[");
        $('[data-class=pattern] a',clone).text("Add Pattern");
        $('[data-class=pattern] a',clone).after("]");
        $('[data-class=pattern] a',clone).attr('href','javascript:newPattern('+ $(this).attr('id') + ');');
        $('[data-class=duplicate]',clone).text("");
        $('[data-class=delete]',clone).text("");
        $('#stations').append(clone);
        
        
        var curstation=$(this).attr('id');		  
        $(this).find('pattern').each(function(index){
          var clonePattern = document.importNode(document.querySelector('#line').content,true);
          $('[data-class=pattern] a',clonePattern).text($(this).attr('value'));
          $('[data-class=pattern] a',clonePattern).attr('href','javascript:getPattern(' + curstation + ','+ $(this).attr('id') + ');');
          $('[data-class=date]',clonePattern).text($.format.date(Date.parse($(this).attr('changed')), 'yyyy/MM/dd HH:mm:ss'));
          $('[data-class=duplicate] a',clonePattern).attr('href','javascript:duplicatePattern(' + curstation + ','+ $(this).attr('id') + ');');
          $('[data-class=delete] a',clonePattern).attr('href','javascript:deletePattern(' + curstation + ','+ $(this).attr('id') + ');');
          if (patternID != null && patternID == $(this).attr('id')){
            $('tr',clonePattern).css("background-color","#99cce6");
          }
          $('#stations').append(clonePattern);
        });
      });
    }
  });
}

function newPattern(stationID) { //HTML
	getPattern(stationID);
}


function getPattern(stationID, patternID){ //Get DB 2 HTML
  getStations(stationID, patternID)
  if (patternID == null){
    $('#patternform').attr('onsubmit', "savePattern("+stationID+")");
    $('#pattern_ID').text("");
    $('#pattern_description').val("");
    $('#imageListing').text("");
    $('#images').css("display", "none");
    $('#remove_pattern').css("display", "none");
    $('#error').css("display", "none");
    $('#replacements').css("display", "none");
  }
  else{
    $('#patternform').attr('onsubmit', "saveChangedPattern("+stationID+","+ patternID +")");
    $('#pattern_ID').text(patternID);
    getImages(stationID, patternID);
    $('#remove_pattern').css("display", "block");
    $('#remove_pattern').attr('onclick', "javascript:deletePattern("+stationID+","+ patternID +")");
    
    
    getError(stationID, patternID);
    getReplaceImages(stationID, patternID);
    
    $.ajax({
      type: "GET",
      url: "../server/"+stationID+ "/" + patternID,
      dataType: "xml",
      success: function(xml) {
        $(xml).find('pattern').each(function(index){
          var pattern = $(this).attr('value').split(".")
          for(var i = 0; i < pattern.length; i++)
          {
            if(i == 0){
              $("#patternInput .patternPartInput").val(pattern[i]);
              $("#patternInput .patternPartInput").attr('size', pattern[i].length);
            }
            else{
              var clone = document.importNode(document.querySelector('#patternClone').content,true);
              $('[data-class=part]',clone).val(pattern[i]);
              $('[data-class=part]',clone).limitkeypress({ rexp: keypressRegex() });
              $('[data-class=part]',clone).attr('size', pattern[i].length);
              
              $("#patternInput").append(clone);
            }
          }
          
          $('#pattern').val($(this).attr('value'));
          $('#pattern_description').val($(this).attr('description'));
        });
      }
    });
  }
  
  $('#pattern_details').css("display", "block");
  $('#pattern_station').text(stationID);
  $('#pattern_description').text("");
	
  //Reset Pattern
  $('#patternInput').text("");
  var clone = document.importNode(document.querySelector('#patternClone').content,true);
  $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
  $("#patternInput").append(clone);
}


function keypressRegex(){ //Helper Function
	return /^.{1,10}$/;
	//return /^[A-Za-z0-9\*]*$/; //Ohne Sonderzeichen
}

function removePatternPart(value) { //HTML
  if($( ".patternPart" ).length > 1)
  value.parent().remove();
}

function addPatternPart(useLast, curclass) { //HTML
  var clone = document.importNode(document.querySelector('#patternClone').content,true);
  $('[data-class=part]',clone).val("*");
  $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
  
  if(useLast){
    $("#" + curclass).children(".patternPart").last().after(clone);
    $("#" + curclass).last().children(".patternPartInput").focus();
    }else{
    $(':focus').parent().after(clone);
    $(':focus').parent().next().children(".patternPartInput").focus();
  }
}

function getPatternString(){ //Helper Function
	var val = "";
	var first = true;
	$(".patternPartInput").each(function() {
		if(first){
			first = false
			val += $(this).val()
    }
		else{
			val += "." + $(this).val()
    }
  });
	return val;
}

function savePattern(stationID) { //Save 2 DB
  var xmlDocument = $.parseXML("<pattern/>");
  $(xmlDocument).find("pattern").attr('id','0');
  $(xmlDocument).find("pattern").attr('value',getPatternString());
  $(xmlDocument).find("pattern").attr('description',$('#pattern_description').val());
  $(xmlDocument).find("pattern").attr('changed',new Date().toISOString());
  $.ajax({
    type: "POST",
		headers: {"content-id": "pattern"},
		data: (new XMLSerializer()).serializeToString(xmlDocument),
    contentType: "application/xml; charset=utf-8",
    url: "../server/"+stationID,
    success: function(res) {
		  getPattern(stationID, res.id)
    },
    error: function (request, status, error) {
      alert(request.responseText + status + error);
    }
  });
}

function saveChangedPattern(stationID, patternID) { //Save 2 DB
  var xmlDocument = $.parseXML("<pattern/>");
  $(xmlDocument).find("pattern").attr('id',$('#pattern_ID').text());
  $(xmlDocument).find("pattern").attr('value',getPatternString());
  $(xmlDocument).find("pattern").attr('description',$('#pattern_description').val());
  $(xmlDocument).find("pattern").attr('changed',new Date().toISOString());
  
  //Save Pattern
  $.ajax({
    type: "PUT",
		headers: {"content-id": "pattern"},
		data: (new XMLSerializer()).serializeToString(xmlDocument),
    contentType: "application/xml; charset=utf-8",
    url: "../server/"+stationID + "/" + patternID,
		//processData: false,
    success: function(res) {
    },
    error: function (request, status, error) {
      alert(request.responseText + status + error);
    }
  });
  
  //Update Labels 
  $(".imageInput").each(function() {
    //Optimization only update if lable changed
		if($(this).val() != $(this).attr("origValue"))
    $.ajax({
      type: "PUT",
      data: { 'label' : $(this).val()},
      headers: {"content-id": "label"},
      url: "../server/"+stationID + "/" + patternID + "/images/" + $(this).parent().find(".imageID").text() +"/" + $('#image_language option:selected').text(),
      success: function(res) {
      },
      error: function (request, status, error) {
        alert(request.responseText + status + error);
      }
    });
  });
  
  //Update Image Ordering
  var order = []
  $(".imageID").each(function() {
    order.push(parseInt($(this).text()))
  });
  $.ajax({
    type: "PUT",
		data: JSON.stringify(order),
		headers: {"content-id": "orderlist"},
    contentType: "application/json",
    url: "../server/"+stationID + "/" + patternID + "/images/reorder/" + $('#image_language option:selected').text(),
    success: function(res) {
    },
    error: function (request, status, error) {
      alert(request.responseText + status + error);
    }
  });
  
  //Update Error
  var errorList = $.parseXML("<error/>");
  $(".errorInput").each(function() {
    $(errorList).find("error").append("<reason>" +$(this).val()+"</reason>")
  });
  
  $.ajax({
    type: "PUT",
		headers: {"content-id": "error"},
		data: (new XMLSerializer()).serializeToString(errorList),
    contentType: "application/xml; charset=utf-8",
    url: "../server/"+stationID + "/" + patternID + "/error",
    success: function(res) {
    },
    error: function (request, status, error) {
      alert(request.responseText + status + error);
    }
  });
  
  
  //Update Replacement
  var replaceList = $.parseXML("<replacement/>");
  $(".replaceInput").each(function() {
    //console.log($(this).find('.abbreviation').val())
    //console.log($(this).find('.url').val())
    
    $(replaceList).find("replacement").append("<item>" + "<abbreviation>" + $(this).find('.abbreviation').val() + "</abbreviation>" + "<url>" + $(this).find('.url').val() + "</url>"+"</item>")
    
  });
  
  $.ajax({
    type: "PUT",
    headers: {"content-id": "replacement"},
    data: (new XMLSerializer()).serializeToString(replaceList),
    contentType: "application/xml; charset=utf-8",
    url: "../server/"+stationID + "/" + patternID + "/replacement",
    success: function(res) {
    },
    error: function (request, status, error) {
      alert(request.responseText + status + error);
    }
  });
  
  
  getPattern(stationID, patternID)	  
}

function deletePattern(stationID, patternID) { //Delete From DB
  if (confirm('Are you really, really, REALLY sure!')) {
    $.ajax({
      type: "DELETE",
      url: "../server/" + stationID + "/" + patternID,
      success: function(res) {
        location.reload();
      }
    });
  }
}


function duplicatePattern(stationID, patternID){ //Get DB 2 HTML
  $.ajax({
    type: "PUT",
    headers: {"content-id": "patternID"},
    data: { "patternID":patternID},
    contentType: "application/json",
    url: "../server/"+stationID + "/" + patternID,
    success: function(res) {
      getPattern(stationID, res["id"])
    },
    error: function (request, status, error) {
      alert(request.responseText + status + error);
    }
  });
}

function getImages(stationID, patternID){ //Get From DB 2 HTML
  $('#images').css("display", "block");
  $('#imageListing').text("");
  $('#imgUpload').attr("action", "../server/" + stationID + "/" + patternID + "/images");
  
  
  

  $('#addExternalImageUrl').val("");
  $('#addExternalImage').attr("onclick", "addExternalImage(" + stationID + "," + patternID + ")");
  
  
  //Image preview needs pattern
  $.ajax({
    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")
                    
            
                    $(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");
            
            
            
            $(this).children().attr("viewBox","0 0 " + "300" + " 300");
          
          });
          */
          
        }
      });
    }
  });
  
  
  
  
  new Sortable(document.getElementById('imageListing'),{
	  handle: '.handle',
	  animation: 150
  });
  
  new Sortable(document.getElementById('replaceImages'),{
	  handle: '.handle2',
	  animation: 150
  });
}

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",
    headers: {"content-id": "externalImage"},
    data: (new XMLSerializer()).serializeToString(extImage),
    contentType: "application/xml; charset=utf-8",
    url: "../server/" + stationID + "/" + patternID + "/images",
    success: function(res) {
      getPattern(stationID, patternID)	 
    }
  }); 
  
  
}

function deleteImage(stationID, patternID, imageID, lang) { //Delete From DB
  $.ajax({
    type: "DELETE",
    url: "../server/" + stationID + "/" + patternID + "/images/" + imageID + "/" + lang,
    success: function(res) {
      getPattern(stationID, patternID)	 
    }
  }); 
}

function addError() { //HTML
  //Will be added from DB on save
  var clone = document.importNode(document.querySelector('#errorCode').content,true);
  $('#errorCodes').append(clone);
}



function getError(stationID, patternID){ //Get From DB 2 HTML
  $('#error').css("display", "block");
  $('#errorCodes').text("");  
  $.ajax({
	  type: "GET",
	  url: "../server/"+stationID+ "/" + patternID + "/error",
	  dataType: "xml",
	  success: function(xml) {
      $(xml).find('reason').each(function(index){
        var clone = document.importNode(document.querySelector('#errorCode').content,true);
        $('[data-class=errorInput]',clone).val($(this).text());
        $('#errorCodes').append(clone);
      });
    }
  });
}

function removeError(value) { //HTML
  //Will be removed from DB on save
  value.parent().parent().parent().remove();
}

function addBlankReplacement() { //HTML
  //Will be added from DB on save
  var clone = document.importNode(document.querySelector('#imageReplacements').content,true);
  $('#replaceImages').append(clone);
}

function getReplaceImages(stationID, patternID){ //Get From DB 2 HTML
  $('#replacements').css("display", "block");
  $('#replaceImages').text("");  
  $.ajax({
	  type: "GET",
	  url: "../server/"+stationID+ "/" + patternID + "/replacement",
	  dataType: "xml",
	  success: function(xml) {
      $(xml).find('item').each(function(index){
        var clone = document.importNode(document.querySelector('#imageReplacements').content,true);
        $('[data-class=abbreviation]',clone).val($(this).find('abbreviation').text());
        $('[data-class=url]',clone).val($(this).find('url').text());
        $('#replaceImages').append(clone);
      });
    }
  });
}

function removeReplacement(value) { //HTML
  //Will be removed from DB on save
  value.parent().parent().parent().remove();
}

//Go to next PatternInput on . or space keydown
$(window).keydown(function(e) {
  if ((e.which === 32 || e.which === 190) && $(':focus').attr('class') === "patternPartInput") {
    e.preventDefault();
    addPatternPart(false);
  }
});

$(document).ready(function() {  
  getStations(); //Get all Stations
  $("#image_language" ).change(function() {
    getImages($('#pattern_station').text(),  $('#pattern_ID').text())
  });
  $(document).on('submit', '#patternform', function() { //prevent page reload on form submit
    return false;
  });
  $('.patternPartInput').limitkeypress({rexp: keypressRegex()});
});