feat: some adjustments to frontend

This commit is contained in:
Damillora 2022-04-15 03:38:53 +07:00
parent 36db313d33
commit 316e52cb72
8 changed files with 194 additions and 113 deletions

View File

@ -18,7 +18,7 @@
const getData = async () => {
form.source_url = post.source_url;
form.tags = post.tags;
form.tags = post.tags.map(x => x.tagType+":"+x.tagName);
};
const onTagChange = (value) => {
@ -47,7 +47,29 @@
<p class="panel-heading">Edit Post</p>
<div class="panel-block column">
<div class="row">
<label for="source" class="label">Source URL</label>
<strong>Uploader:</strong>
</div>
<div class="row">{post.uploader}</div>
</div>
<div class="panel-block column">
<div class="row">
<strong>Original:</strong>
</div>
<div class="row">
<a href={post.image_path}>Image</a>
</div>
</div>
<div class="panel-block column">
<div class="row">
<strong>Dimensions:</strong>
</div>
<div class="row">
{post.width}x{post.height}
</div>
</div>
<div class="panel-block column">
<div class="row">
<label for="source" class="label">Source URL:</label>
</div>
<div class="row">
<div class="field">
@ -65,7 +87,7 @@
</div>
<div class="panel-block column">
<div class="row">
<label for="tags" class="label">Tags</label>
<label for="tags" class="label">Tags:</label>
</div>
<div class="row">
<div class="field">

View File

@ -7,7 +7,8 @@
let tagType = tag.split(":")[0] ?? "";
let tagName = tag.split(":")[1] ?? "";
let tagDisplay = tagName.split("_").join(" ");
</script>
<Link to="/posts?tags={tagName}">{tagDisplay} <span class="is-pulled-right">{num}</span></Link>
<Link to="/posts?tags={tagName}"
>{tagDisplay} <span class="is-pulled-right">{num}</span></Link
>

View File

@ -21,14 +21,6 @@
</div>
<div class="row">{post.uploader}</div>
</div>
<div class="panel-block column">
<div class="row">
<strong>Source URL:</strong>
</div>
<div class="row">
<a href={post.source_url}>{trimUrl(post.source_url)}</a>
</div>
</div>
<div class="panel-block column">
<div class="row">
<strong>Original:</strong>
@ -45,6 +37,14 @@
{post.width}x{post.height}
</div>
</div>
<div class="panel-block column">
<div class="row">
<strong>Source URL:</strong>
</div>
<div class="row">
<a href={post.source_url}>{trimUrl(post.source_url)}</a>
</div>
</div>
<div class="panel-block column">
<div class="row">
<p><strong>Tags:</strong></p>

View File

@ -1,9 +1,54 @@
<script>
import Tags from "svelte-tags-input";
import { getTagAutocomplete } from "../api.js";
import { navigate } from "svelte-routing";
let searchTerms = [];
const onTagChange = (value) => {
searchTerms = value.detail.tags;
};
const onAutocomplete = async () => {
const list = await getTagAutocomplete();
return list;
};
const onSearch = (i) => {
if (searchTerms.length > 0) {
navigate(`/posts?tags=${searchTerms.join("+")}`);
} else {
navigate(`/posts`);
}
};
</script>
<section class="hero is-primary is-medium">
<section class="hero is-small">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">Shioriko</p>
<p class="subtitle">Booru-style gallery written in Go and Svelte</p>
</div>
</div>
<div class="hero-foot">
<div class="container has-text-centered">
<form on:submit|preventDefault={onSearch}>
<div class="field has-addons">
<div class="control is-expanded">
<div class="control" id="tags">
<Tags
tags={searchTerms}
addKeys={[9, 32]}
on:tags={onTagChange}
autoComplete={onAutocomplete}
/>
</div>
</div>
<div class="control">
<button type="submit" class="button is-primary"> Search </button>
</div>
</div>
</form>
</div>
</div>
</section>

View File

@ -24,7 +24,8 @@
</div>
</section>
<div class="container">
<section class="section">
<div class="container">
<form on:submit|preventDefault={doLogin}>
<div class="field">
<label for="username" class="label">Username</label>
@ -63,4 +64,5 @@
</div>
</div>
</form>
</div>
</div>
</section>

View File

@ -2,7 +2,6 @@
import { onMount } from "svelte";
import { getPostSearchTag, getTagAutocomplete } from "../api.js";
import { Link, navigate } from "svelte-routing";
import InfiniteScroll from "svelte-infinite-scroll";
import TagLinkNumbered from "../TagLinkNumbered.svelte";
import queryString from "query-string";
import Tags from "svelte-tags-input";
@ -17,6 +16,7 @@
let totalPages = 1;
let pagination = [];
let posts = [];
let postCount = 0;
let tags = [];
let categorizedTags = {};
@ -26,11 +26,13 @@
posts = data.posts;
tags = data.tags.sort((a, b) => b.postCount - a.postCount);
totalPages = data.totalPage;
postCount = data.postCount;
pagination = paginate(page, totalPages);
} else {
posts = [];
tags = [];
totalPages = 0;
postCount = 0;
pagination = paginate(page, totalPages);
}
};
@ -65,13 +67,18 @@
};
const changePage = (i) => {
if (i >= 1 && i <= totalPages) {
page = i;
getData();
}
};
</script>
<section class="section">
<div class="container">
<div class="block">
<div class="columns is-multiline">
<div class="column is-full">
<div class="block">
<form on:submit|preventDefault={onSearch}>
<div class="field has-addons">
@ -86,15 +93,17 @@
</div>
</div>
<div class="control">
<button type="submit" class="button is-primary">
<button
type="submit"
class="button is-primary"
>
Search
</button>
</div>
</div>
</form>
</div>
<div class="block">
<div class="columns">
</div>
<div class="column is-one-third">
<div class="panel is-primary">
<div class="panel-heading">Tags</div>
@ -105,7 +114,9 @@
<li>
<TagLinkNumbered
class=""
tag={tag.tagType+":"+tag.tagName}
tag={tag.tagType +
":" +
tag.tagName}
num={tag.postCount}
/>
</li>
@ -117,6 +128,31 @@
</div>
<div class="column is-two-thirds">
<div class="columns is-multiline">
<div class="column is-full">
<div class="columns is-multiline">
{#each posts as post, i (post.id)}
<div class="column is-one-quarter">
<div class="block">
<div class="card">
<div class="card-image">
<figure class="image">
<Link
to="/post/{post.id}"
>
<img
alt={post.id}
src={post.thumbnail_path}
/>
</Link>
</figure>
</div>
</div>
</div>
</div>
{/each}
</div>
</div>
<div class="column is-full">
<nav
class="pagination is-centered"
@ -126,12 +162,15 @@
<a
href={null}
on:click={changePage(page - 1)}
class="pagination-previous">Previous</a
class="pagination-previous"
class:is-disabled={page == 1}>Previous</a
>
<a
href={null}
on:click={changePage(page + 1)}
class="pagination-next">Next page</a
class="pagination-next"
class:is-disabled={page == totalPages}
>Next</a
>
<ul class="pagination-list">
{#each pagination as pageEntry}
@ -147,7 +186,7 @@
<a
href={null}
on:click={() =>
(changePage(pageEntry))}
changePage(pageEntry)}
class="pagination-link"
class:is-current={page ==
pageEntry}
@ -160,39 +199,9 @@
</ul>
</nav>
</div>
<div class="column is-full">
<div class="columns is-multiline">
{#each posts as post, i (post.id)}
<div class="column is-one-third">
<div class="block">
<div class="card">
<div class="card-image">
<figure class="image">
<Link
to="/post/{post.id}"
>
<img
alt={post.id}
src={post.thumbnail_path}
/>
</Link>
</figure>
</div>
<div class="card-content" />
</div>
</div>
</div>
{/each}
</div>
</div>
</div>
</div>
</div>
</div>
{#if page >= totalPages}
<div class="notification is-primary">
<p class="has-text-centered">End of posts</p>
</div>
{/if}
</div>
</section>

View File

@ -16,6 +16,7 @@
<section class="section">
<div class="container">
<h1 class="title">Tag List</h1>
<table class="table is-fullwidth">
<thead>
<tr>

View File

@ -53,6 +53,7 @@
<section class="section">
<div class="container">
<h1 class="title">Upload Image</h1>
<form on:submit|preventDefault={onSubmit}>
<div class="field">
<label for="file" class="label">Image File</label>