Menu="UserPreferences"
Title="Display Settings"
Icon="icon-display"
Tag="desktop"
---
<?PHP
/* Copyright 2005-2020, Lime Technology
 * Copyright 2012-2020, 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.
 */
?>
<?
$void = "<img src='/webGui/images/banner.png' id='image' width='330' height='30' onclick='$(&quot;#drop&quot;).click()' style='cursor:pointer' title='Click to select PNG file'>";
$icon = "<i class='fa fa-trash top' title='Restore default image' onclick='restore()'></i>";
$plugins = '/var/log/plugins';

require_once "$docroot/plugins/dynamix.plugin.manager/include/PluginHelpers.php";
?>
<style>
span#dropbox{margin-right:20px;}
i.top{position:relative;padding-left:4px;cursor:pointer;}
select.fixed{max-width:166px}
</style>

<script src="<?autov('/webGui/javascript/jquery.filedrop.js')?>"></script>
<script>
var path = '/boot/config/plugins/dynamix';
var filename = '';

function restore() {
  // restore original image and activate APPLY button
  $('#dropbox').html("<?=$void?>");
  $('select[name="banner"]').trigger('change');
  filename = 'reset';
}
function upload() {
  // save or delete upload when APPLY is pressed
  if (filename=='reset') {
    $.post("/webGui/include/FileUpload.php",{cmd:'delete',path:path,filename:'banner.png'});
  } else if (filename) {
    $.post("/webGui/include/FileUpload.php",{cmd:'save',path:path,filename:filename,output:'banner.png'});
  }
}
function presetTime(form) {
  var system = form.date.selectedIndex==0;
  if (system) form.time.selectedIndex = 0;
  form.time.disabled = system;
}
function presetBanner(form) {
  if (form.banner.selectedIndex == 0) $('#custom').hide(); else $('#custom').show();
}
function presetRefresh(form) {
  for (var i=0,item; item=form.refresh.options[i]; i++) item.value *= -1;
}
function presetPassive(index) {
  if (index==0) $('#passive').hide(); else $('#passive').show();
}
function saveFontSize() {
  $.cookie('fontSize',$('#font option:selected').val(),{path:'/',expires:3650});
}
function updateDirection(lang) {
  // var rtl = ['ar_AR','fa_FA'].includes(lang) ? "dir='rtl' " : "";
  // RTL display is not giving the desired results, we keep LTR
  var rtl = "";
  $('input[name="rtl"]').val(rtl);
}

$(function() {
  var dropbox = $('#dropbox');
  // attach the drag-n-drop feature to the 'dropbox' element
  dropbox.filedrop({
    maxfiles:1,
    maxfilesize:512, // KB
    data: {"csrf_token": "<?=$var['csrf_token']?>"},
    url:'/webGui/include/FileUpload.php',
    beforeEach:function(file) {
      if (!file.type.match(/^image\/.*/)) {
        swal({title:"_(Warning)_",text:"_(Only PNG images are allowed)_!",type:"warning",html:true,confirmButtonText:"_(Ok)_"});
        return false;
      }
    },
    error: function(err, file, i) {
      switch (err) {
      case 'BrowserNotSupported':
        swal({title:"_(Browser error)_",text:"_(Your browser does not support HTML5 file uploads)_!",type:"error",html:true,confirmButtonText:"_(Ok)_"});
        break;
      case 'TooManyFiles':
        swal({title:"_(Too many files)_",text:"_(Please select one file only)_!",html:true,type:"error"});
        break;
      case 'FileTooLarge':
        swal({title:"_(File too large)_",text:"_(Maximum file upload size is 512K)_ (524,288 _(bytes)_)",type:"error",html:true,confirmButtonText:"_(Ok)_"});
        break;
      }
    },
    uploadStarted:function(i,file,count) {
      var image = $('img', $(dropbox));
      var reader = new FileReader();
      image.width = 330;
      image.height = 30;
      reader.onload = function(e){image.attr('src',e.target.result);};
      reader.readAsDataURL(file);
    },
    uploadFinished:function(i,file,response) {
      if (response == 'OK 200') {
        if (!filename || filename=='reset') $(dropbox).append("<?=$icon?>");
        $('select[name="banner"]').trigger('change');
        filename = file.name;
      } else {
        swal({title:"_(Upload error)_",text:response,type:"error",html:true,confirmButtonText:"_(Ok)_"});
      }
    }
  });
  // simulate a drop action when manual file selection is done
  $('#drop').bind('change', function(e) {
    var files = e.target.files;
    if ($('#dropbox').triggerHandler({type:'drop',dataTransfer:{files:files}})==false) e.stopImmediatePropagation();
  });
  presetTime(document.display_settings);
  presetBanner(document.display_settings);
});
</script>

