Merge branch 'create-rust-mogwai-client-code-for-file-upload-component-3' into 'master'

Create rust mogwai client code for file upload component 3

Closes #3

See merge request !2

+# Steffie's Artshop (Arbeitstitel)
+
+A pure rust implementation of a small shop system. This is
+ment to host the Arts created by my wife Stefanie and give
+the opportunity to sell some of these of offer art services.
+
+## Description
+
+[:Description:]
+
+## Requirements
+
+This will be mostly self sufficient. It comes with its own web
+server. One needs a browser to see the results.
+
+## Dependencies
+
+- rust
+- mogwai
+- actix-web
+- actix-file
+- serde
+- serde-json
+- diffy
+
+## Contributing
+
+Currently this is a lot of lerning for myself and I prefer to
+work on this alone as long as I am not settled with it.
+
+Anyway, I will look into suggestions when they arrive me.
+
+## License
+
+Copyright © 2022 Georg Hopp
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+## Author
+
+Georg Hopp <georg@steffers.org>

@@ -15,3 +15,24 @@ Statt also ein **undo** auf eine frühere Version zuzulassen kann man in der
 aktuellen Version auf frühere Stände zurück gehen und diese gegebenenfalls
 aktuellen Version auf frühere Stände zurück gehen und diese gegebenenfalls
 noch anpassen. Dieser Stand wird wieder ein neuer Patch gegen die gegenwärtige
 noch anpassen. Dieser Stand wird wieder ein neuer Patch gegen die gegenwärtige
 Version.
 Version.
+
+# Gedanken zum file upload.
+Der finale Dateiname sollte ein eindeutiger Hashwert des content sein.
+Um die erzeugung des Hash schnell zu halten sollte es ausreichen nur einen
+Teil vom Anfang und von Ende und der Mitte zu hashen. Das habe ich schon mal
+in einem anderen Projekt gemacht... [SUCHE]
+
+Die Dateien sollten dann in einem zweistufigem Verzeichnisbaum gespeichert
+werden bei dem die Verzeichnisse mit den ersten Zeichen des Hashs beginnnen.
+
+Weitere Metainformationen wie Dateiname, Mime-Type, etc. werden in der
+Datenbank gespeichert.
+
+Die ausgelieferten Bilder sollen eine steganographisch eingebettet Copyright
+Information enthalten oder aber mit einem Wassermark versehen sein. Es gibt
+ein rust crate steganography das für die erste Anwendung geeignet scheint.
+Für die zweite Anwendung ist evtl. photon_rs geeignet.
+
+Uploads ueber die fetch API koennen zur Zeit scheinbar nicht wirklich einen
+Progressbar haben. Daher werde ich wohl einen spinner anzeigen und dann Error
+oder Ok...

