Commits

ont  committed b6e35a1

(+) basic grouping + sorting

  • Participants
  • Parent commits 6f56acd

Comments (0)

Files changed (5)

 .mtg-centered {
     text-align: center;
 }
+
+.mtg-right-numpad {
+    position: fixed;
+    right: 0;
+    top: 100px;
+}
+.mtg-right-numpad ul > li:first-child > a {
+    width: 55px;
+}
+
+.button.mtg-nano {
+    margin: 0 0 0.25em !important;
+    padding-left: 0.7em !important;
+    padding-right: 0.7em !important;
+}
 		</div>
 	</div>
 
-	<div class="row">
-        <div class="large-12 columns mtg-centered" style="position: relative">
-            <span ng-repeat="field in sfields">
-                <a drag-sort class="tiny button">{{field}}</a> ⇢
-            </span>
+	<div class="mtg-right-numpad" ng-controller="RightNumpadCtrl">
+        <span ng-repeat="field in fields">
+            <ul class="button-group">
+                <li><a class="tiny button mtg-nano disabled secondary">{{field}}</a></li>
+                <li><a ng-click="field_set(field,0)" class="tiny button mtg-nano" ng-class="field_css(field,0)">G</a></li>
+                <li><a ng-click="field_set(field,1)" class="tiny button mtg-nano" ng-class="field_css(field,1)">1</a></li>
+                <li><a ng-click="field_set(field,2)" class="tiny button mtg-nano" ng-class="field_css(field,2)">2</a></li>
+            </ul>
+        </span>
+	</div>
+
+    <div class="row" ng-repeat="(key,grp) in owns_m">
+        <div class="large-12 columns">
+            <div ng-show="show_labels()" class="label">
+                {{m.sort[0]}} = {{key}}
+            </div>
+            <div ng-switch="dmode" class="panel">
+                <ul ng-switch-when="short" class="large-block-grid-3 mtg-cards-grid">
+                    <li ng-repeat="own in grp | orderBy:get_sorters()">
+                        {{own.card.name}} [{{own.card.power}} / {{own.card.tough}}]
+                    </li>
+                </ul>
+                <ul ng-switch-when="thumb" class="large-block-grid-6 mtg-cards-grid">
+                    <li ng-repeat="own in grp | orderBy:get_sorters()">
+                        <img ng-src="{{own.card.pict}}"/>
+                        <img ng-src="{{own.card.pict}}"/> 
+                    </li>
+                </ul>
+            </div>
         </div>
-	</div>
+    </div>
 
 	<div class="row">
 		<div class="large-12 columns">
-            <ul class="large-block-grid-6 mtg-cards-grid">
-                <li ng-repeat="own in owns | orderBy:'card.tough'">
-                    <img ng-src="{{own.card.pict}}"/>
-                    <img ng-src="{{own.card.pict}}"/>
-                </li>
-            </ul>
 
 			<!-- Grid Example -->
 			<div class="row">

File js/controllers.js

-function MainCtrl($scope, $http, Restangular) {
-    owns = Restangular.all('owns');
-    cards = Restangular.all('cards');
+function MainCtrl($scope, $http, Restangular, $mtg) {
+    var prs = null;
+    var owns = Restangular.all('owns');
+    var cards = Restangular.all('cards');
 
-    $scope.owns = owns.getList();
-    $scope.sfields = ['name', 'cost', 'power', 'tough'];
+    $scope.dmode = 'thumb';
 
-    var prs = null;
+    $scope.m = {
+        'sort' : [null, null, null],
+        'filter' : [],
+    }
+
+    /// download original non-sorted "owns"
+    owns.getList().then(function(data){
+        $scope.owns = data;
+        $scope.process();  // do default sorting and grouping
+    });
+
+    /// create command parser
     $http.get('/js/peg.tpl').then(function(res){
         prs = PEG.buildParser(res.data);
     });
             return res;
         });
     }
