treewide: convert HTML tables to div

Mostly convert HTML tables to div based markup to allow for easier styling
in the future. Also change JS accessor code accordingly.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

2 files changed, 67 insertions, 67 deletions

diff --git a/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm b/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm
index 9f644ba07..fb40335f9 100644
--- a/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm
+++ b/applications/luci-app-asterisk/luasrc/view/asterisk/dialplans.htm
@@ -79,23 +79,23 @@
 
 		<% for i, plan in pairs(ast.dialplan.plans()) do %>
 		<div class="cbi-section-node">
-			<table class="cbi-section-table">
-				<tr class="cbi-section-table-titles">
-					<th style="text-align: left; padding: 3px" class="cbi-section-table-cell">
+			<div class="table cbi-section-table">
+				<div class="tr cbi-section-table-titles">
+					<div style="text-align: left; padding: 3px" class="th cbi-section-table-cell">
 						<big>Dialplan <em><%=plan.name%></em></big>
-					</th>
-					<td>
+					</div>
+					<div class="td">
 						<a href="<%=url('admin/asterisk/dialplans')%>?delplan=<%=plan.name%>">
 							<img style="border:none" alt="Remove this dialplan" title="Remove this dialplan" src="/luci-static/resources/cbi/remove.gif" />
 						</a>
-					</td>
-				</tr>
+					</div>
+				</div>
 
 				<!-- dialzones -->
 				<% local zones_used = { }; local row = 0 %>
 				<% for i, zone in ipairs(plan.zones) do zones_used[zone.name] = true %>
-				<tr class="cbi-section-table-row <%=rowstyle(row)%>">
-					<td style="text-align: left; padding: 3px" class="cbi-section-table-cell">
+				<div class="tr cbi-section-table-row <%=rowstyle(row)%>">
+					<div style="text-align: left; padding: 3px" class="td cbi-section-table-cell">
 						<strong>&#x2514; Dialzone <em><%=zone.name%></em></strong> (<%=zone.description%>)
 						<p style="padding-left: 1em; margin-bottom:0">
 							Lines:
@@ -107,24 +107,24 @@
 							Matches:
 							<%=format_matches(zone)%>
 						</p>
-					</td>
-					<td style="width:5%" class="cbi-value-field">
+					</div>
+					<div style="width:5%" class="td cbi-value-field">
 						<a href="<%=url('admin/asterisk/dialplans/out', zone.name)%>">
 							<img style="border:none" alt="Edit dialzone" title="Edit dialzone" src="/luci-static/resources/cbi/edit.gif" />
 						</a>
 						<a href="<%=url('admin/asterisk/dialplans')%>?delzone.<%=plan.name%>=<%=zone.name%>">
 							<img style="border:none" alt="Remove from this dialplan" title="Remove from this dialplan" src="/luci-static/resources/cbi/remove.gif" />
 						</a>
-					</td>
-				</tr>
+					</div>
+				</div>
 				<% row = row + 1; end %>
 				<!-- /dialzones -->
 
 				<!-- voicemail -->
 				<% local boxes_used = { } %>
 				<% for ext, box in luci.util.kspairs(plan.voicemailboxes) do boxes_used[box.id] = true %>
-				<tr class="cbi-section-table-row <%=rowstyle(row)%>">
-					<td style="text-align: left; padding: 3px" class="cbi-section-table-cell">
+				<div class="tr cbi-section-table-row <%=rowstyle(row)%>">
+					<div style="text-align: left; padding: 3px" class="td cbi-section-table-cell">
 						<strong>&#x2514; Voicemailbox <em><%=box.id%></em></strong> (<%=box.name%>)
 						<p style="padding-left: 1em; margin-bottom:0">
 							Owner: <%=box.name%> |
@@ -132,44 +132,44 @@
 							Pager: <%=#box.page  > 0 and box.page  or 'n/a'%><br />
 							Matches: <%=format_matches(ext)%>
 						</p>
-					</td>
-					<td style="width:5%" class="cbi-value-field">
+					</div>
+					<div style="width:5%" class="td cbi-value-field">
 						<a href="<%=url('admin/asterisk/voicemail/mailboxes')%>">
 							<img style="border:none" alt="Manage mailboxes ..." title="Manage mailboxes ..." src="/luci-static/resources/cbi/edit.gif" />
 						</a>
 						<a href="<%=url('admin/asterisk/dialplans')%>?delvbox.<%=plan.name%>=<%=ext%>">
 							<img style="border:none" alt="Remove from this dialplan" title="Remove from this dialplan" src="/luci-static/resources/cbi/remove.gif" />
 						</a>
