forked from Zynh0722/nyazoom
refactor views
parent
ff992b82d3
commit
c5d4f76d90
|
|
@ -29,7 +29,7 @@ use tower_http::{limit::RequestBodyLimitLayer, services::ServeDir, trace::TraceL
|
||||||
mod cache;
|
mod cache;
|
||||||
mod logging;
|
mod logging;
|
||||||
mod nyazoom_headers;
|
mod nyazoom_headers;
|
||||||
pub mod ssr;
|
mod ssr;
|
||||||
mod state;
|
mod state;
|
||||||
mod sweeper;
|
mod sweeper;
|
||||||
mod util;
|
mod util;
|
||||||
|
|
@ -37,8 +37,8 @@ mod views;
|
||||||
|
|
||||||
use state::{AppState, UploadRecord};
|
use state::{AppState, UploadRecord};
|
||||||
|
|
||||||
use crate::state::AsyncRemoveRecord;
|
use crate::state::*;
|
||||||
use crate::views::{DownloadLinkPage, HtmxPage, LinkView, Welcome};
|
use crate::views::*;
|
||||||
|
|
||||||
#[tokio::main]
|
#[tokio::main]
|
||||||
async fn main() -> io::Result<()> {
|
async fn main() -> io::Result<()> {
|
||||||
|
|
@ -95,7 +95,7 @@ async fn remaining(
|
||||||
async fn welcome() -> impl IntoResponse {
|
async fn welcome() -> impl IntoResponse {
|
||||||
let cat_fact = views::get_cat_fact().await;
|
let cat_fact = views::get_cat_fact().await;
|
||||||
Html(ssr::render(move || {
|
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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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 :<"))
|
||||||
|
}
|
||||||
|
|
@ -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 New Issue