leon/knifer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Get and store steam username and display it on the homepage

Browse Source
This commit is contained in:
Lol3rrr
2024-09-10 17:48:06 +02:00
parent d3658be232
commit 9a033b7190
15 changed files with 528 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/lib.rs
View File

@@ -4,6 +4,15 @@ use leptos_router::A;
mod demo;
pub use demo::Demo;
mod navbar;
pub use navbar::TopBar;
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum DemoUploadStatus {
Hidden,
Shown,
}
#[leptos::component]
pub fn demo_list_entry(demo: common::BaseDemoInfo) -> impl leptos::IntoView {
view! {
@@ -14,92 +23,44 @@ pub fn demo_list_entry(demo: common::BaseDemoInfo) -> impl leptos::IntoView {
}
#[leptos::component]
pub fn steam_login(height: &'static str, width: &'static str) -> impl leptos::IntoView {
let user_status = create_resource(|| (), |_| async move {
let res = reqwasm::http::Request::get("/api/user/status").send().await.unwrap();
res.status() == 200
});
let tmp = move || if user_status.get().unwrap_or(false) {
view! {
<p>Logged in</p>
}.into_any()
} else {
view! {
<a href="/api/steam/login">
<img src="https://community.akamai.steamstatic.com/public/images/signinthroughsteam/sits_01.png" alt="Steam Login" style=format!("height: {height}; width: {width}") />
</a>
}.into_any()
};
view! {
{ tmp }
}
}
#[leptos::component]
pub fn upload_demo() -> impl leptos::IntoView {
pub fn upload_demo(shown: ReadSignal<DemoUploadStatus>, update_shown: WriteSignal<DemoUploadStatus>) -> impl leptos::IntoView {
use leptos_router::Form;
view! {
<div>
let style = stylers::style! {
"UploadDemo",
.container {
position: absolute;
left: 25vw;
top: 15vh;
width: 48vw;
height: 18vh;
padding: 1vh 1vw;
color: #f1f1f1;
background-color: #42424d;
border-radius: 10px;
display: none;
}
.container.shown {
display: block;
}
};
view! {class = style,
<div class="container" class:shown=move || shown() == DemoUploadStatus::Shown>
<h3>Upload a Demo</h3>
<Form action="/api/demos/upload" method="post" enctype="multipart/form-data".to_string()>
<p> Select File to upload </p>
<input type="file" name="demo" id="demo"></input>
<input type="submit" value="Upload Image" name="submit"></input>
</Form>
</div>
}
}
#[leptos::component]
pub fn top_bar() -> impl leptos::IntoView {
let style = stylers::style! {
"TopBar",
.bar {
width: 100%;
height: 4vh;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
background-color: #28282f;
color: #d5d5d5;
display: grid;
grid-template-columns: 15vw auto auto calc(4vh * (180/35) + 20px);
}
.group {
display: block;
width: 30vw;
}
.elem {
display: inline-block;
}
.logo {
color: #d5d5d5;
width: 15vw;
font-size: 24px;
padding: 0px;
margin: 0px;
}
};
view! {class = style,
<div class="bar">
<A href="/">
<p class="logo">Knifer</p>
</A>
<div class="elem">
Upload Demo
</div>
<div class="elem" style="grid-column-start: 4">
<SteamLogin height="4vh" width="auto" />
</div>
<button on:click=move |_| update_shown(DemoUploadStatus::Hidden)>
Close
</button>
</div>
}
}
@@ -116,7 +77,6 @@ pub fn homepage() -> impl leptos::IntoView {
<div>
<div>
<h2>Demos</h2>
<UploadDemo />
</div>
<ul>
{ move || demo_data.get().unwrap_or_default().into_iter().map(|demo| crate::DemoListEntry(DemoListEntryProps {

6
frontend/src/main.rs
View File

@@ -15,12 +15,16 @@ fn main() {
load_demos().await
});
let (upload_demo_read, upload_demo_write) = create_signal(frontend::DemoUploadStatus::Hidden);
mount_to_body(move || view! {
<Router>
<nav>
<TopBar />
<TopBar update_demo_visible=upload_demo_write />
</nav>
<main>
<UploadDemo shown=upload_demo_read update_shown=upload_demo_write />
<Routes>
<Route path="/" view=Homepage />
<Route path="/demo/:id" view=Demo />

80
frontend/src/navbar.rs Normal file
View File

@@ -0,0 +1,80 @@
use leptos::*;
use leptos_router::A;
use crate::DemoUploadStatus;
#[leptos::component]
fn steam_login(height: &'static str, width: &'static str) -> impl leptos::IntoView {
let user_status = create_resource(|| (), |_| async move {
let res = reqwasm::http::Request::get("/api/user/status").send().await.unwrap();
res.json::<common::UserStatus>().await.map_err(|e| ())
});
let tmp = move || match user_status.get() {
Some(Ok(user)) =>
view! {
<p>{user.name}</p>
}.into_view(),
_ =>
view! {
<a href="/api/steam/login" rel="external">
<img src="https://community.akamai.steamstatic.com/public/images/signinthroughsteam/sits_01.png" alt="Steam Login" style=format!("height: {height}; width: {width}") />
</a>
}.into_view(),
};
view! {
{ tmp }
}
}
#[leptos::component]
pub fn top_bar(update_demo_visible: WriteSignal<DemoUploadStatus>) -> impl leptos::IntoView {
let style = stylers::style! {
"TopBar",
.bar {
width: 100%;
height: 4vh;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
background-color: #28282f;
color: #d5d5d5;
display: grid;
grid-template-columns: 15vw auto 10vw calc(4vh * (180/35) + 20px);
}
.elem {
display: inline-block;
margin-top: auto;
margin-bottom: auto;
}
.logo {
color: #d5d5d5;
width: 15vw;
font-size: 24px;
padding: 0px;
margin: 0px;
}
};
view! {class = style,
<div class="bar">
<A href="/">
<p class="logo">Knifer</p>
</A>
<div class="elem" style="grid-column-start: 3">
<button on:click=move |_| update_demo_visible(DemoUploadStatus::Shown)>
Upload Demo
</button>
</div>
<div class="elem" style="grid-column-start: 4">
<SteamLogin height="4vh" width="auto" />
</div>
</div>
}
}