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

finished started, completed, status and notes and made responsive

Browse Source
This commit is contained in:
John O'Keefe 2024-07-31 12:40:35 -04:00
parent 6e9c2cf46e
commit a0b00de615
1 changed files with 102 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
frontend/src/ChangeDataDialogue.svelte
View File

@ -2,6 +2,7 @@
import {anime} from "./GetAniListSingleItemAndOpenModal.svelte"; import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
import {Button} from "flowbite-svelte"; import {Button} from "flowbite-svelte";
import StarRatting from "@ernane/svelte-star-rating" import StarRatting from "@ernane/svelte-star-rating"
import moment from 'moment'
const ratingInWords = { const ratingInWords = {
0: "Not Reviewed", 0: "Not Reviewed",
@ -61,6 +62,8 @@
score: anime.data.MediaList.score, score: anime.data.MediaList.score,
notes: anime.data.MediaList.notes notes: anime.data.MediaList.notes
} }
let startedAtDate: string
let completedAtDate: string
const changeRating = (e) => { const changeRating = (e) => {
config.score = e.target.valueAsNumber config.score = e.target.valueAsNumber
@ -79,7 +82,11 @@
count++ count++
} }
let startedAtDate = `${values.startedAt.year}-${values.startedAt.month}-${values.startedAt.day}` if (values.startedAt.year > 0) {
let startedAtISODate = new Date(values.startedAt.year, values.startedAt.month - 1, values.startedAt.day)
let startedAtMoment = moment(startedAtISODate)
startedAtDate = startedAtMoment.format('YYYY-MM-DD')
}
const transformStartedAtDate = (e) => { const transformStartedAtDate = (e) => {
const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/ const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
@ -89,31 +96,42 @@
values.startedAt.day = Number(date[3]) values.startedAt.day = Number(date[3])
} }
console.log(startedAtDate) if (values.completedAt.year > 0) {
let completedAtISODate = new Date(values.completedAt.year, values.completedAt.month - 1, values.completedAt.day)
let completedAtMoment = moment(completedAtISODate)
completedAtDate = completedAtMoment.format('YYYY-MM-DD')
}
const transformCompletedAtDate = (e) => {
const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
const date = re.exec(e.target.value)
values.completedAt.year = Number(date[1])
values.completedAt.month = Number(date[2])
values.completedAt.day = Number(date[3])
}
</script> </script>
<div> <div>
<div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4 mt-10"> <div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
<div class="row-span-2 col-span-2 space-y-3"> <div class="md: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: {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 z-30"> <div class="md:col-span-8 ">
<div class="flex flex-row p-10 justify-center gap-x-56"> <div class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-24 lg:gap-x-56">
<div>
<label for="episodes" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Episode
<div class="mr-4"> Progress</label>
<label for="episodes" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Episode Progress</label>
<input <input
type="number" type="number"
name="episodes" name="episodes"
min="0" min="0"
id="episodes" id="episodes"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 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 focus:border-primary-600 block w-24 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" dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
bind:value={values.progress} bind:value={values.progress}
required> required>
@ -121,13 +139,13 @@
<div> <div>
<label for="status" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select <label for="status"
your class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
country</label>
<select id="status" <select id="status"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-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 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" dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
bind:value={values.status}
> >
<option>CURRENT</option> <option>CURRENT</option>
@ -139,45 +157,84 @@
</select> </select>
</div> </div>
</div> </div>
<div class="flex flex-row p-10 justify-center"> <div class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36">
<div class="relative z-40 max-w-sm"> <div>
<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"> <label for="startedAt" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date
<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"/> Started</label>
</svg> <div class="relative max-w-sm">
</div> <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
<!-- <input--> <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
<!-- datepicker--> xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<!-- datepicker-buttons--> <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"/>
<!-- datepicker-autoselect-today--> </svg>
<!-- datepicker-autohide--> </div>
<!-- datepicker-title="Started At"--> <input
<!-- id="startedAt"--> id="startedAt"
<!-- type="text"--> type="date"
<!-- name="startedAt"--> name="startedAt"
<!-- class="z-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-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 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 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" dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
value={startedAtDate} value={startedAtDate}
on:change={transformStartedAtDate} placeholder="Date Started"
> on:change={transformStartedAtDate}
>
</div>
</div> </div>
<div>
<label for="completedAt" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date
Completed</label>
<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
id="completedAt"
type="date"
name="completedAt"
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"
value={completedAtDate}
placeholder="Date Completed"
on:change={transformCompletedAtDate}
>
</div>
</div>
<div>
<label for="repeat"
class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Rewatched</label>
<input
type="number"
name="repeat"
min="0"
id="repeat"
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-24 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.repeat}
required>
</div>
</div>
<div class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center">
<div class="w-full">
<label for="notes" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your
notes</label>
<textarea id="notes" rows="3"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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="Write your thoughts here..."
bind:value={values.notes}></textarea>
</div>
</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 max-w-4-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 <Button
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium