luci/applications/luci-app-ddns/luasrc/view/ddns/overview_status.htm

<!-- ++ BEGIN ++ Dynamic DNS ++ overview_status.htm ++ -->
<script type="text/javascript">//<![CDATA[

	// helper to extract section from objects id
	// cbi.ddns.SECTION._xyz
	function _id2section(id) {
		var x = id.split(".");
		return x[2];
	}

	// helper to move status data to the relevant
	// screen objects
	// called by XHR.poll and onclick_startstop
	function _data2elements(data) {
		// Service sections
		for( i = 1; i < data.length; i++ )
		{
			var section = data[i].section	// Section to handle
			var cbx = document.getElementById("cbid.ddns." + section + ".enabled");		// Enabled
			var btn = document.getElementById("cbid.ddns." + section + "._startstop");	// Start/Stop button
			var rip = document.getElementById("cbid.ddns." + section + "._domainIP.two");	// Registered IP
			var lup = document.getElementById("cbid.ddns." + section + "._update.one");	// Last Update
			var nup = document.getElementById("cbid.ddns." + section + "._update.two");	// Next Update
			if ( !(cbx && btn && rip && lup && nup) ) { return; }	// security check

			// process id
			if (data[i].pid > 0) {
				// stop always possible if process running
				btn.value = "PID: " + data[i].pid;
				btn.className = "cbi-button cbi-input-reset";
			} else {
				// default Start / enabled
				btn.value = "<%:Start%>";
				btn.className = "cbi-button cbi-input-apply";
			}
			btn.disabled = false;	// button enabled

			// last update
			switch (data[i].datelast) {
				case "_empty_":
					lup.innerHTML = '<em><%:Unknown error%></em>' ;
					break;
				case "_never_":
					lup.innerHTML = '<em><%:Never%></em>' ;
					break;
				default:
					lup.innerHTML = data[i].datelast;
					break;
			}

			// next update
			switch (data[i].datenext) {
				case "_empty_":
					nup.innerHTML = '<em><%:Unknown error%></em>' ;
					break;
				case "_verify_":
					nup.innerHTML = '<em><%:Verify%></em>';
					break;
				case "_runonce_":
				case "_stopped_":
				case "_disabled_":
					if (cbx.checked && data[i].datenext == "_runonce_") {
						nup.innerHTML = '<em><%:Run once%></em>';
					} else if (cbx.checked) {
						nup.innerHTML = '<em><%:Stopped%></em>';
					} else {
						nup.innerHTML = '<em><%:Disabled%></em>';
						btn.value = '----------';
						btn.className = "cbi-button cbi-input-button";	// no image
						btn.disabled = true;	// disabled
					}
					break;
				default:
					nup.innerHTML = data[i].datenext;
					break;
			}

			// domain
			// (data[i].domain ignored here

			// registered IP
			// rip.innerHTML = "Registered IP";
			if (data[i].domain == "_nodomain_")
				rip.innerHTML = '';
			else if (data[i].reg_ip == "_nodata_")
				rip.innerHTML = '<em><%:No data%></em>';
			else
				rip.innerHTML = data[i].reg_ip;

			// monitored interfacce
			// data[i].iface ignored here
		}
	}

	// event handler for enabled checkbox
	function onchange_enabled(id) {
		// run original function in cbi.js
		// whatever is done there
		cbi_d_update(id);

		var section = _id2section(id);
		var cbx = document.getElementById("cbid.ddns." + section + ".enabled");
		var btn = document.getElementById("cbid.ddns." + section + "._startstop");
		if ( !(cbx && btn) ) { return; }	// security check

		var pid_txt = btn.value;
		var pid_found = ( pid_txt.search("PID") >= 0 ) ? true : false;

		if (pid_found) {
			// btn.value = "PID: 0000";
			btn.className = "cbi-button cbi-button-reset";
			btn.disabled = false;
		} else if (cbx.checked) {
			btn.value = "<%:Start%>";
			btn.className = "cbi-button cbi-button-apply";
			btn.disabled = false;
		} else {
			btn.value = '----------';
			btn.className = "cbi-button cbi-input-button";	// no image
			btn.disabled = true;		// disabled
		}
	}

	// event handler for start/stop button
	function onclick_startstop(id) {
		// extract section
		var section = _id2section(id);
		// get elements
		var cbx = document.getElementById("cbid.ddns." + section + ".enabled");		// Enabled
		var obj = document.getElementById("cbi-ddns-overview-status-legend");		// object defined below to make in-/visible
		if ( !(obj && cbx) ) { return; }	// security check

		// make me visible
		obj.parentNode.style.display = "block";

		// do start/stop
		var btnXHR = new XHR();
		btnXHR.get('<%=luci.dispatcher.build_url("admin", "services", "ddns", "startstop")%>/' + section + '/' + cbx.checked, null,
			function(x, data) {
				if (x.responseText == "_uncommitted_") {
					// we need a trick to display Ampersand "&" in stead of "&#38;" or "&amp;"
					// after translation
					txt="<%:Please [Save & Apply] your changes first%>";
					alert( txt.replace(new RegExp("<%:&%>", "g"), "&") );
				} else {
					// should have data because status changed
					// so update screen
					if (data) { _data2elements(data); }
				}
				// make me invisible
				obj.parentNode.style.display = "none";
			}
		);
	}

	// force to immediate show status on page load (not waiting for XHR.poll)
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "ddns", "status")%>', null,
		function(x, data) {
			if (data) { _data2elements(data); }
		}
	);

	// define only ONE XHR.poll in a page because if one is running it blocks the other one
	// optimum is to define on Map or Section Level from here you can reach all elements
	// we need update every 15 seconds only
	XHR.poll(15, '<%=luci.dispatcher.build_url("admin", "services", "ddns", "status")%>', null,
		function(x, data) {
			if (data) { _data2elements(data); }
		}
	);

//]]></script>

<fieldset class="cbi-section" style="display:none">
	<legend id="cbi-ddns-overview-status-legend"><%:Applying changes%></legend>
	<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" style="vertical-align:middle" />
	<span id="cbi-ddns-overview-status-text"><%:Waiting for changes to be applied...%></span>
</fieldset>
<!-- ++ END ++ Dynamic DNS ++ overview_status.htm ++ -->