From b26d9f1bf8da2e410161d3d3f2f591af1eb96839 Mon Sep 17 00:00:00 2001
From: fauvet <fauvet@localhost>
Date: Fri, 21 Jun 2024 13:36:40 +0200
Subject: [PATCH] =?UTF-8?q?Fais=20de=20ta=20vie=20un=20r=C3=AAve,=20et=20d?=
 =?UTF-8?q?'un=20r=C3=AAve,=20une=20r=C3=A9alit=C3=A9.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 onzer.riot | 117 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 72 insertions(+), 45 deletions(-)

diff --git a/onzer.riot b/onzer.riot
index 8185adf..722b64b 100644
--- a/onzer.riot
+++ b/onzer.riot
@@ -1,77 +1,104 @@
 <onzer>
     <div class="px-12">
         <div class="flex-row mb-2">
-            <input id="album" type="button" onclick={ click } value="Albums" class="mr-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/>
-            <input id="artist" type="button" onclick={ click } value="Artists" class="mx-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/>
-            <input id="song" type="button" onclick={ click } value="Songs" class="ml-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/>
+           <input id="album" type="button" onclick={click} value="Albums" 
+		class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {album_style}"/>
+            <input id="artist" type="button" onclick={click} value="Artists" 
+		class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {artist_style}"/>
+            <input id="song" type="button" onclick={click} value="Songs" 
+		class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}"/>
         </div>
         <form onsubmit={ add }>
             <div class="flex flex-row items-baseline">
-            <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-14 pl-6 grow"
+            <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-20 pl-6 grow"
                 placeholder={ this.state.placeholder } onkeyup={ edit } />
-                <input type="button" value="Playlists" class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-14 w-40 mt-2"/>
+            <input type="button" value="Playlists" 
+		class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2"/>
             </div>
         </form>
     </div>
 
+    <div class="flex flex-wrap px-12 justify-between mt-8">
+	<div each={ album in state.items.results } 
+	   class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
+		<div>
+			<p> { album.name } </p>
+		</div>			
+	</div>
+    </div>
+
     <script>
         export default {
             onBeforeMount(props){
-                this.state.placeholder = 'Rechercher dans les albums';
-
-                this.test();
-
-                console.log(this.state);
+                this.state = {
+			placeholder: "Rechercher dans les albums",
+			search: "albums"		
+		};
+	
+		this.paintButton();
+		this.album_style = "isActivate";
             },
             onMounted(){
-                document.getElementById("album").style.backgroundColor = "#6EE7B7";
-                document.getElementById("album").style.borderColor = "#059669";
                 this.update();
             },
             edit(e) {
-
+				
             },
             click(e) {
                 e.preventDefault();
-                this.clearButton();
-                switch (e.target.attributes.value.value) {
-                    case 'Songs':
-                        this.state.placeholder = "Rechercher dans les songs"
-                        document.getElementById("song").style.backgroundColor = "#6EE7B7";
-                        document.getElementById("song").style.borderColor = "#059669";
-                        break;
-                    case 'Artists':
-                        this.state.placeholder = "Rechercher dans les artists";
-                        document.getElementById("artist").style.backgroundColor = "#6EE7B7";
-                        document.getElementById("artist").style.borderColor = "#059669";
-                        break;
-                    default:
-                        this.state.placeholder = "Rechercher dans les albums";
-                        document.getElementById("album").style.backgroundColor = "#6EE7B7";
-                        document.getElementById("album").style.borderColor = "#059669";
-                };
+		this.paintButton();
+		const old_search = this.state.search;
+		switch(e.target.value){
+			case "Albums":
+				this.state.placeholder = "Rechercher dans les albums";
+				this.album_style = "isActivate";
+				this.state.search = "albums";
+				break;
+			case "Artists":
+				this.state.placeholder = "Rechercher dans les artists";
+				this.artist_style = "isActivate";
+				this.state.search = "artists";
+				break;
+			default:
+				this.placeholder = "Rechercher dans les songs";
+				this.song_style = "isActivate";
+				this.state.search = "songs";
+		}
+		if(old_search != this.state.search){this.list();}
                 this.update();
             },
-            clearButton() {
-                document.getElementById("song").style.backgroundColor = "#D1FAE5";
-                document.getElementById("song").style.borderColor = "#6EE7B7";
-                document.getElementById("album").style.backgroundColor = "#D1FAE5";
-                document.getElementById("album").style.borderColor = "#6EE7B7";
-                document.getElementById("artist").style.backgroundColor = "#D1FAE5";
-                document.getElementById("artist").style.borderColor = "#6EE7B7";
-            },
-            async test(){
+            async list(){
                 this.state = {
-                    placeholder: "caca",
-                    items: await this.fetchSong()
+                    placeholder: "Rechercher dans les songs",
+                    items: await this.fetchData()
                 };
-                console.log(this.state);
+		this.update();
             },
-            fetchSong(){
-                return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/songs").then(response => {
+            fetchData(){
+                return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/"+this.state.search+"").then(response => {
                     return response.json();
                 });
             },
+	    paintButton(){
+	    	this.album_style = "isDeactivate";
+		this.artist_style = "isDeactivate";
+		this.song_style = "isDeactivate";
+	    }
         }
     </script>
-</onzer>
\ No newline at end of file
+    <style>
+	.isActivate{
+		background-color: #6EE7B7;
+		border-color: #059669;
+	}
+	.isDeactivate {
+		background-color: #D1FAE5;
+		border-color: #6EE7B7;
+	}
+	.item {
+		background-color: #ECFDF5;
+		border-color: #6EE7B7;
+		width: 32%;
+	}
+    </style>
+</onzer>