Ready to deploy

Signed-off-by: James Ketrenos <james_git@ketrenos.com>

config/default.json

@@ -7,7 +7,7 @@
     }
   },
   "server": {
-    "port": 8080
+    "port": 8123
   },
   "picturesPath": "./pictures",
   "basePath": "/photos"

frontend/elements/photo-thumbnail.html

@@ -28,24 +28,23 @@
     }
 
       :host > div {
+        position: absolute;
         padding: 0.5em;
+        background-color: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
       }
 
-      :host:hover {
+      :host:hover > div {
-        background-color: rgba(0, 0, 0, 0.2);
+        opacity: 1;
       }
 
-      div[path]:hover {
-          text-decoration: underline;
-          cursor: pointer;
-      }
     </style>
 
-    <div class="layout vertical">
+    <div>
-        <div>[[item.id]]</div>
+        [[item.name]]
-        <div>[[date(item)]]</div>
-        <div path on-tap="_pathTap">[[item.path]]</div>
-        <div>[[item.filename]]</div>
     </div>
 </template>
 

frontend/src/ketr-photos/ketr-photos.html

@@ -48,11 +48,17 @@
       :host {
       }
 
+      #breadcrumb {
+        padding: 0.5em;
+      }
+
+      #albumList > div,
       #breadcrumb > div {
         margin-right: 0.5em;
         cursor: pointer;
       }
 
+      #albumList > div:hover,
       #breadcrumb > div:hover {
         text-decoration: underline;
       }
@@ -85,7 +91,7 @@
         background-color: yellow;
       }
 
-      #header > * {
+      #header > div > * {
         margin-right: 0.5em;
       }
 
@@ -102,6 +108,21 @@
         width: 100%;
       }
 
+      .album-line {
+        display: block;
+        padding: 0.5em 0;
+        width: 100%;
+        cursor: pointer;
+      }
+
+      .album-line > div {
+        margin-right: 0.5em;
+      }
+
+      .album-line > div:hover {
+        text-decoration: underline;
+      }
+
       #content {
         margin: 1em;
       }
@@ -126,31 +147,35 @@
 
     <app-header-layout reveals>
       <app-header fixed>
-        <div id="header" class="layout horizontal center">
+        <div id="header" class="layout vertical start">
-          <paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
+          <div class="layout horizontal center">
-          <paper-radio-group selected="{{order}}">
+            <paper-spinner active$="[[loading]]" class="thin"></paper-spinner>
-            <paper-radio-button name="by-date">By date</paper-radio-button>
+            <paper-radio-group selected="{{order}}">
-            <paper-radio-button name="by-album">By album</paper-radio-button>
+              <paper-radio-button name="by-date">By date</paper-radio-button>
-          </paper-radio-group>
+              <paper-radio-button name="by-album">By album</paper-radio-button>
-          <paper-checkbox checked$="[[limitPerFolder]]" on-checked-changed="onLimitPerFolderChanged">Limit per folder</paper-checkbox>
+            </paper-radio-group>
-          <paper-checkbox checked$="[[breakOnDayChange]]" on-checked-changed="onBreakOnDayChanged">Break on day change</paper-checkbox>
+            <paper-checkbox checked$="[[limitPerFolder]]" on-checked-changed="onLimitPerFolderChanged">Limit per folder</paper-checkbox>
+            <paper-checkbox checked$="[[breakOnDayChange]]" on-checked-changed="onBreakOnDayChanged">Break on day change</paper-checkbox>
+          </div>
           <div id="breadcrumb" class="horizontal layout center"><template is="dom-repeat" items="[[breadcrumb(path)]]">
             <div on-tap="loadPath">[[item.name]] /</div>
           </template></div>
         </div>
       </app-header>
