Menu Board

by dandiebolt

HTML

<link rel="stylesheet" href="http://stage.ourtrainingroom.com/ewems_board/css.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/grid/resources/Grid.css">
<div class="header_bg" style="width:100%;height:50px;">
 <div id="headerContainer" style="float:left;width:500px;background-color:transparent;">
  <div style="float:left;padding-left:7px;padding-right:6px;padding-top:11px;"><img src="images/ems_logo.png" /></div>
  <div class="header_text" style="float:left;margin-top:15px;">essex-windsor ems <span class="header_text_bold">fleet operations</span></div>
  <div class="header_text" style="float:left;margin-top:15px;margin-left:175px;"><span style="color:red;">Total <span style="color:white;text-decoration:underline;"><b>ALS</b></span> on duty:</span> <span style='color:white;'><b><span id="alsCount">0</span></b></span><span style="color:red;padding-left:15px;"> Total <span style="color:white;text-decoration:underline;"><b>BLS</b></span> on duty:</span> <span style='color:white;'><b><span id="blsCount">0</span></b></span></div>

  <div id="district_countdown" class="header_text" style="float:right;margin-top:15px;padding-left:10px;"></div>
  <div class="header_text" style="float:right;margin-top:15px;color:red;cursor:pointer;"><span id="district_label" onclick="switchData()">NORTH DISTRICT</span></div>
 </div>
 <div class="header_text_bold" style="float:right;margin-top:5px;width:200px;" align="center">
  <span id="date_display"></span><br />
  <span id="clock"></span>
 </div>
</div>
<div class="header_divider" style="clear:both;width:100%;"></div>

<div class="content_bg" style="width:100%">
 <div class="watermark" style="width:100%;height:100%;">
  <div id="gridContainer" style="float:left;width:80%;height:50%;padding:5px;padding-left:15px;"></div>
  <div style="width:200px;height:100%;float:right;background-image:url('images/row_divider.png');background-repeat:repeat-y;">
   <div align="center" style="padding:7px;">
    <div...

CSS

/* some standard CSS \*/
</style>
<!-- access to the HEAD element -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true, isDebug: false"></script>
<style>

JavaScript

var _qid=10;
 var previous_style='';
 var default_countdown=2000000;
 var current_countdown=default_countdown;
 var _rows=new Array();
 var _rowsVehicle=new Array();
 var _bls=0;
 var _als=0;
 var _width=0;
 var message='';

 function updateClock() {
   var currentTime = new Date();
  
   var weekday=new Array(7);
   weekday[0]="Sunday";
   weekday[1]="Monday";
   weekday[2]="Tuesday";
   weekday[3]="Wednesday";
   weekday[4]="Thursday";
   weekday[5]="Friday";
   weekday[6]="Saturday";

   var month=new Array(12);
   month[0]="January";
   month[1]="February";
   month[2]="March";
   month[3]="April";
   month[4]="May";
   month[5]="June";
   month[6]="July";
   month[7]="August";
   month[8]="September";
   month[9]="October";
   month[10]="November";
   month[11]="December";
  
   var currentHours = currentTime.getHours();
   var currentMinutes = currentTime.getMinutes();
   var currentSeconds = currentTime.getSeconds();
  
   // Pad the minutes and seconds with leading zeros, if required
   currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
   currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
  
  /*
   // Choose either "AM" or "PM" as appropriate
   var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
  
   // Convert the hours component to 12-hour format if needed
   currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
  
   // Convert an hours component of "0" to "12"
   currentHours = ( currentHours == 0 ) ? 12 : currentHours;
  
   // Compose the string for display
   var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
  */
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;
  
   // Update the time display
   document.getElementById("date_display").innerHTML=weekday[currentTime.getDay()]+", "+month[currentTime.getMonth()]+" "+currentTime.getDate();
   document.getElementById("clock").innerHTML=currentTimeString;
...