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

Time zone:
: <select id="edit-timezone" name="timeZone" class="map">
  <?foreach ($keys as $key):?>
  <?list($timezone, $info) = explode('|', $key);?>
  <?=mk_option($var['timeZone'], $timezone, $info)?>
  <?endforeach;?>
  </select>
  <input type="button" value="Show map" onclick="$('#picker').toggle('slow'); $(this).toggleClass('hide'); $(this).val($(this).hasClass('hide') ? 'Hide map' : 'Show map')" style="margin-top:0">

<div id="picker" style="display:none;margin-left:124px;margin-bottom:24px">
<img id="globe" src="/webGui/images/worldmap.png" usemap="#map">
<map name="map" id="map"><?require_once 'webGui/include/timezones.map'?></map>
</div>

Use NTP:
: <select name="USE_NTP" size="1" class="auto" 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']?>" class="narrow">

> 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']?>" class="narrow">

> 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']?>" class="narrow">

> 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")?>" class="narrow">

> Enter the current time-of-day.  Use format YYYY-MM-DD HH:MM:SS. Greyed out when using NTP.
>
> 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 to your flash device, with name `config/timezone`.

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

<script>
var previous = 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(){refresh();});
  }
  if (offset == previous) return;
  $('area').each(function() {
    if ($(this).data('offset')==previous) {
      var data = $(this).data('maphilight');
      data.alwaysOn = false;
      data.fillColor = 'BDF5E8';
      $(this).data('maphilight', data).trigger('fillColor.maphilight');
      $(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('fillColor.maphilight');
      $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    }
  });
  previous = offset;
}
$(function() {
  $('#globe').timezonePicker({target:'#edit-timezone', fillOpacity:0.6, stroke:false, changeHandler:setArea});
  $('area').each(function(){$(this).attr('data-maphilight','{"alwaysOn":false, "fillColor":"BDF5E8"}');});
  $('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(){refresh();});
  });});
  $(checkDateTimeSettings);
});
</script>