From 12ebb3f8d94aaac40245655360f47cc6e15a9615 Mon Sep 17 00:00:00 2001 From: tomoron Date: Fri, 17 Apr 2026 11:39:35 +0200 Subject: [PATCH] router and home page --- .gitignore | 2 + assets/tailwind.css | 160 ++++++++++++++++++++++++++++++++ src/components/upload/create.rs | 2 +- src/components/upload/info.rs | 9 +- src/components/upload/stats.rs | 8 +- src/config.rs | 4 +- src/main.rs | 24 ++--- src/views/home.rs | 21 +++++ src/views/mod.rs | 7 +- src/views/upload.rs | 33 ++++--- 10 files changed, 233 insertions(+), 37 deletions(-) create mode 100644 src/views/home.rs diff --git a/.gitignore b/.gitignore index 1a4b6b8..39f0a45 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,5 @@ postgres/ serveurhttp test .env + +public/ diff --git a/assets/tailwind.css b/assets/tailwind.css index 8602486..462d7f5 100644 --- a/assets/tailwind.css +++ b/assets/tailwind.css @@ -7,10 +7,16 @@ 'Noto Color Emoji'; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); + --color-gray-600: oklch(44.6% 0.03 256.802); --color-zinc-900: oklch(21% 0.006 285.885); --color-white: #fff; --spacing: 0.25rem; + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --font-weight-bold: 700; @@ -164,9 +170,15 @@ } } @layer utilities { + .invisible { + visibility: hidden; + } .visible { visibility: visible; } + .fixed { + position: fixed; + } .static { position: static; } @@ -185,15 +197,34 @@ .h-screen { height: 100vh; } + .w-full { + width: 100%; + } .w-screen { width: 100vw; } + .flex-grow { + flex-grow: 1; + } + .grow { + flex-grow: 1; + } + .border-collapse { + border-collapse: collapse; + } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } + .resize { + resize: both; + } .flex-col { flex-direction: column; } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } .bg-zinc-900 { background-color: var(--color-zinc-900); } @@ -206,23 +237,61 @@ .px-2 { padding-inline: calc(var(--spacing) * 2); } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } + .py-3 { + padding-block: calc(var(--spacing) * 3); + } + .py-5 { + padding-block: calc(var(--spacing) * 5); + } + .text-3xl { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } + .text-wrap { + text-wrap: wrap; + } + .text-blue-700 { + color: var(--color-blue-700); + } .text-blue-800 { color: var(--color-blue-800); } + .text-gray-600 { + color: var(--color-gray-600); + } .text-white { color: var(--color-white); } .underline { text-decoration-line: underline; } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .ring { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } } @property --tw-rotate-x { syntax: "*"; @@ -244,10 +313,85 @@ syntax: "*"; inherits: false; } +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-font-weight { syntax: "*"; inherits: false; } +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { @@ -256,7 +400,23 @@ --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; + --tw-border-style: solid; --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; } } } diff --git a/src/components/upload/create.rs b/src/components/upload/create.rs index f63b375..bbacae7 100644 --- a/src/components/upload/create.rs +++ b/src/components/upload/create.rs @@ -137,7 +137,7 @@ pub fn build_table(files: Vec<(String, String, Option> rsx! { p { "Upload failed, reason : {msg}" } } } } } - None => { rsx! { p { "Waiting for file to be uploaded" } } } + None => { rsx! { p { "Uploading ..." } } } } } } diff --git a/src/components/upload/info.rs b/src/components/upload/info.rs index dd821a7..4e2cf32 100644 --- a/src/components/upload/info.rs +++ b/src/components/upload/info.rs @@ -62,10 +62,15 @@ fn show_file_info(file_id: String, file_info: &FetchedInfo) -> Element { p { "Position in the deletion queue : ", match file_info.deletion_pos { Some(pos) => pos.to_string(), - None => "unknown".to_string() + None => "files aren't deleted for a week after the time of upload".to_string() } } - a { class: "height-20px text-blue-800 underline", href: "/upload/{file_id}/dl", "click here to download the file"} + a { + class: "height-20px text-blue-800 underline", + rel: "noopener noreferrer", + href: "/upload/{file_id}/dl", + "click here to download the file" + } } } } diff --git a/src/components/upload/stats.rs b/src/components/upload/stats.rs index 61f4b94..ceffc7e 100644 --- a/src/components/upload/stats.rs +++ b/src/components/upload/stats.rs @@ -61,8 +61,12 @@ async fn get_upload_stats() -> Result { } fn render_stats(stats : &UploadServerStats) -> Element { - let soft_percentage = stats.used_space as f32 / stats.total_limit_soft as f32; - let hard_percentage = stats.used_space as f32 / stats.total_limit_hard as f32; + let mut soft_percentage = stats.used_space as f32 / stats.total_limit_soft as f32; + let mut hard_percentage = stats.used_space as f32 / stats.total_limit_hard as f32; + + soft_percentage = (soft_percentage * 1000f32).round() / 1000f32; + hard_percentage = (hard_percentage * 1000f32).round() / 1000f32; + rsx! { h1 {class: "text-4xl font-bold", "Server info"} diff --git a/src/config.rs b/src/config.rs index 670514f..a718c00 100644 --- a/src/config.rs +++ b/src/config.rs @@ -22,13 +22,13 @@ impl ServerConfig { } pub struct ClientConfig { - pub upload_max_size: usize, + pub upload_max_size: u64, } impl ClientConfig { pub fn load() -> Self { Self { - upload_max_size: 1024 * 1024 * 1024 * 1, //1GB for testing + upload_max_size: 1024 * 1024 * 1024 * 50, } } } diff --git a/src/main.rs b/src/main.rs index 35ba1f9..10eab16 100644 --- a/src/main.rs +++ b/src/main.rs @@ -1,21 +1,26 @@ use dioxus::prelude::*; -use crate::components::upload::{FileInfo, UploadFile, UploadStats}; use tracing::Level; pub mod config; use crate::components::toast::ToastProvider; +use crate::views::{Upload, UploadInfo, Home}; + mod components; mod views; -//#[derive(Debug, Clone, Routable, PartialEq)] -//#[rustfmt::skip] -//enum Route { -// #[route("/upload")] -// Upload { }, -//} +#[derive(Debug, Clone, Routable, PartialEq)] +#[rustfmt::skip] +enum Route { + #[route("/")] + Home { }, + #[route("/upload/:file")] + UploadInfo { file: String }, + #[route("/upload")] + Upload { }, +} const FAVICON: Asset = asset!("/assets/favicon.ico"); @@ -34,10 +39,7 @@ fn App() -> Element { div { class: "h-screen w-screen bg-zinc-900 text-white", ToastProvider { - UploadFile { } - FileInfo {file: "ULI0GZWJQH9BGEZR1VZ1"} - UploadStats { } -// Router:: {} + Router:: {} } } diff --git a/src/views/home.rs b/src/views/home.rs new file mode 100644 index 0000000..a245c02 --- /dev/null +++ b/src/views/home.rs @@ -0,0 +1,21 @@ +use dioxus::prelude::*; +use crate::Route; + +#[component] +pub fn Home() -> Element { + rsx! { + div { class : "flex flex-col text-3xl px-2", + Link { + to : Route::Upload { }, + class: "height-20px text-blue-700 underline py-1", + "Upload" + } + a { + class: "height-20px text-blue-700 underline py-1", + href : "https://git.tmoron.fr/tom", + "gitea" + } + p { class : "text-sm text-gray-600", "I konw, you're impressed by my design skills." } + } + } +} diff --git a/src/views/mod.rs b/src/views/mod.rs index aea56c1..fcec334 100644 --- a/src/views/mod.rs +++ b/src/views/mod.rs @@ -1,2 +1,5 @@ -//mod upload; -//pub use upload::Upload; +mod upload; +pub use upload::{Upload, UploadInfo}; + +mod home; +pub use home::Home; diff --git a/src/views/upload.rs b/src/views/upload.rs index 977db67..e24a13b 100644 --- a/src/views/upload.rs +++ b/src/views/upload.rs @@ -1,20 +1,19 @@ -use dioxus::{ - fullstack::{FileStream}, - prelude::*, -}; +use dioxus::prelude::*; -#[cfg(feature = "server")] -use crate::config::ServerConfig; - -#[cfg(feature = "server")] -use httpserver::models::{GetFile,NewFile}; -#[cfg(feature = "server")] -use diesel::prelude::*; -#[cfg(feature = "server")] -use httpserver::DB; +use crate::components::upload::{ FileInfo, UploadFile, UploadStats }; -use dioxus_primitives::toast::{ - ToastOptions, - consume_toast -}; +#[component] +pub fn Upload() -> Element { + rsx! { + UploadFile { } + UploadStats { } + } +} + +#[component] +pub fn UploadInfo(file: String) -> Element { + rsx! { + FileInfo{ file : file } + } +}