Front-end:

- search functionality communicates with back-end - transitions and loading icon between ads rendering - express favor functionality communicates with back-end - start session on connection. This is importent in order to set authentication-required features (for example, setting fields in the http header). issues: #298 #299
TechnionYearlyProject · Apr 19, 2018 · f1e22c7 · f1e22c7
1 parent 9fd57e3
commit f1e22c7
Show file tree

Hide file tree

Showing 15 changed files with 334 additions and 477 deletions.
diff --git a/server/models/apartment.js b/server/models/apartment.js
@@ -250,7 +250,6 @@ ApartmentSchema.statics.findByProperties = async function (p) {
   if (p.tags && Array.isArray(p.tags)) { // tags
     query.tags = { $all: p.tags };
   }
-
   return Apartment.find(query);
 };
 
@@ -296,7 +295,7 @@ ApartmentSchema.methods.addInterestedUser = function (_interestedID) {
   const apartment = this;
 
   apartment._interested.push(_interestedID);
-
+  
   return apartment.save();
 };
 

diff --git a/server/server.js b/server/server.js
@@ -200,7 +200,6 @@ app.get('/apartments', async (req, res) => {
         // 'longitude',
         // 'latitude'
       ]);
-
     const apartments = await Apartment.findByProperties(query);
     res.send({ apartments });
     // let tags;
