gallery update: years, /gallery... -> /album...;

assets/style/gallery.scss

@@ -1,9 +1,32 @@
+//.gallery-block {
+//  margin: 2em 0 0;
+//  display: flex;
+//  justify-content: center;
+//  flex-wrap: wrap;
+//  align-items: flex-start;
+//}
+
 .gallery-block {
   margin: 2em 0 0;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  align-items: flex-start;
+  display: block;
+}
+
+.gallery-period{
+  margin-bottom: 2em;
+  
+  & > div{
+    margin: 1.5em 0 0;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  p.period{
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: bold;
+  }
 }
 
 .gallery-album {

client/app.js

@@ -40,7 +40,7 @@ app.config(function ($locationProvider, $routeProvider) {
             title:"Работы учащихся"
         },
         {
-            name: "/gallery/:year/:course/:album",
+            name: "/album/:year/:course/:album",
             templateUrl: "/views/gallery-album.html",
             controller: "AlbumPageController",
             title:"Работы учащихся"

client/pages/gallery.js

@@ -1,8 +1,8 @@
 module.exports = function (app) {
-    app.directive("gFotorama", function(){
+    app.directive("gFotorama", function () {
         return {
             restrict: "A",
-            link: function(scope, element, attrs){
+            link: function (scope, element, attrs) {
                 element.addClass('fotorama');
                 var fotorama = $(element.fotorama()).data('fotorama');
                 fotorama.setOptions({
@@ -12,7 +12,7 @@ module.exports = function (app) {
                     nav: "thumbs"
                 });
 
-                scope.$watch(attrs.gFotorama, function (value){
+                scope.$watch(attrs.gFotorama, function (value) {
                     console.log(value);
                     fotorama.load(value);
                 });
@@ -21,20 +21,40 @@ module.exports = function (app) {
     });
 
     app.controller("GalleryPageController", function ($scope, $http) {
-        $http.get("/gallery")
-            .success(function (albums) {
-                $scope.albums = albums.map(function (album) {
-                    var preview = album.content[0];
-                    album.preview_url = preview.content.medium.url;
-                    album.fotorama = album.content.map(productToFotorama);
+            $scope.years = [];
+            var years = [2015, 2014, 2013, 2012, 2011, 2010];
+            years.forEach(function (year, year_index) {
+                $http.get("/gallery/" + year)
+                    .success(function (albums) {
+                        if(albums.length) {
+                            $scope.years[year_index] = {
+                                year: year,
+                                albums: albums.map(function (album) {
+                                    var preview = album.content[0];
+                                    album.preview_url = preview.content.medium.url;
+                                    album.fotorama = album.content.map(productToFotorama);
 
-                    return album;
-                });
+                                    return album;
+                                })
+                            };
+                        }
+                    })
             });
-    });
+            //$http.get("/gallery")
+            //    .success(function (albums) {
+            //        $scope.albums = albums.map(function (album) {
+            //            var preview = album.content[0];
+            //            album.preview_url = preview.content.medium.url;
+            //            album.fotorama = album.content.map(productToFotorama);
+            //
+            //            return album;
+            //        });
+            //    });
+        }
+    );
 
     app.controller("AlbumPageController", function ($scope, $http, $routeParams) {
-        var url = '/gallery/{year}/{course}/{album}'
+        var url = '/album/{year}/{course}/{album}'
             .replace('{year}', $routeParams.year)
             .replace('{course}', $routeParams.course)
             .replace('{album}', $routeParams.album);
@@ -47,7 +67,8 @@ module.exports = function (app) {
                 $scope.album = album;
             });
     });
-};
+}
+;
 
 function productToFotorama(product) {
     return {

routes/gallery.js

@@ -22,7 +22,26 @@ module.exports = function (app) {
         }
     })));
 
-    app.use(route.get("/gallery/:year/:course/:album", router.accepts({
+    app.use(route.get("/gallery/:year", router.accepts({
+        "text/html": router.index(),
+        "text/plain": router.index(),
+        "application/json": function *(year) {
+            year = parseInt(year);
+            var start = new Date(year, 0, 1);
+            var end = new Date(year, 11, 31);
+            var query = {
+                date: {$gte: start, $lt: end}
+            };
+            var albums = yield db.c("albums")
+                .find(query)
+                .toArray();
+
+            albums = yield albums.map(processAlbum);
+            this.body = albums;
+        }
+    })));
+
+    app.use(route.get("/album/:year/:course/:album", router.accepts({
         "text/html": router.index(),
         "text/plain": router.index(),
         "application/json": function *(year, course, album) {
@@ -46,7 +65,7 @@ module.exports = function (app) {
 
 function processAlbum(album) {
     return co(function *() {
-        album.url = '/gallery/{year}{course}{album}'
+        album.url = '/album/{year}{course}{album}'
             .replace('{year}', album.date.getFullYear())
             .replace('{course}', album.course_uri)
             .replace('{album}', album.uri);

templates/views/gallery.html

@@ -1,10 +1,22 @@
 <div class="gallery-block" ng-controller="GalleryPageController">
-    <div class="gallery-album" ng-repeat="album in albums">
-        <h3><a href="{{album.url}}">{{album.title}}</a></h3>
-        <a href="{{album.url}}" class="invisible">
-            <img ng-src="{{album.preview_url}}" alt=""/>
-        </a>
 
-        <!--<div class="fotorama" g-fotorama content="album.content"></div>-->
+    <div class="gallery-period" ng-repeat="period in years">
+        <p class="period">{{period.year}}</p>
+        <div><div class="gallery-album" ng-repeat="album in period.albums">
+            <h3><a href="{{album.url}}">{{album.title}}</a></h3>
+            <a href="{{album.url}}" class="invisible">
+                <img ng-src="{{album.preview_url}}" alt=""/>
+            </a>
+            <p>{{album.course}}</p>
+        </div></div>
     </div>
+
+
+    <!--<div class="gallery-album" ng-repeat="album in albums">-->
+        <!--<h3><a href="{{album.url}}">{{album.title}}</a></h3>-->
+        <!--<a href="{{album.url}}" class="invisible">-->
+            <!--<img ng-src="{{album.preview_url}}" alt=""/>-->
+        <!--</a>-->
+        <!--<p>{{album.course}}</p>-->
+    <!--</div>-->
 </div>