|
@@ -0,0 +1,505 @@
|
|
|
+//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 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
|
|
|
+ $(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("<img id='overlaycontent' src=" + url + "></img>");
|
|
|
+ }
|
|
|
+ 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]);
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ var clone = document.importNode(document.querySelector('#patternClone').content,true);
|
|
|
+ $('[data-class=part]',clone).val(pattern[i]);
|
|
|
+ $('[data-class=part]',clone).limitkeypress({ rexp: keypressRegex() });
|
|
|
+
|
|
|
+ $("#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 /^[A-Za-z0-9\*]*$/;
|
|
|
+}
|
|
|
+
|
|
|
+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("<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)
|
|
|
+ loadStations()
|
|
|
+ },
|
|
|
+ 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");
|
|
|
+
|
|
|
+
|
|
|
+ $.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=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()});
|
|
|
+});
|