design.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. //delete = delets from DB
  2. //remove = removes from HTML
  3. //save = save to DB
  4. //add = changes HTML
  5. //get = get from DB
  6. //new = changes HTML
  7. function overlayOn(value) {
  8. url = "https://centurio.work/customers/evva/universal-storage/ui/?iframe"
  9. document.getElementById("overlay").style.display = "block";
  10. var iframe = $('#overlaycontentsize').append("<iframe id='overlaycontent' src='" + url + "' width='900' height='600'></iframe>");
  11. iframe.find("#overlaycontent").bind('load',{"ka": value}, function(event){
  12. var ref = this.contentWindow.ref;
  13. //You can think that ref = $(this.contentWindow.test) but thery are different
  14. //they are two diferent references this might be a bug
  15. ref.bind('getUrl',{"xyz": event.data.ka}, function(event, extra1){
  16. var data = event.data
  17. overlayOff();
  18. //fill input with url
  19. $(data.xyz).prev().val(extra1.url)
  20. });
  21. });
  22. }
  23. function overlayOnImg(data) {
  24. var url = new URL("" + data, document.baseURI).href
  25. document.getElementById("overlay").style.display = "block";
  26. const imageext = ["png", "jpg", "svg"]
  27. const movieext = ["mp4"]
  28. var ext = url.substr(url.lastIndexOf('.') + 1);
  29. if(imageext.includes(ext)){
  30. $('#overlaycontentsize').append("<img id='overlaycontent' src=" + url + "></img>");
  31. }
  32. else if(movieext.includes(ext)){
  33. $('#overlaycontentsize').append("<video id='overlaycontent' controls> <source src=" + url + " type=\"video/mp4\">Your browser does not support the video tag.</video>");
  34. }
  35. else{
  36. $('#overlaycontentsize').append("<iframe id='overlaycontent' src=" + url + "></iframe>");
  37. }
  38. }
  39. function overlayOff() {
  40. document.getElementById("overlay").style.display = "none";
  41. $('#overlaycontentsize').text("");
  42. }
  43. function saveStation() { //Save 2 DB
  44. if (confirm('Are you really, really, REALLY sure you want to create a New Station?')) {
  45. $.ajax({
  46. type: "POST",
  47. url: "../server/",
  48. success: function(res) {
  49. location.reload();
  50. }
  51. });
  52. }
  53. }
  54. function getStations(stationID , patternID ){ //Get DB 2 HTML
  55. $('#stations').text("");
  56. $.ajax({
  57. type: "GET",
  58. url: "../server/",
  59. dataType: "xml",
  60. success: function(xml) {
  61. $(xml).find('station').each(function(index){
  62. var clone = document.importNode(document.querySelector('#line').content,true);
  63. $('[data-class=station]',clone).text($(this).attr('id'));
  64. $('[data-class=pattern] a',clone).before("[");
  65. $('[data-class=pattern] a',clone).text("Add Pattern");
  66. $('[data-class=pattern] a',clone).after("]");
  67. $('[data-class=pattern] a',clone).attr('href','javascript:newPattern('+ $(this).attr('id') + ');');
  68. $('[data-class=duplicate]',clone).text("");
  69. $('[data-class=delete]',clone).text("");
  70. $('#stations').append(clone);
  71. var curstation=$(this).attr('id');
  72. $(this).find('pattern').each(function(index){
  73. var clonePattern = document.importNode(document.querySelector('#line').content,true);
  74. $('[data-class=pattern] a',clonePattern).text($(this).attr('value'));
  75. $('[data-class=pattern] a',clonePattern).attr('href','javascript:getPattern(' + curstation + ','+ $(this).attr('id') + ');');
  76. $('[data-class=date]',clonePattern).text($.format.date(Date.parse($(this).attr('changed')), 'yyyy/MM/dd HH:mm:ss'));
  77. $('[data-class=duplicate] a',clonePattern).attr('href','javascript:duplicatePattern(' + curstation + ','+ $(this).attr('id') + ');');
  78. $('[data-class=delete] a',clonePattern).attr('href','javascript:deletePattern(' + curstation + ','+ $(this).attr('id') + ');');
  79. if (patternID != null && patternID == $(this).attr('id')){
  80. $('tr',clonePattern).css("background-color","#99cce6");
  81. }
  82. $('#stations').append(clonePattern);
  83. });
  84. });
  85. }
  86. });
  87. }
  88. function newPattern(stationID) { //HTML
  89. getPattern(stationID);
  90. }
  91. function getPattern(stationID, patternID){ //Get DB 2 HTML
  92. getStations(stationID, patternID)
  93. if (patternID == null){
  94. $('#patternform').attr('onsubmit', "savePattern("+stationID+")");
  95. $('#pattern_ID').text("");
  96. $('#pattern_description').val("");
  97. $('#imageListing').text("");
  98. $('#images').css("display", "none");
  99. $('#remove_pattern').css("display", "none");
  100. $('#error').css("display", "none");
  101. $('#replacements').css("display", "none");
  102. }
  103. else{
  104. $('#patternform').attr('onsubmit', "saveChangedPattern("+stationID+","+ patternID +")");
  105. $('#pattern_ID').text(patternID);
  106. getImages(stationID, patternID);
  107. $('#remove_pattern').css("display", "block");
  108. $('#remove_pattern').attr('onclick', "javascript:deletePattern("+stationID+","+ patternID +")");
  109. getError(stationID, patternID);
  110. getReplaceImages(stationID, patternID);
  111. $.ajax({
  112. type: "GET",
  113. url: "../server/"+stationID+ "/" + patternID,
  114. dataType: "xml",
  115. success: function(xml) {
  116. $(xml).find('pattern').each(function(index){
  117. var pattern = $(this).attr('value').split(".")
  118. for(var i = 0; i < pattern.length; i++)
  119. {
  120. if(i == 0){
  121. $("#patternInput .patternPartInput").val(pattern[i]);
  122. $("#patternInput .patternPartInput").attr('size', pattern[i].length);
  123. }
  124. else{
  125. var clone = document.importNode(document.querySelector('#patternClone').content,true);
  126. $('[data-class=part]',clone).val(pattern[i]);
  127. $('[data-class=part]',clone).limitkeypress({ rexp: keypressRegex() });
  128. $('[data-class=part]',clone).attr('size', pattern[i].length);
  129. $("#patternInput").append(clone);
  130. }
  131. }
  132. $('#pattern').val($(this).attr('value'));
  133. $('#pattern_description').val($(this).attr('description'));
  134. });
  135. }
  136. });
  137. }
  138. $('#pattern_details').css("display", "block");
  139. $('#pattern_station').text(stationID);
  140. $('#pattern_description').text("");
  141. //Reset Pattern
  142. $('#patternInput').text("");
  143. var clone = document.importNode(document.querySelector('#patternClone').content,true);
  144. $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
  145. $("#patternInput").append(clone);
  146. }
  147. function keypressRegex(){ //Helper Function
  148. return /^.{1,10}$/;
  149. //return /^[A-Za-z0-9\*]*$/; //Ohne Sonderzeichen
  150. }
  151. function removePatternPart(value) { //HTML
  152. if($( ".patternPart" ).length > 1)
  153. value.parent().remove();
  154. }
  155. function addPatternPart(useLast) { //HTML
  156. var clone = document.importNode(document.querySelector('#patternClone').content,true);
  157. $('[data-class=part]',clone).val("*");
  158. $('[data-class=part]',clone).limitkeypress({rexp: keypressRegex()});
  159. if(useLast){
  160. $('.patternPart').last().after(clone);
  161. $('.patternPart').last().children(".patternPartInput").focus();
  162. }else{
  163. $(':focus').parent().after(clone);
  164. $(':focus').parent().next().children(".patternPartInput").focus();
  165. }
  166. }
  167. function getPatternString(){ //Helper Function
  168. var val = "";
  169. var first = true;
  170. $(".patternPartInput").each(function() {
  171. if(first){
  172. first = false
  173. val += $(this).val()
  174. }
  175. else{
  176. val += "." + $(this).val()
  177. }
  178. });
  179. return val;
  180. }
  181. function savePattern(stationID) { //Save 2 DB
  182. var xmlDocument = $.parseXML("<pattern/>");
  183. $(xmlDocument).find("pattern").attr('id','0');
  184. $(xmlDocument).find("pattern").attr('value',getPatternString());
  185. $(xmlDocument).find("pattern").attr('description',$('#pattern_description').val());
  186. $(xmlDocument).find("pattern").attr('changed',new Date().toISOString());
  187. $.ajax({
  188. type: "POST",
  189. headers: {"content-id": "pattern"},
  190. data: (new XMLSerializer()).serializeToString(xmlDocument),
  191. contentType: "application/xml; charset=utf-8",
  192. url: "../server/"+stationID,
  193. success: function(res) {
  194. getPattern(stationID, res.id)
  195. loadStations()
  196. },
  197. error: function (request, status, error) {
  198. alert(request.responseText + status + error);
  199. }
  200. });
  201. }
  202. function saveChangedPattern(stationID, patternID) { //Save 2 DB
  203. var xmlDocument = $.parseXML("<pattern/>");
  204. $(xmlDocument).find("pattern").attr('id',$('#pattern_ID').text());
  205. $(xmlDocument).find("pattern").attr('value',getPatternString());
  206. $(xmlDocument).find("pattern").attr('description',$('#pattern_description').val());
  207. $(xmlDocument).find("pattern").attr('changed',new Date().toISOString());
  208. //Save Pattern
  209. $.ajax({
  210. type: "PUT",
  211. headers: {"content-id": "pattern"},
  212. data: (new XMLSerializer()).serializeToString(xmlDocument),
  213. contentType: "application/xml; charset=utf-8",
  214. url: "../server/"+stationID + "/" + patternID,
  215. //processData: false,
  216. success: function(res) {
  217. },
  218. error: function (request, status, error) {
  219. alert(request.responseText + status + error);
  220. }
  221. });
  222. //Update Labels
  223. $(".imageInput").each(function() {
  224. //Optimization only update if lable changed
  225. if($(this).val() != $(this).attr("origValue"))
  226. $.ajax({
  227. type: "PUT",
  228. data: { 'label' : $(this).val()},
  229. headers: {"content-id": "label"},
  230. url: "../server/"+stationID + "/" + patternID + "/images/" + $(this).parent().find(".imageID").text() +"/" + $('#image_language option:selected').text(),
  231. success: function(res) {
  232. },
  233. error: function (request, status, error) {
  234. alert(request.responseText + status + error);
  235. }
  236. });
  237. });
  238. //Update Image Ordering
  239. var order = []
  240. $(".imageID").each(function() {
  241. order.push(parseInt($(this).text()))
  242. });
  243. $.ajax({
  244. type: "PUT",
  245. data: JSON.stringify(order),
  246. headers: {"content-id": "orderlist"},
  247. contentType: "application/json",
  248. url: "../server/"+stationID + "/" + patternID + "/images/reorder/" + $('#image_language option:selected').text(),
  249. success: function(res) {
  250. },
  251. error: function (request, status, error) {
  252. alert(request.responseText + status + error);
  253. }
  254. });
  255. //Update Error
  256. var errorList = $.parseXML("<error/>");
  257. $(".errorInput").each(function() {
  258. $(errorList).find("error").append("<reason>" +$(this).val()+"</reason>")
  259. });
  260. $.ajax({
  261. type: "PUT",
  262. headers: {"content-id": "error"},
  263. data: (new XMLSerializer()).serializeToString(errorList),
  264. contentType: "application/xml; charset=utf-8",
  265. url: "../server/"+stationID + "/" + patternID + "/error",
  266. success: function(res) {
  267. },
  268. error: function (request, status, error) {
  269. alert(request.responseText + status + error);
  270. }
  271. });
  272. //Update Replacement
  273. var replaceList = $.parseXML("<replacement/>");
  274. $(".replaceInput").each(function() {
  275. //console.log($(this).find('.abbreviation').val())
  276. //console.log($(this).find('.url').val())
  277. $(replaceList).find("replacement").append("<item>" + "<abbreviation>" + $(this).find('.abbreviation').val() + "</abbreviation>" + "<url>" + $(this).find('.url').val() + "</url>"+"</item>")
  278. });
  279. $.ajax({
  280. type: "PUT",
  281. headers: {"content-id": "replacement"},
  282. data: (new XMLSerializer()).serializeToString(replaceList),
  283. contentType: "application/xml; charset=utf-8",
  284. url: "../server/"+stationID + "/" + patternID + "/replacement",
  285. success: function(res) {
  286. },
  287. error: function (request, status, error) {
  288. alert(request.responseText + status + error);
  289. }
  290. });
  291. getPattern(stationID, patternID)
  292. }
  293. function deletePattern(stationID, patternID) { //Delete From DB
  294. if (confirm('Are you really, really, REALLY sure!')) {
  295. $.ajax({
  296. type: "DELETE",
  297. url: "../server/" + stationID + "/" + patternID,
  298. success: function(res) {
  299. location.reload();
  300. }
  301. });
  302. }
  303. }
  304. function duplicatePattern(stationID, patternID){ //Get DB 2 HTML
  305. $.ajax({
  306. type: "PUT",
  307. headers: {"content-id": "patternID"},
  308. data: { "patternID":patternID},
  309. contentType: "application/json",
  310. url: "../server/"+stationID + "/" + patternID,
  311. success: function(res) {
  312. getPattern(stationID, res["id"])
  313. },
  314. error: function (request, status, error) {
  315. alert(request.responseText + status + error);
  316. }
  317. });
  318. }
  319. function getImages(stationID, patternID){ //Get From DB 2 HTML
  320. $('#images').css("display", "block");
  321. $('#imageListing').text("");
  322. $('#imgUpload').attr("action", "../server/" + stationID + "/" + patternID + "/images");
  323. $.ajax({
  324. type: "GET",
  325. url: "../server/"+stationID+ "/" + patternID + "/images",
  326. dataType: "xml",
  327. success: function(xml) {
  328. var count = 0;
  329. $(xml).find('image').each(function(index){
  330. curID = $(this).attr('id')
  331. $(this).find('variant').each(function(){
  332. if($(this).attr('lang') == $('#image_language option:selected').text()){
  333. ++count;
  334. var clone = document.importNode(document.querySelector('#imagePreview').content,true);
  335. var imgsrcsingle = "../images/uploads/"+stationID+ "/" + patternID + "/" + curID + "/"+ $(this).attr('lang') + ".svg";
  336. var imgsrc = imgsrcsingle + "?" + Date.now();
  337. $('[data-class=image]',clone).append('<img id="theImg" src="' + imgsrc +'" onclick="overlayOnImg(\'' +imgsrcsingle + '\')" height="100px" />')
  338. $('[data-class=label]',clone).val($(this).attr('label'));
  339. $('[data-class=label]',clone).attr("origValue", $(this).attr('label'));
  340. $('[data-class=imageId]',clone).text(curID);
  341. $('[data-class=imageId]',clone).attr("class", "imageID")
  342. $('[data-class=options] a',clone).attr('href','javascript:deleteImage(' + stationID + ','+ patternID + ',' + curID + ',"' + $(this).attr('lang') + '");');
  343. $('#imageListing').append(clone);
  344. }
  345. });
  346. });
  347. $('#image_count').text(count);
  348. }
  349. });
  350. new Sortable(document.getElementById('imageListing'),{
  351. handle: '.handle',
  352. animation: 150
  353. });
  354. }
  355. function deleteImage(stationID, patternID, imageID, lang) { //Delete From DB
  356. $.ajax({
  357. type: "DELETE",
  358. url: "../server/" + stationID + "/" + patternID + "/images/" + imageID + "/" + lang,
  359. success: function(res) {
  360. getPattern(stationID, patternID)
  361. }
  362. });
  363. }
  364. function addError() { //HTML
  365. //Will be added from DB on save
  366. var clone = document.importNode(document.querySelector('#errorCode').content,true);
  367. $('#errorCodes').append(clone);
  368. }
  369. function getError(stationID, patternID){ //Get From DB 2 HTML
  370. $('#error').css("display", "block");
  371. $('#errorCodes').text("");
  372. $.ajax({
  373. type: "GET",
  374. url: "../server/"+stationID+ "/" + patternID + "/error",
  375. dataType: "xml",
  376. success: function(xml) {
  377. $(xml).find('reason').each(function(index){
  378. var clone = document.importNode(document.querySelector('#errorCode').content,true);
  379. $('[data-class=errorInput]',clone).val($(this).text());
  380. $('#errorCodes').append(clone);
  381. });
  382. }
  383. });
  384. }
  385. function removeError(value) { //HTML
  386. //Will be removed from DB on save
  387. value.parent().parent().parent().remove();
  388. }
  389. function addBlankReplacement() { //HTML
  390. //Will be added from DB on save
  391. var clone = document.importNode(document.querySelector('#imageReplacements').content,true);
  392. $('#replaceImages').append(clone);
  393. }
  394. function getReplaceImages(stationID, patternID){ //Get From DB 2 HTML
  395. $('#replacements').css("display", "block");
  396. $('#replaceImages').text("");
  397. $.ajax({
  398. type: "GET",
  399. url: "../server/"+stationID+ "/" + patternID + "/replacement",
  400. dataType: "xml",
  401. success: function(xml) {
  402. $(xml).find('item').each(function(index){
  403. var clone = document.importNode(document.querySelector('#imageReplacements').content,true);
  404. $('[data-class=abbreviation]',clone).val($(this).find('abbreviation').text());
  405. $('[data-class=url]',clone).val($(this).find('url').text());
  406. $('#replaceImages').append(clone);
  407. });
  408. }
  409. });
  410. }
  411. function removeReplacement(value) { //HTML
  412. //Will be removed from DB on save
  413. value.parent().parent().parent().remove();
  414. }
  415. //Go to next PatternInput on . or space keydown
  416. $(window).keydown(function(e) {
  417. if ((e.which === 32 || e.which === 190) && $(':focus').attr('class') === "patternPartInput") {
  418. e.preventDefault();
  419. addPatternPart(false);
  420. }
  421. });
  422. $(document).ready(function() {
  423. getStations(); //Get all Stations
  424. $("#image_language" ).change(function() {
  425. getImages($('#pattern_station').text(), $('#pattern_ID').text())
  426. });
  427. $(document).on('submit', '#patternform', function() { //prevent page reload on form submit
  428. return false;
  429. });
  430. $('.patternPartInput').limitkeypress({rexp: keypressRegex()});
  431. });