playing with datepicker options

AniListFunctions.go

@@ -3,6 +3,7 @@ package main
 import (
 	"bytes"
 	"encoding/json"
+	"fmt"
 	"io"
 	"log"
 	"net/http"
@@ -35,16 +36,38 @@ func AniListQuery(body interface{}, login bool) (json.RawMessage, string) {
 	return returnedBody, ""
 }
 
-func (a *App) GetAniListItem(aniId int) AniListGetSingleAnime {
+func (a *App) GetAniListItem(aniId int, login bool) AniListGetSingleAnime {
 	var user = a.GetAniListLoggedInUserId()
-	type Variables struct {
-		UserId   int    `json:"userId"`
-		MediaId  int    `json:"mediaId"`
-		ListType string `json:"listType"`
+	// type Variables struct {
+	// 	UserId   int    `json:"userId"`
+	// 	MediaId  int    `json:"mediaId"`
+	// 	ListType string `json:"listType"`
+	// }
+
+	var neededVariables interface{}
+
+	if login {
+		neededVariables = struct {
+			MediaId  int    `json:"mediaId"`
+			UserId   int    `json:"userId"`
+			ListType string `json:"listType"`
+		}{
+			MediaId:  aniId,
+			UserId:   user.Data.Viewer.ID,
+			ListType: "ANIME",
+		}
+	} else {
+		neededVariables = struct {
+			MediaId  int    `json:"mediaId"`
+			ListType string `json:"listType"`
+		}{
+			MediaId:  aniId,
+			ListType: "ANIME",
+		}
 	}
 	body := struct {
-		Query     string    `json:"query"`
-		Variables Variables `json:"variables"`
+		Query     string      `json:"query"`
+		Variables interface{} `json:"variables"`
 	}{
 		Query: `
 			query($userId: Int, $mediaId: Int, $listType: MediaType) {
@@ -109,11 +132,7 @@ func (a *App) GetAniListItem(aniId int) AniListGetSingleAnime {
 			  }
 			}
 	`,
-		Variables: Variables{
-			MediaId:  aniId,
-			UserId:   user.Data.Viewer.ID,
-			ListType: "ANIME",
-		},
+		Variables: neededVariables,
 	}
 
 	returnedBody, _ := AniListQuery(body, false)
@@ -292,6 +311,8 @@ func (a *App) GetAniListUserWatchingList(page int, perPage int, sort string) Ani
 
 	returnedBody, _ := AniListQuery(body, true)
 
+	fmt.Println("ReturnedBody: ", string(returnedBody))
+
 	var post AniListCurrentUserWatchList
 	err := json.Unmarshal(returnedBody, &post)
 	if err != nil {

AniListTypes.go

@@ -63,7 +63,17 @@ type MediaList struct {
 			Episode         int `json:"episode"`
 		} `json:"nextAiringEpisode"`
 	} `json:"media"`
-	Status   string `json:"status"`
+	Status    string `json:"status"`
+	StartedAt struct {
+		Year  int `json:"year"`
+		Month int `json:"month"`
+		Day   int `json:"day"`
+	} `json:"startedAt"`
+	CompletedAt struct {
+		Year  int `json:"year"`
+		Month int `json:"month"`
+		Day   int `json:"day"`
+	} `json:"completedAt"`
 	Notes    string `json:"notes"`
 	Progress int    `json:"progress"`
 	Score    int    `json:"score"`

bruno/AniTrack/AniList/Get Items/AniList Item.bru

@@ -0,0 +1,105 @@
+meta {
+  name: AniList Item
+  type: graphql
+  seq: 1
+}
+
+post {
+  url: https://graphql.anilist.co
+  body: graphql
+  auth: none
+}
+
+headers {
+  Content-Type: "application/json"
+  Accept: "application/json"
+}
+
+body:graphql {
+  query ($userId: Int, $mediaId: Int, $listType: MediaType) {
+    MediaList(mediaId: $mediaId, userId: $userId, type: $listType) {
+      id
+      mediaId
+      userId
+      media {
+        id
+        idMal
+        title {
+          romaji
+          english
+          native
+        }
+        description
+        coverImage {
+          large
+        }
+        season
+        seasonYear
+        status
+        episodes
+        nextAiringEpisode {
+          airingAt
+          timeUntilAiring
+          episode
+        }
+      }
+      status
+      startedAt {
+        year
+        month
+        day
+      }
+      completedAt {
+        year
+        month
+        day
+      }
+      notes
+      progress
+      score
+      repeat
+      user {
+        id
+        name
+        avatar {
+          large
+          medium
+        }
+        statistics {
+          anime {
+            count
+            statuses {
+              status
+              count
+            }
+          }
+        }
+      }
+    }
+  }
+  
+}
+
+body:graphql:vars {
+  {
+    "userId": 413504,
+    "mediaId": 157371,
+    "listType": "ANIME"
+  }
+}
+
+docs {
+  Title
+  
+  Image
+  
+  Description
+  
+  Episodes
+  
+  Status
+  
+  Season
+  
+  External & Streaming Links
+}

bruno/AniTrack/Get Items/AniList Item.bru

@@ -1,105 +0,0 @@
-meta {
-  name: AniList Item
-  type: graphql
-  seq: 1
-}
-
-post {
-  url: https://graphql.anilist.co
-  body: graphql
-  auth: none
-}
-
-headers {
-  Content-Type: "application/json"
-  Accept: "application/json"
-}
-
-body:graphql {
-  query($userId: Int, $mediaId: Int, $listType: MediaType) {
-  			  MediaList(mediaId: $mediaId, userId: $userId, type: $listType) {
-  				id
-  				mediaId
-  				userId
-  				media {
-  				  id
-  				  idMal
-  				  title {
-  					romaji
-  					english
-  					native
-  				  }
-  				  description
-  				  coverImage {
-  					large
-  				  }
-  				  season
-  				  seasonYear
-  				  status
-  				  episodes
-  				  nextAiringEpisode {
-  					airingAt
-  					timeUntilAiring
-  					episode
-  				  }
-  				}
-  				status
-  				startedAt{
-  				  year
-  				  month
-  				  day
-  				}
-  				completedAt{
-  				  year
-  				  month
-  				  day
-  				}
-  				notes
-  				progress
-  				score
-  				repeat
-  				user {
-  				  id
-  				  name
-  				  avatar {
-  					large
-  					medium
-  				  }
-  				  statistics {
-  					anime {
-  					  count
-  					  statuses {
-  						status
-  						count
-  					  }
-  					}
-  				  }
-  				}
-  			  }
-  			}
-  
-}
-
-body:graphql:vars {
-  {
-    "userId": 413504,
-    "mediaId": 157371,
-    "listType": "ANIME"
-  }
-}
-
-docs {
-  Title
-  
-  Image
-  
-  Description
-  
-  Episodes
-  
-  Status
-  
-  Season
-  
-  External & Streaming Links
-}

bruno/AniTrack/Simkl/Get Items/Search By MalID.bru

@@ -0,0 +1,16 @@
+meta {
+  name: Search By MalID
+  type: http
+  seq: 1
+}
+
+get {
+  url: https://api.simkl.com/search/id?client_id={{SIMKL_CLIENT_ID}}&mal=52991
+  body: none
+  auth: none
+}
+
+params:query {
+  client_id: {{SIMKL_CLIENT_ID}}
+  mal: 52991
+}

bruno/AniTrack/environments/Dev.bru

@@ -1,6 +1,7 @@
 vars {
   ANILIST_APP_ID: {{process.env.ANILIST_APP_ID}}
   ANILIST_SECRET_TOKEN: {{process.env.ANILIST_SECRET_TOKEN}}
+  SIMKL_CLIENT_ID: {{process.env.SIMKL_CLIENT_ID}}
 }
 vars:secret [
   code

frontend/index.html

@@ -7,7 +7,7 @@
 </head>
 <body>
 <div id="app"></div>
-<script src="./node_modules/flowbite/dist/flowbite.js"></script>
 <script src="./src/main.ts" type="module"></script>
+<script src="./node_modules/flowbite/dist/flowbite.js"></script>
 </body>
 </html>

frontend/package.json

@@ -24,8 +24,9 @@
     "vite": "^3.0.7"
   },
   "dependencies": {
+    "@ernane/svelte-star-rating": "^1.1.7",
+    "@popperjs/core": "^2.11.8",
     "flowbite": "^2.4.1",
-    "flowbite-svelte": "^0.46.15",
-    "@popperjs/core": "^2.11.8"
+    "flowbite-svelte": "^0.46.15"
   }
 }

frontend/src/App.svelte

@@ -4,11 +4,33 @@
     import {MediaListSort} from "./anilist/types/AniListTypes";
     import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
     import Header from "./Header.svelte";
+    import StarRatting from '@ernane/svelte-star-rating'
     import {Modal} from "flowbite-svelte";
 
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
 
-   let aniListLoggedIn = false
+    const config = {
+        readOnly: false,
+        countStars: 5,
+        range: {
+            min: 0,
+            max: 5,
+            step: 0.5
+        },
+        score: 0.0,
+        showScore: true,
+        scoreFormat: function(){ return `(${this.score.toFixed(1)}/${this.countStars})` },
+        name: "",
+        starConfig: {
+            size: 20,
+            fillColor: '#F9ED4F',
+            strokeColor: "#e2c714",
+            unfilledColor: '#FFF',
+            strokeUnfilledColor: '#000'
+        }
+    }
+
+    let aniListLoggedIn = false
     let aniListWatchlist: AniListCurrentUserWatchList
     let page = 1
     let perPage = 20
@@ -21,6 +43,18 @@
         })
     }
 
