significantly improved datepicker
This commit is contained in:
parent
896c6640e2
commit
c9c6650829
@ -11,7 +11,10 @@
|
||||
import { Button } from "flowbite-svelte";
|
||||
import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
|
||||
import Rating from "./Rating.svelte";
|
||||
import convertAniListDateToString from "../helperFunctions/convertAniListDateToString";
|
||||
import {
|
||||
convertAniListDateToString,
|
||||
convertAniListDateToDate,
|
||||
} from "../helperFunctions/convertAniListDateIn";
|
||||
import AnimeTable from "./AnimeTable.svelte";
|
||||
import type {
|
||||
MALAnime,
|
||||
@ -25,7 +28,10 @@
|
||||
StatusOptions,
|
||||
} from "../helperTypes/StatusTypes";
|
||||
import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
|
||||
import convertDateStringToAniList from "../helperFunctions/convertDateStringToAniList";
|
||||
import {
|
||||
convertDateStringToAniList,
|
||||
convertDateToAniList,
|
||||
} from "../helperFunctions/convertDateToAniList";
|
||||
import {
|
||||
AniListDeleteEntry,
|
||||
AniListUpdateEntry,
|
||||
@ -39,6 +45,7 @@
|
||||
import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
|
||||
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
||||
import Datepicker from "./Datepicker.svelte";
|
||||
const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
|
||||
|
||||
let isAniListLoggedIn: boolean;
|
||||
let isMalLoggedIn: boolean;
|
||||
@ -79,10 +86,10 @@
|
||||
(option) =>
|
||||
currentAniListAnime.data.MediaList.status === option.aniList,
|
||||
)[0];
|
||||
const startedAtDate = convertAniListDateToString(
|
||||
let startedAtDate: Date | null = convertAniListDateToDate(
|
||||
currentAniListAnime.data.MediaList.startedAt,
|
||||
);
|
||||
const completedAtDate = convertAniListDateToString(
|
||||
let completedAtDate: Date | null = convertAniListDateToDate(
|
||||
currentAniListAnime.data.MediaList.completedAt,
|
||||
);
|
||||
|
||||
@ -104,19 +111,34 @@
|
||||
notes: currentAniListAnime.data.MediaList.notes,
|
||||
});
|
||||
|
||||
if (isMalLoggedIn)
|
||||
if (isMalLoggedIn) {
|
||||
let startDate = "";
|
||||
let finishDate = "";
|
||||
if (currentMalAnime.my_list_status.start_date !== "") {
|
||||
const startArray = re.exec(
|
||||
currentMalAnime.my_list_status.start_date,
|
||||
);
|
||||
startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
|
||||
}
|
||||
if (currentMalAnime.my_list_status.finish_date !== "") {
|
||||
const finishArray = re.exec(
|
||||
currentMalAnime.my_list_status.finish_date,
|
||||
);
|
||||
finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
|
||||
}
|
||||
AddAnimeServiceToTable({
|
||||
id: `m-${currentMalAnime.id}`,
|
||||
title: currentMalAnime.title,
|
||||
service: "MyAnimeList",
|
||||
progress: currentMalAnime.my_list_status.num_episodes_watched,
|
||||
status: currentMalAnime.my_list_status.status,
|
||||
startedAt: currentMalAnime.my_list_status.start_date,
|
||||
completedAt: currentMalAnime.my_list_status.finish_date,
|
||||
startedAt: startDate,
|
||||
completedAt: finishDate,
|
||||
score: currentMalAnime.my_list_status.score,
|
||||
repeat: currentMalAnime.my_list_status.num_times_rewatched,
|
||||
notes: currentMalAnime.my_list_status.comments,
|
||||
});
|
||||
}
|
||||
|
||||
if (isSimklLoggedIn && Object.keys(currentSimklAnime).length > 0)
|
||||
AddAnimeServiceToTable({
|
||||
@ -138,8 +160,8 @@
|
||||
rating: number;
|
||||
episodes: number;
|
||||
status: StatusOption;
|
||||
startedAt: string;
|
||||
completedAt: string;
|
||||
startedAt: Date | null;
|
||||
completedAt: Date | null;
|
||||
repeat: number;
|
||||
notes: string;
|
||||
} = {
|
||||
@ -151,8 +173,8 @@
|
||||
mal: "",
|
||||
simkl: "",
|
||||
},
|
||||
startedAt: "",
|
||||
completedAt: "",
|
||||
startedAt: null,
|
||||
completedAt: null,
|
||||
repeat: 0,
|
||||
notes: "",
|
||||
};
|
||||
@ -189,8 +211,8 @@
|
||||
score: submitData.rating,
|
||||
repeat: submitData.repeat,
|
||||
notes: submitData.notes,
|
||||
startedAt: convertDateStringToAniList(submitData.startedAt),
|
||||
completedAt: convertDateStringToAniList(submitData.completedAt),
|
||||
startedAt: convertDateToAniList(startedAtDate),
|
||||
completedAt: convertDateToAniList(completedAtDate),
|
||||
};
|
||||
await AniListUpdateEntry(body).then(
|
||||
(value: AniListGetSingleAnime) => {
|
||||
@ -245,6 +267,20 @@
|
||||
value.my_list_status.comments = malAnimeReturn.comments;
|
||||
return value;
|
||||
});
|
||||
let startDate = "";
|
||||
let finishDate = "";
|
||||
if (currentMalAnime.my_list_status.start_date !== "") {
|
||||
const startArray = re.exec(
|
||||
currentMalAnime.my_list_status.start_date,
|
||||
);
|
||||
startDate = `${startArray[2]}-${startArray[3]}-${startArray[1]}`;
|
||||
}
|
||||
if (currentMalAnime.my_list_status.finish_date !== "") {
|
||||
const finishArray = re.exec(
|
||||
currentMalAnime.my_list_status.finish_date,
|
||||
);
|
||||
finishDate = `${finishArray[2]}-${finishArray[3]}-${finishArray[1]}`;
|
||||
}
|
||||
AddAnimeServiceToTable({
|
||||
id: `m-${currentMalAnime.id}`,
|
||||
title: currentMalAnime.title,
|
||||
@ -252,8 +288,8 @@
|
||||
progress:
|
||||
currentMalAnime.my_list_status.num_episodes_watched,
|
||||
status: currentMalAnime.my_list_status.status,
|
||||
startedAt: currentMalAnime.my_list_status.start_date,
|
||||
completedAt: currentMalAnime.my_list_status.finish_date,
|
||||
startedAt: startDate,
|
||||
completedAt: finishDate,
|
||||
score: currentMalAnime.my_list_status.score,
|
||||
repeat: currentMalAnime.my_list_status
|
||||
.num_times_rewatched,
|
||||
@ -414,7 +450,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
/B
|
||||
<form on:submit|preventDefault={handleSubmit} class="container pt-3 pb-10">
|
||||
<h1 class="text-white font-bold text-left text-xl pb-3">
|
||||
{title}
|
||||
@ -559,34 +594,16 @@
|
||||
class="text-left block mb-2 text-sm font-medium 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-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="border text-sm rounded-lg
|
||||
focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 bg-gray-700 border-gray-600
|
||||
placeholder-gray-400 text-white"
|
||||
value={startedAtDate}
|
||||
placeholder="Date Started"
|
||||
/>
|
||||
<Datepicker showActionButtons />
|
||||
</div>
|
||||
<Datepicker
|
||||
bind:value={startedAtDate}
|
||||
color="slate"
|
||||
dateFormat={{
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
}}
|
||||
showActionButtons
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
@ -594,33 +611,16 @@
|
||||
class="text-left block mb-2 text-sm font-medium 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-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="border text-sm rounded-lg
|
||||
block w-full ps-10 p-2.5 bg-gray-700 border-gray-600
|
||||
placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
|
||||
value={completedAtDate}
|
||||
placeholder="Date Completed"
|
||||
/>
|
||||
</div>
|
||||
<Datepicker
|
||||
bind:value={completedAtDate}
|
||||
color="slate"
|
||||
dateFormat={{
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
}}
|
||||
showActionButtons
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
|
||||
@ -61,6 +61,8 @@
|
||||
return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
|
||||
case "purple":
|
||||
return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
|
||||
case "slate":
|
||||
return "focus:ring-2 focus:ring-slate-500 dark:focus:ring-slate-400";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
@ -80,6 +82,8 @@
|
||||
return "bg-yellow-100 dark:bg-yellow-900";
|
||||
case "purple":
|
||||
return "bg-purple-100 dark:bg-purple-900";
|
||||
case "slate":
|
||||
return "bg-slate-100 dark:bg-slate-900";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
@ -293,7 +297,7 @@
|
||||
<input
|
||||
bind:this={inputElement}
|
||||
type="text"
|
||||
class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
|
||||
class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
|
||||
color,
|
||||
)} {inputClass}"
|
||||
{placeholder}
|
||||
|
||||
37
frontend/src/helperFunctions/convertAniListDateIn.ts
Normal file
37
frontend/src/helperFunctions/convertAniListDateIn.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import moment from "moment";
|
||||
|
||||
const convertAniListDateToString = (date: {
|
||||
year?: number;
|
||||
month?: number;
|
||||
day?: number;
|
||||
}): string => {
|
||||
if (
|
||||
date.year === undefined ||
|
||||
(date.year === 0 && date.month === undefined) ||
|
||||
(date.month === 0 && date.day === undefined) ||
|
||||
date.day === 0
|
||||
) {
|
||||
return "";
|
||||
}
|
||||
const newISODate = new Date(date.year, date.month - 1, date.day);
|
||||
const newMoment = moment(newISODate);
|
||||
return newMoment.format("MM-DD-YYYY");
|
||||
};
|
||||
|
||||
const convertAniListDateToDate = (date: {
|
||||
year?: number;
|
||||
month?: number;
|
||||
day?: number;
|
||||
}): Date | null => {
|
||||
if (
|
||||
date.year === undefined ||
|
||||
(date.year === 0 && date.month === undefined) ||
|
||||
(date.month === 0 && date.day === undefined) ||
|
||||
date.day === 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
return new Date(date.year, date.month - 1, date.day);
|
||||
};
|
||||
|
||||
export { convertAniListDateToString, convertAniListDateToDate };
|
||||
@ -1,17 +0,0 @@
|
||||
import moment from "moment";
|
||||
|
||||
export default (date: {
|
||||
year?: number,
|
||||
month?: number,
|
||||
day?: number,
|
||||
}): string => {
|
||||
if (date.year === undefined || date.year === 0
|
||||
&& date.month === undefined || date.month === 0
|
||||
&& date.day === undefined || date.day === 0
|
||||
) {
|
||||
return ""
|
||||
}
|
||||
const newISODate = new Date(date.year, date.month - 1, date.day)
|
||||
const newMoment = moment(newISODate)
|
||||
return newMoment.format('YYYY-MM-DD')
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
type Date = {
|
||||
year: number,
|
||||
month: number,
|
||||
day: number,
|
||||
}
|
||||
|
||||
export default (date: string): Date => {
|
||||
if (date === "") {
|
||||
return {
|
||||
year: 0,
|
||||
month: 0,
|
||||
day: 0,
|
||||
}
|
||||
}
|
||||
const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/
|
||||
const newDate = re.exec(date)
|
||||
return {
|
||||
year: Number(newDate[1]),
|
||||
month: Number(newDate[2]),
|
||||
day: Number(newDate[3])
|
||||
}
|
||||
}
|
||||
39
frontend/src/helperFunctions/convertDateToAniList.ts
Normal file
39
frontend/src/helperFunctions/convertDateToAniList.ts
Normal file
@ -0,0 +1,39 @@
|
||||
type AnilistDate = {
|
||||
year: number;
|
||||
month: number;
|
||||
day: number;
|
||||
};
|
||||
|
||||
const convertDateStringToAniList = (date: string): AnilistDate => {
|
||||
if (date === "") {
|
||||
return {
|
||||
year: 0,
|
||||
month: 0,
|
||||
day: 0,
|
||||
};
|
||||
}
|
||||
const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
|
||||
const newDate = re.exec(date);
|
||||
return {
|
||||
year: Number(newDate[1]),
|
||||
month: Number(newDate[2]),
|
||||
day: Number(newDate[3]),
|
||||
};
|
||||
};
|
||||
|
||||
const convertDateToAniList = (date: Date | null): AnilistDate => {
|
||||
if (date === null) {
|
||||
return {
|
||||
year: 0,
|
||||
month: 0,
|
||||
day: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
year: Number(date.getFullYear()),
|
||||
month: Number(date.getMonth()) + 1,
|
||||
day: Number(date.getDate()),
|
||||
};
|
||||
};
|
||||
|
||||
export { convertDateStringToAniList, convertDateToAniList };
|
||||
Loading…
x
Reference in New Issue
Block a user