SAE_RIOT_2024/onzer.riot

<onzer>
    <div class="px-12">
        <div class="flex-row mb-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-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-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){
                console.log(props.value.items.results);
                this.state = {
                    placeholder: "Rechercher dans les albums",
                    items: props.value.items.results,
                    search: "albums"
                };
                this.paintButton();
                this.album_style = "isActivate";
            },
            onMounted(){
                this.update();
            },
            edit(e) {
				
            },
            click(e) {
                e.preventDefault();
		        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();
            },
            async list(){
                this.state = {
                    placeholder: "Rechercher dans les songs",
                    items: await this.fetchData()
                };
		        this.update();
            },
            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>
    <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>