kenzok8-package/luci-app-openclash/luasrc/view/openclash/tblsection_dns.htm

<%-
local rowcnt = 1
local uci = require("luci.model.uci").cursor()
local fs = require "luci.openclash"

function rowstyle()
	rowcnt = rowcnt + 1
	return (rowcnt % 2) + 1
end

function width(o)
	if o.width then
		if type(o.width) == 'number' then
			return ' style="width:%dpx"' % o.width
		end
		return ' style="width:%s"' % o.width
	end
	return ''
end

local head_width
local e={}
table.insert(e, {group="nameserver"})
table.insert(e, {group="fallback"})
table.insert(e, {group="default"})

local sectiontype = "_"..self.config.."_"..string.match(self.sectiontype, "[%w_]+") or "self.sectiontype"
-%>

<style type="text/css">
	*{margin: 0;padding: 0;}
	
	ul{
		list-style: none;
	}

	h3{
		margin-top: 0;
	}

	.cbi-value-field .cbi-dropdown, .cbi-value-field .cbi-input-select, .cbi-value input[type="text"], .cbi-value input[type="password"] {
    	min-width: auto;
	}
	
	#tab-header-<%=self.config%>-<%=self.sectiontype%>{
		min-height: 35px;
		text-align: center;
		position: relative;
		white-space: nowrap;
		overflow: hidden;
        text-overflow: ellipsis;
	}

	#tab-header-<%=self.config%>-<%=self.sectiontype%> ul{
		left: -1px;
		width: 100%;
		padding: unset !important;
		margin: unset !important;
	}

	#tab-header-<%=self.config%>-<%=self.sectiontype%> ul li{
		float: left;
		width: 160px;
		line-height: 35px;
		padding: 0 1px;
		border-right: 1px solid #dddddd;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#tab-header-<%=self.config%>-<%=self.sectiontype%> ul li a{
		float: unset !important;
		padding: unset !important;
		vertical-align: middle;
	}

	#tab-header-<%=self.config%>-<%=self.sectiontype%> ul li.cbi-tab > a{
		font-weight: bolder;
	}
	 
	#tab-header-<%=self.config%>-<%=self.sectiontype%> ul li a:hover{
		color: orangered;
	}
	
	#tab-content .dom-<%=self.config%>-<%=self.sectiontype%>{
		display: none;
	}
	 
	#tab-content .dom-<%=self.config%>-<%=self.sectiontype%> ul li{
	  float: left;
	  margin: 15px 10px;
	  width: 225px;
	}
</style>

