Added iOS and Android review prompt

css/dashboard.css

@@ -422,6 +422,7 @@ input[type=range]::-moz-range-thumb {
 .icon.alert:before { content: "\F0026"; }
 .icon.alpha_b:before { content: "\F0AEF"; }
 .icon.alpha_b_box:before { content: "\F0B09"; }
+.icon.apple:before { content: "\F0035"; }
 .icon.arrow_down:before { content: "\F0045"; }
 .icon.arrow_expand_horizontal:before { content: "\F084E"; }
 .icon.arrow_expand_vertical:before { content: "\F084F"; }

index.php

@@ -38,8 +38,12 @@
     <meta name="theme-color" content="#222222">
     <!-- Icon for pinning on iOS -->
     <link rel="apple-touch-icon" href="/favicon_apple.png">
-    <!-- On iOS, place a banner to download the app -->
-    <meta name="apple-itunes-app" content="app-id=6469190206">
+    <?php
+      if($setting->is_demo() === false) {
+        echo '<!-- On iOS, place a banner to download the app -->';
+        echo '<meta name="apple-itunes-app" content="app-id=6469190206">';
+      }
+    ?>
     <?php
 
       echo '<link rel="manifest" href="/manifest.json?' . $setting->get('commit') . '">';

js/beestat/platform.js

@@ -1,4 +1,18 @@
+/**
+ * Determine what platform the app is being accessed from. Defaults to
+ * "desktop" if "android" or "ios" are not specified in the browser query
+ * string.
+ *
+ * @return {string} The platform.
+ */
 beestat.platform = function() {
-  const url_parameters = new URLSearchParams(window.location.search);
-  return url_parameters.get('platform');
+  const platform = new URLSearchParams(window.location.search).get('platform');
+
+  switch (platform) {
+  case 'android':
+  case 'ios':
+    return platform;
+  }
+
+  return 'browser';
 };

js/component/card/rate_app_reminder.js

@@ -0,0 +1,116 @@
+/**
+ * Banner asking people to rate and review the app.
+ */
+beestat.component.card.rate_app_reminder = function() {
+  const self = this;
+
+  beestat.dispatcher.addEventListener(
+    'setting.ui.rate_app_reminder_hide_until',
+    function() {
+      self.rerender();
+    }
+  );
+
+  beestat.component.card.apply(this, arguments);
+};
+beestat.extend(beestat.component.card.rate_app_reminder, beestat.component.card);
+
+/**
+ * Decorate
+ *
+ * @param {rocket.Elements} parent
+ */
+beestat.component.card.rate_app_reminder.prototype.decorate_contents_ = function(parent) {
+  const self = this;
+
+  // Don't render anything if the user dismissed this card.
+  if (beestat.component.card.rate_app_reminder.should_show() === false) {
+    window.setTimeout(function() {
+      self.dispose();
+    }, 0);
+    return;
+  }
+
+  parent.style('background', beestat.style.color.bluegray.base);
+
+  let icon;
+  let store_name;
+  let store_url;
+
+  if (beestat.platform() === 'ios') {
+    icon = 'apple';
+    store_name = 'the App Store';
+    store_url = 'https://apps.apple.com/us/app/beestat/id6469190206?platform=ipad';
+  } else if (beestat.platform() === 'android') {
+    icon = 'google_play';
+    store_name = 'Google Play';
+    store_url = 'https://play.google.com/store/apps/details?id=io.beestat';
+  } else {
+    throw new Error('Unsupported platform.');
+  }
+
+  new beestat.component.tile()
+    .set_icon(icon)
+    .set_size('large')
+    .set_text(
+      'Rate now on ' + store_name
+    )
+    .set_background_color(beestat.style.color.green.dark)
+    .set_background_hover_color(beestat.style.color.green.light)
+    .addEventListener('click', function() {
+      window.open(store_url);
+    })
+    .render(parent);
+};
+
+/**
+ * Get the title of the card.
+ *
+ * @return {string} The title.
+ */
+beestat.component.card.rate_app_reminder.prototype.get_title_ = function() {
+  return 'Like the app? Leave a rating or review!';
+};
+
+/**
+ * Decorate the close button.
+ *
+ * @param {rocket.Elements} parent
+ */
+beestat.component.card.rate_app_reminder.prototype.decorate_top_right_ = function(parent) {
+  new beestat.component.tile()
+    .set_type('pill')
+    .set_shadow(false)
+    .set_icon('close')
+    .set_text_color('#fff')
+    .set_background_hover_color(beestat.style.color.bluegray.light)
+    .addEventListener('click', function() {
+      beestat.setting(
+        'ui.rate_app_reminder_hide_until',
+        moment().utc()
+          .add(1000, 'year')
+          .format('YYYY-MM-DD HH:mm:ss')
+      );
+    })
+    .render(parent);
+};
+
+/**
+ * Determine whether or not this card should be shown.
+ *
+ * @return {boolean} Whether or not to show the card.
+ */
+beestat.component.card.rate_app_reminder.should_show = function() {
+  return (
+    beestat.user.get().user_id === 1 &&
+    (
+      beestat.platform() === 'android' ||
+      beestat.platform() === 'ios'
+    ) &&
+    beestat.setting('meta.opens.' + beestat.platform()) > 10 &&
+    (
+      beestat.setting('ui.rate_app_reminder_hide_until') === undefined ||
+      moment.utc(beestat.setting('ui.rate_app_reminder_hide_until')).isBefore(moment.utc())
+    )
+  );
+};

js/js.php

@@ -95,6 +95,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd
   echo '<script src="/js/component/card/contribute_status.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/merchandise.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/card/visualize_video.js"></script>' . PHP_EOL;
+  echo '<script src="/js/component/card/rate_app_reminder.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/chart.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/chart/runtime_thermostat_summary.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/chart/temperature_profiles.js"></script>' . PHP_EOL;

js/layer/detail.js

@@ -55,6 +55,13 @@ beestat.layer.detail.prototype.decorate_ = function(parent) {
         'size': 12
       }
     ]);
+  } else if (beestat.component.card.rate_app_reminder.should_show() === true) {
+    cards.push([
+      {
+        'card': new beestat.component.card.rate_app_reminder(),
+        'size': 12
+      }
+    ]);
   }
 
   cards.push([

js/layer/load.js

@@ -162,6 +162,14 @@ beestat.layer.load.prototype.decorate_ = function(parent) {
       );
     }
 
+    // Increment the number of opens if under the threshold.
+    const setting_key = 'meta.opens.' + beestat.platform();
+    if (beestat.setting(setting_key) === undefined) {
+      beestat.setting(setting_key, 1);
+    } else {
+      beestat.setting(setting_key, beestat.setting(setting_key) + 1);
+    }
+
     // Change the active thermostat_id if the one you have is no longer valid.
     if (response.thermostat[beestat.setting('thermostat_id')] === undefined) {
       beestat.setting('thermostat_id', Object.keys(response.thermostat)[0]);

manifest.json

@@ -10,5 +10,12 @@
   "start_url": "/",
   "display": "standalone",
   "background_color": "#263238",
-  "theme_color": "#263238"
+  "theme_color": "#263238",
+  "prefer_related_applications": true,
+  "related_applications": [
+      {
+      "platform": "play",
+      "id": "io.beestat"
+      }
+  ]
 }