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 if={ state.items && state.items.length > 0 } class="flex flex-wrap px-12 justify-between mt-8">
        <div each={ item 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"
             style={ state.search === 'songs' ? 'width: 100%;' : '' }>
            <div class="text-center">
                <p>{ item.name }</p>
            </div>
        </div>
    </div>

    <div if={ !state.items || state.items.length === 0 } class="no-results">
        <p>Aucun résultat trouvé.</p>
    </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),
                    showModal: false,
                };
                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%;
        }
        .item[song] {
            width: 100%;
        }
        .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;
        }
        .add-button {
            background-color: #34D399;
            border: none;
            border-radius: 4px;
            padding: 8px 16px;
            margin-top: 8px;
            cursor: pointer;
            color: white;
        }
        .no-results {
            text-align: center;
            margin-top: 16px;
            font-size: 18px;
            color: #6B7280;
        }

        /* Modal */
        .modal {
            /*display: none; /* Par défaut, le modal est caché */
            position: fixed;
            z-index: 10;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4); /* Fond semi-transparent pour le modal */
        }

        .modal-content {
            background-color: #fefefe;
            margin: 10% auto; /* Centre le modal à l'écran */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            position: relative;
        }

        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            color: #888;
        }

        .close:hover,
        .close:focus {
            color: #000;
        }
    </style>
</onzer>