-					</td>
-				</tr>
+					</div>
+				</div>
 				<% row = row + 1; end %>
 				<!-- /voicemail -->
 
 				<!-- meetme -->
 				<% local rooms_used = { } %>
 				<% for ext, room in luci.util.kspairs(plan.meetmerooms) do rooms_used[room.room] = true %>
-				<tr class="cbi-section-table-row <%=rowstyle(row)%>">
-					<td style="text-align: left; padding: 3px" class="cbi-section-table-cell">
+				<div class="tr cbi-section-table-row <%=rowstyle(row)%>">
+					<div style="text-align: left; padding: 3px" class="td cbi-section-table-cell">
 						<strong>&#x2514; MeetMe Room <em><%=room.room%></em></strong>
 						<% if room.description and #room.description > 0 then %> (<%=room.description%>)<% end %>
 						<p style="padding-left: 1em; margin-bottom:0">
 							Matches: <%=format_matches(ext)%>
 						</p>
-					</td>
-					<td style="width:5%" class="cbi-value-field">
+					</div>
+					<div style="width:5%" class="td cbi-value-field">
 						<a href="<%=url('admin/asterisk/meetme/rooms')%>">
 							<img style="border:none" alt="Manage conferences ..." title="Manage conferences ..." src="/luci-static/resources/cbi/edit.gif" />
 						</a>
 						<a href="<%=url('admin/asterisk/dialplans')%>?delmeetme.<%=plan.name%>=<%=ext%>">
 							<img style="border:none" alt="Remove from this dialplan" title="Remove from this dialplan" src="/luci-static/resources/cbi/remove.gif" />
 						</a>
-					</td>
-				</tr>
+					</div>
+				</div>
 				<% row = row + 1; end %>
 				<!-- /meetme -->
 
-				<tr class="cbi-section-table-row">
-					<td style="text-align: left; padding: 3px" class="cbi-section-table-cell" colspan="2">
+				<div class="tr cbi-section-table-row">
+					<div style="text-align: left; padding: 3px" class="td cbi-section-table-cell" colspan="2">
 						<hr style="margin-bottom:0.5em; border-width:0 0 1px 0" />
 
 						Add Dialzone:<br />
@@ -213,10 +213,10 @@
 						<br /><br />
 
 						<input type="submit" class="cbi-button cbi-button-add" value="Add item &raquo;" title="Add item ..."/>
-					</td>
-				</tr>
+					</div>
+				</div>
 
-			</table>
+			</div>
 
 			<div class="cbi-section-create cbi-tblsection-create"></div>
 		</div>
diff --git a/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm b/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm
index ffdbbcf35..e48da608a 100644
--- a/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm
+++ b/applications/luci-app-asterisk/luasrc/view/asterisk/dialzones.htm
@@ -66,59 +66,59 @@
 	<!-- tblsection -->
 	<fieldset class="cbi-section" id="cbi-asterisk-sip">
 		<div class="cbi-section-node">
-			<table class="cbi-section-table">
-				<tr class="cbi-section-table-titles">
-					<th style="text-align: left; padding: 3px" class="cbi-section-table-cell" colspan="6">
+			<div class="table cbi-section-table">
+				<div class="tr cbi-section-table-titles">
+					<div style="text-align: left; padding: 3px" class="th cbi-section-table-cell" colspan="6">
 						<h3>Dialzone Overview</h3>
-					</th>
-				</tr>
-
-				<tr class="cbi-section-table-descr">
-					<th style="width: 5%; text-align:right" class="cbi-section-table-cell">Name</th>
-					<th style="width: 5%; text-align:right" class="cbi-section-table-cell">Prepend</th>
-					<th style="width: 20%; text-align:left" class="cbi-section-table-cell">- Match</th>
-					<th style="text-align:left" class="cbi-section-table-cell">Trunk</th>
-					<th style="width: 35%; text-align:left" class="cbi-section-table-cell">Description</th>
-					<th style="width: 4%; text-align:left" class="cbi-section-table-cell"></th>
-				</tr>
+					</div>
+				</div>
+
+				<div class="tr cbi-section-table-descr">
+					<div style="width: 5%; text-align:right" class="th cbi-section-table-cell">Name</div>
+					<div style="width: 5%; text-align:right" class="th cbi-section-table-cell">Prepend</div>
+					<div style="width: 20%; text-align:left" class="th cbi-section-table-cell">- Match</div>
+					<div style="text-align:left" class="th cbi-section-table-cell">Trunk</div>
+					<div style="width: 35%; text-align:left" class="th cbi-section-table-cell">Description</div>
+					<div style="width: 4%; text-align:left" class="th cbi-section-table-cell"></div>
+				</div>
 
 				<% for i, rule in pairs(ast.dialzone.zones()) do %>
