Generate Nightly Build - 202405131816

Fix Actions - Change image repository for push.
Small fix pass.
2024-05-13 18:16:20 +02:00 · 2024-05-13 01:18:26 +02:00 · 2024-05-13 00:49:54 +02:00 · 2024-05-13 00:37:57 +02:00 · 2024-05-12 13:21:28 +02:00 · 2024-05-12 02:33:16 +02:00
15 changed files with 86 additions and 24 deletions
@@ -2,3 +2,5 @@ node_modules
 build
 .dockerignore
 Dockerfile
 .env
 .env.local
@@ -1,3 +1,3 @@
 # App config Variables (Will be visible by client):
-VITE_BACKEND_HOST=${SOMNIA_BACKEND_HOST:-https://somniaapi.example.org/}
+VITE_BACKEND_HOST=https://somniaapi.example.org/
-VITE_BACKEND_PORT=${SOMNIA_BACKEND_PORT:-443}
+VITE_BACKEND_PORT=443
@@ -0,0 +1,3 @@
 # App config Variables (Will be visible by client):
 VITE_BACKEND_HOST=SOMNIAROOMS_BACKEND_HOST
 VITE_BACKEND_PORT=SOMNIAROOMS_BACKEND_PORT
@@ -38,7 +38,7 @@ jobs:
        with:
          context: .
          push: true
-          tags: ${{vars.REGISTRY_INSTANCE}}/daniel-garmig/somniaroomsapp:devbuild
+          tags: ${{vars.REGISTRY_INSTANCE}}/somnia/somniaroomsapp:devbuild
          target: final-prod
          platforms: linux/amd64,linux/arm64
          secrets: | 
@@ -19,5 +19,8 @@ RUN npm ci && npm run build
 # production environment
 FROM nginx:stable-alpine as final-prod
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY /public /usr/share/nginx/html/public
 COPY scripts/env.sh /docker-entrypoint.d/env.sh
 EXPOSE 80
 RUN chmod +x /docker-entrypoint.d/env.sh
 CMD ["nginx", "-g", "daemon off;"]
@@ -31,3 +31,30 @@ docker build -t somniarooms-app:prod --target final-prod .
 ```
 docker run -d -it -p 8080:80 --name somniarooms-app somniarooms-app:prod
 ```
 **Docker run with env vars:**
 ```
 docker run -d -it -p 8080:80 --name somniarooms-app -e SOMNIAROOMS_BACKEND_HOST=https://somniaapi.example.org/ -e SOMNIAROOMS_BACKEND_PORT=443 somniarooms-app:prod
 ```
 ## Env Vars.
 As this is distributed as a docker image ready to use, you must set some env variables to configure the app:
 |            Var             |         Default Value          |                                         Description                                          |
 | :------------------------: | :----------------------------: | :------------------------------------------------------------------------------------------: |
 | `SOMNIAROOMS_BACKEND_HOST` | https://somniaapi.example.org/ | Host where uses can connect to the SomniaRoom API. API endpoint should be reachble for uses. |
 | `SOMNIAROOMS_BACKEND_PORT` |              443               |                                  Port to SomniarRooms API.                                   |
 ## .env files
 This project uses .env files to configure the app. As Vite only supports compile-time vars, we use some tricks to allow setting variables from container env variables.
 ### .env 
 Contains default values. It is just an example configuration.
 For development is recomended to create a `.env.local` file based on `.env`.
 ### .env.production
 Set varibles to certains placeholder, that are replace on container startup.
 (We are using this solution: https://stackoverflow.com/a/77454537)
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <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" />
    <title>Vite + React + TS</title>
  </head>
@@ -0,0 +1,12 @@
 #!/bin/sh
 for i in $(env | grep SOMNIAROOMS_)
 do
    key=$(echo $i | cut -d '=' -f 1)
    value=$(echo $i | cut -d '=' -f 2-)
    echo $key=$value
    # sed All files
    # find /usr/share/nginx/html -type f -exec sed -i "s|${key}|${value}|g" '{}' +
    # sed JS and CSS only
    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
 done
@@ -71,11 +71,13 @@ export function SearchFilterCard({ onSearchClick }: { onSearchClick?: funOnSearc
  const datePickerElement = searchFilter == null ? (
    <DatePickerWithRange
-      updateDateRange={updateDateRange}>
+      updateDateRange={updateDateRange}
      allowPast={false}>
    </DatePickerWithRange>
  ) : (
    <DatePickerWithRange
      updateDateRange={updateDateRange}
      allowPast={false}
      startDate={searchFilter.dateRange.from}
      endDate={searchFilter.dateRange.to}>
    </DatePickerWithRange>
@@ -9,20 +9,18 @@ function AppHeader() {
  return (
    <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 flex-row items-center gap-2 relative">
            <img src="public/SR2.svg" className="w-[64px]"></img>
            <Typography variant={"largeText"}>Somnia Rooms</Typography>
            <a href="https://duck.com" className="absolute w-[100%] h-[100%]"></a>
          </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 variant="ghost">
+          <Button variant="ghost" className="h-15">
-            <BookAIcon />
+            <Link to={`search`}><BookAIcon className="mx-auto" />Reservar</Link>
            <Link to={`search`}>Reservar</Link>
          </Button>
          <ModeToggle />
        </div>
@@ -7,8 +7,9 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
 import { Button } from "../ui/button";
 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);
@@ -38,6 +39,7 @@ export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBook
        <TableCell>{room.guestNumber}</TableCell>
        <TableCell>{room.amount}</TableCell>
        <TableCell>{room.price / 100} €</TableCell>
        <TableCell>{(room.price * room.amount) / 100} €</TableCell>
      </TableRow>
    );
  })
@@ -50,7 +52,8 @@ export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBook
          <TableHead>Room</TableHead>
          <TableHead>Guests</TableHead>
          <TableHead>Quantity</TableHead>
-          <TableHead>Price</TableHead>
+          <TableHead>Unit price</TableHead>
          <TableHead>Total price</TableHead>
        </TableRow>
      </TableHeader>
      <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 (
    <Card>
@@ -80,9 +83,12 @@ export function BookingDetails({ onBookingConfirm }: { onBookingConfirm?: OnBook
        <Separator className="my-2"></Separator>
        <Typography variant={"h3"}>Total Price</Typography>
        <Typography variant={"h3"}>{totalPrice / 100} €</Typography>
-        <Button className="my-2" onClick={onBtBookingClick}>
+        {
-          <Typography variant={"largeText"} className="text-primary-foreground">Book it!</Typography>
+          mode == "Book" &&
-        </Button>
+          <Button className="my-2" onClick={onBtBookingClick}>
            <Typography variant={"largeText"} className="text-primary-foreground">Book it!</Typography>
          </Button>
        }
      </CardContent>
    </Card>
  )
@@ -18,8 +18,11 @@ import { Typography } from "./typography"
 export type UpdateRangeFunction = (newRange: DateRange) => void;
 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.
  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
    from: startDate,
@@ -61,6 +64,11 @@ export function DatePickerWithRange({
    beforeAndSelected = [beforeMatcher, dateMatcher];
  }
  let pastMatcher: DateBefore | undefined = undefined;
  if (!allowPast) {
    pastMatcher = { before: new Date() };
  }
  return (
    <div className={cn("grid gap-x-2 grid-cols-2 grid-rows-2", className)}>
      <Typography variant={"largeText"} as="p">Desde</Typography>
@@ -91,6 +99,7 @@ export function DatePickerWithRange({
            selected={dateRange?.from}
            onDayClick={handleDayClickFrom}
            numberOfMonths={1}
            disabled={pastMatcher}
          />
        </PopoverContent>
      </Popover>
@@ -113,7 +113,7 @@ function BookPage() {
        </div>
      </div>
      <Separator className="my-10" />
-      <BookingDetails></BookingDetails>
+      <BookingDetails mode="View"></BookingDetails>
      <Separator className="my-10" />
      <Button onClick={handleOnBookingSubmit} disabled={pageState == PageState.sending}>
        <Typography variant={"h3"} className="text-primary-foreground">Book it now!</Typography>
@@ -26,7 +26,7 @@ function Homepage() {
  return (
    <>
-      <Typography variant={"h1"}>Hostal del Val</Typography>
+      <Typography variant={"h1"}>Somnia Rooms</Typography>
      <Separator className="my-10" />
      <SearchFilterCard onSearchClick={onBtSearchClick}/>
      <Separator className="my-10" />
@@ -85,7 +85,7 @@ function SearchPage() {
        {hasRooms ? roomList : (isSearched && noRoomsAvailable)}
      </div>
      <Separator className="my-10" />
-      <BookingDetails onBookingConfirm={onBookingContinue}></BookingDetails>
+      <BookingDetails onBookingConfirm={onBookingContinue} mode={"Book"}></BookingDetails>
      <Separator className="my-10" />
      <BackendConnectionStatus isLoading={isLoading} isError={isError} />
    </div>
Author	SHA1	Message	Date
Daniel-Garmig	5676262692	Generate Nightly Build - 202405131816	2024-05-13 18:16:20 +02:00
Daniel-Garmig	d3358c7c58	Fix Actions - Change image repository for push. CI / Docker Lint (push) Successful in 22s Details	2024-05-13 01:18:26 +02:00
Daniel-Garmig	4e825c7ca7	Small fix pass.	2024-05-13 00:49:54 +02:00
Daniel-Garmig	b83af1b872	Copy "/public" to image on prod build.	2024-05-13 00:37:57 +02:00
Daniel-Garmig	f8365e05af	Env Vars - Support for container env vars. Now you can configure your container using Environmet vars.	2024-05-12 13:21:28 +02:00
Daniel-Garmig	0039b09d98	Gitea Actions support (#1 ) Add Gitea Actions support. Reviewed-on: Somnia/SomniaRoomsApp#1 Co-authored-by: Daniel García <[email protected]> Co-committed-by: Daniel García <[email protected]>	2024-05-12 02:33:16 +02:00