mirror of
https://github.com/danbulant/Mangades
synced 2026-06-17 13:21:03 +00:00
implement anilist manga list
This commit is contained in:
Daniel Bulant
parent
8010384624
commit
625d062e0a
3 changed files with 129 additions and 30 deletions
104
src/components/items.svelte
Normal file
104
src/components/items.svelte
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<script>
|
||||
import request from "../util/request";
|
||||
import { goto } from '@roxi/routify/runtime/helpers';
|
||||
|
||||
export var entries;
|
||||
export var itemsList;
|
||||
|
||||
var isLoading = false;
|
||||
async function find(entry) {
|
||||
isLoading = true;
|
||||
var query = new URLSearchParams();
|
||||
query.set("title", entry.media.title.romaji);
|
||||
query.set("limit", 20);
|
||||
console.log(entry);
|
||||
const result = await request("manga", query);
|
||||
console.log(result.data);
|
||||
const item = result.data.find(t => t.attributes.links.al === entry.media.id.toString());
|
||||
console.log(item);
|
||||
if(!item) {
|
||||
alert(`Couldn't find any mangadex entry`);
|
||||
isLoading = false;
|
||||
return
|
||||
}
|
||||
$goto("./" + item.id);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<dialog open>
|
||||
Finding the manga
|
||||
</dialog>
|
||||
{/if}
|
||||
|
||||
<div class="items" class:items-list={itemsList}>
|
||||
{#each entries.sort((a, b) => a.priority - b.priority) as entry}
|
||||
<div class="item" class:r18={entry.media.isAdult} on:click={() => find(entry)}>
|
||||
<div class="flex">
|
||||
<img src={entry.media.coverImage.large} width=100 height=142 alt="{entry.media.title.userPreferred}">
|
||||
<div class="info">
|
||||
<h3>{entry.media.title.userPreferred}</h3>
|
||||
<span>[{entry.progress}/{entry.media.chapters || "?"}]</span> <br>
|
||||
<span>{entry.score || "?"}/10</span>
|
||||
{#if entry.notes}
|
||||
<p>{entry.notes}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
dialog {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
.items {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
}
|
||||
.items-list.items {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.items-list .item img {
|
||||
height: 10rem;
|
||||
}
|
||||
.r18 img {
|
||||
filter: blur(10px);
|
||||
}
|
||||
.info {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: .2s opacity;
|
||||
}
|
||||
.items-list .info {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
.item img {
|
||||
border-radius: 5px;
|
||||
height: 15rem;
|
||||
width: auto;
|
||||
box-shadow: 0 0 0 white;
|
||||
transition: .4s box-shadow, .3s height;
|
||||
}
|
||||
@media(prefers-reduced-motion) {
|
||||
.item img, .item:hover img {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.item:hover img {
|
||||
box-shadow: 0 0 10px grey;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import request from "../util/request";
|
||||
import { goto } from '@roxi/routify/runtime/helpers';
|
||||
import { getUserDetails, getUserManga, isLogedIn } from "../util/anilist";
|
||||
import Items from "../components/items.svelte";
|
||||
|
||||
var name = "";
|
||||
|
||||
|
|
@ -25,8 +26,11 @@
|
|||
|
||||
const anilistID = "8375";
|
||||
|
||||
let userDetails = getUserDetails();
|
||||
let userManga = getUserManga();
|
||||
let userDetails = isLogedIn() && getUserDetails();
|
||||
let userManga = isLogedIn() && getUserManga();
|
||||
let listStyle = false;
|
||||
|
||||
$: userManga.then(t => console.log(t));
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -57,20 +61,25 @@
|
|||
<a href="https://mangadex.org">Mangadex.org</a>
|
||||
</div>
|
||||
|
||||
{#if isLogedIn()}
|
||||
{#await userManga then userManga}
|
||||
{#each userManga.data.MediaListCollection.lists as list}
|
||||
<h2>{list.name}</h2>
|
||||
<div>
|
||||
<label for="list-style">Show as list</label>
|
||||
<input type="checkbox" name="list-style" id="list-style" bind:checked={listStyle}>
|
||||
</div>
|
||||
|
||||
<div class="items">
|
||||
{#each list.entries as entry}
|
||||
<div class="item">
|
||||
<img src={entry.media.coverImage.large} width=100 height=142 alt="{entry.media.title}">
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/await}
|
||||
|
||||
{#if isLogedIn()}
|
||||
<div>
|
||||
{#await userManga then userManga}
|
||||
{#each userManga.data.MediaListCollection.lists as list}
|
||||
<h2>{list.name}</h2>
|
||||
<Items entries={list.entries} itemsList={listStyle} />
|
||||
{/each}
|
||||
{/await}
|
||||
</div>
|
||||
{:else}
|
||||
<p>
|
||||
Sign in via Anilist to search for manga and view your manga list.
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<hr>
|
||||
|
|
@ -97,20 +106,6 @@
|
|||
</main>
|
||||
|
||||
<style lang="postcss">
|
||||
.items {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
}
|
||||
.item img {
|
||||
border-radius: 5px;
|
||||
height: 15rem;
|
||||
width: auto;
|
||||
}
|
||||
.item h4 {
|
||||
margin: 0;
|
||||
}
|
||||
.avatar {
|
||||
border-radius: 999px;
|
||||
height: 4rem;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export const proxy = "https://cors-anywhere.danbulant.workers.dev/?";
|
|||
export const base = proxy + "https://api.mangadex.org/";
|
||||
|
||||
function request(endpoint, query, type = "GET", body) {
|
||||
return fetch(base + endpoint + (query ? "?" + query.toString() : ""), {
|
||||
return fetch(base + endpoint + encodeURIComponent(encodeURIComponent(query ? "?" + query.toString() : "")), {
|
||||
method: type,
|
||||
body: body ? JSON.stringify(body) : undefined
|
||||
}).then(resp => resp.json());
|
||||
|
|
|
|||
Loading…
Reference in a new issue