Merge pull request #160 from CarletonDevX/jslote/recent-listings-alte…

…rations Jslote/recent listings alterations
CarletonDevX · Aug 29, 2016 · 077b41d · 077b41d
2 parents cf0b50e + 5acd36c
commit 077b41d
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 112 deletions.
diff --git a/app/views/partials/detail.book.pug b/app/views/partials/detail.book.pug
@@ -141,6 +141,6 @@ div#book-details
       h3 Make an Offer
       textarea(ng-model="offer.message")
       div.bottom-buttons
-        button(ng-click="makeOffer()") Send email
         button.cancel(ng-click="offer.active = false") Cancel
+        button(ng-click="makeOffer()") Send email
 
diff --git a/app/views/partials/detail.user.pug b/app/views/partials/detail.user.pug
@@ -244,8 +244,8 @@ div.modal-wrapper(
     h2 Make an Offer
     textarea(ng-model="offer.message")
     div.bottom-buttons
-      button(ng-click="makeOffer()") Send email
       button.cancel(ng-click="offer.active = false") Cancel
+      button(ng-click="makeOffer()") Send email
 
 div.modal-wrapper(
   ng-class="{'visible':avatar.active}",

diff --git a/app/views/partials/main.pug b/app/views/partials/main.pug
@@ -11,7 +11,7 @@ div#search(ng-class="\
 
   div#search-form
     //- span#search-labels
-    //-   label(class="pre-search" for="search") Find or list a book:
+    //-   label(class="pre-search" for="search") Find books and people:
     //-   label(class="post-search" for="search") Results for:
     input#search-box(type="text",
                      ng-model="searchInput",
@@ -24,39 +24,38 @@ div#search(ng-class="\
 
   div#search-results(ui-view="search")
 
-  div#recent-listings(ng-controller="recentListingsController", ng-class="{'minimized': hideRecentListings}")
-    //- div.tabs
-    //-   h3 Recent Listings
-    table.listings
-      thead
-        tr
-          th.book(colspan="2") Book
-          //- th.seller(colspan="2") Seller
-          th.seller Seller
-          th.condition Cond.
-          th.price Price
-          th.contact Offer
-      tbody
-        tr(ng-repeat="listing in recentListings",
-           ng-class="{'disabled': listing.userID == currentUser.userID}",
-           ng-include="'partials/main.recent_listings'")
-      tfoot
-        tr
-          td(colspan="6")
-            button(ng-if="recentListings.length < totalListings" ng-click="getMoreRecentListings()")
-              span.symbol +
-              |  Load more
-            span(ng-if="recentListings.length >= totalListings") That's all she wrote!
+div#detail-wrapper(ui-view="detail", ng-class="detailIsMaximized ? 'maximized':'minimized'")
 
-    div.modal-wrapper(
-      ng-class="{'visible':offer.active}",
-      ng-htb-self-mousedown="offer.active = false"
-      )
-      div.modal.offer
-        h2 Make an Offer
-        textarea(ng-model="offer.message")
-        div.bottom-buttons
-          button(ng-click="makeOffer()") Send email
-          button.cancel(ng-click="offer.active = false") Cancel
+div#recent-listings(ng-controller="recentListingsController", ng-class="{'minimized': hideRecentListings}")
+  h3 Recent Listings
+  table.listings
+    thead
+      tr
+        th.book(colspan="2") Book
+        //- th.seller(colspan="2") Seller
+        th.seller Seller
+        th.condition Cond.
+        th.price Price
+        th.contact Offer
+    tbody
+      tr(ng-repeat="listing in recentListings",
+         ng-class="{'disabled': listing.userID == currentUser.userID}",
+         ng-include="'partials/main.recent_listings'")
+    tfoot
+      tr
+        td(colspan="6")
+          button(ng-if="recentListings.length < totalListings" ng-click="getMoreRecentListings()")
+            span.symbol +
+            |  Load more
+          span(ng-if="recentListings.length >= totalListings") That's all she wrote!
 
-div#detail-wrapper(ui-view="detail", ng-class="detailIsMaximized ? 'maximized':'minimized'")
+div.modal-wrapper(
+  ng-class="{'visible':offer.active}",
+  ng-htb-self-mousedown="offer.active = false"
+  )
+  div.modal.offer
+    h2 Make an Offer
+    textarea(ng-model="offer.message")
+    div.bottom-buttons
+      button.cancel(ng-click="offer.active = false") Cancel
+      button(ng-click="makeOffer()") Send email
diff --git a/app/views/partials/search.pug b/app/views/partials/search.pug
@@ -27,6 +27,12 @@ ul(ng-if="$parent.displayedSearch == 'books'")
 					tr
 						td ISBN:
 						td {{ book.ISBN }}
+				div.listing-stats
+					p Student Listings:
+						span.stat(ng-class="{'good': !!book.listings.length}")
+							| {{ book.listings.length }}
+					p Amazon:
+						span.stat.good ✔
 
 ul(ng-if="$parent.displayedSearch == 'users'")
 	li(ng-repeat="user in userResults")

diff --git a/public/scripts/main.js b/public/scripts/main.js
@@ -411,58 +411,28 @@ hitsTheBooks.controller('recentListingsController',
   function($scope, $rootScope, $interval, $state, Api, AUTH_EVENTS) {
 
     var pagingData = {
-      initNumListings : 5, // how many listings we want load with UpdateRecent...
-      querySize       : 5  // how many more to add on getMoreRecent....
+      initNumListings : 3, // how many listings we want load with UpdateRecent...
+      querySize       : 3  // how many more to add on getMoreRecent....
     }
 
     $scope.recentListings = [];
     $scope.totalListings = 0; // how many listings the backend has
-    $scope.offersDict = {};
-    $scope.offer = {
+    $scope.$parent.offer = {
       active: false,
       listing: null,
       message: null
     }
-    $scope.$watch('offers', function() {
-        // When offers change, update offers dict
-        $scope.offersDict = {};
-        for (var i = 0; i < $scope.offers.length; i++) {
-            $scope.offersDict[$scope.offers[i].listingID] = true;
-        };
-    });
-    $scope.$on(AUTH_EVENTS.loginSuccess,
-      function() {
-        refreshOffers();
-      }
-    );
 
-    var refreshOffers = function() {
-      Api.getOffers().then( function(offers) {
-        $scope.offers = offers;
-      }, function(err) {
-        console.log(err);
-      });
-    }
     $scope.makeOfferInit = function(listing) {
-      $scope.offer.listing = listing;
-      $scope.offer.message =
-        "Hi "+$scope.offer.listing.user.name.fullName+",\n\n"
-        + "I'm interested in [buying/renting] your copy of \""+$scope.offer.listing.book.name+".\" "
+      $scope.$parent.offer.listing = listing;
+      $scope.$parent.offer.message =
+        "Hi "+$scope.$parent.offer.listing.user.name.fullName+",\n\n"
+        + "I'm interested in [buying/renting] your copy of \""+$scope.$parent.offer.listing.book.name+".\" "
         + "Please let me know when we could meet.\n\n"
         + "Thanks"
         + ($rootScope.currentUser ? (",\n"+$rootScope.currentUser.name.fullName) : "!")
-      $scope.offer.active = true;
+      $scope.$parent.offer.active = true;
     }
-    $scope.makeOffer = function() {
-      Api.makeOffer($scope.offer.listing.listingID, $scope.offer.message)
-        .then( function (data) {
-          refreshOffers();
-          $scope.offer.active = false;
-        }, function (err) {
-          console.log(err);
-        })
-    }
-
 
     var updateRecentListings = function() {
       Api.getRecentListings({
@@ -480,7 +450,7 @@ hitsTheBooks.controller('recentListingsController',
     $scope.getMoreRecentListings = function() {
       if ($scope.recentListings.length < $scope.totalListings) {
         Api.getRecentListings({
-          limit: $scope.querySize,
+          limit: pagingData.querySize,
           skip: $scope.recentListings.length
         }).then(function(res){
           $scope.recentListings = $scope.recentListings.concat(res.listings)
@@ -511,12 +481,55 @@ hitsTheBooks.controller('recentListingsController',
     }
   });
 
-hitsTheBooks.controller('mainController', function($scope, $rootScope, $stateParams, $state, $document, offers) {
+hitsTheBooks.controller('mainController', function($scope, $rootScope, $stateParams, $state, $document, offers, Api, AUTH_EVENTS) {
   $scope.offers = offers;
   if ($stateParams.flash) {
     $scope.flashMessage($stateParams.flash);
   }
+
+  $scope.$on(AUTH_EVENTS.loginSuccess,
+    function() {
+      refreshOffers();
+    }
+  );
+
+  var refreshOffers = function() {
+    Api.getOffers().then( function(offers) {
+      $scope.offers = offers;
+    }, function(err) {
+      console.log(err);
+    });
+  }
 
+  $scope.offersDict = {};
+  var updateOffersDict = function(){
+      // When offers change, update offers dict
+      $scope.offersDict = {};
+      for (var i = 0; i < $scope.offers.length; i++) {
+          $scope.offersDict[$scope.offers[i].listingID] = true;
+      };
+  }
+  $scope.$watch('offers', updateOffersDict);
+  updateOffersDict();
+
+  $scope.makeOffer = function() {
+    Api.makeOffer($scope.offer.listing.listingID, $scope.offer.message)
+      .then( function (data) {
+        refreshOffers();
+        $scope.offer.active = false;
+      }, function (err) {
+        console.log(err);
+      })
+  }
+
+  var refreshOffers = function() {
+    Api.getOffers().then( function(offers) {
+      $scope.offers = offers;
+    }, function(err) {
+      console.log(err);
+    });
+  }
+
   $scope.displayedSearch = 'books';
   var streamSearchDelay = 250; //ms
   var initSearch = false;

diff --git a/public/styles/index.css b/public/styles/index.css
@@ -580,6 +580,15 @@ main {
           flex-grow: 1;
           padding-right: 20px;
           padding-bottom: 20px; }
+          main #search #search-results ul li div.info div.listing-stats {
+            display: flex; }
+            main #search #search-results ul li div.info div.listing-stats p {
+              flex-grow: 1;
+              font-family: 'Droid Sans';
+              font-size: 10pt;
+              text-align: center; }
+              main #search #search-results ul li div.info div.listing-stats p .stat {
+                margin-right: 0; }
         main #search #search-results ul li a.book, main #search #search-results ul li a.user {
           text-decoration: none;
           color: black;
@@ -702,42 +711,57 @@ main {
       box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.3); }
 
 #recent-listings {
+  width: 480px;
+  box-sizing: border-box;
+  margin: 4px auto 0 auto;
   padding: 10px;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.8);
+  color: #555;
+  opacity: .96;
   transition: opacity .2s, height .2s, padding .2s;
   overflow: hidden; }
   #recent-listings h3 {
     font-weight: normal;
     font-variant: small-caps;
     font-size: 23px;
-    border-bottom: 1px solid black;
-    text-align: center; }
-  #recent-listings table.listings th.condition {
-    width: inherit; }
-  #recent-listings table.listings th.price {
-    width: 6em; }
-  #recent-listings table.listings th.seller {
-    width: 4em; }
-  #recent-listings table.listings td.image {
-    width: 45px; }
-  #recent-listings table.listings tbody {
-    font-size: 10pt; }
-    #recent-listings table.listings tbody img {
-      margin: 0 5px; }
-    #recent-listings table.listings tbody td {
-      height: 70px; }
-    #recent-listings table.listings tbody table.price-table td {
-      height: auto; }
-  #recent-listings table.listings tfoot td {
-    padding: 0; }
-  #recent-listings table.listings tfoot span {
-    padding: 5px;
-    display: inline-block;
-    font-family: 'Droid Serif', serif;
-    color: gray; }
-  #recent-listings table.listings tfoot button {
-    height: 30px;
-    width: 100%; }
+    text-align: center;
+    float: left;
+    margin-bottom: 0;
+    border-bottom: solid 2px #555;
+    padding: 0 6px 12px 6px;
+    padding-top: 0;
+    margin-top: 6px; }
+  #recent-listings table.listings {
+    border-top: solid 2px #555;
+    background-color: #f7f7f7; }
+    #recent-listings table.listings th {
+      background-color: #fcfbf7; }
+    #recent-listings table.listings th.condition {
+      width: inherit; }
+    #recent-listings table.listings th.price {
+      width: 6em; }
+    #recent-listings table.listings th.seller {
+      width: 4em; }
+    #recent-listings table.listings td.image {
+      width: 45px; }
+    #recent-listings table.listings tbody {
+      font-size: 10pt; }
+      #recent-listings table.listings tbody img {
+        margin: 0 5px; }
+      #recent-listings table.listings tbody td {
+        height: 70px; }
+      #recent-listings table.listings tbody table.price-table td {
+        height: auto; }
+    #recent-listings table.listings tfoot td {
+      padding: 0; }
+    #recent-listings table.listings tfoot span {
+      padding: 5px;
+      display: inline-block;
+      font-family: 'Droid Serif', serif;
+      color: gray; }
+    #recent-listings table.listings tfoot button {
+      height: 30px;
+      width: 100%; }
 
 #recent-listings.minimized {
   opacity: 0;
@@ -765,7 +789,8 @@ main {
   color: gray;
   line-height: 1.2em;
   font-size: 11pt;
-  border: solid 1px; }
+  border: solid 1px;
+  text-align: center; }
 
 .stat.good {
   color: #45753c; }