diff options
Diffstat (limited to 'src/model/input_fields.rs')
| -rw-r--r-- | src/model/input_fields.rs | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/src/model/input_fields.rs b/src/model/input_fields.rs new file mode 100644 index 0000000..91d9264 --- /dev/null +++ b/src/model/input_fields.rs @@ -0,0 +1,233 @@ +use crate::model::utility::File; +use wasm_bindgen::closure::Closure; +use wasm_bindgen::JsCast; +use web_sys::FileReader; +use yew::prelude::*; +use yew::services::ConsoleService; + +/// Type that represents the visiual appearance of an input field. +pub enum VCardPropertyInputField { + Text { + label: String, + id: Option<String>, + placeholder: Option<String>, + oninput: Callback<InputData>, + value: String, + typ: String, + }, + File { + label: String, + name: String, + callback: Callback<Option<File>>, + value: Option<File>, + }, + Select { + label: String, + id: Option<String>, + options: Vec<(String, String)>, + onchange: Callback<ChangeData>, + value: String, + }, + CheckBox { + label: String, + id: Option<String>, + onclick: Callback<MouseEvent>, + value: bool, + }, +} + +impl VCardPropertyInputField { + /// Returns a `Html` representation of the `VCardPropertyInputField`. + pub fn render(&self) -> Html { + match self { + Self::Text { + label, + id, + placeholder, + oninput, + value: _, + typ, + } => Self::text_field_input(label, id, placeholder, oninput, typ), + Self::File { + label, + name, + callback, + value, + } => Self::file_field_input(label, name, callback, value), + Self::Select { + label, + id, + options, + onchange, + value, + } => Self::select_field_input(label, id, options, onchange, value), + Self::CheckBox { + label, + id, + onclick, + value, + } => Self::checkbox_field_input(label, id, value, onclick), + } + } + /// Returns an `Html` representation of a text input field with the given parameters. + fn text_field_input( + label: &str, + id: &Option<String>, + placeholder: &Option<String>, + oninput: &Callback<InputData>, + typ: &str, + ) -> Html { + html! { + <div class="field column + is-one-fifth-widescreen + is-one-quarter-desktop + is-one-third-tablet + is-half-mobile" > + <label class="label">{ label }</label> + <div class="control"> + <input id=id.as_ref().unwrap_or(&"".to_string()) + type=typ + placeholder=placeholder.as_ref().unwrap_or(&"".to_string()) + oninput=oninput + /> + </div> + </div> + } + } + /// Returns an `Html` representation of a file input field with the given parameters. + fn file_field_input( + label: &str, + name: &str, + callback: &Callback<Option<File>>, + file: &Option<File>, + ) -> Html { + let callback = callback.clone(); + let onchange = Callback::<()>::default(); + let onchange = onchange.reform(move |c: ChangeData| { + if let ChangeData::Files(files) = c { + match files.item(0) { + Some(file) => { + let file_reader = FileReader::new().unwrap(); + match file_reader.read_as_data_url(&file) { + Ok(_) => (), + Err(_) => ConsoleService::warn("Error: Couldn't get file as data url."), + }; + + let callback = callback.clone(); + let onload = Closure::wrap(Box::new(move |event: Event| { + let file_reader: FileReader = + event.target().unwrap().dyn_into().unwrap(); + let data_url: Option<String> = + file_reader.result().unwrap().as_string(); + match data_url { + Some(content) => callback.emit(Some(File { + name: file.name(), + content, + })), + None => { + ConsoleService::warn("Couldn't get data url as string."); + callback.emit(None); + } + }; + }) as Box<dyn FnMut(_)>); + + file_reader.set_onload(Some(onload.as_ref().unchecked_ref())); + onload.forget(); + } + None => callback.emit(None), + } + } else { + callback.emit(None); + } + }); + html! { + <div class="field column + is-one-third-widescreen + is-two-quarters-desktop + is-two-thirds-tablet + is-full-mobile" > + <label class="label">{ label }</label> + <div class="file has-name control"> + <label class="file-label"> + <input class="file-input" + type="file" + name=name + onchange=onchange + /> + <span class="file-cta"> + <span class="file-icon"> + <i class="fas fa-upload"></i> + </span> + <span class="file-label"> + { "Choose file..." } + </span> + </span> + <span class="file-name"> + { + match file { + Some(file) => file.name.clone(), + None => String::from("No file selected"), + } + } + </span> + </label> + </div> + </div> + } + } + fn select_field_input( + label: &str, + id: &Option<String>, + options: &Vec<(String, String)>, + onchange: &Callback<ChangeData>, + value: &str, + ) -> Html { + html! { + <div class="field column + is-one-fifth-widescreen + is-one-quarter-desktop + is-one-third-tablet + is-half-mobile" > + <label class="label">{ label }</label> + <div class="select"> + <select id=id.as_ref().unwrap_or(&"".to_string()) + value=value + onchange=onchange > + { + for options.iter().map(|option| + html! { + <option value=option.0>{ option.1.clone() }</option> + } + ) + } + </select> + </div> + + </div> + } + } + /// Returns an `Html` representation of a checkbox input field with the given parameters. + fn checkbox_field_input( + label: &str, + id: &Option<String>, + checked: &bool, + onclick: &Callback<MouseEvent>, + ) -> Html { + html! { + <div class="field column + is-one-fifth-widescreen + is-one-quarter-desktop + is-one-third-tablet + is-half-mobile" > + <label class="checkbox"> + <input id=id.as_ref().unwrap_or(&"".to_string()) + type="checkbox" + checked=*checked + onclick=onclick + /> + { label } + </label> + </div> + } + } +} |