Somnia/SomniaRoomsApp
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Small fix pass.
CI / Docker Lint (push) Successful in 28s
Details

Browse Source
This commit is contained in:
Daniel-Garmig
2024-05-13 00:49:54 +02:00
parent b83af1b872
commit 4e825c7ca7
8 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/SR2.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>
src/components/Search/SearchFilterCard.tsx
+3 -1
View File
@@ -71,11 +71,13 @@ export function SearchFilterCard({ onSearchClick }: { onSearchClick?: funOnSearc
const datePickerElement = searchFilter == null ? ( const datePickerElement = searchFilter == null ? (
<DatePickerWithRange <DatePickerWithRange
updateDateRange={updateDateRange}> updateDateRange={updateDateRange}
allowPast={false}>
</DatePickerWithRange> </DatePickerWithRange>
) : ( ) : (
<DatePickerWithRange <DatePickerWithRange
updateDateRange={updateDateRange} updateDateRange={updateDateRange}
allowPast={false}
startDate={searchFilter.dateRange.from} startDate={searchFilter.dateRange.from}
endDate={searchFilter.dateRange.to}> endDate={searchFilter.dateRange.to}>
</DatePickerWithRange> </DatePickerWithRange>
src/components/app-header.tsx
+5 -7
View File
@@ -9,20 +9,18 @@ function AppHeader() {
return ( return (
<Card className="flex items-center mx-10 my-4"> <Card className="flex items-center mx-10 my-4">
<CardContent className="w-full"> <CardContent className="w-full py-2">
<div className="flex justify-around items-center"> <div className="flex justify-around items-center">
<div className="flex flex-row items-center gap-2 relative"> <div className="flex flex-row items-center gap-2 relative">
<img src="public/SR2.svg" className="w-[64px]"></img> <img src="public/SR2.svg" className="w-[64px]"></img>
<Typography variant={"largeText"}>Somnia Rooms</Typography> <Typography variant={"largeText"}>Somnia Rooms</Typography>
<a href="https://duck.com" className="absolute w-[100%] h-[100%]"></a> <a href="https://duck.com" className="absolute w-[100%] h-[100%]"></a>
</div> </div>
<Button variant="ghost"> <Button variant="ghost" className="h-15">
<HomeIcon /> <Link to={`home`}><HomeIcon className="mx-auto" />Home</Link>
<Link to={`home`}>Home</Link>
</Button> </Button>
<Button variant="ghost"> <Button variant="ghost" className="h-15">
<BookAIcon /> <Link to={`search`}><BookAIcon className="mx-auto" />Reservar</Link>
<Link to={`search`}>Reservar</Link>
</Button> </Button>
<ModeToggle /> <ModeToggle />
</div> </div>
src/components/booking/booking-details.tsx
+9 -3
View File
@@ -7,8 +7,9 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
import { Button } from "../ui/button"; import { Button } from "../ui/button";
type OnBookingClickFunction = () => void; type OnBookingClickFunction = () => void;
type BookingDetailsModes = "Book" | "View"
export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBookingClickFunction }) { export function BookingDetails({ onBookingConfirm, mode }: { onBookingConfirm?: OnBookingClickFunction, mode: BookingDetailsModes }) {
const bookingData = useAppStore((state) => state.newBookingData); const bookingData = useAppStore((state) => state.newBookingData);
@@ -38,6 +39,7 @@ export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBook
<TableCell>{room.guestNumber}</TableCell> <TableCell>{room.guestNumber}</TableCell>
<TableCell>{room.amount}</TableCell> <TableCell>{room.amount}</TableCell>
<TableCell>{room.price / 100} €</TableCell> <TableCell>{room.price / 100} €</TableCell>
<TableCell>{(room.price * room.amount) / 100} €</TableCell>
</TableRow> </TableRow>
); );
}) })
@@ -50,7 +52,8 @@ export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBook
<TableHead>Room</TableHead> <TableHead>Room</TableHead>
<TableHead>Guests</TableHead> <TableHead>Guests</TableHead>
<TableHead>Quantity</TableHead> <TableHead>Quantity</TableHead>
<TableHead>Price</TableHead> <TableHead>Unit price</TableHead>
<TableHead>Total price</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -60,7 +63,7 @@ export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBook
); );
const totalPrice = bookingData.rooms.reduce((acc, room) => (acc + room.price), 0); const totalPrice = bookingData.rooms.reduce((acc, room) => (acc + (room.price * room.amount)), 0);
return ( return (
<Card> <Card>
@@ -80,9 +83,12 @@ export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBook
<Separator className="my-2"></Separator> <Separator className="my-2"></Separator>
<Typography variant={"h3"}>Total Price</Typography> <Typography variant={"h3"}>Total Price</Typography>
<Typography variant={"h3"}>{totalPrice / 100} €</Typography> <Typography variant={"h3"}>{totalPrice / 100} €</Typography>
{
mode == "Book" &&
<Button className="my-2" onClick={onBtBookingClick}> <Button className="my-2" onClick={onBtBookingClick}>
<Typography variant={"largeText"} className="text-primary-foreground">Book it!</Typography> <Typography variant={"largeText"} className="text-primary-foreground">Book it!</Typography>
</Button> </Button>
}
</CardContent> </CardContent>
</Card> </Card>
) )
src/components/ui/dateRange-picker.tsx
+11 -2
View File
@@ -18,8 +18,11 @@ import { Typography } from "./typography"
export type UpdateRangeFunction = (newRange: DateRange) => void; export type UpdateRangeFunction = (newRange: DateRange) => void;
export function DatePickerWithRange({ export function DatePickerWithRange({
className, updateDateRange, startDate, endDate className, updateDateRange, startDate, endDate, allowPast = true
}: { className?: React.HTMLAttributes<HTMLDivElement> | undefined, updateDateRange: UpdateRangeFunction | undefined , startDate?: Date, endDate?: Date}) { }: {
className?: React.HTMLAttributes<HTMLDivElement> | undefined, updateDateRange: UpdateRangeFunction | undefined,
startDate?: Date, endDate?: Date, allowPast?: boolean
}) {
// Date Range State. // Date Range State.
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({ const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: startDate, from: startDate,
@@ -61,6 +64,11 @@ export function DatePickerWithRange({
beforeAndSelected = [beforeMatcher, dateMatcher]; beforeAndSelected = [beforeMatcher, dateMatcher];
} }
let pastMatcher: DateBefore | undefined = undefined;
if (!allowPast) {
pastMatcher = { before: new Date() };
}
return ( return (
<div className={cn("grid gap-x-2 grid-cols-2 grid-rows-2", className)}> <div className={cn("grid gap-x-2 grid-cols-2 grid-rows-2", className)}>
<Typography variant={"largeText"} as="p">Desde</Typography> <Typography variant={"largeText"} as="p">Desde</Typography>
@@ -91,6 +99,7 @@ export function DatePickerWithRange({
selected={dateRange?.from} selected={dateRange?.from}
onDayClick={handleDayClickFrom} onDayClick={handleDayClickFrom}
numberOfMonths={1} numberOfMonths={1}
disabled={pastMatcher}
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
src/routes/book-page.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ function BookPage() {
</div> </div>
</div> </div>
<Separator className="my-10" /> <Separator className="my-10" />
<BookingDetails></BookingDetails> <BookingDetails mode="View"></BookingDetails>
<Separator className="my-10" /> <Separator className="my-10" />
<Button onClick={handleOnBookingSubmit} disabled={pageState == PageState.sending}> <Button onClick={handleOnBookingSubmit} disabled={pageState == PageState.sending}>
<Typography variant={"h3"} className="text-primary-foreground">Book it now!</Typography> <Typography variant={"h3"} className="text-primary-foreground">Book it now!</Typography>
src/routes/home-page.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ function Homepage() {
return ( return (
<> <>
<Typography variant={"h1"}>Hostal del Val</Typography> <Typography variant={"h1"}>Somnia Rooms</Typography>
<Separator className="my-10" /> <Separator className="my-10" />
<SearchFilterCard onSearchClick={onBtSearchClick}/> <SearchFilterCard onSearchClick={onBtSearchClick}/>
<Separator className="my-10" /> <Separator className="my-10" />
src/routes/search-page.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ function SearchPage() {
{hasRooms ? roomList : (isSearched && noRoomsAvailable)} {hasRooms ? roomList : (isSearched && noRoomsAvailable)}
</div> </div>
<Separator className="my-10" /> <Separator className="my-10" />
<BookingDetails onBookingConfirm={onBookingContinue}></BookingDetails> <BookingDetails onBookingConfirm={onBookingContinue} mode={"Book"}></BookingDetails>
<Separator className="my-10" /> <Separator className="my-10" />
<BackendConnectionStatus isLoading={isLoading} isError={isError} /> <BackendConnectionStatus isLoading={isLoading} isError={isError} />
</div> </div>