From 1fd9e364bb4f87a49d22dbbe90410fbcbc03330c Mon Sep 17 00:00:00 2001 From: Damillora Date: Mon, 24 Feb 2025 13:03:20 +0000 Subject: [PATCH] feat: another UI change --- pkg/app/post_routes.go | 1 + pkg/models/read.go | 3 + pkg/web/package-lock.json | 11 ++ pkg/web/package.json | 1 + .../components/panels/DeletePostPanel.svelte | 38 +++++ .../components/panels/EditPostPanel.svelte | 13 +- .../panels/EditTagNotesPanel.svelte | 39 ++--- .../lib/components/panels/EditTagPanel.svelte | 98 ++++++------ .../components/panels/ViewPostPanel.svelte | 64 ++++---- .../lib/components/panels/ViewTagPanel.svelte | 85 ++++++----- .../lib/components/ui/TagLinkNumbered.svelte | 4 +- pkg/web/src/routes/post/[id]/+page.svelte | 140 ++++++++++-------- pkg/web/src/routes/posts/+page.svelte | 37 ++--- pkg/web/src/routes/tags/+page.svelte | 63 ++++---- pkg/web/src/routes/tags/[tag]/+page.svelte | 18 ++- pkg/web/src/routes/upload/+page.svelte | 39 +++-- 16 files changed, 373 insertions(+), 281 deletions(-) create mode 100644 pkg/web/src/lib/components/panels/DeletePostPanel.svelte diff --git a/pkg/app/post_routes.go b/pkg/app/post_routes.go index 6f3d331..fb88b09 100644 --- a/pkg/app/post_routes.go +++ b/pkg/app/post_routes.go @@ -112,6 +112,7 @@ func postGetOne(c *gin.Context) { Width: post.Blob.Width, Height: post.Blob.Height, Uploader: post.User.Username, + UploadDate: post.CreatedAt, }) } diff --git a/pkg/models/read.go b/pkg/models/read.go index 5817fe3..141a739 100644 --- a/pkg/models/read.go +++ b/pkg/models/read.go @@ -1,5 +1,7 @@ package models +import "time" + type PostReadModel struct { ID string `json:"id"` ImagePreviewPath string `json:"preview_path"` @@ -9,6 +11,7 @@ type PostReadModel struct { Width int `json:"width"` Height int `json:"height"` Uploader string `json:"uploader"` + UploadDate time.Time `json:"upload_date"` } type TagReadModel struct { diff --git a/pkg/web/package-lock.json b/pkg/web/package-lock.json index bb8a81f..4d30096 100644 --- a/pkg/web/package-lock.json +++ b/pkg/web/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "axios": "^1.4.0", "bulma": "^1.0.3", + "date-fns": "^4.1.0", "query-string": "^8.1.0" }, "devDependencies": { @@ -1853,6 +1854,16 @@ "node": ">=4" } }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", diff --git a/pkg/web/package.json b/pkg/web/package.json index e86db32..1e9ea12 100644 --- a/pkg/web/package.json +++ b/pkg/web/package.json @@ -30,6 +30,7 @@ "dependencies": { "axios": "^1.4.0", "bulma": "^1.0.3", + "date-fns": "^4.1.0", "query-string": "^8.1.0" } } diff --git a/pkg/web/src/lib/components/panels/DeletePostPanel.svelte b/pkg/web/src/lib/components/panels/DeletePostPanel.svelte new file mode 100644 index 0000000..cada5ab --- /dev/null +++ b/pkg/web/src/lib/components/panels/DeletePostPanel.svelte @@ -0,0 +1,38 @@ + + +
+
+

Delete Post

