SAE_RIOT_2024/onzer.riot

<onzer>
    <div class="px-12">
        <div class="flex-row">
            <input type="button" onclick={ click } value="Albums" class="mr-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/>
            <input type="button" onclick={ click } value="Artists" class="mx-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/>
            <input type="button" onclick={ click } value="Songs" class="ml-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 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){
                const response = await fetch('https://dwarves.iut-fbleau.fr/~fauvet/api/songs');

                console.log(response);

                this.state.placeholder = "Rechercher dans les albums";
                console.log(this.state.items);
            },
            edit(e) {

            },
            click(e) {
                e.preventDefault();
                switch (e.target.attributes.value.value) {
                    case 'Songs':
                        this.state.placeholder = "Rechercher dans les songs";
                        break;
                    case 'Artists':
                        this.state.placeholder = "Rechercher dans les artists";
                        break;
                    default:
                        this.state.placeholder = "Rechercher dans les albums";
                };
                this.update();
            }
        }
    </script>
</onzer>