1
0
mirror of https://github.com/sashacmc/photo-importer.git synced 2025-02-16 18:34:34 +02:00
photo-importer/web/index.html
2022-11-10 23:43:12 +01:00

190 lines
7.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Photo Importer Server</title>
</head>
<body>
<div>
<div class="table table-striped table-bordered" id="devTable"/>
</div>
<div id="storagePath"></div>
<br/>
<div id="sysInfo"></div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript">
var g_outpath;
function progress(p, caption, style)
{
return "<div class=\"progress\">"
+ "<p class=\"text-monospace\">" + caption + "</p>"
+ "<div class=\"progress-bar " + style + "\" role=\"progressbar\" style=\"width: " + p + "%;\" aria-valuenow=\"" + p + "\" aria-valuemin=\"0\" aria-valuemax=\"100\">"
+ p + "%</div>"
+ "</div>"
}
function setMountList(data)
{
var html = "<table>"
html += "<tr>"
+ "<th>Device</th>"
+ "<th>Mount&nbsp;point</th>"
+ "<th>Status</th>"
+ "<th>Action</th>"
+ "<th>Size</th>"
+ "<th>Usage</th>"
+ "<th>Log</th>"
+ "</tr>"
for (var dev in data) {
var action = ""
var state = data[dev].state
var name = dev
var path = encodeURIComponent(data[dev].path)
if (dev.startsWith("none")) {
name = ""
if (state == "mounted" || state == "done") {
action += "<input onclick=\"sendCommand('start', '" + path + "');\" type=button class=\"btn btn-success btn-sm\" value=\"Import\"/> ";
}
} else {
if (state == "mounted") {
action += "<input onclick=\"sendCommand('umount', '" + dev + "');\" type=button class=\"btn btn-primary btn-sm\" value=\"Unmount\"/> ";
if (data[dev].allow_start) {
action += "<input onclick=\"sendCommand('start', '" + path + "');\" type=button class=\"btn btn-success btn-sm\" value=\"Import\"/> ";
}
} else if (state == "unmounted") {
action = "<input onclick=\"sendCommand('mount', '" + dev + "');\" type=button class=\"btn btn-primary btn-sm\" value=\"Mount\"/> ";
} else if (state == "done" || state == "error") {
action = "<input onclick=\"sendCommand('umount', '" + dev + "');\" type=button class=\"btn btn-primary btn-sm\" value=\"Unmount\"/> ";
}
}
var stat = state
var p = data[dev].progress
if (p != 0) {
stat += progress(p, "", "")
}
if (state == "done") {
stat += "<br/><font size=\"-1\">(total: " + data[dev].total + ")<font>"
} else if (state == "error") {
stat += "<br/><font size=\"-2\">(" + data[dev].details + ")<font>"
}
if (data[dev].read_only) {
name += "<br/><font size=\"-2\">(read only)<font>"
}
html += "<tr>"
+ "<td>" + name + "</td>"
+ "<td>" + data[dev].path + "</td>"
+ "<td>" + stat + "</td>"
+ "<td>" + action + "</td>"
+ "<td>" + data[dev].size + "&nbsp;GB</td>"
+ "<td>" + progress(data[dev].usage, "", "bg-info") + "</td>"
+ "<td><a href=\"import?a=getlog&p=" + path + "\"><img src=\"log.png\"/></a></td>"
+ "</tr>"
}
html += "</table>"
$("#devTable").html(html)
}
function setSysInfo(data)
{
var html = ""
html += progress(data.cpu, "CPU: ", "bg-danger")
html += progress(data.mem_usage, "MEM: ", "bg-warning")
html += progress(data.disk_usage, "HDD: ", "bg-info")
$("#sysInfo").html(html)
}
function update()
{
$.ajax({
url: "mount?a=list",
cache: false,
success: function(json) {
var data = eval(json);
setMountList(data);
}
});
}
function updateSysInfo()
{
var argpath = "";
if (g_outpath) {
argpath = "?p=" + g_outpath;
}
$.ajax({
url: "sysinfo" + argpath,
cache: false,
success: function(json) {
var data = eval(json);
setSysInfo(data);
}
});
}
function sendCommand(cmd, dev)
{
if (cmd == "mount" || cmd == "umount") {
$.ajax({
url: "mount?a=" + cmd + "&d=" + dev,
type: "POST",
success: function() {
update()
}
});
} else
if (cmd == "start") {
var argpath = "";
if (g_outpath) {
argpath = "&o=" + g_outpath;
}
$.ajax({
url: "import?a=" + cmd + "&p=" + dev + argpath,
type: "POST",
success: function() {
update()
}
});
}
}
function init()
{
var urlParams = new URLSearchParams(window.location.search);
g_outpath = urlParams.get('outpath');
if (g_outpath) {
$("#storagePath").text("Storage: " + g_outpath);
}
update()
updateSysInfo()
}
function reload()
{
location.reload(true)
}
$(document).ready(function()
{
init();
setInterval(update, 5000);
setInterval(updateSysInfo, 1000);
setInterval(reload, 3600000); //reload page every hour
});
</script>
</body>
</html>