<!-- tblsection -->
<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
	<% if self.title and #self.title > 0 then -%>
		<h3><%=self.title%></h3>
	<%- end %>
	<%- if self.sortable then -%>
		<input type="hidden" id="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" name="cbi.sts.<%=self.config%>.<%=self.sectiontype%>" value="" />
	<%- end -%>
	<div class="cbi-section-descr"><%=self.description%></div>
	<%- local count = 0 -%>
	<div id="tab-header-<%=self.config%>-<%=self.sectiontype%>" class="cbi-tabmenu">
		<ul class="cbi-tabmenu">
			<li name="tab-header-<%=self.config%>-<%=self.sectiontype%>" class="cbi-tab"><a>NameServer</a></li>
			<li name="tab-header-<%=self.config%>-<%=self.sectiontype%>" class="cbi-tab-disabled"><a>FallBack</a></li>
			<li name="tab-header-<%=self.config%>-<%=self.sectiontype%>" class="cbi-tab-disabled"><a>Default-NameServer</a></li>
		</ul>
	</div>
	<div id="tab-content">
		<%- for t,o in ipairs(e)do
			if o.group == "nameserver" then
			-%>
			<div class="dom-<%=self.config%>-<%=self.sectiontype%>" style="display: block;">
			<%- else -%>
			<div class="dom-<%=self.config%>-<%=self.sectiontype%>">
			<%- end -%>
				<table class="cbi-section-table">
					<tr class="cbi-section-table-titles">
					<%- if not self.anonymous then -%>
						<%- if self.sectionhead then -%>
							<th class="cbi-section-table-cell"><%=self.sectionhead%></th>
						<%- else -%>
							<th>&#160;</th>
						<%- end -%>
					<%- end -%>
					<%- for i, k in pairs(self.children) do if not k.optional then -%>
						<%- if i == 1 then -%>
							<th class="cbi-section-table-cell"><%:Serial Number%></th>
						<%- end -%>
						<th class="cbi-section-table-cell"<%=width(k)%>>
						<%- if k.titleref then -%><a title="<%=self.titledesc or translate('Go to relevant configuration page')%>" class="cbi-title-ref" href="<%=k.titleref%>"><%- end -%>
							<%-=k.title-%>
						<%- if k.titleref then -%></a><%- end -%>
						</th>
					<%- count = count + 1; end; end; if self.sortable then -%>
						<th class="cbi-section-table-cell"><%:Sort%></th>
					<%- end; if self.extedit or self.addremove then -%>
						<th class="cbi-section-table-cell"><%:Edit%></th>
					<%- count = count + 1; end -%>
					</tr>
					<tr class="cbi-section-table-descr">
					<%- if not self.anonymous then -%>
						<%- if self.sectiondesc then -%>
							<th class="cbi-section-table-cell"><%=self.sectiondesc%></th>
						<%- else -%>
							<th></th>
						<%- end -%>
					<%- end; if self.extedit or self.addremove then -%>
						<th></th>
					<%- end -%>
					<%- for i, k in pairs(self.children) do if not k.optional then -%>
						<th class="cbi-section-table-cell"<%=width(k)%>><%=k.description%></th>
					<%- end; end; if self.sortable then -%>
						<th class="cbi-section-table-cell"></th>
					<%- end; if self.extedit or self.addremove then -%>
						<th class="cbi-section-table-cell"></th>
					<%- end -%>
					</tr>
					<%- local isempty = true
						local num = 1
					for i, k in ipairs(self:cfgsections()) do
						section = k
						while true do
							if uci:get("openclash", section, "group") ~= o.group then
								break
							end
							isempty = false
							scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
					-%>
							<tr class="cbi-section-table-row<% if self.extedit or self.rowcolors then %> cbi-rowstyle-<%=rowstyle()%><% end %>" id="cbi-<%=self.config%>-<%=section%>">
							<% if not self.anonymous then -%>
								<th><h3><%=(type(self.sectiontitle) == "function") and self:sectiontitle(section) or k%></h3></th>
							<%- end %>
							<td class="cbi-section-table-cell">
								<p><%=num%></p>
								<% num = num + 1 -%>
							</td>
							<%-
								for k, node in ipairs(self.children) do
									if not node.optional then
										node:render(section, scope or {})
									end
								end
							-%>
							<%- if self.sortable then -%>
								<td class="cbi-section-table-cell">
									<input class="cbi-button cbi-button-up" type="button" value="<%:∧%>"  onclick="return cbi_row_swap(this, true, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move up%>" title="<%:Move up%>" />
									<input class="cbi-button cbi-button-down" type="button" value="<%:∨%>"  onclick="return cbi_row_swap(this, false, 'cbi.sts.<%=self.config%>.<%=self.sectiontype%>')" alt="<%:Move down%>" title="<%:Move down%>" />
								</td>
							<%- end -%>
			
							<%- if self.extedit or self.addremove then -%>
								<td class="cbi-section-table-cell">
									<%- if self.extedit then -%>
										<input class="btn cbi-button cbi-button-edit" type="button" value="<%:Edit%>"
										<%- if type(self.extedit) == "string" then
										%> onclick="location.href='<%=self.extedit:format(section)%>';return switch_to_tab<%=sectiontype%>()"
										<%- elseif type(self.extedit) == "function" then
										%> onclick="location.href='<%=self:extedit(section)%>';return switch_to_tab<%=sectiontype%>()"
										<%- end
										%> alt="<%:Edit%>" title="<%:Edit%>" />
									<%- end; if self.addremove then %>
										<input class="btn cbi-button cbi-button-remove" type="submit" value="<%:Delete%>"  onclick="this.form.cbi_state='del-section';return switch_to_tab<%=sectiontype%>()" name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" />
									<%- end -%>
								</td>
							<%- end -%>
						<%-
							break
						end
						-%>
							</tr>
					<%- end -%>
	
					<%- if isempty then -%>
					<tr class="cbi-section-table-row">
						<td colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></td>
					</tr>
					<%- end -%>
				</table>
		
				<% if self.error then %>
					<div class="cbi-section-error">
						<ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%>
							<li><%=pcdata(e):gsub("\n","<br />")%></li>
						<%- end end %></ul>
					</div>
				<% end %>
		
				<%- if self.addremove then -%>
					<% if self.template_addremove then include(self.template_addremove) else -%>
					<div class="cbi-section-create cbi-tblsection-create">
						<% if self.anonymous then %>
							<input class="btn cbi-button cbi-button-add" type="submit" onclick="return switch_to_tab<%=sectiontype%>('create')" value="<%:Add%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" title="<%:Add%>" />
						<% else %>
							<% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
							<input type="text" class="cbi-section-create-name" id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname" data-optional="true" />
							<input class="btn cbi-button cbi-button-add" type="submit" onclick="this.form.cbi_state='add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
							<% if self.invalid_cts then -%>
								<br /><%:Invalid%></div>
							<%- end %>
						<% end %>
					</div>
					<%- end %>
				<%- end -%>
			</div>
		<%- end -%>
	</div>
