Merge pull request #44 from UNIZAR-30226-2024-03/dinamic-pages

Dinamic pages
UNIZAR-30226-2024-03 · Apr 2, 2024 · 49a3be9 · 49a3be9
2 parents 87c1003 + d1212db
commit 49a3be9
Show file tree

Hide file tree

Showing 13 changed files with 182 additions and 111 deletions.
diff --git a/playbeat/astro.config.mjs b/playbeat/astro.config.mjs
@@ -6,11 +6,10 @@ import vue from "@astrojs/vue";
 
 import vercel from "@astrojs/vercel/serverless";
 
-// https://astro.build/config
+
 export default defineConfig({
-   site: 'https://unizar-30226-2024-03.github.io',
-  //  base: '/unizar-30226-2024-03.github.io',
+  site: 'https://unizar-30226-2024-03.github.io',
   integrations: [tailwind(), react(), svelte(), vue()],
-  // output: "server",
+  output: "server",
   // adapter: vercel()
 });
diff --git a/playbeat/src/components/AddAudio.astro b/playbeat/src/components/AddAudio.astro
@@ -1,16 +1,12 @@
 ---
 import TagsTabs from '@components/TagsTabs.astro';
 
-interface Props {
-    title: string
-}
 
-const {title} = Astro.props
 
 ---
 
 <div class="flex flex-col gap-3">
-    <h2 class="text-xl font-medium">{title}</h2>
+    <h2 class="text-xl font-medium">Agrega un nuevo audio</h2>
     <form class="flex flex-col items-center gap-3 pt-4" onsubmit="uploadAudio(event)">
         <div class="flex flex-row items-center w-full gap-3">
 

