345 sharing old charts

frontend/app/components/health-dashboard.js

@@ -10,8 +10,8 @@ const {
 } = Ember;
 
 export default Component.extend(CheckinByDate, {
-  patternsVisible: true,
-  chartVisible: false,
+  patternsVisible: false,
+  chartVisible: true,
   journalIsVisible: alias('chartJournalSwitcher.journalIsVisible'),
   chartJournalSwitcher: service(),
   i18n: service(),

frontend/app/components/pattern/index-step.js

@@ -142,9 +142,5 @@ export default Component.extend({
 
       setProperties(this, { startAt: startAt, endAt: endAt });
     },
-
-    sharePattern() {
-      this.transitionTo('patterns');
-    },
   }
 });

frontend/app/components/shared-dialogs/charts-dialog.js

@@ -0,0 +1,33 @@
+import config from 'flaredown/config/environment';
+import CryptoJS from 'cryptojs';
+import Component from '@ember/component';
+import { get, set, computed } from '@ember/object';
+
+export default Component.extend({
+  classNames: ['flaredown-white-box', 'sharedChartsDialog'],
+
+  secretPhrase: config.encryptionSecret,
+  staticUrl: config.staticUrl,
+
+  encryptedUrl: computed('session.isAuthenticated', 'session.email', function() {
+    if(get(this, 'session.isAuthenticated')) {
+      const email = get(this, 'session.email');
+      const encryptedEmail = CryptoJS.AES.encrypt(email, get(this, 'secretPhrase'));
+
+      return `${get(this, 'staticUrl')}/charts/${encodeURIComponent(encryptedEmail)}`;
+    } else {
+      return '';
+    }
+  }),
+
+  actions: {
+    sendEmail() {
+      const encryptedUrl = encodeURIComponent(get(this, 'encryptedUrl'));
+      const currentUser = get(this, 'session.currentUser');
+      const screenName = currentUser ?  get(currentUser, 'profile.screenName') : "";
+      const subject = `${screenName} would like to share their health charts with you`;
+
+      window.location.href = `mailto:?subject=${subject}&body=${encryptedUrl}`;
+    },
+  },
+});

frontend/app/locales/en/translations.js

@@ -81,6 +81,10 @@ export default {
   },
 
   history: {
+    charts: {
+      shareButtonText: 'Share Charts',
+    },
+
     step: {
       initial: {
         title: 'History',
@@ -100,7 +104,7 @@ export default {
       },
       index: {
         newPatternText: '+ Create new pattern',
-        sharePatternText: 'Share Patterns',
+        shareButtonText: 'Share Patterns',
       }
     }
   },
@@ -114,4 +118,13 @@ export default {
       loadMore: 'Load more...',
     },
   },
+
+  sharedCharts: {
+    dialog: {
+      title: 'You will share all visible Charts',
+      buttonText: 'Share via Email',
+      sharedUrl: 'Or copy this link to share anywhere',
+      done: 'Done',
+    }
+  },
 };

frontend/app/router.js

@@ -12,6 +12,10 @@ Router.map(function() {
   this.route('signup');
   this.route('chart');
 
+  this.route('charts', function() {
+    this.route('shared', { path: '/:friendly_id' });
+  });
+
   this.route('patterns', function() {
     this.route('shared', { path: '/:friendly_id' });
   });

frontend/app/routes/charts/index.js

@@ -0,0 +1,6 @@
+import AuthenticatedRouteMixin from 'flaredown/mixins/authenticated-route-mixin';
+import Route from '@ember/routing/route';
+import { get } from '@ember/object';
+
+export default Route.extend(AuthenticatedRouteMixin, {
+});

frontend/app/styles/global.scss

@@ -512,7 +512,7 @@ input[type="submit"] {
   }
 }
 
-.sharePatternLink {
+.shareHistoryBtn {
   display: flex;
   justify-content: center;
   margin-bottom: 10px;
@@ -579,3 +579,18 @@ input[type="submit"] {
   margin-top: 0.5em;
 }
 
+// Sharing Charts
+.sharedChartsBtn {
+  width: 100%;
+  background-color: $primary;
+
+  &:hover,
+  &:focus {
+    background-color: darken($primary, 10%);
+  }
+}
+
+.sharedChartsUrl {
+  margin-top: 20px;
+}
+

frontend/app/templates/charts/index.hbs

@@ -0,0 +1 @@
+{{shared-dialogs/charts-dialog}}

frontend/app/templates/components/health-chart.hbs

@@ -1,3 +1,13 @@
+{{#if authorPage}}
+  <div class="shareHistoryBtn">
+    {{#link-to 'charts' class="history-index-btn btn"}}
+      {{t "history.step.index.shareButtonText"}}
+    {{/link-to}}
+  </div>
+{{else}}
+  <h3 class="centered">{{authorName}}'s Health History</h3>
+{{/if}}
+
 {{#if chartLoaded }}
   <svg width='100%' height={{SVGHeight}}>
     <g class="health-chart-viewport" transform="translate(0, {{seriePadding}})">

frontend/app/templates/components/health-dashboard.hbs

@@ -1,13 +1,13 @@
 <div class="btn-group vert-offset-top-1 vert-offset-bottom-1">
-  <button {{action "showPatterns"}} class={{ if (or journalIsVisible chartVisible) "" "active" }}>Patterns</button>
   <button {{action "showChart"}}    class={{if (or journalIsVisible patternsVisible) "" "active"}}>Charts</button>
+  <button {{action "showPatterns"}} class={{if (or journalIsVisible chartVisible) "" "active" }}>Patterns</button>
   <button {{action "showJournal"}}  class={{if (or chartVisible patternsVisible) "" "active"}}>Journal</button>
 </div>
 
 {{#if journalIsVisible}}
   {{journal-list}}
 {{else if chartVisible}}
-  {{health-chart onDateClicked=(action "routeToCheckin")}}
+  {{health-chart onDateClicked=(action "routeToCheckin") authorPage=true}}
 {{else}}
   {{chart-patterns}}
 {{/if}}

frontend/app/templates/components/pattern/index-step.hbs

@@ -1,7 +1,7 @@
 {{#if authorPage}}
-  <div class="sharePatternLink">
+  <div class="shareHistoryBtn">
     {{#link-to 'patterns' class="history-index-btn btn"}}
-      Share Patterns
+      {{t "history.step.index.shareButtonText"}}
     {{/link-to}}
   </div>
 {{else}}

frontend/app/templates/components/shared-dialogs/charts-dialog.hbs

@@ -0,0 +1,14 @@
+<h3 class="centered">{{t "sharedCharts.dialog.title"}}</h3>
+
+<button class="sharedChartsBtn" {{action "sendEmail"}}>
+  {{t "sharedCharts.dialog.buttonText"}}
+</button>
+
+<div class="sharedChartsUrl centered">
+  <label>{{t "sharedCharts.dialog.sharedUrl"}}</label>
+  {{input value=encryptedUrl}}
+</div>
+
+<div class="sharedBottom centered">
+  {{#link-to 'chart'}}{{t "sharedCharts.dialog.done"}}{{/link-to}}
+</div>

frontend/app/templates/patterns/index.hbs

@@ -1 +1 @@
-{{shared-patterns/dialog patterns=model}}
+{{shared-dialogs/patterns-dialog patterns=model}}