Added Ads and Ads Details routing and services

Renamed files

package.json

@@ -55,7 +55,7 @@
     "load-google-maps-api": "^1.0.0",
     "lodash": "^4.17.4",
     "masonry-layout": "^4.2.0",
-    "moment": "^2.19.1",
+    "moment": "^2.24.0",
     "ng-tags-input": "^3.2.0",
     "node-sass": "^4.5.3",
     "perfect-scrollbar": "^1.1.0",

src/assets/scripts/ads-details/ads-details.controller.js

@@ -0,0 +1,18 @@
+import moment from 'moment';
+
+const AdsDetailsController = ($scope, AdsDetailsService, $routeParams) => {
+    AdsDetailsService.fetchAdDetails($routeParams)
+        .then(function(result){
+            $scope.ad = result;
+            window.msnry.layout();
+            console.log(result);
+        })
+        .catch(function(error){
+            console.log(error);
+        });
+    $scope.daysAgo = (timestamp) => {
+        return moment(timestamp).fromNow();
+    }
+}
+
+export default AdsDetailsController;

src/assets/scripts/ads-details/ads-details.html

@@ -20,36 +20,14 @@
                 class="avatar">
             </div>
             <div class="col-9 card-body">
-              <h2 class="card-title mt-4 mr-4">Graphic Design Internship</h2>
-              <h6 class="card-title mr-4">Great Southern Press</h6>
+              <h2 class="card-title mt-4 mr-4">{{ ad.title }}</h2>
+              <h6 class="card-title mr-4">{{ ad.companyname }}</h6>
             </div>
           </div>
         </div>
         <div class="card">
           <div class="card-body">
-            <h5 class="card-title mt-4 ml-4 mr-4">About the business:</h5>
-            <p class="card-text ml-4 mr-4">Great Southern Press is a leading B2B publishing and events company built on
-              partnerships with industry. We deliver quality business information to our industries and great marketing
-              results to our clients.
-
-              We build long-lasting partnerships with our industry partners in the energy and infrastructure sectors,
-              aligning the success of our business with the continued growth and expansion of the industries we publish
-              for.
-            </p>
-            <h5 class="card-title mt-4 ml-4 mr-4">About the role:</h5>
-            <p class="card-text ml-4 mb-4 mr-4">This part-time role will suit a university graduate or someone looking
-              for an entry-level design position. The successful candidate will be involved in all areas of design
-              including:<br><br>
-
-              • Publication layout (annual directories, books etc).<br>
-              • Creation of artwork for print and online advertisements.<br>
-              • Wallcharts, flyers, brochures and other print design as required.<br>
-              • Event collateral including branding, signage, handbooks etc.<br>
-              • Designs for website, email communications and social media.<br><br>
-
-              Reporting to the Head of Design, you will have an opportunity to work with and be mentored by someone
-              with more than 10 years’ industry experience.
-            </p>
+            {{ ad.description }}
           </div>
         </div>
       </div>
@@ -59,14 +37,15 @@
         <div class="card">
           <div class="card-body">
             <h5 class="card-title mt-4 ml-4 mr-4">Location:</h5>
-            <p class="card-text ml-4 mr-4">Melbourne, CBD & Inner Suburbs</p>
+            <p class="card-text ml-4 mr-4">{{ad.location}}</p>
             <h5 class="card-title mt-4 ml-4 mr-4">Application close:</h5>
             <p class="card-text ml-4 mr-4">14th March 2019 (Friday)</p>
+
             <h5 class="card-title mt-4 ml-4 mr-4">Skills:</h5>
-            <div class="ml-4 mb-4 btn btn-skills">Graphic Design</div>
-            <div class="ml-1 mb-4 btn btn-skills">Adobe Creaetive CC</div>
-            <div class="ml-1 mb-4 btn btn-skills">Illustration</div>
-            <p class="card-text  ml-4 my-4"><small class="text-muted">Posted 3 days ago</small></p>
+            <div ng-repeat="skill in ad.skills">
+              <span class="ml-4 mb-4 btn btn-skills">{{ skill }}</span>
+            </div>
+            <p class="card-text  ml-4 my-4"></p><small class="text-muted">{{ daysAgo(ad.timestamp) }}</small></p>
           </div>
         </div>
       </div>

