franklinblanco/jl-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished admin navbar and added empty pages for admin panel

Browse Source
This commit is contained in:
Franklin 2023-04-15 10:25:58 -04:00
parent b45d71b7e6
commit a898140108
17 changed files with 216 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/admin-start.css
View File

@ -1,7 +1,7 @@
.admin-start-container {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: start;
align-items: center;
gap: 50px;

9
css/body.css
View File

@ -10,3 +10,12 @@ body {
justify-content: center;
align-items: stretch;
}
.admin-page-container {
padding-top: 110px;
padding-left: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}

75
css/components/admin_nav_bar.css Normal file
View File

@ -0,0 +1,75 @@
.admin-navbar-background {
/*border-top: 3px solid #04B2D9;*/
position: fixed;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
background-color: #02114A;
min-width: 170px;
border-right: solid 0.5px #d8d8d8;
padding: 0px 15px
}
.admin-navbar-image {
object-fit: cover;
width: 80%;
height: 130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.admin-navbar-elements-container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: 5px;
width: 100%;
}
.admin-navbar-element {
width: 100%;
height: 35px;
color: white;
text-align: center;
font-size: 16px;
font-family: Source Sans Pro;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
}
.admin-navbar-element:hover {
cursor: pointer;
background-color: #ffffff14;
border-radius: 3px;
transition-duration: 0.3s;
}
.admin-navbar-element-selected {
width: 100%;
height: 35px;
color: rgb(27, 27, 27);
background-color: white;
border-radius: 3px;
text-align: center;
font-size: 16px;
font-family: Source Sans Pro;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
}
.admin-navbar-element-selected { cursor: default; }
.admin-navbar-divider {
width: 100%;
height: 0.5px;
background-color: #d8d8d8;
}

3
index.html
View File

@ -15,12 +15,13 @@
<link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
<link data-trunk type="text/css" href="css/admin-start.css" rel="css" />
<link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
<link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />
<link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" />
<link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
<link data-trunk type="text/css" href="css/components/agent_card.css" rel="css" />
<link data-trunk type="text/css" href="css/components/admin_nav_bar.css" rel="css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

34
src/components/admin_nav_bar.rs Normal file
View File

@ -0,0 +1,34 @@
use yew::prelude::*;
use yew_router::prelude::{use_navigator, use_route};
use crate::{routes::main_router::Route};
//use yew_router::prelude::use_navigator;
#[function_component(AdminNavigationBar)]
pub fn admin_navigation_bar() -> Html {
let current_route: Option<Route> = use_route();
let navigator = use_navigator().unwrap();
let cloned_navigator_1 = navigator.clone();
let cloned_navigator_2 = navigator.clone();
let cloned_navigator_3 = navigator.clone();
let cloned_navigator_4 = navigator.clone();
html! {
<div class={"admin-navbar-background"}>
<div class={"admin-navbar-image"}>
<img class={"navbar-image"} src={"images/logo-white.png"} alt="logo"/>
</div>
<div class={"admin-navbar-elements-container"}>
<div class={"admin-navbar-divider"}></div>
<div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminStart) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_1.push(&Route::AdminStart)}>{"Inicio"}</div>
<div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminProjects) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_2.push(&Route::AdminProjects)}>{"Proyectos"}</div>
<div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminAgents) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_3.push(&Route::AdminAgents)}>{"Agentes"}</div>
<div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminContacts) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_4.push(&Route::AdminContacts)}>{"Mensajes"}</div>
<div class={"admin-navbar-divider"}></div>
</div>
</div>
}
}

2
src/components/mod.rs
View File

@ -1,8 +1,8 @@
pub mod nav_bar;
pub mod search_filter;
pub mod project_card;
pub mod media_slideshow;
pub mod floating_widget;
pub mod feature;
pub mod footer;
pub mod agent_card;
pub mod admin_nav_bar;

0
src/components/search_filter.rs
View File

17
src/pages/admin/agents.rs Normal file
View File

@ -0,0 +1,17 @@
use yew::prelude::*;
use crate::components::admin_nav_bar::AdminNavigationBar;
#[function_component(AdminAgents)]
pub fn admin_agents() -> Html {
html! {
<>
<AdminNavigationBar/>
<div class={"page-container"}>
<div class={"admin-start-container"}>
{""}
</div>
</div>
</>
}
}

