SAE_RIOT_2024/onzer.riot

46 lines
2.1 KiB
Plaintext

<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 {
onBeforeMount(e){
this.state.placeholder = "Rechercher dans les albums";
},
edit(e) {
e.preventDefault()
this.state = {items: [{item: "caca", size: 23}, {item: "aze", size: 3}]};
this.state.name = "Gros caca";
console.log(this.state)
this.update();
},
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>