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

Revision 299, 10.1 KB checked in by jdalbey, 7 years ago (diff)

cms_demo.html added show/hide toggle.
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           overflow-wrap: break-word;
22           font-family: Scoreboard;
23           font-size: xx-large;
24           background-color: black;
25           color: GoldenRod;
26           overflow-y: hidden;
27        }
28      #map {
29           height: 560px;
30           width: 100%;
31           overflow: hidden;
32           border: thin solid #333;
33       }
34      #cms-name {
35           height: 30px;
36           width: 300px;
37           overflow: hidden;
38           background-color: #ECECFB;
39           border: thin solid #333;
40           /* border-left: none; */
41       }
42       input {
43           font-family: Scoreboard;
44           font-size: xx-large;
45           font-weight: bold;
46           background-color: black;
47           color: Yellow;
48           border: thin solid #333;
49}
50      #cms-message {
51           height: 122px;
52           width: 300px;
53           overflow: hidden;
54           float: left;
55           /* border: thin solid #333;*/
56           /* border-left: none;*/
57       }
58      #userinput {
59           height: 122px;
60           width: 100px;
61           overflow: hidden;
62           background-color: #ECECFB;
63           border: thin solid #333;
64           border-left: none;
65           float: left;
66       }
67      #hideButton {
68        font-size: 40px;
69        margin-right: 9px;
70        background-color: #fff;
71        color: #47476b;
72        cursor: pointer;
73      }    </style>
74  </head>
75  <body>
76    <div id="cms-name"  style="display: none;"></div>
77    <div id="cms-message"  style="display: none;">
78<!--    <textarea id="msgcontent1" maxlength="48" rows="3" cols="10" wrap="hard" style="display: none;"></textarea> -->
79    <input id="msgcontent1" size="16" maxlength="16"/>
80    <input id="msgcontent2" size="16" maxlength="16"/>
81    <input id="msgcontent3" size="16" maxlength="16"/>
82    </div>
83    <input id='cmsID' value="" type='hidden'/>
84    <div id="userinput"    style="display: none;">
85    <button onclick="handleClear();">Clear</button>
86    <button onclick="handleSubmit();">OK</button>
87    <button onclick="handleCancel();">Cancel</button>
88    </div>
89    <div id="map"></div>
90    <!--The div element where the show/hide button appears -->
91    <div id="hideButton">&#128065;</div>
92
93    <script>
94var centerPoint = {
95    lat: 33.693385,
96    lng: -117.798937
97};
98var map;
99var kMapStartupFile = "cmsStatusD12.json";
100//var src="http://git.tokomak.net:8888/raw-attachment/ticket/75/dyer1.txt"
101//var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/cms_two_signs.kml";
102//      var src = "https://www.arb.ca.gov/smp/met/kml/faa.kml";
103//      var src="https://raw.githubusercontent.com/jdalbey/map-spikes/master/la_airports.kml"
104//      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
105var blueFlag = "icon_cmsBlue.png";
106var yellowFlag = "icon_cmsYellow.png";
107var messageList;
108var cms_info;
109var markerList = [];
110var showing = true;
111
112function initMap()
113{
114    map = new google.maps.Map(document.getElementById('map'),
115    {
116        center: centerPoint,
117        zoom: 11,
118        /* mapTypeId: 'terrain', */
119        mapTypeControl: false,
120        streetViewControl: false
121    });
122    initButton();
123    getMessage(1); // load the current message file
124    setMarkers();
125}
126// Initialize the center button (to re-center the map)
127function initButton()
128{
129    var hideBtnDiv = document.getElementById('hideButton');
130    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(hideBtnDiv)
131    hideBtnDiv.title = 'Click to toggle cms view';
132
133    // Setup the click event listeners: reset center location and zoom factor
134    hideBtnDiv.addEventListener('click', function() {
135            showing = !showing;
136            for (var i = 0; i < markerList.length; i++)
137            {
138                markerList[i].setVisible(showing);
139            }
140    });
141}
142function setMarkers()
143{
144    var simpleImage = "";
145    loadcmsJSON(function(response)
146    {
147        // Parse JSON string into object
148        cms_info = JSON.parse(response);
149        console.log(cms_info.data[0].cms);
150        // Process each new marker
151        for (var i = 0; i < cms_info.data.length; i++)
152        {
153            var cms = cms_info.data[i].cms;
154            var currLat = Number(cms.location.latitude);
155            var currLong = Number(cms.location.longitude);
156            // load a yellow flag if there's currently no message
157            if (messageList[i] == "||")
158                simpleImage = yellowFlag;
159            else
160                simpleImage = blueFlag;
161            var directionCode = cms.location.direction.charAt(0);
162            var rolloverText = " " + directionCode + " " + cms.location
163                .route + " " + cms.location.postmile + " " + cms
164                .location.locationName
165            markerList[i] = new google.maps.Marker(
166            {
167                position:
168                {
169                    lat: currLat,
170                    lng: currLong
171                },
172                map: map,
173                icon: simpleImage,
174                title: rolloverText,
175                label: "" + i
176            });
177            google.maps.event.addListener(markerList[i], 'click',
178                function()
179                {
180                    var cmsName = document.getElementById('cms-name');
181                    cmsName.innerHTML = this.getTitle(); // put sign name in display
182                    cmsName.style.display = 'block'
183                    var cmsMsg = document.getElementById('cms-message');
184                    cmsMsg.style.display = 'block'
185                    cmsID = Number(this.getLabel());
186                    getMessage(cmsID); // note: this is async
187                    document.getElementById('cmsID').value = cmsID;
188                    var userInput = document.getElementById('userinput');
189                    userInput.style.display = 'block'
190                });
191        }
192    });
193}
194
195function loadcmsJSON(callback)
196{
197    var xobj = new XMLHttpRequest();
198    xobj.overrideMimeType("application/json");
199    xobj.open('GET', kMapStartupFile, true);
200    xobj.onreadystatechange = function()
201    {
202        if (xobj.readyState == 4 && xobj.status == "200")
203        {
204            callback(xobj.responseText);
205        }
206    };
207    // We want ajax to ignore any cached responses
208    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
209    xobj.send(null);
210}
211
212function handleSubmit()
213{
214    // hide the display
215    document.getElementById('cms-message').style.display = 'none'
216    document.getElementById('userinput').style.display = 'none'
217    document.getElementById('cms-name').style.display = 'none'
218    // recover the user's response
219    var response1 = document.getElementById('msgcontent1').value;
220    var response2 = document.getElementById('msgcontent2').value;
221    var response3 = document.getElementById('msgcontent3').value;
222    saveMessage(response1 + "|" + response2 + "|" + response3);
223}
224
225function handleCancel()
226{
227    // hide the display
228    document.getElementById('cms-message').style.display = 'none'
229    document.getElementById('userinput').style.display = 'none'
230    document.getElementById('cms-name').style.display = 'none'
231}
232
233function handleClear()
234{
235    document.getElementById('msgcontent1').value = "";
236    document.getElementById('msgcontent2').value = "";
237    document.getElementById('msgcontent3').value = "";
238    document.getElementById('msgcontent1').focus();
239}
240
241function loadJSON(inFile, callback)
242{
243    var xobj = new XMLHttpRequest();
244    xobj.overrideMimeType("application/json");
245    xobj.open('GET', inFile, true);
246    xobj.onreadystatechange = function()
247    {
248        if (xobj.readyState == 4 && xobj.status == "200")
249        {
250            callback(xobj.responseText);
251        }
252    };
253    // We want ajax to ignore any cached responses
254    xobj.setRequestHeader('If-Modified-Since', 'Sat, 01 Jan 2000 01:01:01 GMT')
255    xobj.send(null);
256}
257// retrieve the current cms message file
258function getMessage(cmsID)
259{
260    loadJSON("http://localhost:8080/messagefile.txt", function(response)
261    {
262        // Parse JSON string into object
263        messageList = JSON.parse(response);
264        // select a message from json for the given cmsID
265        console.log("get by cmsID=" + cmsID);
266        var cmsSign = document.getElementById('msgcontent1');
267        //cmsSign.innerHTML = messageList[cmsID];
268        messageparts = messageList[cmsID].split("|");
269        cmsSign.value = messageparts[0];
270        document.getElementById('msgcontent2').value = messageparts[1];
271        document.getElementById('msgcontent3').value = messageparts[2];
272        cmsSign.style.display = 'block'
273        cmsSign.focus();
274    });
275}
276// Save an updated cms message to the file
277// NB: cms id's are one-based, json array is zero-based.
278function saveMessage(outMessage, cmsID)
279{
280    var cmsID = document.getElementById('cmsID').value;
281    console.log("Saving " + outMessage + " for cmsID " + cmsID)
282    messageList[cmsID] = outMessage;
283    // Change icon if something was saved
284    if (outMessage == "||")
285        markerList[cmsID].setIcon(yellowFlag);
286    else
287        markerList[cmsID].setIcon(blueFlag);
288    var xhttp = new XMLHttpRequest();
289    xhttp.open("GET", "http://localhost:8080/cgi-bin/saveMessage.py?msg=" + JSON
290        .stringify(messageList), true);
291    xhttp.send();
292    // Using POST might be a better idea ... haven't tried this yet
293    //      var xhr = new XMLHttpRequest();
294    //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
295    //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
296    // send the collected data as JSON
297    //      xhr.send(JSON.stringify(messageList));
298}    </script>
299    <script async defer
300    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6iTyN0DjP-9OVkAgicyp4tkC10naE_B8&callback=initMap">
301    </script>
302  </body>
303</html>
Note: See TracBrowser for help on using the repository browser.