//delete = delets from DB //remove = removes from HTML //save = save to DB //add = changes HTML //get = get from DB //new = changes HTML function overlayOn(value) { url = "https://centurio.work/customers/evva/universal-storage/ui/?iframe" document.getElementById("overlay").style.display = "block"; var iframe = $('#overlaycontentsize').append(""); 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 $(data.xyz).prev().val(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').append(""); } else if(movieext.includes(ext)){ $('#overlaycontentsize').append(""); } else{ $('#overlaycontentsize').append(""); } } 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) { //HTML var clone = document.importNode(document.querySelector('#patternClone').content,true); $('[data-class=part]',clone).val("*"); $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()}); if(useLast){ $('.patternPart').last().after(clone); $('.patternPart').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(""); $(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) loadStations() }, error: function (request, status, error) { alert(request.responseText + status + error); } }); } function saveChangedPattern(stationID, patternID) { //Save 2 DB var xmlDocument = $.parseXML(""); $(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(""); $(".errorInput").each(function() { $(errorList).find("error").append("" +$(this).val()+"") }); $.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(""); $(".replaceInput").each(function() { //console.log($(this).find('.abbreviation').val()) //console.log($(this).find('.url').val()) $(replaceList).find("replacement").append("" + "" + $(this).find('.abbreviation').val() + "" + "" + $(this).find('.url').val() + ""+"") }); $.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"); $.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('') $('[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); } }); new Sortable(document.getElementById('imageListing'),{ handle: '.handle', animation: 150 }); } 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()}); });