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-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"/>
        </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"
                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"/>
            </div>
        </form>
    </div>

    <script>
        export default {
            async onBeforeMount(props){
                this.state.placeholder = 'Rechercher dans les albums';
                this.state.items = await this.fetchSong();
                console.log(this.state.items);
            },
            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.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 fetchSong(){
                return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/songs").then(response => {
                    return response.json();
                });

            }
        }
    </script>
</onzer>