Changeset 300 in tmcsimulator


Ignore:
Timestamp:
03/09/2019 02:32:17 PM (7 years ago)
Author:
jdalbey
Message:

cms_demo.html enhanced dialog box to float over map

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/cptms/cms_demo.html

    r299 r300  
    1919           width: 272px; 
    2020           resize: none; 
    21            overflow-wrap: break-word; 
    2221           font-family: Scoreboard; 
    2322           font-size: xx-large; 
    2423           background-color: black; 
    25            color: GoldenRod; 
    26            overflow-y: hidden; 
     24           color: yellow; 
     25        } 
     26       input { 
     27           border: thin solid #333; 
     28           padding: 2px; 
     29           font-family: monospace; 
     30           font-size: large; 
    2731        } 
    2832      #map { 
    29            height: 560px; 
     33           height: 550px; 
    3034           width: 100%; 
    3135           overflow: hidden; 
    3236           border: thin solid #333; 
    3337       } 
    34       #cms-name { 
    35            height: 30px; 
    36            width: 300px; 
     38      #cms-info-label { 
     39           height: 20px; 
     40           width: 540px; 
    3741           overflow: hidden; 
    3842           background-color: #ECECFB; 
    39            border: thin solid #333; 
    40            /* border-left: none; */ 
     43           border: thin solid #BDBDBD; 
     44           padding: 5px; 
    4145       } 
    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; 
     46      #message-display { 
     47           height: 172px; 
    5248           width: 300px; 
    5349           overflow: hidden; 
    … …  
    5652           /* border-left: none;*/ 
    5753       } 
    58       #userinput { 
     54      #message-input { 
     55           height: 122px; 
     56           width: 135px; 
     57           background-color: #ECECFB; 
     58           float: left; 
     59            
     60       } 
     61       #buttonPanel { 
    5962           height: 122px; 
    6063           width: 100px; 
    61            overflow: hidden; 
    6264           background-color: #ECECFB; 
    63            border: thin solid #333; 
    6465           border-left: none; 
    6566           float: left; 
    66        } 
     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        } 
    6783      #hideButton { 
    6884        font-size: 40px; 
    … …  
    7187        color: #47476b; 
    7288        cursor: pointer; 
    73       }    </style> 
     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> 
    74106  </head> 
    75107  <body> 
    76     <div id="cms-name"  style="display: none;"></div> 
     108<!--    <div id="cms-name"  style="display: none;"></div> 
    77109    <div id="cms-message"  style="display: none;"> 
    78 <!--    <textarea id="msgcontent1" maxlength="48" rows="3" cols="10" wrap="hard" style="display: none;"></textarea> --> 
     110 
    79111    <input id="msgcontent1" size="16" maxlength="16"/> 
    80112    <input id="msgcontent2" size="16" maxlength="16"/> 
    … …  
    87119    <button onclick="handleCancel();">Cancel</button> 
    88120    </div> 
     121 --> 
    89122    <div id="map"></div> 
    90123    <!--The div element where the show/hide button appears --> 
    91124    <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> 
    92150 
    93151    <script> 
    … …  
    98156var map; 
    99157var 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'; 
    105158var blueFlag = "icon_cmsBlue.png"; 
    106159var yellowFlag = "icon_cmsYellow.png"; 
    … …  
    116169        center: centerPoint, 
    117170        zoom: 11, 
    118         /* mapTypeId: 'terrain', */ 
    119171        mapTypeControl: false, 
    120172        streetViewControl: false 
    … …  
    124176    setMarkers(); 
    125177} 
    126 // Initialize the center button (to re-center the map) 
     178// Initialize the view/hide button  
    127179function initButton() 
    128180{ 
    … …  
    131183    hideBtnDiv.title = 'Click to toggle cms view'; 
    132184 
    133     // Setup the click event listeners: reset center location and zoom factor 
     185    // Setup the click event listeners to toggle icon display 
    134186    hideBtnDiv.addEventListener('click', function() { 
    135187            showing = !showing; 
    … …  
    178230                function() 
    179231                { 
    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' 
     232                    var dialog = document.getElementById('dialog'); 
     233                    dialog.style.display = 'block'; 
     234                    // fetch the sequential msg # 
    185235                    cmsID = Number(this.getLabel()); 
     236                    // Assign to the hidden field 
     237                    document.getElementById('cmsID').value = cmsID; 
    186238                    getMessage(cmsID); // note: this is async 
    187                     document.getElementById('cmsID').value = cmsID; 
    188                     var userInput = document.getElementById('userinput'); 
    189                     userInput.style.display = 'block' 
     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                    } 
    190251                }); 
    191252        } 
    … …  
    212273function handleSubmit() 
    213274{ 
    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' 
    218275    // recover the user's response 
    219276    var response1 = document.getElementById('msgcontent1').value; 
    220277    var response2 = document.getElementById('msgcontent2').value; 
    221278    var response3 = document.getElementById('msgcontent3').value; 
    222     saveMessage(response1 + "|" + response2 + "|" + response3); 
    223 } 
    224  
    225 function handleCancel() 
     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() 
    226294{ 
    227295    // 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' 
     296    document.getElementById('dialog').style.display = 'none' 
    231297} 
    232298 
    233299function handleClear() 
    234300{ 
    235     document.getElementById('msgcontent1').value = ""; 
    236     document.getElementById('msgcontent2').value = ""; 
    237     document.getElementById('msgcontent3').value = ""; 
    238     document.getElementById('msgcontent1').focus(); 
     301    document.getElementById('msgdisplay1').value = ""; 
     302    document.getElementById('msgdisplay2').value = ""; 
     303    document.getElementById('msgdisplay3').value = ""; 
     304    saveMessage("||"); 
    239305} 
    240306 
    … …  
    264330        // select a message from json for the given cmsID 
    265331        console.log("get by cmsID=" + cmsID); 
    266         var cmsSign = document.getElementById('msgcontent1'); 
    267         //cmsSign.innerHTML = messageList[cmsID]; 
     332        var cmsSign = document.getElementById('msgdisplay1'); 
    268333        messageparts = messageList[cmsID].split("|"); 
    269334        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(); 
     335        document.getElementById('msgdisplay2').value = messageparts[1]; 
     336        document.getElementById('msgdisplay3').value = messageparts[2]; 
    274337    }); 
    275338} 
    … …  
    286349    else 
    287350        markerList[cmsID].setIcon(blueFlag); 
     351 
    288352    var xhttp = new XMLHttpRequest(); 
    289353    xhttp.open("GET", "http://localhost:8080/cgi-bin/saveMessage.py?msg=" + JSON 
Note: See TracChangeset for help on using the changeset viewer.