@@ -263,6 +262,8 @@ app.put('/apartments/:id/interested', authenticate, async (req, res) => {
     const { id } = req.params;
 
     const apartment = await Apartment.findById(id);
+    console.log(apartment);
+    console.log(req.user);
     if (!apartment) {
       return res.status(NOT_FOUND).send();
     }

diff --git a/views/src/App.vue b/views/src/App.vue
@@ -1,34 +1,46 @@
 <template>
-<v-app>
-  <app-toolbar/>
-  <v-content>
-    <!-- <v-container fluid> -->
+  <v-app>
+    <app-toolbar/>
+    <v-content>
+      <!-- <v-container fluid> -->
       <app-loader :loading="getLoadingStatus" />
       <router-view/>
       <app-snackbar :text="getSnackbarText" />
-    <!-- </v-container> -->
-  </v-content>
-  <app-footer/>
-</v-app>
+      <!-- </v-container> -->
+    </v-content>
+    <app-footer/>
+  </v-app>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import AppToolbar from './components/AppToolbar';
-import AppLoader from './components/AppLoader';
-import AppSnackbar from './components/AppSnackbar';
-import AppFooter from './components/AppFooter';
+  import { mapGetters, mapMutations } from 'vuex';
+  import AppToolbar from './components/AppToolbar';
+  import AppLoader from './components/AppLoader';
+  import AppSnackbar from './components/AppSnackbar';
+  import AppFooter from './components/AppFooter';
 
-export default {
-  computed: {
-    ...mapGetters(['getLoadingStatus', 'getSnackbarText'])
-  },
-  components: {
-    AppToolbar,
-    AppLoader,
-    AppSnackbar,
-    AppFooter,
-  },
-  name: 'App',
-};
+  export default {
+    computed: {
+      ...mapGetters(['getLoadingStatus', 'getSnackbarText', 'isAuthenticated'])
+    },
+    components: {
+      AppToolbar,
+      AppLoader,
+      AppSnackbar,
+      AppFooter
+    },
+    name: 'App',
+    methods: {
+      ...mapMutations(['toggleDrawer', 'startSession']),
+      loadInitialState() {
+        // this.toggleDrawer(this.$vuetify.breakpoint.mdAndUp);
+        if (this.isAuthenticated) {
+          this.startSession();
+        }
+      }
+    },
+    created() {
+      this.loadInitialState();
+    }
+  };
 </script>
diff --git a/views/src/components/AppApartmentAd.vue b/views/src/components/AppApartmentAd.vue
@@ -22,10 +22,10 @@
             </v-flex>
             <v-spacer></v-spacer>
             <v-tooltip top slot="activator">
-                <v-btn icon slot="activator" :class="apartment.fav ? 'red--text' : ''" @click.native="favorite">
+                <v-btn icon slot="activator" :class="fav ? 'red--text' : ''" @click.native="favorite">
                     <v-icon>favorite</v-icon>
                 </v-btn>
-                <span>I'm interested!</span>
+                <span>{{ interestedMessage }}</span>
             </v-tooltip>
             <v-menu offset-x :close-on-content-click="false" :nudge-width="245" lazy>
                 <v-tooltip top slot="activator">
@@ -88,14 +88,14 @@
                     <strong>published:</strong> {{ new Date(apartment.createdAt).toDateString() }}</small>
             </v-flex>
             <v-spacer></v-spacer>
-            <v-btn icon @click.native="apartment.show = !apartment.show">
+            <v-btn icon @click.native="show = !show">
                 <v-icon>{{ apartment.show ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
             </v-btn>
 
         </v-card-actions>
 
         <v-slide-y-transition>
-            <v-card-text v-show="apartment.show" class="pt-0">
+            <v-card-text v-show="show" class="pt-0">
                 <v-divider class="mb-3"></v-divider>
 
                 <strong>Enterance date:</strong> {{ new Date(apartment.enteranceDate).toDateString() }}
@@ -106,8 +106,8 @@
                     <v-divider></v-divider>
                     <v-list dense>
                         <v-list-tile v-for="(attribute,i) in attributes" :key="`attribute-${i}`">
-                            <v-list-tile-content>{{attribute.label }}</v-list-tile-content>
-                            <v-list-tile-content class="align-end">{{ apartment[attribute.ref] }}</v-list-tile-content>
+                            <v-list-tile-content>{{ attribute.label }}</v-list-tile-content>
+                            <v-list-tile-content class="align-end">{{ apartment[attribute.ref] || '-' }}</v-list-tile-content>
                         </v-list-tile>
                     </v-list>
                     <v-divider></v-divider>
@@ -150,6 +150,7 @@
 </template>
 
 <script>
+    import { mapGetters } from 'vuex';
     import defaultApartmentImage from '../assets/apartment-defalut.jpg';
     import tagsList from '../assets/tags';
     import AppAvatar from './AppAvatar';
@@ -161,7 +162,7 @@
           attributes: [
             {
               label: 'required roommates',
-              ref: 'requiredNumberOfRoommates'
+              ref: 'requiredRoommates'
             },
             {
               label: 'total roommates',
@@ -184,17 +185,34 @@
               ref: 'area'
             }
           ],
+          show: false,
+          fav: false,
           tags: tagsList,
           defaultImage: defaultApartmentImage,
           imageNumber: 0,
+          interestedMessage: "I'm interested!",
           e1: 'recent'
         };
       },
       methods: {
         favorite() {
-          this.apartment.fav = !this.apartment.fav;
+          if (!this.isAuthenticated) {
+            this.interestedMessage = 'Please login first';
+          } else if (!this.isVerified) {
+            this.interestedMessage = 'Please verify account';
+          } else {
+            this.fav = !this.fav;
+            this.$store
+              .dispatch('favor', { id: this.apartment._id })
+              .catch((error) => {
+                // eslint-disable-next-line 
+                console.log(error);
+                this.fav = !this.fav;
+              });
+          }
         },
         getPublisher() {
+            // eslint-disable-next-line 
           console.log('fetch publisher');
         },
         nextImage() {
@@ -211,6 +229,7 @@
         }
       },
       computed: {
+        ...mapGetters(['isAuthenticated', 'isVerified']),
         image() {
           return this.apartment.images[0]
             ? this.apartment.images[this.imageNumber]
@@ -219,6 +238,13 @@
       },
       components: {
         AppAvatar
+      },
+      created() {
+        if (this.isAuthenticated) {
+          this.fav = this.apartment._interested.includes(
+            this.$store.getters.getUser._id
+          );
+        }
       }
     };
 </script>

diff --git a/views/src/components/AppDrawer.vue b/views/src/components/AppDrawer.vue
@@ -1,6 +1,6 @@
 <template>
-    <v-navigation-drawer absolute clipped class="grey lighten-4" app v-model="drawer">
-        <v-text-field label='Search by address' autofocus :prepend-icon="placeIcon" :append-icon="searchIcon" :prepend-icon-cb="openMap" :append-icon-cb="search" @keyup.enter="search" clearable></v-text-field>
+    <v-navigation-drawer fixed clipped class="grey lighten-4" app v-model="drawer">
+        <v-text-field v-model="payload.address" label='Search by address' autofocus :prepend-icon="placeIcon" :append-icon="searchIcon" :prepend-icon-cb="openMap" :append-icon-cb="search" @keyup.enter="search"></v-text-field>
         <v-list dense>
             <v-subheader>
                 Filters
@@ -88,8 +88,8 @@
 
 <script>
     import { mapGetters, mapMutations } from 'vuex';
-    import AppCalendarForm from './AppCalendarForm';
     import vueSlider from 'vue-slider-component';
+    import AppCalendarForm from './AppCalendarForm';
     import tags from '../assets/tags';
 
     export default {
@@ -153,9 +153,10 @@
       methods: {
         ...mapMutations(['toggleDrawer']),
         search() {
-          alert('search');
+          this.$emit('search', this.payload);
         },
         openMap() {
+          // eslint-disable-next-line
           alert('openMap');
         },
         formatedValue(value) {

diff --git a/views/src/components/AppLogin.vue b/views/src/components/AppLogin.vue
@@ -82,7 +82,7 @@
             this.$router.push({ name: 'AppMain' });
             this.showSnackbar(user);
           })
-          .catch((err) => this.showBadAlert())
+          .catch(() => this.showBadAlert())
           .then(() => this.hideLoading());
       }
     }