src/assets/scripts/ads-details/controller.js

@@ -1,8 +0,0 @@
-const AdsDetailsController = async($scope, AdsDetailsService, $routeParams) => {
-    await AdsDetailsService.fetchAdsService()
-        .then((data) => {
-            $scope.ad = data[$routeParams.id];
-        })
-}
-
-export default AdsDetailsController;

src/assets/scripts/ads-details/index.js

@@ -1,7 +1,13 @@
-import * as angular from 'angular';
-import AdsDetailsController from './controller';
-import AdsDetailsService from './ads.service'
+import angular from 'angular';
+import ngRoute from 'angular-route';
+import ngCookie from 'angular-cookies';
+import AdsDetailsController from './ads-details.controller';
+import AdsDetailsService from './ads-details.service'
 
-angular.module('nwAdsDetails', [])
-    .controller(AdsDetailsController.name, AdsDetailsController)
-    .factory(AdsDetailsService.name, AdsDetailsService);
+angular.module('nwAdsDetails', [ngRoute, ngCookie])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .factory(AdsDetailsService.name, AdsDetailsService)
+    .controller(AdsDetailsController.name, AdsDetailsController);
+    

src/assets/scripts/ads/ads.controller.js

@@ -0,0 +1,15 @@
+/** @ngInject */
+const AdsController = ($scope, AdsService) => {
+        AdsService.fetchAdsService()
+            .then(function(result){
+                $scope.ads = result;
+                console.log(result);
+            })
+            .catch(function(error){
+                console.log(error);
+            })
+        
+        
+}
+
+export default AdsController;

src/assets/scripts/ads/ads.html

@@ -10,76 +10,27 @@
           <div class="row gap-30">
 
             <!-- ============== Job Ad ============== -->
-            <div class='col-md-4'>
-                <div class="card item-box" >
+            <div class='col-md-4' ng-repeat="ad in ads">
+                <div class="card item-box">
                     <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
                     <div class="card-body">
                       <div class="card-title d-flex  mx-2" style="justify-content:space-between; margin-bottom:0px; text-align: left;">
-                        <h4>Graphic Designer </h4>
+                        <h4> {{ ad.title }} </h4>
                         <div>
                             <a class='' href="" > <span class="icon-holder"><i class="fa fa-heart-o font-weight-bold mt-2" style="color:#EE38A4; font-size: 22px;"></i></span></a>
                         </div>
                       </div>
-                      <p class="card-text mx-2"><small class="text-muted">Sierra Delta Creative</small></p>
-                      <div class="star-rating-display ml-2 mb-2" data-rating="2"><span class="is-vishidden">Two stars</span></div> 
-                      <p class="card-text mx-2 mb-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                      <p class="card-text mx-2"><small class="text-muted">{{ ad.description }}</small></p>
+                      <div class="star-rating-display ml-2 mb-2" data-rating="2"><span class="is-vishidden">TBD</span></div> 
+                      <p class="card-text mx-2 mb-2"> {{ ad.companyintro }} </p>
                     </div>
-                    <a href="ads_1.html">
+                    <a href="/#!/ads/{{ad._id}}">
                       <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
                         VIEW MORE <i class=" fa fa-chevron-right ml-1" style="color:#fff; font-size: 11px; font-weight: bolder;"></i> 
                       </div>
                     </a>
                   </div>
             </div>
