picluster/web/nodes-manage.html

136 lines
3.6 KiB
HTML
Raw Normal View History

2021-08-25 08:44:55 -06:00
<html>
<head>
<script src="/assets/jquery.min.js"></script>
<link rel="stylesheet" href="/assets/jquery-ui.css">
<script src="/assets/jquery-ui.js"></script>
<link rel="stylesheet" href="/assets/picluster-iframe.css">
<script>
var option;
$.get("/nodes?token=" + parent.token, function(data) {
for (var i in data.nodes) {
option += '<option value="' + data.nodes[i] + '">' + data.nodes[i] + '</option>';
}
$('#node_list').append(option);
});
function exec() {
var node_list = document.getElementById("node_list");
var radio_node_add = $('input[id=radio_node_add]:checked').val();
var radio_node_remove = $('input[id=radio_node_remove]:checked').val();
var path = radio_node_add ? '/addhost'
: radio_node_remove ? '/rmhost'
: ''
var node = radio_node_add ? $("#node").val()
: radio_node_remove ? node_list.options[node_list.selectedIndex].value
: ''
$.post(path, {
token: parent.token,
host: node
}, function(data) {
var div = document.getElementById('nodes-manage-modal-body');
div.innerHTML = 'Sent request to the server. Please check the logs and running containers for updated information.<br>' + data;
});
}
$(document).ready(function() {
$("input[id$='radio_node_add']").click(function() {
$(this).is(":checked") ? $("#node_add").show() : '';
$(this).is(":checked") ? $("#node_remove").hide() : '';
})
$("input[id$='radio_node_remove']").click(function() {
$(this).is(":checked") ? $("#node_add").hide() : '';
$(this).is(":checked") ? $("#node_remove").show() : '';
})
$("#node_add").hide();
$("#node_remove").hide();
});
</script>
</head>
<body>
<div id="modal_container" class="modal">
<div class="modal-content modal-small">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Add a node to PiCluster</h2>
</div>
<div class="modal-body">
<p class="modal-description">
Add or remove a node to PiCluster config file.
</p>
<fieldset>
<legend><b>Node</b></legend>
<div id="node_list_action_selector">
<input type="radio" name="nodes_radio" id="radio_node_add">
<label class="windowfont">Add</label>
<hr>
<input type="radio" name="nodes_radio" id="radio_node_remove">
<label class="windowfont">Remove</label>
</div>
<div id="node_add">
<label for="radio_node_add">Host/IP</label>
<input type="text" id="node" name="node" value="">
</div>
<div id="node_remove">
<label for="radio_node_remove">Node</label>
<select name="node_list" id="node_list"></select>
</div>
</fieldset>
<div id="submit_button_div">
<button id="submit_button">Submit</button>
</div>
</div>
</div>
</div>
<div id="output" class="modal">
<div class="modal-content modal-small">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Command Output</h2>
</div>
<div id="nodes-manage-modal-body" class="modal-body">
Please wait.
</div>
</div>
</div>
<script>
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('modal_container');
var output_modal = document.getElementById('output');
var output_span = document.getElementsByClassName("close")[1];
var submit_button = document.getElementById("submit_button");
span.onclick = function () {
modal.style.display = "none";
}
output_span.onclick = function () {
output_modal.style.display = "none";
}
submit_button.onclick = function () {
modal.style.display = "none";
output_modal.style.display = "block";
exec();
}
modal.style.display = "block";
</script>
</html>