From fcc58708246b8426f3ab3fecb05d848c66be1fbc Mon Sep 17 00:00:00 2001 From: dannyzou18 Date: Tue, 21 May 2024 22:39:56 -0400 Subject: [PATCH] create artist --- src/api/artists.rs | 39 ++++++++++++ src/api/mod.rs | 1 + src/app.rs | 2 + src/components/add_artist.rs | 29 ++++++++- src/lib.rs | 1 + style/addArtist.scss | 112 +++++++++++++++++++++++++++++++++++ style/main.scss | 1 + style/upload.scss | 43 ++------------ 8 files changed, 190 insertions(+), 38 deletions(-) create mode 100644 src/api/artists.rs create mode 100644 src/api/mod.rs create mode 100644 style/addArtist.scss diff --git a/src/api/artists.rs b/src/api/artists.rs new file mode 100644 index 0000000..8e89454 --- /dev/null +++ b/src/api/artists.rs @@ -0,0 +1,39 @@ +use leptos::*; +use crate::models::Artist; + +use cfg_if::cfg_if; + +cfg_if! { + if #[cfg(feature = "ssr")] { + use crate::database::get_db_conn; + use diesel::prelude::*; + } +} + +/// Add an artist to the database + /// + /// # Arguments + /// + /// * `artist_name` - The name of the artist to add + /// + /// # Returns + /// * `Result<(), Box>` - A empty result if successful, or an error + /// +#[server(endpoint = "artists/add-artist")] +pub async fn add_artist(artist_name: String) -> Result<(), ServerFnError> { + use crate::schema::artists::dsl::*; + use leptos::server_fn::error::NoCustomError; + + let new_artist = Artist { + id: None, + name: artist_name, + }; + + let db = &mut get_db_conn(); + diesel::insert_into(artists) + .values(&new_artist) + .execute(db) + .map_err(|e| ServerFnError::::ServerError(format!("Error creating playlist: {}", e)))?; + + Ok(()) +} diff --git a/src/api/mod.rs b/src/api/mod.rs new file mode 100644 index 0000000..06523f1 --- /dev/null +++ b/src/api/mod.rs @@ -0,0 +1 @@ +pub mod artists; \ No newline at end of file diff --git a/src/app.rs b/src/app.rs index d625d1d..113daef 100644 --- a/src/app.rs +++ b/src/app.rs @@ -63,6 +63,7 @@ use crate::components::dashboard::*; use crate::components::search::*; use crate::components::personal::*; use crate::components::upload::*; +use crate::components::add_artist::AddArtist; /// Renders the home page of your application. #[component] @@ -70,6 +71,7 @@ fn HomePage(play_status: RwSignal, upload_open: RwSignal, add_ view! {
+ // This will render the child route components diff --git a/src/components/add_artist.rs b/src/components/add_artist.rs index 5a58305..d227a24 100644 --- a/src/components/add_artist.rs +++ b/src/components/add_artist.rs @@ -1,15 +1,42 @@ use leptos::*; +use leptos::leptos_dom::log; use leptos_icons::*; +use crate::api::artists::add_artist; #[component] pub fn AddArtistBtn(add_artist_open: RwSignal) -> impl IntoView { let open_dialog = move |_| { add_artist_open.set(true); }; - view! { } +} +#[component] +pub fn AddArtist(open: RwSignal) -> impl IntoView { + let close_dialog = move |ev: leptos::ev::MouseEvent| { + ev.prevent_default(); + open.set(false); + }; + + + view! { + +
+
+

Add Artist

+
+
+
+
+ + Artist Name +
+ +
+
+ + } } \ No newline at end of file diff --git a/src/lib.rs b/src/lib.rs index e7949e3..86cac32 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -15,6 +15,7 @@ pub mod fileserv; pub mod error_template; pub mod upload; pub mod util; +pub mod api; use cfg_if::cfg_if; diff --git a/style/addArtist.scss b/style/addArtist.scss new file mode 100644 index 0000000..227d954 --- /dev/null +++ b/style/addArtist.scss @@ -0,0 +1,112 @@ +@import "theme.scss"; + +.add-artist-container { + position: fixed; + top: 45%; + left: 50%; + transform: translate(-50%, -50%); + width: 30rem; + height: 15rem; + border: 1px solid white; + border-radius: 5px; + padding: 1rem; + padding-top: 0; + z-index: 2; + display: flex; + flex-direction: column; + background-color: #1c1c1c; + .upload-header { + font-size: .7rem; + font-weight: 300; + padding-bottom: 0; + border-bottom: 1px solid white; + font-family: "Roboto", sans-serif; + } + .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; + border: none; + + } + .close-button:hover { + transform: scale(1.1); + background-color: rgba(255, 255, 255, 0.1); + } + .close-button:active { + transform: scale(0.8); + } + .create-artist-form { + width:100%; + height: 100%; + position: relative; + .input-bx{ + margin-top: 1rem; + width: 300px; + input{ + width: 100%; + padding: 10px; + border: 2px solid #7f8fa6; + border-radius: 5px; + outline: none; + font-size: 1rem; + transition: 0.6s; + background-color: transparent; + } + span{ + position: absolute; + left: 0; + padding: 10px; + font-size: 1rem; + color: #7f8fa6; + text-transform: uppercase; + pointer-events: none; + transition: 0.6s; + background-color: transparent; + } + input:valid ~ span, + input:focus ~ span{ + color: #fff; + transform: translateX(10px) translateY(-7px); + font-size: 0.65rem; + font-weight: 600; + padding: 0 10px; + background: #1c1c1c; + letter-spacing: 0.1rem; + } + input:valid, + input:focus{ + color: #fff; + border: 2px solid #fff; + } + + } + .upload-button { + position: absolute; + bottom: 5px; + margin-top: 1rem; + padding: 10px; + background-color: #7f8fa6; + color: #fff; + width: 100%; + font-size: 1rem; + font-family: "Roboto", sans-serif; + border: none; + border-radius: 5px; + cursor: pointer; + transition: 0.3s; + &:hover { + background-color: #fff; + color: #7f8fa6; + } + } + } + +} \ No newline at end of file diff --git a/style/main.scss b/style/main.scss index de15da6..94e01d0 100644 --- a/style/main.scss +++ b/style/main.scss @@ -9,6 +9,7 @@ @import 'search.scss'; @import 'personal.scss'; @import 'upload.scss'; +@import 'addArtist.scss'; body { font-family: sans-serif; diff --git a/style/upload.scss b/style/upload.scss index 720c427..821bfd7 100644 --- a/style/upload.scss +++ b/style/upload.scss @@ -27,9 +27,7 @@ font-size: 1.6rem; transition: all 0.3s; border: none; - } - .close-button:hover { transform: scale(1.1); background-color: rgba(255, 255, 255, 0.1); @@ -48,6 +46,9 @@ padding: .1rem; display: flex; flex-direction: column; + width: 100%; + height: 100%; + position: relative; .input-bx{ margin-top: 1rem; position: relative; @@ -90,42 +91,10 @@ border: 2px solid #fff; } } - .release-date { - margin-top: 1rem; - font-size: 1.2rem; - color: #7f8fa6; - font-family: "Roboto", sans-serif; - display: flex; - align-items: center; - .left { - display: flex; - flex-direction: column; - margin-left: 5px; - margin-right: 10px; - } - span { - font-size: .85rem; - } - input { - padding: 8px; - } - } - .file { - margin-top: .5rem; - display: flex; - align-items: center; - span { - font-size: .9rem; - color: #7f8fa6; - font-family: "Roboto", sans-serif; - margin-left: 5px; - margin-right: 10px; - } - input { - padding: 10px; - } - } .upload-button { + position: absolute; + bottom: 5px; + width: 100%; margin-top: 1rem; padding: 10px; background-color: #7f8fa6;