diff --git a/frontend/css/index.css b/frontend/css/index.css index 293d6d9..bbc7816 100644 --- a/frontend/css/index.css +++ b/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; diff --git a/frontend/src/main.rs b/frontend/src/main.rs index 53ae841..e809ea5 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -254,6 +254,7 @@ pub fn Header(cx: Scope) -> View { }; 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(cx: Scope) -> View { 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(cx: Scope) -> View { 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", @@ -282,6 +286,7 @@ pub fn Header(cx: Scope) -> View { on:keyup=handle_submit_addbulk, ) button(on:click=click_addbulk) { "Add bulk ISBNs" } + } } } } @@ -345,7 +350,10 @@ pub fn BookDB(cx: Scope, bookitem: BookUIProp) -> View { 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,8 +379,11 @@ pub fn BookDB(cx: Scope, bookitem: BookUIProp) -> View { div(class="card"){ img(src=coverurl,width="100") - (format!("{:?}",book)) - button(class="delete", on:click=handle_delete){ "-" } + (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(cx: Scope<'_>) -> View { pub fn BookOL(cx: Scope, bookitem: BookUIProp) -> View { 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::(cx); let handle_add = move |_| { @@ -445,8 +459,12 @@ pub fn BookOL(cx: Scope, bookitem: BookUIProp) -> View { div(class="column"){ div(class="card"){ img(src=coverurl,width="100") - (format!("{:?}",bookdisp)) - button(class="add", on:click=handle_add){ "+" } + + + (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 = (*inp_author.get()).clone().split(",").map(str::to_string).collect::>(); @@ -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 { - view!{cx,""} } - ) + } + } + } + else { + view!{cx,""} + }) } + } @@ -584,21 +617,26 @@ async fn SelectedUI(cx: Scope<'_>) -> View { 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 { + } + } + } + } else { view!{cx,""} }) } - } }