john-okeefe/Anitrack
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

playing with datepicker options

Browse Source
This commit is contained in:
John O'Keefe
2024-07-29 16:54:05 -04:00
parent aac66ec4e8
commit 784e6c0b7d
4 changed files with 120 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
AniListFunctions.go
View File

@@ -3,6 +3,7 @@ package main
import ( import (
"bytes" "bytes"
"encoding/json" "encoding/json"
"fmt"
"io" "io"
"log" "log"
"net/http" "net/http"
@@ -46,26 +47,26 @@ func (a *App) GetAniListItem(aniId int, login bool) AniListGetSingleAnime {
var neededVariables interface{} var neededVariables interface{}
if login { if login {
neededVariables = struct{ neededVariables = struct {
MediaId int `json:"mediaId"` MediaId int `json:"mediaId"`
UserId int `json:"userId"` UserId int `json:"userId"`
ListType string `json:"listType"` ListType string `json:"listType"`
} { }{
MediaId: aniId, MediaId: aniId,
UserId: user.Data.Viewer.ID, UserId: user.Data.Viewer.ID,
ListType: "ANIME", ListType: "ANIME",
} }
} else { } else {
neededVariables = struct { neededVariables = struct {
MediaId int `json:"mediaId"` MediaId int `json:"mediaId"`
ListType string `json:"listType"` ListType string `json:"listType"`
} { }{
MediaId: aniId, MediaId: aniId,
ListType: "ANIME", ListType: "ANIME",
} }
} }
body := struct { body := struct {
Query string `json:"query"` Query string `json:"query"`
Variables interface{} `json:"variables"` Variables interface{} `json:"variables"`
}{ }{
Query: ` Query: `
@@ -135,7 +136,7 @@ func (a *App) GetAniListItem(aniId int, login bool) AniListGetSingleAnime {
} }
returnedBody, _ := AniListQuery(body, false) returnedBody, _ := AniListQuery(body, false)
var post AniListGetSingleAnime var post AniListGetSingleAnime
err := json.Unmarshal(returnedBody, &post) err := json.Unmarshal(returnedBody, &post)
if err != nil { if err != nil {
@@ -310,6 +311,8 @@ func (a *App) GetAniListUserWatchingList(page int, perPage int, sort string) Ani
returnedBody, _ := AniListQuery(body, true) returnedBody, _ := AniListQuery(body, true)
fmt.Println("ReturnedBody: ", string(returnedBody))
var post AniListCurrentUserWatchList var post AniListCurrentUserWatchList
err := json.Unmarshal(returnedBody, &post) err := json.Unmarshal(returnedBody, &post)
if err != nil { if err != nil {

2
frontend/index.html
View File

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

19
frontend/src/App.svelte
View File

@@ -119,6 +119,25 @@
</svg> </svg>
</button> </button>
</div> </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}> <Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
<ChangeDataDialogue/> <ChangeDataDialogue/>
</Modal> </Modal>

122
frontend/src/ChangeDataDialogue.svelte
View File

@@ -78,59 +78,117 @@
const increment = () => { const increment = () => {
count++ 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> </script>
<div> <div>
<div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4"> <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"> <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"> <img class="rounded-lg" src={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
<StarRatting bind:config on:change={changeRating}/> <StarRatting bind:config on:change={changeRating}/>
<p>Rating That Will Be Sent: {config.score * 2}</p> <p>Rating: {config.score * 2}</p>
<p>{ratingInWords[config.score * 2]}</p> <p>{ratingInWords[config.score * 2]}</p>
</div> </div>
<div class="col-span-8"> <div class="col-span-8 z-30">
<form class="flex flex-row"> <div class="flex flex-row p-10 justify-center gap-x-56">
<div class="flex items-center justify-center">
<button on:click={decrement} <div class="mr-4">
class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-gray-400 hover:bg-gray-500"> <label for="episodes" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Episode Progress</label>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <input
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path> type="number"
</svg> name="episodes"
</button> min="0"
<input bind:value={count} class="text-2xl font-bold mx-4" /> id="episodes"
<button on:click={increment} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600"> focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12M6 12h12"></path> bind:value={values.progress}
</svg> required>
</button>
</div> </div>
<div> <div>
<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select <label for="status" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select
your your
country</label> country</label>
<select id="countries" <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"> 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>United States</option> <option>CURRENT</option>
<option>Canada</option> <option>PLANNING</option>
<option>France</option> <option>COMPLETED</option>
<option>Germany</option> <option>DROPPED</option>
</select> <option>PAUSED</option>
<option>REPEATING</option>
</select>
</div>
</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> </div>
</form> <!-- <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>
</div> </div>
<footer class="bg-white rounded-lg shadow m-4 dark:bg-gray-800"> <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"> <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" <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 on:click={() => alert('Handle "success"')}>Sync Changes
</Button> </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"> <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 Cancel
</Button> </Button>
</div> </div>