Improved mobile UI
This commit is contained in:
+46
-40
@@ -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') %>
|
||||
|
||||
+99
-99
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user