Merge pull request #82 from OpenHausIO/dev

Release v1.1.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/main.js

@@ -144,13 +144,15 @@ function fetchData() {
             request("/api/rooms"),
             request("/api/endpoints"),
             request("/api/devices"),
-        ]).then(([rooms, endpoints, devices]) => {
+            request("/api/scenes"),
+        ]).then(([rooms, endpoints, devices, scenes]) => {
 
             const store = itemStore();
 
             store.rooms = rooms;
             store.endpoints = endpoints;
             store.devices = devices;
+            store.scenes = scenes;
 
             console.log("API resrouces fetched");
 

src/router/index.js

@@ -26,7 +26,7 @@ const routes = reactive([{
     icon: "fa-solid fa-tv",
     visible: true,
     component: () => import("../views/Devices.vue")
-}/*, {
+}, {
     path: "/scenes",
     name: "Scenes",
     icon: "fa-solid fa-clone",

src/store.js

@@ -25,6 +25,7 @@ export const settingsStore = defineStore("settings", {
             showRoomsButton: true,
             showEndpointsButton: true,
             showDevicesButton: true,
+            showScenesButton: true,
             showVueTourOnNextVisit: true,
             showGradientBackground: true,
             editDashboardWidgets: false,
@@ -50,6 +51,7 @@ export const itemStore = defineStore("items", {
             rooms: [],
             endpoints: [],
             devices: [],
+            scenes: []
         }
     },
     actions: {

src/views/Scenes.vue

@@ -1,12 +1,56 @@
 <script setup>
 import Collapsable from "@/components/Collapsable.vue";
 import Tile from "@/components/Tile.vue";
+import { request } from "@/helper";
 </script>
 
 <script>
-export default {};
+import { itemStore } from "../store.js";
+const store = itemStore();
+
+export default {
+  components: {
+    Collapsable,
+    Tile,
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    items() {
+      return store.scenes;
+    },
+  },
+  methods: {
+    trigger(item) {
+      request(
+        `/api/scenes/${item._id}/trigger`,
+        {
+          method: "POST",
+        },
+        (err, result) => {
+          console.log(err, result);
+        }
+      );
+    }
+  }
+};
 </script>
 
 <template>
-  <div class="container-fluid">Scenes page</div>
+  <div class="container-fluid">
+    <!-- COMMANDS/STATES/SCENES -->
+    <div class="row display-flex text-center" style="height: 100%">
+      <!-- COMMANDS -->
+      <div class="p-0 col-6 col-md-3 col-xl-2" v-bind:key="item._id" v-for="item in items">
+        <Tile style="background: transparent; border: 1px solid rgb(0, 0, 0)" @click="trigger(item, $event)">
+          {{ item.name }}
+        </Tile>
+      </div>
+      <!-- COMMANDS -->
+
+    </div>
+    <!-- COMMANDS/STATES/SCENES -->
+  </div>
 </template>