</fieldset>
<!-- /tblsection -->

<script type="text/javascript">//<![CDATA[
	window.addEventListener('load', onload<%=sectiontype%>, false);

	var titles<%=sectiontype%> = document.getElementsByName('tab-header-<%=self.config%>-<%=self.sectiontype%>');
	var divs<%=sectiontype%> = document.getElementsByClassName('dom-<%=self.config%>-<%=self.sectiontype%>');

	function switch_to_tab<%=sectiontype%>(type){

		if(titles<%=sectiontype%>.length != divs<%=sectiontype%>.length) return;
		
		if ( type == 'create' ) {
			for(var j=0; j < titles<%=sectiontype%>.length; j++){
				titles<%=sectiontype%>[j].className = 'cbi-tab-disabled';
				divs<%=sectiontype%>[j].style.display = 'none';
			};
			titles<%=sectiontype%>[0].className = 'cbi-tab';
			divs<%=sectiontype%>[0].style.display = 'block';
			localStorage.setItem("titles<%=sectiontype%>",0);
		};

		localStorage.setItem("id<%=sectiontype%>",'cbi-<%=self.config%>-<%=self.sectiontype%>');
		return true;
	};

	function onload<%=sectiontype%>() {

		if(titles<%=sectiontype%>.length != divs<%=sectiontype%>.length) return;

		if (localStorage.getItem("id<%=sectiontype%>")) {
			if (document.getElementById(localStorage.getItem("id<%=sectiontype%>"))) {
				document.getElementById(localStorage.getItem("id<%=sectiontype%>")).scrollIntoView();
			};
			localStorage.removeItem("id<%=sectiontype%>");
		};

		if (localStorage.getItem("titles<%=sectiontype%>")) {
			if (titles<%=sectiontype%>[localStorage.getItem("titles<%=sectiontype%>")]) {
				for(var j=0; j < titles<%=sectiontype%>.length; j++){
					titles<%=sectiontype%>[j].className = 'cbi-tab-disabled';
					divs<%=sectiontype%>[j].style.display = 'none';
				};
				titles<%=sectiontype%>[localStorage.getItem("titles<%=sectiontype%>")].className = 'cbi-tab';
				divs<%=sectiontype%>[localStorage.getItem("titles<%=sectiontype%>")].style.display = 'block';
			};
			localStorage.removeItem("titles<%=sectiontype%>");
		};

		for(var i=0; i < titles<%=sectiontype%>.length; i++){
			var li<%=sectiontype%> = titles<%=sectiontype%>[i];
			li<%=sectiontype%>.id = i;
			
			li<%=sectiontype%>.onclick = function(){
				for(var j=0; j < titles<%=sectiontype%>.length; j++){
					titles<%=sectiontype%>[j].className = 'cbi-tab-disabled';
					divs<%=sectiontype%>[j].style.display = 'none';
				};
				this.className = 'cbi-tab';
				divs<%=sectiontype%>[this.id].style.display = 'block';
				localStorage.setItem("titles<%=sectiontype%>",this.id);
			};

			li<%=sectiontype%>.onTouchStart = function(){
				for(var j=0; j < titles<%=sectiontype%>.length; j++){
					titles<%=sectiontype%>[j].className = 'cbi-tab-disabled';
					divs<%=sectiontype%>[j].style.display = 'none';
				};
				this.className = 'cbi-tab';
				divs<%=sectiontype%>[this.id].style.display = 'block';
				localStorage.setItem("titles<%=sectiontype%>",this.id);
			};
		};
	};
//]]>
</script>