From f9d3ae55242bed16880e63c1d0f0ce91685aa537 Mon Sep 17 00:00:00 2001
From: William Mantly <wmantly@gmail.com>
Date: Thu, 15 Aug 2024 18:48:07 -0400
Subject: [PATCH] Improved mobile UI

---
 nodejs/views/dns.ejs   |  86 +++++++++---------
 nodejs/views/hosts.ejs | 198 ++++++++++++++++++++---------------------
 2 files changed, 145 insertions(+), 139 deletions(-)

diff --git a/nodejs/views/dns.ejs b/nodejs/views/dns.ejs
index 81d9b6c..2e0ea34 100644
--- a/nodejs/views/dns.ejs
+++ b/nodejs/views/dns.ejs
@@ -26,7 +26,7 @@
 
 <script type="text/javascript">
 
-	function providerGet(cb){
+	function providerGet(){
 		app.api.options('dns', function(error, res){
 			for(let provider of res.results){
 				$.scope.providerSelect.push(provider);
@@ -99,9 +99,9 @@
 	});
 
 </script>
-<div class="row" style="display:none">
-	<div class="col-md-4">
-		<div class="card shadow-lg">
+<div class="row mb-3" style="display:none">
+	<div class="col-md-3">
+		<div class="card shadow-lg mb-3">
 
 			<div class="card-header text-center">
 				<span class="card-icon float-start">
@@ -116,7 +116,7 @@
 			</div>
 
 			<div class="card-header actionMessage" style="display:none"></div>
-			<div class="card-body">
+			<div class="card-body d-none d-md-block">
 				<form action="dns/" onsubmit="formAJAX(this)">
 					<div class="form-group">
 						<label for="name" class="form-label">
@@ -155,52 +155,58 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-md-8">
-		<div class="card shadow-lg">
+	<div class="col-md-9">
+		<div class="row row-cols-1 row-cols-md-2 g-4">
+			
+			<div jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="col">
+				<div class="card shadow-lg">
 
-			<div class="card-header text-center">
-				<span class="card-icon float-start">
-					<i class="fa-solid fa-record-vinyl"></i>
-				</span>
-				<span class="card-title">
-					DNS list
-				</span>
-				<span class="float-end">
-					<i class="fa-solid fa-circle-minus"></i>
-				</span>
-			</div>
+					<div class="card-header text-center">
+						<span class="card-icon float-start">
+							<i class="fa-solid fa-record-vinyl"></i>
+						</span>
+						<span class="card-title">
+							 {{ dnsProvider }} DNS
+						</span>
+						<span class="float-end">
+							<i class="fa-solid fa-circle-minus"></i>
+						</span>
+					</div>
 
-			<div class="card-header actionMessage" style="display:none"></div>
-			<ul class="card-body list-group list-group-flush" style="padding:0;">
-				<li jq-repeat="DnsProvider" jq-repeat-index="id" style="display:none" class="list-group-item" onload="provider">
-					<div class="row">
-						<div class="col-6">
-							<h3><img height="32px" src="{{ displayIconHtml }}"/> {{ dnsProvider }}</h3>
-							<h4>{{ name }}</h4>
+					<div class="card-header actionMessage" style="display:none"></div>
+					<div class="card-body">
+						<div class="row">
+								<h3><img height="32px" src="{{ displayIconHtml }}"/> {{name}} </h3>
 						</div>
-						<div class="col-6 text-end">
-							<b class="momentFromNow" data-date="{{ updated_on }}">{{ created_on_text }}</b> by <b>{{ created_by }}</b>
+						<div>
+							<b jq-repeat='Domain_{{id}}' jq-repeat-index="domain" class="me-2 my-1 badge text-bg-info rounded-pill fs-6">
+								{{domain}}
+							</b>
+							<script type="text/javascript">
+								try{
+									$.scope.Domain_{{id}}.push(...{{{domainsString}}});
+								}catch{}
+							</script>
+						</div>
+					</div>
+					<div class="card-footer">
+						Added <b class="momentFromNow" data-date="{{ updated_on }}">{{ created_on_text }}</b> by <b>{{ created_by }}</b>
+						<span class="float-end text-end">
 							<button type="button" class="btn btn-warning" method="POST" action="/dns/domain/refresh/{{id}}" onclick="formAJAX()">
 								<i class="fa-solid fa-rotate"></i>
 							</button>
 							<button type="button" class="btn btn-danger" method="DELETE" action="dns/{{id}}" onclick="formAJAX()">
 								<i class="fa-solid fa-trash-can"></i>
 							</button>
-						</div>
+						</span>
 					</div>
-					<div class="mb-3">
-						<b jq-repeat='Domain_{{id}}' jq-repeat-index="domain" class="m-1 badge text-bg-info rounded-pill">
-							{{domain}}
-						</b>
-						<script type="text/javascript">
-							try{
-								$.scope.Domain_{{id}}.push(...{{{domainsString}}});
-							}catch{}
-						</script>
-					</div>
-				</li>
-			</ul>
+
+					
+				</div>
+
+			</div>
 		</div>
+
 	</div>
 </div>
 <%- include('bottom') %>
diff --git a/nodejs/views/hosts.ejs b/nodejs/views/hosts.ejs
index f71a0ea..5652fc0 100755
--- a/nodejs/views/hosts.ejs
+++ b/nodejs/views/hosts.ejs
@@ -10,13 +10,6 @@
 		margin-bottom: 1px;
 	}
 
-	.card-title{
-		font-weight: bold;
-	}
-
-	div.hostEditPanel{
-		margin-bottom: 1em;
-	}
 	div.form-group{
 		margin-bottom: 1em;
 	}
@@ -89,14 +82,21 @@
 		hostEditCancle();
 		host = $.scope.hosts.getByKey(host);
 		host.__jq_$el.addClass('table-warning');
+		$editHostForm.find('[name=is_wildcard').attr('disabled', true);
 		$.scope.editHost.update({...host, form: $editHostForm.html()});
 
+		if(host.is_wildcard){
+			$('.hostEditPanel [name="host"]').attr('disabled', true);
+		}
+
 		$.each(host, function( key, value ) {			if(typeof value == "boolean"){
 				$(".hostEditPanel #"+ key +"-"+ value).prop('checked', true)
 			}else{
 				$(".hostEditPanel input[name='" + key + "']").val(value);
 			}
 		});
+
+		$('.hostEditPanel').scrollTo();
 	};
 
 	function hostDownloadCert(host, type){
@@ -127,7 +127,6 @@
 		$editHostForm = $('#addHost').clone();
 		$editHostForm.find('hr.buttonBreak').nextAll().remove();
 		// $editHostForm.find('.autoSll').addClass('bg-secondary');
-		$editHostForm.find('[name=is_wildcard').attr('disabled', true);
 		hostPopulate(); //populate the table
 
 		$.scope.hosts.take = function($el, item, list){
@@ -137,7 +136,7 @@
 			});
 		};
 