-      <div id="content">
+      <div id="content" class="layout horizontal">
-        <div id="thumbnails" class="thumbnails layout horizontal wrap"></div>
+        <div id="albumList" hidden$="[[!showAlbums]]">
-        <div id="magic"></div>
+          <template is="dom-repeat" items="[[albums.children]]">
-        <div class="layout horizontal">
+            <div on-tap="loadPath">[[item.name]]</div>
-          <paper-button disabled$="[[!prev]]" on-tap="loadPrevPhotos">prev</paper-button>
-          <paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
-        </div>
-        <div class="folders layout horizontal wrap">
-          <template is="dom-repeat" items="[[photos.paths]]">
-            <div info="[[item]]" on-tap="_pathTap" >[[item.filepath]]</div>
           </template>
         </div>
+        <div class="layout vertical">
+          <div id="thumbnails" class="thumbnails layout horizontal wrap"></div>
+          <div id="magic"></div>
+          <div class="layout horizontal">
+            <paper-button disabled$="[[!prev]]" on-tap="loadPrevPhotos">prev</paper-button>
+            <paper-button disabled$="[[!next]]" on-tap="loadNextPhotos">next</paper-button>
+          </div>
+        </div>
       </div>
     </app-header-layout>
     <paper-toast id="toast"></paper-toast>
@@ -186,9 +211,21 @@
             type: Boolean,
             value: false,
             reflectToAttribute: true
+          },
+          showAlbums: {
+            type: Boolean,
+            computed: "shouldShowAlbums(order)"
+          },
+          path: {
+            type: String,
+            value: ""
           }
         },
 
+        shouldShowAlbums: function(order) {
+          return order == "by-album";
+        },
+
         breadcrumb: function(path) {
           var crumbs = path.split("/"), parts = [];
           path = "";
@@ -210,7 +247,9 @@
         ],
 
         orderChanged: function(order) {
-
+          console.log("Order: " + order);
+          Polymer.dom(this.$.thumbnails).innerHTML = "";
+          this.appendItems(this.photos);
         },
 
         onLimitPerFolderChanged: function(event) {
@@ -246,6 +285,7 @@
           Polymer.dom(this.$.thumbnails).innerHTML = "";
           this.photos = [];
           this.next = false;
+          this._loadAlbums();
           this._loadPhotos();
         },
 
@@ -257,6 +297,7 @@
           Polymer.dom(this.$.thumbnails).innerHTML = "";
           this.photos = [];
           this.next = false;
+          this._loadAlbums();
           this._loadPhotos();
         },
 
@@ -370,7 +411,11 @@
         },
         
         appendItems: function(photos) {
-          var thisDay;
+          if (!photos) {
+            return;
+          }
+
+          var thisDay, lastPath = null;
           if (this.limitPerFolder) {
             console.log("Max per day: " + this.cols);
           }
@@ -411,6 +456,26 @@
               }
             }
 
+            if (this.order == "by-album") {
+              if (lastPath != photo.path) {
+                lastPath = photo.path;
+                var albumBlock = document.createElement("div");
+                albumBlock.classList.add("album-line");
+                albumBlock.classList.add("layout");
+                albumBlock.classList.add("horizontal");
+                var trail = this.breadcrumb(lastPath);
+                trail.forEach(function(crumb) {
+                  var div = document.createElement("div");
+                  div.path = crumb.path;
+                  div.textContent = crumb.name + " /";
+                  div.addEventListener("tap", this.pathTapped.bind(this));
+                  albumBlock.appendChild(div);
+                }.bind(this));
+
+                Polymer.dom(this.$.thumbnails).appendChild(albumBlock);
+              }
+            }
+
             if (!this.limitPerFolder || thisDay < this.cols) {
               Polymer.dom(this.$.thumbnails).appendChild(thumbnail);
               thisDay++;
@@ -429,6 +494,15 @@
           }
         },
 
+        pathTapped: function(event) {
+          this.path = event.currentTarget.path;
+          Polymer.dom(this.$.thumbnails).innerHTML = "";
+          this.photos = [];
+          this.next = false;
+          this._loadAlbums();
+          this._loadPhotos();
+        },
+
         _loadPhotos: function(start, dir, append) {
           if (this.loading == true) {
             return;
@@ -500,6 +574,35 @@
           }.bind(this));
         },
 
