applications/luci-app-dockerman/luasrc/view/dockerman/apply_widget.htm

   1 <style type="text/css">
   2   #docker_apply_overlay {
   3     position: absolute;
   4     top: 0;
   5     left: 0;
   6     bottom: 0;
   7     right: 0;
   8     background: rgba(0, 0, 0, 0.7);
   9     display: none;
  10     z-index: 20000;
  11   }
  12
  13   #docker_apply_overlay .alert-message {
  14     position: relative;
  15     top: 10%;
  16     width: 60%;
  17     margin: auto;
  18     display: flex;
  19     flex-wrap: wrap;
  20     min-height: 32px;
  21     align-items: center;
  22   }
  23
  24   #docker_apply_overlay .alert-message > h4,
  25   #docker_apply_overlay .alert-message > p,
  26   #docker_apply_overlay .alert-message > div {
  27     flex-basis: 100%;
  28   }
  29
  30   #docker_apply_overlay .alert-message > img {
  31     margin-right: 1em;
  32     flex-basis: 32px;
  33   }
  34
  35   body.apply-overlay-active {
  36     overflow: hidden;
  37     height: 100vh;
  38   }
  39
  40   body.apply-overlay-active #docker_apply_overlay {
  41     display: block;
  42   }
  43 </style>
  44 <script type="text/javascript">//<![CDATA[
  45     var xhr = new XHR(),
  46       uci_apply_rollback = <%=math.max(luci.config and luci.config.apply and luci.config.apply.rollback or 30, 30)%>,
  47       uci_apply_holdoff = <%=math.max(luci.config and luci.config.apply and luci.config.apply.holdoff or 4, 1)%>,
  48       uci_apply_timeout = <%=math.max(luci.config and luci.config.apply and luci.config.apply.timeout or 5, 1)%>,
  49       uci_apply_display = <%=math.max(luci.config and luci.config.apply and luci.config.apply.display or 1.5, 1)%>,
  50       was_xhr_poll_running = false;
  51
  52 function docker_status_message(type, content) {
  53   document.getElementById('docker_apply_overlay') || document.body.insertAdjacentHTML("beforeend",'<div id="docker_apply_overlay"><div class="alert-message"></div></div>')
  54   var overlay = document.getElementById('docker_apply_overlay')
  55       message = overlay.querySelector('.alert-message');
  56
  57   if (message && type) {
  58     if (!message.classList.contains(type)) {
  59       message.classList.remove('notice');
  60       message.classList.remove('warning');
  61       message.classList.add(type);
  62     }
  63
  64     if (content)
  65       message.innerHTML = content;
  66
  67     document.body.classList.add('apply-overlay-active');
  68     document.body.scrollTop = document.documentElement.scrollTop = 0;
  69     if (!was_xhr_poll_running) {
  70       was_xhr_poll_running = XHR.running();
  71       XHR.halt();
  72     }
  73   }
  74   else {
  75     document.body.classList.remove('apply-overlay-active');
  76
  77     if (was_xhr_poll_running)
  78       XHR.run();
  79   }
  80 }
  81 var loading_msg="Loading.."
  82 function uci_confirm_docker() {
  83     var tt;
  84     docker_status_message('notice');
  85     var call = function(r, resjson, duration) {
  86       if (r && r.status === 200 ) {
  87         var indicator = document.querySelector('.uci_change_indicator');
  88         if (indicator) indicator.style.display = 'none';
  89         docker_status_message('notice', '<%:Docker actions done.%>');
  90         document.body.classList.remove('apply-overlay-active');
  91         window.clearTimeout(tt);
  92         return;
  93       }
  94       loading_msg = resjson?resjson.info:loading_msg
  95       // var delay = isNaN(duration) ? 0 : Math.max(1000 - duration, 0);
  96       var delay =1000
  97       window.setTimeout(function() {
  98         xhr.get('<%=url("admin/docker/confirm")%>', null, call, uci_apply_timeout * 1000);
  99       }, delay);
 100     };
 101
 102     var tick = function() {
 103       var now = Date.now();
 104
 105       docker_status_message('notice',
 106         '<img src="<%=resource%>/icons/loading.gif" alt="" style="vertical-align:middle" /> <span style="white-space:pre-line; word-break:break-all; font-family: \'Courier New\', Courier, monospace;">' +
 107         loading_msg + '</span>');
 108
 109       tt = window.setTimeout(tick, 200);
 110       ts = now;
 111     };
 112     tick();
 113     /* wait a few seconds for the settings to become effective */
 114     window.setTimeout(call, Math.max(uci_apply_holdoff * 1000 , 1));
 115   }
 116   // document.getElementsByTagName("form")[0].addEventListener("submit", (e)=>{
 117   //   uci_confirm_docker()
 118   // })
 119
 120 function fnSubmitForm(el){
 121   if (el.id != "cbid.table.1._new") {
 122     uci_confirm_docker()
 123   }
 124 }
 125
 126 <% if self.err then -%>
 127   docker_status_message('warning', '<span style="white-space:pre-line; word-break:break-all; font-family: \'Courier New\', Courier, monospace;">'+`<%=self.err%>`+'</span>');
 128   document.getElementById('docker_apply_overlay').addEventListener("click", (e)=>{
 129     docker_status_message()
 130   })
 131 <%- end %>
 132
 133 window.onload= function (){
 134 var buttons = document.querySelectorAll('input[type="submit"]');
 135 [].slice.call(buttons).forEach(function (el) {
 136   el.onclick = fnSubmitForm.bind(this, el);
 137 });
 138 }
 139
 140 //]]></script>