source: tmcsimulator/trunk/src/cptms/cms_demo.html @ 300

Revision 300, 11.7 KB checked in by jdalbey, 7 years ago (diff)

cms_demo.html enhanced dialog box to float over map
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4<!-- Launch with  python -m CGIHTTPServer 8080  -->
5    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6    <meta charset="utf-8">
7    <title>CMS Manager Demo</title>
8    <style>
9        @font-face {
10          font-family: Scoreboard;
11          src: url('scoreboard.ttf');
12        }
13      html, body {
14            height: 370px;
15            padding: 0;
16            margin: 0;
17        }
18        textarea {
19           width: 272px;
20           resize: none;
21           font-family: Scoreboard;
22           font-size: xx-large;
23           background-color: black;
24           color: yellow;
25        }
26       input {
27           border: thin solid #333;
28           padding: 2px;
29           font-family: monospace;
30           font-size: large;
31        }
32      #map {
33           height: 550px;
34           width: 100%;
35           overflow: hidden;
36           border: thin solid #333;
37       }
38      #cms-info-label {
39           height: 20px;
40           width: 540px;
41           overflow: hidden;
42           background-color: #ECECFB;
43           border: thin solid #BDBDBD;
44           padding: 5px;
45       }
46      #message-display {
47           height: 172px;
48           width: 300px;
49           overflow: hidden;
50           float: left;
51           /* border: thin solid #333;*/
52           /* border-left: none;*/
53       }
54      #message-input {
55           height: 122px;
56           width: 135px;
57           background-color: #ECECFB;
58           float: left;
59           
60       }
61       #buttonPanel {
62           height: 122px;
63           width: 100px;
64           background-color: #ECECFB;
65           border-left: none;
66           float: left;
67           padding: 20px;
68        }
69       .wrapper {
70           position: relative;\
71        }
72       #dialog {
73          position: absolute;
74          top: 10%;
75          right: 20%;
76          background-color: #ECECFB;
77          margin: auto;
78          padding: 20px;
79          border: 1px solid #888;
80          width: 52%;
81          display: none;           
82        }
83      #hideButton {
84        font-size: 40px;
85        margin-right: 9px;
86        background-color: #fff;
87        color: #47476b;
88        cursor: pointer;
89      }   
90
91    /* The Close Button */
92    .close {
93      color: orange;
94      float: right;
95      font-size: 20px;
96      font-weight: bold;
97    }
98
99    .close:hover,
100    .close:focus {
101      color: red;
102      text-decoration: none;
103      cursor: pointer;
104    }
105</style>
106  </head>
107  <body>
108<!--    <div id="cms-name"  style="display: none;"></div>
109    <div id="cms-message"  style="display: none;">
110
111    <input id="msgcontent1" size="16" maxlength="16"/>
112    <input id="msgcontent2" size="16" maxlength="16"/>
113    <input id="msgcontent3" size="16" maxlength="16"/>
114    </div>
115    <input id='cmsID' value="" type='hidden'/>
116    <div id="userinput"    style="display: none;">
117    <button onclick="handleClear();">Clear</button>
118    <button onclick="handleSubmit();">OK</button>
119    <button onclick="handleCancel();">Cancel</button>
120    </div>
121 -->
122    <div id="map"></div>
123    <!--The div element where the show/hide button appears -->
124    <div id="hideButton">&#128065;</div>
125    <div id="map" class = "wrapper"></div>
126    <!-- The div element for the popup dialog -->
127    <div id="dialog" style="display:none;">
128        <span class="close">&times;</span>
129        <br>
130        <div id="cms-info-label" style="font-family:monospace">CMS ID: xxx LOCATION: </div>
131        <br>
132        <div><pre>Proposed:                              Current:</pre></div>
133        <input id='cmsID' value="" type='hidden'/>
134        <div id="message-input">
135        <input id="msgcontent1" size="16" maxlength="16" type="text"/><br><br>
136        <input id="msgcontent2" size="16" maxlength="16"/><br><br>
137        <input id="msgcontent3" size="16" maxlength="16"/>
138        </div>       
139        <div id="buttonPanel"    style="display: block;">
140        <button onclick="handleSubmit();">Send >></button><br>
141        <button onclick="handleClear();">Clear >></button><br>
142        <button onclick="handleClose();">Close </button>
143        </div>
144        <div id="message-display"  style="display: block;">
145         <textarea readonly id="msgdisplay1" maxlength="16" rows="1" cols="16"></textarea>
146         <textarea readonly id="msgdisplay2" maxlength="16" rows="1" cols="16"></textarea>
147         <textarea readonly id="msgdisplay3" maxlength="16" rows="1" cols="16"></textarea>
148        </div>
149    </div>
150
151    <script>
152var centerPoint = {
153    lat: 33.693385,
154    lng: -117.798937
155};
156var map;
157var kMapStartupFile = "cmsStatusD12.json";
158var blueFlag = "icon_cmsBlue.png";
159var yellowFlag = "icon_cmsYellow.png";
160var messageList;
161var cms_info;
162var markerList = [];
163var showing = true;
164
165function initMap()
166{
167    map = new google.maps.Map(document.getElementById('map'),
168    {
169        center: centerPoint,
170        zoom: 11,
171        mapTypeControl: false,
172        streetViewControl: false
173    });
174    initButton();
175    getMessage(1); // load the current message file
176    setMarkers();
177}
178// Initialize the view/hide button
179function initButton()
180{
181    var hideBtnDiv = document.getElementById('hideButton');
182    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(hideBtnDiv)
183    hideBtnDiv.title = 'Click to toggle cms view';
184
185    // Setup the click event listeners to toggle icon display
186    hideBtnDiv.addEventListener('click', function() {
187            showing = !showing;
188            for (var i = 0; i < markerList.length; i++)
189            {
190                markerList[i].setVisible(showing);
191            }
192    });
193}
194function setMarkers()
195{
196    var simpleImage = "";
197    loadcmsJSON(function(response)
198    {
199        // Parse JSON string into object
200        cms_info = JSON.parse(response);
201        console.log(cms_info.data[0].cms);
202        // Process each new marker
203        for (var i = 0; i < cms_info.data.length; i++)
204        {
205            var cms = cms_info.data[i].cms;
206            var currLat = Number(cms.location.latitude);
207            var currLong = Number(cms.location.longitude);
208            // load a yellow flag if there's currently no message
209            if (messageList[i] == "||")
210                simpleImage = yellowFlag;
211            else
212                simpleImage = blueFlag;
213            var directionCode = cms.location.direction.charAt(0);
214            var rolloverText = " " + directionCode + " " + cms.location
215                .route + " " + cms.location.postmile + " " + cms
216                .location.locationName
217            markerList[i] = new google.maps.Marker(
218            {
219                position:
220                {
221                    lat: currLat,
222                    lng: currLong
223                },
224                map: map,
225                icon: simpleImage,
226                title: rolloverText,
227                label: "" + i
228            });
229            google.maps.event.addListener(markerList[i], 'click',
230                function()
231                {
232                    var dialog = document.getElementById('dialog');
233                    dialog.style.display = 'block';
234                    // fetch the sequential msg #
235                    cmsID = Number(this.getLabel());
236                    // Assign to the hidden field
237                    document.getElementById('cmsID').value = cmsID;
238                    getMessage(cmsID); // note: this is async
239                    document.getElementById('cms-info-label').innerHTML = "CMS id: " +
240                        cmsID + "&nbsp;&nbsp;&nbsp;LOCATION: " + this.title;
241                    // clear input fields
242                    document.getElementById('msgcontent1').value = "";
243                    document.getElementById('msgcontent2').value = "";
244                    document.getElementById('msgcontent3').value = "";
245                    document.getElementById('msgcontent1').focus();
246                    var span = document.getElementsByClassName("close")[0]
247                    // When the user clicks on <span> (x), close the modal
248                    span.onclick = function() {
249                      handleClose();
250                    }
251                });
252        }
253    });
254}
255
256function loadcmsJSON(callback)
257{
258    var xobj = new XMLHttpRequest();
259    xobj.overrideMimeType("application/json");
260    xobj.open('GET', kMapStartupFile, true);
261    xobj.onreadystatechange = function()
262    {
263        if (xobj.readyState == 4 && xobj.status == "200")
264        {
265            callback(xobj.responseText);
266        }
267    };
268    // We want ajax to ignore any cached responses
269    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
270    xobj.send(null);
271}
272
273function handleSubmit()
274{
275    // recover the user's response
276    var response1 = document.getElementById('msgcontent1').value;
277    var response2 = document.getElementById('msgcontent2').value;
278    var response3 = document.getElementById('msgcontent3').value;
279    var newMsg = response1+response2+response3;
280    if (newMsg.length == 0)
281    {
282        alert("Nothing to Send ... Proposed is empty.");
283    }
284    else
285    {
286        document.getElementById('msgdisplay1').value = response1;
287        document.getElementById('msgdisplay2').value = response2;
288        document.getElementById('msgdisplay3').value = response3;
289        saveMessage(response1 + "|" + response2 + "|" + response3);
290    }
291}
292
293function handleClose()
294{
295    // hide the display
296    document.getElementById('dialog').style.display = 'none'
297}
298
299function handleClear()
300{
301    document.getElementById('msgdisplay1').value = "";
302    document.getElementById('msgdisplay2').value = "";
303    document.getElementById('msgdisplay3').value = "";
304    saveMessage("||");
305}
306
307function loadJSON(inFile, callback)
308{
309    var xobj = new XMLHttpRequest();
310    xobj.overrideMimeType("application/json");
311    xobj.open('GET', inFile, true);
312    xobj.onreadystatechange = function()
313    {
314        if (xobj.readyState == 4 && xobj.status == "200")
315        {
316            callback(xobj.responseText);
317        }
318    };
319    // We want ajax to ignore any cached responses
320    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
321    xobj.send(null);
322}
323// retrieve the current cms message file
324function getMessage(cmsID)
325{
326    loadJSON("http://localhost:8080/messagefile.txt", function(response)
327    {
328        // Parse JSON string into object
329        messageList = JSON.parse(response);
330        // select a message from json for the given cmsID
331        console.log("get by cmsID=" + cmsID);
332        var cmsSign = document.getElementById('msgdisplay1');
333        messageparts = messageList[cmsID].split("|");
334        cmsSign.value = messageparts[0];
335        document.getElementById('msgdisplay2').value = messageparts[1];
336        document.getElementById('msgdisplay3').value = messageparts[2];
337    });
338}
339// Save an updated cms message to the file
340// NB: cms id's are one-based, json array is zero-based.
341function saveMessage(outMessage, cmsID)
342{
343    var cmsID = document.getElementById('cmsID').value;
344    console.log("Saving " + outMessage + " for cmsID " + cmsID)
345    messageList[cmsID] = outMessage;
346    // Change icon if something was saved
347    if (outMessage == "||")
348        markerList[cmsID].setIcon(yellowFlag);
349    else
350        markerList[cmsID].setIcon(blueFlag);
351
352    var xhttp = new XMLHttpRequest();
353    xhttp.open("GET", "http://localhost:8080/cgi-bin/saveMessage.py?msg=" + JSON
354        .stringify(messageList), true);
355    xhttp.send();
356    // Using POST might be a better idea ... haven't tried this yet
357    //      var xhr = new XMLHttpRequest();
358    //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
359    //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
360    // send the collected data as JSON
361    //      xhr.send(JSON.stringify(messageList));
362}    </script>
363    <script async defer
364    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
365    </script>
366  </body>
367</html>
Note: See TracBrowser for help on using the repository browser.