Added Page with ticket submitting functionality

frontend/src/lib.rs

@@ -7,6 +7,8 @@ use yew_router::prelude::*;
 enum Route {
     #[at("/")]
     Home,
+    #[at("/ticket")]
+    Ticket,
     #[not_found]
     #[at("/404")]
     NotFound,
@@ -15,7 +17,8 @@ enum Route {
 fn switch(route: Route) -> Html {
     match route {
         Route::Home => html! { <basic_pages::Home/>},
-        Route::NotFound => html! { <basic_pages::Home/> },
+        Route::NotFound => html! { <basic_pages::NotFound/> },
+        Route::Ticket => html! { <ticket::Ticket/> },
     }
 }
 

frontend/src/pages/mod.rs

@@ -1 +1,2 @@
 pub mod basic_pages;
+pub mod ticket;

frontend/src/pages/ticket.rs

@@ -0,0 +1,120 @@
+use gloo_net::http::Request;
+use serde::{Deserialize, Serialize};
+use wasm_bindgen_futures::spawn_local;
+use yew::prelude::*;
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct TicketCreateScheme {
+    pub category: String,
+    pub betreff: String,
+    pub description: String,
+    pub room: i16,
+}
+
+#[component(Ticket)]
+pub fn ticket_component() -> Html {
+    let category = use_state(|| "".to_string());
+    let betreff = use_state(|| "".to_string());
+    let description = use_state(|| "".to_string());
+    let room = use_state(|| 0i16);
+    let status = use_state(|| None::<String>);
+
+    let onsubmit = {
+        let category = category.clone();
+        let betreff = betreff.clone();
+        let description = description.clone();
+        let room = room.clone();
+        let status = status.clone();
+
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            let category = (*category).clone();
+            let betreff = (*betreff).clone();
+            let description = (*description).clone();
+            let room = *room;
+            let status = status.clone();
+
+            spawn_local(async move {
+                let payload = TicketCreateScheme {
+                    category,
+                    betreff,
+                    description,
+                    room,
+                };
+
+                let request = Request::post("http://localhost:8001/api/tickets/create")
+                    .json(&payload)
+                    .expect("Failed to build request");
+
+                match request.send().await {
+                    Ok(response) if response.status() == 200 => status.set(Some("Success".into())),
+                    Ok(response) => status.set(Some(format!("Error: {}", response.status()))),
+                    Err(err) => status.set(Some(format!("Network error: {}", err))),
+                }
+            });
+        })
+    };
+
+    let category_change = {
+        let category = category.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            category.set(input.value());
+        })
+    };
+
+    let betreff_change = {
+        let betreff = betreff.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            betreff.set(input.value());
+        })
+    };
+
+    let description_change = {
+        let description = description.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            description.set(input.value());
+        })
+    };
+
+    let room_change = {
+        let room = room.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
+            room.set(input.value().parse().unwrap_or(0));
+        })
+    };
+
+    html! {
+        <form {onsubmit}>
+            <label>{ "Betreff:" }
+                <input type="text" value={(*betreff).clone()} oninput={betreff_change}/>
+            </label>
+            <br/>
+            <label>{ "Beschreibung:" }
+                <input type="text" value={(*description).clone()} oninput={description_change}/>
+            </label>
+            <br/>
+            <label>{ "Kategorie:" }
+                <input type="text" value={(*category).clone()} oninput={category_change}/>
+            </label>
+            <br/>
+            <label>{ "Raum:" }
+                <input type="number" value={room.to_string()} oninput={room_change}/>
+            </label>
+            <br/>
+            <button type="submit">{ "Send" }</button>
+
+            {
+                if let Some(s) = &*status {
+                    html!{ <p>{ s }</p> }
+                } else {
+                    html!{}
+                }
+            }
+
+        </form>
+    }
+}