:display_settings_help:

<form markdown="1" name="display_settings" method="POST" action="/update.php" target="progressFrame" onsubmit="saveFontSize();upload();">
<input type="hidden" name="#file" value="dynamix/dynamix.cfg">
<input type="hidden" name="#section" value="display">
<input type="hidden" name="rtl" value="<?=$display['rtl']?>">
_(Language)_:
: <select name="locale" class="fixed" onchange="updateDirection(this.value)">
<?echo mk_option($display['locale'], "","English");
  foreach (glob("$plugins/lang-*.xml",GLOB_NOSORT) as $xml_file) {
    $lang = language('Language', $xml_file);
    $home = language('LanguageLocal', $xml_file);
    $name = language('LanguagePack', $xml_file);
    echo mk_option($display['locale'], $name, "$home ($lang)");
  }
?></select>

_(Font size)_:
: <select name="font" id='font'>
  <?=mk_option($display['font'], "50%",_('Very small'))?>
  <?=mk_option($display['font'], "56.25%",_('Small'))?>
  <?=mk_option($display['font'], "",_('Normal'))?>
  <?=mk_option($display['font'], "68.75%",_('Large'))?>
  <?=mk_option($display['font'], "75%",_('Very large'))?>
  <?=mk_option($display['font'],"80%",_('Huge'))?>
  </select>

:display_font_size_help:

_(Date format)_:
: <select name="date" onchange="presetTime(this.form)">
  <?=mk_option($display['date'], "%c","_(System Setting)_")?>
  <?=mk_option($display['date'], "%A, %Y %B %e",_('Day, YYYY Month D'))?>
  <?=mk_option($display['date'], "%A, %e %B %Y",_('Day, D Month YYYY'))?>
  <?=mk_option($display['date'], "%A, %B %e, %Y",_('Day, Month D, YYYY'))?>
  <?=mk_option($display['date'], "%A, %m/%d/%Y",_('Day, MM/DD/YYYY'))?>
  <?=mk_option($display['date'], "%A, %d-%m-%Y",_('Day, DD-MM-YYYY'))?>
  <?=mk_option($display['date'], "%A, %d.%m.%Y",_('Day, DD.MM.YYYY'))?>
  <?=mk_option($display['date'], "%A, %Y-%m-%d",_('Day, YYYY-MM-DD'))?>
  </select>

_(Time format)_:
: <select name="time">
  <?=mk_option($display['time'], "%I:%M %p",_('12 hours'))?>
  <?=mk_option($display['time'], "%R",_('24 hours'))?>
  </select>

_(Number format)_:
: <select name="number">
  <?=mk_option($display['number'], ".,",_('[D] dot : [G] comma'))?>
  <?=mk_option($display['number'], ". ",_('[D] dot : [G] space'))?>
  <?=mk_option($display['number'], ".",_('[D] dot : [G] none'))?>
  <?=mk_option($display['number'], ",.",_('[D] comma : [G] dot'))?>
  <?=mk_option($display['number'], ", ",_('[D] comma : [G] space'))?>
  <?=mk_option($display['number'], ",",_('[D] comma : [G] none'))?>
  </select>

_(Number scaling)_:
: <select name="scale">
  <?=mk_option($display['scale'], "-1",_('Automatic'))?>
  <?=mk_option($display['scale'], "0",_('Disabled'))?>
  <?=mk_option($display['scale'], "1",_('KB'))?>
  <?=mk_option($display['scale'], "2",_('MB'))?>
  <?=mk_option($display['scale'], "3",_('GB'))?>
  <?=mk_option($display['scale'], "4",_('TB'))?>
  <?=mk_option($display['scale'], "5",_('PB'))?>
  </select>

_(Page view)_:
: <select name="tabs">
  <?=mk_option($display['tabs'], "0",_('Tabbed'))?>
  <?=mk_option($display['tabs'], "1",_('Non-tabbed'))?>
  </select>

_(Placement of Users menu)_:
: <select name="users">
  <?=mk_option($display['users'], "Tasks:3",_('Header menu'))?>
  <?=mk_option($display['users'], "UserPreferences",_('Settings menu'))?>
  </select>

_(Listing height)_:
: <select name="resize">
  <?=mk_option($display['resize'], "0",_('Automatic'))?>
  <?=mk_option($display['resize'], "1",_('Fixed'))?>
  </select>

