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={ 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 } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
            <p> { album.name } </p>
        </div>
    </div>

    <script>
        export default {
            async onBeforeMount(props){
                let data =  await props.items;
                this.state = {
                    placeholder: "Rechercher dans les albums",
                    items: data.results,
                    search: "albums",
                    filter: undefined,
                    id: undefined
                };
                this.paintButton();
                this.album_style = "isActivate";
                this.update();
            },
            edit(e) {
                console.log(e);
            },
            click(e) {
                e.preventDefault();
		        this.paintButton();
		        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.state.placeholder = "Rechercher dans les songs";
                        this.song_style = "isActivate";
                        this.state.search = "songs";
		        }
                this.fetchData()
                this.update();
            },
            async fetchData(){
                let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
                this.update({
                    items: data.results
                });
            },
            paintButton(){
                this.album_style = "isDeactivate";
                this.artist_style = "isDeactivate";
                this.song_style = "isDeactivate";
            },
            execQuery(table, filter = undefined,  id = undefined){
                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
                let computeHttpRequest;
                if(filter !== undefined){
                    switch(table){
                        case "songs":
                            computeHttpRequest = baseHttpRequest+table+"?title="+filter;
                        default :
                            computeHttpRequest = baseHttpRequest+table+"?name="+filter;
                    }
                } else if(id !== undefined) {
                    computeHttpRequest = baseHttpRequest+table+"/"+id;
                } else {
                    computeHttpRequest = baseHttpRequest+table;
                }
                return fetch(computeHttpRequest).then(response => {
                    return response.json();
                });
            }
        }
    </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>