itsscb/digitaler-frieden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ft/adds dynamic lists to clues.rs

Browse Source
This commit is contained in:
itsscb 2024-05-23 22:02:59 +02:00
parent 3a90e5b8a9
commit 9339920c9a
4 changed files with 1130 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1000
dist/digitaler-frieden-99416daee9ea8526c8fab295cf408199d61d343ac420e4bfdedf075a84ad23790895e67c4c0b56bc254c3227297f1095.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
dist/digitaler-frieden-99416daee9ea8526c8fab295cf408199d61d343ac420e4bfdedf075a84ad23790895e67c4c0b56bc254c3227297f1095_bg.wasm vendored Normal file
View File

Binary file not shown.

8
dist/index.html vendored
View File

@ -7,15 +7,15 @@
<link rel="manifest" href="public/manifest.json"> <link rel="manifest" href="public/manifest.json">
<link rel="preload" href="/digitaler-frieden-b2e41beb7f7dba9a990ab4c75b582f1b2dd179eead6450018702693ace89f4d3d8f89abb8053995fb0aeeaf6e01da398_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" integrity="sha384-suQb6399upqZCrTHW1gvGy3Ree6tZFABhwJpOs6J9NPY-Jq7gFOZX7Cu6vbgHaOY"> <link rel="preload" href="/digitaler-frieden-99416daee9ea8526c8fab295cf408199d61d343ac420e4bfdedf075a84ad23790895e67c4c0b56bc254c3227297f1095_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" integrity="sha384-mUFtrunqhSbI-rKVz0CBmdYdNDrEIOS_3t8HWoStI3kIleZ8TAtWvCVMMicpfxCV">
<link rel="modulepreload" href="/digitaler-frieden-b2e41beb7f7dba9a990ab4c75b582f1b2dd179eead6450018702693ace89f4d3d8f89abb8053995fb0aeeaf6e01da398.js" crossorigin="anonymous" integrity="sha384-HXk5sfJpg6vvj6l5uXkNrPLW9u0vdmIK8Xxky-VYVPqemQcA_Lz1Kyq9DJPEqSmP"></head> <link rel="modulepreload" href="/digitaler-frieden-99416daee9ea8526c8fab295cf408199d61d343ac420e4bfdedf075a84ad23790895e67c4c0b56bc254c3227297f1095.js" crossorigin="anonymous" integrity="sha384-xraHREWfrlizQrGCM18bLm1zxSE-Kn_u2GZMV9WNl8D6gn7ftjkn4ACF02Ci2dSf"></head>
<body class="bg-black text-white"> <body class="bg-black text-white">
<script type="module"> <script type="module">
import init, * as bindings from '/digitaler-frieden-b2e41beb7f7dba9a990ab4c75b582f1b2dd179eead6450018702693ace89f4d3d8f89abb8053995fb0aeeaf6e01da398.js'; import init, * as bindings from '/digitaler-frieden-99416daee9ea8526c8fab295cf408199d61d343ac420e4bfdedf075a84ad23790895e67c4c0b56bc254c3227297f1095.js';
init('/digitaler-frieden-b2e41beb7f7dba9a990ab4c75b582f1b2dd179eead6450018702693ace89f4d3d8f89abb8053995fb0aeeaf6e01da398_bg.wasm'); init('/digitaler-frieden-99416daee9ea8526c8fab295cf408199d61d343ac420e4bfdedf075a84ad23790895e67c4c0b56bc254c3227297f1095_bg.wasm');
window.wasmBindings = bindings; window.wasmBindings = bindings;
</script><script>"use strict"; </script><script>"use strict";

214
src/pages/clues.rs
View File