+ {#if !deleteLoading} +
+ Are you sure to delete post {id}? +
+
+ + +
+ {:else} +
+ +
+ {/if} +
+
diff --git a/pkg/web/src/lib/components/panels/EditPostPanel.svelte b/pkg/web/src/lib/components/panels/EditPostPanel.svelte index 73ecc6a..4a7bdaa 100644 --- a/pkg/web/src/lib/components/panels/EditPostPanel.svelte +++ b/pkg/web/src/lib/components/panels/EditPostPanel.svelte @@ -11,6 +11,8 @@ let { isActive = $bindable(false), post, onSubmit }: Props = $props(); + let editLoading = $state(false); + const toggleEditModal = (e) => { e.preventDefault(); isActive = !isActive; @@ -37,9 +39,10 @@ const onFormSubmit = async (e) => { e.preventDefault(); + editLoading = true; const response = await postUpdate(post.id, form); - toggleEditModal(); - + editLoading = false; + toggleEditModal(e); onSubmit(); }; @@ -51,6 +54,7 @@

Edit Post

+ {#if !editLoading}
Uploader: @@ -115,5 +119,10 @@ >Cancel
+ {:else} +
+ +
+ {/if}
diff --git a/pkg/web/src/lib/components/panels/EditTagNotesPanel.svelte b/pkg/web/src/lib/components/panels/EditTagNotesPanel.svelte index 0be9432..edbb64b 100644 --- a/pkg/web/src/lib/components/panels/EditTagNotesPanel.svelte +++ b/pkg/web/src/lib/components/panels/EditTagNotesPanel.svelte @@ -2,16 +2,12 @@ import { onMount } from "svelte"; import { updateTagNotes } from "$lib/api"; - let { - tag, - data, - toggleEditMenu, - onSubmit - } = $props(); + let { tag, data, toggleEditMenu, onSubmit } = $props(); let form = $state({ note: "", }); + let editNotesLoading = $state(false); const getData = async () => { form.note = data.tagNote; @@ -19,7 +15,9 @@ const onFormSubmit = async (e) => { e.preventDefault(); + editNotesLoading = true; await updateTagNotes(tag, form); + editNotesLoading = false; toggleEditMenu(); onSubmit(); @@ -33,18 +31,21 @@

Edit Notes

-
- -
-
-
- - -
+ {#if !editNotesLoading} +
+ +
+
+
+ + +
+ {:else} +
+ +
+ {/if}
diff --git a/pkg/web/src/lib/components/panels/EditTagPanel.svelte b/pkg/web/src/lib/components/panels/EditTagPanel.svelte index c47822c..c04c031 100644 --- a/pkg/web/src/lib/components/panels/EditTagPanel.svelte +++ b/pkg/web/src/lib/components/panels/EditTagPanel.svelte @@ -2,19 +2,16 @@ import { onMount } from "svelte"; import { getTagTypes, updateTag } from "$lib/api"; + import { goto } from "$app/navigation"; - let { - tag, - data, - toggleRenameMenu, - onSubmit - } = $props(); + let { tag, data, toggleRenameMenu, onSubmit } = $props(); let tagTypes = $state([]); let form = $state({ name: "", tagTypeId: 1, }); + let editTagLoading = $state(false); const getData = async () => { tagTypes = await getTagTypes(); @@ -25,10 +22,9 @@ const onFormSubmit = async (e) => { e.preventDefault(); + editTagLoading = true; await updateTag(tag, form); - - goto("/tags/" + form.name); - + editTagLoading = false; onSubmit(form.name); }; @@ -40,56 +36,54 @@

Edit Tag

-
-
- Name: -
-
-
-
- + {#if !editTagLoading} +
+
+ Name: +
+
+
+
+ +
-
-
-
- Category: -
-
-
-
- +
+
+ Category: +
+
+
+
+ +
-
-
-
- Posts: +
+ +
-
- {data.postCount} (Browse) + {:else} +
+
-
-
- - -
+ {/if}
diff --git a/pkg/web/src/lib/components/panels/ViewPostPanel.svelte b/pkg/web/src/lib/components/panels/ViewPostPanel.svelte index 21d737d..751ff22 100644 --- a/pkg/web/src/lib/components/panels/ViewPostPanel.svelte +++ b/pkg/web/src/lib/components/panels/ViewPostPanel.svelte @@ -1,8 +1,14 @@ - + {tagDisplay} - + {num} diff --git a/pkg/web/src/routes/post/[id]/+page.svelte b/pkg/web/src/routes/post/[id]/+page.svelte index e4a6631..3d3e259 100644 --- a/pkg/web/src/routes/post/[id]/+page.svelte +++ b/pkg/web/src/routes/post/[id]/+page.svelte @@ -7,15 +7,17 @@ import { page } from "$app/stores"; import ShiorikoImage from "$lib/components/ui/ShiorikoImage.svelte"; + import AuthCheck from "$lib/components/checks/AuthCheck.svelte"; + import DeletePostPanel from "$lib/components/panels/DeletePostPanel.svelte"; const { id } = $page.params; let post: any = $state(); const getData = async () => { + post = null; const data = await getPost({ id }); post = data; imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%"; }; - let loading = $state(false); let isOriginal = $state(false); const trimUrl = (str: string) => { @@ -25,25 +27,22 @@ return str; }; - let deleteMenuShown = $state(false); const onSubmitEdit = () => { getData(); editMenuShown = false; - } + }; onMount(() => { getData(); }); - const deletePost = async (e) => { - e.preventDefault(); - toggleDeleteMenu(e); - const success = await postDelete({ id }); + const onDelete = async (success) => { if (success) { goto("/posts"); } }; + const toggleDeleteMenu = (e) => { e.preventDefault(); deleteMenuShown = !deleteMenuShown; @@ -64,68 +63,85 @@
{#if post} - {#if editMenuShown == false && deleteMenuShown == false} - - {:else if editMenuShown == true} - - {:else if deleteMenuShown == true} -
-

Delete Post

-
- Are you sure to delete post {post.id}? -
-
- - -
+
+ +
+ {#if editMenuShown == true && deleteMenuShown == false} +
+
+ {:else if deleteMenuShown == true} + + {:else} + +
+
Post Actions
+ + View Original + Edit + Delete +
+ {/if} {:else}
{/if}
-
+
{#if post} - {#if post.width > 1000 && isOriginal == false} -
- Resized to {imagePercentage} of the original image. - { - isOriginal = true; - }}>View original -
-
- -
- {:else} -
- Currently viewing original image. -
-
- -
- {/if} +
+ {#if post.width > 1000 && isOriginal == false} +
+ Resized to {imagePercentage} of the original image. + { + isOriginal = true; + }}>View original +
+
+
+ +
+
+ {:else} +
+ Currently viewing original image. +
+
+
+ +
+
+ {/if} +
{:else}
{/if} diff --git a/pkg/web/src/routes/posts/+page.svelte b/pkg/web/src/routes/posts/+page.svelte index 951b283..d9aadf8 100644 --- a/pkg/web/src/routes/posts/+page.svelte +++ b/pkg/web/src/routes/posts/+page.svelte @@ -127,32 +127,17 @@
-
- {#if !loading} -
- Tags: -
-
-
-
    - {#each tags as tag (tag)} -
  • - -
    • - {/each} -
-
-
- {:else} -
- {/if} -
+ {#if !loading} + {#each tags as tag (tag)} + + {/each} + {:else} +
+ {/if}
{#if tagInfo}
diff --git a/pkg/web/src/routes/tags/+page.svelte b/pkg/web/src/routes/tags/+page.svelte index 6cf44fe..b53586d 100644 --- a/pkg/web/src/routes/tags/+page.svelte +++ b/pkg/web/src/routes/tags/+page.svelte @@ -1,52 +1,63 @@ -

Tag List

{#if !loading} - - - - - - - - - - {#each tags as tag} +
TagTag TypePost Count
+ - - - + + - {/each} - -
- {tag.tagName} - {tag.postCount}TagPost Count
+ + + {#each tags as tag} + + + {tag.tagName} + + + + {tag.postCount} + + {/each} + + {:else} -
+
{/if}
-
\ No newline at end of file + diff --git a/pkg/web/src/routes/tags/[tag]/+page.svelte b/pkg/web/src/routes/tags/[tag]/+page.svelte index 3dffdab..a9b4d85 100644 --- a/pkg/web/src/routes/tags/[tag]/+page.svelte +++ b/pkg/web/src/routes/tags/[tag]/+page.svelte @@ -9,6 +9,7 @@ import PostGallery from "$lib/components/ui/PostGallery.svelte"; import { page } from "$app/stores"; + import AuthCheck from "$lib/components/checks/AuthCheck.svelte"; let { tag } = $state($page.params); let data = $state(); @@ -16,6 +17,7 @@ const getData = async () => { if (tag) { + data = null; data = await getTag({ tag }); const response = await getPosts({ page: 1, @@ -40,6 +42,7 @@ const onTagSubmit = (newName) => { tag = newName; + toggleEditMenu(); getData(); }; @@ -53,15 +56,28 @@
{#if data} +
+ +
{#if renameMenuShown} +
+
{:else} - + +
+
Tag Actions
+ Browse Posts + Rename +
+ {/if} {:else}
diff --git a/pkg/web/src/routes/upload/+page.svelte b/pkg/web/src/routes/upload/+page.svelte index c10ced6..b0bcc39 100644 --- a/pkg/web/src/routes/upload/+page.svelte +++ b/pkg/web/src/routes/upload/+page.svelte @@ -10,6 +10,7 @@ let fileName = $state(""); let similar = $state([]); let previewUrl = $state(""); + let loading = $state(false); let form = $state({ blob_id: "", @@ -23,6 +24,7 @@ }; const onFileChange = async (e) => { + loading = true; var file = e.target.files[0]; fileName = ""; previewUrl = ""; @@ -38,6 +40,7 @@ fileName = file.name; previewUrl = response.previewUrl; } + loading = false; }; const onTagChange = (value) => { @@ -94,6 +97,17 @@
+ {#if currentProgress > 0 && currentProgress < 100} +
+ + {currentProgress}% + +
+ {/if}
-
+
{#if fileName} {#if similar.length > 0}
@@ -157,21 +171,11 @@ {/each}
{:else} -
+
{fileName} has been succesfully uploaded.
{/if} -
- -
{:else if currentProgress > 0 && currentProgress < 100} - - {currentProgress}% -
Your image is currently uploading...
@@ -181,7 +185,16 @@
{/if}
+ {#if fileName} +
+
+ +
+
+ {:else if loading && !(currentProgress > 0 && currentProgress < 100)} +
+ {/if}
- \ No newline at end of file +