-		$.scope.hosts.update = function($el, $render, item, list){
+		$.scope.hosts.putUpdate = function($el, $render, item, list){
 			$render.show()
 			$el.replaceWith($render);
 		};
@@ -187,7 +186,7 @@
 	<!-- 
 		left column 
 	-->
-		<div jq-repeat="editHost" class="card shadow-lg border-warning hostEditPanel" style="display:none">
+		<div jq-repeat="editHost" class="card shadow-lg border-warning hostEditPanel mb-3" style="display:none">
 			<!--
 				Edit host card
 			-->
@@ -220,7 +219,7 @@
 			</div>
 		</div>
 
-		<div class="card shadow-lg hostAddPanel">
+		<div class="card shadow-lg mb-3 hostAddPanel">
 			<!--
 				Add new host card
 			-->
@@ -238,7 +237,7 @@
 
 			<div class="card-header actionMessage" style="display:none"></div>
 
-			<div class="card-body">
+			<div class="card-body d-none d-md-block">
 				<form class="addHost" id="addHost" method="POST" action="host" onsubmit="formAJAX(this)">
 
 					<div class="form-group">
@@ -357,98 +356,99 @@
 				<label class="form-label" for="search" style="margin-left: -5px;">
 					Search Hosts:
 				</label>
-				<input type="search" oninput="hostSearchInput()">
+				<input type="search" oninput="hostSearchInput()" />
 			</div>
-			<table class="m-0 card-body table table-striped table-sm overflow-x-scroll">
-	
-				<thead>
-					<th>
-						SSL Expire
-					</th>
-					<th>
-						Host Name
-					</th>
-					<th>
-						target
-					</th>
-					<th class="hidden-xs">
-						Updated
-					</th>
-					<th>
-						Actions
-					</th>
-				</thead>
+			<div class='table-responsive'>
+				<table class="m-0 card-body table table-striped overflow-x-scroll">
+		
+					<thead>
+						<th>
+							SSL Expire
+						</th>
+						<th>
+							Host Name
+						</th>
+						<th>
+							target
+						</th>
+						<th class="hidden-xs">
+							Updated
+						</th>
+						<th>
+							Actions
+						</th>
+					</thead>
 
-				<tbody>
-					<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
-						<td class="table-{{wildcard_text_bg}}">
-							{{{ wildcard_text }}}
-							{{#wildcard_expires}}
-								<span class="momentFromNow" data-date="{{ wildcard_expires }}" >{{wildcard_expires_text}}</span>
-							{{/wildcard_expires}}
-						</td>
-						<td>
-							<a target="_blank" href="{{ forcessl_text }}{{ host }}">
-								{{{ forcessl_text }}}{{ host }}
-							</a>
-							{{#domain.provider}}
-								<br />
-								<img width="24px" src="{{displayIconHtml}}" /> {{displayName}}
-							{{/domain.provider}}
-						</td>
-						<td>
-							{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
-						</td>
-						<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}" >
-							{{ updated_on_text }}
-						</td>
-						<td>
-							<div class="btn-group">
+					<tbody>
+						<tr action="api" jq-repeat="hosts" jq-repeat-index='host' style="display:none">
+							<td class="table-{{wildcard_text_bg}}">
+								{{{ wildcard_text }}}
+								{{#wildcard_expires}}
+									<span class="momentFromNow" data-date="{{ wildcard_expires }}" >{{wildcard_expires_text}}</span>
+								{{/wildcard_expires}}
+							</td>
+							<td>
+								<a target="_blank" href="{{ forcessl_text }}{{ host }}">
+									{{{ forcessl_text }}}{{ host }}
+								</a>
+								{{#domain.provider}}
+									<br />
+									<img width="24px" src="{{displayIconHtml}}" /> {{displayName}} - {{name}}
+								{{/domain.provider}}
+							</td>
+							<td>
+								{{{ targetssl_text }}}{{ ip }}:{{ targetPort }}
+							</td>
+							<td class="hidden-xs momentFromNow" data-date="{{ updated_on }}" >
+								{{ updated_on_text }}
+							</td>
+							<td>
+								<div class="btn-group">
 
-								<div class="btn-group" role="group">
-									<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-										<i class="fa-brands fa-expeditedssl"></i>
-										Certs
+									<div class="btn-group" role="group">
+										<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+											<i class="fa-brands fa-expeditedssl"></i>
+											Certs
+										</button>
+										<ul class="dropdown-menu">
+											<li>
+												<button type="button" class="dropdown-item" onclick="hostDownloadCert('{{host}}', 'cert_pem')">
+													<i class="fa-solid fa-certificate"></i>
+													Cert
+													<i class="fa-solid fa-file-arrow-down float-end"></i>
+												</button>
+											</li>
+											<li>
+												<button type="button" class="dropdown-item" onclick="hostDownloadCert('{{host}}', 'fullchain_pem')">
+													<i class="fa-solid fa-link"></i>
+													Full Chain
+													<i class="fa-solid fa-file-arrow-down float-end"></i>
+												</button>
+											</li>
+											<li>
+												<button type="button" class="dropdown-item" onclick="hostDownloadCert('{{host}}', 'privkey_pem')">
+													<i class="fa-solid fa-key"></i>
+													Private key
+													<i class="fa-solid fa-file-arrow-down float-end"></i>
+												</button>
+											</li>
+										</ul>
+									</div>
+
+									<button type="button" onclick="hostEditOpen(this, '{{ host }}');" class="btn btn-sm btn-warning">
+										<i class="fa-solid fa-pencil"></i>
+										Edit
+									</button>
+									<button type="button" method="DELETE" action="host/{{host}}" onclick="formAJAX()" class="btn btn-sm btn-danger">
+										<i class="fa-solid fa-trash-can"></i>
+										Delete
 									</button>
-									<ul class="dropdown-menu">
-										<li>
-											<button type="button" class="dropdown-item" onclick="hostDownloadCert('{{host}}', 'cert_pem')">
-												<i class="fa-solid fa-certificate"></i>
-												Cert
-												<i class="fa-solid fa-file-arrow-down float-end"></i>
-											</button>
-										</li>
-										<li>
-											<button type="button" class="dropdown-item" onclick="hostDownloadCert('{{host}}', 'fullchain_pem')">
-												<i class="fa-solid fa-link"></i>
-												Full Chain
-												<i class="fa-solid fa-file-arrow-down float-end"></i>
-											</button>
-										</li>
-										<li>
-											<button type="button" class="dropdown-item" onclick="hostDownloadCert('{{host}}', 'privkey_pem')">
-												<i class="fa-solid fa-key"></i>
-												Private key
-												<i class="fa-solid fa-file-arrow-down float-end"></i>
-											</button>
-										</li>
-									</ul>
 								</div>
-
-								<button type="button" onclick="hostEditOpen(this, '{{ host }}');" class="btn btn-sm btn-warning">
-									<i class="fa-solid fa-pencil"></i>
-									Edit
-								</button>
-								<button type="button" method="DELETE" action="host/{{host}}" onclick="formAJAX()" class="btn btn-sm btn-danger">
-									<i class="fa-solid fa-trash-can"></i>
-									Delete
-								</button>
-							</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
 		</div>
 	</div>
 </div>