Menu="Docker:1"
Title="Docker Containers"
Tag="cubes"
Cond="is_file('/var/run/dockerd.pid')"
Markdown="false"
Nchan="docker_load:stop"
---
<?PHP
/* Copyright 2005-2023, Lime Technology
 * Copyright 2014-2023, Guilherme Jardim, Eric Schultz, Jon Panozzo.
 * 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.
 */
?>
<?
require_once "$docroot/plugins/dynamix.docker.manager/include/DockerClient.php";

$width   = in_array($theme,['white','black']) ? -58: -44;
$top     = in_array($theme,['white','black']) ? 40 : 20;
$busy    = "<i class='fa fa-spin fa-circle-o-notch'></i> "._('Please wait')."... "._('starting up containers');
$cpus    = cpu_list();
?>
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
<style>
.basic{display:block}
.advanced{display:none;white-space:nowrap}
.log{cursor:zoom-in}
.exec{cursor:pointer}
table#docker_containers{text-align:left}
th.five{width:5%}
th.nine{width:9%}
th.load{width:140px}
input.wait{width:24px;margin:0 4px;padding:0 5px;border:none;box-shadow:none;background-color:transparent}
table tbody td{line-height:normal}
</style>
<table id="docker_containers" class="tablesorter shift">
<thead><tr><th><a href="#" style="cursor:hand;margin-left:12px;display:inline-block;width:32px" onclick="resetSorting()" title="_(Reset sorting)_"><i class="fa fa-th-list"></i></a>_(Application)_</th><th>_(Version)_</th><th>_(Network)_</th><th>_(Port Mappings)_ <small>(_(App to Host)_)</small></th><th>_(Volume Mappings)_ <small>(_(App to Host)_)</small></th><th class="load advanced">_(CPU & Memory load)_</th><th class="nine">_(Autostart)_</th><th class="five">_(Uptime)_</th></tr></thead>
<tbody id="docker_list"><tr><td colspan='8'></td></tr></tbody>
</table>
<input type="button" onclick="addContainer()" value="_(Add Container)_" style="display:none">
<input type="button" onclick="startAll()" value="_(Start All)_" style="display:none">
<input type="button" onclick="stopAll()" value="_(Stop All)_" style="display:none">
<input type="button" onclick="pauseAll()" value="_(Pause All)_" style="display:none">
<input type="button" onclick="resumeAll()" value="_(Resume All)_" style="display:none">
<input type="button" onclick="checkAll()" value="_(Check for Updates)_" id="checkAll" style="display:none">
<input type="button" onclick="updateAll()" value="_(Update All)_" id="updateAll" style="display:none">
<input type="button" onclick="contSizes()" value="_(Container Size)_" style="display:none">
<div id="iframe-popup" style="display:none;-webkit-overflow-scrolling:touch;"></div>