-				<tr class="cbi-section-table-row <%=rowstyle(i)%>">
-					<td style="text-align:right" class="cbi-value-field">
+				<div class="tr cbi-section-table-row <%=rowstyle(i)%>">
+					<div style="text-align:right" class="td cbi-value-field">
 						<%=rule.name%>
-					</td>
-					<td style="text-align:right" class="cbi-value-field">
+					</div>
+					<div style="text-align:right" class="td cbi-value-field">
 						<% for _ in ipairs(rule.matches) do %>
 							<%=rule.addprefix and digit_pattern(rule.addprefix)%>&#160;<br />
 						<% end %>
-					</td>
-					<td style="text-align:left" class="cbi-value-field">
+					</div>
+					<div style="text-align:left" class="td cbi-value-field">
 						<% for _, m in ipairs(rule.matches) do %>
 							<%=rule.localprefix and "%s " % digit_pattern(rule.localprefix)%>
 							<%=digit_pattern(m)%><br />
 						<% end %>
-					</td>
-					<td style="text-align:left" class="cbi-value-field">
+					</div>
+					<div style="text-align:left" class="td cbi-value-field">
 						<%=ast.tools.hyperlinks(
 							rule.trunks, function(v)
 								return luci.dispatcher.build_url("admin", "asterisk", "trunks", "%s") % v:lower()
 							end
 						)%>
-					</td>
-					<td style="text-align:left" class="cbi-value-field">
+					</div>
+					<div style="text-align:left" class="td cbi-value-field">
 						<%=rule.description or rule.name%>
-					</td>
-					<td style="text-align:left" class="cbi-value-field">
+					</div>
+					<div style="text-align:left" class="td cbi-value-field">
 						<a href="<%=url('admin/asterisk/dialplans/out', rule.name)%>">
 							<img style="border:none" alt="Edit entry" title="Edit entry" src="/luci-static/resources/cbi/edit.gif" />
 						</a>
 						<a href="<%=url('admin/asterisk/dialplans/zones')%>?delzone=<%=rule.name%>">
 							<img style="border:none" alt="Delete entry" title="Delete entry" src="/luci-static/resources/cbi/remove.gif" />
 						</a>
-					</td>
-				</tr>
+					</div>
+				</div>
 				<% end %>
-			</table>
+			</div>
 			<div class="cbi-section-create cbi-tblsection-create"></div>
 		</div>
 		<br />
@@ -133,26 +133,26 @@
 					<br /><span style="color:red">Invalid name given!</span><br />
 				<% end -%>
 
-				<table>
-					<tr>
-						<td style="padding:3px">
+				<div class="table">
+					<div class="tr">
+						<div class="td" style="padding:3px">
 							<label for="create1">1) Name</label><br />
 							<input type="text" class="cbi-section-create-name" id="create1" name="newzone_name" style="width:200px" />
 							<br /><br />
 
 							<label for="create2">2) Number Match</label><br />
 							<input type="text" class="cbi-section-create-name" id="create2" name="newzone_match" style="width:200px" />
-						</td>
-						<td style="padding:3px">
+						</div>
+						<div class="td" style="padding:3px">
 							<label for="create3">3) Trunks</label><br />
 							<select class="cbi-input-select" multiple="multiple" id="create3" name="newzone_uses" size="4"  style="width:200px">
 								<% for i, t in ipairs(find_trunks()) do %>
 									<option value="<%=t[1]%>"><%=t[2]%></option>
 								<% end %>
 							</select>
-						</td>
-					</tr>
-				</table>
+						</div>
+					</div>
+				</div>
 				<br />
 
 				<input type="submit" class="cbi-button cbi-button-add" name="newzone" value="Add entry" title="Add entry"/>