added tags to frontend anime item

bruno/AniTrack/AniList/GetAuthorizationToken.bru

@@ -12,7 +12,7 @@ post {
 
 headers {
   Accept: application/json
-  Content-Type: application/json
+  Content-Type: application/x-www-form-urlencoded
 }
 
 body:form-urlencoded {
@@ -20,7 +20,7 @@ body:form-urlencoded {
   client_id: {{ANILIST_APP_ID}}
   client_secret: {{ANILIST_SECRET_TOKEN}}
   redirect_uri: http://localhost:6734/callback
-  code: {{code}}
+  code: {{ANILIST_CODE}}
 }
 
 body:multipart-form {

bruno/AniTrack/environments/Dev.bru

@@ -9,7 +9,7 @@ vars {
 }
 vars:secret [
   ANILIST_ACCESS_TOKEN,
-  code,
+  ANILIST_CODE,
   SIMKL_AUTH_TOKEN,
   MAL_CODE,
   MAL_VERIFIER,

build/install_linux.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# copy desktop file
+if [ -e "~/.local/share/applications/AniTrack.desktop" ]; then
+  if [ -d "~/.local/share/applications/" ]; then
+    cp ./AniTrack.desktop ~/.local/share/applications/
+  else
+    mkdir -p ~/.local/share/applications/
+    cp ./AniTrack.desktop ~/.local/share/applications/
+  fi
+fi
+
+# copy icons to xdg folders
+for size in 32 48 64 128; do
+  xdg-icon-resource install --novendor --context apps --size $size ./icon/$size/AniTrack.png AniTrack
+done
+
+# copy AniTrack Binary to $HOME/Applications/
+if ! [ -d "~/Applications" ]; then
+  mkdir -p ~/Applications
+  cp ./bin/AniTrack ~/Applications/
+elif ! [[ -e ~/Applications/AniTrack ]]; then
+  cp ./bin/AniTrack ~/Applications/
+fi
+
+echo "AniTrack has been successfully installed."

frontend/src/anilist/types/AniListCurrentUserWatchListType.ts

@@ -2,79 +2,92 @@ export interface AniListCurrentUserWatchList {
   data: {
     Page: {
       pageInfo: {
-                total: number
+        total: number;
-                perPage: number
+        perPage: number;
-                currentPage: number
+        currentPage: number;
-                lastPage: number
+        lastPage: number;
-                hasNextPage: boolean
+        hasNextPage: boolean;
-            },
+      };
-            mediaList: MediaList[]
+      mediaList: MediaList[];
-        }
+    };
-    }
+  };
 }
 
 export interface AniListGetSingleAnime {
   data: {
-        MediaList: MediaList
+    MediaList: MediaList;
-    }
+  };
 }
 
 export interface MediaList {
-    id: number
+  id: number;
-    mediaId: number
+  mediaId: number;
-    userId: number
+  userId: number;
   media: {
-        id: number
+    id: number;
-        idMal: number
+    idMal: number;
     title: {
-            romaji: string
+      romaji: string;
-            english?: string
+      english?: string;
-            native: string
+      native: string;
-        }
+    };
-        description: string
+    description: string;
     coverImage: {
-            large: string
+      large: string;
-        }
+    };
-        season: string
+    season: string;
-        seasonYear: number
+    seasonYear: number;
-        status: string
+    status: string;
-        episodes?: number
+    episodes?: number;
     nextAiringEpisode?: {
-            airingAt: number
+      airingAt: number;
-            timeUntilAiring: number
+      timeUntilAiring: number;
-            episode: number
+      episode: number;
-        }
+    };
-    }
+    tags: [
-    status: string
+      {
+        id: number;
+        name: string;
+        description: string;
+        rank: number;
+        isMediaSpoiler: boolean;
+        isAdult: boolean;
+      },
+    ];
+    isAdult: boolean;
+  };
+  status: string;
   startedAt: {
-        year: number
+    year: number;
-        month: number
+    month: number;
-        day: number
+    day: number;
-    }
+  };
   completedAt: {
-        year?: number
+    year?: number;
-        month?: number
+    month?: number;
-        day?: number
+    day?: number;
-    }
+  };
-    notes?: string
+  notes?: string;
-    progress: number
+  progress: number;
-    score: number
+  score: number;
-    repeat: number
+  repeat: number;
   user: {
-        id: number
+    id: number;
-        name: string
+    name: string;
     avatar: {
-            large: string
+      large: string;
-            medium: string
+      medium: string;
-        }
+    };
     statistics: {
       anime: {
-                count: number
+        count: number;
-                statuses: [{
+        statuses: [
-                    status: string
+          {
-                    count: number
+            status: string;
-                }]
+            count: number;
-            }
+          },
-        }
+        ];
-    }
+      };
+    };
+  };
 }

frontend/src/helperComponents/Anime.svelte

@@ -8,7 +8,6 @@
         simklLoggedIn,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import { push } from "svelte-spa-router";
-    import { Button } from "flowbite-svelte";
     import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
     import Rating from "./Rating.svelte";
     import {
@@ -28,10 +27,7 @@
         StatusOptions,
     } from "../helperTypes/StatusTypes";
     import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
