update #1808, #1809

TRUONG
1 parent 802503dfad
Showing 6 changed files with 76 additions and 19 deletions Side-by-side Diff
app/index.html
app/scripts/controllers/tshirtdesign.js
app/scripts/services/favorite.js
app/styles/main.css
app/views/design_part/illustration.html
app/views/design_part/tshirt-saved.html
@@ -47,7 +47,7 @@
     <script src="bower_components/json3/lib/json3.min.js"></script>
     <![endif]-->
     <script type="text/javascript">
-        var VERSION = '27-11_04';
+        var VERSION = new Date().getTime();//'27-11_04';
         var require = {
           urlArgs: "ver="+VERSION,
         };
 define(['app'], function (app) {
 	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
+		$scope.Math = window.Math;
 		$scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
 		var canvas = new fabric.Canvas('main-design-container');
 		var diffX = 40, diffY = 40;
  
  
  
  
  
  
@@ -654,30 +655,46 @@
 			$('#content-saved-'+tab).addClass('active');
  
 			$timeout(function(){
-				$('.saved-item').tooltip({
+				$('.saved-item img').tooltip({
 					animated: 'fade',
 					placement: 'bottom',
 					html: true
 				});
-			},1000);
+			},500);
 		}
  
 		$favorite.loadFromRemote();
 		$scope.saveFavorite = function(){
+			if (!confirm('Do you want to put current design to your favorite?')){
+				return;
+			}
 			var dataDump = {
 				thumb: canvas.toDataURL('png'),
-				data: canvas.toJSON()
+				data: JSON.stringify(canvas)
 			}
 			$favorite.addToFavorite({
 				data: dataDump
 			})
-			console.log(dataDump);
+			// console.log(JSON.stringify(dataDump));
 			alert('saved');
 		}
  
 		$scope.restoreSaved = function(item){
+			if (!confirm('this may be clear all current design frame, are you sure ?')){
+				return;
+			}
 			$('#tshirt-design-saved').modal('hide');
 			canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
+		}
+		
+		$scope.deleteFavorite = function(idx){
+			if (confirm('are you sure?')){
+				$favorite.removeFromFavorite({
+					idx: idx
+				});
+				$scope.recommendList = $favorite.getAll();
+				$scope.favoriteList = $favorite.getAll();
+			}
 		}
 	});
 });
@@ -59,6 +59,31 @@
                     httpObj.error(errorHandle);
                 }
             },
+            removeFromFavorite: function(params,successHandle,errorHandle) {
+                /*** load from localstorage for test */
+                DATA.splice(params.idx,1);
+                $window.localStorage.listFavorite = JSON.stringify(DATA);
+                return;
+                /*** end test */
+                
+                var httpObj = $http({
+                    url: $rootScope.API_URL+'/apiv1/favorite',
+                    method: 'POST',
+                    params: params || []
+                });
+                if (typeof successHandle == 'undefined'){
+                    successHandle = function(response){
+                        if (response.status==1){
+                            DATA = response.data;
+                        }
+                    }
+                }
+                httpObj.success(successHandle);
+                
+                if (typeof errorHandle != 'undefined'){
+                    httpObj.error(errorHandle);
+                }
+            },
             getAll: function(){
                 return DATA;
             }
@@ -613,7 +613,7 @@
   cursor: pointer;
 }
  
-.footer-bar {
+.illustration-list .footer-bar, .saved-list .footer-bar {
     text-align: center;
     margin-top: 5px;
     bottom: 10px;
  
  
@@ -866,12 +866,13 @@
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
-  margin-top: 5px;
+  margin-top: 0px;
   min-height: 400px;
-  padding-bottom: 20px;
+  padding: 10px;
 }
  
 #tshirt-design-saved .saved-list .saved-item{
+  width: 100px;
   height: 100px;
   overflow: hidden;
   float: left;
  
@@ -892,8 +893,21 @@
   width: 100px;
   cursor: pointer;
 }
