web: add SVG cards in prep for dimensions support

web/src/inputs.rs

@@ -470,16 +470,14 @@ pub fn svg_input() -> Html {
                     );
                 }
                 app.reduce(move |app| {
-                    app.svgs.clear();
+                    // Clear any errors from previous entry, add new successfully parsed SVGs
                     (*parsed_state_cloned).borrow_mut().clear();
                     for result in results.iter() {
                         (*parsed_state_cloned)
                             .borrow_mut()
                             .push(result.clone().map(|_| ()));
                     }
-                    if results.iter().all(Result::is_ok) {
+                    app.svgs.extend(results.drain(..).filter_map(Result::ok));
-                        app.svgs.extend(results.drain(..).filter_map(Result::ok));
-                    }
                 });
             }
         });

web/src/main.rs

@@ -23,7 +23,7 @@ use spectre::*;
 use state::*;
 
 struct App {
-    _app_dispatch: Dispatch<AppStore>,
+    app_dispatch: Dispatch<AppStore>,
     app_state: Rc<AppState>,
     form_dispatch: Dispatch<FormStore>,
     form_state: Rc<FormState>,
@@ -45,7 +45,7 @@ impl Component for App {
 
     fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
         Self {
-            _app_dispatch: Dispatch::bridge_state(link.callback(AppMsg::AppState)),
+            app_dispatch: Dispatch::bridge_state(link.callback(AppMsg::AppState)),
             app_state: Default::default(),
             form_dispatch: Dispatch::bridge_state(link.callback(AppMsg::FormState)),
             form_state: Default::default(),
@@ -173,6 +173,39 @@ impl Component for App {
                         { env!("CARGO_PKG_DESCRIPTION") }
                     </p>
                     <SvgInput/>
+                    <div class={classes!("card-container", "columns")}>
+                        {
+                            for self.app_state.svgs.iter().enumerate().map(|(i, svg)| {
+                                let svg_base64 = base64::encode(svg.content.as_bytes());
+                                let remove_svg_onclick = self.app_dispatch.reduce_callback_once(move |app| {
+                                    app.svgs.remove(i);
+                                });
+                                let footer = html!{
+                                    <Button
+                                        title="Remove"
+                                        style={ButtonStyle::Primary}
+                                        icon={
+                                            html_nested!(
+                                                <Icon name={IconName::Delete} />
+                                            )
+                                        }
+                                        onclick={remove_svg_onclick}
+                                    />
+                                };
+                                html!{
+                                    <div class={classes!("column", "col-6", "col-xs-12")}>
+                                        <Card
+                                            title={svg.filename.clone()}
+                                            img={html_nested!(
+                                                <img class="img-responsive" src={format!("data:image/svg+xml;base64,{}", svg_base64)} alt={svg.filename.clone()} />
+                                            )}
+                                            footer={footer}
+                                        />
+                                    </div>
+                                }
+                            })
+                        }
+                    </div>
                     <ButtonGroup>
                         <Button
                             title="Generate G-Code"
@@ -210,16 +243,6 @@ impl Component for App {
     }
 }
 
-// #[function_component(App)]
-// fn app() -> Html {
-//     let app = use_store::<AppStore>();
-//     let form = use_store::<BasicStore<FormState>>();
-
-//     let generating = use_state(|| false);
-
-//     }
-// }
-
 fn main() {
     wasm_logger::init(wasm_logger::Config::new(Level::Info));
     yew::start_app::<App>();

web/src/spectre/mod.rs

@@ -474,6 +474,7 @@ css_class_enum! {
         Stop => "stop",
         Download => "download",
         Edit => "edit",
+        Delete => "delete",
         None => ""
     }
 }
@@ -540,3 +541,59 @@ pub fn modal(props: &ModalProps) -> Html {
         </div>
     }
 }
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct CardProps {
+    pub title: String,
+    #[prop_or_default]
+    pub img: Option<VNode>,
+    #[prop_or_default]
+    pub subtitle: Option<String>,
+    #[prop_or_default]
+    pub body: Option<VNode>,
+    #[prop_or_default]
+    pub footer: Option<VNode>,
+}
+
+#[function_component(Card)]
+pub fn card(props: &CardProps) -> Html {
+    html! {
+        <div class="card">
+            <div class="card-header">
+                <div class={classes!("card-title", "h5")}>{ props.title.clone() }</div>
+                {
+                    if let Some(subtitle) = props.subtitle.clone() {
+                        html! {
+                            <div class="card-subtitle">
+                                { subtitle }
+                            </div>
+                        }
+                    } else {
+                        html!{ }
+                    }
+                }
+            </div>
+            {
+                if let Some(img) = props.img.clone() {
+                    html!{ <div class="card-image">{ img }</div> }
+                } else {
+                    html!{ }
+                }
+            }
+            {
+                if let Some(body) = props.body.clone() {
+                    html!{ <div class="card-body">{ body }</div> }
+                } else {
+                    html!{ }
+                }
+            }
+            {
+                if let Some(footer) = props.footer.clone() {
+                    html!{ <div class="card-footer">{ footer }</div> }
+                } else {
+                    html!{ }
+                }
+            }
+        </div>
+    }
+}

web/style/main.scss

@@ -0,0 +1,13 @@
+div.card {
+  margin-top: 1em;
+  div.card-image {
+    img {
+      max-height: 30em;
+    }
+  }
+}
+
+div.card-container {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}