From e7eec8b45bf536da2684c6799b17f16451c632e7 Mon Sep 17 00:00:00 2001
From: Marc Stirner <marc.stirner@it2media.de>
Date: Tue, 30 Jan 2024 16:07:05 +0100
Subject: [PATCH 1/4] added

---
 src/views/Grid.vue | 302 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 302 insertions(+)
 create mode 100644 src/views/Grid.vue

diff --git a/src/views/Grid.vue b/src/views/Grid.vue
new file mode 100644
index 0000000..3a0f23e
--- /dev/null
+++ b/src/views/Grid.vue
@@ -0,0 +1,302 @@
+<script setup>
+import { useSwipe, usePointerSwipe } from '@vueuse/core'
+import Tile from "../components/Tile.vue";
+</script>
+
+<script>
+
+export default {
+  data() {
+
+    const p1 = [{
+      x: 1,
+      y: 1,
+      h: 1,
+      w: 1,
+      title: "0",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 1,
+      y: 2,
+      h: 1,
+      w: 1,
+      title: "1",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 1,
+      y: 3,
+      h: 1,
+      w: 1,
+      title: "2",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 2,
+      y: 1,
+      h: 1,
+      w: 1,
+      title: "3",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 2,
+      y: 2,
+      h: 1,
+      w: 1,
+      title: "4",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 2,
+      y: 3,
+      h: 1,
+      w: 1,
+      title: "5",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 3,
+      y: 1,
+      h: 1,
+      w: 1,
+      title: "6",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 3,
+      y: 2,
+      h: 1,
+      w: 1,
+      title: "7",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 3,
+      y: 3,
+      h: 1,
+      w: 1,
+      title: "8",
+      icon: "fa-solid fa-0"
+    }, {
+      x: 4,
+      y: 1,
+      h: 1,
+      w: 3,
+      title: "9",
+      icon: "fa-solid fa-0"
+    }];
+
+    const p2 = [{
+      x: 7,
+      y: 1,
+      h: 1,
+      w: 1,
+      title: "Exit",
+      icon: "fa-regular fa-circle-xmark"
+    }, {
+      x: 7,
+      y: 3,
+      h: 1,
+      w: 1,
+      title: "Enter",
+      icon: "fa-regular fa-circle-check"
+    }, {
+      x: 2,
+      y: 2,
+      h: 1,
+      w: 1,
+      title: "UP",
+      icon: "fa-solid fa-arrow-up"
+    }, {
+      x: 4,
+      y: 2,
+      h: 1,
+      w: 1,
+      title: "DOWN",
+      icon: "fa-solid fa-arrow-down"
+    }, {
+      x: 3,
+      y: 1,
+      h: 1,
+      w: 1,
+      title: "LEFT",
+      icon: "fa-solid fa-arrow-left"
+    }, {
+      x: 3,
+      y: 3,
+      h: 1,
+      w: 1,
+      title: "RIGHT",
+      icon: "fa-solid fa-arrow-right"
+    }];
+
+    return {
+      active: 1,
+      page: null,
+      pages: [{
+        title: "Page #1",
+        show: true,
+        size: {
+          cols: 3,
+          rows: 3
+        },
+        items: p1
+      }, {
+        title: "Page #2",
+        show: true,
+        size: {
+          cols: 3,
+          rows: 3
+        },
+        items: p2
+      }, {
+        title: "Page #3",
+        show: false,
+        size: {
+          cols: 18,
+          rows: 18
+        }
+      }, {
+        title: "Page #4",
+        show: false,
+        size: {
+          cols: 2,
+          rows: 2
+        }
+      }]
+    };
+  },
+  computed: {
+    carousel() {
+      return this.pages.filter(({ show }) => {
+        return show;
+      });
+    }
+  },
+  methods: {
+    setPage() {
+      this.page = this.carousel[this.active];
+    },
+    nextPage() {
+
+      if (this.active < this.carousel.length - 1) {
+        this.active += 1;
+      }
+
+      this.setPage();
+
+    },
+    prevPage() {
+
+      if (this.active > 0) {
+        this.active -= 1;
+      }
+
+      this.setPage();
+
+    }
+  },
+  mounted() {
+
+    usePointerSwipe(this.$refs.touchplace, {
+      onSwipeEnd: (event, direction) => {
+        if (direction === "left") {
+          this.nextPage();
+        } else if (direction === "right") {
+          this.prevPage();
+        }
+      }
+    });
+
+    this.setPage();
+
+  }
+
+};
+</script>
+
+<template>
+  <div>
+    <div class="h-100" ref="touchplace">
+
+      <div class="h-100" v-if="page">
+        <div
+          :style="{ gridTemplateColumns: `repeat(${page.size.cols}, 1fr)`, gridTemplateRows: `repeat(${page.size.rows}, 1fr)` }"
+          id="grid-container">
+
+          <Tile style="background: transparent; border: 1px solid rgb(0, 0, 0)" v-for="(item, i) in page.items" :key="i"
+            class="grid-item" :style="{ gridArea: `${item.x} / ${item.y} / span ${item.h} / span ${item.w}` }">
+            <template #title>
+              <i :class="item?.icon || 'fa-regular fa-circle-question'"></i>
+            </template>
+            <h5>{{ item.title }}</h5>
+          </Tile>
+
+          <!--
+            <h3 style="display: block;">
+              {{ item.title }}
+            </h3>
+            <div style="font-size: 12px;" class="hide">
+              #{{ i }}&nbsp;
+              <span style="color: red;">x</span>= {{ item.x }},&nbsp;
+              <span style="color: blue;">y</span>= {{ item.y }},&nbsp;
+              <span style="color: yellow;">w</span>= {{ item.w }},&nbsp;
+              <span style="color: yellow;">h</span>= {{ item.h }}
+            </div>
+          -->
+        </div>
+      </div>
+
+    </div>
+    <div id="indicator">
+      <ul class="flexible-list">
+        <li v-for="(page, index) in  carousel " :key="index" :class="{ 'active': index === active }"></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.flexible-list {
+  list-style: none;
+  display: flex;
+  width: 10%;
+  padding: 0;
+  /* Entferne den Standardinnenabstand der UL */
+}
+
+.flexible-list li {
+  flex: 1;
+  /*border-bottom: 2px solid #000;*/
+  background-color: #000;
+  padding: 1px;
+  margin: 2px;
+}
+
+.flexible-list li.active {
+  background-color: var(--bs-blue);
+  box-shadow: 0px 0px 10px 1px var(--bs-blue);
+}
+
+#indicator {
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  color: #fff;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#grid-container {
+  display: grid;
+  height: calc(100%);
+  grid-auto-rows: 1fr;
+  /*see: https://stackoverflow.com/a/44490047/5781499 */
+  /*gap: 1px; /* Optional: Add gap between grid items */
+}
+
+.grid-item {
+  border: 1px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 1px);
+}
+</style>
\ No newline at end of file

