From d9cc30488604984a0ce5130ab71acb471d7e91ec Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Sat, 20 Oct 2018 21:12:50 -0700
Subject: [PATCH] app-route is starting to work

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
---
 frontend/bower.json                       |  3 +-
 frontend/src/ketr-photos/ketr-photos.html | 58 ++++++++++++++++-------
 server/routes/index.js                    |  4 +-
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/frontend/bower.json b/frontend/bower.json
index d738ed5..dd946c5 100644
--- a/frontend/bower.json
+++ b/frontend/bower.json
@@ -31,7 +31,8 @@
     "paper-toast": "PolymerElements/paper-toast#^2",
     "iron-iconset": "PolymerElements/iron-iconset#^2",
     "paper-input": "PolymerElements/paper-input#^2",
-    "paper-dialog": "PolymerElements/paper-dialog#^2"
+    "paper-dialog": "PolymerElements/paper-dialog#^2",
+    "app-route": "PolymerElements/app-route#^2"
   },
   "resolutions": {
     "polymer": "2",
diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index f841411..7169b26 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -7,6 +7,8 @@
 <link rel="import" href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html">
+<link rel="import" href="../../bower_components/app-route/app-route.html">
+<link rel="import" href="../../bower_components/app-route/app-location.html">
 
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
@@ -36,6 +38,8 @@
 
 <script src="fetch.js"></script>
 
+<script>'<base href="/BASEPATH/">';</script>
+
 <style>
   body,* {
     font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
@@ -51,9 +55,6 @@
 <dom-module id="ketr-photos">
   <template>
     <style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning">
-      :host {
-      }
-
       #login {
         max-width: 50ex;
         margin: 1em auto;
@@ -108,9 +109,6 @@
         cursor: pointer;
       }
 
-      #drawer {
-      }
-
       #pages {
         position: relative;
         height: calc(100vh - 64px);
@@ -172,10 +170,6 @@
         --paper-toast-color: white;
       }
 
-      #thumbnails {
-/*        justify-content: space-between;*/
-      }
-
       .date-line {
         display: inline-block;
         white-space: nowrap;
@@ -203,10 +197,6 @@
         text-decoration: underline;
       }
 
-      .date-line {
-/*        margin-left: 2em;*/
-      }
-
       .date-line .header {
         padding: 0.25em 3px;
       }
@@ -547,13 +537,38 @@
         },
 
         observers: [
+          "routeChanged(route)",
           "widthChanged(calcWidth)",
           "modeChanged(mode)",
           "dateChanged(date)",
           "userChanged(user)",
-          "daysChanged(days)"
+          "daysChanged(days)",
+          "baseRouteChanged(route.path, basePath)",
+          "pathChanged(path, route.path, basePath)",
         ],
 
+        pathChanged: function(path, routePath, basePath) {
+          if (!basePath || !routePath || !path) {
+            return;
+          }
+          var tmp = routePath.replace(basePath, "");
+          if (tmp != path) {
+            this.set("route.path", basePath + path);
+          }
+        },
+
+        baseRouteChanged: function(routePath, basePath) {
+          if (!basePath || !routePath) {
+            return;
+          }
+          this.path = routePath.replace(basePath, "");
+          console.log("Album: " + routePath.replace(basePath, ""));
+        },
+
+        routeChanged: function(route) {
+          console.log(JSON.stringify(route));
+        },
+
         disableLogin: function(username, password) {
           return !username || username == "" || !password || password == "";
         },
@@ -714,6 +729,7 @@
         },
 
         logout: function(event) {
+          this.path = "";
           window.fetch("api/v1/users/logout", function(error, xhr) {
             this.user = this.name = this.password = this.username = this.who = null;
           }.bind(this));
@@ -766,7 +782,6 @@
             return;
           }
           console.log("Mode changed to " + mode);
-          this.path = "";
           this.setActions();
           this.resetPhotos();
           this._loadAlbums();
@@ -1794,8 +1809,7 @@
           }
 
           this.resetPhotos();
-          this.path = "";
-
+          
           if (!user) {
             this.mode = "login";
             this.loginStatus = null;
@@ -1831,6 +1845,14 @@
         },
 
         ready: function() {
+
+          var base = document.querySelector("base");
+          if (base) {
+            this.basePath = base.getAttribute("href");
+          } else {
+            this.basePath = "/";
+          }
+
           this.resetPhotos();
 
           this.$.calendar.partsHidden = {
diff --git a/server/routes/index.js b/server/routes/index.js
index a6a9627..1abdadf 100755
--- a/server/routes/index.js
+++ b/server/routes/index.js
@@ -33,8 +33,6 @@ router.get("/*", function(req, res, next) {
   const parts = url.parse(req.url),
     basePath = req.app.get("basePath");
 
-  console.log("Index check for " + req.url + " with user as " + req.user);
-
   /* If req.user isn't set yet (authentication hasn't happened) then
    * only allow / to be loaded--everything else chains to the next 
    * handler */
@@ -46,7 +44,7 @@ router.get("/*", function(req, res, next) {
     console.log("Returning index for " + req.url);
 
     /* Replace <script>'<base href="/BASEPATH/">';</script> in index.html with
-    * the basePath */
+     * the basePath */
     const index = fs.readFileSync("frontend/index.html", "utf8");
 
     res.send(index.replace(