diff --git a/playbeat/src/components/Carrousel.astro b/playbeat/src/components/Carrousel.astro
@@ -36,7 +36,7 @@ const itemsSongOpt = ["Añadir cola", "Añadir a la lista de reproducción", "A
         <ul class=" flex flex-row w-full overflow-x-auto snap-x snap-mandatory scroll-smooth  carrusel">
             {info.items.map( (item) => 
                     <li class="flex flex-col p-2 snap-start text-sm h-full hijo ">
-                        <a href="/library/playlist1" class="  relative inline-block imagen ">
+                        <a href=`/library/${item.audio}` class="  relative inline-block imagen ">
                             <img src="../../cancion.jpg" class:list={[" w-full rounded-md mb-1 hover:brightness-90", {"aspect-[16/11]" : variant==="wide"},  {"aspect-square" : variant!=="wide"}]}/>
                             <div class="rounded-full w-10 h-10 hidden items-center justify-center botonesizq">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-play-filled" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" stroke-width="0" fill="currentColor" /></svg>
@@ -46,10 +46,10 @@ const itemsSongOpt = ["Añadir cola", "Añadir a la lista de reproducción", "A
                             </div>
                         </a>
 
-                        <a href="/library/playlist1" class=" w-max hover:underline">
+                        <a href=`/library/${item.audio}` class=" w-max hover:underline">
                             <p class="text-base hover:underline">{item.audio}</p>
                         </a>
-                        <a href="/artist/artist1" class="w-max hover:underline"><p class=" text-gray-400">{item.descripcion}</p></a>
+                        <a href=`/artist/${item.descripcion}` class="w-max hover:underline"><p class=" text-gray-400">{item.descripcion}</p></a>
 
                     </li>
             )}

diff --git a/playbeat/src/components/HeaderArtist.astro b/playbeat/src/components/HeaderArtist.astro
@@ -1,4 +1,7 @@
+---
+const { artist } = Astro.props
 
+---
 
 <header class=" h-80 w-full"> 
     <div class=" w-full h-full flex flex-col justify-end relative">
@@ -7,7 +10,7 @@
             <div class="rounded-full bg-[#6985C0] w-8 h-8 flex items-center justify-center">
                 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-play-filled" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" stroke-width="0" fill="currentColor" /></svg>
             </div>
-            <h1 class="text-4xl font-semibold">Artista1</h1>
+            <h1 class="text-4xl font-semibold">{artist}</h1>
 
         </div>
 

diff --git a/playbeat/src/components/LeftBar.astro b/playbeat/src/components/LeftBar.astro
@@ -13,39 +13,51 @@ import World from "@/icons/World.astro"
 const Playlists = [
     {
         name: "Playlist 1",
+        id:"plalist1"
     },
     {
         name: "Playlist 2",
+        id:"plalist2"
     },
     {
         name: "Playlist 3",
+        id:"plalist3"
     },
     {
         name: "Playlist 4",
+        id:"plalist4"
     },
     {
         name: "Playlist 5",
+        id:"plalist5"
     },
     {
         name: "Playlist 6",
+        id:"plalist6"
     },
     {
         name: "Playlist 7",
+        id:"plalist7"
     },
     {
         name: "Playlist 8",
+        id:"plalist8"
     },
     {
         name: "Playlist 9",
+        id:"plalist9"
     },
     {
         name: "Playlist 10",
+        id:"plalist10"
     },
     {
         name: "Playlist 11",
+        id:"plalist11"
     },
     {
         name: "Playlist 12",
+        id:"plalist12"
     }
 ]
 
@@ -97,9 +109,9 @@ const Playlists = [
         <ul class="flex flex-col gap-2 px-6 mt-2 overflow-y-scroll ">
             {Playlists.map( (playlist) => 
                 <li class="flex items-center hover:bg-[#575757] rounded-md">
-                    <a href="/library/playlist1" class=" text-white  font-medium flex flex-row items-center gap-4 w-full h-9 ml-4  mr-8">
+                    <a href=`/library/${playlist.id}` class=" text-white  font-medium flex flex-row items-center gap-4 w-full h-9 ml-4  mr-8">
                         <NotaList />
-                        <span>Playlist 1</span>
+                        <span>{playlist.name}</span>
                     </a>
                 </li>
         )}

diff --git a/playbeat/src/components/ModAudio.astro b/playbeat/src/components/ModAudio.astro
@@ -0,0 +1,65 @@
+---
+import TagsTabs from '@components/TagsTabs.astro';
+
+const {audio} = Astro.params
+console.log(audio)
+
+---
+
+<div class="flex flex-col gap-3">
+    <h2 class="text-xl font-medium">Modifica tu audio</h2>
+    <form class="flex flex-col items-center gap-3 pt-4" onsubmit="uploadAudio(event)">
+        <div class="flex flex-row items-center w-full gap-3">
+
+            <section class="flex flex-col">
+                <input type="file" id="addFoto" name="photo" class=" text-white p-2 rounded-md hidden" onchange="previewImage(event)" />
+                <div class=" w-64 aspect-square mt-2 cursor-pointer bg-[#333] rounded-md border-2 border-[#c5c5c5] flex justify-center items-center" onclick="document.getElementById('addFoto').click();">
+                    <img id="preview" class="w-64 aspect-square rounded-md hidden" />
+                    <svg  xmlns="http://www.w3.org/2000/svg"  width="70"  height="70"  viewBox="0 0 24 24"  fill="none"  stroke="#c5c5c5"  stroke-width="1"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>
+                </div>
+            </section>
+            <section class="h-64 flex flex-col items-start gap-4">
+                <div class="h-20 flex flex-row justify-start gap-4">
+
+                    <div class="flex flex-col gap-1">
+                        <label>Nombre del audio</label>
+                        <input type="text" name="name" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Nombre" />
+                    </div>
+                    <div class="flex flex-col gap-1">
+                        <label >Participantes</label>
+                        <input type="text" name="featurings" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Usuario" />
+                    </div>
+                    <div class="flex flex-row gap-2 items-center mt-4 ">
+                        <label>Privado</label>
+                        <input type="checkbox" name="private" />
+                    </div>
+
+                </div>
+                <div class="w-full h-full">
+                    <TagsTabs subject="audio"/>
+                </div>
+            </section>
+        </div>
+        <div class="w-full flex flex-col gap-2">
+            <input type="file" id="file" name="audio"/>
+            <audio id="audio"  controls class="w-full"></audio>
+        </div>
+        <input type="submit" class=" bg-bluePB px-4 py-1 rounded-sm" value="Subir"/>
+    </form>
+</div>
+
+<script is:inline>
+    function previewImage(event) {
+        var reader = new FileReader();
+        reader.onload = function(){
+            var output = document.getElementById('preview');
+            output.style.display = 'block';
+            output.src = reader.result;
+        };
+        reader.readAsDataURL(event.target.files[0]);
+    }
+    function uploadAudio(event){
+        event.preventDefault();
+
+    }
+    </script>
diff --git a/playbeat/src/pages/artist/artist1.astro → playbeat/src/pages/artist/[id].astro b/playbeat/src/pages/artist/artist1.astro → playbeat/src/pages/artist/[id].astro
@@ -1,10 +1,15 @@
 ---
-import Layout from '../../layouts/Layout.astro';
+import Layout from '@layouts/Layout.astro';
+
+import Header from '@components/Header.astro';
+import HeaderArtist from '@components/HeaderArtist.astro';
+import CarrouselTop from '@components/CarrouselTop.astro';
+import Carrousel from '@components/Carrousel.astro';
+
+const { id } = Astro.params
+
+
 
-import Header from '../../components/Header.astro';
-import HeaderArtist from '../../components/HeaderArtist.astro';
-import CarrouselTop from '../../components/CarrouselTop.astro';
-import Carrousel from '../../components/Carrousel.astro';
 const canciones = [
     {
         title: 'Canción 1111',
@@ -119,7 +124,7 @@ const canciones2 = {num:5,name:"Para ti", ref:"/podcast", items:[{audio:"Cancion
 	<div class=" flex flex-col w-full   text-white">
 		<Header/>
 		<div class=" w-full h-full flex flex-col mt-16">
-            <HeaderArtist />
+            <HeaderArtist artist={id}/>
 			<div class="px-16 mt-10 flex flex-row flex-wrap">
                 <section class="w-4/6">
                     <h2 class="text-lg font-semibold">Top canciones</h2>

diff --git a/playbeat/src/pages/audio/cancion1.astro → playbeat/src/pages/creator/audio/[id].astro b/playbeat/src/pages/audio/cancion1.astro → playbeat/src/pages/creator/audio/[id].astro
@@ -2,7 +2,11 @@
 import CreatorLayout from '@layouts/CreatorLayout.astro';
 import HeaderCreator from '@components/HeaderCreator.astro';
 import TagsTabs from '@components/TagsTabs.astro';
-import AddAudio from '@components/AddAudio.astro';
+import ModAudio from '@components/ModAudio.astro';
+
+
+const {id} = Astro.props
+
 const canciones = [
     {
         title: "Cancion 1",
@@ -99,7 +103,7 @@ const canciones = [
             <h2 class="text-6xl font-semibold">TUS AUDIOS</h2>
         </div>
         <section class="w-full mt-8 px-16">
-            <AddAudio title="Modifica este audio"/>
+            <ModAudio audio={id}/>
 
         </section>
 

diff --git a/playbeat/src/pages/creator/estadisticas.astro b/playbeat/src/pages/creator/estadisticas.astro
@@ -9,70 +9,70 @@ const canciones = [
         artist: "Artista 1",
         album: "Album 1",
         time: "2:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion1"
     },
     {
         title: "Cancion 2",
         artist: "Artista 2",
         album: "Album 2",
         time: "3:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion2"
     },
     {
         title: "Cancion 3",
         artist: "Artista 3",
         album: "Album 3",
         time: "4:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion3"
     },
     {
         title: "Cancion 4",
         artist: "Artista 4",
         album: "Album 4",
         time: "5:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion4"
     },
     {
         title: "Cancion 5",
         artist: "Artista 5",
         album: "Album 5",
         time: "6:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion5"
     },
     {
         title: "Cancion 6",
         artist: "Artista 6",
         album: "Album 6",
         time: "7:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion6"
     },
     {
         title: "Cancion 7",
         artist: "Artista 7",
         album: "Album 7",
         time: "8:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion7"
     },
     {
         title: "Cancion 8",
         artist: "Artista 8",
         album: "Album 8",
         time: "9:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion8"
     },
     {
         title: "Cancion 9",
         artist: "Artista 9",
         album: "Album 9",
         time: "10:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion9"
     },
     {
         title: "Cancion 10",
         artist: "Artista 10",
         album: "Album 10",
         time: "11:30",
-        url: "stats/cancion1"
+        url: "/creator/stats/cancion10"
     }
 
 ]
@@ -107,7 +107,7 @@ const canciones = [
             </thead>
             <tbody class="border-t-[1px] border-white border-opacity-60">
                 {canciones.map((cancion, index) => (
-                      <tr class=" hover:bg-[#262626]" onclick="window.location='/stats/cancion1';">
+                      <tr class=" hover:bg-[#262626]" data-url={cancion.url} >
                         <td class="py-3 pl-3 flex flex-row items-center gap-3">
                             <div class=" h-12 aspect-square bg-black rounded-[4px]">
                             </div>
@@ -121,6 +121,19 @@ const canciones = [
                 ))
                 }
             </tbody>
+            <script>
+                document.addEventListener("DOMContentLoaded", function() {
+                  var rows = document.querySelectorAll("tbody tr");
+                  rows.forEach(function(row) {
+                    row.addEventListener("click", function() {
+                      var url = this.getAttribute("data-url");
+                      if (url) {
+                        window.location.href = url;
+                      }
+                    });
+                  });
+                });
+              </script>
         </table>
         </sect>
 

diff --git a/playbeat/src/pages/stats/cancion1.astro → playbeat/src/pages/creator/stats/[id].astro b/playbeat/src/pages/stats/cancion1.astro → playbeat/src/pages/creator/stats/[id].astro