refactoring service and directive - NOT optimal .. yet

Brianmanden · May 29, 2016 · 7b0c9cf · 7b0c9cf
1 parent 8994607
commit 7b0c9cf
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 24 deletions.
diff --git a/controllers/showWine.js b/controllers/showWine.js
diff --git a/data/items.json b/data/items.json
@@ -4,18 +4,21 @@
 			"label": "Red Smoothie",
 			"vineyard": "Bobs Wines",
 			"percentage": "18",
+			"comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus est vitae aliquet mollis. Donec bibendum augue a mauris commodo porta. Sed non lacus odio. Nunc convallis vestibulum justo, vel lobortis sapien tempus sit amet.",
 			"image": "/img/wine01.jpg"
 		},
 		{
 			"label": "Purple Haze",
 			"vineyard": "Jimis Grapes Inc.",
 			"percentage": "12",
+			"comment": "Købt hos Jimi´s Fine Wines på Mallorca i 1969.",
 			"image": "/img/wine02.jpg"
 		},
 		{
 			"label": "The Redster",
 			"vineyard": "Plain Wine Inc.",
 			"percentage": "17",
+			"comment": "Vestibulum eros magna, hendrerit a dictum vel, rhoncus ut libero. Phasellus rutrum accumsan eleifend. Nulla eget ligula odio. Aliquam nec commodo elit. Nam ut commodo leo.",
 			"image": "/img/wine03.jpg"
 		}
 	]

diff --git a/directives/directives.js b/directives/directives.js
@@ -1,19 +1,21 @@
 (function(){
 	'use strict';
-
-
 	angular
 		.module('winecellar')
-		.directive('winecellarDirective', function(){
+		.directive('winecellarDirective', function($rootScope){
 			return{
 				scope: true,
 				restrict: 'E',
+				items: ['1', '2', '3'],
 				templateUrl: '/components/mentorprogram/templates/inventory.html',
-				controller: ['$scope', 'DataService', function($scope, DataService){
-					var someItems;
-					someItems = DataService.getData('data/items.json', function(response){
-						console.dir(response);
-					});
+				controller: ['$rootScope', 'DataService', function($rootScope, DataService){
+
+					// spgm 1)
+					// Service burde vel returnere et objekt (items) i stedet for at sætte dem på rootScope
+					// - en mere "ren" løsning ?
+
+					//$rootScope.items = DataService.getData('data/items.json', function(response){});
+					DataService.getData('data/items.json', function(response){});
 				}],
 				controllerAs: 'winecellar'
 			};

diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
         <div class="row">
             <h1>Wine Cellar</h1>
         </div>
-        <winecellar-directive ng-init="winecellar.initList()"></winecellar-directive>
+        <winecellar-directive ng-init="winecellar.initList()">-1-</winecellar-directive>
     </div>
     <script src="public/lib/jquery/dist/jquery.min.js"></script>
     <script src="public/lib/bootstrap/dist/js/bootstrap.min.js"></script>

diff --git a/public/img/wine02.jpg b/public/img/wine02.jpg
diff --git a/services/services.js b/services/services.js
@@ -1,12 +1,14 @@
 (function(){
 	'use strict';
-
 	var DataService = function($rootScope, $http){
 
 		var getData = function(dataItemsUrl, callback){
 			return $http.get(dataItemsUrl)
 				.then(function(response){
-					return response.data;
+					//console.dir(response.data.items);
+
+					$rootScope.items = response.data.items;
+					//return response.data.items;
 				}, logError);
 		};
 

diff --git a/templates/inventory.html b/templates/inventory.html
@@ -21,24 +21,24 @@ <h3>{{item.label}}</h3>
 					<p>{{item.label}}</p>
 					<p>by {{item.vineyard}}</p>
 					<p>{{item.percentage}}% vol.</p>
-					<p>{{item.description}}</p>
+					<p>{{item.comment}}</p>
 				</div>
 				<div id="edit{{$index}}" class="tab-pane fade">
 					<div class="form-group">
 						<label for="label">Label:</label>
-						<input type="text" class="form-control" id="label" placeholder="{{item.label}}">
+						<input type="text" class="form-control" id="label" value="{{item.label}}">
 					</div>
 					<div class="form-group">
 						<label for="Vineyard">Vineyard:</label>
-						<input type="text" class="form-control" id="Vineyard" placeholder="{{item.vineyard}}">
+						<input type="text" class="form-control" id="Vineyard" value="{{item.vineyard}}">
 					</div>
 					<div class="form-group">
-						<label for="percentage">Vineyard:</label>
-						<input type="number" step="any" class="form-control" id="percentage" placeholder="{{item.percentage}}">
+						<label for="percentage">Percentage:</label>
+						<input type="number" step="any" class="form-control" id="percentage" value="{{item.percentage}}">
 					</div>
 					<div class="form-group">
-						<label for="description">Comment:</label>
-						<textarea class="form-control" rows="5" id="description" placeholder="{{item.description}}"></textarea>
+						<label for="comment">Comment:</label>
+						<textarea class="form-control" rows="5" id="comment">{{item.comment}}</textarea>
 					</div>
 				</div>
 			</div>