v0.13-dockerP4

frontend/css/index.css

@@ -6,6 +6,34 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+.modal-box {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+}
+
+/* Float three header columns side by side */
+.header-column {
+  float: left;
+  width: 30%;
+  padding: 0 10px;
+}
+
 /* Float four columns side by side */
 .column {
   float: left;

frontend/src/main.rs

@@ -254,6 +254,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
   };
     view! { cx,
         header(class="header") {
+        div(class="header-column"){
             h1 { "Search OpenLibrary" }
             input(ref=input_ref,
                 class="new-todo",
@@ -261,10 +262,12 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 bind:value=value,
                 on:keyup=handle_submit,
             )
-            button(on:click=click_searchOL) { "Search internal" }
+            button(on:click=click_searchOL) { "Search OpenLibrary" }
-
+        }
                  button(on:click=click_listall) { "List All DB" }
 
+        div(class="header-column"){
+
             input(ref=input_ref2,
                 class="new-todo",
                 placeholder="Search internal DB",
@@ -272,9 +275,10 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 on:keyup=handle_submit_seachall,
             )
                  button(on:click=click_searchall) { "Search internal" }
+        }
+        div(class="header-column"){
+
                  button(on:click=click_addbook) { "+ Add New" }
-
-
             input(ref=input_ref3,
                 class="new-todo",
                 placeholder="Add bulk ISBNs",
@@ -284,6 +288,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                  button(on:click=click_addbulk) { "Add bulk ISBNs" }
                  }
         }
+    }
 }
 
 #[component]
@@ -345,7 +350,10 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     let bookdelete = bookitem.bookitem.clone();
     let bookupdate = bookitem.bookitem.clone();
     let bookdisplay = bookitem.bookitem.clone();
-    let book = bookitem.bookitem.clone();
+    let loctitle = bookitem.bookitem.clone().title.clone();
+    let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap().join(", ");
+    let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
+
 
     let coverurl = bookdisplay.clone().cover.clone().unwrap();
     let handle_delete = move |_| {
@@ -371,7 +379,10 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
                 div(class="card"){
     img(src=coverurl,width="100")
   
-    (format!("{:?}",book))
+    (format!("{:?}",loctitle))
+    (format!("{:?}",locauthors))
+    (format!("{:?}",locdesc))
+
     button(class="delete", on:click=handle_delete){ "-" }
         button(class="update", on:click=handle_update){ "=" }
         button(class="info", on:click=handle_display){ "+" }
@@ -434,6 +445,9 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
 pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
     let book = bookitem.bookitem.clone();
     let bookdisp=book.clone();
+    let loctitle = bookitem.bookitem.clone().title.clone();
+    let locauthors = bookitem.bookitem.clone().author_name.clone().unwrap().join(", ");
+    let locdesc = bookitem.bookitem.clone().description.unwrap_or("".to_string());
     let coverurl = bookdisp.cover.clone().unwrap();
     let app_state = use_context::<AppState>(cx);
     let handle_add = move |_| {
@@ -445,7 +459,11 @@ pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
         div(class="column"){
                 div(class="card"){
     img(src=coverurl,width="100")
-                    (format!("{:?}",bookdisp))
+
+
+    (format!("{:?}",loctitle))
+    (format!("{:?}",locauthors))
+    (format!("{:?}",locdesc))
     button(class="add", on:click=handle_add){ "+" }
     }
         }
@@ -494,6 +512,11 @@ inp_author.set((*app_state.addingbook.get()).clone().author_name.unwrap_or(vec![
  inp_time.set((*app_state.addingbook.get()).clone().time.unwrap_or(vec!["".to_string()]).join(", "));
  inp_isbn.set((*app_state.addingbook.get()).clone().isbn.unwrap_or(vec!["".to_string()]).join(", "));
 });
+   let handle_cancel = |_| {
+        app_state.updating.set(false);
+        app_state.adding.set(false);
+   };
+
    let handle_add = |_| {
 info!("Adding book");
        let authors: Vec<String> = (*inp_author.get()).clone().split(",").map(str::to_string).collect::<Vec<String>>();
@@ -543,9 +566,13 @@ info!("Adding book");
     };
  
  view! {cx,
-        p {
+
 (if *app_state.adding.get() == true || *app_state.updating.get() == true {
                 view!{ cx,
+         div(class="modal-box"){
+        div(class="modal-content"){
+
+        p {
                         input(bind:value=inp_title, placeholder="Title" )
                         input(bind:value=inp_olkey, placeholder="OpenLibrary Key"  )
                         input(bind:value=inp_editioncount, placeholder="Number of editions" )
@@ -563,14 +590,20 @@ info!("Adding book");
                         input(bind:value=inp_subject, placeholder="Subjects" )
                         input(bind:value=inp_time, placeholder="Times" )
                         input(bind:value=inp_isbn, placeholder="ISBNs" )
-         button(class="add", on:click=handle_add){ "Add book to DB" }
+         button(class="add", on:click=handle_add){ "Add/Update book to DB" }
+                  button(class="cancel", on:click=handle_cancel){ "Cancel" }
+
         }
-            } else {
+            }
+
+        }
+        }
+        }
+         else {
                 view!{cx,""}
+            })
     }
-            )
+
-        }
-    }
 }
 
 
@@ -584,21 +617,26 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
         app_state.displaying.set(false);
     };
     view! {cx,
-       p{
+
        (if *app_state.displaying.get() == true  {
                 view!{ cx,
 
+         div(class="modal-box"){
+        div(class="modal-content"){
+       p{
         div(class="select-book"){
-                img(src=coverurl.get(),width="100")
+                img(src=coverurl.get(),width="200")
                 (format!("{:?}",displ_book.get()))
                 button(class="close", on:click=handle_close){ "CLOSE" }
                 }
                 }
+        }
+    }
+    }
     } else {
                 view!{cx,""}
             })
     }
-    }
 }