adds visual confirmation of data-received

Author: ElGrecode

README.md

@@ -1,4 +1,4 @@
-# Submission for Frontend Engineer
+a# Submission for Frontend Engineer
 This is MEAN Stack app that can be run nightly. It pulls information from an API and caches the information for later display.
 
 ## Configuration
@@ -18,6 +18,8 @@ MongoDB
 Nope, Not this time around  
 
 ## Intructions for local development
+Run `npm install` to install dependencies
+Run `bower install` to install bower components
 Run `grunt` to run tasks and compile assets  
 Run `grunt server` to view environment on screen
 

client/app/mainStyles.scss

@@ -172,15 +172,23 @@ nav {
 	p {
 		display: inline-block;
 		margin-top: 1em;
+		width: 50px;
 	}
 
-	// .postsConfirmation {
-	// 	display: inline-block;
-	// }
+	.postsConfirmation, .likesConfirmation {
+		width: 50px;
+		height: 50px;
+		margin-left: 10px;
+		display: inline-block;
+		background: url('../assets/images/statussprite.png');
+		background-repeat: none;
+		background-position: -55px 11px;
+	}
+
+	.postsConfirmation.received, .likesConfirmation.received {
+		background-position: 6px 9px;
+	}
 
-	// .likesConfirmation {
-	// 	display: inline-block;
-	// }
 }
 
 .previousSaves {

client/assets/images/statussprite.png

@@ -17,8 +17,9 @@ <h1>API Administration</h1>
 	<div class="right adminResponse">
 		<h3>Data Received</h3>
 		<!-- Use Sprite with background image to dicatate success sign -->
-		<p>Posts</p> <div postsConfirmation class="postsConfirmation"></div>
-		<p>Likes</p> <div likesConfirmation class="likesConfirmation"></div>
+		<p>Posts</p> <div postsconfirmation class="postsConfirmation"></div>
+		<br>
+		<p>Likes</p> <div likesconfirmation class="likesConfirmation"></div>
 	</div>
 
 	<section class="previousSaves">

client/partials/admin.html

@@ -172,10 +172,27 @@
           elem.addClass('showInline');
         });
 
+        scope.$on('save-complete', function(){
+          elem.removeClass('showInline');
+        });
 
         elem.on('click', function(){
           scope.stopTimer();
         })
       };
-    });;
+    })
+    .directive('postsconfirmation', function($rootScope){
+      return function(scope, elem) {
+        $rootScope.$on('posts-data-received', function(){
+          elem.addClass('received');
+        })
+      };
+    })
+    .directive('likesconfirmation', function($rootScope){
+      return function(scope, elem) {
+        $rootScope.$on('likes-data-received', function(){
+          elem.addClass('received');
+        })
+      };
+    });
 }(window.angular));