eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

seperated playlist component into different files

Browse Source
This commit is contained in:
Danny Zou 2024-04-18 12:08:01 -04:00
parent c66e04643c
commit 8d704ac6bd
7 changed files with 289 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.rs
View File

@ -77,7 +77,7 @@ fn HomePage() -> impl IntoView {
view! {
<div class="home-container">
<Sidebar setter=set_dashboard_open active=dashboard_open />
<Sidebar setter=set_dashboard_open active=dashboard_open logged_in=logged_in/>
<Show
when=move || {dashboard_open() == true}
fallback=move || view! { <Search /> }

3
src/components.rs
View File

@ -2,3 +2,6 @@ pub mod sidebar;
pub mod dashboard;
pub mod search;
pub mod personal;
pub mod playlist;
pub mod create_playlist;
pub mod playlists;

44
src/components/create_playlist.rs Normal file
View File

@ -0,0 +1,44 @@
use leptos::*;
use leptos_icons::*;
use leptos::leptos_dom::*;
use crate::api::playlists::create_playlist;
#[component]
pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
let (playlist_name, set_playlist_name) = create_signal("".to_string());
let on_submit = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
let new_playlist_name = playlist_name.get();
spawn_local(async move {
let create_result = create_playlist(new_playlist_name).await;
if let Err(err) = create_result {
// Handle the error here, e.g., log it or display to the user
log!("Error creating playlist: {:?}", err);
} else {
log!("Playlist created successfully!");
closer.update(|value| *value = false);
}
})
};
view! {
<div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
<div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
<Icon icon=icondata::IoCloseSharp />
</div>
<h1 class="header">Create Playlist</h1>
<form class="create-playlist-form" action="POST" on:submit=on_submit>
<input class="name-input" type="text" placeholder="Playlist Name"
on:input=move |ev| {
set_playlist_name(event_target_value(&ev));
log!("playlist name changed to: {}", playlist_name.get());
}
prop:value=playlist_name
/>
<button class="create-button" type="submit">Create</button>
</form>
</div>
}
}

25
src/components/playlist.rs Normal file
View File

@ -0,0 +1,25 @@
use leptos::*;
use leptos_icons::*;
use crate::models::Playlist;
#[component]
pub fn Playlist(playlist: Playlist) -> impl IntoView {
let (show_playlist, set_show_playlist) = create_signal(false);
view! {
<div class="playlist" on:click=move|_| set_show_playlist.update(|value| *value=true) >
<h1 class="name">{playlist.name.clone()}</h1>
<Show
when=move || show_playlist()
fallback=move || view! {<div></div>}
>
<div class="playlist-container">
<div class="close-button" on:click=move |_| set_show_playlist.update(|value| *value = false)>
<Icon icon=icondata::IoCloseSharp />
</div>
<h1>{playlist.name.clone()}</h1>
</div>
</Show>
</div>
}
}

51
src/components/playlists.rs Normal file
View File

@ -0,0 +1,51 @@
use leptos::*;
use leptos::leptos_dom::*;
use leptos_icons::*;
use crate::components::create_playlist::CreatePlayList;
use crate::components::playlist::Playlist;
use crate::api::playlists::get_playlists;
#[component]
pub fn Playlists() -> impl IntoView {
let (create_playlist_open, set_create_playlist_open) = create_signal(false);
let (playlists, set_playlists) = create_signal(vec![]);
create_effect(move |_| {
spawn_local(async move {
let playlists = get_playlists().await;
if let Err(err) = playlists {
// Handle the error here, e.g., log it or display to the user
log!("Error getting playlists: {:?}", err);
} else {
log!("Playlists: {:?}", playlists);
set_playlists.update(|value| *value = playlists.unwrap());
}
})
});
view! {
<div class="sidebar-playlists-container">
<div class="heading">
<h1 class="header">Playlists</h1>
<button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
<div class="add-sign">
<Icon icon=icondata::IoAddSharp />
</div>
New Playlist
</button>
</div>
<CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
<ul class="playlists">
{
move || playlists.get().iter().enumerate().map(|(index,playlist)| view! {
<Playlist playlist=playlist.clone() />
}).collect::<Vec<_>>()
}
</ul>
</div>
}
}

