JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

wip: UI to show image and associated properties

Browse Source 
wip

fix
This commit is contained in:
John Costa
2025-05-05 16:22:25 +01:00
parent 07b83aa728
commit 23d91890f5
10 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/App.tsx
View File

@ -22,6 +22,7 @@ import { ImageViewer } from "./components/ImageViewer";
import { ImageStatus } from "./components/image-status/ImageStatus";
import { SearchImageContextProvider } from "./contexts/SearchImageContext";
import { type sendImage, sendImageFile } from "./network";
import { Image } from "./Image";
const currentPlatform = platform();
console.log("Current Platform: ", currentPlatform);
@ -94,9 +95,16 @@ export const App = () => {
<Route path="/" component={ProtectedRoute}>
<Route path="/" component={Search} />
<Route path="/image/:imageId" component={Image} />
<Route path="/settings" component={Settings} />
</Route>
</Route>
<Route
path="*"
component={() => {
return <p>{window.location.href}</p>;
}}
/>
</Router>
</SearchImageContextProvider>
);

31
frontend/src/Image.tsx Normal file
View File

@ -0,0 +1,31 @@
import { useParams } from "@solidjs/router";
import { For, Show, type Component } from "solid-js";
import { base, type UserImage } from "./network";
import { useSearchImageContext } from "./contexts/SearchImageContext";
import { SearchCard } from "./components/search-card/SearchCard";
export const Image: Component = () => {
const { imageId } = useParams<{ imageId: string }>();
const { imagesWithProperties } = useSearchImageContext();
const imageProperties = (): UserImage[] | undefined =>
Object.entries(imagesWithProperties()).find(
([id]) => id === imageId,
)?.[1];
return (
<main class="flex flex-col items-center">
<img class="h-1/2" alt="users" src={`${base}/image/${imageId}`} />
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<Show when={imageProperties()}>
{(image) => (
<For each={image()}>
{(property) => <SearchCard item={property} />}
</For>
)}
</Show>
</div>
</main>
);
};

5
frontend/src/Search.tsx
View File

@ -16,6 +16,7 @@ import { ItemModal } from "./components/item-modal/ItemModal";
import type { Shortcut } from "./components/shortcuts/hooks/useShortcutEditor";
import { base, type UserImage } from "./network";
import { useSearchImageContext } from "./contexts/SearchImageContext";
import { A } from "@solidjs/router";
export const Search = () => {
const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
@ -170,12 +171,12 @@ export const Search = () => {
<div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
<For each={Object.keys(imagesWithProperties())}>
{(imageId) => (
<div>
<A href={`/image/${imageId}`}>
<img
alt="One of the users images"
src={`${base}/image/${imageId}`}
/>
</div>
</A>
)}
</For>
</div>

1
frontend/src/components/search-card/SearchCard.tsx
View File

@ -6,6 +6,7 @@ import { SearchCardNote } from "./SearchCardNote";
export const SearchCard = (props: { item: UserImage }) => {
const { item } = props;
console.log(item);
switch (item.type) {
case "location":

2
frontend/src/components/search-card/SearchCardContact.tsx
View File

@ -11,7 +11,7 @@ export const SearchCardContact = ({ item }: Props) => {
const { data } = item;
return (
<div class="absolute inset-0 p-3 bg-orange-50">
<div class="inset-0 p-3 bg-orange-50">
<div class="flex mb-1 items-center gap-1">
<IconUser size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Contact</p>

2
frontend/src/components/search-card/SearchCardEvent.tsx
View File

@ -9,7 +9,7 @@ export const SearchCardEvent = ({ item }: Props) => {
const { data } = item;
return (
<div class="absolute inset-0 p-3 bg-purple-50">
<div class="inset-0 p-3 bg-purple-50">
<div class="flex mb-1 items-center gap-1">
<IconCalendar size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Event</p>

2
frontend/src/components/search-card/SearchCardLocation.tsx
View File

@ -9,7 +9,7 @@ export const SearchCardLocation = ({ item }: Props) => {
const { data } = item;
return (
<div class="absolute inset-0 p-3 bg-red-50">
<div class="inset-0 p-3 bg-red-50">
<div class="flex mb-1 items-center gap-1">
<IconMapPin size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Location</p>

2
frontend/src/components/search-card/SearchCardNote.tsx
View File

@ -12,7 +12,7 @@ export const SearchCardNote = ({ item }: Props) => {
const { data } = item;
return (
<div class="absolute inset-0 p-3 bg-green-50">
<div class="inset-0 p-3 bg-green-50">
<div class="flex mb-1 items-center gap-1">
<IconNote size={14} class="text-neutral-500" />
<p class="text-xs text-neutral-500">Note</p>

2
frontend/src/components/search-card/SearchCardReceipt.tsx
View File

@ -11,7 +11,7 @@ export const SearchCardReceipt = ({ item }: Props) => {
const { data } = item;
return (
<div class="absolute inset-0 p-3 bg-yellow-50">
<div class="inset-0 p-3 bg-yellow-50">
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
<p class="text-sm text-neutral-900 font-bold">
{data.orderNumber} - {data.vendor}

2
frontend/src/components/search-card/SearchCardWebsite.tsx
View File

@ -11,7 +11,7 @@ export const SearchCardWebsite = ({ item }: Props) => {
const { data } = item;
return (
<div class="absolute inset-0 p-3 bg-blue-50">
<div class="inset-0 p-3 bg-blue-50">
<div class="grid grid-cols-[auto_20px] gap-1 mb-1">
<p class="text-sm text-neutral-900 font-bold">{data.title}</p>
<IconLink size={20} class="text-neutral-500 mt-1" />