<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
<script src="<?autov('/plugins/dynamix.docker.manager/javascript/docker.js')?>"></script>
<script>
var docker = [];
<?if (!$tabbed):?>
$('.title').append("<span id='busy' class='red-text strong' style='display:none;margin-left:40px'><?=$busy?></span>");
<?else:?>
$('.tabs').append("<span id='busy' class='red-text strong' style='display:none;position:relative;top:<?=$top?>px;left:40px;font-size:1.4rem;letter-spacing:2px'><?=$busy?></span>");
<?endif;?>
<?if ($display['resize']):?>
function resize() {
  var width = [];
  $('#docker_list').height(Math.max(window.innerHeight-340,330));
  $('#docker_containers thead,#docker_containers tbody').removeClass('fixed');
  $('#docker_containers tbody tr:first-child td').each(function(){width.push($(this).width());});
  $('#docker_containers thead tr th').each(function(i){$(this).width(width[i]);});
  $('#docker_containers tbody tr td').each(function(i){$(this).width(width[i]);});
  $('#docker_containers thead,#docker_containers tbody').addClass('fixed');
}
<?endif;?>
function resetSorting() {
  $('input[type=button]').prop('disabled',true);
  $.post('/plugins/dynamix.docker.manager/include/UserPrefs.php',{reset:true},function(){loadlist();});
}
function listview() {
  var more = $.cookie('docker_listview_mode')=='advanced';
  <?if(($dockercfg['DOCKER_READMORE']??'yes') === 'yes'):?>
  $('.docker_readmore').readmore({maxHeight:32,moreLink:"<a href='#' style='text-align:center'><i class='fa fa-chevron-down'></i></a>",lessLink:"<a href='#' style='text-align:center'><i class='fa fa-chevron-up'></i></a>"});
  <?endif;?>
  $('input.autostart').each(function(){
    var wait = $('#'+$(this).prop('id').replace('auto','wait'));
    var auto = $(this).prop('checked');
    if (auto && more) wait.show(); else wait.hide();
  });
}
var sortableHelper = function(e,ui){
  ui.children().each(function(){$(this).width($(this).width());});
  return ui;
};
function LockButton() {
  if ($.cookie('lockbutton') == null) {
    $.cookie('lockbutton','lockbutton');
<?if ($themes1):?>
    $('div.nav-item.LockButton').find('a').prop('title',"_(Lock sortable items)_");
    $('div.nav-item.LockButton').find('b').removeClass('icon-u-lock red-text').addClass('icon-u-lock-open green-text');
<?endif;?>
    $('div.nav-item.LockButton').find('span').text("_(Lock sortable items)_");
    $('#docker_list').sortable({helper:sortableHelper,items:'.sortable',cursor:'grab',axis:'y',containment:'parent',cancel:'span.docker_readmore,input',delay:100,opacity:0.5,zIndex:9999,forcePlaceholderSize:true,
    update:function(e,ui){
      var row = $('#docker_list').find('tr:first');
      var names = ''; var index = '';
      row.parent().children().find('td.ct-name').each(function(){names+=$(this).find('.appname').text()+';';index+=$(this).parent().parent().children().index($(this).parent())+';';});
      $.post('/plugins/dynamix.docker.manager/include/UserPrefs.php',{names:names,index:index});
    }});
  } else {
    $.removeCookie('lockbutton');
<?if ($themes1):?>
    $('div.nav-item.LockButton').find('a').prop('title',"_(Unlock sortable items)_");
    $('div.nav-item.LockButton').find('b').removeClass('icon-u-lock-open green-text').addClass('icon-u-lock red-text');
<?endif;?>
    $('div.nav-item.LockButton').find('span').text("_(Unlock sortable items)_");
    $('#docker_list').sortable('destroy');
  }
}
function loadlist(init) {
  timers.docker = setTimeout(function(){$('div.spinner.fixed').show('slow');},500);
  $.get('/plugins/dynamix.docker.manager/include/DockerContainers.php',function(d) {
    clearTimeout(timers.docker);
    var data = d.split(/\0/);
    $('#docker_list').html(data[0]);
    $('head').append('<script>'+data[1]+'<\/script>');
<?if ($display['resize']):?>
    resize();
    if (init) $(window).bind('resize',function(){resize();});
<?endif;?>
    $('.iconstatus').each(function(){
      if ($(this).hasClass('stopped')) $('div.'+$(this).prop('id')).hide();
    });
    $('.autostart').switchButton({labels_placement:'right', on_label:"_(On)_", off_label:"_(Off)_"});
    $('.autostart').change(function(){
      var more = $.cookie('docker_listview_mode')=='advanced';
      var wait = $('#'+$(this).prop('id').replace('auto','wait'));
      var auto = $(this).prop('checked');
      if (auto && more) wait.show(); else wait.hide();
      $.post('/plugins/dynamix.docker.manager/include/UpdateConfig.php',{action:'autostart',container:$(this).attr('container'),auto:auto,wait:wait.find('input.wait').val()});
    });
    $('input.wait').change(function(){
      $.post('/plugins/dynamix.docker.manager/include/UpdateConfig.php',{action:'wait',container:$(this).attr('container'),wait:$(this).val()});
    });
    if ($.cookie('docker_listview_mode')=='advanced') {$('.advanced').show(); $('.basic').hide();}
    $('input[type=button]').prop('disabled',false).show('slow');
    var update = false, rebuild = false;
    for (var i=0,ct; ct=docker[i]; i++) {
      if (ct.update==1) update = true;
      if (ct.update==2) rebuild = true;
    }
    listview();
    $('div.spinner.fixed').hide('slow');
    if (data[2]==1) {$('#busy').show(); setTimeout(loadlist,5000);} else if ($('#busy').is(':visible')) {$('#busy').hide(); setTimeout(loadlist,3000);}
    if (!update) $('input#updateAll').prop('disabled',true);
    if (rebuild) rebuildAll();
  });
}
function contSizes() {
  // show spinner over window
  $('div.spinner.fixed').css({'z-index':'100000'}).show();
  openPlugin('container_size', "_(Container Size)_");
}
var dockerload = new NchanSubscriber('/sub/dockerload',{subscriber:'websocket'});
dockerload.on('message', function(msg){
  var data = msg.split('\n');
  for (var i=0,row; row=data[i]; i++) {
    var id = row.split(';');
    var w1 = Math.round(Math.min(id[1].slice(0,-1)/<?=count($cpus)*count(preg_split('/[,-]/',$cpus[0]))?>,100)*100)/100+'%';
    $('.cpu-'+id[0]).text(w1.replace('.','<?=_var($display,'number','.,')[0]?>'));
    $('.mem-'+id[0]).text(id[2]);
    $('#cpu-'+id[0]).css('width',w1);
  }
});
$(function() {
  $(".tabs").append('<span class="status"><span><input type="checkbox" class="advancedview"></span></span>');
  $('.advancedview').switchButton({labels_placement:'left', on_label:"_(Advanced View)_", off_label:"_(Basic View)_", checked:$.cookie('docker_listview_mode')=='advanced'});
  $('.advancedview').change(function(){
    $('.advanced').toggle('slow');
    $('.basic').toggle('slow');
    $.cookie('docker_listview_mode',$('.advancedview').is(':checked')?'advanced':'basic',{expires:3650});
    listview();
  });
  $.removeCookie('lockbutton');
  loadlist(true);
  dockerload.start();
});
</script>