SAE_RIOT_2024/onzer.riot

<onzer>

    <router initial-route={state.initialRoute} base={state.base}>
        <nav>
            <a each={ page in state.pages } href="/#{ page.id }">
                { page.title }
            </a>
        </nav>

        <route path=":id?">
            <h1>{getPageById(route).title}</h1>
            <p>{getPageById(route).body}</p>
        </route>
    </router>

    <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 h-20 pl-6 grow"
                       placeholder={state.placeholder} onkeyup={edit} />
                <input type="button" value="Playlists" onclick={navigateToPlaylists}
                       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} class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
            <p>{album.name}</p>
        </div>
    </div>

    <script>
        const pages = [
            { id: "home", title: "Home", body: "Onzer" },
            { id: "playlist", title: "Playlist", body: "Onzer" },
        ]

        const initialRoute = `${window.location.hash ? window.location.hash.replace('#', '') : 'home'}`

        export default {
            components: {
                router: route.Router;
                route: route.Route;
            },
            state: {
                placeholder: "Rechercher dans les albums",
                items: [],
                search: "albums",
                filter: undefined,
                id: undefined,
                pages,
                initialRoute,
                base: '/#'
            },
            onBeforeMount(props) {
                this.loadData(props.items);
            },
            async loadData(items) {
                const data = await items;
                this.update({
                    state: {
                        ...this.state,
                        items: data.results
                    },
                    album_style: "isActivate",
                    artist_style: "isDeactivate",
                    song_style: "isDeactivate"
                });
            },
            edit(e) {
                this.update({
                    state: {
                        ...this.state,
                        filter: e.target.value
                    }
                });
                this.fetchData();
            },
            click(e) {
                e.preventDefault();
                const newState = {
                    ...this.state,
                    placeholder: `Rechercher dans les ${e.target.value.toLowerCase()}`,
                    search: e.target.value.toLowerCase(),
                    filter: undefined
                };
                this.update({
                    state: newState,
                    album_style: e.target.value === "Albums" ? "isActivate" : "isDeactivate",
                    artist_style: e.target.value === "Artists" ? "isActivate" : "isDeactivate",
                    song_style: e.target.value === "Songs" ? "isActivate" : "isDeactivate"
                });
                this.fetchData();
            },
            async fetchData() {
                const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
                this.update({
                    state: {
                        ...this.state,
                        items: data.results
                    }
                });
            },
            execQuery(table, filter = undefined, id = undefined) {
                let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/";
                let computeHttpRequest;
                if (filter !== undefined) {
                    computeHttpRequest = table === "songs" ?
                        `${baseHttpRequest}${table}?title=${filter}` :
                        `${baseHttpRequest}${table}?name=${filter}`;
                } else if (id !== undefined) {
                    computeHttpRequest = `${baseHttpRequest}${table}/${id}`;
                } else {
                    computeHttpRequest = `${baseHttpRequest}${table}`;
                }
                return fetch(computeHttpRequest).then(response => response.json());
            },
            getPageById(route) {
                const {id} = route.params
                return pages.find(page => page.id === id) || pages[0]
            }
        }
    </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%;
        }

        :host {
            display: block;
            font-family: sans-serif;
            margin: 0;
            padding: 1em;
            text-align: center;
            color: #666;
        }
        nav {
            display: block;
            border-bottom: 1px solid #666;
            padding: 0 0 1em;
        }
        nav > a {
            display: inline-block;
            padding: 0 .8em;
        }
        nav > a:not(:first-child) {
            border-left: 1px solid #eee;
        }
    </style>
</onzer>