From a0b00de6157badd6535c638b62eb90d3550ac780 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Wed, 31 Jul 2024 12:40:35 -0400
Subject: [PATCH] finished started, completed, status and notes and made
 responsive

---
 frontend/src/ChangeDataDialogue.svelte | 147 +++++++++++++++++--------
 1 file changed, 102 insertions(+), 45 deletions(-)

diff --git a/frontend/src/ChangeDataDialogue.svelte b/frontend/src/ChangeDataDialogue.svelte
index 923e3ff..43704d3 100644
--- a/frontend/src/ChangeDataDialogue.svelte
+++ b/frontend/src/ChangeDataDialogue.svelte
@@ -2,6 +2,7 @@
     import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
     import {Button} from "flowbite-svelte";
     import StarRatting from "@ernane/svelte-star-rating"
+    import moment from 'moment'
 
     const ratingInWords = {
         0: "Not Reviewed",
@@ -61,6 +62,8 @@
         score: anime.data.MediaList.score,
         notes: anime.data.MediaList.notes
     }
+    let startedAtDate: string
+    let completedAtDate: string
 
     const changeRating = (e) => {
         config.score = e.target.valueAsNumber
@@ -79,7 +82,11 @@
         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 re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
@@ -89,31 +96,42 @@
         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>
 
 <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">
+    <div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
+        <div class="md: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>
+        <div class="md:col-span-8 ">
+            <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
+                        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
+                            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.progress}
                             required>
@@ -121,13 +139,13 @@
 
 
                 <div>
-                    <label for="status" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select
-                        your
-                        country</label>
+                    <label for="status"
+                           class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</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"
+                            bind:value={values.status}
                     >
 
                         <option>CURRENT</option>
@@ -139,45 +157,84 @@
                     </select>
                 </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 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
+                <div>
+
+                    <label for="startedAt" class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white">Date
+                        Started</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="startedAt"
+                                type="date"
+                                name="startedAt"
+                                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={startedAtDate}
-                            on:change={transformStartedAtDate}
-                    >
+                                value={startedAtDate}
+                                placeholder="Date Started"
+                                on:change={transformStartedAtDate}
+                        >
+                    </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>
-    <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">
             <Button
                     class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium