Merge branch 'main' of https://github.com/BaselHack-2023/web-frontend …

…into main

.github/workflows/publish.yml

@@ -0,0 +1,50 @@
+name: 🐳 Publish Docker image
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v1
+        with:
+          submodules: recursive
+
+      - name: Log in to GitHub packages
+        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Declare some variables
+        shell: bash
+        run: |
+          echo "sha_short=$(git rev-parse --short "$GITHUB_SHA")" >> "$GITHUB_ENV"
+          echo "branch=$(echo ${GITHUB_REF#refs/heads/})" >> "$GITHUB_ENV"
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18 AS build
+
+WORKDIR /app
+
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm install
+
+COPY . ./
+RUN npm run build
+
+FROM nginx:1.25-alpine
+
+# Copy the config files
+ADD ./conf/ /etc/nginx/conf.d/
+
+COPY --from=build /app/dist /usr/share/nginx/html

conf/default.conf

@@ -0,0 +1,19 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

src/App.svelte

@@ -2,29 +2,58 @@
    import '@picocss/pico/css/pico.min.css';
    import { Link, Route, Router } from 'svelte-routing';
    import Calendar from './routes/calendar/Calendar.svelte';
+   import Home from './routes/home/Home.svelte';
    import LostAndFound from './routes/lost-and-found/LostAndFound.svelte';
    import Found from './routes/lost-and-found/Found.svelte';
    import Lost from './routes/lost-and-found/Lost.svelte';
    import LostUploaded from './routes/lost-and-found/LostUploaded.svelte';
    import SearchInFound from './routes/lost-and-found/SearchInFound.svelte';
    import ThanksForUploading from './routes/lost-and-found/ThanksForUploading.svelte';
    import ShareAslot from './routes/share-a-slot/shareAslot.svelte';
+   import ShareUploaded from './routes/share-a-slot/shareUploaded.svelte';
+   import LiesasRequest from './routes/share-a-slot/LiesasRequest.svelte';
+   import LiesasChat from './routes/share-a-slot/LiesasChat.svelte';
+   import './utils/date.extenstions';
 </script>
 
 <Router>
    <nav>
-      <Link to="/">Calendar</Link>
+      <Link to="/">Home</Link>
+      <Link to="/calendar">Calendar</Link>
       <Link to="/lost-and-found/LostAndFound.svelte">Lost&Found</Link>
       <Link to="/share-a-slot/shareAslot.svelte">Share a Slot</Link>
    </nav>
    <main>
-      <Route path="/lost-and-found/ThanksForUploading.svelte" component={ThanksForUploading} />
-      <Route path="/lost-and-found/SearchInFound.svelte" component={SearchInFound} />
-      <Route path="/lost-and-found/LostUploaded.svelte" component={LostUploaded} />
+      <Route
+         path="/lost-and-found/ThanksForUploading.svelte"
+         component={ThanksForUploading}
+      />
+      <Route
+         path="/lost-and-found/SearchInFound.svelte"
+         component={SearchInFound}
+      />
+      <Route
+         path="/lost-and-found/LostUploaded.svelte"
+         component={LostUploaded}
+      />
       <Route path="/lost-and-found/Found.svelte" component={Found} />
       <Route path="/lost-and-found/Lost.svelte" component={Lost} />
-      <Route path="/lost-and-found/LostAndFound.svelte" component={LostAndFound} />
+      <Route
+         path="/lost-and-found/LostAndFound.svelte"
+         component={LostAndFound}
+      />
       <Route path="/share-a-slot/shareAslot.svelte" component={ShareAslot} />
-      <Route path="/"><Calendar /></Route>
+      <Route path="/share-a-slot/shareUploaded.svelte" component={ShareUploaded} />
+      <Route path="/share-a-slot/LiesasRequest.svelte" component={LiesasRequest} />
+      <Route path="/share-a-slot/LiesasChat.svelte" component={LiesasChat} />
+      <Route path="/lost-and-found" component={LostAndFound} />
+      <Route path="/calendar" component={Calendar} />
+      <Route path="/"><Home /></Route>
    </main>
 </Router>