-
-            <!-- ============== Job Ad ============== -->
-            <div class='col-md-4'>
-                <div class="card item-box" >
-                    <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
-                    <div class="card-body">
-                      <div class="card-title d-flex  mx-2" style="justify-content:space-between; margin-bottom:0px; text-align: left;">
-                        <h4>Graphic Designer </h4>
-                        <div>
-                            <a class='' href="" > <span class="icon-holder"><i class="fa fa-heart-o font-weight-bold mt-2" style="color:#EE38A4; font-size: 22px;"></i></span></a>
-                        </div>
-                      </div>
-                      <p class="card-text mx-2"><small class="text-muted">Sierra Delta Creative</small></p>
-                      <div class="star-rating-display ml-2 mb-2" data-rating="2"><span class="is-vishidden">Two stars</span></div> 
-                      <p class="card-text mx-2 mb-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                    </div>
-                    <a href="ads_1.html">
-                      <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
-                        VIEW MORE <i class=" fa fa-chevron-right ml-1" style="color:#fff; font-size: 11px; font-weight: bolder;"></i> 
-                      </div>
-                    </a>
-                  </div>
-            </div>
-
-
-            <!-- ============== Job Ad ============== -->
-            <div class='col-md-4'>
-                <div class="card item-box" >
-                    <img class="card-img-top" src="assets/static/images/bg.jpg" alt="Card image cap">
-                    <div class="card-body">
-                      <div class="card-title d-flex  mx-2" style="justify-content:space-between; margin-bottom:0px; text-align: left;">
-                        <h4>Graphic Designer </h4>
-                        <div>
-                            <a class='' href="" > <span class="icon-holder"><i class="fa fa-heart-o font-weight-bold mt-2" style="color:#EE38A4; font-size: 22px;"></i></span></a>
-                        </div>
-                      </div>
-                      <p class="card-text mx-2"><small class="text-muted">Sierra Delta Creative</small></p>
-                      <div class="star-rating-display ml-2 mb-2" data-rating="2"><span class="is-vishidden">Two stars</span></div> 
-                      <p class="card-text mx-2 mb-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                    </div>
-                    <a href="ads_1.html">
-                      <div class="card-body view-more-btn" style="color:#fff; background-color:#EE38A4;  font-weight: bolder; text-align: center; margin: 0px">
-                        VIEW MORE <i class=" fa fa-chevron-right ml-1" style="color:#fff; font-size: 11px; font-weight: bolder;"></i> 
-                      </div>
-                    </a>
-                  </div>
-            </div>
-
-
           </div>
         </div>
         

src/assets/scripts/ads/ads.service.js

@@ -0,0 +1,19 @@
+/** @ngInject */
+const AdsService = ($http) => {
+    let serv = {};
+
+    serv.fetchAdsService = () =>{
+        return $http.get('https://nomitwisp-restapi.herokuapp.com/api/ads', { withCredentials: true })
+        .then( (result) => {
+                console.log(result.data);
+                return result.data;              
+        })
+        .catch( (error) => {
+                console.log(error);
+                return [];
+        });
+    }
+    return serv;
+}
+
+export default AdsService;

src/assets/scripts/ads/controller.js

@@ -1,6 +0,0 @@
-/** @ngInject */
-const AdsController = ($scope) => {
-
-}
-
-export default AdsController;

src/assets/scripts/ads/index.js

@@ -1,6 +1,12 @@
 import * as angular from 'angular';
-import AdsController from './controller';
+import ngCookies from 'angular-cookies';
+import AdsController from './ads.controller';
+import AdsService from './ads.service';
 
-angular.module('nwAds', [])
-    .controller(AdsController.name, AdsController);
+angular.module('nwAds', [ngCookies])
+    .config(['$httpProvider', function($httpProvider) {
+        $httpProvider.defaults.withCredentials = true;
+    }])
+    .controller(AdsController.name, AdsController)
+    .factory(AdsService.name, AdsService);
     

src/assets/scripts/app/index.js

@@ -14,7 +14,9 @@ angular.module('NomitWisp',
         ngRoute
         
     ])
-    .config(function ($routeProvider) { 
+    .config(function ($routeProvider, $httpProvider) { 
+        $httpProvider.defaults.withCredentials = true;
+
         $routeProvider 
         .when('/', { 
             controller: 'DashboardController', 

src/assets/scripts/dashboard/index.js

@@ -1,6 +1,6 @@
 import * as angular from 'angular';
 import ngCookies from 'angular-cookies';
-import DashboardController from './controller';
+import DashboardController from './dashboard.controller';
 
 angular.module('nwDashboard', [ngCookies])
     .controller(DashboardController.name, DashboardController);

src/assets/scripts/masonry/index.js

@@ -4,7 +4,7 @@ import Masonry from 'masonry-layout';
 export default (function () {
   window.addEventListener('load', () => {
     if ($('.masonry').length > 0) {
-      new Masonry('.masonry', {
+      window.msnry = new Masonry('.masonry', {
         itemSelector: '.masonry-item',
         columnWidth: '.masonry-sizer',
         percentPosition: true,