@ -5,29 +5,60 @@ use crate::router::Route;
#[function_component] #[function_component]
pub fn Clues() -> Html { pub fn Clues() -> Html {
// let mails = yew::use_state(|| vec![]); let mails = yew::use_state(|| vec![]);
// let mail_input = yew::NodeRef::default(); let mails_callback = mails.clone();
// let mail_handle = yew::use_state(String::new);
// let mail = (*mail_handle).clone(); let mail = yew::NodeRef::default();
// let on_mail_add = { let on_mail_add: yew::Callback<yew::MouseEvent> = {
// let mail_handle = mail_handle.clone(); let mail = mail.clone();
// let mail = mail.clone(); yew::Callback::from(move |_| {
// let mails = mails.clone(); if let Some(input) = mail.cast::<web_sys::HtmlInputElement>() {
// yew::Callback::from(move |_| { let mut m = mails_callback.to_vec();
// let mut new_mails = mails.to_vec(); let mail = input.value();
// new_mails.push(mail.to_string()); if !mail.is_empty() && !m.contains(&mail) {
// gloo_console::log!(format!("New Mail: {:?}", mail)); m.push(mail);
// mails.set( input.set_value("");
// // mails.push( }
// // mail.to_string() mails_callback.set(m);
// // ) };
// new_mails })
// ); };
// println!("{:?}",mails);
// gloo_console::log!(format!("Mails: {:?}", mails)); let on_mail_remove = {
// mail_handle.set("".to_owned()); let mails = mails.clone();
// }) yew::Callback::from(move |index| {
// }; let mut new = (*mails).clone();
new.remove(index);
mails.set(new);
})
};
let phones = yew::use_state(|| vec![]);
let phones_callback = phones.clone();
let phone = yew::NodeRef::default();
let on_phone_add: yew::Callback<yew::MouseEvent> = {
let phone = phone.clone();
yew::Callback::from(move |_| {
if let Some(input) = phone.cast::<web_sys::HtmlInputElement>() {
let mut m = phones_callback.to_vec();
let phone = input.value();
if !phone.is_empty() && !m.contains(&phone) {
m.push(phone);
input.set_value("");
}
phones_callback.set(m);
};
})
};
let on_phone_remove = {
let phones = phones.clone();
yew::Callback::from(move |index| {
let mut new = (*phones).clone();
new.remove(index);
phones.set(new);
})
};
html! { html! {
<div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0"> <div class="flex flex-col justify-center items-center h-full space-y-16 px-8 m-0">
@ -92,12 +123,10 @@ pub fn Clues() -> Html {
<h3 class="font-bold text-2xl ">{ "E-Mail Adressen" }</h3> <h3 class="font-bold text-2xl ">{ "E-Mail Adressen" }</h3>
</div> </div>
<div class="flex justify-center items-center space-x-4 w-full"> <div class="flex justify-center items-center space-x-4 w-full">
<input <input
id="email" id="email"
// value={mail.clone()} ref={mail}
// ref={mail_input} class={classes!(
// onchange={onchange}
class={classes!(
"duration-700", "duration-700",
"font-bold", "font-bold",
"text-lg", "text-lg",
@ -117,26 +146,26 @@ pub fn Clues() -> Html {
"h-16", "h-16",
"rounded-md","visible" "rounded-md","visible"
)} )}
type="text" type="text"
/> />
<button <button onclick={on_mail_add}>
// onclick={on_mail_add} <svg
> class="text-primary w-16"
<svg xmlns="http://www.w3.org/2000/svg"
class="text-primary w-16" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 24 24" >
fill="currentColor" <path d="M0 0h24v24H0z" fill="none" />
> <path
<path d="M0 0h24v24H0z" fill="none" /> d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
<path />
d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" </svg>
/>
</svg>
</button> </button>
</div> </div>
{ mails.iter().enumerate().map(|(index,item)| {
html! {
<div class="flex justify-start items-center space-x-4 w-full"> <div class="flex justify-start items-center space-x-4 w-full">
<svg <button onclick={on_mail_remove.reform(move |_| index)}> <svg
class="w-10 text-danger" class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -147,42 +176,62 @@ pub fn Clues() -> Html {
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/> />
</svg> </svg>
<p class="text-md">{ "max.mustermann@example.com" }</p> </button>
</div> <p class="text-md">{ item}</p>
<div class="flex justify-start items-center w-full space-x-4">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "jon.doe@blub.com" }</p>
</div> </div>
}
}).collect::<Html>() }
</div> </div>
<div <div
class="flex flex-col justify-center items-center w-full mb-6 space-y-4 md:space-y-4" class="flex flex-col justify-center items-center w-full mb-6 space-y-4 md:space-y-4"
> >
<div class="flex justify-between w-full relative"> <div class="flex justify-between w-full relative">
<h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3> <h3 class="font-bold text-2xl ">{ "Telefonnummern" }</h3>
<svg
class="text-primary w-10 absolute right-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
</div> </div>
<div class="flex justify-center items-center space-x-4 w-full">
<input
id="phone"
ref={phone}
class={classes!(
"duration-700",
"font-bold",
"text-lg",
"transition",
"group-hover:cursor-pointer",
"bg-transparent",
"border-white",
"hover:border-[#33d9b2]",
"hover:curser-pointer",
"focus-within:bg-[#33d9b2]",
"active:bg-[#33d9b2]",
"border-2",
"text-center",
"text-primary",
"focus-within:text-black",
"w-full",
"h-16",
"rounded-md","visible"
)}
type="text"
/>
<button onclick={on_phone_add}>
<svg
class="text-primary w-16"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
</button>
</div>
{ phones.iter().enumerate().map(|(index,item)| {
html! {
<div class="flex justify-start items-center space-x-4 w-full"> <div class="flex justify-start items-center space-x-4 w-full">
<svg <button onclick={on_phone_remove.reform(move |_| index)}> <svg
class="w-10 text-danger" class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@ -193,22 +242,11 @@ pub fn Clues() -> Html {
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/> />
</svg> </svg>
<p class="text-md">{ "+49 1234 567 890" }</p> </button>
</div> <p class="text-md">{ item}</p>
<div class="flex justify-start items-center w-full space-x-4">
<svg
class="w-10 text-danger"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
/>
</svg>
<p class="text-md">{ "+49 9876 543 210" }</p>
</div> </div>
}
}).collect::<Html>() }
</div> </div>
</div> </div>
</div> </div>