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.slice((state.page - 1) * 9, state.page * 9) } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
            <p> { album.name } </p>
        </div>
    </div>

    <div class="pagination">
        <button onclick={prevPage} disabled={state.page === 1}>Previous</button>
        <span>Page {state.page} of {state.totalPages}</span>
        <button onclick={nextPage} disabled={state.page === state.totalPages}>Next</button>
    </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,
                    page: 1,
                    totalPages: Math.ceil(data.results.length / 9),
                };
                this.paintButton();
                this.album_style = "isActivate";
                this.update();
            },
            edit(e) {
                this.state.filter = e.target.value;
                this.state.page = 1;
                this.fetchData();
                this.update();
            },
            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.state.page = 1;
                this.fetchData();
                this.update();
            },
            async fetchData(){
                let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
                this.state.items = data.results;
                this.state.totalPages = Math.ceil(data.results.length / 9);
                this.update();
            },
            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;
                            break;
                        default :
                            computeHttpRequest = baseHttpRequest + table + "?name=" + filter;
                    }
                } else if(id !== undefined) {
                    computeHttpRequest = baseHttpRequest + table + "/" + id;
                } else {
                    computeHttpRequest = baseHttpRequest + table;
                }
                return fetch(computeHttpRequest).then(response => response.json());
            },
            prevPage() {
                if (this.state.page > 1) {
                    this.state.page -= 1;
                    this.update();
                }
            },
            nextPage() {
                if (this.state.page < this.state.totalPages) {
                    this.state.page += 1;
                    this.update();
                }
            }
        }
    </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%;
        }
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 16px;
        }
        .pagination button {
            background-color: #6EE7B7;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            margin: 0 8px;
            cursor: pointer;
        }
        .pagination button:disabled {
            background-color: #D1FAE5;
            cursor: not-allowed;
        }
    </style>
</onzer>