Finished admin navbar and added empty pages for admin panel
This commit is contained in:
parent
b45d71b7e6
commit
a898140108
|
@ -1,7 +1,7 @@
|
||||||
.admin-start-container {
|
.admin-start-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
|
||||||
|
|
|
@ -10,3 +10,12 @@ body {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.admin-page-container {
|
||||||
|
padding-top: 110px;
|
||||||
|
padding-left: 200px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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-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/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/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/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/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/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/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">
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
||||||
|
|
|
@ -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>
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,8 +1,8 @@
|
||||||
pub mod nav_bar;
|
pub mod nav_bar;
|
||||||
pub mod search_filter;
|
|
||||||
pub mod project_card;
|
pub mod project_card;
|
||||||
pub mod media_slideshow;
|
pub mod media_slideshow;
|
||||||
pub mod floating_widget;
|
pub mod floating_widget;
|
||||||
pub mod feature;
|
pub mod feature;
|
||||||
pub mod footer;
|
pub mod footer;
|
||||||
pub mod agent_card;
|
pub mod agent_card;
|
||||||
|
pub mod admin_nav_bar;
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
}
|
|
@ -5,6 +5,7 @@ use crate::{utils::input::get_value_from_input_event, routes::main_router::Route
|
||||||
|
|
||||||
#[function_component(AdminLoginPage)]
|
#[function_component(AdminLoginPage)]
|
||||||
pub fn login_page() -> Html {
|
pub fn login_page() -> Html {
|
||||||
|
// TODO: If logged in go to start
|
||||||
let navigator = use_navigator().unwrap();
|
let navigator = use_navigator().unwrap();
|
||||||
let error = use_state(|| false);
|
let error = use_state(|| false);
|
||||||
let username = use_state(|| String::new());
|
let username = use_state(|| String::new());
|
||||||
|
|
|
@ -1,2 +1,5 @@
|
||||||
pub mod login;
|
pub mod login;
|
||||||
pub mod start;
|
pub mod start;
|
||||||
|
pub mod projects;
|
||||||
|
pub mod contacts;
|
||||||
|
pub mod agents;
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,12 +1,17 @@
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
|
|
||||||
|
use crate::components::admin_nav_bar::AdminNavigationBar;
|
||||||
|
|
||||||
#[function_component(AdminStart)]
|
#[function_component(AdminStart)]
|
||||||
pub fn admin_start() -> Html {
|
pub fn admin_start() -> Html {
|
||||||
html! {
|
html! {
|
||||||
<div class={"page-container"}>
|
<>
|
||||||
|
<AdminNavigationBar/>
|
||||||
|
<div class={"admin-page-container"}>
|
||||||
<div class={"admin-start-container"}>
|
<div class={"admin-start-container"}>
|
||||||
{""}
|
{"a"}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -3,7 +3,7 @@ use yew::prelude::*;
|
||||||
|
|
||||||
use uuid::Uuid;
|
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)]
|
#[derive(Clone, Routable, PartialEq)]
|
||||||
pub enum Route {
|
pub enum Route {
|
||||||
|
@ -22,6 +22,12 @@ pub enum Route {
|
||||||
Admin,
|
Admin,
|
||||||
#[at("/admin/start")]
|
#[at("/admin/start")]
|
||||||
AdminStart,
|
AdminStart,
|
||||||
|
#[at("/admin/projects")]
|
||||||
|
AdminProjects,
|
||||||
|
#[at("/admin/agents")]
|
||||||
|
AdminAgents,
|
||||||
|
#[at("/admin/contacts")]
|
||||||
|
AdminContacts,
|
||||||
|
|
||||||
#[not_found]
|
#[not_found]
|
||||||
#[at("/404")]
|
#[at("/404")]
|
||||||
|
@ -39,6 +45,10 @@ pub fn switch(routes: Route) -> Html {
|
||||||
|
|
||||||
Route::Admin => html! { <AdminLoginPage/> },
|
Route::Admin => html! { <AdminLoginPage/> },
|
||||||
Route::AdminStart => html! { <AdminStart/>},
|
Route::AdminStart => html! { <AdminStart/>},
|
||||||
|
Route::AdminProjects => html! { <AdminProjects/> },
|
||||||
|
Route::AdminAgents => html! { <AdminAgents/> },
|
||||||
|
Route::AdminContacts => html! { <AdminContacts/> },
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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,3 +1,4 @@
|
||||||
pub mod get_value;
|
pub mod get_value;
|
||||||
pub mod input;
|
pub mod input;
|
||||||
pub mod storage;
|
pub mod storage;
|
||||||
|
pub mod admin_panel;
|
|
@ -1,15 +1,17 @@
|
||||||
use std::fmt::Display;
|
use std::fmt::{Display};
|
||||||
|
|
||||||
use err::{MessageResource, Error};
|
use err::{MessageResource, Error};
|
||||||
use web_sys::window;
|
use web_sys::window;
|
||||||
|
|
||||||
pub enum StorageKey {
|
pub enum StorageKey {
|
||||||
AgentShortcode,
|
AgentShortcode,
|
||||||
|
AdminUser,
|
||||||
}
|
}
|
||||||
impl Display for StorageKey {
|
impl Display for StorageKey {
|
||||||
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
|
||||||
match self {
|
match self {
|
||||||
StorageKey::AgentShortcode => write!(f, "agentshortcode"),
|
StorageKey::AgentShortcode => write!(f, "agentshortcode"),
|
||||||
|
StorageKey::AdminUser => write!(f, "adminuser"),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue