DHDAXCW-Rockchip-OpenWrt/package/lean/luci-app-dockerman/luasrc/view/docker/apply_widget.htm

<style type="text/css">
  #docker_apply_overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 20000;
  }

  #docker_apply_overlay .alert-message {
    position: relative;
    top: 10%;
    width: 60%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    min-height: 32px;
    align-items: center;
  }

  #docker_apply_overlay .alert-message > h4,
  #docker_apply_overlay .alert-message > p,
  #docker_apply_overlay .alert-message > div {
    flex-basis: 100%;
  }

  #docker_apply_overlay .alert-message > img {
    margin-right: 1em;
    flex-basis: 32px;
  }

  body.apply-overlay-active {
    overflow: hidden;
    height: 100vh;
  }

  body.apply-overlay-active #docker_apply_overlay {
    display: block;
  }
</style>
<script type="text/javascript">//<![CDATA[
    var xhr = new XHR(),
      uci_apply_rollback = <%=math.max(luci.config and luci.config.apply and luci.config.apply.rollback or 30, 30)%>,
      uci_apply_holdoff = <%=math.max(luci.config and luci.config.apply and luci.config.apply.holdoff or 4, 1)%>,
      uci_apply_timeout = <%=math.max(luci.config and luci.config.apply and luci.config.apply.timeout or 5, 1)%>,
      uci_apply_display = <%=math.max(luci.config and luci.config.apply and luci.config.apply.display or 1.5, 1)%>,
      was_xhr_poll_running = false;

function docker_status_message(type, content) {
  document.getElementById('docker_apply_overlay') || document.body.insertAdjacentHTML("beforeend",'<div id="docker_apply_overlay"><div class="alert-message"></div></div>')
  var overlay = document.getElementById('docker_apply_overlay')
      message = overlay.querySelector('.alert-message');

  if (message && type) {
    if (!message.classList.contains(type)) {
      message.classList.remove('notice');
      message.classList.remove('warning');
      message.classList.add(type);
    }

    if (content)
      message.innerHTML = content;

    document.body.classList.add('apply-overlay-active');
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    if (!was_xhr_poll_running) {
      was_xhr_poll_running = XHR.running();
      XHR.halt();
    }
  }
  else {
    document.body.classList.remove('apply-overlay-active');

    if (was_xhr_poll_running)
      XHR.run();
  }
}
var loading_msg="Loadding.."
function uci_confirm_docker() {
    var tt;
    docker_status_message('notice');
    var call = function(r, resjson, duration) {
      if (r && r.status === 200 ) {
        var indicator = document.querySelector('.uci_change_indicator');
        if (indicator) indicator.style.display = 'none';
        docker_status_message('notice', '<%:Docker actions done.%>');
        window.clearTimeout(tt);
        return;
      }
      loading_msg = resjson?resjson.info:loading_msg
      // var delay = isNaN(duration) ? 0 : Math.max(1000 - duration, 0);
      var delay =1000
      window.setTimeout(function() {
        xhr.get('<%=url("admin/services/docker/confirm")%>', null, call, uci_apply_timeout * 1000);
      }, delay);
    };

    var tick = function() {
      var now = Date.now();

      docker_status_message('notice',
        '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> ' +
        loading_msg);

      tt = window.setTimeout(tick, 200);
      ts = now;
    };
    tick();
    /* wait a few seconds for the settings to become effective */
    window.setTimeout(call, Math.max(uci_apply_holdoff * 1000 , 1));
  }
  // document.getElementsByTagName("form")[0].addEventListener("submit", (e)=>{
  //   uci_confirm_docker()
  // })

function fnSubmitForm(el){
  if (el.id != "cbid.table.1._new") {
    uci_confirm_docker()
  }
}

<% if self.err then -%>
  docker_status_message('warning', `<%=self.err%>`);
  document.getElementById('docker_apply_overlay').addEventListener("click", (e)=>{
    docker_status_message()
  })
<%- end %>

window.onload= function (){
var buttons = document.querySelectorAll('input[type="submit"]');
[].slice.call(buttons).forEach(function (el) {
  el.onclick = fnSubmitForm.bind(this, el);
});
}

//]]></script>