From 0aed7f2293afeab4845b8c51f12346472b1ef163 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Tue, 21 Aug 2018 16:23:13 -0700
Subject: [PATCH] Added 'date' to output

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
---
 frontend/src/ketr-photos/ketr-photos.html | 40 +++++++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index fe1838d..a9ac533 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -73,6 +73,12 @@
           overflow-y: hidden !important;
         };
       }
+
+      .date-line {
+        display: block;
+        padding: 0.5em 0;
+        width: 100%;
+      }
     </style>
 
     <app-location route="{{route}}"></app-location>
@@ -85,10 +91,7 @@
         <div>[[path]]</div>
       </app-header>
       <div id="content">
-        <div class="thumbnails layout horizontal wrap">
-          <template is="dom-repeat" items="[[photos]]">
-            <photo-thumbnail width="[[calcWidth]]" on-tap="_imageTap" item="[[item]]"></photo-thumbnail>
-          </template>
+        <div id="thumbnails" class="thumbnails layout horizontal wrap">
         </div>
         <div id="magic"></div>
         <div class="layout horizontal">
@@ -124,8 +127,16 @@
         },
 
         observers: [
+          "widthChanged(calcWidth)"
         ],
 
+        widthChanged: function(calcWidth) {
+          var thumbs = this.$.thumbnails.querySelectorAll("photo-thumbnail");
+          Array.prototype.forEach.call(thumbs, function(thumb) {
+            thumb.width = calcWidth;
+          });
+        },
+
         behaviors: [
           /* @polymerBehavior Polymer.IronResizableBehavior */
           Polymer.IronResizableBehavior
@@ -210,10 +221,25 @@
               this.base = "";
             }
 
+            results.items.forEach(function(photo) {
+              var thumbnail = document.createElement("photo-thumbnail");
+              thumbnail.item = photo;
+              thumbnail.width = this.calcWidth;
+              thumbnail.addEventListener("click", this._imageTap.bind(this));
+              var datetime = (photo.taken || photo.modified || photo.added).replace(/T.*$/, "");
+              if (this.lastDate != datetime) {
+                var dateLine = document.createElement("div");
+                dateLine.classList.add("date-line");
+                dateLine.textContent = datetime;
+                this.lastDate = datetime;
+                Polymer.dom(this.$.thumbnails).appendChild(dateLine);
+              }
+
+              Polymer.dom(this.$.thumbnails).appendChild(thumbnail);
+            }.bind(this));
+
             if (append) {
-              results.items.forEach(function(photo) {
-                this.push("photos", photo);
-              }.bind(this));
+              this.photos = this.photos.concat(results.items);
             } else {
               this.photos = results.items;
             }