tmeissner
/
dvb-webapp
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

initial commit

T. Meissner 8 years ago
commit
60d0b76e13
3 changed files with 126 additions and 0 deletions
Split View Show Diff Stats
  1. 3
    0
      .gitignore
  2. 27
    0
      dvb-app/index.html
  3. 96
    0
      dvb-app/scripts/haltestellen.js

+ 3
- 0
.gitignore View File 

@@ -0,0 +1,3 @@
1 
+.DS_Store
2 
+*.swp
3 
+*.*#*

+ 27
- 0
dvb-app/index.html View File 

@@ -0,0 +1,27 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+
4 
+<head>
5 
+    <meta charset="utf-8">
6 
+    <title>DVB Abfahrtsmonitor</title>
7 
+</head>
8 
+
9 
+<body>
10 
+
11 
+    <form action="" method="get" id="search-form">
12 
+        <div class="section">
13 
+            <label for="q">Haltestelle</label>
14 
+            <input type="search" id="q" name="q" required placeholder="Haltestelle eingeben">
15 
+        </div>
16 
+        <div class="button-group">
17 
+            <button type="submit" id="btn-search">Suche</button>
18 
+        </div>
19 
+    </form>
20 
+
21 
+    <div id="output"></div>
22 
+
23 
+    <script src="scripts/haltestellen.js"></script>
24 
+
25 
+</body>
26 
+
27 
+</html>

+ 96
- 0
dvb-app/scripts/haltestellen.js View File 

@@ -0,0 +1,96 @@
1 
+/**
2 
+ * Created with JetBrains WebStorm.
3 
+ * User: torstenmeissner
4 
+ * Date: 24.02.13
5 
+ * Time: 22:38
6 
+ * To change this template use File | Settings | File Templates.
7 
+ */
8 
+
9 
+
10 
+
11 
+// server url
12 
+var serverUrl = "http://widgets.vvo-online.de/abfahrtsmonitor/";
13 
+
14 
+// xmlhttp object function
15 
+function getHTTPObject() {
16 
+
17 
+    console.log("xml http object function");
18 
+
19 
+    var xhr;
20 
+
21 
+    if(window.XMLHttpRequest) {
22 
+        xhr = new XMLHttpRequest();
23 
+    } else if(window.ActiveXObject) {
24 
+        xhr = new ActiveXObject("Msxml2.XMLHTTP");
25 
+    }
26 
+
27 
+    return xhr;
28 
+
29 
+}
30 
+
31 
+
32 
+// ajax call function
33 
+function ajaxCall(dataUrl, outputElement, callback) {
34 
+
35 
+    console.log("ajax function");
36 
+
37 
+    // get the xmlhttp object which is supported
38 
+    var request = getHTTPObject();
39 
+
40 
+    outputElement.innerHTML = "Lade Daten ...";
41 
+
42 
+    request.onreadystatechange = function() {
43 
+
44 
+        if(request.readyState === 4 && request.status === 200) {
45 
+
46 
+            //save ajax response
47 
+            var response = decodeHTML(request.responseText);
48 
+
49 
+            // check if callback is a function
50 
+            if(typeof callback === "function") {
51 
+                callback(response);
52 
+            }
53 
+        }
54 
+    };
55 
+
56 
+    request.open("get", dataUrl, true);
57 
+    request.send(null);
58 
+
59 
+}
60 
+
61 
+// wrap all in anonymous function to get out of global scope
62 
+(function() {
63 
+
64 
+    console.log("anonymous function");
65 
+
66 
+    // get the search form
67 
+    var searchForm = document.getElementById("search-form");
68 
+
69 
+    // haltestelle object
70 
+    var haltestelle = {
71 
+
72 
+        getInfo : function(event) {
73 
+
74 
+            console.log("getInfo function");
75 
+
76 
+            // prevent submit default behaviour
77 
+            event.preventDefault();
78 
+
79 
+            // get output area
80 
+            var target  = document.getElementById("output");
81 
+            var hstName = document.getElementById("q").value;
82 
+            var hstUrl  = serverUrl + "Abfahrten.do?ort=dresden&hst=" + hstName;
83 
+
84 
+            ajaxCall(hstUrl, target, function(data) {
85 
+
86 
+                target.innerHTML = "";
87 
+
88 
+                target.innerHTML = "<p>" + data + "</p>";
89 
+            });
90 
+        }
91 
+    };
92 
+
93 
+    //event listeners
94 
+    searchForm.addEventListener("submit", haltestelle.getInfo, false);
95 
+
96 
+})();  // end of anonymous function