From 3ed594ab880faa7016abd10d5e7764b4b86043e7 Mon Sep 17 00:00:00 2001 From: Damillora Date: Fri, 15 Apr 2022 00:12:07 +0700 Subject: [PATCH] feat: redesign of some pages --- pkg/app/post_routes.go | 5 +- pkg/models/item.go | 7 +- pkg/models/responses.go | 1 + web/app/src/AuthCheck.svelte | 12 ++ web/app/src/EditPostPanel.svelte | 90 ++++++++++++++ web/app/src/TagLink.svelte | 2 +- web/app/src/TagLinkNumbered.svelte | 13 ++ web/app/src/ViewPostPanel.svelte | 78 ++++++++++++ web/app/src/main.scss | 4 +- web/app/src/routes/Post.svelte | 116 +++++++----------- web/app/src/routes/Posts.svelte | 186 +++++++++++++++++++---------- web/app/src/routes/Tags.svelte | 6 - web/app/src/routes/Upload.svelte | 6 - web/app/src/simple-pagination.js | 64 ++++++++++ 14 files changed, 431 insertions(+), 159 deletions(-) create mode 100644 web/app/src/AuthCheck.svelte create mode 100644 web/app/src/EditPostPanel.svelte create mode 100644 web/app/src/TagLinkNumbered.svelte create mode 100644 web/app/src/ViewPostPanel.svelte create mode 100644 web/app/src/simple-pagination.js diff --git a/pkg/app/post_routes.go b/pkg/app/post_routes.go index 112be82..e77cf2a 100644 --- a/pkg/app/post_routes.go +++ b/pkg/app/post_routes.go @@ -57,8 +57,9 @@ func postGet(c *gin.Context) { } var postResult []models.PostListItem + var tagStrings []string for _, post := range posts { - var tagStrings []string + for _, tag := range post.Tags { tagStrings = append(tagStrings, tag.TagType.Name+":"+tag.Name) } @@ -67,7 +68,6 @@ func postGet(c *gin.Context) { ID: post.ID, ImageThumbnailPath: "/data/" + post.Blob.ThumbnailFilePath, ImagePath: "/data/" + post.Blob.FilePath, - Tags: tagStrings, }) } c.JSON(http.StatusOK, models.PostPaginationResponse{ @@ -75,6 +75,7 @@ func postGet(c *gin.Context) { TotalPage: totalPage, PostCount: postPages, Posts: postResult, + Tags: tagStrings, }) } diff --git a/pkg/models/item.go b/pkg/models/item.go index 784dcb6..e44939e 100644 --- a/pkg/models/item.go +++ b/pkg/models/item.go @@ -17,10 +17,9 @@ type TagAutocompleteListItem struct { } type PostListItem struct { - ID string `json:"id"` - ImagePath string `json:"image_path"` - ImageThumbnailPath string `json:"thumbnail_path"` - Tags []string `json:"tags"` + ID string `json:"id"` + ImagePath string `json:"image_path"` + ImageThumbnailPath string `json:"thumbnail_path"` } type PostSimilarityListItem struct { diff --git a/pkg/models/responses.go b/pkg/models/responses.go index 268af3c..e0b8eb9 100644 --- a/pkg/models/responses.go +++ b/pkg/models/responses.go @@ -31,4 +31,5 @@ type PostPaginationResponse struct { TotalPage int `json:"totalPage"` PostCount int `json:"postCount"` Posts []PostListItem `json:"posts"` + Tags []string `json:"tags"` } diff --git a/web/app/src/AuthCheck.svelte b/web/app/src/AuthCheck.svelte new file mode 100644 index 0000000..f7c8e6f --- /dev/null +++ b/web/app/src/AuthCheck.svelte @@ -0,0 +1,12 @@ + + +{#if loggedIn == true} + +{/if} diff --git a/web/app/src/EditPostPanel.svelte b/web/app/src/EditPostPanel.svelte new file mode 100644 index 0000000..b4b5bb8 --- /dev/null +++ b/web/app/src/EditPostPanel.svelte @@ -0,0 +1,90 @@ + + +
+
+

Edit Post

+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + +
+
+
diff --git a/web/app/src/TagLink.svelte b/web/app/src/TagLink.svelte index 09e858a..87e0fc3 100644 --- a/web/app/src/TagLink.svelte +++ b/web/app/src/TagLink.svelte @@ -8,4 +8,4 @@ let tagDisplay = tagName.split("_").join(" "); -{tagDisplay} +{tagDisplay} diff --git a/web/app/src/TagLinkNumbered.svelte b/web/app/src/TagLinkNumbered.svelte new file mode 100644 index 0000000..5aef594 --- /dev/null +++ b/web/app/src/TagLinkNumbered.svelte @@ -0,0 +1,13 @@ + + +{tagDisplay} {num} diff --git a/web/app/src/ViewPostPanel.svelte b/web/app/src/ViewPostPanel.svelte new file mode 100644 index 0000000..49e2abc --- /dev/null +++ b/web/app/src/ViewPostPanel.svelte @@ -0,0 +1,78 @@ + + +
+

Post

+
+
+ Uploader: +
+
{post.uploader}
+
+
+
+ Source URL: +
+
+ {trimUrl(post.source_url)} +
+
+
+
+ Original: +
+
+ Image +
+
+
+
+ Dimensions: +
+
+ {post.width}x{post.height} +
+
+
+
+

Tags:

+
+
+
+
    + {#if post.tags} + {#each post.tags as tag (tag)} +
  • + +
    • + {/each} + {/if} +
+
+
+
+ +

+ + +

+ +
diff --git a/web/app/src/main.scss b/web/app/src/main.scss index 2bf86c0..bf5c924 100644 --- a/web/app/src/main.scss +++ b/web/app/src/main.scss @@ -12,5 +12,5 @@ } .svelte-tags-input-matchs-parent { - z-index: 200; -} \ No newline at end of file + z-index: 2000; +} diff --git a/web/app/src/routes/Post.svelte b/web/app/src/routes/Post.svelte index f87f12f..f079cdc 100644 --- a/web/app/src/routes/Post.svelte +++ b/web/app/src/routes/Post.svelte @@ -3,6 +3,8 @@ import TagLink from "../TagLink.svelte"; import { getPost, postCreate, postDelete } from "../api.js"; import { Link, navigate } from "svelte-routing"; + import EditPostPanel from "../EditPostPanel.svelte"; + import ViewPostPanel from "../ViewPostPanel.svelte"; export let id; let post; const getData = async () => { @@ -21,70 +23,62 @@ getData(); }); - let modal_shown = false; + let deleteMenuShown = false; const deletePost = async () => { - toggleModal(); + toggleDeleteMenu(); const success = await postDelete({ id }); if (success) { navigate("/posts"); } }; - const toggleModal = () => { - modal_shown = !modal_shown; + const toggleDeleteMenu = () => { + deleteMenuShown = !deleteMenuShown; + }; + + let editMenuShown = false; + + const toggleEditMenu = () => { + editMenuShown = !editMenuShown; }; -
-
- {#if post} -

- Post ID: {post.id} -

- {/if} -
-
{#if post}
-
-
-

- Edit - -

-

- Uploader: {post.uploader} -

-

- Source URL: {trimUrl(post.source_url)} -

-

- Original: Image -

-

- Dimensions: {post.width}x{post.height} -

-

- Tags:
-

-

- {#if post.tags} - {#each post.tags as tag (tag)} - - {/each} - {/if} -

-
+
+ {#if editMenuShown == false && deleteMenuShown == false} + + {:else if editMenuShown == true} + + {:else if deleteMenuShown == true} +
+

Delete Post

+
+ Are you sure to delete post {post.id}? +
+
+ + +
+
+ {/if}
{#if post.width > 1000} @@ -105,26 +99,4 @@
-
-
-
- Are you sure to delete post {post.id}? -
-
-
-

Delete post?

-
-
-
- - -
-
-
{/if} diff --git a/web/app/src/routes/Posts.svelte b/web/app/src/routes/Posts.svelte index 0dd45e0..da735ae 100644 --- a/web/app/src/routes/Posts.svelte +++ b/web/app/src/routes/Posts.svelte @@ -3,47 +3,47 @@ import { getPostSearchTag, getTagAutocomplete } from "../api.js"; import { Link, navigate } from "svelte-routing"; import InfiniteScroll from "svelte-infinite-scroll"; - import TagLink from "../TagLink.svelte"; + import TagLinkNumbered from "../TagLinkNumbered.svelte"; import queryString from "query-string"; import Tags from "svelte-tags-input"; import { add_attribute } from "svelte/internal"; + import { paginate } from "../simple-pagination.js"; export let location; let searchTerms = []; let page = 1; + let totalPages = 1; + let pagination = []; let posts = []; - let newBatch = []; - - const splitToChunks = (array, parts) => { - let result = []; - for (let i = 0; i < parts; i++) { - let currentColumn = []; - for (let j = i; j < array.length; j += parts) { - currentColumn.push(array[j]); - } - result.push(currentColumn); - } - return result; - }; - - let postChunks = []; - // split posts into 4 columns - $: { - postChunks = splitToChunks(posts, 5); - } + let tags = []; + let categorizedTags = {}; const getData = async () => { const data = await getPostSearchTag({ page, q: searchTerms.join("+") }); if (data.posts) { - newBatch = data.posts; + posts = data.posts; + tags = data.tags; + totalPages = data.totalPage; + pagination = paginate(page, totalPages); } else { - newBatch = []; + posts = []; + tags = []; + totalPages = 0; + pagination = paginate(page, totalPages); } }; $: { - posts = [...posts, ...newBatch]; + let catTags = tags.reduce( + (acc, o) => ((acc[o] = (acc[o] || 0) + 1), acc), + {} + ); + categorizedTags = Object.entries(catTags).map(([k, v]) => ({ + tag: k, + num: v, + })); + categorizedTags = categorizedTags.sort((a, b) => b.num - a.num); } let queryParams; @@ -64,9 +64,9 @@ searchTerms = []; } posts = []; + page = 1; getData(); } - const onSearch = (i) => { if (searchTerms.length > 0) { navigate(`/posts?tags=${searchTerms.join("+")}`); @@ -74,13 +74,12 @@ navigate(`/posts`); } }; - -
-
-

Posts

-
-
+ const changePage = (i) => { + page = i; + getData(); + } +
@@ -107,46 +106,101 @@
- {#each postChunks as postChunk} -
- {#each postChunk as post, i (post.id)} -
-
-
-
- - {post.id} - -
-
-
- {#if post.tags} - {#each post.tags as tag (tag)} - - {/each} - {:else} - - {/if} -
-
+
+
+
Tags
+
+
+
    + {#each categorizedTags as tag (tag)} +
  • + +
    • + {/each} +
- {/each} +
- {/each} +
+
+
+
+ +
+
+
+ {#each posts as post, i (post.id)} +
+
+
+
+
+ + {post.id} + +
+
+
+
+
+
+ {/each} +
+
+
+
- { - page++; - getData(); - }} - />
- {#if newBatch.length == 0} + {#if page >= totalPages}

End of posts

diff --git a/web/app/src/routes/Tags.svelte b/web/app/src/routes/Tags.svelte index 678c86f..b0af57e 100644 --- a/web/app/src/routes/Tags.svelte +++ b/web/app/src/routes/Tags.svelte @@ -14,12 +14,6 @@ -
-
-

Tags

-
-
-
diff --git a/web/app/src/routes/Upload.svelte b/web/app/src/routes/Upload.svelte index 935cabf..1018b69 100644 --- a/web/app/src/routes/Upload.svelte +++ b/web/app/src/routes/Upload.svelte @@ -51,12 +51,6 @@ -
-
-

Upload

-
-
-
diff --git a/web/app/src/simple-pagination.js b/web/app/src/simple-pagination.js new file mode 100644 index 0000000..9c485c6 --- /dev/null +++ b/web/app/src/simple-pagination.js @@ -0,0 +1,64 @@ +// Implementation in ES6 +// https://gist.github.com/kottenator/9d936eb3e4e3c3e02598 + +const paginate = (c, m) => { + let current = c, + last = m, + delta = 2, + left = current - delta, + right = current + delta + 1, + range = [], + rangeWithDots = [], + l; + + for (let i = 1; i <= last; i++) { + if (i == 1 || i == last || i >= left && i < right) { + range.push(i); + } + } + + for (let i of range) { + if (l) { + if (i - l === 2) { + rangeWithDots.push(l + 1); + } else if (i - l !== 1) { + rangeWithDots.push('...'); + } + } + rangeWithDots.push(i); + l = i; + } + + return rangeWithDots; +} + +export { paginate }; +/* +Test it: + +for (let i = 1, l = 20; i <= l; i++) + console.log(`Selected page ${i}:`, pagination(i, l)); + +Expected output: + +Selected page 1: [1, 2, 3, "...", 20] +Selected page 2: [1, 2, 3, 4, "...", 20] +Selected page 3: [1, 2, 3, 4, 5, "...", 20] +Selected page 4: [1, 2, 3, 4, 5, 6, "...", 20] +Selected page 5: [1, 2, 3, 4, 5, 6, 7, "...", 20] +Selected page 6: [1, "...", 4, 5, 6, 7, 8, "...", 20] +Selected page 7: [1, "...", 5, 6, 7, 8, 9, "...", 20] +Selected page 8: [1, "...", 6, 7, 8, 9, 10, "...", 20] +Selected page 9: [1, "...", 7, 8, 9, 10, 11, "...", 20] +Selected page 10: [1, "...", 8, 9, 10, 11, 12, "...", 20] +Selected page 11: [1, "...", 9, 10, 11, 12, 13, "...", 20] +Selected page 12: [1, "...", 10, 11, 12, 13, 14, "...", 20] +Selected page 13: [1, "...", 11, 12, 13, 14, 15, "...", 20] +Selected page 14: [1, "...", 12, 13, 14, 15, 16, "...", 20] +Selected page 15: [1, "...", 13, 14, 15, 16, 17, "...", 20] +Selected page 16: [1, "...", 14, 15, 16, 17, 18, 19, 20] +Selected page 17: [1, "...", 15, 16, 17, 18, 19, 20] +Selected page 18: [1, "...", 16, 17, 18, 19, 20] +Selected page 19: [1, "...", 17, 18, 19, 20] +Selected page 20: [1, "...", 18, 19, 20] +*/ \ No newline at end of file