+#tshirt-design-saved .saved-list .saved-item button {
+  background: #ff0f00;
+  color: #FFF;
+  border: 0;
+  position: absolute;
+  margin-left: -5px;
+  margin-top: -5px;
+  padding: 0 5px;
+}
+#tshirt-design-saved .saved-list .saved-item button:hover {
+  background: #ffcccc;
+}
  
 #tshirt-design-saved .saved-list .footer-bar {
   bottom: 20px;
+  width: 75%;
 }
@@ -14,8 +14,8 @@
             <div class="clearfix"></div>
             <div class="footer-bar">
                 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
-                {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}}
-                <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div>
+                {{currentIllustrationPage}}/{{Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)}}
+                <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)">Next ></div>
             </div>
         </div>
     </div>
@@ -10,28 +10,29 @@
                 </ul>
                 <div class="tab-content">
                     <div role="tabpanel" class="tab-pane active" id="content-saved-favorite">
-                        <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=16">
-                            <div class="saved-item" ng-repeat="item in favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
-                                <img ng-src="{{item.thumb}}"/>
+                        <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=18">
+                            <div class="saved-item" ng-repeat="item in (favoriteList | limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)) track by $index">
+                                <button ng-click="deleteFavorite($index)">X</button>
+                                <img ng-click="restoreSaved(item)" ng-src="{{item.thumb}}" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip"/>
                             </div>
                             <div class="clearfix"></div>
                             <div class="footer-bar">
                                 <div class="pull-left footer-pagination" ng-click="currentFavoritePage=currentFavoritePage-1" ng-show="currentFavoritePage > 1">< Back</div>
-                                {{currentFavoritePage}}/{{favoriteList.length/perFavoritePage | number:0}}
-                                <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < (favoriteList.length/perFavoritePage|number:0)">Next ></div>
+                                {{currentFavoritePage}}/{{Math.ceil(favoriteList.length/perFavoritePage)}}
+                                <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < Math.ceil(favoriteList.length/perFavoritePage)">Next ></div>
                             </div>
                         </div>
                     </div>
                     <div role="tabpanel" class="tab-pane" id="content-saved-recommend">
-                        <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=16">
-                            <div class="saved-item" ng-repeat="item in recommendList | limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
+                        <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=18">
+                            <div class="saved-item" ng-repeat="item in (recommendList | limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage)) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
                                 <img ng-src="{{item.thumb}}"/>
                             </div>
                             <div class="clearfix"></div>
                             <div class="footer-bar">
                                 <div class="pull-left footer-pagination" ng-click="currentRecommendPage=currentRecommendPage-1" ng-show="currentRecommendPage > 1">< Back</div>
-                                {{currentRecommendPage}}/{{recommendList.length/perRecommendPage | number:0}}
-                                <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < (recommendList.length/perRecommendPage|number:0)">Next ></div>
+                                {{currentRecommendPage}}/{{Math.ceil(recommendList.length/perRecommendPage)}}
+                                <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < Math.ceil(recommendList.length/perRecommendPage)">Next ></div>
                             </div>
                         </div>
                     </div>
...	...	@@ -47,7 +47,7 @@
47	47	<script src="bower_components/json3/lib/json3.min.js"></script>
48	48	<![endif]-->
49	49	<script type="text/javascript">
50		- var VERSION = '27-11_04';
	50	+ var VERSION = new Date().getTime();//'27-11_04';
