mirror of
https://github.com/tcsenpai/pensieve.git
synced 2025-06-06 19:25:24 +00:00
feat(web): update ui
This commit is contained in:
arkohut
parent
f8b5eb14e6
commit
3c66b9539d
@ -4,7 +4,7 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"build": "PUBLIC_API_ENDPOINT= vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
|
||||
@ -9,9 +9,14 @@
|
||||
*/
|
||||
export let title;
|
||||
/**
|
||||
* @type {any}
|
||||
* @type {Array<string>}
|
||||
*/
|
||||
export let content;
|
||||
export let tags = [];
|
||||
|
||||
/**
|
||||
* @type {Array<{key: string, source: string, value: any}>}
|
||||
*/
|
||||
export let metadata_entries = [];
|
||||
/**
|
||||
* @type {any}
|
||||
*/
|
||||
@ -27,42 +32,64 @@
|
||||
</script>
|
||||
|
||||
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
|
||||
<div class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group">
|
||||
<div
|
||||
class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group"
|
||||
>
|
||||
<!-- Button container -->
|
||||
<div class="group">
|
||||
<button class="absolute left-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100" on:click={onPrevious}>
|
||||
<button
|
||||
class="absolute left-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100"
|
||||
on:click={onPrevious}
|
||||
>
|
||||
<
|
||||
</button>
|
||||
<button class="absolute right-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100" on:click={onNext}>
|
||||
<button
|
||||
class="absolute right-5 top-1/2 transform -translate-y-1/2 text-white bg-gray-300 hover:bg-gray-400 font-bold rounded-full text-2xl w-12 h-12 opacity-0 group-hover:opacity-100"
|
||||
on:click={onNext}
|
||||
>
|
||||
>
|
||||
</button>
|
||||
<!-- Your modal content goes here -->
|
||||
</div>
|
||||
<div class="flex">
|
||||
<!-- Image container -->
|
||||
<div class="flex-none w-full md:w-1/2 h-96 md:h-auto">
|
||||
<img class="h-full w-full object-cover" src={image} alt={title} />
|
||||
</div>
|
||||
<!-- Description container -->
|
||||
<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto h-96 md:h-auto">
|
||||
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div>
|
||||
<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
|
||||
{title}
|
||||
</p>
|
||||
<p class="mt-2 text-gray-600">
|
||||
{#each content as item}
|
||||
<span class="text-base text-gray-500 inline-block">{item}</span>
|
||||
{/each}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 pt-4 pr-4">
|
||||
<button class="text-gray-400 hover:text-gray-600" on:click={onClose}>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<span class="text-2xl">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<!-- Image container -->
|
||||
<div class="flex-none w-full md:w-1/2 h-96 md:h-auto">
|
||||
<img class="h-full w-full object-cover" src={image} alt={title} />
|
||||
</div>
|
||||
<!-- Description container -->
|
||||
<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto h-96 md:h-auto">
|
||||
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div>
|
||||
<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
|
||||
{title}
|
||||
</p>
|
||||
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">TAGS</div>
|
||||
<div class="mt-2 text-gray-600">
|
||||
{#each tags as tag}
|
||||
<span class="text-base text-gray-500 inline-block">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">METADATA</div>
|
||||
<div class="mt-2 text-gray-600">
|
||||
{#each metadata_entries as entry}
|
||||
<div class="mb-2">
|
||||
<span class="font-bold">{entry.key}:</span>
|
||||
{#if typeof entry.value === 'object'}
|
||||
<pre class="bg-gray-100 p-2 rounded overflow-y-auto max-h-96">{JSON.stringify(entry.value, null, 2)}</pre>
|
||||
{:else}
|
||||
{entry.value}
|
||||
{/if}
|
||||
<span class="text-sm text-gray-500">({entry.source})</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 pt-4 pr-4">
|
||||
<button class="text-gray-400 hover:text-gray-600" on:click={onClose}>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<span class="text-2xl">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,152 +1,164 @@
|
||||
<script>
|
||||
import Figure from "$lib/Figure.svelte";
|
||||
import Figure from '$lib/Figure.svelte';
|
||||
import { PUBLIC_API_ENDPOINT } from '$env/static/public';
|
||||
|
||||
|
||||
|
||||
|
||||
let searchString = '';
|
||||
/**
|
||||
let searchString = '';
|
||||
/**
|
||||
* @type {any[]}
|
||||
*/
|
||||
let searchResults = [];
|
||||
let isLoading = false;
|
||||
let debounceTimer;
|
||||
let showModal= false;
|
||||
let selectedImage = 0;
|
||||
let searchResults = [];
|
||||
let isLoading = false;
|
||||
let debounceTimer;
|
||||
let showModal = false;
|
||||
let selectedImage = 0;
|
||||
|
||||
const debounceDelay = 300;
|
||||
const debounceDelay = 300;
|
||||
|
||||
/**
|
||||
/**
|
||||
* @param {string} query
|
||||
*/
|
||||
async function searchItems(query) {
|
||||
isLoading = true;
|
||||
async function searchItems(query) {
|
||||
isLoading = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://localhost:8080/search?q=${encodeURIComponent(query)}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
searchResults = await response.json();
|
||||
console.log(searchResults);
|
||||
} catch (error) {
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
try {
|
||||
const apiEndpoint = typeof PUBLIC_API_ENDPOINT !== 'undefined' ? PUBLIC_API_ENDPOINT : window.location.origin;
|
||||
const response = await fetch(`${apiEndpoint}/search?q=${encodeURIComponent(query)}`);
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
searchResults = await response.json();
|
||||
console.log(searchResults);
|
||||
} catch (error) {
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* @param {string} query
|
||||
*/
|
||||
function debounceSearch(query) {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
searchItems(query);
|
||||
}, debounceDelay);
|
||||
}
|
||||
function debounceSearch(query) {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
searchItems(query);
|
||||
}, debounceDelay);
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* @param {string} path
|
||||
*/
|
||||
function filename(path) {
|
||||
let splits = path.split('/');
|
||||
return splits[splits.length - 1];
|
||||
}
|
||||
function filename(path) {
|
||||
let splits = path.split('/');
|
||||
return splits[splits.length - 1];
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* @param {number} index
|
||||
*/
|
||||
function openModal(index) {
|
||||
// @ts-ignore
|
||||
showModal = true;
|
||||
selectedImage = index;
|
||||
disableScroll();
|
||||
}
|
||||
function openModal(index) {
|
||||
// @ts-ignore
|
||||
showModal = true;
|
||||
selectedImage = index;
|
||||
disableScroll();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
enableScroll();
|
||||
}
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
enableScroll();
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* @param {{ key: string; }} event
|
||||
*/
|
||||
function handleKeydown(event) {
|
||||
if (showModal) {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
selectedImage = (selectedImage + 1) % searchResults.length;
|
||||
} else if (event.key === 'ArrowLeft') {
|
||||
selectedImage = (selectedImage - 1 + searchResults.length) % searchResults.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleKeydown(event) {
|
||||
if (showModal) {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
selectedImage = (selectedImage + 1) % searchResults.length;
|
||||
} else if (event.key === 'ArrowLeft') {
|
||||
selectedImage = (selectedImage - 1 + searchResults.length) % searchResults.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const disableScroll = () => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
const disableScroll = () => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
};
|
||||
|
||||
const enableScroll = () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
const enableScroll = () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
|
||||
$: if (searchString.trim()) {
|
||||
debounceSearch(searchString);
|
||||
} else {
|
||||
searchResults = [];
|
||||
}
|
||||
$: if (searchString.trim()) {
|
||||
debounceSearch(searchString);
|
||||
} else {
|
||||
searchResults = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeydown} />
|
||||
|
||||
<div class="container mx-auto my-10">
|
||||
<input type="text" class="input input-bordered w-full my-4 p-2 text-lg border border-gray-500" bind:value={searchString} placeholder="Type to search..." />
|
||||
<input
|
||||
type="text"
|
||||
class="input input-bordered w-full my-4 p-2 text-lg border border-gray-500"
|
||||
bind:value={searchString}
|
||||
placeholder="Type to search..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto">
|
||||
{#if isLoading}
|
||||
<p>Loading...</p>
|
||||
{:else if searchString}
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
{#each searchResults as item, index}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out" on:click={() => openModal(index)}>
|
||||
<figure class="px-5 pt-5">
|
||||
<img class="w-full h-48 object-cover" src={`http://localhost:8080/files/${item.filepath}`} alt="" />
|
||||
</figure>
|
||||
<div class="p-4">
|
||||
<h2 class="text-lg font-bold mb-2">{filename(item.filepath)}</h2>
|
||||
<p class="text-gray-700 line-clamp-5">{''}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p>Type something to start searching...</p>
|
||||
{/if}
|
||||
{#if isLoading}
|
||||
<p>Loading...</p>
|
||||
{:else if searchString}
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
{#each searchResults as item, index}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out"
|
||||
on:click={() => openModal(index)}
|
||||
>
|
||||
<figure class="px-5 pt-5">
|
||||
<img
|
||||
class="w-full h-48 object-cover"
|
||||
src={`http://localhost:8080/files/${item.filepath}`}
|
||||
alt=""
|
||||
/>
|
||||
</figure>
|
||||
<div class="p-4">
|
||||
<h2 class="text-lg font-bold mb-2">{filename(item.filepath)}</h2>
|
||||
<p class="text-gray-700 line-clamp-5">{''}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p>Type something to start searching...</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
{#if searchResults.length && showModal}
|
||||
<Figure
|
||||
image={`http://localhost:8080/files/${searchResults[selectedImage].filepath}`}
|
||||
title={filename(searchResults[selectedImage].filepath)}
|
||||
content={''}
|
||||
onClose={closeModal}
|
||||
onNext={() => openModal((selectedImage + 1) % searchResults.length)}
|
||||
onPrevious={() => openModal((selectedImage - 1 + searchResults.length) % searchResults.length)}
|
||||
/>
|
||||
<Figure
|
||||
image={`http://localhost:8080/files/${searchResults[selectedImage].filepath}`}
|
||||
title={filename(searchResults[selectedImage].filepath)}
|
||||
tags={searchResults[selectedImage].tags}
|
||||
metadata_entries={searchResults[selectedImage].metadata_entries}
|
||||
content={''}
|
||||
onClose={closeModal}
|
||||
onNext={() => openModal((selectedImage + 1) % searchResults.length)}
|
||||
onPrevious={() => openModal((selectedImage - 1 + searchResults.length) % searchResults.length)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<footer class="mx-auto mt-32 w-full container">
|
||||
<div class="border-t border-slate-900/5 py-10">
|
||||
<p class="mt-2 text-sm leading-6 text-slate-500">© 2023 Labs Inc. All rights reserved.</p>
|
||||
<div class="mt-2 flex items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
|
||||
<a href="/privacy-policy">Privacy policy</a>
|
||||
<div class="h-4 w-px bg-slate-500/20"></div>
|
||||
<a href="/changelog">Changelog</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-slate-900/5 py-10">
|
||||
<p class="mt-2 text-sm leading-6 text-slate-500">© 2023 Labs Inc. All rights reserved.</p>
|
||||
<div class="mt-2 flex items-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
|
||||
<a href="/privacy-policy">Privacy policy</a>
|
||||
<div class="h-4 w-px bg-slate-500/20" />
|
||||
<a href="/changelog">Changelog</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user