thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: thowitz-work:a0f5a2f1dea104f6667d0df60d5a5de5a28eda26
Branches Tags
thowitz-work:master
..
compare: thowitz-work:b750c5fd749a80c191572cb6ad85946b2f500227
Branches Tags
thowitz-work:master

No commits in common. "a0f5a2f1dea104f6667d0df60d5a5de5a28eda26" and "b750c5fd749a80c191572cb6ad85946b2f500227" have entirely different histories.
a0f5a2f1de ... b750c5fd74

1 changed files with 62 additions and 109 deletions
Show Stats Expand all files Collapse all files

171
src/app/warehouse/page.tsx
View File

@ -1,6 +1,5 @@
"use client"; "use client";
import Image from "next/image"; import Image from "next/image";
import { useRef } from "react";
import axios from "axios"; import axios from "axios";
import useSWR from "swr"; import useSWR from "swr";
import { Dispatch, SetStateAction, useMemo, useState } from "react"; import { Dispatch, SetStateAction, useMemo, useState } from "react";
@ -374,10 +373,8 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
const [isSold, setIsSold] = useState(artefact.isSold); const [isSold, setIsSold] = useState(artefact.isSold);
const [isCollected, setIsCollected] = useState(artefact.isCollected); const [isCollected, setIsCollected] = useState(artefact.isCollected);
const [image, setImage] = useState<File | null>(null); const [image, setImage] = useState<File | null>(null);
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
function handleOverlayClick(e: { target: any; currentTarget: any }) { function handleOverlayClick(e: { target: any; currentTarget: any }) {
if (e.target === e.currentTarget) { if (e.target === e.currentTarget) {
@ -435,126 +432,82 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
return; return;
} }
setImage(file); setImage(file);
setPreviewImage(URL.createObjectURL(file));
} }
} }
function handleRemoveImage() {
setImage(null);
setPreviewImage(null);
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
}
function handleEditClick() {
fileInputRef.current?.click();
}
return ( return (
<div <div
className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50" className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
onClick={handleOverlayClick} onClick={handleOverlayClick}
> >
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full p-6 border border-neutral-300"> <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
<h3 className="text-lg font-semibold mb-4 text-neutral-800">Edit Artefact</h3> <h3 className="text-lg font-semibold mb-4 text-neutral-800">Edit Artefact</h3>
{error && <p className="text-red-600 text-sm mb-2">{error}</p>} {error && <p className="text-red-600 text-sm mb-2">{error}</p>}
<div className="space-y-2"> <div className="space-y-2">
{(artefact.imageName || previewImage) && ( {artefact.imageName && (
<div className="mb-2 flex justify-center"> <div className="mb-2">
<div className="relative group"> <Image
<Image src={`/artefactImages/${artefact.imageName || "NoImageFound.PNG"}`}
src={previewImage || `/artefactImages/${artefact.imageName || "NoImageFound.PNG"}`} alt="Artefact"
alt="Artefact" width={200}
width={200} height={200}
height={200} className="object-cover mx-auto rounded-md"
className="object-contain rounded-md" />
/>
<div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-md">
{previewImage ? (
<button onClick={handleRemoveImage} className="text-white text-2xl" aria-label="Remove Image">
✕
</button>
) : (
<button onClick={handleEditClick} className="text-white text-2xl" aria-label="Edit Image">
✎
</button>
)}
</div>
</div>
</div> </div>
)} )}
<div> <input
<input type="file"
type="file" accept="image/jpeg,image/png"
accept="image/jpeg,image/png" onChange={handleImageChange}
onChange={handleImageChange} className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
className="hidden" aria-label="Artefact Image"
aria-label="Artefact Image" disabled={isSubmitting}
disabled={isSubmitting} />
ref={fileInputRef}
/>
</div>
<p className="text-sm text-neutral-600">Created At: {new Date(artefact.createdAt).toLocaleDateString("en-GB")}</p> <p className="text-sm text-neutral-600">Created At: {new Date(artefact.createdAt).toLocaleDateString("en-GB")}</p>
<div> <input
<label className="text-sm font-medium text-neutral-600">Name</label> type="text"
<input placeholder="Name"
type="text" value={name}
placeholder="Name" onChange={(e) => setName(e.target.value)}
value={name} className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
onChange={(e) => setName(e.target.value)} aria-label="Artefact Name"
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500" disabled={isSubmitting}
aria-label="Artefact Name" />
disabled={isSubmitting} <input
/> type="text"
</div> placeholder="Type (e.g., Lava, Tephra, Ash)"
<div> value={type}
<label className="text-sm font-medium text-neutral-600">Type</label> onChange={(e) => setType(e.target.value)}
<input className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
type="text" aria-label="Artefact Type"
placeholder="Type (e.g., Lava, Tephra, Ash)" disabled={isSubmitting}
value={type} />
onChange={(e) => setType(e.target.value)} <textarea
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500" placeholder="Description"
aria-label="Artefact Type" value={description}
disabled={isSubmitting} onChange={(e) => setDescription(e.target.value)}
/> className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16"
</div> aria-label="Artefact Description"
<div> disabled={isSubmitting}
<label className="text-sm font-medium text-neutral-600">Description</label> />
<textarea <input
placeholder="Description" type="text"
value={description} placeholder="Earthquake Code (e.g., EC-3.9-Belgium-05467)"
onChange={(e) => setDescription(e.target.value)} value={earthquakeCode}
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16" onChange={(e) => setEarthquakeCode(e.target.value)}
aria-label="Artefact Description" className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
disabled={isSubmitting} aria-label="Earthquake ID"
/> disabled={isSubmitting}
</div> />
<div> <input
<label className="text-sm font-medium text-neutral-600">Earthquake Code</label> type="text"
<input placeholder="Warehouse Area (e.g., A-12)"
type="text" value={warehouseArea}
placeholder="Earthquake Code (e.g., EC-3.9-Belgium-05467)" onChange={(e) => setWarehouseArea(e.target.value)}
value={earthquakeCode} className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
onChange={(e) => setEarthquakeCode(e.target.value)} aria-label="Storage Location"
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500" disabled={isSubmitting}
aria-label="Earthquake ID" />
disabled={isSubmitting}
/>
</div>
<div>
<label className="text-sm font-medium text-neutral-600">Warehouse Area</label>
<input
type="text"
placeholder="Warehouse Area (e.g., A-12)"
value={warehouseArea}
onChange={(e) => setWarehouseArea(e.target.value)}
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
aria-label="Storage Location"
disabled={isSubmitting}
/>
</div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
type="checkbox" type="checkbox"