//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");
$('#addExternalImage').attr("onclick", "addExternalImage(" + stationID + "," + patternID + ")");
$.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=image]',clone).append('')
$('[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 " + width + " " + height);
$(this).children("svg").attr("width","100");
$(this).children("svg").attr("height","100");
});
//$('[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);
/*
$(".image").each(function() {
alert("mhm");
$(this).children().attr("viewBox","0 0 " + "300" + " 300");
});
*/
}
});
new Sortable(document.getElementById('imageListing'),{
handle: '.handle',
animation: 150
});
}
function addExternalImage(stationID, patternID){
var extImage = $.parseXML("");
$(extImage).find("externalImage").append("" + $('#addExternalImageUrl').val() +"");
$(extImage).find("externalImage").append("" + $('#image_language option:selected').text() + "");
$.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()});
});