lukasdotcom/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix bug in the log view

Browse Source
This commit is contained in:
Lukasdotcom
2023-06-04 12:09:29 -04:00
parent b33a8b3294
commit 97ea3f46ae
2 changed files with 272 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

472
html/log/index.js
View File

@@ -1,231 +1,283 @@
// Will find the category number for the id of a row in the log
function findCategory(category) {
for(var i=0;i<typeLength;i++) {
if (types[i]["name"] == category) {
return i;
}
for (var i = 0; i < typeLength; i++) {
if (types[i]["name"] == category) {
return i;
}
return false
}
return false;
}
function search(term) { // Used to search the log
rows = document.getElementById('log').rows
colors = []
for(var i=0;i<typeLength;i++) {
colors.push([document.getElementById(types[i]["name"]).checked, document.getElementById(`${types[i]["name"]}.color`).value]);
document.getElementById(`${types[i]["name"]}.text`).style.color = document.getElementById(`${types[i]["name"]}.color`).value;
}
localStorage.log = JSON.stringify(colors);
localStorage.logSearch = term;
for(var i=0;i<rows.length-1;i++) {
if (document.getElementById(`${String(i)}.message`).innerHTML.includes(term) && document.getElementById(document.getElementById(`${String(i)}.category`).innerHTML).checked) {
document.getElementById(i).style.display = "";
} else {
document.getElementById(i).style.display = "none";
}
document.getElementById(i).style.color = colors[findCategory(document.getElementById(`${String(i)}.category`).innerHTML)][1]
}
}
function resetColor(searchTerm, term, id) { // Used to reset the log color of a certain type
document.getElementById(`${term}.color`).value = types[id]["color"];
search(searchTerm);
}
function remove(message, time, id) { // Used to remove a log entry from the log.
const ajax = new XMLHttpRequest();
ajax.onload = function() {
if (ajax.status == 200) {
document.getElementById(id).remove();
} else {
alert("Could not delete log entry.")
}
}
ajax.open("POST", "/api/log.php");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(`remove=true&message=${message}&time=${time}&key='${getCookie('user')}'`);
}
function collapseCategories() { // Collapses or uncollapses the categories to make the webpage cleaner or more detailed.
if (! localStorage.collapseCategories) {
document.getElementById(`collapseCategories`).innerText = "Uncollapse Categories";
for(var i=0;i<typeLength;i++) {
document.getElementById(`${types[i]["name"]}.text`).style.display = "none";
}
localStorage.collapseCategories = true;
function search(term) {
// Used to search the log
rows = document.getElementById("log").rows;
colors = [];
for (var i = 0; i < typeLength; i++) {
colors.push([
document.getElementById(types[i]["name"]).checked,
document.getElementById(`${types[i]["name"]}.color`).value,
]);
document.getElementById(`${types[i]["name"]}.text`).style.color =
document.getElementById(`${types[i]["name"]}.color`).value;
}
localStorage.log = JSON.stringify(colors);
localStorage.logSearch = term;
for (var i = 0; i < rows.length - 1; i++) {
if (
document
.getElementById(`${String(i)}.message`)
.innerHTML.includes(term) &&
document.getElementById(
document.getElementById(`${String(i)}.category`).innerHTML
).checked
) {
document.getElementById(i).style.display = "";
} else {
document.getElementById(`collapseCategories`).innerText = "Collapse Categories";
for(var i=0;i<typeLength;i++) {
document.getElementById(`${types[i]["name"]}.text`).style.display = "";
}
localStorage.collapseCategories = "";
document.getElementById(i).style.display = "none";
}
document.getElementById(i).style.color =
colors[
findCategory(document.getElementById(`${String(i)}.category`).innerHTML)
][1];
}
}
function updateUpdateInfo() { // Used to get the response to the update info.
const ajax = new XMLHttpRequest();
function resetColor(searchTerm, term, id) {
// Used to reset the log color of a certain type
document.getElementById(`${term}.color`).value = types[id]["color"];
search(searchTerm);
}
function remove(message, time, id) {
// Used to remove a log entry from the log.
const ajax = new XMLHttpRequest();
ajax.onload = function () {
if (ajax.status == 200) {
document.getElementById(id).remove();
} else {
alert("Could not delete log entry.");
}
};
ajax.open("POST", "/api/log.php");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(
`remove=true&message=${message}&time=${time}&key='${getCookie("user")}'`
);
}
function collapseCategories() {
// Collapses or uncollapses the categories to make the webpage cleaner or more detailed.
if (!localStorage.collapseCategories) {
document.getElementById(`collapseCategories`).innerText =
"Uncollapse Categories";
for (var i = 0; i < typeLength; i++) {
document.getElementById(`${types[i]["name"]}.text`).style.display =
"none";
}
localStorage.collapseCategories = true;
} else {
document.getElementById(`collapseCategories`).innerText =
"Collapse Categories";
for (var i = 0; i < typeLength; i++) {
document.getElementById(`${types[i]["name"]}.text`).style.display = "";
}
localStorage.collapseCategories = "";
}
}
function updateUpdateInfo() {
// Used to get the response to the update info.
const ajax = new XMLHttpRequest();
ajax.onload = function() {
if (ajax.status == 200) {
$('#updateText').text(ajax.responseText)
}
}
ajax.open("GET", `/api/server.php?update=true&key='${getCookie('user')}'`);
ajax.send();
}
function update() { // Sends a request to the server for the server to update
const ajax = new XMLHttpRequest();
ajax.onload = function() {
if (ajax.status == 200) {
alert("Updating Server.");
updateUpdateInfo();
setInterval(updateUpdateInfo, 10000); // Makes sure to update the information about updates every 10 seconds
} else {
alert("Error something went wrong.");
}
}
ajax.open("POST", "/api/server.php");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(`update=true&key='${getCookie('user')}'`);
}
function restart() { // Sends a request to the server to tell it to restart
const ajax = new XMLHttpRequest();
ajax.onload = function() {
if (ajax.status == 200) {
alert("Restarting Server.")
} else {
alert("Error something went wrong.")
}
}
ajax.open("POST", "/api/server.php");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(`restart=true&key='${getCookie('user')}'`);
}
function updateLog(previous=false, all=false) { // Used to update the log with new entries that came. either before or after the log(previous). All indicates if it should load everything before a certain point.
const ajax = new XMLHttpRequest();
ajax.onload = function() {
if (ajax.status == 200) {
let response = JSON.parse(ajax.response);
if (previous) {
response.reverse(); // Makes sure to reverse the array so the elements are in the right order.
earliestTime = earliestTime - 3600 * 24 * $("#days").val();
}
if (response.length) {
if (! previous) {
latestTime = lastElement(response)["time"]
}
response.forEach(function(item) {
appendLogData(item, previous)
});
}
$("#loadMore").button("enable");
} else {
if (!offline) {
offline = true;
$(".offline").show();
}
}
if (! previous) {
setTimeout(updateLog, 4000)
}
search($("#searchText").val());
}
if (previous) {
$("#loadMore").button("disable");
ajax.open("GET", `/api/log.php?log=true&key='${getCookie('user')}'&startTime=${(all) ? 0 : earliestTime - 3600 * 24 * $("#days").val() }&endTime=${earliestTime}`);
} else {
ajax.open("GET", `/api/log.php?log=true&key='${getCookie('user')}'&startTime=${latestTime}`);
ajax.onload = function () {
if (ajax.status == 200) {
$("#updateText").text(ajax.responseText);
}
ajax.send();
};
ajax.open("GET", `/api/server.php?update=true&key='${getCookie("user")}'`);
ajax.send();
}
function appendLogData(item, bottom=false) { // Used to add a log entry to the users screen at the top or bottom.
let date = new Date(item["time"]*1000);
let information = `<tr id='${logLength}' style='color:${types[item["type"]]["color"]}'><td id='${logLength}.category'>${types[item["type"]]["name"]}</td><td id='${logLength}.message'>${item["message"]}</td><td id='${logLength}.time'>${item["time"]}</td><td id='${logLength}.clockTime'>${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} at ${date.getMonth()+1}-${date.getDate()}-${date.getFullYear()}</td>`;
if (deleteLog) {
information += `<td id='${logLength}.button' style='color: white'><button type='button' onClick="remove('${item["message"]}', '${item["time"]}', '${logLength}')">Delete</button><br></td>`;
}
information += "</tr>";
if (bottom) {
$("#log").append(information);
function update() {
// Sends a request to the server for the server to update
const ajax = new XMLHttpRequest();
ajax.onload = function () {
if (ajax.status == 200) {
alert("Updating Server.");
updateUpdateInfo();
setInterval(updateUpdateInfo, 10000); // Makes sure to update the information about updates every 10 seconds
} else {
$(information).insertAfter("#tableHeader");
alert("Error something went wrong.");
}
logLength ++;
};
ajax.open("POST", "/api/server.php");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(`update=true&key='${getCookie("user")}'`);
}
function restart() {
// Sends a request to the server to tell it to restart
const ajax = new XMLHttpRequest();
ajax.onload = function () {
if (ajax.status == 200) {
alert("Restarting Server.");
} else {
alert("Error something went wrong.");
}
};
ajax.open("POST", "/api/server.php");
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send(`restart=true&key='${getCookie("user")}'`);
}
function updateLog(previous = false, all = false) {
// Used to update the log with new entries that came. either before or after the log(previous). All indicates if it should load everything before a certain point.
const ajax = new XMLHttpRequest();
ajax.onload = function () {
if (ajax.status == 200) {
let response = JSON.parse(ajax.response);
if (previous) {
response.reverse(); // Makes sure to reverse the array so the elements are in the right order.
earliestTime = earliestTime - 3600 * 24 * $("#days").val();
}
if (response.length) {
if (!previous) {
latestTime = lastElement(response)["time"];
}
response.forEach(function (item) {
appendLogData(item, previous);
});
}
$("#loadMore").button("enable");
} else {
if (!offline) {
offline = true;
$(".offline").show();
}
}
if (!previous) {
setTimeout(updateLog, 4000);
}
search($("#searchText").val());
};
if (previous) {
$("#loadMore").button("disable");
ajax.open(
"GET",
`/api/log.php?log=true&key='${getCookie("user")}'&startTime=${
all ? 0 : earliestTime - 3600 * 24 * $("#days").val()
}&endTime=${earliestTime}`
);
} else {
ajax.open(
"GET",
`/api/log.php?log=true&key='${getCookie("user")}'&startTime=${latestTime}`
);
}
ajax.send();
}
function appendLogData(item, bottom = false) {
// Used to add a log entry to the users screen at the top or bottom.
let date = new Date(item["time"] * 1000);
let information = `<tr id='${logLength}' style='color:${
types[item["type"]]["color"]
}'><td id='${logLength}.category'>${
types[item["type"]]["name"]
}</td><td id='${logLength}.message'>${
item["message"]
}</td><td id='${logLength}.time'>${
item["time"]
}</td><td id='${logLength}.clockTime'>${date.getHours()}:${date.getMinutes()}:${date.getSeconds()} at ${
date.getMonth() + 1
}-${date.getDate()}-${date.getFullYear()}</td>`;
if (deleteLog) {
information += `<td id='${logLength}.button' style='color: white'><button type='button' onClick="remove('${item["message"]}', '${item["time"]}', '${logLength}')">Delete</button><br></td>`;
}
information += "</tr>";
if (bottom) {
$("#log").append(information);
} else {
$(information).insertAfter("#tableHeader");
}
logLength++;
}
var logLength = 0;
var latestTime = Date.now() / 1000 - 3600 * 24 * 3; // Stores the latest log time which starts at 3 days before the visit to make sure that the last 3 days are loaded.
var earliestTime = latestTime; // Stores the earliest time which the log has
$(document).ready(function() {
updateLog(); // Updates the log to preload it.
// Makes sure that the categories are collapsed in the right way
collapseCategories();
collapseCategories();
if (localStorage.log != undefined) { // Sets the correct color and visibilty for each log category.
colors = JSON.parse(localStorage.log);
for(var i=0;i<typeLength;i++) {
document.getElementById(`${types[i]["name"]}.text`).style.color = colors[i][1];
document.getElementById(`${types[i]["name"]}.color`).value = colors[i][1];
document.getElementById(`${types[i]["name"]}`).checked = colors[i][0];
}
$(document).ready(function () {
$("#loadMore").button();
$("#loadAll").button();
updateLog(); // Updates the log to preload it.
// Makes sure that the categories are collapsed in the right way
collapseCategories();
collapseCategories();
if (localStorage.log != undefined) {
// Sets the correct color and visibilty for each log category.
colors = JSON.parse(localStorage.log);
for (var i = 0; i < typeLength; i++) {
document.getElementById(`${types[i]["name"]}.text`).style.color =
colors[i][1];
document.getElementById(`${types[i]["name"]}.color`).value = colors[i][1];
document.getElementById(`${types[i]["name"]}`).checked = colors[i][0];
}
if (localStorage.logSearch != undefined) { // Makes sure to prefill the previous search
$("#searchText").val(localStorage.logSearch)
}
search(localStorage.logSearch);
// Shows server status like temprature and uptime
if (serverStatus) {
updateUptime();
updateTemp();
}
$("#loadMore").button()
$("#loadAll").button()
$("#loadMore").click(function() {
updateLog(true);
});
$("#loadAll").click(function() { // Used to load all data
updateLog(true, all=true)
$("#load").remove();
});
}
if (localStorage.logSearch != undefined) {
// Makes sure to prefill the previous search
$("#searchText").val(localStorage.logSearch);
}
search(localStorage.logSearch);
// Shows server status like temprature and uptime
if (serverStatus) {
updateUptime();
updateTemp();
}
$("#loadMore").click(function () {
updateLog(true);
});
$("#loadAll").click(function () {
// Used to load all data
updateLog(true, (all = true));
$("#load").remove();
});
});
var offline = false; // Stores if the user is offline
function updateUptime() { // Updates the uptime and server load indicator
const ajax = new XMLHttpRequest();
ajax.onload = function() {
if (ajax.status == 200) {
$("#uptime").text(ajax.responseText);
if (offline) {
offline = false;
$(".offline").hide();
}
} else {
if (!offline) {
offline = true;
$(".offline").show();
}
}
setTimeout(updateUptime, 1000);
}
ajax.open("GET", `/api/server.php?uptime=true&key='${getCookie('user')}'`);
ajax.send();
function updateUptime() {
// Updates the uptime and server load indicator
const ajax = new XMLHttpRequest();
ajax.onload = function () {
if (ajax.status == 200) {
$("#uptime").text(ajax.responseText);
if (offline) {
offline = false;
$(".offline").hide();
}
} else {
if (!offline) {
offline = true;
$(".offline").show();
}
}
setTimeout(updateUptime, 1000);
};
ajax.open("GET", `/api/server.php?uptime=true&key='${getCookie("user")}'`);
ajax.send();
}
function updateTemp() { // Updates the temprature indicator
const ajax2 = new XMLHttpRequest();
ajax2.onload = function() {
if (ajax2.status == 200) {
$("#temp").text(ajax2.responseText);
if (offline) {
offline = false;
$(".offline").hide();
}
} else {
if (!offline) {
offline = true;
$(".offline").show();
}
}
setTimeout(updateTemp, 1000);
}
ajax2.open("GET", `/api/server.php?temp=true&key='${getCookie('user')}'`);
ajax2.send();
function updateTemp() {
// Updates the temprature indicator
const ajax2 = new XMLHttpRequest();
ajax2.onload = function () {
if (ajax2.status == 200) {
$("#temp").text(ajax2.responseText);
if (offline) {
offline = false;
$(".offline").hide();
}
} else {
if (!offline) {
offline = true;
$(".offline").show();
}
}
setTimeout(updateTemp, 1000);
};
ajax2.open("GET", `/api/server.php?temp=true&key='${getCookie("user")}'`);
ajax2.send();
}

16
html/log/index.php
View File

@@ -15,7 +15,7 @@
<?php
require_once '../include/menu.php';
echo "<div class='main'>";
if (! $USERNAME) {
if (!$USERNAME) {
echo "<h2>You are not logged in redirecting...</h2>";
header("Refresh:3; url=/login.php", true);
http_response_code(401);
@@ -24,7 +24,7 @@
header("Refresh:3; url=/index.php", true);
echo "<h2>Forbidden redirecting...</h2>";
} else {
echo "<script type='text/javascript' src='index.js'></script>
echo "<script type='text/javascript' src='index.js?v=1.0.0'></script>
<script type='text/javascript' src='/javascript/functions.js'></script>";
echo "<h1>Server Log</h1>";
echo "<label for='searchText'>Search:</label>
@@ -80,12 +80,16 @@
<button name="delete" value="error" type="submit">Delete Error Log.</button>
</form><br>';
}
}
}
?>
?>
<table id='log'>
<tr id='tableHeader'><th>Category</th><th>Message</th><th>Time Stamp</th><th>Time</th></tr>
<tr id='tableHeader'>
<th>Category</th>
<th>Message</th>
<th>Time Stamp</th>
<th>Time</th>
</tr>
</table>
<div id="load">
<button id='loadMore'>Load More</button>
@@ -93,7 +97,7 @@
<br>
<button id='loadAll'>Load All</button>
</div>
<?php
<?php
}
?>
</div>