+    let count = 1;
+
+    const decrement = () => {
+        if (count > 0) {
+            count--
+        }
+    }
+
+    const increment = () => {
+        count++
+    }
+
 
 </script>
 
@@ -41,31 +75,70 @@
             <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
                 {#each aniListWatchlist.data.Page.mediaList as media}
                     <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
-                        <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group">
-                            <img class="rounded-lg" src={media.media.coverImage.large} alt={
-                            media.media.title.english === "" ?
-                                media.media.title.romaji :
-                                media.media.title.english
-                        }/>
-                            <h3 class="mt-4 text-sm text-white-700">{
+                        <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)} class="group">
+                            <div class="flex flex-col items-center">
+                                <img class="rounded-lg" src={media.media.coverImage.large} alt={
                                 media.media.title.english === "" ?
                                     media.media.title.romaji :
                                     media.media.title.english
-                            }</h3>
-                            <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
-                                / {media.media.nextAiringEpisode.episode !== 0 ?
-                                    media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
-                            {#if media.media.episodes > 0}
-                                <p class="mt-1 text-lg font-medium text-white-900">Total
-                                    Episodes: {media.media.episodes}</p>
-                            {/if}
+                            }/>
+                                {config.score = media.score / 2.0}
+                                <StarRatting {config}/>
+                                <h3 class="mt-4 text-sm text-white-700">{
+                                    media.media.title.english === "" ?
+                                        media.media.title.romaji :
+                                        media.media.title.english
+                                }</h3>
+                                <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
+                                    / {media.media.nextAiringEpisode.episode !== 0 ?
+                                        media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
+                                {#if media.media.episodes > 0}
+                                    <p class="mt-1 text-lg font-medium text-white-900">Total
+                                        Episodes: {media.media.episodes}</p>
+                                {/if}
+                            </div>
                         </button>
                     </div>
                 {/each}
             </div>
         </div>
     {/if}
-    <Modal title={$title} bind:open={$anilistModal} {size} autoclose>
+
+    <div class="flex items-center justify-center">
+        <button on:click={decrement}
+                class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-gray-400 hover:bg-gray-500">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+            </svg>
+        </button>
+        <input bind:value={count} class="text-2xl font-bold mx-4" />
+        <button on:click={increment}
+                class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12M6 12h12"></path>
+            </svg>
+        </button>
+    </div>
+<!--    <div class="relative max-w-sm">-->
+<!--        <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">-->
+<!--            <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">-->
+<!--                <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>-->
+<!--            </svg>-->
+<!--        </div>-->
+<!--        <input-->
+<!--                datepicker-->
+<!--                datepicker-buttons-->
+<!--                datepicker-autoselect-today-->
+<!--                datepicker-autohide-->
+<!--                datepicker-title="Started At"-->
+<!--                id="startedAt"-->
+<!--                type="text"-->
+<!--                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500-->
+<!--                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600-->
+<!--                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
+<!--                placeholder="Select date">-->
+<!--    </div>-->
+    <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
         <ChangeDataDialogue/>
     </Modal>
 </main>

frontend/src/ChangeDataDialogue.svelte

@@ -1,40 +1,196 @@
 <script lang="ts">
-    import { anime } from "./GetAniListSingleItemAndOpenModal.svelte";
+    import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
     import {Button} from "flowbite-svelte";
+    import StarRatting from "@ernane/svelte-star-rating"
+
+    const ratingInWords = {
+        0: "Not Reviewed",
+        1: "Apalling",
+        2: "Horrible",
+        3: "Very Bad",
+        4: "Bad",
+        5: "Average",
+        6: "Fine",
+        7: "Good",
+        8: "Very Good",
+        9: "Great",
+        10: "Masterpiece",
+    }
 
     const title = anime.data.MediaList.media.title.english !== "" ?
         anime.data.MediaList.media.title.english :
         anime.data.MediaList.media.title.romaji
+
+    let config = {
+        readOnly: false,
+        countStars: 5,
+        range: {
+            min: 0,
+            max: 5,
+            step: 0.5
+        },
+        score: anime.data.MediaList.score / 2,
+        showScore: false,
+        scoreFormat: function () {
+            return `(${this.score.toFixed(1)}/${this.countStars})`
+        },
+        name: "",
+        starConfig: {
+            size: 32,
+            fillColor: '#F9ED4F',
+            strokeColor: "#e2c714",
+            unfilledColor: '#FFF',
+            strokeUnfilledColor: '#000'
+        }
+    }
+
+    let values = {
+        progress: anime.data.MediaList.progress,
+        status: anime.data.MediaList.status,
+        startedAt: {
+            year: anime.data.MediaList.startedAt.year,
+            month: anime.data.MediaList.startedAt.month,
+            day: anime.data.MediaList.startedAt.day
+        },
+        completedAt: {
+            year: anime.data.MediaList.completedAt.year,
+            month: anime.data.MediaList.completedAt.month,
+            day: anime.data.MediaList.completedAt.day
+        },
+        repeat: anime.data.MediaList.repeat,
+        score: anime.data.MediaList.score,
+        notes: anime.data.MediaList.notes
+    }
+
+    const changeRating = (e) => {
+        config.score = e.target.valueAsNumber
+        values.score = e.target.valueAsNumber * 2
+    }
+
+    let count = 1;
+
+    const decrement = () => {
+        if (count > 0) {
+            count--
+        }
+    }
+
+    const increment = () => {
+        count++
+    }
+
+    let startedAtDate = `${values.startedAt.year}-${values.startedAt.month}-${values.startedAt.day}`
+
+    const transformStartedAtDate = (e) => {
+        const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
+        const date = re.exec(e.target.value)
+        values.startedAt.year = Number(date[1])
+        values.startedAt.month = Number(date[2])
+        values.startedAt.day = Number(date[3])
+    }
+
+    console.log(startedAtDate)
 </script>
 
 <div>
-    <div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4">
-        <div class="row-span-2 col-span-2">
+    <div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4 mt-10">
+        <div class="row-span-2 col-span-2 space-y-3">
             <img class="rounded-lg" src={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
+            <StarRatting bind:config on:change={changeRating}/>
+            <p>Rating:  {config.score * 2}</p>
+            <p>{ratingInWords[config.score * 2]}</p>
         </div>
 
-        <div class="col-span-8">
-            <form class="flex flex-row">
-                <div>
-                    <label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select your
-                        country</label>
-                    <select id="countries"
-                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+        <div class="col-span-8 z-30">
+            <div class="flex flex-row p-10 justify-center gap-x-56">
 
-                        <option>United States</option>
-                        <option>Canada</option>
-                        <option>France</option>
-                        <option>Germany</option>
+
+                <div class="mr-4">
+                    <label for="episodes" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Episode Progress</label>
+                    <input
+                            type="number"
+                            name="episodes"
+                            min="0"
+                            id="episodes"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
+                            focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
+                            dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+                            bind:value={values.progress}
+                            required>
+                </div>
+
+
+                <div>
+                    <label for="status" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select
+                        your
+                        country</label>
+                    <select id="status"
+                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
+                            focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+                            dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                    >
+
+                        <option>CURRENT</option>
+                        <option>PLANNING</option>
+                        <option>COMPLETED</option>
+                        <option>DROPPED</option>
+                        <option>PAUSED</option>
+                        <option>REPEATING</option>
                     </select>
                 </div>
-            </form>
+            </div>
+            <div class="flex flex-row p-10 justify-center">
+
+                <div class="relative z-40 max-w-sm">
+                    <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
+                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                            <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
+                        </svg>
+                    </div>
+<!--                    <input-->
+<!--                            datepicker-->
+<!--                            datepicker-buttons-->
+<!--                            datepicker-autoselect-today-->
+<!--                            datepicker-autohide-->
+<!--                            datepicker-title="Started At"-->
+<!--                            id="startedAt"-->
+<!--                            type="text"-->
+<!--                            name="startedAt"-->
+<!--                            class="z-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500-->
+<!--                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600-->
+<!--                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
+<!--                            value={`${values.startedAt.year}-${values.startedAt.month}-${values.startedAt.day}`}-->
+<!--                            on:change={transformStartedAtDate}-->
+<!--                    >-->
+                    <input
+                            id="startedAt"
+                            type="date"
+                            name="startedAt"
+                            class="z-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500
+                            focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600
+                            dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                            value={startedAtDate}
+                            on:change={transformStartedAtDate}
+                    >
+                </div>
+
+            </div>
         </div>
     </div>
     <footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800">
         <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end">
-            <Button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" on:click={() => alert('Handle "success"')}>Sync Changes</Button>
-            <Button class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Cancel</Button>
+            <Button
+                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium
+                    rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none
+                    dark:focus:ring-blue-800"
+                    on:click={() => alert('Handle "success"')}>Sync Changes
+            </Button>
+            <Button
+                    class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4
+                    focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
+                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
+                Cancel
+            </Button>
         </div>
     </footer>
-</div>
-
+</div>

frontend/src/GetAniListSingleItemAndOpenModal.svelte

@@ -7,8 +7,8 @@
     export let title = writable("")
     export let anilistModal = writable(false);
 
-    export function GetAniListSingleItemAndOpenModal(aniId: number): void {
-        GetAniListItem(aniId).then(result => {
+    export function GetAniListSingleItemAndOpenModal(aniId: number, login: boolean): void {
+        GetAniListItem(aniId, login).then(result => {
             anime = result
             title.set(anime.data.MediaList.media.title.english === "" ?
                 anime.data.MediaList.media.title.romaji :

frontend/src/Search.svelte

@@ -10,7 +10,7 @@
 
     function runAniListSearch(): void {
         AniListSearch(aniSearch).then(result => {
-            console.log(result)
+            console.log(result.data.Page.media[5])
             aniListSearch = result
             aniListSearchActive = true
         })
@@ -52,7 +52,7 @@
                 {#each aniListSearch.data.Page.media as media}
                     <li class="w-full">
                         <button on:click={() => {
-                            GetAniListSingleItemAndOpenModal(media.id)
+                            GetAniListSingleItemAndOpenModal(media.id, false)
                         }}
                                 class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg">
                             <img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large}

frontend/src/anilist/types/AniListCurrentUserWatchListType.ts

@@ -46,6 +46,16 @@ export interface MediaList {
         }
     }
     status: string
+    startedAt: {
+        year: number
+        month: number
+        day: number
+    }
+    completedAt: {
+        year?: number
+        month?: number
+        day?: number
+    }
     notes?: string
     progress: number
     score: number

frontend/wailsjs/go/main/App.d.ts

@@ -8,7 +8,7 @@ export function AniListSearch(arg1:string):Promise<any>;
 
 export function AniListUpdateEntry(arg1:number,arg2:string,arg3:string,arg4:number,arg5:number,arg6:string,arg7:number,arg8:number,arg9:number,arg10:number,arg11:number,arg12:number):Promise<any>;
 
-export function GetAniListItem(arg1:number):Promise<main.AniListGetSingleAnime>;
+export function GetAniListItem(arg1:number,arg2:boolean):Promise<main.AniListGetSingleAnime>;
 
 export function GetAniListLoggedInUserId():Promise<main.AniListUser>;
 

frontend/wailsjs/go/main/App.js

@@ -14,8 +14,8 @@ export function AniListUpdateEntry(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg
   return window['go']['main']['App']['AniListUpdateEntry'](arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11, arg12);
 }
 
-export function GetAniListItem(arg1) {
-  return window['go']['main']['App']['GetAniListItem'](arg1);
+export function GetAniListItem(arg1, arg2) {
+  return window['go']['main']['App']['GetAniListItem'](arg1, arg2);
 }
 
 export function GetAniListLoggedInUserId() {

frontend/wailsjs/go/models.ts

@@ -98,6 +98,10 @@ export namespace main {
 	    // Go type: struct { ID int "json:\"id\""; IDMal int "json:\"idMal\""; Title struct { Romaji string "json:\"romaji\""; English string "json:\"english\""; Native string "json:\"native\"" } "json:\"title\""; Description string "json:\"description\""; CoverImage struct { Large string "json:\"large\"" } "json:\"coverImage\""; Season string "json:\"season\""; SeasonYear int "json:\"seasonYear\""; Status string "json:\"status\""; Episodes int "json:\"episodes\""; NextAiringEpisode struct { AiringAt int "json:\"airingAt\""; TimeUntilAiring int "json:\"timeUntilAiring\""; Episode int "json:\"episode\"" } "json:\"nextAiringEpisode\"" }
 	    media: any;
 	    status: string;
+	    // Go type: struct { Year int "json:\"year\""; Month int "json:\"month\""; Day int "json:\"day\"" }
+	    startedAt: any;
+	    // Go type: struct { Year int "json:\"year\""; Month int "json:\"month\""; Day int "json:\"day\"" }
+	    completedAt: any;
 	    notes: string;
 	    progress: number;
 	    score: number;
@@ -116,6 +120,8 @@ export namespace main {
 	        this.userId = source["userId"];
 	        this.media = this.convertValues(source["media"], Object);
 	        this.status = source["status"];
+	        this.startedAt = this.convertValues(source["startedAt"], Object);
+	        this.completedAt = this.convertValues(source["completedAt"], Object);
 	        this.notes = source["notes"];
 	        this.progress = source["progress"];
 	        this.score = source["score"];