User Authentication and Other fixes #1
@@ -36,200 +36,3 @@ body {
|
|||||||
overflow: auto; /* Enable scroll if needed */
|
overflow: auto; /* Enable scroll if needed */
|
||||||
background-color: #f1f1f1; /* Fallback color */
|
background-color: #f1f1f1; /* Fallback color */
|
||||||
}
|
}
|
||||||
/* The container <div> - needed to position the dropdown content */
|
|
||||||
.dropdown {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dropdown Content (Hidden by Default) */
|
|
||||||
.dropdown-content {
|
|
||||||
/* margin-top: 80px; Add a top margin to avoid content overlay */
|
|
||||||
position: absolute;
|
|
||||||
min-width: 160px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Float three header columns side by side */
|
|
||||||
.header {
|
|
||||||
position: fixed; /* Stay in place */
|
|
||||||
/* overflow: hidden;*/
|
|
||||||
z-index: 1; /* Sit on top */
|
|
||||||
width: 100%;
|
|
||||||
top: 0; /* Position the navbar at the top of the page */
|
|
||||||
padding: 0 10px;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
margin-top: 50px; /* Add a top margin to avoid content overlay */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Float three header columns side by side */
|
|
||||||
.header-button {
|
|
||||||
float: left;
|
|
||||||
width: 10%;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Float three header columns side by side */
|
|
||||||
.header-column {
|
|
||||||
float: left;
|
|
||||||
width: 36%;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
/* Float three header columns side by side */
|
|
||||||
.header-page-column {
|
|
||||||
float: right;
|
|
||||||
margin-top: 0px;
|
|
||||||
width: 15%;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Float four columns side by side */
|
|
||||||
.column {
|
|
||||||
float: left;
|
|
||||||
width: 25%;
|
|
||||||
padding: 0 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove extra left and right margins, due to padding in columns */
|
|
||||||
.row {margin: 0 -5px;}
|
|
||||||
|
|
||||||
/* Clear floats after the columns */
|
|
||||||
.row:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style the counter cards */
|
|
||||||
.card {
|
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
|
|
||||||
padding: 16px;
|
|
||||||
text-align: left;
|
|
||||||
height: 400px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style the counter cards */
|
|
||||||
.card-openlibrary {
|
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
|
|
||||||
padding: 16px;
|
|
||||||
text-align: left;
|
|
||||||
height: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card img {
|
|
||||||
float: right;
|
|
||||||
width: 100px;
|
|
||||||
padding: 0 20px 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-openlibrary img {
|
|
||||||
float: right;
|
|
||||||
width: 100px;
|
|
||||||
padding: 0 20px 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
padding: 16px;
|
|
||||||
text-align: left;
|
|
||||||
width: 60%;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-authors {
|
|
||||||
padding: 16px;
|
|
||||||
text-align: left;
|
|
||||||
width: 60%;
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-desc {
|
|
||||||
padding: 2px;
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.input-field {
|
|
||||||
padding: 4px;
|
|
||||||
float: left;
|
|
||||||
text-align: left;
|
|
||||||
width: 50%;
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
.input-field label {
|
|
||||||
display: block;
|
|
||||||
vertical-align: middle;
|
|
||||||
min-width: 20%;
|
|
||||||
max-width: 20%;
|
|
||||||
width: 20%;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
.input-field textarea {
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
.input-buttons {
|
|
||||||
padding: 20px;
|
|
||||||
float: left;
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-info {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
.more-info img {
|
|
||||||
float: right;
|
|
||||||
width: 200px;
|
|
||||||
padding: 0 20px 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-info label {
|
|
||||||
display:inline-block;
|
|
||||||
text-align: left;
|
|
||||||
width: 20%;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-info-buttons {
|
|
||||||
padding: 20px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-input {
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive columns - one column layout (vertical) on small screens */
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.column {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 800px) {
|
|
||||||
.main {
|
|
||||||
margin-top: 80px; /* Add a top margin to avoid content overlay */
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
37
frontend/package-lock.json
generated
37
frontend/package-lock.json
generated
@@ -5,6 +5,7 @@
|
|||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
"tailwindcss": "^3.2.4"
|
"tailwindcss": "^3.2.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -43,6 +44,18 @@
|
|||||||
"node": ">= 8"
|
"node": ">= 8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tailwindcss/forms": {
|
||||||
|
"version": "0.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
|
||||||
|
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"mini-svg-data-uri": "^1.2.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/acorn": {
|
"node_modules/acorn": {
|
||||||
"version": "7.4.1",
|
"version": "7.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||||
@@ -397,6 +410,15 @@
|
|||||||
"node": ">=8.6"
|
"node": ">=8.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/mini-svg-data-uri": {
|
||||||
|
"version": "1.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||||
|
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"mini-svg-data-uri": "cli.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/minimist": {
|
"node_modules/minimist": {
|
||||||
"version": "1.2.7",
|
"version": "1.2.7",
|
||||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
|
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
|
||||||
@@ -825,6 +847,15 @@
|
|||||||
"fastq": "^1.6.0"
|
"fastq": "^1.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@tailwindcss/forms": {
|
||||||
|
"version": "0.5.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
|
||||||
|
"integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"mini-svg-data-uri": "^1.2.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"acorn": {
|
"acorn": {
|
||||||
"version": "7.4.1",
|
"version": "7.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
|
||||||
@@ -1087,6 +1118,12 @@
|
|||||||
"picomatch": "^2.3.1"
|
"picomatch": "^2.3.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"mini-svg-data-uri": {
|
||||||
|
"version": "1.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
|
||||||
|
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "1.2.7",
|
"version": "1.2.7",
|
||||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
|
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
{
|
{
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
"tailwindcss": "^3.2.4"
|
"tailwindcss": "^3.2.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -221,8 +221,8 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
|||||||
let value2 = create_signal(cx, String::new());
|
let value2 = create_signal(cx, String::new());
|
||||||
let input_ref2 = create_node_ref(cx);
|
let input_ref2 = create_node_ref(cx);
|
||||||
|
|
||||||
let value3 = create_signal(cx, String::new());
|
//let value3 = create_signal(cx, String::new());
|
||||||
let input_ref3 = create_node_ref(cx);
|
//let input_ref3 = create_node_ref(cx);
|
||||||
|
|
||||||
let completed = create_selector(cx, || *app_state.editmode.get());
|
let completed = create_selector(cx, || *app_state.editmode.get());
|
||||||
let editchecked = create_signal(cx, false);
|
let editchecked = create_signal(cx, false);
|
||||||
@@ -284,7 +284,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
let handle_submit_addbulk = |event: Event| {
|
/*let handle_submit_addbulk = |event: Event| {
|
||||||
let event: KeyboardEvent = event.unchecked_into();
|
let event: KeyboardEvent = event.unchecked_into();
|
||||||
|
|
||||||
if event.key() == "Enter" {
|
if event.key() == "Enter" {
|
||||||
@@ -298,7 +298,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};*/
|
||||||
|
|
||||||
|
|
||||||
let click_logout = |_| {
|
let click_logout = |_| {
|
||||||
@@ -340,93 +340,123 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
|
|||||||
|
|
||||||
|
|
||||||
view! { cx,
|
view! { cx,
|
||||||
header(class="header") {
|
header(class="sticky top-0 z-50 flex bg-slate-400 gap-x-4") {
|
||||||
div(class="header-button"){
|
div(class="w-1/10 flex mb-2"){
|
||||||
(if *app_state.loggedin.get() == false {
|
(if *app_state.loggedin.get() == false {
|
||||||
view!{ cx,
|
view!{ cx,
|
||||||
button(on:click=click_userscreen) { i(class="fa-solid fa-user") "Register / Login" }
|
button(on:click=click_userscreen, class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-full") { i(class="fa-solid fa-user") }
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
view!{cx,
|
view!{cx,
|
||||||
button(on:click=click_logout) { "Log Out" }
|
div(class="flex gap-x-1"){
|
||||||
|
button(on:click=click_logout, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-1/2") { i(class="fa-solid fa-right-from-bracket") }
|
||||||
|
label(class="inline-flex relative items-center cursor-pointer w-1/2"){
|
||||||
input(
|
input(
|
||||||
class="toggle",
|
class="sr-only peer",
|
||||||
type="checkbox",
|
type="checkbox",
|
||||||
on:input=toggle_editmode,
|
on:input=toggle_editmode,
|
||||||
bind:checked=editchecked
|
bind:checked=editchecked
|
||||||
)("EDIT")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
div(class="header-column"){
|
|
||||||
|
|
||||||
|
|
||||||
(if *app_state.userid.get() != 0 {
|
|
||||||
view!{ cx,
|
|
||||||
(format!(" {} ", *app_state.selectedusername.get()))
|
|
||||||
button(on:click=click_listall) { "All books" }
|
|
||||||
input(ref=input_ref2,
|
|
||||||
class="new-todo",
|
|
||||||
placeholder="Search collection",
|
|
||||||
bind:value=value2,
|
|
||||||
on:keyup=handle_submit_seachall,
|
|
||||||
)
|
)
|
||||||
}} else {
|
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"){}
|
||||||
view!{cx, "No Collection Selected"}
|
//p(class="ml-3 text-sm font-medium"){"EDIT"}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
br{}
|
}
|
||||||
|
|
||||||
|
div(class="w-1/10 flex mb-2"){
|
||||||
(if *app_state.editmode.get() == false {
|
(if *app_state.editmode.get() == false {
|
||||||
view!{ cx,
|
view!{ cx,
|
||||||
div(class="dropdown"){
|
// button(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center ", on:click=dropdown_userselect) {
|
||||||
|
div(class="flex"){
|
||||||
|
select(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold rounded inline-flex items-center w-max", on:click=dropdown_userselect) {
|
||||||
|
option(disabled=true, selected=true, hidden=true, value="", class="w-max"){("?")}
|
||||||
|
|
||||||
(if *app_state.dropdownselect.get() == true {
|
/* (if *app_state.userid.get() == 0 {
|
||||||
view!{ cx,
|
|
||||||
div(class="dropdown-content") {
|
view!{ cx, ("SELECT")}
|
||||||
|
} else {
|
||||||
|
view!{cx, (*app_state.selectedusername.get())}
|
||||||
|
}
|
||||||
|
)*/
|
||||||
|
//}
|
||||||
|
// (if *app_state.dropdownselect.get() == true {
|
||||||
|
//view!{cx,
|
||||||
Keyed(
|
Keyed(
|
||||||
iterable=users,
|
iterable=users,
|
||||||
view=move |cx, x| view! { cx,
|
view=move |cx, x| view! { cx,
|
||||||
DropDownUser(value=x)
|
DropDownUser(value=x)
|
||||||
},
|
},
|
||||||
key =|x| x.clone() )
|
key =|x| x.clone() )
|
||||||
|
//}
|
||||||
|
//} else {
|
||||||
|
// view!{cx, ""}
|
||||||
|
//})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
view!{cx, ""}
|
|
||||||
|
} }
|
||||||
|
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()))}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
button(on:click=dropdown_userselect) { "Choose Collection" }
|
}
|
||||||
}
|
|
||||||
|
div(class="w-2/5 flex mb-2"){
|
||||||
|
|
||||||
|
|
||||||
|
(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 {
|
}} else {
|
||||||
view!{cx, ""}
|
view!{cx, ""}
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
(if *app_state.editmode.get() == true {
|
(if *app_state.editmode.get() == true {
|
||||||
view!{ cx,
|
view!{ cx,
|
||||||
|
div(class="w-2/5 flex mb-2"){
|
||||||
button(on:click=click_addbook) { "+ Add New" }
|
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") }
|
||||||
input(ref=input_ref3,
|
//button(on:click=click_addbook) { "+ Add New" }
|
||||||
class="new-todo",
|
//input(ref=input_ref3,
|
||||||
placeholder="Add bulk ISBNs",
|
// class="new-todo",
|
||||||
bind:value=value3,
|
// placeholder="Add bulk ISBNs",
|
||||||
on:keyup=handle_submit_addbulk,
|
// bind:value=value3,
|
||||||
)
|
// on:keyup=handle_submit_addbulk,
|
||||||
br{}
|
//)
|
||||||
div(class="header-column"){
|
div(class="min-w-40 inline-flex"){
|
||||||
|
input(ref=input_ref,
|
||||||
|
class = "inline-flex h-full m-0 p-1 w-full",
|
||||||
|
placeholder="🔍 Internet",
|
||||||
|
bind:value=value,
|
||||||
|
on:keyup=handle_submit,
|
||||||
|
)}
|
||||||
|
/*
|
||||||
input(ref=input_ref,
|
input(ref=input_ref,
|
||||||
class="new-todo",
|
class="new-todo",
|
||||||
placeholder="Search internet (openlibrary)",
|
placeholder="Search internet (openlibrary)",
|
||||||
bind:value=value,
|
bind:value=value,
|
||||||
on:keyup=handle_submit,
|
on:keyup=handle_submit,
|
||||||
)
|
)*/
|
||||||
|
|
||||||
}
|
}
|
||||||
}} else {
|
}} else {
|
||||||
view!{cx, ""}
|
view!{cx, ""}
|
||||||
})
|
})
|
||||||
|
|
||||||
div(class="header-page-column"){
|
div(){
|
||||||
PageBar{}
|
PageBar{}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -446,7 +476,8 @@ pub fn DropDownUser<G: Html>(cx: Scope, value: StringProp) -> View<G> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
view! { cx,
|
view! { cx,
|
||||||
button(class="dropdown-item", on:click=handle_select_user){ (buttontext) }br{}
|
//div( class="py-1", role="none") {}
|
||||||
|
option(on:click=handle_select_user,class="w-max"){ (format!("{}",buttontext)) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -716,10 +747,9 @@ pub fn BookDB<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
|
|||||||
div(class="card"){
|
div(class="card"){
|
||||||
|
|
||||||
div(class="card-buttons"){
|
div(class="card-buttons"){
|
||||||
|
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_display){ i(class="fa-solid fa-circle-info") }
|
||||||
button(class="delete", on:click=handle_delete){ "DEL-" }
|
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_update){ i(class="fa-solid fa-pen-to-square") }
|
||||||
button(class="update", on:click=handle_update){ "EDIT=" }
|
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_delete){ i(class="fa-solid fa-trash") }
|
||||||
button(class="info", on:click=handle_display){ "INFO+" }
|
|
||||||
}
|
}
|
||||||
div(class="card-main",on:click=handle_display_div){
|
div(class="card-main",on:click=handle_display_div){
|
||||||
img(src=coverurl,width="100")
|
img(src=coverurl,width="100")
|
||||||
@@ -774,7 +804,8 @@ pub fn BookDB_View<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
|
|||||||
|
|
||||||
div(class="card-buttons"){
|
div(class="card-buttons"){
|
||||||
|
|
||||||
button(class="info", on:click=handle_display){ "INFO+" }
|
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_display){ i(class="fa-solid fa-circle-info") }
|
||||||
|
|
||||||
}
|
}
|
||||||
div(class="card-main", on:click=handle_display_div){
|
div(class="card-main", on:click=handle_display_div){
|
||||||
img(src=coverurl,width="100")
|
img(src=coverurl,width="100")
|
||||||
@@ -863,7 +894,8 @@ pub fn BookOL<G: Html>(cx: Scope, bookitem: BookUIProp) -> View<G> {
|
|||||||
view! { cx,
|
view! { cx,
|
||||||
div(class="column"){
|
div(class="column"){
|
||||||
div(class="card-openlibrary",on:click=handle_add_div){
|
div(class="card-openlibrary",on:click=handle_add_div){
|
||||||
button(class="add", on:click=handle_add){ "ADD+" }
|
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"){
|
div(class="card-main"){
|
||||||
img(src=coverurl,width="100")
|
img(src=coverurl,width="100")
|
||||||
|
|
||||||
@@ -1042,8 +1074,8 @@ info!("Adding book");
|
|||||||
view!{ cx,
|
view!{ cx,
|
||||||
div(class="modal-content"){
|
div(class="modal-content"){
|
||||||
div(class="input-buttons"){
|
div(class="input-buttons"){
|
||||||
button(class="add", on:click=handle_add){ "Add/Update book to DB" }
|
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" }
|
||||||
button(class="cancel", on:click=handle_cancel){ "Cancel" }
|
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 {
|
p {
|
||||||
div(class="input-field"){
|
div(class="input-field"){
|
||||||
@@ -1231,9 +1263,11 @@ async fn SelectedUI<G: Html>(cx: Scope<'_>) -> View<G> {
|
|||||||
|
|
||||||
div(class="more-info"){
|
div(class="more-info"){
|
||||||
div(class="more-info-buttons"){
|
div(class="more-info-buttons"){
|
||||||
button(class="close", on:click=handle_close){ "CLOSE" }
|
|
||||||
|
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 {
|
(if *app_state.editmode.get() == true {
|
||||||
view!{ cx,button(class="close", on:click=handle_edit){ "EDIT" }}
|
view!{ cx,
|
||||||
|
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_edit){ i(class="fa-solid fa-pen-to-square") }}
|
||||||
} else {
|
} else {
|
||||||
view!{cx, ""}
|
view!{cx, ""}
|
||||||
})
|
})
|
||||||
@@ -1327,19 +1361,21 @@ async fn PageBar<G: Html>(cx: Scope<'_>) -> View<G> {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
view! {cx,
|
view! {cx,
|
||||||
div {
|
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() {
|
(if (*app_state.openlibrary.get() == false || *app_state.internalsearch.get() == true) && !app_state.books.get().is_empty() {
|
||||||
view!{ cx,
|
view!{ cx,
|
||||||
label{"PAGE "}
|
div(class="bg-gray-300 text-gray-800 font-bold px-1 rounded inline-flex items-center"){
|
||||||
input(ref=input_ref,bind:value=currpg,on:keyup=handle_submit,class="page-input")
|
i(class="fa-solid fa-file") span(class="hidden md:block-inline"){p{"#"}}
|
||||||
label{(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 p-1 min-w-30 w-30")
|
||||||
|
label(class="block-inline"){(format!(" / {}",*app_state.maxpage.get()))}
|
||||||
|
}
|
||||||
(if *app_state.pagenum.get()>1 {
|
(if *app_state.pagenum.get()>1 {
|
||||||
view!{cx, button(class="page", on:click=handle_sub){ "-" }}
|
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){ "-" }}
|
||||||
} else {
|
} else {
|
||||||
view!{cx,""}
|
view!{cx,""}
|
||||||
})
|
})
|
||||||
(if *app_state.pagenum.get()<*app_state.maxpage.get() {
|
(if *app_state.pagenum.get()<*app_state.maxpage.get() {
|
||||||
view!{cx, button(class="page", on:click=handle_add){ "+" }}
|
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){ "+" }}
|
||||||
} else {
|
} else {
|
||||||
view!{cx,""}
|
view!{cx,""}
|
||||||
})
|
})
|
||||||
@@ -1489,17 +1525,19 @@ async fn LoginScreenUI<G: Html>(cx: Scope<'_>) -> View<G> {
|
|||||||
|
|
||||||
(if *app_state.userscreen.get() == true {
|
(if *app_state.userscreen.get() == true {
|
||||||
view!{cx,
|
view!{cx,
|
||||||
div(class="modal-content"){
|
div(class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"){
|
||||||
label{"User name : "}
|
label{"Username : "}
|
||||||
input(ref=input_refU,bind:value=userval)
|
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{}
|
br{}
|
||||||
label{"Password : "}
|
label{"Password : "}
|
||||||
input(ref=input_refP,bind:value=passval,type="password",
|
input(ref=input_refP,bind:value=passval,type="password", placeholder="*****",
|
||||||
on:keyup=handle_submit_login)
|
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{}
|
||||||
button(on:click=handle_login){ "LOGIN" }
|
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" }
|
||||||
button(on:click=handle_register){ "REGISTER" }
|
br{}
|
||||||
button(class="close", on:click=handle_close){ "CLOSE" }
|
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{}
|
br{}
|
||||||
(if *app_state.warningmsg.get() != "".to_string() {
|
(if *app_state.warningmsg.get() != "".to_string() {
|
||||||
view!{cx, (*app_state.warningmsg.get())}
|
view!{cx, (*app_state.warningmsg.get())}
|
||||||
@@ -1545,7 +1583,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
|
|||||||
loggedusername: create_rc_signal(String::new()),
|
loggedusername: create_rc_signal(String::new()),
|
||||||
useridloggedin: create_rc_signal(0),
|
useridloggedin: create_rc_signal(0),
|
||||||
userscreen: create_rc_signal(bool::default()),
|
userscreen: create_rc_signal(bool::default()),
|
||||||
loggedin: create_rc_signal(bool::default()),
|
loggedin: create_rc_signal(true),
|
||||||
editmode: create_rc_signal(bool::default()),
|
editmode: create_rc_signal(bool::default()),
|
||||||
dropdownselect: create_rc_signal(bool::default()),
|
dropdownselect: create_rc_signal(bool::default()),
|
||||||
scrolling: create_rc_signal(bool::default()),
|
scrolling: create_rc_signal(bool::default()),
|
||||||
@@ -1559,7 +1597,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
|
|||||||
cx,
|
cx,
|
||||||
div {
|
div {
|
||||||
Header {}
|
Header {}
|
||||||
div(class="main"){
|
main(class="relative"){
|
||||||
LoginScreenUI{}
|
LoginScreenUI{}
|
||||||
AddingUI{}
|
AddingUI{}
|
||||||
SelectedUI{}
|
SelectedUI{}
|
||||||
|
|||||||
@@ -6,6 +6,8 @@ module.exports = {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [
|
||||||
|
require('@tailwindcss/forms'),
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user