+
+    /*
+     * Returns sorters for angular orderBy on "owns".
+     */
+    $scope.get_sorters = function(){
+        return [
+            function( own ){
+                return $mtg.prop( own.card, $scope.m.sort[1] );
+            },
+            function( own ){
+                return $mtg.prop( own.card, $scope.m.sort[2] );
+            }
+        ];
+    }
+
+    $scope.show_labels = function(){
+        return _.size($scope.owns_m) > 1;
+    }
+
+    $scope.process = function(){
+        var res = null;   // new sorted and grouped "owns"
+
+        res = _($scope.owns).groupBy(function(x){
+            return $mtg.prop( x.card, $scope.m.sort[0] );
+        });
+
+        $scope.owns_m = res.value();  // save convert lo-dash to usual array
+        console.log(res.value());
+    }
 }
+
+function RightNumpadCtrl( $scope )
+{
+    $scope.fields = ['name', 'cost', 'power', 'tough'];
+
+    $scope.field_css = function( name, idx ){
+        return { 'secondary' :  $scope.m.sort[idx] != name  };
+    }
+
+    $scope.field_set = function( name, idx ){
+        $scope.m.sort = _.map( $scope.m.sort, function(x, i){
+            return (x == name) ? null : x;
+        });
+        $scope.m.sort[idx] = name;
+        $scope.process();
+    }
+}

File js/directives.js

         }
     };
 });
-
-/*
- * Sortable: drag'n'drop sorting for elements
- */
-widgets.directive('dragSort', function(){
-    return {
-        restrict: 'A',
-        link: function(scope, elem, attrs){
-            var drag = false;
-
-            function offset( elem ){
-                var doc,
-                    box = { top: 0, left: 0 };
-
-                doc = document.documentElement;
-                elem = elem[0];  // jqlight to DOM
-
-                if ( typeof elem.getBoundingClientRect !== undefined ) {
-                    box = elem.getBoundingClientRect();
-                }
-
-                return {
-                    top: box.top   + (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0),
-                    left: box.left + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)
-                };
-            }
-
-            /// find first non-static parent
-            var box = elem.parent();
-            while(box = box.parent())
-            {
-                var pos = box.css('position');
-                if( pos != '' || pos != 'static' )
-                    break;
-            }
-            if( !box )
-                box = angular.element(document.body);
-
-            var bOff, eOff, sX, sY;
-
-            elem.bind('mousedown', function( e ){
-                console.log('mousedown');
-
-                sX = e.pageX;
-                sY = e.pageY;
-
-                bOff = offset( box );
-                eOff = offset( elem );
-                console.log(bOff, eOff);
-
-                drag = true;
-
-                elem.css('position', 'absolute');
-                elem.css({ 'top' : eOff.top - bOff.top + 'px', 'left' : eOff.left - bOff.left + 'px' });
-
-                e.preventDefault();
-            });
-
-            elem.bind('mousemove', function( e ){
-                if(!drag) return;
-
-                var dX = e.pageX - sX;
-                var dY = e.pageY - sY;
-
-                elem.css({
-                    'top'  : eOff.top  - bOff.top  + dY + 'px',
-                    'left' : eOff.left - bOff.left + dX + 'px'
-                });
-            });
-
-            elem.bind('mouseup', function( e ){
-                drag = false;
-                console.log('mouseup');
-                elem.css('position', 'stat');
-
-                e.preventDefault();
-            });
-        }
-    };
-});

File js/modules.js

-var main = angular.module('MainApp', ['widgets', 'restangular']);
+var main = angular.module('MainApp', ['widgets', 'restangular', 'services']);
 
 main.config(function(RestangularProvider) {
     // configuring response exctractor for restangular
     //        return cards;
     //});
 });
+
+var services = angular.module('services', []);
+
+/*
+ * MtG specific functions in self-containing box.
+ */
+services.factory('$mtg', function() {
+    var getters = {
+        'cost' : function( card ){
+            var res = 0;
+            var cost = card.cost;
+            cost = cost.replace(/X/,'').replace(/{[^{}]+}/g,'#');
+
+            _(cost).each(function(x){
+                res += /[0-9]/.test(x) ? x * 1 : 1;
+            });
+
+            return res;
+        },
+        'color' : function( card ){
+            return 'G';
+        }
+    };
+
+    return {
+        'prop' : function( card, field ) {
+            if( getters[field] === undefined )
+                return card[field];
+            else
+                return getters[field]( card );
+        }
+    }
+});
+
+