17
src/pages/admin/contacts.rs Normal file
View File

@ -0,0 +1,17 @@
use yew::prelude::*;
use crate::components::admin_nav_bar::AdminNavigationBar;
#[function_component(AdminContacts)]
pub fn admin_contacts() -> Html {
html! {
<>
<AdminNavigationBar/>
<div class={"page-container"}>
<div class={"admin-start-container"}>
{""}
</div>
</div>
</>
}
}

1
src/pages/admin/login.rs
View File

@ -5,6 +5,7 @@ use crate::{utils::input::get_value_from_input_event, routes::main_router::Route
#[function_component(AdminLoginPage)]
pub fn login_page() -> Html {
// TODO: If logged in go to start
let navigator = use_navigator().unwrap();
let error = use_state(|| false);
let username = use_state(|| String::new());

3
src/pages/admin/mod.rs
View File

@ -1,2 +1,5 @@
pub mod login;
pub mod start;
pub mod projects;
pub mod contacts;
pub mod agents;

17
src/pages/admin/projects.rs Normal file
View File

@ -0,0 +1,17 @@
use yew::prelude::*;
use crate::components::admin_nav_bar::AdminNavigationBar;
#[function_component(AdminProjects)]
pub fn admin_projects() -> Html {
html! {
<>
<AdminNavigationBar/>
<div class={"page-container"}>
<div class={"admin-start-container"}>
{""}
</div>
</div>
</>
}
}

9
src/pages/admin/start.rs
View File

@ -1,12 +1,17 @@
use yew::prelude::*;
use crate::components::admin_nav_bar::AdminNavigationBar;
#[function_component(AdminStart)]
pub fn admin_start() -> Html {
html! {
<div class={"page-container"}>
<>
<AdminNavigationBar/>
<div class={"admin-page-container"}>
<div class={"admin-start-container"}>
{""}
{"a"}
</div>
</div>
</>
}
}

12
src/routes/main_router.rs
View File

@ -3,7 +3,7 @@ use yew::prelude::*;
use uuid::Uuid;
use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage, admin::{login::AdminLoginPage, start::AdminStart}, agents::AgentsPage}};
use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage, admin::{login::AdminLoginPage, start::AdminStart, projects::AdminProjects, agents::AdminAgents, contacts::AdminContacts}, agents::AgentsPage}};
#[derive(Clone, Routable, PartialEq)]
pub enum Route {
@ -22,6 +22,12 @@ pub enum Route {
Admin,
#[at("/admin/start")]
AdminStart,
#[at("/admin/projects")]
AdminProjects,
#[at("/admin/agents")]
AdminAgents,
#[at("/admin/contacts")]
AdminContacts,
#[not_found]
#[at("/404")]
@ -39,6 +45,10 @@ pub fn switch(routes: Route) -> Html {
Route::Admin => html! { <AdminLoginPage/> },
Route::AdminStart => html! { <AdminStart/>},
Route::AdminProjects => html! { <AdminProjects/> },
Route::AdminAgents => html! { <AdminAgents/> },
Route::AdminContacts => html! { <AdminContacts/> },
}
}

12
src/utils/admin_panel.rs Normal file
View File

@ -0,0 +1,12 @@
use super::storage;
pub fn get_admin_token_from_storage() -> Option<String> {
match storage::get_from_local_storage(storage::StorageKey::AdminUser) {
Ok(opt) => opt,
Err(_) => {
log::error!("No user stored when attempting to use admin panel. Redirect to admin panel.");
None
},
}
}

1
src/utils/mod.rs
View File

@ -1,3 +1,4 @@
pub mod get_value;
pub mod input;
pub mod storage;
pub mod admin_panel;

4
src/utils/storage.rs
View File

@ -1,15 +1,17 @@
use std::fmt::Display;
use std::fmt::{Display};
use err::{MessageResource, Error};
use web_sys::window;
pub enum StorageKey {
AgentShortcode,
AdminUser,
}
impl Display for StorageKey {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
match self {
StorageKey::AgentShortcode => write!(f, "agentshortcode"),
StorageKey::AdminUser => write!(f, "adminuser"),
}
}
}