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

Revision 301, 12.6 KB checked in by jdalbey, 7 years ago (diff)

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