First version
This commit is contained in:
147
frontend/app/waiter/[id]/new/page.tsx
Normal file
147
frontend/app/waiter/[id]/new/page.tsx
Normal file
@ -0,0 +1,147 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import * as React from 'react';
|
||||
import { useForm, useFieldArray, useWatch, Control } from 'react-hook-form';
|
||||
import { fetcher } from '@/app/api/tools';
|
||||
import useSWR from 'swr';
|
||||
|
||||
type FormValues = {
|
||||
data: {
|
||||
item: string;
|
||||
additional_info: string;
|
||||
finished: boolean;
|
||||
}[];
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const { data, error, isLoading } = useSWR('/api/meals', fetcher);
|
||||
|
||||
const { id } = useParams();
|
||||
const router = useRouter();
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<FormValues>({
|
||||
defaultValues: {
|
||||
data: [{ item: '', additional_info: '', finished: false }],
|
||||
},
|
||||
mode: 'onBlur',
|
||||
});
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
name: 'data',
|
||||
control,
|
||||
});
|
||||
const onSubmit = (data: FormValues) => {
|
||||
console.log(data);
|
||||
fetch('/api/orders', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ waiter: id, ...data }),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(({ status }) => console.log(status))
|
||||
.then((_) => router.push(`/waiter/${id}`));
|
||||
};
|
||||
|
||||
if (error) return <div>Błąd przy ładowaniu danych</div>;
|
||||
if (isLoading) return <div>Ładowanie</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
id="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="flex flex-col max-w-screen-md w-full my-4"
|
||||
>
|
||||
<p className="text-2xl text-center">Nowe zamówienie</p>
|
||||
{fields.map((field, index) => {
|
||||
return (
|
||||
<div
|
||||
key={field.id}
|
||||
className="border-2 m-2 p-2 gap-4 flex flex-col items-stretch justify-around content-center"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="hidden"
|
||||
{...register(`data.${index}.finished` as const, {
|
||||
required: false,
|
||||
})}
|
||||
/>
|
||||
<p className="basis-1/3">
|
||||
<label htmlFor={`data.${index}.item`}>Danie</label>
|
||||
<select
|
||||
{...register(`data.${index}.item` as const, {
|
||||
required: true,
|
||||
})}
|
||||
className={errors?.data?.[index]?.item ? 'error' : ''}
|
||||
>
|
||||
<option value="Inne">Inne</option>
|
||||
{data?.map((data: { id: number; name: string }) => (
|
||||
<option key={data.name} value={data.name}>
|
||||
{data.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</p>
|
||||
<p className="basis-1/3">
|
||||
<label htmlFor={`data.${index}.additional_info`}>
|
||||
Dodatkowe informacje
|
||||
</label>
|
||||
<textarea
|
||||
placeholder="Dodatkowe informacje"
|
||||
{...register(`data.${index}.additional_info` as const, {
|
||||
required: false,
|
||||
})}
|
||||
className={
|
||||
errors?.data?.[index]?.additional_info ? 'error' : ''
|
||||
}
|
||||
/>
|
||||
</p>
|
||||
{fields.length > 1 ? (
|
||||
<p className="basis-1/3 flex items-center justify-center">
|
||||
<button type="button" onClick={() => remove(index)}>
|
||||
Usuń
|
||||
</button>
|
||||
</p>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="mx-auto"
|
||||
onClick={() =>
|
||||
append({
|
||||
item: '',
|
||||
additional_info: '',
|
||||
finished: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
Dodaj kolejne danie
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={
|
||||
'mt-10 mx-auto p-2 border-2 text-black hover:text-black ' +
|
||||
(!!errors.data
|
||||
? 'bg-red-300 border-red-500'
|
||||
: 'bg-green-300 border-green-500')
|
||||
}
|
||||
disabled={!!errors.data}
|
||||
>
|
||||
Złóż zamówienie
|
||||
</button>
|
||||
</form>
|
||||
<Link href={`/waiter/${id}`} className='mt-10'><button>Powrót</button></Link>
|
||||
</>
|
||||
);
|
||||
}
|
||||
76
frontend/app/waiter/[id]/page.tsx
Normal file
76
frontend/app/waiter/[id]/page.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import { fetcher } from '@/app/api/tools';
|
||||
import useSWR from 'swr';
|
||||
import { useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Home() {
|
||||
const { id } = useParams();
|
||||
const { data, error, isLoading } = useSWR(
|
||||
`/api/orders?waiter=${id}`,
|
||||
fetcher,
|
||||
{
|
||||
refreshInterval: 1000,
|
||||
}
|
||||
);
|
||||
|
||||
if (error) return <div>Błąd przy ładowaniu danych</div>;
|
||||
if (isLoading) return <div>Ładowanie</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="text-lg">
|
||||
<Link href={`/waiter/${id}/new`}>
|
||||
<button>Nowe zamówienie</button>
|
||||
</Link>
|
||||
</p>
|
||||
<p className="text-4xl">Zamówienia:</p>
|
||||
<ul className="max-w-screen-md w-full">
|
||||
{data?.map(
|
||||
(order: {
|
||||
id: number;
|
||||
created_on: string;
|
||||
updated_on: string;
|
||||
waiter: number;
|
||||
waiter_name: string;
|
||||
data: [
|
||||
{ item: string; additional_info: string; finished: boolean }
|
||||
];
|
||||
status: string;
|
||||
status_name: string;
|
||||
}) => (
|
||||
<li key={order.id} className="m-2 p-2 border-2 bg-gray-100">
|
||||
<h1 className="text-xl">
|
||||
<span className="font-mono">
|
||||
{'['}
|
||||
{String(order.id % 1000).padStart(3, '0')}
|
||||
{']'}
|
||||
</span>{' '}
|
||||
- {new Date(order.updated_on).toLocaleTimeString('pl-PL')}
|
||||
</h1>
|
||||
<h2 className="text-xl">{order.waiter_name}</h2>
|
||||
<h3>{order.status_name}</h3>
|
||||
<div className="">
|
||||
<ul>
|
||||
{order.data.map((dish) => (
|
||||
<li
|
||||
key={dish.item}
|
||||
className="p-2 m-2 flex gap-4 bg-gray-200 border-2 border-gray-400"
|
||||
>
|
||||
<input type="checkbox" checked={dish.finished} readOnly />
|
||||
<div>
|
||||
<p className="text-lg">{dish.item}</p>
|
||||
<div>{dish.additional_info}</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
27
frontend/app/waiter/page.tsx
Normal file
27
frontend/app/waiter/page.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { fetcher } from '@/app/api/tools';
|
||||
import useSWR from 'swr';
|
||||
|
||||
export default function Home() {
|
||||
const { data, error, isLoading } = useSWR('/api/waiters', fetcher);
|
||||
|
||||
if (error) return <div>Błąd przy ładowaniu danych</div>;
|
||||
if (isLoading) return <div>Ładowanie</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="text-xl">Kelnerzy:</p>
|
||||
<ul className="text-lg flex flex-col items-center gap-2">
|
||||
{data?.map((data: { id: number; name: string }) => (
|
||||
<li key={data.id}>
|
||||
<Link href={`/waiter/${data.id}`}>
|
||||
<button>{data.name}</button>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user