@@ -22,3 +22,14 @@
 ## Restful API
 ## Restful API
 [ReadTheDocs apiguide](https://apiguide.readthedocs.io/en/latest/build_and_publish/use_RESTful_urls.html 'ReadTheDocs apiguide')
 [ReadTheDocs apiguide](https://apiguide.readthedocs.io/en/latest/build_and_publish/use_RESTful_urls.html 'ReadTheDocs apiguide')
 [RestfulApi](https://restfulapi.net/versioning/ 'RestfulApi')
 [RestfulApi](https://restfulapi.net/versioning/ 'RestfulApi')
+
+## HTML5 file upload
+[Pure HTML5 file upload](https://www.script-tutorials.com/pure-html5-file-upload/, 'Pure HTML5 file upload')
+[HTML5 File Upload Example](https://www.webcodegeeks.com/html5/html5-file-upload-example/, 'HTML5 File Upload Example')
+[How to upload files on the server using Fetch API](https://attacomsian.com/blog/uploading-files-using-fetch-api, 'How to upload files on the server using Fetch API')
+[Stackoverflow 1](https://stackoverflow.com/questions/36453950/upload-file-with-fetch-api-in-javascript-and-show-progress 'Stackoverflow 1')
+[GitHub Fetch Issues](https://github.com/github/fetch/issues/89 'GitHub Fetch Issues')
+
+## CSS spinner...
+[How to Create Loading Spinner With CSS](https://www.w3docs.com/snippets/css/how-to-create-loading-spinner-with-css.html 'How to Create Loading Spinner With CSS')
+[Loading.io - Pure CSS Loader](https://loading.io/css/ 'Loading.io - Pure CSS Loader')

+.upload {
+	float: left;
+	width: 400px;
+	padding: 1em;
+	border-radius: .5em;
+	border: 1px solid #ddd;
+	background: #f7f7f7;
+}
+
+.upload ul {
+	padding-left: 5px;
+}
+
+.upload > ul {
+	max-height: 15em;
+	width: calc(100% - 10px);
+	overflow-y: auto;
+	overflow-x: hidden;
+	background: #ffffff;
+	border-radius: .35em;
+	border: 2px solid #bbb;
+	cursor: default;
+}
+
+.upload > ul > li {
+	display: flex;
+	border: 1px solid black;
+	width: fit-content;
+}
+
+.upload > ul > li > ul > li {
+	display: block;
+}
+
 .markdown {
 .markdown {
-  float: left;
-  padding: 1em;
-  border-radius: .5em;
-  border: 1px solid #ddd;
-  background: #f7f7f7;
+	float: left;
+	padding: 1em;
+	border-radius: .5em;
+	border: 1px solid #ddd;
+	background: #f7f7f7;
 }
 }
 
 
 .markdown p {
 .markdown p {
-  text-align: justify;
-  text-indent: .5em;
-  margin-block: .5em;
+	text-align: justify;
+	text-indent: .5em;
+	margin-block: .5em;
 }
 }
 
 
 .markdown > div:first-child {
 .markdown > div:first-child {
-  position: fixed;
+	position: fixed;
 	width: inherit;
 	width: inherit;
 	z-index: 10;
 	z-index: 10;
 }
 }
 
 
 .markdown > div:first-child > div {
 .markdown > div:first-child > div {
 	position: relative;
 	position: relative;
-  left: .5em;
+	left: .5em;
 	width: inherit;
 	width: inherit;
 }
 }
 
 
 .markdown > div:first-child > pre {
 .markdown > div:first-child > pre {
-  white-space: pre-wrap;
-  height: 15em;
+	white-space: pre-wrap;
+	height: 15em;
 	width: calc(100% - 10px);
 	width: calc(100% - 10px);
-  overflow-y: auto;
-  overflow-x: hidden;
-  background: #ffffff;
-  border-radius: .35em;
-  border: 2px solid #bbb;
-  margin: 2px 0px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	background: #ffffff;
+	border-radius: .35em;
+	border: 2px solid #bbb;
+	margin: 2px 0px;
 	opacity: .95;
 	opacity: .95;
 }
 }
 
 
 .markdown > div:first-child > div > div {
 .markdown > div:first-child > div > div {
-  display: inline;
+	display: inline;
 }
 }
 
 
 .markdown > div:first-child > div ul {
 .markdown > div:first-child > div ul {
-  height: 15em;
-  list-style-type: none;
-  margin: 2px 0px;
-  overflow-y: auto;
-  padding-left: 0px;
-  position: absolute;
-  scroll-behavior: auto;
-  top: 1.8em;
+	height: 15em;
+	list-style-type: none;
+	margin: 2px 0px;
+	overflow-y: auto;
+	padding-left: 0px;
+	position: absolute;
+	scroll-behavior: auto;
+	top: 1.8em;
 }
 }
 
 
 .markdown blockquote {
 .markdown blockquote {
-  border-left: 5px solid #ccc;
-  margin: .5em 10px;
-  padding: .5em 10px;
+	border-left: 5px solid #ccc;
+	margin: .5em 10px;
+	padding: .5em 10px;
 }
 }
 
 
 .markdown blockquote p {
 .markdown blockquote p {
-  text-align: left;
-  text-indent: 0;
-  margin-block: 0;
+	text-align: left;
+	text-indent: 0;
+	margin-block: 0;
 }
 }
 
 
 .markdown .footnote-definition > * {
 .markdown .footnote-definition > * {
-  display: inline;
+	display: inline;
+}
+
+@keyframes spinner {
+	0% {
+		transform: translate3d(-50%, -50%, 0) rotate(0deg);
+	}
+	100% {
+		transform: translate3d(-50%, -50%, 0) rotate(360deg);
+	}
+}
+
+.spin::before {
+	animation: 1.5s linear infinite spinner;
+	animation-play-state: inherit;
+	border: solid 5px #cfd0d1;
+	border-bottom-color: #1c87c9;
+	border-radius: 50%;
+	content: "";
+	height: 1.5em;
+	width: 1.5em;
+	position: absolute;
+	top: 10%;
+	left: 1.5em;
+	transform: translate3d(-50%, -50%, 0);
+	will-change: transform;
 }
 }

@@ -36,20 +36,28 @@ version = "^0.5"
 [dependencies.web-sys]
 [dependencies.web-sys]
 version = "^0.3"
 version = "^0.3"
 features = [
 features = [
-  "Document",
-  "DomParser",
-  "Headers",
-  "HtmlElement",
-  "HtmlInputElement",
-  "MouseEvent",
-  "Node",
-  "Request",
-  "RequestInit",
-  "RequestMode",
-  "Response",
-  "SupportedType",
-  "Window",
-]
+	"Blob",
+	"CanvasRenderingContext2d",
+	"Document",
+	"DomParser",
+	"File",
+	"FileList",
+	"FileReader",
+	"ImageBitmap",
+	"Headers",
+	"HtmlCanvasElement",
+	"HtmlElement",
+	"HtmlInputElement",
+	"MouseEvent",
+	"Node",
+	"ReadableStream",
+	"Request",
+	"RequestInit",
+	"RequestMode",
+	"Response",
+	"SupportedType",
+	"Window",
+	]
 
 
 [dev-dependencies]
 [dev-dependencies]
 wasm-bindgen-test = "0.2"
 wasm-bindgen-test = "0.2"

@@ -66,17 +66,6 @@ impl Markdown {
         }
         }
     }
     }
 
 
-    pub(crate) fn _to_html_string(&self) -> String {
-        use pulldown_cmark::{Parser, Options, html};
-
-        let mut html_out = String::new();
-        let parser = Parser::new_ext(&self.json.content, Options::all());
-
-        html::push_html(&mut html_out, parser);
-        html_out
-    }
-
-
     fn status_error<I: Display>(status :I) -> Error {
     fn status_error<I: Display>(status :I) -> Error {
         let err_str = format!("Invalid response status: {}", status);
         let err_str = format!("Invalid response status: {}", status);
         Error::from(err_str.as_str())
         Error::from(err_str.as_str())

 pub(crate) mod markdown;
 pub(crate) mod markdown;
+pub(crate) mod upload;

+use std::fmt::Display;
+
+use super::super::error::*;
+use super::super::client::Client;
+use crate::upload::upload::Upload;
+
+#[derive(Debug, Clone)]
+pub struct UploadApi {
+    client :Client,
+}
+
+impl UploadApi {
+    pub(crate) async fn new() -> Result<UploadApi> {
+        let client = Client::new()?;
+        Ok(UploadApi { client })
+    }
+
+    pub(crate) async fn store(&self, upload :&Upload) -> Result<&UploadApi> {
+        let response = self.client.post_stream( "/api/v0/upload"
+                                              , &upload.mime_type()
+                                              , upload.data() ).await?;
+        match response.status() {
+            200 => Ok(self),
+            status => Err(Self::status_error(status)),
+        }
+    }
+
+    fn status_error<I: Display>(status :I) -> Error {
+        let err_str = format!("Invalid response status: {}", status);
+        Error::from(err_str.as_str())
+    }
+}

 use js_sys::JsString;
 use js_sys::JsString;
 use mogwai::prelude::*;
 use mogwai::prelude::*;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::prelude::*;
-use web_sys::{Window, window, Response, Request, RequestInit, RequestMode};
+use web_sys::{Window, window, Response, Request, RequestInit, RequestMode, ReadableStream};
 use super::error::*;
 use super::error::*;
 
 
 use std::result::Result as StdResult;
 use std::result::Result as StdResult;
@@ -25,7 +25,7 @@ impl Client {
 
 
     pub async fn get(&self, url :&str) -> Result<(Response, String)> {
     pub async fn get(&self, url :&str) -> Result<(Response, String)> {
         let mut init = RequestInit::new();
         let mut init = RequestInit::new();
-        let request = REQUEST( &url
+        let request = REQUEST( url
                              , init . method("GET")
                              , init . method("GET")
                                     . mode(RequestMode::Cors) )?;
                                     . mode(RequestMode::Cors) )?;
 
 
@@ -46,7 +46,7 @@ impl Client {
 
 
     pub async fn put(&self, url :&str, data :&str) -> Result<Response> {
     pub async fn put(&self, url :&str, data :&str) -> Result<Response> {
         let mut init = RequestInit::new();
         let mut init = RequestInit::new();
-        let request = REQUEST( &url
+        let request = REQUEST( url
                              , init . method("PUT")
                              , init . method("PUT")
                                     . mode(RequestMode::Cors)
                                     . mode(RequestMode::Cors)
                                     . body(Some(&data.into())) )?;
                                     . body(Some(&data.into())) )?;
@@ -61,4 +61,25 @@ impl Client {
 
 
         Ok(response)
         Ok(response)
     }
     }
+
+    pub async fn post_stream( &self
+                            , url :&str
+                            , mime_type :&str
+                            , data :ReadableStream) -> Result<Response> {
+        let mut init = RequestInit::new();
+        let request = REQUEST( url
+                             , init . method("POST")
+                                    . mode(RequestMode::Cors)
+                                    . body(Some(&data.into())) )?;
+
+        request . headers()
+                . set("Content-Type", mime_type)?;
+
+        let response = JsFuture::from( self.window
+                                     . fetch_with_request(&request))
+                     . await?
+                     . dyn_into::<Response>()?;
+
+        Ok(response)
+    }
 }
 }

 pub(crate) mod markdown;
 pub(crate) mod markdown;
+pub(crate) mod upload;

+use mogwai::prelude::*;
+use web_sys::{HtmlInputElement, HtmlCanvasElement, CanvasRenderingContext2d};
+
+use crate::api::upload::UploadApi;
+
+use super::upload::Upload;
+
+#[derive(Clone, Debug)]
+pub(super) enum UploadLogic {
+    Add(DomEvent),
+    Remove(usize),
+    Upload,
+}
+
+pub(super) async fn upload_preview_logic( mut rx_canvas :broadcast::Receiver<Dom>
+                                        , mut rx_click  :broadcast::Receiver<DomEvent>
+                                        ,     upload    :Upload ) {
+    if let Some(dom) = rx_canvas.next().await {
+        if let Either::Left(c) = dom.inner_read() {
+            let canvas = c.to_owned().dyn_into::<HtmlCanvasElement>().unwrap();
+            let context = canvas
+                        . get_context("2d").unwrap().unwrap()
+                        . dyn_into::<CanvasRenderingContext2d>().unwrap();
+            context
+                . draw_image_with_image_bitmap_and_dw_and_dh(
+                      &upload.bitmap()
+                    , 0.0, 0.0
+                    , canvas.width() as f64, canvas.height() as f64 )
+                . unwrap();
+        }
+    }
+
+    while let Some(_) = rx_click.next().await {
+        upload.tx_logic . try_broadcast(UploadLogic::Remove(upload.id))
+                        . unwrap();
+    }
+}
+
+pub(super) async fn upload_logic( mut rx_logic :broadcast::Receiver<UploadLogic>
+                                , tx_logic     :broadcast::Sender<UploadLogic>
+                                , tx_previews: mpmc::Sender<ListPatch<ViewBuilder<Dom>>>
+                                ) {
+    let mut uploads: ListPatchModel<Upload> = ListPatchModel::new();
+    let api = UploadApi::new().await.unwrap();
+
+    mogwai::spawn(uploads.stream().for_each(move |patch| {
+        let patch = patch.map(|u| u.into());
+        let tx_previews = tx_previews.clone();
+        async move {
+            tx_previews.send(patch).await.unwrap();
+        }
+    }));
+
+    let mut next_id = 0;
+
+    while let Some(msg) = rx_logic.next().await {
+        match msg {
+            UploadLogic::Add(event) =>
+                if let Either::Left(inner) = event.clone_inner() {
+                    let filelist = inner.dyn_into::<Event>().unwrap()
+                                 . target().unwrap()
+                                 . dyn_into::<HtmlInputElement>().unwrap()
+                                 . files().unwrap();
+
+                    for index in 0..filelist.length() {
+                        let file = filelist.item(index).unwrap();
+                        let tx_logic = tx_logic.clone();
+                        uploads.list_patch_push( Upload::new(next_id, file, tx_logic)
+                                               . await);
+                        next_id += 1;
+                    }
+                },
+            UploadLogic::Remove(id) => {
+                let mut found = None;
+
+                for (upload, index) in uploads.read().await.iter().zip(0..) {
+                    if upload.id == id {
+                        found = Some(index);
+                        break;
+                    }
+                }
+
+                if let Some(index) = found {
+                    uploads.list_patch_remove(index).unwrap();
+                }
+            },
+            UploadLogic::Upload => {
+                for upload in uploads.read().await.iter() {
+                    match api.store(upload).await {
+                        Ok(_) => (),
+                        Err(e) => log::error!("{:?}", e),
+                    }
+                }
+            }
+        }
+    }
+}

+mod logic;
+pub(crate) mod upload;
+mod view;
+
+use mogwai::prelude::*;
+
+use self::{view::upload_view, logic::upload_logic};
+
+pub(crate) async fn new() -> Component<Dom> {
+    let (tx_logic, rx_logic) = broadcast::bounded(1);
+    let (tx_previews, rx_previews) = mpmc::bounded(1);
+
+    let view = upload_view(tx_logic.clone(), rx_previews);
+    let logic = upload_logic(rx_logic, tx_logic, tx_previews);
+
+    Component::from(view).with_logic(logic)
+}

+use mogwai::{prelude::*, utils::window};
+use web_sys::{File, ImageBitmap, ReadableStream};
+
+use super::{view::upload_preview_view, logic::{upload_preview_logic, UploadLogic}};
+
+#[derive(Clone, Debug)]
+pub(crate) struct Upload {
+    pub(super) id       :usize,
+               file     :File,
+               bitmap   :ImageBitmap,
+    pub(super) tx_logic :broadcast::Sender<UploadLogic>,
+}
+
+impl Upload {
+    pub(super) async fn new( id       :usize
+                           , file     :File
+                           , tx_logic :broadcast::Sender<UploadLogic>
+                           ) -> Upload {
+        let bitmap = window()
+                   . create_image_bitmap_with_blob(&file.clone().into())
+                   . unwrap();
+        let bitmap = JsFuture::from(bitmap)
+                   . await.unwrap()
+                   . dyn_into::<ImageBitmap>().unwrap();
+
+        Self { id, file, bitmap, tx_logic }
+    }
+
+    pub(crate) fn mime_type(&self) -> String {
+        self.file.type_()
+    }
+
+    pub(crate) fn data(&self) -> ReadableStream {
+        self.file.stream()
+    }
+
+    pub(super) fn bitmap(&self) -> ImageBitmap {
+        self.to_owned().bitmap
+    }
+}
+
+impl From<Upload> for Component<Dom> {
+    fn from(upload: Upload) -> Self {
+        let (tx_canvas, rx_canvas) = broadcast::bounded(1);
+        let (tx_click, rx_click) = broadcast::bounded(1);
+
+        let view = upload_preview_view( tx_canvas
+                                      , tx_click
+                                      , upload.file.name()
+                                      , upload.file.size()
+                                      , upload.file.type_()
+                                      , upload.file.last_modified() );
+        let logic = upload_preview_logic(rx_canvas, rx_click, upload);
+
+        Component::from(view).with_logic(logic)
+    }
+}
+
+impl From<Upload> for ViewBuilder<Dom> {
+    fn from(upload: Upload) -> Self {
+        let component :Component<Dom> = upload.into();
+        component.into()
+    }
+}

+use mogwai::prelude::*;
+
+use crate::component::upload::logic::UploadLogic;
+
+pub(super) fn upload_preview_view( tx_canvas :broadcast::Sender<Dom>
+                                 , tx_click  :broadcast::Sender<DomEvent>
+                                 , filename  :String
+                                 , size      :f64
+                                 , mime_type :String
+                                 , mtime     :f64
+                                 ) -> ViewBuilder<Dom> {
+    let post_build = move |dom: &mut Dom| {
+        tx_canvas.try_broadcast(dom.clone()).unwrap();
+    };
+
+    builder! {
+        <li style:display="flex"
+            on:click=tx_click.sink()>
+            <canvas width="75px"
+                    height="75px"
+                    post:build=post_build />
+            <ul>
+                <li>{format!("filename: {}", filename)}</li>
+                <li>{format!("size: {}", size)}</li>
+                <li>{format!("mime type: {}", mime_type)}</li>
+                <li>{format!("modification time: {}", mtime)}</li>
+            </ul>
+        </li>
+    }
+}
+
+pub(super) fn upload_view( tx_logic: broadcast::Sender<UploadLogic>
+                         , rx_previews: mpmc::Receiver<ListPatch<ViewBuilder<Dom>>>
+                         ) -> ViewBuilder<Dom> {
+    let select_filter = tx_logic.sink()
+                      . contra_map(|e| UploadLogic::Add(e));
+    let upload_filter = tx_logic.sink()
+                      . contra_map(|_| UploadLogic::Upload);
+
+//            <div class="spin"></div>
+    builder! {
+        <div class="upload">
+            <div>
+                <input type="file"
+                       multiple="multiple"
+                       accept="image/*"
+                       on:change=select_filter />
+                <button on:click=upload_filter>"Upload"</button>
+            </div>
+            <ul patch:children=rx_previews>
+            </ul>
+        </div>
+    }
+}

@@ -6,7 +6,7 @@ mod component;
 
 
 use std::panic;
 use std::panic;
 
 
-use crate::component::markdown;
+use crate::component::*;
 use log::Level;
 use log::Level;
 use mogwai::prelude::*;
 use mogwai::prelude::*;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::prelude::*;
@@ -16,8 +16,14 @@ pub async fn main() -> Result<(), JsValue> {
     panic::set_hook(Box::new(console_error_panic_hook::hook));
     panic::set_hook(Box::new(console_error_panic_hook::hook));
     console_log::init_with_level(Level::Trace).unwrap();
     console_log::init_with_level(Level::Trace).unwrap();
 
 
-    let comp = markdown::new().await;
+    let md = markdown::new().await;
+    let comp = upload::new().await;
 
 
-    let page = Component::from(builder! {{comp}});
+    let page = Component::from(builder! {
+        <div>
+            {comp}
+            {md}
+        </div>
+    });
     page.build()?.run()
     page.build()?.run()
 }
 }