mirror of
https://github.com/tcsenpai/pensieve.git
synced 2025-06-08 12:15:26 +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,13 +32,21 @@
|
||||
</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 -->
|
||||
@ -49,11 +62,26 @@
|
||||
<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>
|
||||
<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}
|
||||
</p>
|
||||
</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">
|
||||
@ -64,5 +92,4 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<script>
|
||||
import Figure from "$lib/Figure.svelte";
|
||||
|
||||
|
||||
|
||||
import Figure from '$lib/Figure.svelte';
|
||||
import { PUBLIC_API_ENDPOINT } from '$env/static/public';
|
||||
|
||||
let searchString = '';
|
||||
/**
|
||||
@ -11,7 +9,7 @@
|
||||
let searchResults = [];
|
||||
let isLoading = false;
|
||||
let debounceTimer;
|
||||
let showModal= false;
|
||||
let showModal = false;
|
||||
let selectedImage = 0;
|
||||
|
||||
const debounceDelay = 300;
|
||||
@ -23,7 +21,8 @@
|
||||
isLoading = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://localhost:8080/search?q=${encodeURIComponent(query)}`);
|
||||
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');
|
||||
}
|
||||
@ -101,20 +100,32 @@
|
||||
<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}
|
||||
{#if isLoading}
|
||||
<p>Loading...</p>
|
||||
{:else if searchString}
|
||||
{: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)}>
|
||||
<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="" />
|
||||
<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>
|
||||
@ -123,16 +134,17 @@
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
{:else}
|
||||
<p>Type something to start searching...</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
{#if searchResults.length && showModal}
|
||||
<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)}
|
||||
@ -145,7 +157,7 @@
|
||||
<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>
|
||||
<div class="h-4 w-px bg-slate-500/20" />
|
||||
<a href="/changelog">Changelog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user