Some experiments with web applications
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

146 lines
4.2 KiB

  1. // variable to en-/disable debug
  2. // set to 1 to enable debug log
  3. var DEBUG;
  4. // server url
  5. //var serverUrl = "http://widgets.vvo-online.de/abfahrtsmonitor/";
  6. var serverUrl = "http://goodcleanfun.de/cgi-bin/";
  7. // xmlhttp object function
  8. function getHTTPObject() {
  9. // debug log
  10. if (DEBUG === 1) {console.log("xml http object function");}
  11. var xhr;
  12. // check for availibility if xmlhttprequest object
  13. if(window.XMLHttpRequest) {
  14. xhr = new XMLHttpRequest();
  15. } else if(window.ActiveXObject) {
  16. xhr = new ActiveXObject("Msxml2.XMLHTTP");
  17. }
  18. return xhr;
  19. }
  20. // ajax call function
  21. function ajaxCall(dataUrl, outputElement, callback, responseType) {
  22. // debug log
  23. if (DEBUG === 1) {console.log("ajax function");}
  24. // get the xmlhttp object which is supported
  25. var request = getHTTPObject();
  26. outputElement.innerHTML = "Lade Daten ...";
  27. request.onreadystatechange = function() {
  28. if(request.readyState === 4 && request.status === 200) {
  29. //save ajax response
  30. if (responseType === "json") {
  31. var response = JSON.parse(request.responseText);
  32. } else if (responseType === "xml") {
  33. var response = request.responseXML;
  34. } else {
  35. var response = request.responseText;
  36. }
  37. // check if callback is a function
  38. if(typeof callback === "function") {
  39. callback(response);
  40. }
  41. }
  42. };
  43. request.open("get", dataUrl, true);
  44. request.send(null);
  45. }
  46. // wrap all in anonymous function to get out of global scope
  47. (function() {
  48. // debug log
  49. if (DEBUG === 1) {console.log("anonymous function");}
  50. // get the search form
  51. var searchForm = document.getElementById("search-form");
  52. // haltestelle object
  53. var haltestelle = {
  54. getInfo : function(event) {
  55. // debug log
  56. if (DEBUG === 1) {console.log("getInfo function");}
  57. // prevent submit default behaviour
  58. event.preventDefault();
  59. // get output area
  60. var target = document.getElementById("output");
  61. var hstName = document.getElementById("q").value;
  62. //var hstUrl = serverUrl + "Abfahrten.do?ort=dresden&hst=" + hstName;
  63. var hstUrl = serverUrl + "abfahrtsmonitor.py?ort=dresden&hst=" + hstName;
  64. ajaxCall(hstUrl, target, function(data) {
  65. // debug log
  66. if (DEBUG === 1) {console.log("received data: " + data);}
  67. data = data.replace(/\],\[/gi, '#');
  68. data = data.replace(/\(.+?\)/gi, '');
  69. data = data.replace('ß', 'ss');
  70. data = data.slice(3,-3).split("#");
  71. // debug log
  72. if (DEBUG === 1) {console.log("parsed data: " + data);}
  73. var i;
  74. var y;
  75. var htmlOutput;
  76. var dataLength = data.length;
  77. // generate table header
  78. htmlOutput = "<table>";
  79. htmlOutput += "<tr>";
  80. htmlOutput += "<th>Linie</th>";
  81. htmlOutput += "<th>Richtung</th>";
  82. htmlOutput += "<th>Abfahrt</th>";
  83. htmlOutput += "</tr>";
  84. // generate table entries
  85. for (i = 0; i < dataLength; i++) {
  86. htmlOutput += "<tr>";
  87. var entry = data[i].split(",");
  88. // debug log
  89. if (DEBUG === 1) {console.log("part " + i + " of parsed data: " + entry);}
  90. for (y = 0; y < 3; y++) {
  91. // debug log
  92. if (DEBUG === 1) {console.log("part " + y + ": " + entry[y]);}
  93. htmlOutput += "<td>" + entry[y].slice(1,-1) + "</td>";
  94. }
  95. htmlOutput += "</tr>";
  96. }
  97. // close table
  98. htmlOutput += "</table>";
  99. // print table into web page
  100. target.innerHTML = htmlOutput;
  101. }, "text");
  102. }
  103. };
  104. //event listeners
  105. searchForm.addEventListener("submit", haltestelle.getInfo, false);
  106. })(); // end of anonymous function