mirror of
https://gitlab.com/mangadex-pub/mangadex_at_home.git
synced 2024-01-19 02:48:37 +00:00
Cleaned out unused files and code
This commit is contained in:
M
parent
36afce1a1b
commit
933bb80456
|
|
@ -1,14 +1,8 @@
|
||||||
let connection;
|
|
||||||
let theme;
|
let theme;
|
||||||
let style;
|
let style;
|
||||||
let port;
|
|
||||||
let ip;
|
|
||||||
let refreshRate;
|
let refreshRate;
|
||||||
let maxConsoleLines;
|
|
||||||
let graphTimeFrame;
|
let graphTimeFrame;
|
||||||
let showConsoleLatest;
|
|
||||||
let doAnimations;
|
let doAnimations;
|
||||||
let lockDash;
|
|
||||||
//non-option var
|
//non-option var
|
||||||
let statRequest;
|
let statRequest;
|
||||||
//stat vars
|
//stat vars
|
||||||
|
|
@ -17,155 +11,8 @@ let hitmiss,
|
||||||
cached,
|
cached,
|
||||||
req;
|
req;
|
||||||
|
|
||||||
//dockable things
|
|
||||||
let config = {
|
|
||||||
settings: {
|
|
||||||
hasHeaders: true,
|
|
||||||
constrainDragToContainer: false,
|
|
||||||
reorderEnabled: true,
|
|
||||||
selectionEnabled: false,
|
|
||||||
popoutWholeStack: false,
|
|
||||||
blockedPopoutsThrowError: true,
|
|
||||||
closePopoutsOnUnload: true,
|
|
||||||
showPopoutIcon: false,
|
|
||||||
showMaximiseIcon: false,
|
|
||||||
showCloseIcon: lockDash
|
|
||||||
},
|
|
||||||
dimensions: {
|
|
||||||
borderWidth: 20,
|
|
||||||
minItemHeight: 10,
|
|
||||||
minItemWidth: 10,
|
|
||||||
headerHeight: 20,
|
|
||||||
dragProxyWidth: 300,
|
|
||||||
dragProxyHeight: 200
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
close: 'close',
|
|
||||||
maximise: 'maximise',
|
|
||||||
minimise: 'minimise',
|
|
||||||
popout: 'open in new window'
|
|
||||||
},
|
|
||||||
content: [{
|
|
||||||
type: 'column',
|
|
||||||
content: [{
|
|
||||||
type: 'row',
|
|
||||||
content: [{
|
|
||||||
type: 'column',
|
|
||||||
content: [{
|
|
||||||
type: 'row',
|
|
||||||
content: [{
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Hit Percent',
|
|
||||||
width: 50,
|
|
||||||
componentState: {label: 'F'}
|
|
||||||
}, {
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Hits',
|
|
||||||
componentState: {label: 'B'}
|
|
||||||
}, {
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Misses',
|
|
||||||
componentState: {label: 'C'}
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
type: 'row',
|
|
||||||
content: [{
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Requests Served',
|
|
||||||
componentState: {label: 'B'}
|
|
||||||
}, {
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Bytes Sent',
|
|
||||||
componentState: {label: 'C'}
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
type: 'column',
|
|
||||||
content: [{
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Network Utilization',
|
|
||||||
componentState: {label: 'B'}
|
|
||||||
}, {
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'CPU Utilization',
|
|
||||||
componentState: {label: 'C'}
|
|
||||||
}, {
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Disk Utilization',
|
|
||||||
componentState: {label: 'D'}
|
|
||||||
}, {
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'RAM Utilization',
|
|
||||||
componentState: {label: 'E'}
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}, {
|
|
||||||
type: 'row',
|
|
||||||
height: 20,
|
|
||||||
content: [{
|
|
||||||
type: 'component',
|
|
||||||
componentName: 'Cache Size',
|
|
||||||
componentState: {label: 'F'}
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
let dashlayout;
|
|
||||||
|
|
||||||
function loadDash() {
|
|
||||||
let savedState = localStorage.getItem("dashState");
|
|
||||||
if (savedState !== null) {
|
|
||||||
dashlayout = new GoldenLayout(JSON.parse(savedState), $("#dashboard"));
|
|
||||||
} else {
|
|
||||||
dashlayout = new GoldenLayout(config, $("#dashboard"));
|
|
||||||
}
|
|
||||||
//graphs
|
|
||||||
dashlayout.registerComponent('Network Utilization', function (container, state) {
|
|
||||||
container.getElement().append('<div id="networkUtil" class="line_graph_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('CPU Utilization', function (container, state) {
|
|
||||||
container.getElement().append('<div id="cpuUtil" class="line_graph_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('Disk Utilization', function (container, state) {
|
|
||||||
container.getElement().append('<div id="discUtil" class="line_graph_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('Cache Size', function (container, state) {
|
|
||||||
|
|
||||||
container.getElement().append('<div id="cacheSize" class="line_graph_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('RAM Utilization', function (container, state) {
|
|
||||||
container.getElement().append(' <div id="ramUtil" class="line_graph_data"></div>');
|
|
||||||
});
|
|
||||||
// numbers
|
|
||||||
dashlayout.registerComponent('Hits', function (container, state) {
|
|
||||||
container.getElement().append('<div id="hits" class="numerical_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('Misses', function (container, state) {
|
|
||||||
container.getElement().append('<div id="misses" class="numerical_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('Requests Served', function (container, state) {
|
|
||||||
container.getElement().append('<div id="reqServed" class="numerical_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('Bytes Sent', function (container, state) {
|
|
||||||
container.getElement().append('<div id="bytesSent" class="numerical_data"></div>');
|
|
||||||
});
|
|
||||||
dashlayout.registerComponent('Hit Percent', function (container, state) {
|
|
||||||
container.getElement().append('<div id="hitPercent" class="numerical_data"></div>');
|
|
||||||
});
|
|
||||||
|
|
||||||
dashlayout.init();
|
|
||||||
dashlayout.on('stateChanged', function () {
|
|
||||||
localStorage.setItem('dashState', JSON.stringify(dashlayout.toConfig()));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
jQuery(document).ready(function () {
|
jQuery(document).ready(function () {
|
||||||
loadDash();
|
|
||||||
loadOptions();
|
loadOptions();
|
||||||
$(window).resize(function () {
|
|
||||||
let dash = $("#dashboard");
|
|
||||||
dashlayout.updateSize(dash.width(), dash.height());
|
|
||||||
});
|
|
||||||
$("#theme").attr("href", "themes/" + theme + ".css");
|
$("#theme").attr("href", "themes/" + theme + ".css");
|
||||||
$("#style").attr("href", "themes/" + style + ".css");
|
$("#style").attr("href", "themes/" + style + ".css");
|
||||||
if (doAnimations) {
|
if (doAnimations) {
|
||||||
|
|
@ -175,16 +22,6 @@ jQuery(document).ready(function () {
|
||||||
$(".sideOption").addClass("smooth");
|
$(".sideOption").addClass("smooth");
|
||||||
$(".button").addClass("smooth");
|
$(".button").addClass("smooth");
|
||||||
}
|
}
|
||||||
if (showConsoleLatest)
|
|
||||||
$("#consoleLatest").attr("hidden", false);
|
|
||||||
reconnect();
|
|
||||||
$("#console_input").keyup(function (e) {
|
|
||||||
if (e.keyCode === 13) {
|
|
||||||
sendCommand($(this).text());
|
|
||||||
$(this).text("");
|
|
||||||
$('#console_text').scrollTop($("#console_text")[0].scrollHeight)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
loadStuff();
|
loadStuff();
|
||||||
fetch("/api/allStats")
|
fetch("/api/allStats")
|
||||||
.then(response => async function () {
|
.then(response => async function () {
|
||||||
|
|
@ -302,54 +139,30 @@ function loadOptions() {
|
||||||
refresh_rate: 5000,
|
refresh_rate: 5000,
|
||||||
theme: "lightTheme",
|
theme: "lightTheme",
|
||||||
style: "sharpStyle",
|
style: "sharpStyle",
|
||||||
client_port: 33333,
|
|
||||||
client_ip: "localhost",
|
|
||||||
max_console_lines: 1000,
|
|
||||||
show_console_latest: false,
|
|
||||||
graph_time_frame: 30000,
|
graph_time_frame: 30000,
|
||||||
do_animations: true,
|
do_animations: true,
|
||||||
lock_dashboard: true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
theme = options.theme;
|
theme = options.theme;
|
||||||
style = options.style;
|
style = options.style;
|
||||||
port = options.client_port;
|
|
||||||
ip = options.client_ip;
|
|
||||||
refreshRate = options.refresh_rate;
|
refreshRate = options.refresh_rate;
|
||||||
maxConsoleLines = options.max_console_lines;
|
|
||||||
graphTimeFrame = options.graph_time_frame;
|
graphTimeFrame = options.graph_time_frame;
|
||||||
showConsoleLatest = options.show_console_latest;
|
|
||||||
doAnimations = options.do_animations;
|
doAnimations = options.do_animations;
|
||||||
lockDash = options.lock_dashboard;
|
|
||||||
$("#dataRefreshRate").val(refreshRate);
|
$("#dataRefreshRate").val(refreshRate);
|
||||||
$("#port").val(port);
|
|
||||||
$("#ip").val(ip);
|
|
||||||
$("#maxConsoleLines").val(maxConsoleLines);
|
|
||||||
$("#graphTimeFrame").val(graphTimeFrame);
|
$("#graphTimeFrame").val(graphTimeFrame);
|
||||||
$("#themeIn").val(theme);
|
$("#themeIn").val(theme);
|
||||||
$("#styleIn").val(style);
|
$("#styleIn").val(style);
|
||||||
$("#newestconsole").prop("checked", showConsoleLatest);
|
|
||||||
$("#doAnimations").prop("checked", doAnimations);
|
$("#doAnimations").prop("checked", doAnimations);
|
||||||
$("#lockDash").prop("checked", lockDash)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetOptions() {
|
function resetOptions() {
|
||||||
if (confirm("Do you really want to reset all customizations to defaults?")) {
|
if (confirm("Do you really want to reset all customizations to defaults?")) {
|
||||||
$("#dataRefreshRate").val(5000);
|
$("#dataRefreshRate").val(5000);
|
||||||
$("#port").val(33333);
|
|
||||||
$("#ip").val("localhost");
|
|
||||||
$("#maxConsoleLines").val(1000);
|
|
||||||
$("#graphTimeFrame").val(30000);
|
$("#graphTimeFrame").val(30000);
|
||||||
$("#themeIn").val("lightTheme");
|
$("#themeIn").val("lightTheme");
|
||||||
$("#styleIn").val("sharpStyle");
|
$("#styleIn").val("sharpStyle");
|
||||||
$("#newestconsole").prop("checked", false);
|
|
||||||
$("#doAnimations").prop("checked", true);
|
$("#doAnimations").prop("checked", true);
|
||||||
dashlayout.destroy();
|
|
||||||
localStorage.removeItem('dashState');
|
|
||||||
loadDash();
|
|
||||||
selectTab('dash', 'dashb');
|
selectTab('dash', 'dashb');
|
||||||
let dash = $("#dashboard");
|
|
||||||
dashlayout.updateSize(dash.width(), dash.height());
|
|
||||||
applyOptions()
|
applyOptions()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -419,26 +232,6 @@ function applyOptions() {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (options.client_port !== port) {
|
|
||||||
port = options.client_port;
|
|
||||||
$("#port").addClass("updated").on(
|
|
||||||
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
|
|
||||||
function () {
|
|
||||||
$(this).removeClass("updated");
|
|
||||||
}
|
|
||||||
).val(port);
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
if (options.client_ip !== ip) {
|
|
||||||
ip = options.client_ip;
|
|
||||||
$("#ip").addClass("updated").on(
|
|
||||||
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
|
|
||||||
function () {
|
|
||||||
$(this).removeClass("updated");
|
|
||||||
}
|
|
||||||
).val(ip);
|
|
||||||
reconnect();
|
|
||||||
}
|
|
||||||
if (options.graph_time_frame !== graphTimeFrame) {
|
if (options.graph_time_frame !== graphTimeFrame) {
|
||||||
graphTimeFrame = Math.max(options.graph_time_frame, 5000);
|
graphTimeFrame = Math.max(options.graph_time_frame, 5000);
|
||||||
$("#graphTimeFrame").addClass("updated").on(
|
$("#graphTimeFrame").addClass("updated").on(
|
||||||
|
|
@ -448,41 +241,6 @@ function applyOptions() {
|
||||||
}
|
}
|
||||||
).val(graphTimeFrame);
|
).val(graphTimeFrame);
|
||||||
}
|
}
|
||||||
if (options.max_console_lines !== maxConsoleLines) {
|
|
||||||
maxConsoleLines = Math.max(options.max_console_lines, 100);
|
|
||||||
$("#maxConsoleLines").addClass("updated").on(
|
|
||||||
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
|
|
||||||
function () {
|
|
||||||
$(this).removeClass("updated");
|
|
||||||
}
|
|
||||||
).val(maxConsoleLines);
|
|
||||||
}
|
|
||||||
if (options.show_console_latest !== showConsoleLatest) {
|
|
||||||
showConsoleLatest = options.show_console_latest;
|
|
||||||
if (showConsoleLatest)
|
|
||||||
$("#consoleLatest").attr("hidden", false);
|
|
||||||
else
|
|
||||||
$("#consoleLatest").attr("hidden", true);
|
|
||||||
$("#newestconsolecb").addClass("updated").on(
|
|
||||||
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
|
|
||||||
function () {
|
|
||||||
$(this).removeClass("updated");
|
|
||||||
}
|
|
||||||
).prop("checked", showConsoleLatest);
|
|
||||||
}
|
|
||||||
if (options.lock_dashboard !== lockDash) {
|
|
||||||
lockDash = options.lock_dashboard;
|
|
||||||
config.settings.showCloseIcon = !lockDash;
|
|
||||||
// localStorage.setItem('dashState', JSON.stringify(dashlayout.toConfig()));
|
|
||||||
// $("#dashboard").empty();
|
|
||||||
// loadDash();
|
|
||||||
$("#lockDashcb").addClass("updated").on(
|
|
||||||
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
|
|
||||||
function () {
|
|
||||||
$(this).removeClass("updated");
|
|
||||||
}
|
|
||||||
).prop("checked", showConsoleLatest);
|
|
||||||
}
|
|
||||||
localStorage.setItem("options", JSON.stringify(options));
|
localStorage.setItem("options", JSON.stringify(options));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -562,36 +320,12 @@ function applyStyle(s) {
|
||||||
|
|
||||||
//update data functions
|
//update data functions
|
||||||
|
|
||||||
function updateWithMessage(m) {
|
|
||||||
//TODO: get this to talk with client
|
|
||||||
let result;
|
|
||||||
try {
|
|
||||||
result = JSON.parse(m);
|
|
||||||
switch (result.type) {
|
|
||||||
case "command":
|
|
||||||
updateConsole(result.data, 2);
|
|
||||||
break;
|
|
||||||
case "stats":
|
|
||||||
|
|
||||||
updateValues();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
updateConsole("[WEB-INFO] The message received is improperly formatted: " + result.data, 2);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
updateConsole("[WEB-INFO] There was an error parsing the data \n" + e, 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStats() {
|
function getStats() {
|
||||||
fetch("/api/stats")
|
fetch("/api/stats")
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(response => {
|
.then(response => {
|
||||||
updateValues(response);
|
updateValues(response);
|
||||||
console.log(response);
|
|
||||||
});
|
});
|
||||||
//TODO: use values and update web info
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateValues(data) {
|
function updateValues(data) {
|
||||||
|
|
@ -601,18 +335,17 @@ function updateValues(data) {
|
||||||
hitmiss.data.datasets[0].data[0] = x.cache_hits;
|
hitmiss.data.datasets[0].data[0] = x.cache_hits;
|
||||||
hitmiss.data.datasets[0].data[1] = x.cache_misses;
|
hitmiss.data.datasets[0].data[1] = x.cache_misses;
|
||||||
hitmiss.data.datasets[0].data[2] = x.browser_cached;
|
hitmiss.data.datasets[0].data[2] = x.browser_cached;
|
||||||
|
hitmiss.update();
|
||||||
hitmiss.update()
|
|
||||||
req.data.labels.push(key);
|
req.data.labels.push(key);
|
||||||
req.data.datasets.forEach((dataset) => {
|
req.data.datasets.forEach((dataset) => {
|
||||||
dataset.data.push(x.requests_served);
|
dataset.data.push(x.requests_served);
|
||||||
});
|
});
|
||||||
req.update()
|
req.update();
|
||||||
byte.data.labels.push(key);
|
byte.data.labels.push(key);
|
||||||
byte.data.datasets.forEach((dataset) => {
|
byte.data.datasets.forEach((dataset) => {
|
||||||
dataset.data.push(x.bytes_sent);
|
dataset.data.push(x.bytes_sent);
|
||||||
});
|
});
|
||||||
byte.update()
|
byte.update();
|
||||||
cached.data.labels.push(key);
|
cached.data.labels.push(key);
|
||||||
cached.data.datasets.forEach((dataset) => {
|
cached.data.datasets.forEach((dataset) => {
|
||||||
dataset.data.push(x.bytes_on_disk);
|
dataset.data.push(x.bytes_on_disk);
|
||||||
|
|
@ -620,86 +353,17 @@ function updateValues(data) {
|
||||||
cached.update()
|
cached.update()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
let points = graphTimeFrame / refreshRate;
|
||||||
|
if (req.data.label.length > points) {
|
||||||
|
req.data.labels.splice(0, req.data.label.length - points);
|
||||||
|
req.data.datasets.splice(0, req.data.datasets.length - points);
|
||||||
}
|
}
|
||||||
|
if (byte.data.label.length > points) {
|
||||||
//console functions
|
byte.data.labels.splice(0, req.data.label.length - points);
|
||||||
|
byte.data.datasets.splice(0, req.data.datasets.length - points);
|
||||||
function updateConsole(x, status) {
|
|
||||||
let scroll = false;
|
|
||||||
let temp = $('#console_text');
|
|
||||||
let latest = $("#consoleLatest");
|
|
||||||
if (temp.scrollTop() === (temp[0].scrollHeight - temp[0].clientHeight))
|
|
||||||
scroll = true;
|
|
||||||
switch (status) {
|
|
||||||
case 1:
|
|
||||||
temp.append('<div class="consoleLine sent">' + x + '</div>');
|
|
||||||
break;
|
|
||||||
case 0:
|
|
||||||
temp.append('<div class="consoleLine unsent">' + x + '</div>');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
temp.append('<div class="consoleLine">' + x + '</div>');
|
|
||||||
latest.html('<div class="consoleLine">' + x + '</div>');
|
|
||||||
}
|
}
|
||||||
let childs = temp.children();
|
if (cached.data.label.length > points) {
|
||||||
if (childs.length > maxConsoleLines) {
|
cached.data.labels.splice(0, req.data.label.length - points);
|
||||||
let length = childs.length;
|
cached.data.datasets.splice(0, req.data.datasets.length - points);
|
||||||
for (let i = 0; i < length - maxConsoleLines; i++) {
|
|
||||||
childs[i].remove();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (scroll)
|
|
||||||
temp.scrollTop(temp[0].scrollHeight);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sendCommand(x) {
|
|
||||||
if (x === "")
|
|
||||||
return;
|
|
||||||
if (connection.readyState === "OPEN") {
|
|
||||||
let data = {
|
|
||||||
type: "command",
|
|
||||||
data: x
|
|
||||||
};
|
|
||||||
let message = JSON.stringify(data);
|
|
||||||
connection.send(message);
|
|
||||||
} else {
|
|
||||||
updateConsole(x, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//network commuication
|
|
||||||
|
|
||||||
function reconnect() {
|
|
||||||
if (connection != null)
|
|
||||||
connection.close();
|
|
||||||
updateConsole("[WEB-CONSOLE] Attempting to connect to client on " + ip + ":" + port, 2);
|
|
||||||
connection = new WebSocket("ws://" + ip + ":" + port);
|
|
||||||
$("#connection").removeClass("disconnected").removeClass("connected").addClass("connecting").text("Connecting");
|
|
||||||
addListeners(connection)
|
|
||||||
}
|
|
||||||
|
|
||||||
function addListeners(c) {
|
|
||||||
let opened = false;
|
|
||||||
c.onopen = function (event) {
|
|
||||||
$("#connection").removeClass("disconnected").removeClass("connecting").addClass("connected").text("Connected");
|
|
||||||
opened = true;
|
|
||||||
updateConsole("[WEB-CONSOLE] Successfully to connect to client on " + ip + ":" + port, 2);
|
|
||||||
|
|
||||||
};
|
|
||||||
c.onclose = function (event) {
|
|
||||||
$("#connection").addClass("disconnected").removeClass("connecting").removeClass("connected").text("Disconnected");
|
|
||||||
if (opened)
|
|
||||||
updateConsole("[WEB-CONSOLE] Disconnected from client");
|
|
||||||
else
|
|
||||||
updateConsole("[WEB-CONSOLE] Failed to connect to client on " + ip + ":" + port, 2);
|
|
||||||
// clearInterval(statRequest);
|
|
||||||
};
|
|
||||||
c.onmessage = function (event) {
|
|
||||||
updateWithMessage(event.data());
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function requestStats() {
|
|
||||||
let req = {type: "stats"};
|
|
||||||
connection.send(JSON.stringify(req));
|
|
||||||
}
|
|
||||||
|
|
@ -5,11 +5,10 @@
|
||||||
<title>MD@H Client</title>
|
<title>MD@H Client</title>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
||||||
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
|
|
||||||
<script src="dataReceive.js"></script>
|
<script src="dataReceive.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="layout.css">
|
<link rel="stylesheet" type="text/css" href="layout.css">
|
||||||
<link rel="stylesheet" type="text/css" href="" id="style">
|
<link rel="stylesheet" type="text/css" href="themes/sharpStyle.css" id="style">
|
||||||
<link rel="stylesheet" type="text/css" href="themes/darkTheme.css" id="theme">
|
<link rel="stylesheet" type="text/css" href="themes/lightTheme.css" id="theme">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="pageBar">
|
<div id="pageBar">
|
||||||
|
|
@ -19,7 +18,6 @@
|
||||||
</a>
|
</a>
|
||||||
<h1 style="position: absolute; left: 75px; margin-left: 10px">MangaDex@Home Client Interface</h1>
|
<h1 style="position: absolute; left: 75px; margin-left: 10px">MangaDex@Home Client Interface</h1>
|
||||||
<div id="consoleLatest" hidden></div>
|
<div id="consoleLatest" hidden></div>
|
||||||
<button id="connection" class="connecting button" onclick="reconnect()">Disconnected</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="sideBar" >
|
<div id="sideBar" >
|
||||||
<div id="expSide" class="sideOption" onclick="expSide()">
|
<div id="expSide" class="sideOption" onclick="expSide()">
|
||||||
|
|
@ -40,13 +38,11 @@
|
||||||
<div class="contentHeader">
|
<div class="contentHeader">
|
||||||
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
|
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="dashboard" hidden></div>
|
|
||||||
<div id="pleasejustwork" style="height: calc(100% - 140px); width: calc(100% - 40px); margin: 20px">
|
<div id="pleasejustwork" style="height: calc(100% - 140px); width: calc(100% - 40px); margin: 20px">
|
||||||
<div id="thelonelynumber" style="position: absolute; width: 30%; margin: 20px;">
|
<div id="thelonelynumber" style="position: absolute; width: 30%; margin: 20px;">
|
||||||
<div class="line_graph_data">
|
<div class="line_graph_data">
|
||||||
<canvas id="hitpie"></canvas>
|
<canvas id="hitpie"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="thegraphfamily"
|
<div id="thegraphfamily"
|
||||||
style="position: absolute; width: calc(70% - 80px); margin: 20px; left: calc(30% + 40px); top: 100px">
|
style="position: absolute; width: calc(70% - 80px); margin: 20px; left: calc(30% + 40px); top: 100px">
|
||||||
|
|
@ -62,19 +58,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="console" class="content" hidden>
|
|
||||||
<div class="contentHeader">
|
|
||||||
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Console</h1>
|
|
||||||
</div>
|
|
||||||
<div id="buttonBoard">
|
|
||||||
<!-- client control stuffs-->
|
|
||||||
<h2 style="margin-left: 40px">Client Status: Stopped</h2>
|
|
||||||
</div>
|
|
||||||
<div id="liveConsole">
|
|
||||||
<div id="console_text"></div>
|
|
||||||
<div id="console_input" contenteditable="true"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="dashOptions" class="content" hidden>
|
<div id="dashOptions" class="content" hidden>
|
||||||
<div class="contentHeader">
|
<div class="contentHeader">
|
||||||
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Options</h1>
|
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Options</h1>
|
||||||
|
|
@ -82,9 +65,13 @@
|
||||||
<div id="options">
|
<div id="options">
|
||||||
<h3>General</h3>
|
<h3>General</h3>
|
||||||
<div class="option">
|
<div class="option">
|
||||||
<h4>Data Refresh Rate</h4>
|
<h4>Data Refresh Rate (ms)</h4>
|
||||||
<label><input id="dataRefreshRate" type="number" class="optionInput input" placeholder="5000" min="500"></label>
|
<label><input id="dataRefreshRate" type="number" class="optionInput input" placeholder="5000" min="500"></label>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="option">
|
||||||
|
<h4>Graph Time Frame (ms)</h4>
|
||||||
|
<label><input id="graphTimeFrame" type="number" class="optionInput input" placeholder="30000" min="10000"></label>
|
||||||
|
</div>
|
||||||
<h3>Display</h3>
|
<h3>Display</h3>
|
||||||
<div class="option">
|
<div class="option">
|
||||||
<h4>Theme</h4>
|
<h4>Theme</h4>
|
||||||
|
|
@ -92,7 +79,6 @@
|
||||||
<option value="lightTheme">Light</option>
|
<option value="lightTheme">Light</option>
|
||||||
<option value="darkTheme">Dark</option>
|
<option value="darkTheme">Dark</option>
|
||||||
<option value="midnightTheme">Midnight</option>
|
<option value="midnightTheme">Midnight</option>
|
||||||
<option value="eyekillerTheme">High Vibrancy (not maintained)</option>
|
|
||||||
</select></label>
|
</select></label>
|
||||||
</div>
|
</div>
|
||||||
<div class="option">
|
<div class="option">
|
||||||
|
|
@ -113,14 +99,6 @@
|
||||||
<button id="apply" class="button" onclick="applyOptions()">Apply</button>
|
<button id="apply" class="button" onclick="applyOptions()">Apply</button>
|
||||||
<button id="reset" class="button" onclick="resetOptions()">Reset</button>
|
<button id="reset" class="button" onclick="resetOptions()">Reset</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="info" class="content" hidden>
|
|
||||||
<div class="contentHeader">
|
|
||||||
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Client Info</h1>
|
|
||||||
</div>
|
|
||||||
<div id="information">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
body {
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: #202020;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pageBar {
|
|
||||||
background-color: #faff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sideBar {
|
|
||||||
background-color: #faff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sideOption {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.sideOption:hover {
|
|
||||||
background-color: #faff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sideSelected {
|
|
||||||
background-color: #faff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
#content {
|
|
||||||
background-color: #0fff00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contentHeader {
|
|
||||||
background-color: #ff00af;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Main dashboard colors*/
|
|
||||||
|
|
||||||
#dashb {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#nDat {
|
|
||||||
}
|
|
||||||
|
|
||||||
.numerical_data {
|
|
||||||
background-color: #00ffec;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gDat {
|
|
||||||
}
|
|
||||||
|
|
||||||
.line_graph_data {
|
|
||||||
background-color: #00ffec;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Console and options colors*/
|
|
||||||
|
|
||||||
#liveConsole {
|
|
||||||
background-color: black;
|
|
||||||
caret-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#console_text {
|
|
||||||
color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#console_input {
|
|
||||||
color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*misc*/
|
|
||||||
|
|
||||||
.img {
|
|
||||||
}
|
|
||||||
|
|
||||||
.updated {
|
|
||||||
border-color: #1ec70d;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Webkit colors*/
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-button {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #aaaaaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background-color: #888888;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue