196 lines
8.3 KiB
Svelte
196 lines
8.3 KiB
Svelte
<script lang="ts">
|
|
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 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 z-30">
|
|
<div class="flex flex-row p-10 justify-center gap-x-56">
|
|
|
|
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</footer>
|
|
</div> |