Fix lowercase actions.

Now you can configure your container using Environmet vars.

.dockerignore

@@ -2,3 +2,5 @@ node_modules
 build
 .dockerignore
 Dockerfile
+.env
+.env.local

.env.production

@@ -0,0 +1,3 @@
+# App config Variables (Will be visible by client):
+VITE_BACKEND_HOST=SOMNIAROOMS_BACKEND_HOST
+VITE_BACKEND_PORT=SOMNIAROOMS_BACKEND_PORT

.gitea/workflows/ci.yaml

@@ -0,0 +1,23 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request: ~
+  workflow_dispatch: ~
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+
+  lint:
+    name: Docker Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Lint Dockerfile
+        uses: hadolint/[email protected]

.gitea/workflows/pub-on-tag.yaml

@@ -15,9 +15,18 @@ jobs:
     name: Build and Push
     runs-on: ubuntu-latest
     steps:
+      - name: downcase REPO_OWNER
+        run: |
+          echo "REPO_OWNER=${gitea.repository_owner,,}" >> "${gitea.env}"
+
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: arm64
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
@@ -33,14 +42,8 @@ jobs:
         with:
           context: .
           push: true
-          tags: daniel-garmig/somniaroomsapp:devbuild
+          tags: ${{vars.REGISTRY_INSTANCE}}/${{env.REPO_OWNER}}/somniaroomsapp:devbuild
           target: final-prod
-
+          platforms: linux/amd64,linux/arm64
-  lint:
+          secrets: | 
-    name: Docker Lint
+            GIT_AUTH_TOKEN=${{secrets.REGISTRY_TOKEN}}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Lint Dockerfile
-        uses: hadolint/[email protected]

Dockerfile

@@ -14,11 +14,13 @@ CMD ["npm", "run", "dev"]
 
 # Build app for production.
 FROM app-base as builder
-RUN npm ci
+RUN npm ci && npm run build
-RUN 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;"]

README.md

@@ -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)

index.html

@@ -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>

scripts/env.sh

@@ -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

src/components/Search/SearchFilterCard.tsx

@@ -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>

src/components/app-header.tsx

@@ -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>

src/components/booking/booking-details.tsx

@@ -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>
+        {
+          mode == "Book" &&
           <Button className="my-2" onClick={onBtBookingClick}>
             <Typography variant={"largeText"} className="text-primary-foreground">Book it!</Typography>
           </Button>
+        }
       </CardContent>
     </Card>
   )

src/components/ui/dateRange-picker.tsx

@@ -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>

src/routes/book-page.tsx

@@ -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>

src/routes/home-page.tsx

@@ -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" />

src/routes/search-page.tsx

@@ -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>