playing with datepicker options
This commit is contained in:
parent
aac66ec4e8
commit
784e6c0b7d
@ -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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user