-    import {
+    import { convertDateToAniList } from "../helperFunctions/convertDateToAniList";
-        convertDateStringToAniList,
-        convertDateToAniList,
-    } from "../helperFunctions/convertDateToAniList";
     import {
         AniListDeleteEntry,
         AniListUpdateEntry,
@@ -45,6 +41,7 @@
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
     import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import Datepicker from "./Datepicker.svelte";
+    import { Badge } from "flowbite-svelte";
     const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
     let isAniListLoggedIn: boolean;
@@ -448,6 +445,7 @@
             currentAniListAnime.data.MediaList.media.nextAiringEpisode.episode -
             1;
     }
+    console.log(currentAniListAnime.data.MediaList.media);
 </script>
 
 <form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
@@ -479,8 +477,23 @@
                             type="button"
                             id="decrement-button"
                             data-input-counter-decrement="quantity-input"
-                            on:click={() =>
+                            on:click={() => {
-                                (currentAniListAnime.data.MediaList.progress -= 1)}
+                                currentAniListAnime.data.MediaList.progress -= 1;
+                                if (
+                                    currentAniListAnime.data.MediaList
+                                        .progress <
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    if (
+                                        currentAniListAnime.data.MediaList
+                                            .repeat === 0
+                                    )
+                                        completedAtDate = null;
+                                }
+                            }}
                             class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
                         >
                             <svg
@@ -529,8 +542,29 @@
                             type="button"
                             id="increment-button"
                             data-input-counter-increment="quantity-input"
-                            on:click={() =>
+                            on:click={() => {
-                                (currentAniListAnime.data.MediaList.progress += 1)}
+                                currentAniListAnime.data.MediaList.progress += 1;
+                                if (
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes ===
+                                    currentAniListAnime.data.MediaList.progress
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[2];
+                                    completedAtDate = new Date();
+                                }
+                                if (
+                                    currentAniListAnime.data.MediaList
+                                        .progress -
+                                        1 ===
+                                    0
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    if (startedAtDate === null)
+                                        startedAtDate = new Date();
+                                }
+                            }}
                             class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
                         >
                             <svg
@@ -564,8 +598,25 @@
                         </div>
                     {/if}
                 </div>
-
+                <div>
-
+                    <label
+                        for="status"
+                        class="text-left block mb-2 text-sm font-medium text-white"
+                        >Status</label
+                    >
+                    <select
+                        id="status"
+                        name="status"
+                        class="border text-sm rounded-lg
+                            block p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400
+                            text-white focus:ring-blue-500 focus:border-blue-500"
+                        bind:value={startingAnilistStatusOption}
+                    >
+                        {#each statusOptions as option}
+                            <option value={option}>{option.aniList}</option>
+                        {/each}
+                    </select>
+                </div>
             </div>
             <div
                 class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36"
@@ -649,7 +700,7 @@
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end"
         >
-            <Button
+            <button
                 disabled={isSubmitting}
                 id="sync-button"
                 class="text-white {$submitSuccess
@@ -678,8 +729,8 @@
                     />
                 </svg>
                 Sync Changes
-            </Button>
+            </button>
-            <Button
+            <button
                 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
                     focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
                     hover:border-gray-600"
@@ -689,7 +740,7 @@
                 }}
             >
                 Go Home
-            </Button>
+            </button>
         </div>
     </div>
     <AnimeTable />
@@ -698,10 +749,10 @@
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-start"
         >
-            <Button
+            <button
                 disabled={isSubmitting}
                 id="delete-button"
-                class="text-white bg-red-700 {$submitSuccess
+                class="text-white {$submitSuccess
                     ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
                     : 'bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 on:click={deleteEntries}
@@ -727,12 +778,12 @@
                     />
                 </svg>
                 Delete Entries
-            </Button>
+            </button>
         </div>
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end"
         >
-            <Button
+            <button
                 disabled={isSubmitting}
                 id="sync-button"
                 class="text-white {$submitSuccess
@@ -761,8 +812,8 @@
                     />
                 </svg>
                 Sync Changes
-            </Button>
+            </button>
-            <Button
+            <button
                 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
                     focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
                     hover:border-gray-600"
@@ -772,12 +823,29 @@
                 }}
             >
                 Go Home
-            </Button>
+            </button>
         </div>
     </div>
 
+    <div class="flex m-5">
         <div>
+            <h3 class="text-2xl">Tags</h3>
+            <div class="mt-2">
+                {#each currentAniListAnime.data.MediaList.media.tags as tag}
+                    <div>
+                        <Badge large border color="blue" class="m-1 w-40"
+                            >{tag.name}</Badge
+                        >
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <div class="ml-5">
             <h3 class="text-2xl">Summary</h3>
-        <p>{@html currentAniListAnime.data.MediaList.media.description}</p>
+            <p class="rounded border border-gray-700 p-2 mt-2">
+                {@html currentAniListAnime.data.MediaList.media.description}
+            </p>
+        </div>
     </div>
 </form>

wails.json

@@ -12,6 +12,6 @@
   },
   "info": {
     "productName": "AniTrack",
-    "productVersion": "0.1.7"
+    "productVersion": "0.1.9"
   }
 }