projet

components/app.riot

@@ -0,0 +1,173 @@
+<app>
+    <nav>
+        <a href="#"><i class="fa-solid fa-house"></i></a>
+        <a href="#/favoris/">Favoris</a>
+        <a href="#/login/"><i class="fa-solid fa-user"></i></a>
+    </nav>
+
+    <router base={base}>
+        <route path="(#)?">
+            <form onsubmit="{search}">
+                <select name="type">
+      <option value="release">Release</option>
+      <option value="master">Master</option>
+      <option value="artist">Artist</option>
+    </select>
+                <input type="text" name="query" placeholder="Rechercher..." />
+                <button type="submit">Rechercher</button>
+            </form>
+
+            <div if="{searchs.items.length > 0}">
+                <h3>Résultats ({searchs.pagination.items.total} résultats trouvés)</h3>
+                <div class="results-grid">
+                    <div class="card" each="{item in searchs.items}">
+                        <div if="{authUser}"><button onclick={addFavoris(item.id)}><i class="fa-regular fa-star"></i></button></div>
+                        <a href={ "#/release-details/" + item.id}>
+                            {item.title}
+                            <img src="{item.cover_image} " alt="cover " />
+                            <div if="{item.type !=='artist' } ">
+                                <p>{item.year}</p>
+                                <footer>{item.community.want}<i class="fa-solid fa-check "></i> {item.community.have}<i class="fa-regular fa-heart "></i></footer>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </route>
+
+        <route path="#/release-details/:id">
+            <release-details releaseid={route.params.id}></release-details>
+        </route>
+        <route path="#/favoris">
+            <favorites></favorites>
+        </route>
+        <route path="#/login">
+            <login></login>
+        </route>
+        <route path="#/register">
+            <register></register>
+        </route>
+    </router>
+
+
+    <script>
+        export default {
+            base: 'https://dwarves.iut-fbleau.fr/~felix-vi/SAE/',
+            route: 'search',
+            authUser: null,
+            searchs: {
+                items: [],
+                pagination: [],
+                type: 'release',
+            },
+
+            async search(e) {
+                e.preventDefault()
+                const type = e.target.type.value
+                const query = e.target.query.value
+                if (!query) return
+                const result = await window.discogsearch(query, type)
+                this.searchs.items = result.results
+                this.searchs.pagination = result.pagination
+                this.searchs.type = type
+                this.update()
+            },
+
+            onMounted() {
+                observeAuthState(user => {
+                    this.authUser = user
+                    this.update()
+                });
+            },
+
+            addFavoris(id) {
+                window.favorite(id)
+            }
+        }
+    </script>
+
+    <style>
+        #view {
+            padding: 1rem;
+            max-width: 1200px;
+            margin: auto;
+        }
+        
+        form {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 15px;
+        }
+        
+        .card {
+            border: 1px solid #ccc;
+            padding: 10px;
+            text-align: center;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        
+        footer {
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        img {
+            width: 100%;
+            height: auto;
+            border-radius: 4px;
+            margin-bottom: 10px;
+        }
+        
+        h4 {
+            font-size: 1rem;
+            margin: 5px 0;
+        }
+        
+        a {
+            text-decoration: none;
+            color: #007bff;
+        }
+        
+        nav {
+            display: flex;
+            justify-content: space-around;
+            background: #1976d2;
+            padding: 1rem;
+        }
+        
+        button {
+            color: white;
+            background: transparent;
+            border: none;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        
+        button:hover {
+            text-decoration: underline;
+        }
+        
+        nav {
+            background-color: #1976d2;
+            padding: 1rem;
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        nav a {
+            margin: 0 10px;
+            color: white;
+            text-decoration: none;
+        }
+    </style>
+</app>