Browse Source

* replace the text input field with an select element which contains the stations if we got more than 1 in getHaltestellen() method

* when we got the data from a station, we replace the select element with the initial text field, its value is set to the queried station string
T. Meissner 6 years ago
parent
commit
02ef7e0568
1 changed files with 25 additions and 17 deletions
  1. 25
    17
      scripts/haltestellen.js

+ 25
- 17
scripts/haltestellen.js View File

@@ -1,6 +1,8 @@
1 1
 // variable to en-/disable debug
2 2
 // set to 1 to enable debug log
3
-var DEBUG;
3
+if (DEBUG === undefined) {
4
+    var DEBUG = 1;
5
+}
4 6
 
5 7
 
6 8
 
@@ -10,14 +12,15 @@ var DEBUG;
10 12
 
11 13
     //variable definitions
12 14
     var serverUrl = gcf.getCgiBinPath(),                        // the url of the cgi-bin folder with the scripts we call with the ajaxCall() function
15
+        input = document.getElementById("input"),
13 16
         target = document.getElementById("output"),             // get the html area where we print out the data
14 17
         searchForm = document.getElementById("search-form"),    // get the search form
18
+        lastHst,
15 19
         haltestelle;                                            // object with methods to get and process the data
16 20
 
17 21
     // debug log
18 22
     if (DEBUG === 1) {console.log("anonymous function");}
19 23
 
20
-
21 24
     // haltestelle object
22 25
     haltestelle = {
23 26
 
@@ -33,8 +36,10 @@ var DEBUG;
33 36
             var hstName = document.getElementById("q").value,
34 37
                 hstUrl  = encodeURI(serverUrl + "abfahrtsmonitor.py?query=abfahrten.do&ort=dresden&hst=" + hstName);
35 38
 
39
+            lastHst = hstName;
40
+
36 41
             // get the data from the server with an ajax call
37
-            gcf.ajaxCall(hstUrl, target, this.processAbfahrten, "text");
42
+            gcf.ajaxCall(hstUrl, target, haltestelle.processAbfahrten, "text");
38 43
 
39 44
         },
40 45
 
@@ -48,13 +53,14 @@ var DEBUG;
48 53
             var i,
49 54
                 y,
50 55
                 htmlOutput,
56
+                htmlInput,
51 57
                 entry,
52 58
                 dataLength;
53 59
 
54 60
             // process of response only if it's not empty
55 61
             if (data.indexOf("[]") !== -1) {  // there was an empty response
56 62
 
57
-                this.getHaltestellen();
63
+                haltestelle.getHaltestellen();
58 64
 
59 65
             } else {
60 66
 
@@ -68,6 +74,9 @@ var DEBUG;
68 74
 
69 75
                 dataLength = data.length;
70 76
 
77
+                htmlInput  = "<label for='q'>Haltestelle</label>";
78
+                htmlInput += "<input type='search' id='q' name='q' required placeholder='Haltestelle eingeben' value='" + lastHst + "'>";
79
+
71 80
                 // generate table header
72 81
                 htmlOutput = "<table>";
73 82
                 htmlOutput += "<tr>";
@@ -99,8 +108,10 @@ var DEBUG;
99 108
 
100 109
                 // close table
101 110
                 htmlOutput += "</table>";
111
+
102 112
                 // print content into web page
103 113
                 target.innerHTML = htmlOutput;
114
+                input.innerHTML  = htmlInput;
104 115
 
105 116
             }
106 117
 
@@ -111,15 +122,12 @@ var DEBUG;
111 122
             // debug log
112 123
             if (DEBUG === 1) {console.log("getHaltestellen() method");}
113 124
 
114
-            // prevent submit default behaviour
115
-            //event.preventDefault();
116
-
117 125
             // construct ajax url
118 126
             var hstName = document.getElementById("q").value,
119 127
                 hstUrl  = encodeURI(serverUrl + "abfahrtsmonitor.py?query=haltestelle.do&ort=dresden&hst=" + hstName);
120 128
 
121 129
             // get the data from the server with an ajax call
122
-            gcf.ajaxCall(hstUrl, target, this.processHaltestellen, "text");
130
+            gcf.ajaxCall(hstUrl, target, haltestelle.processHaltestellen, "text");
123 131
 
124 132
         },
125 133
 
@@ -133,6 +141,7 @@ var DEBUG;
133 141
             var i,
134 142
                 entry,
135 143
                 dataLength,
144
+                htmlInput,
136 145
                 htmlOutput;
137 146
 
138 147
             // process of response only if it's not empty
@@ -140,6 +149,8 @@ var DEBUG;
140 149
 
141 150
                 htmlOutput = "<p>unbekannte Haltstelle, bitte erneut versuchen</p>";
142 151
 
152
+                target.innerHTML = htmlOutput;
153
+
143 154
             } else {
144 155
 
145 156
                 // replace useless chars & split string into array
@@ -154,28 +165,26 @@ var DEBUG;
154 165
                 dataLength = data.length;
155 166
 
156 167
                 // generate table header
157
-                htmlOutput = "<table>";
168
+                htmlInput  =  "<label for='q'>Haltestelle</label>";
169
+                htmlInput += "<select id='q' name='q' required>";
158 170
 
159 171
                 // generate table entries
160 172
                 for (i = 0; i < dataLength; i++) {
161 173
 
162
-                    htmlOutput += "<tr>";
163 174
                     entry = data[i].split(",");
164 175
                     // debug log
165 176
                     if (DEBUG === 1) {console.log("part " + i + " of parsed data: " + entry);}
166 177
 
167
-                    htmlOutput += "<td>" + entry[0].slice(1, -1) + "</td>";
168
-                    htmlOutput += "</tr>";
178
+                    htmlInput += "<option value='" + (entry[0].slice(1, -1)) + "'>" + (entry[0].slice(1, -1)) + "</option>";
169 179
 
170 180
                 }
171 181
 
172 182
                 // close table
173
-                htmlOutput += "</table>";
183
+                htmlInput += "</select>";
174 184
 
175
-            }
185
+                input.innerHTML = htmlInput;
176 186
 
177
-            // print content into web page
178
-            target.innerHTML = htmlOutput;
187
+            }
179 188
 
180 189
         }
181 190
 
@@ -183,6 +192,5 @@ var DEBUG;
183 192
 
184 193
     //event listeners
185 194
     searchForm.addEventListener("submit", haltestelle.getAbfahrten, false);
186
-    //searchForm.addEventListener("submit", haltestelle.getHaltestellen, false);
187 195
 
188 196
 }());  // end of anonymous function