804 lines
22 KiB
HTML
804 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Manage Hosts</title>
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
color: #566787;
|
||
|
|
background: #74ebd5;
|
||
|
|
background: -webkit-linear-gradient(to right, #74ebd5, #ACB6E5);
|
||
|
|
background: linear-gradient(to right, #74ebd5, #ACB6E5);
|
||
|
|
font-family: 'Varela Round', sans-serif;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-responsive {
|
||
|
|
margin: 30px 0;
|
||
|
|
}
|
||
|
|
.table-wrapper {
|
||
|
|
min-width: 1000px;
|
||
|
|
background: #fff;
|
||
|
|
padding: 20px 25px;
|
||
|
|
border-radius: 3px;
|
||
|
|
box-shadow: 0 1px 1px rgba(0,0,0,.05);
|
||
|
|
}
|
||
|
|
.table-title {
|
||
|
|
padding-bottom: 15px;
|
||
|
|
background: #435d7d;
|
||
|
|
color: #fff;
|
||
|
|
padding: 16px 30px;
|
||
|
|
margin: -20px -25px 10px;
|
||
|
|
border-radius: 3px 3px 0 0;
|
||
|
|
}
|
||
|
|
.table-title h2 {
|
||
|
|
margin: 5px 0 0;
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
.table-title .btn-group {
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
.table-title .btn {
|
||
|
|
color: #fff;
|
||
|
|
float: right;
|
||
|
|
font-size: 13px;
|
||
|
|
border: none;
|
||
|
|
min-width: 50px;
|
||
|
|
border-radius: 2px;
|
||
|
|
border: none;
|
||
|
|
outline: none !important;
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
.table-title .btn i {
|
||
|
|
float: left;
|
||
|
|
font-size: 21px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.table-title .btn span {
|
||
|
|
float: left;
|
||
|
|
margin-top: 2px;
|
||
|
|
}
|
||
|
|
table.table tr th, table.table tr td {
|
||
|
|
border-color: #e9e9e9;
|
||
|
|
padding: 12px 15px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
table.table tr th:first-child {
|
||
|
|
width: 60px;
|
||
|
|
}
|
||
|
|
table.table tr th:last-child {
|
||
|
|
width: 100px;
|
||
|
|
}
|
||
|
|
table.table-striped tbody tr:nth-of-type(odd) {
|
||
|
|
background-color: #fcfcfc;
|
||
|
|
}
|
||
|
|
table.table-striped.table-hover tbody tr:hover {
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
table.table th i {
|
||
|
|
font-size: 13px;
|
||
|
|
margin: 0 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
table.table td:last-child i {
|
||
|
|
opacity: 0.9;
|
||
|
|
font-size: 22px;
|
||
|
|
margin: 0 5px;
|
||
|
|
}
|
||
|
|
table.table td a {
|
||
|
|
font-weight: bold;
|
||
|
|
color: #566787;
|
||
|
|
display: inline-block;
|
||
|
|
text-decoration: none;
|
||
|
|
outline: none !important;
|
||
|
|
}
|
||
|
|
table.table td a:hover {
|
||
|
|
color: #2196F3;
|
||
|
|
}
|
||
|
|
table.table td a.edit {
|
||
|
|
color: #FFC107;
|
||
|
|
}
|
||
|
|
table.table td a.delete {
|
||
|
|
color: #F44336;
|
||
|
|
}
|
||
|
|
table.table td i {
|
||
|
|
font-size: 19px;
|
||
|
|
}
|
||
|
|
table.table .avatar {
|
||
|
|
border-radius: 50%;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.pagination {
|
||
|
|
float: right;
|
||
|
|
margin: 0 0 5px;
|
||
|
|
}
|
||
|
|
.pagination li a {
|
||
|
|
border: none;
|
||
|
|
font-size: 13px;
|
||
|
|
min-width: 30px;
|
||
|
|
min-height: 30px;
|
||
|
|
color: #999;
|
||
|
|
margin: 0 2px;
|
||
|
|
line-height: 30px;
|
||
|
|
border-radius: 2px !important;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0 6px;
|
||
|
|
}
|
||
|
|
.pagination li a:hover {
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
.pagination li.active a, .pagination li.active a.page-link {
|
||
|
|
background: #03A9F4;
|
||
|
|
}
|
||
|
|
.pagination li.active a:hover {
|
||
|
|
background: #0397d6;
|
||
|
|
}
|
||
|
|
.pagination li.disabled i {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
.pagination li i {
|
||
|
|
font-size: 16px;
|
||
|
|
padding-top: 6px
|
||
|
|
}
|
||
|
|
.hint-text {
|
||
|
|
float: left;
|
||
|
|
margin-top: 10px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
/* Custom checkbox */
|
||
|
|
.custom-checkbox {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.custom-checkbox input[type="checkbox"] {
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
margin: 5px 0 0 3px;
|
||
|
|
z-index: 9;
|
||
|
|
}
|
||
|
|
.custom-checkbox label:before{
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
}
|
||
|
|
.custom-checkbox label:before {
|
||
|
|
content: '';
|
||
|
|
margin-right: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: text-top;
|
||
|
|
background: white;
|
||
|
|
border: 1px solid #bbb;
|
||
|
|
border-radius: 2px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.custom-checkbox input[type="checkbox"]:checked + label:after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
left: 6px;
|
||
|
|
top: 3px;
|
||
|
|
width: 6px;
|
||
|
|
height: 11px;
|
||
|
|
border: solid #000;
|
||
|
|
border-width: 0 3px 3px 0;
|
||
|
|
transform: inherit;
|
||
|
|
z-index: 3;
|
||
|
|
transform: rotateZ(45deg);
|
||
|
|
}
|
||
|
|
.custom-checkbox input[type="checkbox"]:checked + label:before {
|
||
|
|
border-color: #03A9F4;
|
||
|
|
background: #03A9F4;
|
||
|
|
}
|
||
|
|
.custom-checkbox input[type="checkbox"]:checked + label:after {
|
||
|
|
border-color: #fff;
|
||
|
|
}
|
||
|
|
.custom-checkbox input[type="checkbox"]:disabled + label:before {
|
||
|
|
color: #b8b8b8;
|
||
|
|
cursor: auto;
|
||
|
|
box-shadow: none;
|
||
|
|
background: #ddd;
|
||
|
|
}
|
||
|
|
/* Modal styles */
|
||
|
|
.modal .modal-dialog {
|
||
|
|
max-width: 400px;
|
||
|
|
}
|
||
|
|
.modal .modal-header, .modal .modal-body, .modal .modal-footer {
|
||
|
|
padding: 20px 30px;
|
||
|
|
}
|
||
|
|
.modal .modal-content {
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
.modal .modal-footer {
|
||
|
|
background: #ecf0f1;
|
||
|
|
border-radius: 0 0 3px 3px;
|
||
|
|
}
|
||
|
|
.modal .modal-title {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.modal .form-control {
|
||
|
|
border-radius: 2px;
|
||
|
|
box-shadow: none;
|
||
|
|
border-color: #dddddd;
|
||
|
|
}
|
||
|
|
.modal textarea.form-control {
|
||
|
|
resize: vertical;
|
||
|
|
}
|
||
|
|
.modal .btn {
|
||
|
|
border-radius: 2px;
|
||
|
|
min-width: 100px;
|
||
|
|
}
|
||
|
|
.modal form label {
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
#overlay{
|
||
|
|
position: absolute;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: black;
|
||
|
|
opacity: .5;
|
||
|
|
display: none;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 200;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loader {
|
||
|
|
|
||
|
|
border: 10px solid #f3f3f3;
|
||
|
|
border-radius: 50%;
|
||
|
|
border-top: 10px solid #4e729e;
|
||
|
|
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
-webkit-animation: spin .4s linear infinite; /* Safari */
|
||
|
|
animation: spin .4s linear infinite;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Safari */
|
||
|
|
@-webkit-keyframes spin {
|
||
|
|
0% { -webkit-transform: rotate(0deg); }
|
||
|
|
100% { -webkit-transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function(){
|
||
|
|
//window.onload= function(){
|
||
|
|
// Activate tooltip
|
||
|
|
$('[data-toggle="tooltip"]').tooltip();
|
||
|
|
|
||
|
|
// Select/Deselect checkboxes
|
||
|
|
var checkbox = $('table tbody input[type="checkbox"]');
|
||
|
|
$("#selectAll").click(function(){
|
||
|
|
if(this.checked){
|
||
|
|
checkbox.each(function(){
|
||
|
|
this.checked = true;
|
||
|
|
});
|
||
|
|
} else{
|
||
|
|
checkbox.each(function(){
|
||
|
|
this.checked = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
checkbox.click(function(){
|
||
|
|
if(!this.checked){
|
||
|
|
$("#selectAll").prop("checked", false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var actions = '<td>\
|
||
|
|
<a href="#" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>\
|
||
|
|
<a href="#" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>\
|
||
|
|
</td>'
|
||
|
|
var row = '<tr>';
|
||
|
|
|
||
|
|
$("#add-hostname").change((obj)=>{
|
||
|
|
console.log(obj.target.value)
|
||
|
|
|
||
|
|
$.post({
|
||
|
|
contentType: 'application/json',
|
||
|
|
dataType: 'json',
|
||
|
|
data: JSON.stringify({"hostname": obj.target.value}),
|
||
|
|
url: "/query_host",
|
||
|
|
beforeSend: ()=>{$("#overlay").css("display", "flex");},
|
||
|
|
complete: ()=>{$("#overlay").css("display", "none");},
|
||
|
|
error:function () {
|
||
|
|
alert('An error occured while querying host. Please try again later.');
|
||
|
|
},
|
||
|
|
success: function(response) {
|
||
|
|
|
||
|
|
if(response.done){
|
||
|
|
$("table").append(row)
|
||
|
|
|
||
|
|
input= $("#add-modal").find("input");
|
||
|
|
input.each(function(index){
|
||
|
|
var elem = this
|
||
|
|
if(elem.type=="checkbox"){
|
||
|
|
if(response.gpu){
|
||
|
|
$(elem)[0].checked = true
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$(elem)[0].checked= false;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
|
||
|
|
elem.value= response.data[index]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#add")[0].disabled = false;
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
alert(`Error: ${response.msg}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("input:checkbox").on("click", false);
|
||
|
|
|
||
|
|
$("#add-form").submit((e)=>{
|
||
|
|
e.preventDefault();
|
||
|
|
$("#add")[0].disabled = true;
|
||
|
|
|
||
|
|
if($("#add-form")[0].checkValidity()){
|
||
|
|
|
||
|
|
var requestData={
|
||
|
|
data: []
|
||
|
|
}
|
||
|
|
|
||
|
|
par = $("#add").parent().parent();
|
||
|
|
bdy= par.find(".modal-body");
|
||
|
|
input= bdy.find("input");
|
||
|
|
input.each(function(){
|
||
|
|
var elem = this
|
||
|
|
if(elem.type=="checkbox"){
|
||
|
|
if(elem.checked){
|
||
|
|
requestData.gpu= "Yes"
|
||
|
|
row += '<td class="text-success">Yes</td>'
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
requestData.gpu= "No"
|
||
|
|
row += '<td class="text-secondary">No</td>'
|
||
|
|
}
|
||
|
|
elem.checked= false;
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
requestData.data.push(elem.value)
|
||
|
|
row += `<td>${elem.value}</td>`
|
||
|
|
elem.value=""
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
requestData.power= $(".sel-add").find(":selected").text()
|
||
|
|
row += `<td>${$(".sel-add").find(":selected").text()}</td>`
|
||
|
|
row += actions + '</tr>';
|
||
|
|
|
||
|
|
//make the AJAX call over POST
|
||
|
|
|
||
|
|
$.post({
|
||
|
|
contentType: 'application/json',
|
||
|
|
dataType: 'json',
|
||
|
|
data: JSON.stringify(requestData),
|
||
|
|
url: "/add_host",
|
||
|
|
error:function () {
|
||
|
|
alert('An error occured while adding host. Please try again later.');
|
||
|
|
},
|
||
|
|
success: function(response) {
|
||
|
|
|
||
|
|
if(response.done){
|
||
|
|
$("table").append(row)
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
alert(`Error: ${response.msg}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
row= '<tr>'
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$('.sel-add option:contains("Always On")').prop('selected', true)
|
||
|
|
|
||
|
|
$("#addHostModal").modal('toggle');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
var curr_idx= -1
|
||
|
|
$("table").on('click', 'a.edit', function(){
|
||
|
|
//console.log(idx);
|
||
|
|
td= $(this).parents("tr").find("td:not(:last-child)")
|
||
|
|
curr_idx= $(this).parents("tr").index()
|
||
|
|
data= []
|
||
|
|
td.each(function(){
|
||
|
|
data.push($(this).text())
|
||
|
|
});
|
||
|
|
|
||
|
|
bdy= $("#edit-form").find(".modal-body")
|
||
|
|
input= bdy.find("input");
|
||
|
|
input.each(function(index){
|
||
|
|
var elem = this
|
||
|
|
if(elem.type=="checkbox"){
|
||
|
|
if(data[5]=="Yes"){
|
||
|
|
$(elem).prop('checked', true)
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$(elem).prop('checked', false)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
elem.value= data[index]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$(`.sel-edit option:contains(${data[6]})`).prop('selected', true)
|
||
|
|
$("#editHostModal").modal('toggle');
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#edit-form").submit((e)=>{
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if($("#edit-form")[0].checkValidity()){
|
||
|
|
var requestData={
|
||
|
|
data: []
|
||
|
|
}
|
||
|
|
|
||
|
|
par = $("#save").parent().parent();
|
||
|
|
bdy= par.find(".modal-body");
|
||
|
|
input= bdy.find("input");
|
||
|
|
input.each(function(){
|
||
|
|
var elem = this //.children[1];
|
||
|
|
if(elem.type=="checkbox"){
|
||
|
|
if(elem.checked){
|
||
|
|
requestData.gpu= "Yes"
|
||
|
|
row += '<td class="text-success">Yes</td>'
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
requestData.gpu= "No"
|
||
|
|
row += '<td class="text-secondary">No</td>'
|
||
|
|
}
|
||
|
|
elem.checked= false;
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
requestData.data.push(elem.value)
|
||
|
|
row += `<td>${elem.value}</td>`
|
||
|
|
elem.value=""
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
requestData.power= $(".sel-edit").find(":selected").text()
|
||
|
|
row += `<td>${$(".sel-edit").find(":selected").text()}</td>`
|
||
|
|
row += actions + '</tr>';
|
||
|
|
|
||
|
|
$.post({
|
||
|
|
contentType: 'application/json',
|
||
|
|
dataType: 'json',
|
||
|
|
data: JSON.stringify(requestData),
|
||
|
|
url: "/edit_host",
|
||
|
|
error:function () {
|
||
|
|
alert('An error occured while updating host. Please try again later.');
|
||
|
|
},
|
||
|
|
success: function(response) {
|
||
|
|
|
||
|
|
if(response.done){
|
||
|
|
|
||
|
|
$("table tbody tr").eq(curr_idx).remove()
|
||
|
|
if(curr_idx==0){
|
||
|
|
$("table tbody tr:first").before(row)
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$("table tbody tr").eq(curr_idx-1).after(row)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
alert(`Error: ${response.msg}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
row= '<tr>'
|
||
|
|
$('.sel-edit option:contains("Always On")').prop('selected', true)
|
||
|
|
curr_idx= -1
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$("#editHostModal").modal('toggle');
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
var del_idx= -1
|
||
|
|
$("table").on('click', 'a.delete', function(){
|
||
|
|
hname= $(this).parents("tr").find("td:first").text()
|
||
|
|
del_idx = $(this).parents("tr").index()
|
||
|
|
bdy= $("#edit-form").find(".modal-body")
|
||
|
|
p= bdy.find(".info")
|
||
|
|
$("#info-text").text(`Are you sure you want to delete ${hname}?`)
|
||
|
|
|
||
|
|
$("#deleteHostModal").modal('toggle')
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#delete-form").submit((e)=>{
|
||
|
|
e.preventDefault();
|
||
|
|
requestData = {
|
||
|
|
hostname: $("table tbody tr").eq(del_idx).find("td:first").text()
|
||
|
|
}
|
||
|
|
$.post({
|
||
|
|
contentType: 'application/json',
|
||
|
|
dataType: 'json',
|
||
|
|
data: JSON.stringify(requestData),
|
||
|
|
url: "/delete_host",
|
||
|
|
error:function () {
|
||
|
|
alert('An error occured while deleting host. Please try again later.');
|
||
|
|
},
|
||
|
|
success: function(response) {
|
||
|
|
|
||
|
|
$("table tbody tr").eq(del_idx).remove()
|
||
|
|
del_idx= -1
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$("#deleteHostModal").modal('toggle')
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="table-responsive">
|
||
|
|
<div class="table-wrapper">
|
||
|
|
<div class="table-title">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-6">
|
||
|
|
<h2>Manage <b>Hosts</b></h2>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6">
|
||
|
|
<a href="#addHostModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i> <span>Add New Host</span></a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<table class="table table-striped table-hover" id="main-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<!--th>
|
||
|
|
<span class="custom-checkbox">
|
||
|
|
<input type="checkbox" id="selectAll">
|
||
|
|
<label for="selectAll"></label>
|
||
|
|
</span>
|
||
|
|
</th-->
|
||
|
|
<th>HostName</th>
|
||
|
|
<th>CPUs</th>
|
||
|
|
<th>Memory</th>
|
||
|
|
<th>Ip Address</th>
|
||
|
|
<th>Mac Address</th>
|
||
|
|
<th>GPU</th>
|
||
|
|
<th>Power Option</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Host1</td>
|
||
|
|
<td>4</td>
|
||
|
|
<td>7826</td>
|
||
|
|
<td>34.10.20.0</td>
|
||
|
|
<td>9C-35-5B-5F-4C-D7</td>
|
||
|
|
<td class="text-secondary">No</td>
|
||
|
|
<td>Always On</td>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
|
||
|
|
<a href="#" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Host2</td>
|
||
|
|
<td>8</td>
|
||
|
|
<td>7826</td>
|
||
|
|
<td>34.10.20.0</td>
|
||
|
|
<td>9C-35-5B-5F-4C-D7</td>
|
||
|
|
<td class="text-success">Yes</td>
|
||
|
|
<td>Wake on LAN</td>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
|
||
|
|
<a href="#" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Host3</td>
|
||
|
|
<td>4</td>
|
||
|
|
<td>4096</td>
|
||
|
|
<td>34.10.20.0</td>
|
||
|
|
<td>9C-35-5B-5F-4C-D7</td>
|
||
|
|
<td class="text-secondary">No</td>
|
||
|
|
<td>Tasmota</td>
|
||
|
|
<td>
|
||
|
|
<a href="#" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
|
||
|
|
<a href="#" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Add Modal -->
|
||
|
|
<div id="addHostModal" class="modal fade">
|
||
|
|
<div id="overlay">
|
||
|
|
<div class="loader"></div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<form id="add-form">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h4 class="modal-title">Add Host</h4>
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body" id="add-modal">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>HostName</label>
|
||
|
|
<input id="add-hostname" type="text" class="form-control" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>CPUs</label>
|
||
|
|
<input type="number" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Memory</label>
|
||
|
|
<input type="number" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Ip Address</label>
|
||
|
|
<input type="text" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Mac Address</label>
|
||
|
|
<input type="text" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>GPU Available </label>
|
||
|
|
<input type="checkbox" id="selectAll">
|
||
|
|
<!--span class="custom-checkbox">
|
||
|
|
<input type="checkbox" id="selectAll">
|
||
|
|
<label for="selectAll"></label>
|
||
|
|
</span-->
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Power Option</label>
|
||
|
|
<select class="browser-default custom-select sel-add" type="select">
|
||
|
|
<option selected>Always On</option>
|
||
|
|
<option >Wake on LAN</option>
|
||
|
|
<option >Tasmota</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
|
||
|
|
<input type="submit" class="btn btn-success" value="Add" id="add" disabled>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Edit Modal HTML -->
|
||
|
|
<div id="editHostModal" class="modal fade">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<form id="edit-form">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h4 class="modal-title">Edit Host</h4>
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>HostName</label>
|
||
|
|
<input type="text" class="form-control" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>CPUs</label>
|
||
|
|
<input type="number" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Memory</label>
|
||
|
|
<input type="number" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Ip Address</label>
|
||
|
|
<input type="text" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Mac Address</label>
|
||
|
|
<input type="text" class="form-control" disabled>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>GPU Available </label>
|
||
|
|
<input type="checkbox" id="selectAll" disabled>
|
||
|
|
<!--span class="custom-checkbox">
|
||
|
|
<input type="checkbox" id="selectAll">
|
||
|
|
<label for="selectAll"></label>
|
||
|
|
</span-->
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Power Option</label>
|
||
|
|
<select class="browser-default custom-select sel-edit" type="select">
|
||
|
|
<option selected>Always On</option>
|
||
|
|
<option >Wake on LAN</option>
|
||
|
|
<option >Tasmota</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
|
||
|
|
<input type="submit" class="btn btn-success" value="Save" id="save">
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Delete Modal HTML -->
|
||
|
|
<div id="deleteHostModal" class="modal fade">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<form id="delete-form">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h4 class="modal-title">Delete Host</h4>
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<p id="info-text"></p>
|
||
|
|
<p class="text-warning"><small>This action cannot be undone.</small></p>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
|
||
|
|
<input type="submit" class="btn btn-danger" value="Delete" id=delete>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|