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

<style>
	#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>
	var xhr = new XHR(),
	uci_apply_rollback = <%=math.max(luci.config and luci.config.apply and luci.config.apply.rollback or 90, 90)%>,
	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="Loading.."
	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.%>');
				document.body.classList.remove('apply-overlay-active');
				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/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.svg" alt="" style="vertical-align:middle" /> <span style="white-space:pre-line; word-break:break-all; font-family: \'Courier New\', Courier, monospace;">' + loading_msg + '</span>'
			);

			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', '<span style="white-space:pre-line; word-break:break-all; font-family: \'Courier New\', Courier, monospace;">'+`<%=self.err%>`+'</span>');
		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>