feat: add is open now

growlerapp · May 18, 2019 · 63f368f · 63f368f
1 parent a11af02
commit 63f368f
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/src/components/StoreItem.vue b/src/components/StoreItem.vue
@@ -14,9 +14,14 @@
               <span>{{distance.replace(',', '.')}}</span>
             </div>
           </div>
-          <div class="StoreItem-header-status">
+          <div
+            class="StoreItem-header-status"
+            :class="{'StoreItem-header-status--isActive': openNow}"
+          >
             <i class="ico-time"></i>
-            <span>Abierto</span>
+            <span>
+              {{ openNow ? 'Abierto' : 'Cerrado' }}
+            </span>
           </div>
         </div>
       </div>
@@ -48,6 +53,10 @@ export default {
     distance: {
       type: String,
       required: true
+    },
+    openNow: {
+      type: Boolean,
+      required: true
     }
   },
 
@@ -121,7 +130,7 @@ export default {
   font-family: var(--font-family-primary);
   font-weight: bold;
   text-transform: uppercase;
-  color: var(--color-green);
+  color: var(--color-red);
   font-size: 0.8rem;
 }
 
@@ -131,7 +140,11 @@ export default {
 
 .StoreItem-header-status span {
   letter-spacing: 0.4px;
-  margin-left: 4px;
+}
+
+.StoreItem-header-status--isActive span,
+.StoreItem-header-status--isActive i {
+  color: var(--color-green);
 }
 
 .StoreItem-image {

diff --git a/src/components/StoreItemFull.vue b/src/components/StoreItemFull.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="StoreItemFull">
-    <div class="StoreItemFull-status">
+    <div
+      class="StoreItemFull-status"
+      :class="{'StoreItemFull-status--isActive': openNow}"
+    >
       <i class="ico-time"></i>
-      <span>Abierto</span>
+      <span>
+        {{ openNow ? 'Abierto' : 'Cerrado' }}
+      </span>
     </div>
     <div class="StoreItemFull-name">
       {{name}}
@@ -32,7 +37,12 @@ export default {
       required: true
     },
     distance: {
-      type: String
+      type: String,
+      required: true
+    },
+    openNow: {
+      type: Boolean,
+      required: true
     }
   },
 
@@ -100,17 +110,21 @@ export default {
   font-family: var(--font-family-primary);
   font-weight: bold;
   text-transform: uppercase;
-  color: var(--color-green);
+  color: var(--color-red);
   font-size: 0.8rem;
 }
 
 .StoreItemFull-status i {
   vertical-align: -3px;
   font-size: .9rem;
-  color: var(--color-green);
 }
 
 .StoreItemFull-status span {
   letter-spacing: .4px;
 }
+
+.StoreItemFull-status--isActive span,
+.StoreItemFull-status--isActive i {
+  color: var(--color-green);
+}
 </style>
diff --git a/src/graphql/FindByProximity.gql b/src/graphql/FindByProximity.gql
@@ -11,6 +11,9 @@ query findByProximity(
     name
     address
     place {
+      schedule {
+        openNow
+      }
       photo(
         key: $googleMapsKey
       )

diff --git a/src/graphql/FindOne.gql b/src/graphql/FindOne.gql
@@ -9,6 +9,11 @@ query findOne(
     _id
     name
     address
+    place {
+      schedule {
+        openNow
+      }
+    }
     geometry {
       coordinates
     }

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -17,6 +17,7 @@
         :address="store.address"
         :distance="store.matrix.distance"
         :photo="store.place.photo"
+        :openNow="store.place.schedule.openNow"
       />
     </transition-group>
   </div>

diff --git a/src/views/Store.vue b/src/views/Store.vue
@@ -45,6 +45,7 @@
             :name="findOne.name"
             :address="findOne.address"
             :distance="getMatrix(findOne.matrix, 'driving', 'distance')"
+            :openNow="findOne.place.schedule.openNow"
           />
 
           <div class="Store-arriving">
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,9 @@ query findByProximity( @@
         name
         address
         place {
+          schedule {
+            openNow
+          }
           photo(
             key: $googleMapsKey
           )
@@ Expand Down @@