cellar status added

diff --git a/src/assets/images/door_closed.jpg b/src/assets/images/door_closed.jpg
new file mode 100644 (file)
index 0000000..cc8a12a
Binary files /dev/null and b/src/assets/images/door_closed.jpg differ

diff --git a/src/assets/images/door_locked.jpg b/src/assets/images/door_locked.jpg
new file mode 100644 (file)
index 0000000..cadf76c
Binary files /dev/null and b/src/assets/images/door_locked.jpg differ

diff --git a/src/assets/images/door_open.jpg b/src/assets/images/door_open.jpg
new file mode 100644 (file)
index 0000000..0e5698a
Binary files /dev/null and b/src/assets/images/door_open.jpg differ

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 789cb70e03dab7e85020d7d5d7e140b8fbc2daa1..5dd5f799fa27b6d7b0ba7b30859f7504c1bda189 100644 (file)
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -59,6 +59,48 @@
           </v-list-item>
         </v-card>
       </v-col>
+
+      <v-col>
+        <v-card>
+          <v-list-item three-line>
+            <v-list-item-content>
+              <div class="overline mb-4">CELLAR STATUS</div>
+              <v-list-item-title class="headline mb-1">
+                {{status.cellarState}}
+              </v-list-item-title>
+              <v-list-item-subtitle>
+                {{status.cellarText}}
+              </v-list-item-subtitle>
+            </v-list-item-content>
+            <v-list-item-avatar tile size="80">
+              <v-img
+                :src="cellar"
+              />
+            </v-list-item-avatar>
+          </v-list-item>
+          <v-card-actions>
+<!--
+            <v-btn
+              color="primary"
+              :disabled="buttons.action.disabled"
+              :loading="buttons.action.loading"
+              @click="action"
+            >
+              {{buttons.action.name}}
+            </v-btn>
+              <v-spacer />
+            <v-btn
+              color="secondary"
+              :disabled="buttons.refresh.disabled"
+              :loading="buttons.refresh.loading"
+              @click="refresh"
+            >
+              {{buttons.refresh.name}}
+            </v-btn>
+-->
+          </v-card-actions>
+        </v-card>
+      </v-col>
     </v-row>
 
     <v-snackbar
@@ -92,6 +134,18 @@ const status = {
     state: 'Moving',
     text: 'The garage door is moving.',
   },
+  openCellar: {
+    state: 'Open',
+    text: 'The cellar door is open.',
+  },
+  closedCellar: {
+    state: 'Closed',
+    text: 'The cellar door is closed.',
+  },
+  lockedCellar: {
+    state: 'Locked',
+    text: 'The cellar door is locked.',
+  },
 };
 
 const messages = {
@@ -127,9 +181,12 @@ export default {
       status: {
         state: status.unknown.state,
         text: status.unknown.text,
+        cellarState: status.unknown.state,
+        cellarText: status.unknown.text,
       },
       icon: require('@/assets/images/unavailable.svg'),
       image: require('@/assets/images/unavailable.svg'),
+      cellar: require('@/assets/images/unavailable.svg'),
       snackbar: {
         show: false,
         timeout: 5000,
@@ -213,6 +270,27 @@ export default {
       });
     },
 
+    stateCellar(response) {
+      switch (response.cellar) {
+        case 'closed':
+          this.status.cellarState = status.closedCellar.state;
+          this.status.cellarText = status.closedCellar.text;
+          this.cellar = require('@/assets/images/door_closed.jpg');
+          break;
+        case 'open':
+          this.status.cellarState = status.openCellar.state;
+          this.status.cellarText = status.openCellar.text;
+          this.cellar = require('@/assets/images/door_open.jpg');
+          break;
+        case 'locked':
+          this.status.cellarState = status.lockedCellar.state;
+          this.status.cellarText = status.lockedCellar.text;
+          this.cellar = require('@/assets/images/door_locked.jpg');
+          break;
+        default:
+          break;
+      }
+    },
     stateClosed(response) {
       var image;
 
@@ -236,6 +314,8 @@ export default {
       } else {
         this.image = require('@/assets/images/closed.svg');
       }
+
+      this.stateCellar(response);
     },
     stateOpen(response) {
       var image;
@@ -260,6 +340,8 @@ export default {
       } else {
         this.image = require('@/assets/images/open.svg');
       }
+
+      this.stateCellar(response);
     },
     stateMoving(response) {
       var image;
@@ -284,6 +366,8 @@ export default {
       } else {
         this.image = require('@/assets/images/moving.svg');
       }
+
+      this.stateCellar(response);
     },
     stateError(err) {
       this.buttons.action.loading = false;