From 58f7709b7121a4cea4400d98be54d0b6ba45787f Mon Sep 17 00:00:00 2001
From: Marc Stirner <marc.stirner@it2media.de>
Date: Tue, 30 Jan 2024 16:07:49 +0100
Subject: [PATCH 2/4] vue use added, fix #89

---
 package-lock.json | 138 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   3 +-
 2 files changed, 138 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ba3419..d4b7a62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,18 @@
 {
   "name": "frontend",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "dependencies": {
         "@dafcoe/vue-notification": "^0.1.6",
         "@fortawesome/fontawesome-svg-core": "^1.3.0",
         "@fortawesome/free-regular-svg-icons": "^6.0.0",
         "@fortawesome/free-solid-svg-icons": "^6.0.0",
+        "@vueuse/core": "^10.7.2",
         "bootstrap": "^5.1.3",
         "dateformat": "^5.0.3",
         "pinia": "^2.0.22",
@@ -353,6 +354,11 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
@@ -483,6 +489,89 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
+      "dependencies": {
+        "vue-demi": ">=0.14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3599,6 +3688,11 @@
       "dev": true,
       "optional": true
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+    },
     "@types/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
@@ -3720,6 +3814,46 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.31.tgz",
       "integrity": "sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ=="
     },
+    "@vueuse/core": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ=="
+    },
+    "@vueuse/shared": {
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
+      "requires": {
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/package.json b/package.json
index 4812378..f57af53 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
+    "@vueuse/core": "^10.7.2",
     "bootstrap": "^5.1.3",
     "dateformat": "^5.0.3",
     "pinia": "^2.0.22",
@@ -33,4 +34,4 @@
     "puppeteer-screen-recorder": "^2.1.2",
     "vite": "^2.9.13"
   }
-}
\ No newline at end of file
+}

From bcf68908a50fd41bdfe57f84a9d90d4272d5b5d1 Mon Sep 17 00:00:00 2001
From: Marc Stirner <marc.stirner@it2media.de>
Date: Tue, 30 Jan 2024 16:08:43 +0100
Subject: [PATCH 3/4] `/grid` route for test #125 added

---
 src/router/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/router/index.js b/src/router/index.js
index e7841db..3fad65d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -70,6 +70,10 @@ const router = createRouter({
             path: "/test",
             name: "/test",
             component: () => import("../views/Test.vue")
+        }, {
+            path: "/grid",
+            name: "/grid",
+            component: () => import("../views/Grid.vue")
         }, {
             path: "/settings",
             name: "Settings",

From 860ef15b0c09f4243551696e23c99e16612e7325 Mon Sep 17 00:00:00 2001
From: Marc Stirner <marc.stirner@it2media.de>
Date: Wed, 31 Jan 2024 11:10:23 +0100
Subject: [PATCH 4/4] update node.js version to v18

---
 .github/workflows/docker-nightly.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/docker-nightly.yml b/.github/workflows/docker-nightly.yml
index 9b71cc9..d64915b 100644
--- a/.github/workflows/docker-nightly.yml
+++ b/.github/workflows/docker-nightly.yml
@@ -11,12 +11,12 @@ jobs:
     if: github.repository == 'OpenHausIO/frontend'
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v3
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
       - run: npm ci
       - run: npm run build