pbl-add-btn.html

gistfile1.txt

<!-- GET button for mobile browsers to use the deep link -->
<button
  type="button"
  ng-if="isMobileBrowser"
  class="add-button app-install get-button"
  ng-click="app.openFromBrowser()">
  <span>Get</span>
</button>

<!-- Regular ADD button -->
<button
  ng-if="isWebview && app.type != 'companion-app' && app.compatible"
  ng-class="app.added ? 'app-added' : 'add-button app-install'"
  ng-click="app.hasPermissions ? app.showPermissionsModal = true : app.add($event)"
  ng-disabled="app.added">
    <div ng-if="app.loading" class="list-loading-dots">
      <div class="loading-dots" id="loading-dots_1"></div>
      <div class="loading-dots" id="loading-dots_2"></div>
      <div class="loading-dots" id="loading-dots_3"></div>
    </div>
    <span ng-if="!app.loading && !app.added">Add</span>
    <span ng-if="!app.loading && app.added">Added</span>
</button>

<!-- Companion app only GET button-->
<button
  type="button"
  ng-if="isWebview && app.type == 'companion-app' && app.compatible"
  ng-class="app.added ? 'app-added' : 'add-button app-install get-button'"
  ng-click="app.showModal = true; $event.preventDefault()">
    <span>Get</span>
</button>

<!-- Greyed out ADD button to show users their hardware is incompatible-->
<button
  type="button"
  ng-if="isWebview && !app.hardwareSupported"
  class="app-added"
  ng-click="
    app.showHardwareCompaptibilityModal = true;
    Analytics.logShowCompatibilityModal(app);
    $event.preventDefault()
  ">
  <span>Add</span>
</button>

<!-- Greyed out ADD button to show users their firmware is incompatible-->
<button
  type="button"
  ng-if="isWebview && app.hardwareSupported && !app.firmwareSupported"
  class="app-added"
  ng-click="
    app.showFirmwareCompaptibilityModal = true;
    Analytics.logShowFirmwareCompatibilityModal(app);
    $event.preventDefault()
  ">
  <span>Add</span>
</button>

<div ng-if="app.showModal" class="open-companion-modal-wrap" ng-click="$event.preventDefault()">
  <div class="open-companion-modal reveal-modal tiny show">
    <h4>Install Companion App</h4>
    <p>"{{::app.title}}" requires that you also install a Companion App.</p>
    <p>If you don&#8217;t install the companion app, the Pebble app may not work properly.</p>
    <div class="buttons text-center">
      <div class="button-wrap">
        <button  ng-click="app.showModal = false; $event.preventDefault()">
          Not now
        </button>
      </div>
      <div class="button-wrap">
        <button ng-click="app.showModal = false; app.getCompanion($event)">
          Go get it
        </button>
      </div>
    </div>
  </div>
</div>

<div ng-if="app.showHardwareCompaptibilityModal" class="open-companion-modal-wrap" ng-click="$event.preventDefault()">
  <div class="open-companion-modal reveal-modal tiny show">
    <h4>Sorry! This app is not compatible with your Pebble smartwatch.</h4>
    <p>In order to use this app you need to have one of the following devices:</p>
    <ul class="product-shots">
      <li ng-if="app.compatibility.aplite.supported">
        <a ng-click="$root.openExternal(storeUrl + '?utm_content=compatibility_modal&utm_source=appstore&utm_medium=referral&utm_campaign=appstore&utm_term={{app.title | lowercase | encodeuricomponent}}')">
          <img src="images/family-aplite.png" />
          <span>Pebble Steel/Classic</span>
        </a>
      </li>
      <li ng-if="app.compatibility.basalt.supported">
        <a ng-click="$root.openExternal(storeUrl + '?utm_content=compatibility_modal&utm_source=appstore&utm_medium=referral&utm_campaign=appstore&utm_term={{app.title | lowercase | encodeuricomponent}}')">
          <img src="images/family-basalt.png" />
          <span>Pebble Time/Time Steel</span>
        </a>
      </li>
      <li ng-if="app.compatibility.chalk.supported">
        <a ng-click="$root.openExternal(storeUrl + '?utm_content=compatibility_modal&utm_source=appstore&utm_medium=referral&utm_campaign=appstore&utm_term={{app.title | lowercase | encodeuricomponent}}')">
          <img src="images/family-chalk.png" />
          <span>Pebble Time Round</span>
        </a>
      </li>
      <li ng-if="app.compatibility.diorite.supported">
        <a ng-click="$root.openExternal(storeUrl + '?utm_content=compatibility_modal&utm_source=appstore&utm_medium=referral&utm_campaign=appstore&utm_term={{app.title | lowercase | encodeuricomponent}}')">
          <img src="images/family-diorite.png" />
          <span>Pebble 2</span>
        </a>
      </li>
      <li ng-if="app.compatibility.emery.supported">
        <a ng-click="$root.openExternal(storeUrl + '?utm_content=compatibility_modal&utm_source=appstore&utm_medium=referral&utm_campaign=appstore&utm_term={{app.title | lowercase | encodeuricomponent}}')">
          <img src="images/family-emery.png" />
          <span>Pebble Time 2</span>
        </a>
      </li>
    </ul>
    <div class="buttons text-center">
      <div class="button-wrap">
        <button ng-click="app.showHardwareCompaptibilityModal = false; $event.preventDefault()">
          Okay
        </button>
      </div>
    </div>
  </div>
</div>

<div ng-if="app.showFirmwareCompaptibilityModal" class="open-companion-modal-wrap">
  <div class="open-companion-modal reveal-modal tiny show">
    <h4>Sorry! This app is not compatible with your Pebble smartwatch.</h4>
    <p>In order to use this app you need to update your watch to firmware {{::app.minFirmware}} or newer.</p>
    <p>
      <a href="https://help.getpebble.com/customer/portal/articles/2219782-beta-firmware?b_id=8308"
        pbl-link
         id="firmware-compaptibility-modal-link"
         title="Firmare Incompatible Help Link"
         positio="0"
      >
        Show me how
      </a>
    </p>

    <div class="buttons text-center">
      <div class="button-wrap">
        <button ng-click="app.showFirmwareCompaptibilityModal = false; $event.preventDefault()">
          Okay
        </button>
      </div>
    </div>
  </div>
</div>

<div ng-if="app.showPermissionsModal" class="open-companion-modal-wrap" ng-click="$event.preventDefault()">
  <div class="open-companion-modal reveal-modal tiny show">
    <h4>Pebble Permissions</h4>
    <p>"{{::app.title}}" uses the Pebble Health service.</p>
    <p>It will have access to the activity and sleep data collected from your Pebble smartwatch.</p>
    <div class="buttons text-center">
      <div class="button-wrap">
        <button  ng-click="app.showPermissionsModal = false; $event.preventDefault()">
          Cancel
        </button>
      </div>
      <div class="button-wrap">
        <button ng-click="app.showPermissionsModal = false; app.add($event)">
          Add
        </button>
      </div>
    </div>
  </div>
</div>