diff --git a/package.json b/package.json index 9accf1c..0631dee 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "lib-vue", "private": true, - "version": "1.3.1", + "version": "1.4.0", "type": "module", "scripts": { "dev": "vite", diff --git a/public/icons/authors.svg b/public/icons/authors.svg new file mode 100644 index 0000000..998ff03 --- /dev/null +++ b/public/icons/authors.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/icons/tags.svg b/public/icons/tags.svg new file mode 100644 index 0000000..a90881f --- /dev/null +++ b/public/icons/tags.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue index b799e32..7e92416 100644 --- a/src/components/TheHeader.vue +++ b/src/components/TheHeader.vue @@ -61,7 +61,7 @@ watch(
  • - + Images
    • diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue index 87358b5..2b1fe22 100644 --- a/src/components/TheSidebar.vue +++ b/src/components/TheSidebar.vue @@ -70,7 +70,7 @@ const bookID = computed(()=> {
  • @@ -91,28 +91,6 @@ const bookID = computed(()=> { Create
    • -
  • - - - - - Gallery View - -
    • -
  • - - - - - Table View - -
  • >(); const isTableView = ref(true); const infinityState = ref(true); - const totalBooks = ref>([]) + const storageImages = ref>([]); + + async function getImageByName(bookID: number, imageName: string) { + try { + const url = getUrl(`${import.meta.env.VITE_BACKEND_URL}/api/image/view-by-name`, { bookID, imageName }); + const request = getRequest(url); + return await fetchData(request); + } catch (error) { + console.log('getImageByName wrong', { error: error }); + } + } async function getImages(query?: BaseQuery) { try { - if(!queryImages.value.book_id && !queryImages.value.book_name) { + if (!queryImages.value.book_id && !queryImages.value.book_name) { return null; } const url = getUrl(`${import.meta.env.VITE_BACKEND_URL}/api/image`, { @@ -93,6 +103,12 @@ export function useImage() { ? `/${image.path}/${image.file_name}` : `${import.meta.env.VITE_BACKEND_URL}/${image.path}/${image.file_name}`; } + function getStorageImageUrl(imageName: string, dirID: number) { + const bookPath = `book_${String(dirID).padStart(3, '0')}`; + return import.meta.env.PROD + ? `/media/${bookPath}/${imageName}` + : `${import.meta.env.VITE_BACKEND_URL}/media/${bookPath}/${imageName}`; + } function getImageUrl(image: Blob) { return window.URL.createObjectURL(image); @@ -118,7 +134,8 @@ export function useImage() { image.value = undefined; } - function showImageDialog(img: Image) { + async function showImageDialog(bookID: number, imageName: string) { + const img = await getImageByName(bookID, imageName); image.value = img; imageFileName.value = img.file_name; if (imageDialog.value) imageDialog.value.showModal(); @@ -151,15 +168,15 @@ export function useImage() { try { const url = new URL(`${import.meta.env.VITE_BACKEND_URL}/api/image/total`); const request = getRequest(url); - const data = await fetchData>(request); - totalBooks.value = data + const data = await fetchData>(request); + storageImages.value = data; } catch (error) {} } return { image, images, - totalBooks, + storageImages, imagesMeta, queryImages, isTableView, @@ -168,6 +185,7 @@ export function useImage() { infinityState, changeSort, getTotal, + getImageByName, getImages, getImagesAndPush, updateImage, @@ -175,6 +193,7 @@ export function useImage() { deleteAllImages, getImageUrl, copyImageUrl, + getStorageImageUrl, getUploadedImageUrl, closeDialog, showImageDialog, diff --git a/src/directives/LazyLoadDirective.ts b/src/directives/LazyLoadDirective.ts index 46968d0..378cf48 100644 --- a/src/directives/LazyLoadDirective.ts +++ b/src/directives/LazyLoadDirective.ts @@ -9,7 +9,6 @@ export default { () => { setTimeout(() => { el.classList.add('loaded'); - el.classList.remove('cap'); }, 100); }, { passive: true }, @@ -53,5 +52,6 @@ export default { } else { createObserver(); } + }, }; diff --git a/src/interfaces/images.ts b/src/interfaces/images.ts index 9fbcf06..bb8554e 100644 --- a/src/interfaces/images.ts +++ b/src/interfaces/images.ts @@ -32,5 +32,9 @@ interface ImagesTotal { book_id: number; images_count: number } +interface StorageImages { + bookID: number; + images: Array; +} -export type { RawFile, Image, QueryImages, ImagesResponse, ImagesTotal }; +export type { RawFile, Image, QueryImages, ImagesResponse, ImagesTotal, StorageImages }; diff --git a/src/router.ts b/src/router.ts index d3215f0..6ce9559 100644 --- a/src/router.ts +++ b/src/router.ts @@ -11,7 +11,6 @@ const BookText = () => import('./views/BookText.vue'); const BookComics = () => import('./views/BookComics.vue'); const BookEdit = () => import('./views/BookEdit.vue'); const ImageGallery = () => import('./views/ImageGallery.vue'); -const ImageTable = () => import('./views/ImageTable.vue'); const SeriesTable = () => import('./views/SeriesTable.vue'); const TagTable = () => import('./views/TagTable.vue'); const LoginPage = () => import('./views/LoginPage.vue'); @@ -78,18 +77,8 @@ const routes: RouteRecordRaw[] = [ }, { path: '/images', - children: [ - { - path: '', - name: 'images-table', - component: ImageTable, - }, - { - path: 'gallery', - name: 'images-gallery', - component: ImageGallery, - }, - ], + name: 'images', + component: ImageGallery }, ], }, diff --git a/src/views/ImageGallery.vue b/src/views/ImageGallery.vue index e3cf40c..9ea2441 100644 --- a/src/views/ImageGallery.vue +++ b/src/views/ImageGallery.vue @@ -1,110 +1,93 @@ \ No newline at end of file +
    +
    + + +
    +
    +

    Book {{ dir.bookID }}

    + +
    + + + +
    + diff --git a/src/views/ImageTable.vue b/src/views/ImageTable.vue deleted file mode 100644 index 8c783e8..0000000 --- a/src/views/ImageTable.vue +++ /dev/null @@ -1,203 +0,0 @@ - - - diff --git a/vite.config.ts b/vite.config.ts index ba969c2..c7c66b6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -27,17 +27,18 @@ export default defineConfig({ categories: ['books'], shortcuts: [ { - name: 'Books List', - short_name: 'Books', - description: 'Open Books List', - url: '/book-list', - // icons: [{ src: '/images/today.png', sizes: '192x192' }], + name: 'Tag List', + short_name: 'Tags', + description: 'Open Tags List', + url: '/tags', + icons: [{ src: 'icons/tags.svg', sizes: '96x96' }], }, { name: 'Author List', - short_name: 'Author', - description: 'Open Author List', - url: '/author-list', + short_name: 'Authors', + description: 'Open Authors List', + url: '/authors', + icons: [{ src: 'icons/authors.svg', sizes: '96x96' }], }, ], icons: [ @@ -61,6 +62,7 @@ export default defineConfig({ src: 'icons/icon-512_maskable.png', sizes: '512x512', type: 'image/png', + purpose: 'any maskable', }, ], },