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

15
AniListFunctions.go
View File

@@ -3,6 +3,7 @@ package main
import (
"bytes"
"encoding/json"
"fmt"
"io"
"log"
"net/http"
@@ -46,26 +47,26 @@ func (a *App) GetAniListItem(aniId int, login bool) AniListGetSingleAnime {
var neededVariables interface{}
if login {
neededVariables = struct{
MediaId int `json:"mediaId"`
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"`
MediaId int `json:"mediaId"`
ListType string `json:"listType"`
} {
}{
MediaId: aniId,
ListType: "ANIME",
}
}
body := struct {
Query string `json:"query"`
Query string `json:"query"`
Variables interface{} `json:"variables"`
}{
Query: `
@@ -310,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 {

2
frontend/index.html
View File

@@ -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>

19
frontend/src/App.svelte
View File

@@ -119,6 +119,25 @@
</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>

122
frontend/src/ChangeDataDialogue.svelte
View File

@@ -78,59 +78,117 @@
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="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 That Will Be Sent: {config.score * 2}</p>
<p>Rating: {config.score * 2}</p>
<p>{ratingInWords[config.score * 2]}</p>
</div>
<div class="col-span-8">
<form class="flex flex-row">
<div class="col-span-8 z-30">
<div class="flex flex-row p-10 justify-center gap-x-56">
<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 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="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>
<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>United States</option>
<option>Canada</option>
<option>France</option>
<option>Germany</option>
</select>
<option>CURRENT</option>
<option>PLANNING</option>
<option>COMPLETED</option>
<option>DROPPED</option>
<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>
</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>
<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"
<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">
<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>