Danacus
/
lan-party-backend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Stuff

This commit is contained in:
Daan Vanoverloop 2022-09-05 16:48:55 +02:00
parent 374a4eec40
commit 3ca53db260
Signed by: Danacus
GPG Key ID: F2272B50E129FC5C
9 changed files with 176 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/dist/index.html vendored
View File

@ -4,9 +4,9 @@
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet">
<title>Yew App</title> <title>Yew App</title>
<link rel="preload" href="/index-c6b4c7917000d593_bg.wasm" as="fetch" type="application/wasm" crossorigin=""> <link rel="preload" href="/index-167b3e062ee4dd95_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/index-c6b4c7917000d593.js"></head> <link rel="modulepreload" href="/index-167b3e062ee4dd95.js"></head>
<body class="base theme-dark bg-gray-900 text-gray-400"> <body class="base theme-dark bg-gray-900 text-gray-400">
<script type="module">import init from '/index-c6b4c7917000d593.js';init('/index-c6b4c7917000d593_bg.wasm');</script></body></html> <script type="module">import init from '/index-167b3e062ee4dd95.js';init('/index-167b3e062ee4dd95_bg.wasm');</script></body></html>

1
web/src/components/button.rs
View File

@ -45,6 +45,7 @@ pub struct Props {
#[function_component(Button)] #[function_component(Button)]
pub fn button(props: &Props) -> Html { pub fn button(props: &Props) -> Html {
let mut icon_class = Classes::from("mdi"); let mut icon_class = Classes::from("mdi");
icon_class.push("text-lg");
if !props.icon.is_empty() { if !props.icon.is_empty() {
icon_class.push(&props.icon); icon_class.push(&props.icon);

65
web/src/components/event.rs Normal file
View File

@ -0,0 +1,65 @@
use lan_party_core::event::*;
use yew::prelude::*;
#[derive(Debug, Clone, Properties, PartialEq)]
pub struct BlockProps {
children: Children,
}
#[function_component(Block)]
pub fn block(props: &BlockProps) -> Html {
html! {
<div class="px-3 py-3 rounded-lg border-solid border-gray-800 border-2 my-3">
{for props.children.iter()}
</div>
}
}
pub trait RenderEvent {
fn view(&self) -> Html;
}
impl RenderEvent for String {
fn view(&self) -> Html {
html! { self }
}
}
impl RenderEvent for bool {
fn view(&self) -> Html {
html! {
<input type="checkbox" value={self.to_string()} disabled={true} />
}
}
}
impl<T: RenderEvent> RenderEvent for Vec<T> {
fn view(&self) -> Html {
html! {
self.iter().map(|x| x.view()).collect::<Html>()
}
}
}
impl<T: RenderEvent> RenderEvent for &[T] {
fn view(&self) -> Html {
html! {
self.iter().map(|x| x.view()).collect::<Html>()
}
}
}
impl RenderEvent for lan_party_core::event::Event {
fn view(&self) -> Html {
html! {
<Block>
{ "Name: " }
{ self.name.view() }<br />
{ "Description: " }
{ self.description.view() }<br />
{ "Concluded: " }
{ self.concluded.view() }<br />
</Block>
}
}
}

29
web/src/components/mod.rs
View File

@ -1,9 +1,11 @@
mod button; mod button;
mod event;
mod table; mod table;
pub use button::Button; pub use button::Button;
pub use event::RenderEvent;
pub use table::Table; pub use table::Table;
use yew::{function_component, html, Children, Html, Properties}; use yew::{function_component, html, Children, Properties};
use wasm_bindgen::{JsCast, UnwrapThrowExt}; use wasm_bindgen::{JsCast, UnwrapThrowExt};
use web_sys::{Event, HtmlInputElement, InputEvent}; use web_sys::{Event, HtmlInputElement, InputEvent};
@ -13,27 +15,31 @@ use yew::prelude::*;
pub struct InputProps { pub struct InputProps {
pub value: String, pub value: String,
pub onchange: Callback<String>, pub onchange: Callback<String>,
pub class: Classes,
} }
fn get_value_from_input_event(e: InputEvent) -> String { fn get_value_from_input_event(e: InputEvent) -> String {
let event: Event = e.dyn_into().unwrap_throw(); let event: Event = e.dyn_into().unwrap_throw();
let event_target = event.target().unwrap_throw(); let event_target = event.target().unwrap_throw();
let target: HtmlInputElement = event_target.dyn_into().unwrap_throw(); let target: HtmlInputElement = event_target.dyn_into().unwrap_throw();
web_sys::console::log_1(&target.value().into());
target.value() target.value()
} }
/// Controlled Text Input Component /// Controlled Text Input Component
#[function_component(TextInput)] #[function_component(TextInput)]
pub fn text_input(props: &InputProps) -> Html { pub fn text_input(props: &InputProps) -> Html {
let InputProps { value, onchange } = props.clone(); let InputProps {
value,
onchange,
class,
} = props.clone();
let oninput = Callback::from(move |input_event: InputEvent| { let oninput = Callback::from(move |input_event: InputEvent| {
onchange.emit(get_value_from_input_event(input_event)); onchange.emit(get_value_from_input_event(input_event));
}); });
html! { html! {
<input type="text" class="mx-2 appearance-none block bg-gray-700 text-slate-400 border border-gray-600 rounded py-2 px-2 w-10 leading-tight focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500" {value} {oninput} /> <input type="text" {class} {value} {oninput} />
} }
} }
@ -47,3 +53,18 @@ pub struct PageProps {
pub fn page(props: &PageProps) -> Html { pub fn page(props: &PageProps) -> Html {
html! { <div class="max-w-7xl mx-auto">{ for props.children.iter() }</div> } html! { <div class="max-w-7xl mx-auto">{ for props.children.iter() }</div> }
} }
#[function_component(Loading)]
pub fn loading() -> Html {
html! {
<svg role="status" class="inline h-8 w-8 animate-spin mr-2 text-gray-200 dark:text-gray-600 fill-gray-400"
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor" />
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill" />
</svg>
}
}

4
web/src/main.rs
View File

@ -2,7 +2,7 @@ mod components;
mod pages; mod pages;
pub mod util; pub mod util;
use pages::UsersPage; use pages::{EventsPage, UsersPage};
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::*; use yew_router::prelude::*;
@ -59,7 +59,7 @@ fn switch(routes: &Route) -> Html {
Route::Users => html! { Route::Users => html! {
<UsersPage /> <UsersPage />
}, },
Route::Events => html! { <h1>{ "Events" }</h1> }, Route::Events => html! { <EventsPage /> },
} }
} }

30
web/src/pages/events.rs Normal file
View File

@ -0,0 +1,30 @@
use crate::components::{Page, RenderEvent};
use yew::prelude::*;
use yew_hooks::*;
use crate::{clone, util::api_request};
#[function_component(EventsPage)]
pub fn events_page() -> Html {
let events: UseAsyncHandle<Vec<lan_party_core::event::Event>, _> = use_async(async move {
api_request::<_, Vec<lan_party_core::event::Event>>("GET", "/event", Option::<()>::None)
.await
.map(|inner| inner.unwrap())
.map_err(|_| "failed to load users")
});
clone!(events; use_effect_with_deps(move |_| {
if events.data.is_none() {
events.run();
}
|| ()
}, ()));
html! {
<Page>
{ if let Some(events) = &events.data {
events.view()
} else { html! {} }}
</Page>
}
}

2
web/src/pages/mod.rs
View File

@ -1,3 +1,5 @@
mod events;
mod users; mod users;
pub use events::EventsPage;
pub use users::UsersPage; pub use users::UsersPage;

48
web/src/pages/users.rs
View File

@ -1,9 +1,9 @@
use crate::{ use crate::{
clone, clone_cb, clone, clone_cb,
components::{Button, Page, Table, TextInput}, components::{Button, Loading, Page, Table, TextInput},
util::{api_request, AutoCopy}, util::api_request,
}; };
use lan_party_core::{user::User, PartyError}; use lan_party_core::user::User;
use wasm_bindgen_futures::spawn_local; use wasm_bindgen_futures::spawn_local;
use yew::prelude::*; use yew::prelude::*;
use yew_hooks::*; use yew_hooks::*;
@ -12,6 +12,7 @@ use yew_hooks::*;
pub fn users_page() -> Html { pub fn users_page() -> Html {
let headers = vec!["Username".into(), "Score".into(), "".into()]; let headers = vec!["Username".into(), "Score".into(), "".into()];
let new_username = use_state(|| String::new());
let score_edit: UseStateHandle<Option<usize>> = use_state(|| Option::None); let score_edit: UseStateHandle<Option<usize>> = use_state(|| Option::None);
let current_score = use_state(|| String::new()); let current_score = use_state(|| String::new());
let users: UseAsyncHandle<Vec<User>, _> = use_async(async move { let users: UseAsyncHandle<Vec<User>, _> = use_async(async move {
@ -28,8 +29,6 @@ pub fn users_page() -> Html {
|| () || ()
}, ())); }, ()));
let onchange = clone_cb!(current_score; move |value| current_score.set(value));
let oncheck = clone_cb!(score_edit, current_score, users; move |_| { let oncheck = clone_cb!(score_edit, current_score, users; move |_| {
clone!(score_edit, users, current_score; { clone!(score_edit, users, current_score; {
spawn_local(async move { spawn_local(async move {
@ -68,6 +67,19 @@ pub fn users_page() -> Html {
}); });
}); });
let onadd = clone_cb!(new_username, users; move |_| {
clone!(new_username, users; {
spawn_local(async move {
if let Some(users_inner) = &users.data {
let user = api_request::<String, User>("POST", "/user", Some((*new_username).clone())).await.unwrap();
let mut cloned = users_inner.clone();
cloned.push(user.unwrap());
users.update(cloned);
}
});
});
});
html! { html! {
<Page> <Page>
<Table headers={headers.clone()} loading=false rows={vec![]}> <Table headers={headers.clone()} loading=false rows={vec![]}>
@ -80,7 +92,8 @@ pub fn users_page() -> Html {
<> <>
<span class="inline-block"> <span class="inline-block">
<TextInput <TextInput
onchange={onchange.clone()} class={"mx-2 appearance-none block bg-gray-700 text-slate-400 border border-gray-600 rounded py-2 px-2 w-20 leading-tight focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500"}
onchange={clone_cb!(current_score; move |value| current_score.set(value))}
value={(*current_score).clone()} value={(*current_score).clone()}
/> />
</span> </span>
@ -100,7 +113,28 @@ pub fn users_page() -> Html {
</td> </td>
</tr> </tr>
}).collect::<Html>()} }).collect::<Html>()}
} else { html! { "Loading..." }}} } else {
html! {
<div class="grid place-items-center">
<Loading />
</div>
}
}}
<tr>
<td class="whitespace-nowrap px-3 text-sm text-slate-400">
<span class="inline-block">
<TextInput
class={"mx-2 appearance-none block bg-gray-700 text-slate-400 border border-gray-600 rounded py-2 px-2 w-50 leading-tight focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500"}
onchange={clone_cb!(new_username; move |value| new_username.set(value))}
value={(*new_username).clone()}
/>
</span>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-slate-400"></td>
<td class="whitespace-nowrap py-4 text-sm text-slate-400">
<Button icon={"mdi-plus"} onclick={onadd} />
</td>
</tr>
</Table> </Table>
</Page> </Page>
} }

25
web/src/util.rs
View File

@ -8,23 +8,6 @@ use wasm_bindgen_futures::JsFuture;
use web_sys::{Headers, Request, RequestInit, RequestMode, Response}; use web_sys::{Headers, Request, RequestInit, RequestMode, Response};
use yew::html::IntoPropValue; use yew::html::IntoPropValue;
#[derive(Clone, Copy)]
pub struct AutoCopy<T: Clone>(pub T);
impl<T: Clone> Deref for AutoCopy<T> {
type Target = T;
fn deref(&self) -> &Self::Target {
&self.0
}
}
impl<T: IntoPropValue<T> + Clone> IntoPropValue<T> for AutoCopy<T> {
fn into_prop_value(self) -> T {
self.0.into_prop_value()
}
}
#[derive(Error, Debug, Clone)] #[derive(Error, Debug, Clone)]
pub enum JsError { pub enum JsError {
#[error("javascript error: {0}")] #[error("javascript error: {0}")]
@ -60,8 +43,14 @@ pub async fn api_request<B: Serialize, R: for<'a> Deserialize<'a>>(
if let Some(body) = body { if let Some(body) = body {
let value = JsValue::from_serde(&body)?; let value = JsValue::from_serde(&body)?;
req_opts.body(Some(&value)); req_opts.body(
js_sys::JSON::stringify(&value)
.ok()
.map(JsValue::from)
.as_ref(),
);
} }
web_sys::console::log_1(&JsValue::from("here"));
let request = Request::new_with_str_and_init( let request = Request::new_with_str_and_init(
&format!("http://localhost:8000/api/{}", endpoint), &format!("http://localhost:8000/api/{}", endpoint),