From 38822f7b560207abb1fe63489dab7fe76474233e Mon Sep 17 00:00:00 2001
From: Kenzi Connor <git@knz.ai>
Date: Wed, 17 Jul 2024 15:26:28 -0700
Subject: [PATCH] WIP single file + other fields

---
 src/wasm/main.rs | 168 ++++++++++++++++-------------------------------
 1 file changed, 55 insertions(+), 113 deletions(-)

diff --git a/src/wasm/main.rs b/src/wasm/main.rs
index e127ba0..e5cc55e 100644
--- a/src/wasm/main.rs
+++ b/src/wasm/main.rs
@@ -1,19 +1,13 @@
 #![cfg(feature = "wasm")]
-extern crate base64;
-use std::collections::HashMap;
-
-use base64::engine::general_purpose::STANDARD;
-use base64::Engine;
 use gloo::file::callbacks::FileReader;
 use gloo::file::File;
-use web_sys::{DragEvent, Event, FileList, HtmlInputElement};
-use yew::html::TargetCast;
-use yew::{html, Callback, Component, Context, Html};
+use web_sys::HtmlInputElement;
+use yew::prelude::*;
 
-use cega::color::palette::palette_from_abbr;
-use cega::image::Image;
-use cega::parser::ParserType;
-use cega::png;
+pub enum Msg {
+    Loaded(String, String, Vec<u8>),
+    Submit,
+}
 
 struct FileDetails {
     name: String,
@@ -21,57 +15,60 @@ struct FileDetails {
     data: Vec<u8>,
 }
 
-pub enum Msg {
-    Loaded(String, String, Vec<u8>),
-    Files(Vec<File>),
-}
-
 pub struct App {
-    readers: HashMap<String, FileReader>,
-    files: Vec<FileDetails>,
+    width: NodeRef,
+    file: NodeRef,
+    width_value: String,
+    file_value: Option<FileDetails>,
 }
-
 impl Component for App {
     type Message = Msg;
     type Properties = ();
 
     fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            readers: HashMap::default(),
-            files: Vec::default(),
+            file: NodeRef::default(),
+            width: NodeRef::default(),
+            width_value: "".to_string(),
+            file_value: None,
         }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::Loaded(file_name, file_type, data) => {
-                self.files.push(FileDetails {
+                self.file_value = Some(FileDetails {
                     data,
                     file_type,
                     name: file_name.clone(),
                 });
-                self.readers.remove(&file_name);
                 true
             }
-            Msg::Files(files) => {
-                for file in files.into_iter() {
-                    let file_name = file.name();
-                    let file_type = file.raw_mime_type();
-
-                    let task = {
-                        let link = ctx.link().clone();
-                        let file_name = file_name.clone();
-
-                        gloo::file::callbacks::read_as_bytes(&file, move |res| {
-                            link.send_message(Msg::Loaded(
-                                file_name,
-                                file_type,
-                                res.expect("failed to read file"),
-                            ))
-                        })
-                    };
-                    self.readers.insert(file_name, task);
-                }
+            Msg::Submit => {
+                let width_field = self.width.cast::<HtmlInputElement>().unwrap();
+                self.width_value = if width_field.value() == "" {
+                    width_field.placeholder()
+                } else {
+                    width_field.value()
+                };
+                // let el = self.file.cast::<HtmlInputElement>().unwrap();
+                // if let Some(file) = el.files().and_then(|m| m.item(0)) {
+                //     let file_name = el.name();
+                //     let file_type = file.raw_mime_type();
+
+                //     let task = {
+                //         let link = ctx.link().clone();
+                //         let file_name = file_name.clone();
+
+                //         gloo::file::callbacks::read_as_bytes(&file, move |res| {
+                //             link.send_message(Msg::Loaded(
+                //                 file_name,
+                //                 file_type,
+                //                 res.expect("failed to read file"),
+                //             ))
+                //         })
+                //     };
+                // }
                 true
             }
         }
@@ -79,86 +76,31 @@ impl Component for App {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
-            <div id="wrapper">
-                <p id="title">{ "Process your image files" }</p>
-                <label for="file-upload">
-                    <div
-                        id="drop-container"
-                        ondrop={ctx.link().callback(|event: DragEvent| {
-                            event.prevent_default();
-                            let files = event.data_transfer().unwrap().files();
-                            Self::upload_files(files)
-                        })}
-                        ondragover={Callback::from(|event: DragEvent| {
-                            event.prevent_default();
-                        })}
-                        ondragenter={Callback::from(|event: DragEvent| {
-                            event.prevent_default();
-                        })}
-                    >
-                        <i class="fa fa-cloud-upload"></i>
-                        <p>{"Drop your images here or click to select"}</p>
-                    </div>
-                </label>
+            <div class="main">
+                <h1>{"Process your CGA"}</h1>
+                <div class="input-container">
+                    <label>{ "Width" }</label>
+                    <input
+                        type="text"
+                        ref={&self.width}
+                        class="input-element"
+                        placeholder="320"
+                        value={self.width_value.clone()}
+                    />
+                </div>
                 <input
                     id="file-upload"
                     type="file"
+                    ref={&self.file}
                     accept="image/*,.bin,.cga,.ega"
-                    multiple={true}
-                    onchange={ctx.link().callback(move |e: Event| {
-                        let input: HtmlInputElement = e.target_unchecked_into();
-                        Self::upload_files(input.files())
-                    })}
+                    multiple={false}
+                    onchange={ctx.link().callback(|_| Msg::Submit)}
                 />
-                <div id="preview-area">
-                    { for self.files.iter().map(Self::view_file) }
-                </div>
             </div>
         }
     }
 }
 
-impl App {
-    fn view_file(file: &FileDetails) -> Html {
-        let src = if file.file_type.contains("image") {
-            format!(
-                "data:{};base64,{}",
-                file.file_type,
-                STANDARD.encode(&file.data)
-            )
-        } else {
-            let image = Image::new(&file.data, 320, ParserType::CGA);
-            let palette = palette_from_abbr("cga0");
-            let mut bytes: Vec<u8> = Vec::new();
-            let _ = png::write_to(&mut bytes, image.data(), palette.clone());
-            format!("data:image/png;base64,{}", STANDARD.encode(bytes))
-        };
-
-        html! {
-            <div class="preview-tile">
-                <p class="preview-name">{ format!("{}", file.name) }</p>
-                <div class="preview-media">
-                    <img src={src} />
-                </div>
-            </div>
-        }
-    }
-
-    fn upload_files(files: Option<FileList>) -> Msg {
-        let mut result = Vec::new();
-
-        if let Some(files) = files {
-            let files = js_sys::try_iter(&files)
-                .unwrap()
-                .unwrap()
-                .map(|v| web_sys::File::from(v.unwrap()))
-                .map(File::from);
-            result.extend(files);
-        }
-        Msg::Files(result)
-    }
-}
-
 fn main() {
     yew::Renderer::<App>::new().render();
 }