114
src/components/sidebar.rs
View File

@ -1,12 +1,11 @@
use leptos::leptos_dom::*;
use leptos::*;
use leptos_icons::*;
use crate::api::playlists::create_playlist;
use crate::api::playlists::get_playlists;
use crate::models::Playlist;
use crate::components::playlists::Playlists;
#[component]
pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>, logged_in:ReadSignal<bool>) -> impl IntoView {
let open_dashboard = move |_| {
setter.update(|value| *value = true);
log!("open dashboard");
@ -29,106 +28,15 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl Into
<h1>Search</h1>
</div>
</div>
<Bottom />
</div>
}
}
#[component]
pub fn Bottom() -> impl IntoView {
let (create_playlist_open, set_create_playlist_open) = create_signal(false);
let (playlists, set_playlists) = create_signal(vec![]);
create_effect(move |_| {
spawn_local(async move {
let playlists = get_playlists().await;
if let Err(err) = playlists {
// Handle the error here, e.g., log it or display to the user
log!("Error getting playlists: {:?}", err);
} else {
log!("Playlists: {:?}", playlists);
set_playlists.update(|value| *value = playlists.unwrap());
}
})
});
view! {
<div class="sidebar-bottom-container">
<div class="heading">
<h1 class="header">Playlists</h1>
<button on:click=move|_| set_create_playlist_open.update(|value|*value = true) class="add-playlist">
<div class="add-sign">
<Icon icon=icondata::IoAddSharp />
</div>
New Playlist
</button>
</div>
<CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
<ul class="playlists">
{
move || playlists.get().iter().enumerate().map(|(index,playlist)| view! {
<Playlist playlist=playlist.clone() />
}).collect::<Vec<_>>()
}
</ul>
</div>
}
}
#[component]
pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
let (playlist_name, set_playlist_name) = create_signal("".to_string());
let on_submit = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
let new_playlist_name = playlist_name.get();
spawn_local(async move {
let create_result = create_playlist(new_playlist_name).await;
if let Err(err) = create_result {
// Handle the error here, e.g., log it or display to the user
log!("Error creating playlist: {:?}", err);
} else {
log!("Playlist created successfully!");
closer.update(|value| *value = false);
}
})
};
view! {
<div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
<div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
<Icon icon=icondata::IoCloseSharp />
</div>
<h1 class="header">Create Playlist</h1>
<form class="create-playlist-form" action="POST" on:submit=on_submit>
<input class="name-input" type="text" placeholder="Playlist Name"
on:input=move |ev| {
set_playlist_name(event_target_value(&ev));
log!("playlist name changed to: {}", playlist_name.get());
}
prop:value=playlist_name
/>
<button class="create-button" type="submit">Create</button>
</form>
</div>
}
}
#[component]
pub fn Playlist(playlist: Playlist) -> impl IntoView {
let (show_playlist, set_show_playlist) = create_signal(false);
view! {
<div class="playlist" on:click=move|_| set_show_playlist.update(|value| *value=true) >
<h1 class="name">{playlist.name.clone()}</h1>
<div class="playlist-container" style={move || if show_playlist() {"display: flex"} else {"display: none"}}>
<div class="close-button" on:click=move |_| set_show_playlist.update(|value| *value = false)>
<Icon icon=icondata::IoCloseSharp />
</div>
<h1>{playlist.name.clone()}</h1>
<div class="sidebar-bottom-container">
<Show
when=move || {logged_in() == true}
fallback=move|| view!{<h1>LOG IN PLEASE</h1>}
>
<Playlists />
</Show>
</div>
</div>
}
}