51	51	var require = {
52	52	urlArgs: "ver="+VERSION,
53	53	};
1	1	define(['app'], function (app) {
2	2	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
	3	+ $scope.Math = window.Math;
3	4	$scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
4	5	var canvas = new fabric.Canvas('main-design-container');
5	6	var diffX = 40, diffY = 40;
6	7
7	8
8	9
9	10
10	11
11	12
...	...	@@ -654,30 +655,46 @@
654	655	$('#content-saved-'+tab).addClass('active');
655	656
656	657	$timeout(function(){
657		- $('.saved-item').tooltip({
	658	+ $('.saved-item img').tooltip({
658	659	animated: 'fade',
659	660	placement: 'bottom',
660	661	html: true
661	662	});
662		- },1000);
	663	+ },500);
663	664	}
664	665
665	666	$favorite.loadFromRemote();
666	667	$scope.saveFavorite = function(){
	668	+ if (!confirm('Do you want to put current design to your favorite?')){
	669	+ return;
	670	+ }
667	671	var dataDump = {
668	672	thumb: canvas.toDataURL('png'),
669		- data: canvas.toJSON()
	673	+ data: JSON.stringify(canvas)
670	674	}
671	675	$favorite.addToFavorite({
672	676	data: dataDump
673	677	})
674		- console.log(dataDump);
	678	+ // console.log(JSON.stringify(dataDump));
675	679	alert('saved');
676	680	}
677	681
678	682	$scope.restoreSaved = function(item){
	683	+ if (!confirm('this may be clear all current design frame, are you sure ?')){
	684	+ return;
	685	+ }
679	686	$('#tshirt-design-saved').modal('hide');
680	687	canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
	688	+ }
	689	+
	690	+ $scope.deleteFavorite = function(idx){
	691	+ if (confirm('are you sure?')){
	692	+ $favorite.removeFromFavorite({
	693	+ idx: idx
	694	+ });
	695	+ $scope.recommendList = $favorite.getAll();
	696	+ $scope.favoriteList = $favorite.getAll();
	697	+ }
681	698	}
682	699	});
683	700	});
...	...	@@ -59,6 +59,31 @@
59	59	httpObj.error(errorHandle);
60	60	}
61	61	},
	62	+ removeFromFavorite: function(params,successHandle,errorHandle) {
	63	+ /*** load from localstorage for test */
	64	+ DATA.splice(params.idx,1);
	65	+ $window.localStorage.listFavorite = JSON.stringify(DATA);
	66	+ return;
	67	+ /*** end test */
	68	+
	69	+ var httpObj = $http({
	70	+ url: $rootScope.API_URL+'/apiv1/favorite',
	71	+ method: 'POST',
	72	+ params: params \|\| []
	73	+ });
	74	+ if (typeof successHandle == 'undefined'){
	75	+ successHandle = function(response){
	76	+ if (response.status==1){
	77	+ DATA = response.data;
	78	+ }
	79	+ }
	80	+ }
	81	+ httpObj.success(successHandle);
	82	+
	83	+ if (typeof errorHandle != 'undefined'){
	84	+ httpObj.error(errorHandle);
	85	+ }
	86	+ },
62	87	getAll: function(){
63	88	return DATA;
64	89	}
...	...	@@ -613,7 +613,7 @@
613	613	cursor: pointer;
614	614	}
615	615
616		-.footer-bar {
	616	+.illustration-list .footer-bar, .saved-list .footer-bar {
617	617	text-align: center;
618	618	margin-top: 5px;
619	619	bottom: 10px;
620	620
621	621
...	...	@@ -866,12 +866,13 @@
866	866	width: 100%;
867	867	border: #bbb solid 1px;
868	868	background: #FFF;
869		- margin-top: 5px;
	869	+ margin-top: 0px;
870	870	min-height: 400px;
871		- padding-bottom: 20px;
	871	+ padding: 10px;
872	872	}
873	873
874	874	#tshirt-design-saved .saved-list .saved-item{
	875	+ width: 100px;
875	876	height: 100px;
876	877	overflow: hidden;
877	878	float: left;
878	879
...	...	@@ -892,8 +893,21 @@
892	893	width: 100px;
893	894	cursor: pointer;
894	895	}
	896	+#tshirt-design-saved .saved-list .saved-item button {
	897	+ background: #ff0f00;
	898	+ color: #FFF;
	899	+ border: 0;
	900	+ position: absolute;
	901	+ margin-left: -5px;
	902	+ margin-top: -5px;
	903	+ padding: 0 5px;
	904	+}
	905	+#tshirt-design-saved .saved-list .saved-item button:hover {
	906	+ background: #ffcccc;
	907	+}
