vinod/booksman
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

user-auth store frontend css v3

Browse Source
This commit is contained in:
Vinod J M
2023-01-04 22:19:36 +05:30
parent 3ac3720a55
commit f7df920bba
1 changed files with 152 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
frontend/src/main.rs
View File

@@ -173,7 +173,7 @@ async fn add_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Er
let resp = Request::post(&url).body(serde_wasm_bindgen::to_value(&serde_json::to_string(&record).unwrap()).unwrap()).header("content-type","application/json").send().await?;
Ok(resp)
}
/*
async fn add_books_isbns(isbns: String) -> Result<reqwasm::http::Response, reqwasm::Error> {
let backend_url : &'static str = dotenv!("BACKEND_URL");
//env::var("BACKEND_URL").expect("BACKEND_URL is not set in .env file");
@@ -182,7 +182,7 @@ async fn add_books_isbns(isbns: String) -> Result<reqwasm::http::Response, reqw
println!("Adding multiple books\n");
Ok(resp)
}
*/
async fn update_book(record: BookUI) -> Result<reqwasm::http::Response, reqwasm::Error> {
let backend_url : &'static str = dotenv!("BACKEND_URL");
@@ -357,7 +357,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
on:input=toggle_editmode,
bind:checked=editchecked
)
div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[5px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){}
div(class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[10px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"){}
//p(class="ml-3 text-sm font-medium"){"EDIT"}
}
}
@@ -400,14 +400,18 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
} }
else {
view!{cx,
div(class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"){(format!(" {} ", *app_state.selectedusername.get()))}
div(class="bg-gray-300 text-gray-800 font-bold rounded inline-flex items-center px-2"){(format!(" Test {} ", *app_state.selectedusername.get()))}
}
})
}
div(class="w-2/5 flex mb-2"){
div(class="w-4/5 flex mb-2"){
(if *app_state.editmode.get() == true {
view!{ cx,
div(class="w-1/2 flex"){
(if *app_state.userid.get() != 0 {
view!{ cx,
button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
@@ -421,14 +425,9 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
}} else {
view!{cx, ""}
})
}
(if *app_state.editmode.get() == true {
view!{ cx,
div(class="w-2/5 flex mb-2"){
button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") }
div(class="w-1/2 flex"){
button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-circle-plus") span(class="inline-block"){"Add" }}
//button(on:click=click_addbook) { "+ Add New" }
//input(ref=input_ref3,
// class="new-todo",
@@ -443,20 +442,28 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
bind:value=value,
on:keyup=handle_submit,
)}
/*
input(ref=input_ref,
class="new-todo",
placeholder="Search internet (openlibrary)",
bind:value=value,
on:keyup=handle_submit,
)*/
}
}} else {
view!{cx,
(if *app_state.userid.get() != 0 {
view!{ cx,
button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
div(class="min-w-40 inline-flex"){
input(ref=input_ref2,
class = "inline-flex h-full m-0 p-1 w-full",
placeholder="🔍 Search",
bind:value=value2,
on:keyup=handle_submit_seachall,
)}
}} else {
view!{cx, ""}
})
}
})
}
div(){
div(class="grow flex mb-2 gap-x-1 ml-auto") {
PageBar{}
}
}
@@ -651,9 +658,10 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
let docs = create_memo(cx, || app_state.books.get().iter().cloned().collect::<Vec<_>>());
view! {cx,
p {
(if *app_state.openlibrary.get() == false && *app_state.editmode.get() == false {
view!{ cx,
div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
ul {
Keyed(
iterable=docs,
@@ -662,9 +670,11 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
},
key =|x| x.id )
}
}
}
} else if *app_state.openlibrary.get() == false && *app_state.editmode.get() == true {
view!{ cx,
div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
ul {
Keyed(
iterable=docs,
@@ -673,6 +683,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
},
key =|x| x.id )
}
}
}
} else {
view!{cx, ""}
@@ -685,7 +696,7 @@ async fn ListDB<G: Html>(cx: Scope<'_>) -> View<G> {
}} else {
view!{ cx, ""}
})
}
}
}
@@ -743,7 +754,7 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
app_state.displayingbook.set(bookdisplay_div.clone());
};
view! { cx,
div(class="column"){
div(class="column px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
div(class="card"){
div(class="card-buttons"){
@@ -799,8 +810,8 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
app_state.displayingbook.set(bookdisplay_div.clone());
};
view! { cx,
div(class="column"){
div(class="card"){
div(class="px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded"){
div(class="card-buttons"){
@@ -825,7 +836,7 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
}
}
}
}
@@ -851,7 +862,7 @@ async fn ListOL<G: Html>(cx: Scope<'_>) -> View<G> {
p {
(if *app_state.openlibrary.get() == true {
view!{ cx,
div(class="row") {
div(class="grid space-x-1 grid-cols-4 md:grid-cols-4") {
Keyed(
iterable=docs,
view=move |cx, x| view! { cx,
@@ -893,7 +904,7 @@ pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
};
view! { cx,
div(class="column"){
div(class="card-openlibrary",on:click=handle_add_div){
div(class="card-openlibrary px-4 py-4 bg-gray-200 border-2 border-gray-400 rounded",on:click=handle_add_div){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_add){ i(class="fa-solid fa-plus") }
div(class="card-main"){
@@ -1073,80 +1084,85 @@ info!("Adding book");
(if *app_state.adding.get() == true || *app_state.updating.get() == true {
view!{ cx,
div(class="modal-content"){
div(class="input-buttons"){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "Add/Update book to DB" }
div(class="input-buttons flex gap-x-3"){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "Add/Update" }
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_cancel){ "Cancel" }
}
p {
div(class="input-field"){
div(class="flex flex-wrap w-full"){
div(class="grid grid-cols-1 md:grid-cols-3 lg:grid=cols-4 gap-x-4"){
div(class="input-field grid grid-row-2"){
label{"Title"}
textarea(bind:value=inp_title, placeholder="Title" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"OpenLib Key"}
textarea(bind:value=inp_olkey, placeholder="OpenLibrary Key" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Editions"}
textarea(bind:value=inp_editioncount, placeholder="Number of editions" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Publish year"}
textarea(bind:value=inp_publishyear, placeholder="First publish year" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Pages"}
textarea(bind:value=inp_medianpage, placeholder="Page count" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"GoodreadID"}
textarea(bind:value=inp_goodread, placeholder="GoodRead ID" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Description"}
textarea(bind:value=inp_desc, placeholder="Description" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Cover"}
textarea(bind:value=inp_cover, placeholder="Cover URL" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Location"}
textarea(bind:value=inp_location, placeholder="Location" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Rating"}
textarea(bind:value=inp_rating, placeholder="Rating (/10)" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Comments"}
textarea(bind:value=inp_comments, placeholder="Comments" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Authors"}
textarea(bind:value=inp_author, placeholder="Authors")
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Persons"}
textarea(bind:value=inp_person, placeholder="Persons" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Places"}
textarea(bind:value=inp_place, placeholder="Places" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Subjects"}
textarea(bind:value=inp_subject, placeholder="Subjects" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"Times"}
textarea(bind:value=inp_time, placeholder="Times" )
}
div(class="input-field"){
div(class="input-field grid grid-row-2"){
label{"ISBNs"}
textarea(bind:value=inp_isbn, placeholder="ISBNs" )
}
}
}
}
}
@@ -1262,7 +1278,7 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
div(class="modal-content"){
div(class="more-info"){
div(class="more-info-buttons"){
div(class="more-info-buttons gap-x-3"){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_close){ i(class="fa-solid fa-xmark") }
(if *app_state.editmode.get() == true {
@@ -1272,43 +1288,67 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
view!{cx, ""}
})
}
img(src=coverurl.get(),width="200")
label{"Title: "}
div(class="flex flex-wrap w-full"){
div(class="flex w-4/5"){
div(class="grid grid-cols-4 md:grid-cols-4 gap-x-3"){
label(class="font-bold col-start-1"){"Title: "}
p(class="col-span-3"){
(format!("{}",dtitle.get()))
br{}
label{"Authors: "}
}
label(class="font-bold col-start-1"){"Authors: "}
p(class="col-span-3"){
(format!("{}",dauthors.get()))
br{}
label{"Location: "}
}
label(class="font-bold col-start-1"){"Location: "}
p(class="col-span-3"){
(format!("{}",dlocation.get()))
br{}
label{"Editions: "}
}
label(class="font-bold col-start-1"){"Editions: "}
p(class="col-span-3"){
(format!("{}",deditions.get()))
br{}
label{"Publish Year: "}
}
label(class="font-bold col-start-1"){"Publish Year: "}
p(class="col-span-3"){
(format!("{}",dpubyr.get()))
br{}
label{"Page Count: "}
}
label(class="font-bold col-start-1"){"Page Count: "}
p(class="col-span-3"){
(format!("{}",dpages.get()))
br{}
label{"Openlibrary Link: "}
}
label(class="font-bold col-start-1"){"Openlibrary Link: "}
p(class="col-span-3 text-blue-800"){
a(href=dollink.get().clone()){(format!("{}",dollink.get()))}
br{}
label{"GoodReads Link: "}
}
label(class="font-bold col-start-1"){"GoodReads Link: "}
p(class="col-span-3 text-blue-800"){
a(href=dgoodread.get().clone()){(format!("{}",dgoodread.get()))}
br{}
label{"ISBN: "}
}
label(class="font-bold col-start-1"){"ISBN: "}
p(class="col-span-3"){
(format!("{}",disbn.get()))
br{}
label{"Description: "}
(format!("{}",ddesc.get()))
br{}
label{"Comments: "}
}
label(class="font-bold col-start-1"){"Comments: "}
p(class="col-span-3"){
(format!("{}",dcomments.get()))
br{}
label{"Tags: "}
}
}
}
div(class="flex w-1/5"){
img(class="float-right m-1",src=coverurl.get(),width="200")
}
div(class="grid grid-cols-5 md:grid-cols-5 gap-x-3"){
label(class="font-bold col-start-1"){"Description: "}
p(class="col-span-4"){
(format!("{}",ddesc.get()))
}
label(class="font-bold col-start-1"){"Tags: "}
p(class="col-span-4 italic"){
(format!("{}",dtags.get()))
br{}
}
}
}
}
}
}}
@@ -1361,29 +1401,32 @@ async fn PageBar<G: Html>(cx: Scope<'_>) -> View<G> {
}
};
view! {cx,
div(class="w-1/10 flex mb-2 gap-x-1") {
(if (*app_state.openlibrary.get() == false || *app_state.internalsearch.get() == true) && !app_state.books.get().is_empty() {
view!{ cx,
div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center"){
div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center w-max"){
i(class="fa-solid fa-file") span(class="hidden md:block-inline"){p{"#"}}
input(type="number", ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input [appearance:textfield] mx-1 my-0 p-1 min-w-30 w-30")
label(class="block-inline"){(format!(" / {}",*app_state.maxpage.get()))}
input(type="number", ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input [appearance:textfield] mx-1 my-0 px-1 min-w-30 w-30 max-w-40", size="1")
div(class="flex-inline"){(format!(" / {}",*app_state.maxpage.get()))}
}
(if *app_state.pagenum.get()>1 {
view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_sub){ "-" }}
view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold px-4 rounded inline-flex items-center", on:click=handle_sub){ "-" }}
} else {
view!{cx,""}
})
(if *app_state.pagenum.get()<*app_state.maxpage.get() {
view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center", on:click=handle_add){ "+" }}
view!{cx, button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold px-4 rounded inline-flex items-center", on:click=handle_add){ "+" }}
} else {
view!{cx,""}
})
}
}else {
view!{cx,""}
})
view!{cx,
div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center w-max"){
("Zero Pages")
}
}
})
}
}
@@ -1521,24 +1564,28 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
};
view! {cx,
div(class="modal-box", ref=node_ref, on:click=handle_click_close, closable="true"){
div(class="modal-box mt-100", ref=node_ref, on:click=handle_click_close, closable="true"){
(if *app_state.userscreen.get() == true {
view!{cx,
div(class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"){
div(class="mt-100 bg-white shadow-md rounded px-8 pt-8 pb-8 m-4"){
label{"Username : "}
input(ref=input_refU,bind:value=userval, placeholder="Username", class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400")
br{}
label{"Password : "}
input(ref=input_refP,bind:value=passval,type="password", placeholder="*****",
on:keyup=handle_submit_login, class="text-sm sm:text-base placeholder-gray-500 pl-10 pr-4 rounded-lg border border-gray-400 w-full py-2 focus:outline-none focus:border-blue-400")
br{}
br{}br{}
div(class="w-full flex gap-1"){
button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center border-b-4 border-blue-700 hover:border-blue-500 w-full",on:click=handle_login){ "LOGIN" }
br{}
button( class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 inline-flex items-center border-b-4 border-blue-700 hover:border-blue-500 w-full",on:click=handle_register){ "REGISTER" }
}
br{}
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 border-black-500 rounded inline-flex items-center", on:click=handle_close){ i(class="fa-solid fa-xmark") }
br{}
div(class="w-full flex flex-col gap-1 items-center"){
button( class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-1/3 gap-x-1", on:click=handle_close){ i(class="fa-solid fa-xmark") span(class="inline-flex"){"CLOSE"} }
}
(if *app_state.warningmsg.get() != "".to_string() {
view!{cx, (*app_state.warningmsg.get())}
} else {