306
style/sidebar.scss
View File

@ -51,167 +51,173 @@
padding: 0.2rem 1rem 1rem 1rem;
height: calc(100% - 9rem);
.heading {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.header {
font-size: 1.2rem;
font-weight: 200;
}
.add-playlist {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 0.9rem;
border-radius: 50px;
border: none;
height: 2.2rem;
padding-right: 2rem;
padding-left: 2rem;
cursor: pointer;
transition: background-color 0.3s ease;
.add-sign {
font-size: 1.5rem;
margin-top: auto;
margin-right: 5px;
color: white;
}
}
.add-playlist:hover {
background-color: #9e9e9e;
}
}
.create-playlist-popup-container {
display: flex;
position: relative;
flex-direction: column;
// background-color: #1c1c1c;
height: 12rem;
width: 20rem;
border-radius: 2px;
padding: 1rem;
padding-top: 0.1rem;
border: 1px solid grey;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
.header {
font-size: 1.2rem;
font-weight: 200;
margin-bottom: 0.5rem;
}
.create-playlist-form {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
.name-input {
background: transparent;
border: none;
border-bottom: 1px solid grey;
font-size: 1.1rem;
color: white;
margin-top: 2rem;
}
.name-input:focus {
outline: none;
}
.create-button {
position: absolute;
bottom: 0px;
width: 5rem;
padding: 0.4rem;
border-radius: 0.5rem;
cursor: pointer;
}
}
}
.playlists {
list-style: none;
padding: 0;
margin: 0;
margin-top: 5px;
.sidebar-playlists-container {
width: 100%;
height: 100%;
.playlist {
.heading {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.header {
font-size: 1.2rem;
font-weight: 200;
}
.add-playlist {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 0.9rem;
border-radius: 50px;
border: none;
height: 2.2rem;
padding-right: 2rem;
padding-left: 2rem;
cursor: pointer;
transition: background-color 0.3s ease;
.add-sign {
font-size: 1.5rem;
margin-top: auto;
margin-right: 5px;
color: white;
}
}
.add-playlist:hover {
background-color: #9e9e9e;
}
}
.create-playlist-popup-container {
display: flex;
position: relative;
flex-direction: column;
// background-color: #1c1c1c;
height: 12rem;
width: 20rem;
border-radius: 2px;
padding: 1rem;
padding-top: 0.1rem;
border: 1px solid grey;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
.header {
font-size: 1.2rem;
font-weight: 200;
margin-bottom: 0.5rem;
}
.create-playlist-form {
display: flex;
flex-direction: column;
position: relative;
height: 100%;
.name-input {
background: transparent;
border: none;
border-bottom: 1px solid grey;
font-size: 1.1rem;
color: white;
margin-top: 2rem;
}
.name-input:focus {
outline: none;
}
.create-button {
position: absolute;
bottom: 0px;
width: 5rem;
padding: 0.4rem;
border-radius: 0.5rem;
cursor: pointer;
}
}
}
.playlists {
list-style: none;
padding: 0;
margin: 0;
margin-top: 5px;
display: flex;
flex-direction: row;
border: 1px solid grey;
height: 3rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
.name {
font-size: 1rem;
margin-left: 1rem;
margin-top: 0.5rem;
color: white;
}
.playlist-container {
background-color: red;
width: 10rem;
height: 10rem;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
.playlist {
padding: 0;
margin: 0;
margin-top: 5px;
display: flex;
flex-direction: row;
border: 1px solid grey;
height: 3rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
.name {
font-size: 1rem;
margin-left: 1rem;
margin-top: 0.5rem;
color: white;
}
.playlist-container {
background-color: red;
width: 10rem;
height: 10rem;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
}
.close-button:active {
transform: scale(0.8);
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
}
}
}
.playlist:hover {
background-color: #adadad36;
.playlist:hover {
background-color: #adadad36;
}
}
}
}