webgui/plugins/dynamix/DateTime.page

Menu="OtherSettings"
Title="Date and Time"
Icon="date-time.png"
---
<?PHP
/* Copyright 2005-2016, Lime Technology
 * Copyright 2012-2016, Bergware International.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License version 2,
 * as published by the Free Software Foundation.
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 */
?>
<?$keys = explode("\n", file_get_contents('webGui/include/timezones.key'));?>

<script src="/webGui/javascript/jquery.maphilight.js"></script>
<script src="/webGui/javascript/jquery.timezone-picker.js"></script>

<form name="datetime_settings" method="POST" action="/update.htm" target="progressFrame" markdown="1">
Current date and time:
: <?=my_time($var['currTime'])?>

Time zone:
: <select id="timeZone" name="timeZone" class="map"><?
  if (file_exists("/boot/config/timezone")) {
    $yr = date('Y') + 1;
    $tz = exec("zdump -V -c $yr /boot/config/timezone|tail -2|grep -Po 'isdst=0 gmtoff=\K.*'");
    $hh = strlen($tz) ? sprintf("%'.02d",floor(abs($tz)/3600)) : '??';
    $mm = strlen($tz) ? sprintf("%'.02d",abs($tz)%3600/60) : '??';
    $tt = $tz < 0 ? 'UTC-' : 'UTC+';
    echo mk_option($var['timeZone'], "custom", "($tt$hh:$mm) Custom time zone");
  }
  foreach ($keys as $key) {
    list($timezone, $city) = explode('|', $key);
    echo mk_option($var['timeZone'], $timezone, $city);
  }
?></select>
  <input type="button" id="knob" value="Show map" onclick="$('#box').toggle('slow'); $(this).toggleClass('hide').val($(this).hasClass('hide') ? 'Hide map' : 'Show map')" style="margin-top:0">

> Select your time zone. You may also define a custom time zone file and have it appear as a selection in the drop-down list.
>
> To do this, copy your time zone file with name **timezone** to the folder **config** on your flash device.

<div id="box" style="display:none;margin-left:123px;margin-right:123px;" markdown="1">
<img id="map" src="/webGui/images/worldmap.png" usemap="#map">
<map name="map"><?require_once 'webGui/include/timezones.map'?></map>

> The world map highlights the current selected time zone.
>
> Use your mouse to move over the map and click on the country for which you want to set the time zone. The appropriate zone is automatically selected in the drop-down list.
</div>

Use NTP:
: <select name="USE_NTP" size="1" class="narrow" onchange="checkDateTimeSettings(this.form)">
  <?=mk_option($var['USE_NTP'], "yes", "Yes")?>
  <?=mk_option($var['USE_NTP'], "no", "No")?>
  </select>

> Select 'Yes' to use Network Time Protocol to keep your server time accurate.
> We **highly** recommend the use of a network time server, especially if you plan on using Active Directory.

NTP server 1:
: <input type="text" name="NTP_SERVER1" maxlength="80" value="<?=$var['NTP_SERVER1']?>">

> This is the primary NTP server to use.  Enter a FQDN or an IP address.

NTP server 2:
: <input type="text" name="NTP_SERVER2" maxlength="80" value="<?=$var['NTP_SERVER2']?>">

> This is the alternate NTP server to use if NTP Server 1 is down.

NTP server 3:
: <input type="text" name="NTP_SERVER3" maxlength="80" value="<?=$var['NTP_SERVER3']?>">

> This is the alternate NTP Server to use if NTP Servers 1 and 2 are both down.

New date and time:
: <input type="text" name="newDateTime" maxlength="40" value="<?=my_time($var['currTime'], "%F %T")?>">

> Enter the current time-of-day.  Use format YYYY-MM-DD HH:MM:SS. Greyed out when using NTP.

&nbsp;
: <input type="submit" name="setDateTime" value=" Apply " onclick="sticky(false)"><input type="button" value=" Done " onclick="done()">
</form>

<script>
var focus = null;

function checkDateTimeSettings() {
  form = document.datetime_settings;
  if (form.USE_NTP.value=="yes") {
    form.newDateTime.disabled=true;
    form.NTP_SERVER1.disabled=false;
    form.NTP_SERVER2.disabled=false;
    form.NTP_SERVER3.disabled=false;
  } else {
    form.newDateTime.disabled=false;
    form.NTP_SERVER1.disabled=true;
    form.NTP_SERVER2.disabled=true;
    form.NTP_SERVER3.disabled=true;
  }
}
function setArea(timezone, country, offset) {
  // buttons handler (only for this page) cause timezoner-picker triggers unwanted changes
  if (timezone != '<?=$var['timeZone']?>' && $('input[value=" Done "]').val() !== undefined) {
    $('input[value=" Apply "]').removeAttr('disabled');
    $('input[value=" Done "]').val('Reset').prop('onclick',null).click(function(){sticky(true);});
  }
  if (offset==focus) return;
  $('area').each(function() {
    if ($(this).data('offset')==focus) {
      var data = $(this).data('maphilight');
      data.alwaysOn = false;
      data.fillColor = 'BDF5E8';
      $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    } else if ($(this).data('offset')==offset) {
      var data = $(this).data('maphilight');
      data.alwaysOn = true;
      data.fillColor = 'FF9E9E';
      $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    }
  });
  focus = offset;
}
function sticky(renew) {
  if ($('#knob').hasClass('hide')) $.cookie('map','map',{path:'/'});
  if (renew) refresh();
}
$(function() {
  if ($.cookie('map')=='map') {
    $.removeCookie('map',{path:'/'});
    $('#knob').addClass('hide').val('Hide map');
    $('#box').show();
  }
  $('area').each(function(){$(this).attr('data-maphilight','{"alwaysOn":false,"fillColor":"BDF5E8"}');});
  $('#map').timezonePicker({target:'#timeZone', fillOpacity:0.5, stroke:false, changeHandler:setArea});
  $('input[value=" Apply "]').prop('disabled',true);
  $('form[name="datetime_settings"]').find('select,input').not('.map').each(function(){$(this).on('input change',function() {
    var form = $(this).parentsUntil('form').parent();
    form.find('input[value=" Apply "]').removeAttr('disabled');
    form.find('input[value=" Done "]').val('Reset').prop('onclick',null).click(function(){sticky(true);});
  });});
  $(checkDateTimeSettings);
});
</script>