fix #51

OpenHausIO · Dec 30, 2022 · c62e0c3 · c62e0c3
1 parent cc0b62a
commit c62e0c3
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 42 deletions.
diff --git a/src/components/Collapsable.vue b/src/components/Collapsable.vue
@@ -17,26 +17,43 @@ export default {
 
 <template>
   <div>
-    <div class="row">
-      <div class="col-2">
-        <h3>
+    <!-- HEADER -->
+    <div
+      class="row py-4"
+      style="border-top: 1px solid #000; border-bottom: 1px solid #000"
+    >
+      <!-- LEFT -->
+      <div class="col">
+        <div class="d-inline-flex">
           <slot name="title" id="title"></slot>
-        </h3>
-      </div>
-      <div class="col-9">
-        <hr class="w-100" />
+        </div>
       </div>
-      <div class="col-1">
-        <button
-          class="btn btn-outline-primary w-100"
-          @click="collapsed = !collapsed"
-        >
+      <!-- LEFT -->
+      <!-- RIGHT -->
+      <div class="col-2">
+        <div @click="collapsed = !collapsed">
+          <div v-if="!collapsed" class="text-center">
+            <i class="fa-solid fa-chevron-up fa-2x d-block"></i>
+            Collapse
+          </div>
+          <div v-else class="text-center">
+            <i class="fa-solid fa-chevron-down fa-2x d-block"></i>
+            Expand
+          </div>
+        </div>
+        <!--
+        <button class="btn btn-outline-primary" @click="collapsed = !collapsed">
           {{ text }}
         </button>
+        -->
       </div>
+      <!-- RIGHT -->
     </div>
+    <!-- HEADER -->
+    <!-- CONTENT -->
     <div class="row" v-show="!collapsed">
       <slot></slot>
     </div>
+    <!-- CONTENT -->
   </div>
 </template>
diff --git a/src/views/Endpoints.vue b/src/views/Endpoints.vue
@@ -29,16 +29,10 @@ export default {
     }, {});
   },
   methods: {
-    getRoomNameById(_id) {
-      let room = Array.from(store.rooms).find((obj) => {
+    getRoomById(_id) {
+      return Array.from(store.rooms).find((obj) => {
         return obj._id === _id;
       });
-
-      if (!room) {
-        return "undefined";
-      }
-
-      return room.name;
     },
   },
 };
@@ -48,9 +42,26 @@ export default {
   <div class="container-fluid">
     <div v-show="settings.groupEndpointItems">
       <!-- COLLAPSABLE FLOOR -->
-      <div class="row" v-bind:key="index" v-for="(endpoints, index) in rooms">
+      <div class="row" v-bind:key="roomId" v-for="(endpoints, roomId) in rooms">
         <Collapsable>
-          <template #title>Room: {{ getRoomNameById(index) }}</template>
+          <template #title>
+            <div class="me-2 pt-1">
+              <i
+                :class="
+                  getRoomById(roomId)?.icon || 'fa-solid fa-circle-question'
+                "
+                class="fa-3x"
+              ></i>
+            </div>
+            <div class="">
+              <h3 class="mb-0">
+                {{ getRoomById(roomId)?.name || "Undefined" }}
+              </h3>
+              <span class="text-secondary fw-light d-block">
+                Endpoints: {{ endpoints.length }}
+              </span>
+            </div>
+          </template>
           <RouterLink
             v-bind:key="item._id || Date.now()"
             v-for="item in endpoints"
@@ -63,11 +74,11 @@ export default {
             }"
             v-slot="{ href, navigate }"
           >
-            <div class="col-2 mb-4">
+            <div class="p-0 col-6 col-md-3 col-xl-2">
               <Tile
                 :href="href"
                 @click="navigate"
-                class="bg-dark border-secondary"
+                style="background: transparent; border: 1px solid rgb(0, 0, 0)"
               >
                 <template #icon>
                   <i
@@ -113,7 +124,7 @@ export default {
               </template>
               <template #title>{{ item.name }} </template>
               <span class="text-secondary fw-light">
-                ({{ getRoomNameById(item.room) }})
+                ({{ getRoomById(item.room)?.name || "Undefined" }})
               </span>
             </Tile>
           </div>

diff --git a/src/views/Rooms.vue b/src/views/Rooms.vue
@@ -73,24 +73,26 @@ export default {
 </script>
 <template>
   <div class="container-fluid">
-    <!--
-    <div class="row mb-3" v-if="!hideButtonGrouping">
-      <div class="col">
-        <button
-          class="btn btn-outline-primary"
-          @click="groupItems = !groupItems"
-        >
-          Toggle Grouping
-        </button>
-      </div>
-    </div>
-    -->
-
     <div v-if="settings.groupRoomItems">
       <!-- COLLAPSABLE FLOOR -->
-      <div class="row" v-bind:key="index" v-for="(rooms, index) in floors">
+      <div
+        class="row"
+        style="border-top: 1px solid #000; border-bottom: 1px solid #000"
+        v-bind:key="index"
+        v-for="(rooms, index) in floors"
+      >
         <Collapsable>
-          <template #title>Floor: {{ index }}</template>
+          <template #title>
+            <div class="me-2 pt-1">
+              <i class="fa-sharp fa-solid fa-layer-group fa-3x"></i>
+            </div>
+            <div class="">
+              <h3 class="mb-0">Floor {{ index }}</h3>
+              <span class="text-secondary fw-light d-block">
+                Rooms: {{ rooms.length }}
+              </span>
+            </div>
+          </template>
           <RouterLink
             v-bind:key="item._id || Date.now()"
             v-for="item in rooms"
@@ -103,11 +105,11 @@ export default {
             }"
             v-slot="{ href, navigate }"
           >
-            <div class="col-2 mb-4">
+            <div class="p-0 col-6 col-md-3 col-xl-2">
               <Tile
                 :href="href"
                 @click="navigate"
-                class="bg-dark border-secondary"
+                style="background: transparent; border: 1px solid rgb(0, 0, 0)"
               >
                 <template #icon>
                   <i