_(Display device name)_:
: <select name="raw">
  <?=mk_option($display['raw'], "",_('Normalized'))?>
  <?=mk_option($display['raw'], "1",_('Raw'))?>
  </select>

_(Display world-wide-name in device ID)_:
: <select name="wwn">
  <?=mk_option($display['wwn'], "0",_('Disabled'))?>
  <?=mk_option($display['wwn'], "1",_('Automatic'))?>
  </select>

:display_wwn_device_id_help:

_(Display array totals)_:
: <select name="total">
  <?=mk_option($display['total'], "0",_('No'))?>
  <?=mk_option($display['total'], "1",_('Yes'))?>
  </select>

_(Show array utilization indicator)_:
: <select name="usage">
  <?=mk_option($display['usage'], "0",_('No'))?>
  <?=mk_option($display['usage'], "1",_('Yes'))?>
  </select>

_(Header custom text color)_:
: <input type="text" class="narrow" name="header" value="<?=$display['header']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">

:display_custom_text_color_help:

_(Header custom background color)_:
: <input type="text" class="narrow" name="background" value="<?=$display['background']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="_(HTML color code of 3 or 6 hexadecimal digits)_">

:display_custom_background_color_help:

_(Header show description)_:
: <select name="headerdescription">
  <?=mk_option($display['headerdescription'], "yes",_('Yes'))?>
  <?=mk_option($display['headerdescription'], "no",_('No'))?>
  </select>

_(Header custom meta text color)_:
: <input type="text" class="narrow" name="headermetacolor" value="<?=$display['headermetacolor']?>" maxlength="6" pattern="([0-9a-fA-F]{3}){1,2}" title="HTML color code of 3 or 6 hexadecimal digits">

_(Show banner)_:
: <select name="banner" onchange="presetBanner(this.form)">
  <?=mk_option($display['banner'], "",_('No'))?>
  <?=mk_option($display['banner'], "image",_('Yes'))?>
  </select>

<div id="custom" markdown="1" style="display:none">
_(Custom banner)_:
<input type="hidden" name="#custom" value="">
: <span id="dropbox">
<?if (file_exists($banner)):?>
  <img src="<?=autov($banner)?>" width="330" height="30" onclick="$('#drop').click()" style="cursor:pointer" title="_(Click to select PNG file)_"><?=$icon?>
<?else:?>
  <?=$void?>
<?endif;?>
  </span><em>_(Drag-n-drop a PNG file or click the image at the left)_.</em><input type="file" id="drop" accept="image/*" style="display:none">
</div>

:display_custom_banner_help:

_(Show Dashboard apps)_:
: <select name="dashapps">
  <?=mk_option($display['dashapps'], "icons",_('Docker + VMs'))?>
  <?=mk_option($display['dashapps'], "docker",_('Docker only'))?>
  <?=mk_option($display['dashapps'], "vms",_('VMs only'))?>
  <?=mk_option($display['dashapps'], "none",_('None'))?>
  </select>

_(Dynamix color theme)_:
: <select name="theme">
  <?foreach (glob("$docroot/webGui/styles/dynamix-*.css") as $themes):?>
  <?$theme = substr(basename($themes,'.css'),8);?>
  <?=mk_option($display['theme'], $theme, _(ucfirst($theme)))?>
  <?endforeach;?>
  </select>

_(Used / Free columns)_:
: <select name="text">
  <?=mk_option($display['text'], "0",_('Text'))?>
  <?=mk_option($display['text'], "1",_('Bar (gray)'))?>
  <?=mk_option($display['text'], "2",_('Bar (color)'))?>
  <?=mk_option($display['text'], "10",_('Text - Bar (gray)'))?>
  <?=mk_option($display['text'], "20",_('Text - Bar (color)'))?>
  <?=mk_option($display['text'], "11",_('Bar (gray) - Text'))?>
  <?=mk_option($display['text'], "21",_('Bar (color) - Text'))?>
  </select>

_(Temperature unit)_:
: <select name="unit">
  <?=mk_option($display['unit'], "C",_('Celsius'))?>
  <?=mk_option($display['unit'], "F",_('Fahrenheit'))?>
  </select>

:display_temperature_unit_help:

<input type="submit" name="#default" value="_(Default)_" onclick="filename='reset'">
: <input type="submit" name="#apply" value="_(Apply)_" disabled><input type="button" value="_(Done)_" onclick="done()">
</form>