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