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

added rating

Browse Source
This commit is contained in:
John O'Keefe 2024-07-27 12:59:31 -04:00
parent 205b5d075f
commit b24a8fb5f6
1 changed files with 113 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/ChangeDataDialogue.svelte
View File

@ -1,40 +1,137 @@
<script lang="ts">
import { anime } from "./GetAniListSingleItemAndOpenModal.svelte";
import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
import {Button} from "flowbite-svelte";
import StarRatting from "@ernane/svelte-star-rating"
const ratingInWords = {
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++
}
</script>
<div>
<div class="grid grid-rows-2 grid-cols-10 grid-flow-col gap-4">
<div class="row-span-2 col-span-2">
<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 That Will Be Sent: {config.score * 2}</p>
<p>{ratingInWords[config.score * 2]}</p>
</div>
<div class="col-span-8">
<form class="flex flex-row">
<div>
<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select your
country</label>
<select id="countries"
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>Canada</option>
<option>France</option>
<option>Germany</option>
</select>
<div class="flex items-center justify-center">
<button on:click={decrement}
class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-gray-400 hover:bg-gray-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
</svg>
</button>
<input bind:value={count} class="text-2xl font-bold mx-4" />
<button on:click={increment}
class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12M6 12h12"></path>
</svg>
</button>
</div>
<div>
<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Select
your
country</label>
<select id="countries"
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>Canada</option>
<option>France</option>
<option>Germany</option>
</select>
</div>
</form>
</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>
<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>
</div>