Feat: Display deck list in decks

frontend/README.md

@@ -9,7 +9,9 @@ Une fois compilé le frontend utilise [Bun](https://bun.sh/).
 - [ ] Fix : Ajouter les icones de couleur pour les tops commandants
 - [ ] Fix : Changer le menu mobile
 - [x] Fix : Changer les cartes recto / verso
-- [ ] Feat : Ajouter la liste des decks dans l'espace decks
+- [x] Feat : Ajouter la liste des decks dans l'espace decks
+- [ ] Fix : Mettre en forme la liste des decks
+- [ ] Feat : Supprimer ou éditer un deck
 - [ ] Feat : En créant un deck, warning si on possède déjà un deck avec ce commandant
 - [ ] Feat : Ajouter un calendrier des évènements Brawlset sur la page d'accueil
 - [ ] Feat : Ajouter une vue globale des statistiques ELO

frontend/src/routes/decks/+page.svelte

@@ -5,12 +5,17 @@
 
     let brawlsets = $state([])
     let deckImporter = $state("")
-    let selectedBset = $state("")
+    let selectedBset = $state("0")
     let deckName = $state("")
     let deckUrl = $state("")
     let commander = $state("")
     let token = $state("")
 
+    let decks = $state("")
+
+    let error = $state("")
+    let valid = $state("")
+
     onMount( async () => {
         const storageData = window.localStorage.getItem("pocketbase_auth")
         if (storageData != null) {
@@ -25,6 +30,22 @@
                 sortedData.sort((a,b) => a.Name.localeCompare(b.Name))
                 brawlsets = sortedData
             })
+
+        fetch("/api/deck", {
+          headers: {Authorization: token, "Content-Type": "application/json"},
+        }).then((res) => {
+          if(res.status == 200) {
+            res.json().then((apiData) => {
+              decks = apiData
+              console.log(apiData)
+            })
+          } else if (res.status == 401 || res.status == 400) {
+            res.json().then((apiData) => {
+              console.log(apiData)
+            })
+          }
+        })
+        
     })
 
     function setCommander(txt) {
@@ -44,6 +65,8 @@
     }
 
     function importDeck(){
+      error = ""
+      valid = ""
       const deckText = deckImporter
       let lines = deckText.split("\n")
       lines = lines.filter((line) => line.match(/[0-9]+\s[\w]+/) != undefined)
@@ -70,10 +93,12 @@
             deckUrl = ""
             commander = ""
             console.log(apiData)
+            valid = apiData["message"]
           })
-        } else if (res.status == 401) {
+        } else if (res.status == 401 || res.status == 400) {
           res.json().then((apiData) => {
             console.log(apiData)
+            error = apiData["message"]
           })
         }
       })
@@ -81,10 +106,10 @@
 
 </script>
 
-<div class="flex flex-col w-full items-center p-4">
-  <div class="flex flex-col-reverse md:flex-row max-w-4xl w-full gap-4">
-    <div class="flex flex-col w-full">
-      <textarea placeholder="Deck list dans le format MTGO" class="h-60" bind:value={deckImporter} oninput={(e) => setCommander(e.target.value)}></textarea>
+<div class="flex flex-col w-full items-center p-4 gap-4">
+  <div class="flex flex-col-reverse md:flex-row max-w-6xl w-full gap-4">
+    <div class="flex flex-col w-full gap-2">
+      <textarea placeholder="Deck list dans le format MTGO" class="h-60 p-2 border-black border-1" bind:value={deckImporter} oninput={(e) => setCommander(e.target.value)}></textarea>
       <span>Commandant : {commander}</span>
     </div>
     <div class="flex flex-col w-full gap-4">
@@ -99,6 +124,30 @@
         {/each}
       </select>
       <Button onclick={importDeck}>Importer</Button>
+      {#if error != ""}
+        <span class="bg-red-200 text-sm rounded-md p-2">{error}</span>
+      {/if}
+      {#if valid != ""}
+        <span class="bg-green-200 text-sm rounded-md p-2">{valid}</span>
+      {/if}
     </div>
   </div>
+  <h2 class="font-beleren text-2xl w-full max-w-6xl">Liste de decks</h2>
+  <div class="w-full max-w-6xl grid grid-cols-2">
+    {#each decks as deck}
+    <details>
+      <summary class="flex-row flex">
+        <h3 class="text-xl">{deck.name}</h3>
+      </summary>
+      <div class="mt-4">
+        <span>{deck.commander.name}</span>
+        <ul class="grid grid-cols-2">
+            {#each deck.cartes as carteData}
+              <li>{carteData.amount}x {carteData.carte.name}</li>
+            {/each}
+        </ul>
+      </div>
+    </details>
+    {/each}
+  </div>
 </div>