Damillora/Shioriko
1
0
Fork 0
mirror of https://github.com/Damillora/Shioriko.git synced 2024-11-22 04:17:33 +00:00
Code Issues Projects Releases Wiki Activity

feat: some adjustments to frontend

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/src/EditPostPanel.svelte
View File

@ -18,7 +18,7 @@
const getData = async () => { const getData = async () => {
form.source_url = post.source_url; form.source_url = post.source_url;
form.tags = post.tags; form.tags = post.tags.map(x => x.tagType+":"+x.tagName);
}; };
const onTagChange = (value) => { const onTagChange = (value) => {
@ -47,7 +47,29 @@
<p class="panel-heading">Edit Post</p> <p class="panel-heading">Edit Post</p>
<div class="panel-block column"> <div class="panel-block column">
<div class="row"> <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>
<div class="row"> <div class="row">
<div class="field"> <div class="field">
@ -65,7 +87,7 @@
</div> </div>
<div class="panel-block column"> <div class="panel-block column">
<div class="row"> <div class="row">
<label for="tags" class="label">Tags</label> <label for="tags" class="label">Tags:</label>
</div> </div>
<div class="row"> <div class="row">
<div class="field"> <div class="field">

5
web/app/src/TagLinkNumbered.svelte
View File

@ -7,7 +7,8 @@
let tagType = tag.split(":")[0] ?? ""; let tagType = tag.split(":")[0] ?? "";
let tagName = tag.split(":")[1] ?? ""; let tagName = tag.split(":")[1] ?? "";
let tagDisplay = tagName.split("_").join(" "); let tagDisplay = tagName.split("_").join(" ");
</script> </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
>

16
web/app/src/ViewPostPanel.svelte
View File

@ -21,14 +21,6 @@
</div> </div>
<div class="row">{post.uploader}</div> <div class="row">{post.uploader}</div>
</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="panel-block column">
<div class="row"> <div class="row">
<strong>Original:</strong> <strong>Original:</strong>
@ -45,6 +37,14 @@
{post.width}x{post.height} {post.width}x{post.height}
</div> </div>
</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="panel-block column">
<div class="row"> <div class="row">
<p><strong>Tags:</strong></p> <p><strong>Tags:</strong></p>

51
web/app/src/routes/Home.svelte
View File

@ -1,9 +1,54 @@
<script> <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> </script>
<section class="hero is-primary is-medium"> <section class="hero is-small">
<div class="hero-body"> <div class="hero-body">
<p class="title">Shioriko</p> <div class="container has-text-centered">
<p class="subtitle">Booru-style gallery written in Go and Svelte</p> <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> </div>
</section> </section>

78
web/app/src/routes/Login.svelte
View File

@ -5,7 +5,7 @@
let username = ""; let username = "";
let password = ""; let password = "";
let error = ""; let error = "";
const doLogin = async () => { const doLogin = async () => {
error = ""; error = "";
try { try {
@ -24,43 +24,45 @@
</div> </div>
</section> </section>
<div class="container"> <section class="section">
<form on:submit|preventDefault={doLogin}> <div class="container">
<div class="field"> <form on:submit|preventDefault={doLogin}>
<label for="username" class="label">Username</label>
<div class="control">
<input
id="username"
class="input"
type="text"
placeholder="Username"
bind:value={username}
required
/>
</div>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input
id="password"
class="input"
type="password"
placeholder="Password"
bind:value={password}
required
/>
</div>
</div>
{#if error}
<div class="field"> <div class="field">
<p class="has-text-danger">{error}</p> <label for="username" class="label">Username</label>
<div class="control">
<input
id="username"
class="input"
type="text"
placeholder="Username"
bind:value={username}
required
/>
</div>
</div> </div>
{/if} <div class="field">
<div class="field"> <label for="password" class="label">Password</label>
<div class="control"> <div class="control">
<button class="button is-link">Login</button> <input
id="password"
class="input"
type="password"
placeholder="Password"
bind:value={password}
required
/>
</div>
</div> </div>
</div> {#if error}
</form> <div class="field">
</div> <p class="has-text-danger">{error}</p>
</div>
{/if}
<div class="field">
<div class="control">
<button class="button is-link">Login</button>
</div>
</div>
</form>
</div>
</section>

127
web/app/src/routes/Posts.svelte
View File

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

1
web/app/src/routes/Tags.svelte
View File

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

1
web/app/src/routes/Upload.svelte
View File

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