+        _loadAlbums: function() {
+          if (this.loadingAlbums == true) {
+            return;
+          }
+          this.loadingAlbums = true;
+
+          window.fetch("api/v1/albums" + (this.path || ""), function(error, xhr) {
+            this.loadingAlbums = false;
+            if (error) {
+              console.error(JSON.stringify(error, null, 2));
+              return;
+            }
+
+            var results;
+            try {
+              results = JSON.parse(xhr.responseText);
+            } catch (___) {
+              this.$.toast.text = "Unable to load/parse album list.";
+              this.$.toast.setAttribute("error", true);
+              this.$.toast.updateStyles();
+              this.$.toast.show();
+              console.error("Unable to parse photos");
+              return;
+            }
+
+            this.albums = results;
+          }.bind(this));
+        },
+
         onResize: function(event) {
           this.debounce("resize", function() {
             var width = Math.max(this.$.placeholder.offsetWidth || 0, 200);
@@ -547,6 +650,7 @@
 
           }.bind(this), 500);
 
+          this._loadAlbums();
           this._loadPhotos();
 
           this.onResize();

server/db/index.js

@@ -34,6 +34,7 @@ function init() {
         autoIncrement: true
       },
       path: Sequelize.STRING,
+      name: Sequelize.STRING,
       parentId: {
         type: Sequelize.INTEGER,
         allowNull: true
@@ -53,6 +54,7 @@ function init() {
         primaryKey: true,
         autoIncrement: true
       },
+      name: Sequelize.STRING,
       path: Sequelize.STRING,
       filename: Sequelize.STRING,
       added: Sequelize.DATE,

server/routes/albums.js

@@ -40,7 +40,7 @@ router.get("/*", function(req, res/*, next*/) {
       }
     }
 
-    return photoDB.sequelize.query("SELECT * FROM albums WHERE parentId=:parentId", {
+    return photoDB.sequelize.query("SELECT * FROM albums WHERE parentId=:parentId ORDER BY name", {
       replacements: {
         parentId: parent.id
       },

server/scanner.js

@@ -18,6 +18,7 @@ function scanDir(parent, path) {
     re = new RegExp("\.((" + extensions.join(")|(") + "))$", "i"),
     replacements = {
       path: path.slice(picturesPath.length),
+      name: path.replace(/.*\//, "").replace(/_/g, " "),
       parent: parent || null
     };
 
@@ -34,7 +35,7 @@ function scanDir(parent, path) {
   }).then(function(results) {
     if (results.length == 0) {
 //      console.log("Adding " + path + " under " + parent, replacements);
-      return photoDB.sequelize.query("INSERT INTO albums (path,parentId) VALUES(:path,:parent)", {
+      return photoDB.sequelize.query("INSERT INTO albums (path,parentId,name) VALUES(:path,:parent,:name)", {
         replacements: replacements
       }).then(function(results) {
         return results[1].lastID;
@@ -288,6 +289,7 @@ function triggerWatcher() {
 
           let replacements = {
             albumId: albumId,
+            name: file.replace(/.[^.]*$/, ""),
             path: path,
             filename: file,
             width: metadata.width,
@@ -327,8 +329,8 @@ function triggerWatcher() {
 
             return resize.then(function() {
               return photoDB.sequelize.query("INSERT INTO photos " +
-                "(albumId,path,filename,added,modified,taken,width,height)" +
+                "(albumId,path,filename,added,modified,taken,width,height,name)" +
-                "VALUES(:albumId,:path,:filename,DATE(:added),DATE(:modified),DATE(:taken),:width,:height)", {
+                "VALUES(:albumId,:path,:filename,DATE(:added),DATE(:modified),DATE(:taken),:width,:height,:name)", {
                 replacements: replacements
               });
             }).catch(function(error) {