refactor views
This commit is contained in:
parent
ff992b82d3
commit
c5d4f76d90
6 changed files with 153 additions and 140 deletions
|
|
@ -29,7 +29,7 @@ use tower_http::{limit::RequestBodyLimitLayer, services::ServeDir, trace::TraceL
|
|||
mod cache;
|
||||
mod logging;
|
||||
mod nyazoom_headers;
|
||||
pub mod ssr;
|
||||
mod ssr;
|
||||
mod state;
|
||||
mod sweeper;
|
||||
mod util;
|
||||
|
|
@ -37,8 +37,8 @@ mod views;
|
|||
|
||||
use state::{AppState, UploadRecord};
|
||||
|
||||
use crate::state::AsyncRemoveRecord;
|
||||
use crate::views::{DownloadLinkPage, HtmxPage, LinkView, Welcome};
|
||||
use crate::state::*;
|
||||
use crate::views::*;
|
||||
|
||||
#[tokio::main]
|
||||
async fn main() -> io::Result<()> {
|
||||
|
|
@ -95,7 +95,7 @@ async fn remaining(
|
|||
async fn welcome() -> impl IntoResponse {
|
||||
let cat_fact = views::get_cat_fact().await;
|
||||
Html(ssr::render(move || {
|
||||
leptos::view! { <Welcome fact=cat_fact /> }
|
||||
leptos::view! { <WelcomePage fact=cat_fact /> }
|
||||
}))
|
||||
}
|
||||
|
||||
|
|
|
|||
136
src/views.rs
136
src/views.rs
|
|
@ -1,136 +0,0 @@
|
|||
use futures::TryFutureExt;
|
||||
use leptos::{component, view, Children, IntoView};
|
||||
use serde::Deserialize;
|
||||
|
||||
use crate::state::UploadRecord;
|
||||
|
||||
#[derive(Debug, Deserialize)]
|
||||
pub struct CatFact {
|
||||
pub fact: String,
|
||||
}
|
||||
|
||||
pub async fn get_cat_fact() -> String {
|
||||
reqwest::get("https://catfact.ninja/fact")
|
||||
.and_then(|res| res.json())
|
||||
.map_ok(|cf: CatFact| cf.fact)
|
||||
.await
|
||||
.unwrap_or_else(|_| String::from("The cat fact goddess has failed me :<"))
|
||||
}
|
||||
|
||||
// {https://api.thecatapi.com/v1/images/search?size=small&format=src}
|
||||
// {https://cataas.com/cat?width=250&height=250}
|
||||
#[component]
|
||||
pub fn Welcome(fact: String) -> impl IntoView {
|
||||
view! {
|
||||
<HtmxPage>
|
||||
<div class="form-wrapper">
|
||||
<WelcomeView fact />
|
||||
</div>
|
||||
</HtmxPage>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn WelcomeView(fact: String) -> impl IntoView {
|
||||
view! {
|
||||
<form
|
||||
id="form"
|
||||
hx-swap="outerHTML"
|
||||
hx-post="/upload"
|
||||
hx-encoding="multipart/form-data"
|
||||
class="column-container"
|
||||
>
|
||||
<div class="cat-img-wrapper">
|
||||
<img
|
||||
class="cat-img"
|
||||
src="https://api.thecatapi.com/v1/images/search?size=small&format=src"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
name="file"
|
||||
data-multiple-caption="{{count}} files selected"
|
||||
multiple
|
||||
/>
|
||||
<label for="file">Select Files</label>
|
||||
|
||||
<input type="submit" value="Get Link~" />
|
||||
<p id="cat-fact">{fact}</p>
|
||||
<progress id="progress" class="htmx-indicator" value="0" max="100"></progress>
|
||||
</form>
|
||||
<script src="/scripts/loading_progress.js" />
|
||||
}
|
||||
}
|
||||
|
||||
// <link href="../dist/css/link.css" rel="stylesheet" />
|
||||
// #TODO: Handle pushing cleaner
|
||||
#[component]
|
||||
pub fn DownloadLinkPage(id: String, record: UploadRecord) -> impl IntoView {
|
||||
view! {
|
||||
<HtmxPage>
|
||||
<div class="form-wrapper">
|
||||
<LinkView id record />
|
||||
</div>
|
||||
</HtmxPage>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn HtmxPage(children: Children) -> impl IntoView {
|
||||
view! {
|
||||
<head>
|
||||
<title>Nyazoom</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="/css/main.css" rel="stylesheet" />
|
||||
<link href="/css/link.css" rel="stylesheet" />
|
||||
<script src="/scripts/file_label.js" />
|
||||
<script src="/scripts/link.js" />
|
||||
<script
|
||||
src="https://unpkg.com/htmx.org@1.9.4"
|
||||
integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>NyaZoom<sup>2</sup></h1>
|
||||
{children()}
|
||||
</body>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn LinkView(id: String, record: UploadRecord) -> impl IntoView {
|
||||
let downloads_remaining = record.max_downloads - record.downloads;
|
||||
let plural = if downloads_remaining > 1 { "s" } else { "" };
|
||||
view! {
|
||||
<div class="column-container">
|
||||
<div class="link-wrapper">
|
||||
<a id="link" href="/download/{id}">
|
||||
Download Now!
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="link-wrapper"
|
||||
hx-get="/link/{id}/remaining"
|
||||
hx-trigger="click from:#link delay:0.2s, every 10s"
|
||||
>
|
||||
You have
|
||||
{record.downloads_remaining()}
|
||||
download
|
||||
{plural}
|
||||
remaining!
|
||||
</div>
|
||||
<button class="return-button" onclick="clipboard()">
|
||||
Copy to Clipboard
|
||||
</button>
|
||||
|
||||
<a href="/" class="return-button">
|
||||
Return to home
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
26
src/views/base_page.rs
Normal file
26
src/views/base_page.rs
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
use leptos::{component, view, Children, IntoView};
|
||||
|
||||
#[component]
|
||||
pub fn HtmxPage(children: Children) -> impl IntoView {
|
||||
view! {
|
||||
<head>
|
||||
<title>Nyazoom</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="/css/main.css" rel="stylesheet" />
|
||||
<link href="/css/link.css" rel="stylesheet" />
|
||||
<script src="/scripts/file_label.js" />
|
||||
<script src="/scripts/link.js" />
|
||||
<script
|
||||
src="https://unpkg.com/htmx.org@1.9.4"
|
||||
integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>NyaZoom<sup>2</sup></h1>
|
||||
{children()}
|
||||
</body>
|
||||
}
|
||||
}
|
||||
51
src/views/links.rs
Normal file
51
src/views/links.rs
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
use leptos::{component, view, IntoView};
|
||||
|
||||
use crate::state::UploadRecord;
|
||||
use crate::HtmxPage;
|
||||
|
||||
// <link href="../dist/css/link.css" rel="stylesheet" />
|
||||
// #TODO: Handle pushing cleaner
|
||||
#[component]
|
||||
pub fn DownloadLinkPage(id: String, record: UploadRecord) -> impl IntoView {
|
||||
view! {
|
||||
<HtmxPage>
|
||||
<div class="form-wrapper">
|
||||
<LinkView id record />
|
||||
</div>
|
||||
</HtmxPage>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn LinkView(id: String, record: UploadRecord) -> impl IntoView {
|
||||
let downloads_remaining = record.max_downloads - record.downloads;
|
||||
let plural = if downloads_remaining > 1 { "s" } else { "" };
|
||||
view! {
|
||||
<div class="column-container">
|
||||
<div class="link-wrapper">
|
||||
<a id="link" href="/download/{id}">
|
||||
Download Now!
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="link-wrapper"
|
||||
hx-get="/link/{id}/remaining"
|
||||
hx-trigger="click from:#link delay:0.2s, every 10s"
|
||||
>
|
||||
You have
|
||||
{record.downloads_remaining()}
|
||||
download
|
||||
{plural}
|
||||
remaining!
|
||||
</div>
|
||||
<button class="return-button" onclick="clipboard()">
|
||||
Copy to Clipboard
|
||||
</button>
|
||||
|
||||
<a href="/" class="return-button">
|
||||
Return to home
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
23
src/views/mod.rs
Normal file
23
src/views/mod.rs
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
use futures::TryFutureExt;
|
||||
use serde::Deserialize;
|
||||
|
||||
pub mod base_page;
|
||||
pub mod links;
|
||||
pub mod welcome;
|
||||
|
||||
pub use base_page::*;
|
||||
pub use links::*;
|
||||
pub use welcome::*;
|
||||
|
||||
#[derive(Debug, Deserialize)]
|
||||
pub struct CatFact {
|
||||
pub fact: String,
|
||||
}
|
||||
|
||||
pub async fn get_cat_fact() -> String {
|
||||
reqwest::get("https://catfact.ninja/fact")
|
||||
.and_then(|res| res.json())
|
||||
.map_ok(|cf: CatFact| cf.fact)
|
||||
.await
|
||||
.unwrap_or_else(|_| String::from("The cat fact goddess has failed me :<"))
|
||||
}
|
||||
49
src/views/welcome.rs
Normal file
49
src/views/welcome.rs
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
use leptos::{component, view, IntoView};
|
||||
|
||||
use crate::HtmxPage;
|
||||
|
||||
// {https://api.thecatapi.com/v1/images/search?size=small&format=src}
|
||||
// {https://cataas.com/cat?width=250&height=250}
|
||||
#[component]
|
||||
pub fn WelcomePage(fact: String) -> impl IntoView {
|
||||
view! {
|
||||
<HtmxPage>
|
||||
<div class="form-wrapper">
|
||||
<WelcomeView fact />
|
||||
</div>
|
||||
</HtmxPage>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn WelcomeView(fact: String) -> impl IntoView {
|
||||
view! {
|
||||
<form
|
||||
id="form"
|
||||
hx-swap="outerHTML"
|
||||
hx-post="/upload"
|
||||
hx-encoding="multipart/form-data"
|
||||
class="column-container"
|
||||
>
|
||||
<div class="cat-img-wrapper">
|
||||
<img
|
||||
class="cat-img"
|
||||
src="https://api.thecatapi.com/v1/images/search?size=small&format=src"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
name="file"
|
||||
data-multiple-caption="{{count}} files selected"
|
||||
multiple
|
||||
/>
|
||||
<label for="file">Select Files</label>
|
||||
|
||||
<input type="submit" value="Get Link~" />
|
||||
<p id="cat-fact">{fact}</p>
|
||||
<progress id="progress" class="htmx-indicator" value="0" max="100"></progress>
|
||||
</form>
|
||||
<script src="/scripts/loading_progress.js" />
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue