webgui/emhttp/plugins/dynamix/DisplaySettings.page

Menu="UserPreferences"
Title="Display Settings"
Icon="icon-display"
Tag="desktop"
---
<?PHP
/* Copyright 2005-2023, Lime Technology
 * Copyright 2012-2023, 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";
?>
<script src="<?autov('/webGui/javascript/jquery.filedrop.js')?>"></script>
<script>
var path = '/boot/config/plugins/dynamix';
var filename = '';
var locale = "<?=$locale?>";

function restore() {
  // restore original image and activate APPLY button
  $('#dropbox').html("<?=$void?>");
  $('select[name="banner"]').trigger('change');
  filename = 'reset';
}
function upload(lang) {
  // 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'});
  }
  // reset dashboard tiles when switching language
  if (lang != locale) {
    $.removeCookie('db-box1');
    $.removeCookie('db-box2');
    $.removeCookie('db-box3');
    $.removeCookie('inactive_content');
    $.removeCookie('hidden_content');
  }
}
function presetBanner(form) {
  if (form.banner.selectedIndex == 0) $('.js-bannerSettings').hide(); else $('.js-bannerSettings').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 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();
  });
  presetBanner(document.display_settings);
});
</script>

:display_settings_help:

<form markdown="1" name="display_settings" method="POST" action="/update.php" target="progressFrame" onsubmit="upload(this.locale.value)">
<input type="hidden" name="#file" value="dynamix/dynamix.cfg">
<input type="hidden" name="#section" value="display">
<input type="hidden" name="rtl" value="<?=$display['rtl']?>">

_(Display width)_:
: <select name="width">
  <?=mk_option($display['width'], "",_('Boxed'))?>
  <?=mk_option($display['width'], "1",_('Unlimited'))?>
  </select>

:display_width_help:

_(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:

_(Terminal font size)_:
: <select name="tty" id="tty">
  <?=mk_option($display['tty'], "11",_('Very small'))?>
  <?=mk_option($display['tty'], "13",_('Small'))?>
  <?=mk_option($display['tty'], "15",_('Normal'))?>
  <?=mk_option($display['tty'], "17",_('Large'))?>
  <?=mk_option($display['tty'], "19",_('Very large'))?>
  <?=mk_option($display['tty'], "21",_('Huge'))?>
  </select>

:display_tty_size_help:

_(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>

:display_page_view_help:

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

:display_users_menu_help:

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

:display_listing_height_help:

_(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>

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

:display_temperature_unit_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>

_(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 secondary 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)_">

_(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>

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

<div class="js-bannerSettings" 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">

:display_custom_banner_help:
</div>

<div class="js-bannerSettings" markdown="1" style="display:none">
_(Show banner background color fade)_:
: <select name="showBannerGradient">
  <?=mk_option($display['showBannerGradient'], "no",_('No'))?>
  <?=mk_option($display['showBannerGradient'], "yes",_('Yes'))?>
  </select>
</div>

<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>