Added icon-buttons for today and random

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

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

@@ -47,18 +47,22 @@
 
 <dom-module id="ketr-photos">
   <template>
-    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
+    <style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning">
       :host {
       }
 
       #header {
-        padding: 0.5em 1em;
+        padding: 0.5em;
         background: #ddd;
         box-shadow: 0px 0px 5px black;
         box-sizing: border-box;
         height: 64px;
       }
 
+      #header iron-pages {
+        padding-left: 0.5em;
+      }
+
       #breadcrumb {
         padding: 0.5em;
       }
@@ -213,7 +217,28 @@
       }
 
       #memories {
-        padding: 0.5em;
+        padding: 0.5em 1em;
+      }
+
+      #memories > div,
+      #memories > calendar-element {
+        padding-top: 1em;
+      }
+
+      #memories .memory-buttons {
+        padding-top: 0;
+        font-size: 0.8em;
+      }
+
+      #memories .memory-buttons :not([is-today]) paper-icon-button {
+        color: #444;
+      }
+
+      #memories [is-today] {
+        font-weight: bold;
+      }
+
+      #memories [is-today] paper-icon-button {
       }
     </style>
 
@@ -229,13 +254,22 @@
         <iron-pages id="pages" attr-for-selected="id" selected="[[mode]]">
           <div id="time"><div>... time slider ...</div></div>
           <div id="memories" class="flex layout vertical center">
-            <div>Pick a date on the calendar to look back in time and see photos from that day.</div>
+            <div class="memory-buttons layout self-stretch horizontal around-justified">
+              <div is-today$=[[!isToday(date)]] on-tap="gotoRandomDay" class="layout vertical center">
+                <div>Random</div>
+                <paper-icon-button icon="refresh"></paper-icon-button>
+              </div>
+              <div is-today$=[[isToday(date)]] on-tap="gotoToday" class="layout vertical center">
+                <div>Today</div>
+                <paper-icon-button icon="today"></paper-icon-button>
+              </div>
+            </div>
             <calendar-element 
               id="calendar"
               min="2016-01-01"
               max="2016-12-31"
               date="{{date}}"></calendar-element>
-            <div>[[memoryDate]]</div>
+            <div>Pick a date on the calendar to look back in time and see photos from that day.</div>
             <div hidden$="[[!thumbnails.length]]">
               <div><b>[[thumbnails.length]]</b> photos taken across <b>[[years.length]]</b> years.</div>
             </div>
@@ -261,7 +295,7 @@
                 </template>
               </div>
               <div mode="time">time</div>
-              <div mode="memories">Photos taken on <b>[[memoryDate]]</b>, regardless of year.</div>
+              <div mode="memories">Photos taken on <b>[[memoryDate]]</b></div>
             </iron-pages>
         </div>
         </app-header>
@@ -342,6 +376,18 @@
           "dateChanged(date)"
         ],
 
+        isToday: function(date) {
+          return this.date == "2016-" + window.moment().format("MM-DD");
+        },
+
+        gotoToday: function() {
+          this.date = "2016-" + window.moment().format("MM-DD");
+        },
+
+        gotoRandomDay: function() {
+           this.date = "2016-" + window.moment(Math.ceil(Math.random() * 365), "DDD").format("MM-DD");
+        },
+
         shouldShowAlbums: function(order) {
           return order == "by-album";
         },
@@ -353,15 +399,21 @@
           }
         },
 
-        dateChanged: function(date) {
+        resetPhotos: function() {
           this.years = [];
+          this.notifyPath("years.length");
           this.pendingPhotos = [];
           this.visibleThumbs = [];
           this.thumbnails = [];
+          this.notifyPath("thumbnails.length");
           this.cursor = null;
           Polymer.dom(this.$.thumbnails).innerHTML = "";
           this.next = false;
           this.limit = undefined;
+        },
+
+        dateChanged: function(date) {
+          this.resetPhotos();
           this.memoryDate = window.moment(this.date).format("MMMM Do");
           this._loadPhotos();
         },
@@ -369,13 +421,7 @@
         modeChanged: function(mode) {
           console.log("Mode changed to " + mode);
           this.path = "";
-          this.pendingPhotos = [];
+          this.resetPhotos();
-          this.visibleThumbs = [];
-          this.thumbnails = [];
-          this.cursor = null;
-          Polymer.dom(this.$.thumbnails).innerHTML = "";
-          this.next = false;
-          this.limit = undefined;
           this._loadPhotos();
         },
 
@@ -423,13 +469,7 @@
 
         _pathLoad: function(path) {
           this.path = path;
-          this.pendingPhotos = [];
+          this.resetPhotos();
-          this.visibleThumbs = [];
-          this.thumbnails = [];
-          this.cursor = null;
-          Polymer.dom(this.$.thumbnails).innerHTML = "";
-          this.next = false;
-          this.limit = undefined;
           this._loadAlbums();
           this._loadPhotos();
         },