From 26f1f70a47b9b311aea9e20623247d3a3e861a88 Mon Sep 17 00:00:00 2001 From: G2-Games Date: Wed, 23 Oct 2024 04:50:33 -0500 Subject: [PATCH] Improved CSS and JS a bit more --- src/main.rs | 39 +++++++++++++++++++++------------------ src/settings.rs | 9 ++++----- src/static/main.css | 14 ++++++++++++++ src/static/request.js | 20 +++++++++++--------- 4 files changed, 50 insertions(+), 32 deletions(-) diff --git a/src/main.rs b/src/main.rs index d14f0ff..dc3d408 100644 --- a/src/main.rs +++ b/src/main.rs @@ -23,6 +23,7 @@ fn head(page_title: &str) -> Markup { title { (page_title) } // Javascript stuff for client side handling script src="request.js" { } + link rel="stylesheet" href="main.css"; } } @@ -43,26 +44,28 @@ fn home() -> Markup { html! { (head("Mochi")) - div id="durationOptions" { + center { + div id="durationOptions" { - } - - form id="uploadForm" { - label for="fileUpload" class="file-upload" onclick="document.getElementById('fileInput').click()" { - "Upload File" } - input id="fileInput" type="file" name="fileUpload" onchange="formSubmit(this.parentNode)" style="display:none;"; - br; - input type="text" name="duration" minlength="2" maxlength="4"; - } - div class="progress-box" { - progress id="uploadProgress" value="0" max="100" {} - p id="uploadProgressValue" class="progress-value" { "" } - } + form id="uploadForm" { + label for="fileUpload" class="file_upload" onclick="document.getElementById('fileInput').click()" { + "Upload File" + } + input id="fileInput" type="file" name="fileUpload" onchange="formSubmit(this.parentNode)" style="display:none;"; + br; + input type="text" name="duration" minlength="2" maxlength="4"; + } - div id="uploadedFilesDisplay" { - h2 class="sep center" { "Uploaded Files" } + div class="progress_box" { + progress id="uploadProgress" value="0" max="100" {} + p id="uploadProgressValue" class="progress_value" { "" } + } + + div id="uploadedFilesDisplay" { + h2 class="sep center" { "Uploaded Files" } + } } } } @@ -223,11 +226,11 @@ async fn main() { let rocket = rocket::build() .mount( - config.root_path.clone() + "/", + config.server.root_path.clone() + "/", routes![home, handle_upload, form_handler_js, stylesheet, server_info] ) .mount( - config.root_path.clone() + "/files", + config.server.root_path.clone() + "/files", FileServer::new("files/", Options::Missing | Options::NormalizeDirs) ) .manage(database) diff --git a/src/settings.rs b/src/settings.rs index 46891b9..2a679d0 100644 --- a/src/settings.rs +++ b/src/settings.rs @@ -13,10 +13,6 @@ pub struct Settings { /// Settings pertaining to duration information pub duration: DurationSettings, - /// The path to the root directory of the program, ex `/filehost/` - #[serde(default)] - pub root_path: String, - /// The path to the database file #[serde(default)] pub database_path: PathBuf, @@ -38,7 +34,6 @@ impl Default for Settings { Self { max_filesize: 128_000_000, // 128 MB duration: DurationSettings::default(), - root_path: "/".into(), server: ServerSettings::default(), path: "./settings.toml".into(), database_path: "./database.mochi".into(), @@ -84,12 +79,16 @@ impl Settings { pub struct ServerSettings { pub address: String, pub port: u16, + + /// The path to the root directory of the program, ex `/filehost/` + pub root_path: String, } impl Default for ServerSettings { fn default() -> Self { Self { address: "127.0.0.1".into(), + root_path: "/".into(), port: 8955 } } diff --git a/src/static/main.css b/src/static/main.css index 2b19564..4ba4449 100644 --- a/src/static/main.css +++ b/src/static/main.css @@ -1,2 +1,16 @@ @import url('https://g2games.dev/assets/fonts/fonts.css'); +body { + background-color: black; + color: white; +} + +.file_upload { + display: block; + width: fit-content; + padding: 5px; + border: 1px solid grey; + cursor: pointer; + margin: 10px; + border-radius: 5px; +} diff --git a/src/static/request.js b/src/static/request.js index 2d0228d..ffb3910 100644 --- a/src/static/request.js +++ b/src/static/request.js @@ -9,6 +9,11 @@ const TOO_LARGE_TEXT = "File is too large!"; const ERROR_TEXT = "An error occured!"; let CAPABILITIES; +async function getServerCapabilities() { + CAPABILITIES = await fetch("info").then((response) => response.json()); + console.log(CAPABILITIES); +} +getServerCapabilities(); async function formSubmit(form) { if (uploadInProgress) { @@ -20,7 +25,10 @@ async function formSubmit(form) { let file = file_upload.files[0]; if (file.size > CAPABILITIES.max_filesize) { progressValue.textContent = TOO_LARGE_TEXT; - console.error("Provided file is too large", file.size, "bytes; max", CAPABILITIES.max_filesize, "bytes"); + console.error( + "Provided file is too large", file.size, "bytes; max", + CAPABILITIES.max_filesize, "bytes" + ); return; } @@ -28,6 +36,7 @@ async function formSubmit(form) { let request = new XMLHttpRequest(); request.open('POST', url, true); + // Set up the listeners request.addEventListener('load', uploadComplete, false); request.addEventListener('error', networkErrorHandler, false); request.upload.addEventListener('progress', uploadProgress, false); @@ -40,7 +49,7 @@ async function formSubmit(form) { console.error("An error occured while uploading", e); } - // Reset the form data since we've successfully submitted it + // Reset the form file data since we've successfully submitted it form.elements["fileUpload"].value = ""; } @@ -88,11 +97,6 @@ function uploadProgress(progress) { } } -async function getServerCapabilities() { - CAPABILITIES = await fetch("info").then((response) => response.json()); - console.log(CAPABILITIES); -} - document.addEventListener("DOMContentLoaded", function(_event){ document.getElementById("uploadForm").addEventListener("submit", formSubmit); progressBar = document.getElementById("uploadProgress"); @@ -100,5 +104,3 @@ document.addEventListener("DOMContentLoaded", function(_event){ statusNotifier = document.getElementById("uploadStatus"); uploadedFilesDisplay = document.getElementById("uploadedFilesDisplay"); }); - -getServerCapabilities();