Merge pull request #353 from usefathom/allow-to-link-via-site-id

Allow to access the dashboard with a given site ID

assets/src/js/components/DatePicker.js

@@ -4,6 +4,7 @@ import { h, Component } from 'preact';
 import { bind } from 'decko';
 import Pikadayer from './Pikadayer.js';
 import classNames from 'classnames';
+import {hashParams} from "../lib/util";
 
 const padZero = (n) => n < 10 ? '0'+n : ''+n;
 
@@ -81,19 +82,6 @@ const availablePeriods = {
  }
 }
 
-function hashParams() {
- var params = {}, 
-  match, 
-  matches =  window.location.hash.substring(2).split("&");
-
- for(var i=0; i<matches.length; i++) {
-   match = matches[i].split('=')
-   params[match[0]] = decodeURIComponent(match[1]);
- }
-
- return params;
-}
-
 class DatePicker extends Component {
   constructor(props) {
     super(props)
@@ -105,6 +93,7 @@ class DatePicker extends Component {
       startDate: new Date(params.s || 'now'),
       endDate: new Date(params.e || 'now'),
       groupBy: params.g || 'day',
+      site: params.site || 1
     }    
     this.state.diff = this.calculateDiff(this.state.startDate, this.state.endDate)
 
@@ -179,9 +168,9 @@ class DatePicker extends Component {
 
   updateURL() {
     if(this.state.period !== 'custom') {
-      window.history.replaceState(this.state, null, `#!p=${this.state.period}&g=${this.state.groupBy}`)
+      window.history.replaceState(this.state, null, `#!p=${this.state.period}&g=${this.state.groupBy}&site=${this.state.site}`)
     } else {
-      window.history.replaceState(this.state, null, `#!p=custom&s=${encodeURIComponent(this.state.startDate.toISOString())}&e=${encodeURIComponent(this.state.endDate.toISOString())}&g=${this.state.groupBy}`)
+      window.history.replaceState(this.state, null, `#!p=custom&s=${encodeURIComponent(this.state.startDate.toISOString())}&e=${encodeURIComponent(this.state.endDate.toISOString())}&g=${this.state.groupBy}&site=${this.state.site}`)
     }
   }
 

assets/src/js/components/SiteSwitcher.js

@@ -3,6 +3,17 @@
 import { h, Component } from 'preact';
 import { bind } from 'decko';
 
+
+
+function arrayToQueryString(array_in){
+    var out = new Array();
+
+    for(var key in array_in){
+        out.push(key + '=' + encodeURIComponent(array_in[key]));
+    }
+
+    return out.join('&');
+}
 class SiteSwitcher extends Component {
   constructor() {
     super();
@@ -18,7 +29,9 @@ class SiteSwitcher extends Component {
         if (s.id != itemId) {
             return false;
         }
-
+        let params = hashParams()
+        params["site"] = s.id
+        window.history.replaceState(this.state, null, `#!${arrayToQueryString(params)}`)
         this.props.onChange(s)
         return true;
     })   

assets/src/js/lib/util.js

@@ -2,21 +2,35 @@
 
 // convert object to query string
 function stringifyObject(json) {
-  var keys = Object.keys(json);
+    var keys = Object.keys(json);
 
-  return '?' +
-      keys.map(function(k) {
-          return encodeURIComponent(k) + '=' +
-              encodeURIComponent(json[k]);
-      }).join('&');
+    return '?' +
+        keys.map(function (k) {
+            return encodeURIComponent(k) + '=' +
+                encodeURIComponent(json[k]);
+        }).join('&');
 }
 
 function randomString(n) {
-  var s = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-  return Array(n).join().split(',').map(() => s.charAt(Math.floor(Math.random() * s.length))).join('');
+    var s = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+    return Array(n).join().split(',').map(() => s.charAt(Math.floor(Math.random() * s.length))).join('');
 }
 
-export { 
-   randomString, 
-   stringifyObject
+function hashParams() {
+    var params = {},
+        match,
+        matches = window.location.hash.substring(2).split("&");
+
+    for (var i = 0; i < matches.length; i++) {
+        match = matches[i].split('=')
+        params[match[0]] = decodeURIComponent(match[1]);
+    }
+
+    return params;
+}
+
+export {
+    randomString,
+    stringifyObject,
+    hashParams
 }

assets/src/js/pages/dashboard.js

@@ -13,17 +13,19 @@ import Chart from '../components/Chart.js';
 import { bind } from 'decko';
 import Client from '../lib/client.js';
 import classNames from 'classnames';
+import {hashParams} from "../lib/util";
 
-const defaultSite = { 
-  id: window.localStorage.getItem('site_id') || 1, 
-  name: "",
-  unsaved: true,
-};
 
+let defaultSite = {}
 class Dashboard extends Component {
   constructor(props) {
     super(props)
-
+    let params = hashParams()
+    defaultSite = {
+      id: params.site || window.localStorage.getItem('site_id') || 1,
+      name: "",
+      unsaved: true,
+    };
     this.state = {
       dateRange: [],
       groupBy: 'day',
@@ -39,10 +41,10 @@ class Dashboard extends Component {
     this.fetchSites()
   }
 
-  @bind 
+  @bind
   fetchSites() {
     Client.request(`sites`)
-    .then((sites) => { 
+    .then((sites) => {
       // open site settings when there are no sites yet
       if(sites.length == 0) {
         this.showSiteSettings({ id: 1, name: "yoursite.com", unsaved: true })
@@ -55,7 +57,7 @@ class Dashboard extends Component {
       site = s ? s : site;
 
       this.setState({
-        sites: sites, 
+        sites: sites,
         site: site,
       })
     }).catch((e) => {
@@ -67,18 +69,18 @@ class Dashboard extends Component {
 
   @bind
   changeDateRange(s) {
-    this.setState({ 
+    this.setState({
       dateRange: [ s.startDate, s.endDate ],
       period: s.period,
       groupBy: s.groupBy,
     })
   }
 
-  @bind 
+  @bind
   showSiteSettings(site) {
     site = site && site.unsaved ? site : this.state.site;
-    this.setState({ 
-      settingsOpen: true, 
+    this.setState({
+      settingsOpen: true,
       site: site,
       previousSite: this.state.site,
     })
@@ -87,22 +89,22 @@ class Dashboard extends Component {
   @bind
   closeSiteSettings() {
     this.setState({
-      settingsOpen: false, 
+      settingsOpen: false,
 
       // switch back to previous site if we were showing site settings to add a new site
       site: this.state.site.unsaved && this.state.previousSite ? this.state.previousSite : this.state.site,
     })
   }
 
-  @bind 
+  @bind
   changeSelectedSite(site) {
     let newState = {
       site: site,
     }
 
     if(!this.state.site.unsaved) {
       newState.previousSite = this.state.site
-    } 
+    }
 
     this.setState(newState)
     window.localStorage.setItem('site_id', site.id)
@@ -115,9 +117,9 @@ class Dashboard extends Component {
       if(s.id != site.id) {
         return s;
       }
-      
+
       updated = true;
-      
+
       // replace site in sites array with parameter
       return site;
     })
@@ -129,13 +131,13 @@ class Dashboard extends Component {
     this.setState({sites: newSites, site: site})
   }
 
-  @bind 
+  @bind
   deleteSite(site) {
     let newSites = this.state.sites.filter((s) => (s.id != site.id))
     let newSelectedSite = newSites.length > 0 ? newSites[0] : defaultSite;
-    this.setState({ 
-      sites: newSites, 
-      site: newSelectedSite 
+    this.setState({
+      sites: newSites,
+      site: newSelectedSite
     })
   }