+
+<style>
+   main {
+      min-width: 800px;
+   }
+</style>

src/app.css

@@ -1,80 +1,80 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+   line-height: 1.5;
+   font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+   color-scheme: light dark;
+   color: rgba(255, 255, 255, 0.87);
+   background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+   font-synthesis: none;
+   text-rendering: optimizeLegibility;
+   -webkit-font-smoothing: antialiased;
+   -moz-osx-font-smoothing: grayscale;
+   -webkit-text-size-adjust: 100%;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+   font-weight: 500;
+   color: #646cff;
+   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+   color: #535bf2;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+   margin: 0;
+   display: flex;
+   justify-content: flex-start;
+   min-width: 320px;
+   min-height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+   font-size: 3.2em;
+   line-height: 1.1;
 }
 
 .card {
-  padding: 2em;
+   padding: 2em;
 }
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+   max-width: 1280px;
+   margin: 0 auto;
+   padding: 2rem;
+   text-align: center;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+   border-radius: 8px;
+   border: 1px solid transparent;
+   padding: 0.6em 1.2em;
+   font-size: 1em;
+   font-weight: 500;
+   font-family: inherit;
+   background-color: #1a1a1a;
+   cursor: pointer;
+   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+   border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+   outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+   :root {
+      color: #213547;
+      background-color: #ffffff;
+   }
+   a:hover {
+      color: #747bff;
+   }
+   button {
+      background-color: #f9f9f9;
+   }
 }

src/consts.ts

@@ -0,0 +1,7 @@
+export const BASE_URL = 'https://api.iperka.com';
+
+export const DEFAULT_BOOKING_HOURS = 1;
+export const DEFAULT_DAY_START = 8;
+export const DEFAULT_DAY_END = 22;
+
+export const ONE_HOUR_IN_MS = 3600000;

src/lib/Datepicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
    export let label: string = 'Select a date please';
-   export let date: Date;
+   export let date: string;
 </script>
 
 <div>

src/lib/Teapot.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+   import { BASE_URL } from '../consts';
+
+   export let isItTeatime: number | undefined;
+
+   $: showTeapot = isItTeatime === 418;
+
+   const hideTeapot = () => (showTeapot = false);
+
+   const getTeapot = async (): Promise<string> => {
+      return fetch(`${BASE_URL}/tea`).then((response: Response) =>
+         response.text()
+      );
+   };
+
+   const logErr = (err: any) => {
+      console.log(err);
+      return true;
+   };
+</script>
+
+{#if showTeapot}
+   <div class="teapot-modal">
+      {#await getTeapot()}
+         <h1>Brewing tea 🫖...</h1>
+      {:then body}
+         <h1>I'm a teapot 🫖</h1>
+         <pre>{body}</pre>
+         <button on:click={hideTeapot}>Good for you!</button>
+      {:catch error}
+         <h1>Tea brewed too long and burned 🫖🔥</h1>
+         <button on:click={hideTeapot}>Oh no! 😢</button>
+      {/await}
+   </div>
+{/if}
+
+<style>
+   .teapot-modal {
+      position: absolute;
+      background-color: black;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 10vh 20vw;
+   }
+
+   pre {
+      background-color: black;
+      width: 100%;
+      color: white;
+      margin-bottom: 3rem;
+   }
+</style>

src/model/base.model.ts

@@ -0,0 +1,16 @@
+export interface StartEndTimeDto {
+   start_time: string; //timestamp
+   end_time: string; //timestamp
+}
+
+export interface StartEndTime {
+   startTime: Date;
+   endTime: Date;
+}
+
+export const startEndTimeDtoMapper = (dto: StartEndTimeDto): StartEndTime => {
+   return {
+      startTime: new Date(dto.start_time),
+      endTime: new Date(dto.end_time),
+   };
+};

src/model/machine.model.ts

@@ -0,0 +1,5 @@
+export interface Machine {
+   id: string; // uuid
+   name: string;
+   property: string;
+}