895	908
896	909	#tshirt-design-saved .saved-list .footer-bar {
897	910	bottom: 20px;
	911	+ width: 75%;
898	912	}
...	...	@@ -14,8 +14,8 @@
14	14	<div class="clearfix"></div>
15	15	<div class="footer-bar">
16	16	<div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
17		- {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage \| number:0}}
18		- <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage\|number:0)">Next ></div>
	17	+ {{currentIllustrationPage}}/{{Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)}}
	18	+ <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < Math.ceil(currentIllustrationCate.list.length/perIllustrationPage)">Next ></div>
19	19	</div>
20	20	</div>
21	21	</div>
...	...	@@ -10,28 +10,29 @@
10	10	</ul>
11	11	<div class="tab-content">
12	12	<div role="tabpanel" class="tab-pane active" id="content-saved-favorite">
13		- <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=16">
14		- <div class="saved-item" ng-repeat="item in favoriteList \| limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
15		- <img ng-src="{{item.thumb}}"/>
	13	+ <div class="saved-list" ng-init="currentFavoritePage=1;perFavoritePage=18">
	14	+ <div class="saved-item" ng-repeat="item in (favoriteList \| limitTo:perFavoritePage:((currentFavoritePage-1)*perFavoritePage)) track by $index">
	15	+ <button ng-click="deleteFavorite($index)">X</button>
	16	+ <img ng-click="restoreSaved(item)" ng-src="{{item.thumb}}" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip"/>
16	17	</div>
17	18	<div class="clearfix"></div>
18	19	<div class="footer-bar">
19	20	<div class="pull-left footer-pagination" ng-click="currentFavoritePage=currentFavoritePage-1" ng-show="currentFavoritePage > 1">< Back</div>
20		- {{currentFavoritePage}}/{{favoriteList.length/perFavoritePage \| number:0}}
21		- <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < (favoriteList.length/perFavoritePage\|number:0)">Next ></div>
	21	+ {{currentFavoritePage}}/{{Math.ceil(favoriteList.length/perFavoritePage)}}
	22	+ <div class="pull-right footer-pagination" ng-click="currentFavoritePage=currentFavoritePage+1" ng-show="currentFavoritePage < Math.ceil(favoriteList.length/perFavoritePage)">Next ></div>
22	23	</div>
23	24	</div>
24	25	</div>
25	26	<div role="tabpanel" class="tab-pane" id="content-saved-recommend">
26		- <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=16">
27		- <div class="saved-item" ng-repeat="item in recommendList \| limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
	27	+ <div class="saved-list" ng-init="currentRecommendPage=1;perRecommendPage=18">
	28	+ <div class="saved-item" ng-repeat="item in (recommendList \| limitTo:perRecommendPage:((currentRecommendPage-1)*perRecommendPage)) track by $index" ng-click="restoreSaved(item)" title="<img src='{{item.thumb}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
28	29	<img ng-src="{{item.thumb}}"/>
29	30	</div>
30	31	<div class="clearfix"></div>
31	32	<div class="footer-bar">
32	33	<div class="pull-left footer-pagination" ng-click="currentRecommendPage=currentRecommendPage-1" ng-show="currentRecommendPage > 1">< Back</div>
33		- {{currentRecommendPage}}/{{recommendList.length/perRecommendPage \| number:0}}
34		- <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < (recommendList.length/perRecommendPage\|number:0)">Next ></div>
	34	+ {{currentRecommendPage}}/{{Math.ceil(recommendList.length/perRecommendPage)}}
	35	+ <div class="pull-right footer-pagination" ng-click="currentRecommendPage=currentRecommendPage+1" ng-show="currentRecommendPage < Math.ceil(recommendList.length/perRecommendPage)">Next ></div>
35	36	</div>
36	37	</div>
37	38	</div>