noflo-runtime-selector.html

<link rel="import" href="noflo-runtime-browserdebug.html">
<link rel="import" href="noflo-runtime-customiframe.html">
<polymer-element name="noflo-runtime-selector" attributes="graph" class="modal-content" on-click="{{ close }}">
  <template>
    <style>
      ul.runtimes {
        padding: 0px;
        margin-top: 36px;
        margin-left: -9px;
        margin-right: -9px;
        margin-bottom: 18px;
        list-style: none;
      }
      ul.runtimes li {
        width: 274px;
        height: 105px;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        background-color: hsl(192, 25%, 60%);
        color: white;
        transition: background-color 0.3s ease-in-out;
        border-radius: 3px;
        margin-right: 9px;
        margin-left: 9px;
        margin-bottom: 18px;
        position: relative;
        cursor: pointer;
      }
      ul.runtimes li.selected,
      ul.runtimes li:hover {
        background-color: hsl(190, 100%, 30%);
        color: white;
        cursor: default;
      }
      ul.runtimes li h2 {
        position: absolute;
        top: 36px;
        line-height: 36px;
        width: 180px;
        text-transform: none;
        font-size: 10px;
        text-align: left;
        white-space: nowrap;
        left: 18px;
        padding: 0px;
        margin: 0px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      ul.runtimes li p {
        position: absolute;
        top: 53px;
        left: 18px;
        width: 180px;
        text-transform: uppercase;
        font-size: 8px;
        text-align: left;
        max-height: 36px;
        overflow: hidden;
        color: hsl(189, 50%, 80%);
      }
    </style>
    <div class="modal-container" on-click="{{ bgClick }}">
      <h1>Select runtime for {{ graph.name }}</h1>
      <template if="{{ available.length }}">
        <ul class="runtimes">
          <template repeat="{{ runtime in available }}">
          <li on-click="{{ selectRuntime }}" data-id="{{ runtime.id }}" class="{{ runtime.type }}">
            <h2>{{ runtime.label }}</h2>
            <p>{{ runtime.address }}.<br />Seen {{ runtime.seenHoursAgo }}h ago</p>
          </li>
          </template>
        </ul>
      </template>
      <template if="{{ !available.length }}">
        <p>No compatible runtimes available.</p>
      </template>
      <div class="toolbar">
        <button on-click="{{ close }}">Cancel</button>
      </div>
    </div>
  </template>
  <script>
    Polymer('noflo-runtime-selector', {
      available: [],
      attached: function () {
        document.getElementById('container').classList.add('blur');
        var type = this.graph.properties.environment.type;

        // Insert button to launch new runtime for noflo-browser
        var launchNewBrowserRuntime = {
          id: 'new-browser-runtime',
          label: 'Launch new runtime',
          address: "WebRTC"
        };
        var customIframeRuntime = {
          id: 'custom-iframe-address',
          label: 'Custom iframe URL',
          address: "myapp.html"
        };
        var launchImgfloHerokuRuntime = {
          id: 'imgflo-heroku-new',
          label: 'New imgflo app on Heroku',
          address: "myapp.herokuapps.com"
        };

        if (type == 'noflo-browser') {
          this.available.push(launchNewBrowserRuntime);
          this.available.push(customIframeRuntime);
        }
        if (type == 'imgflo') {
           this.available.push(launchImgfloHerokuRuntime);
        }

        this.runtimes.forEach(function (rt) {
          if (!rt.type) {
            return;
          }
          if ((rt.type == type || type === 'all') && this.available.indexOf(rt) === -1) {
            this.available.push(rt);
          }
        }.bind(this));
        this.available.forEach(this.checkRuntimeSeen.bind(this));
      },
      detached: function () {
        document.getElementById('container').classList.remove('blur');
      },
      // similiar to in noflo-main.html
      checkRuntimeSeen: function (runtime) {
        if (!runtime.seen) {
          runtime.seen = Date.now();
        }
        runtime.seenHoursAgo = Math.floor((Date.now() - new Date(runtime.seen).getTime()) / (60*60*1000));
        if ((runtime.seenHoursAgo / 24) > 31) {
          // We haven't seen this runtime in over a month, don't show it
          var index = this.available.indexOf(runtime);
          this.available.splice(index,1);
        }
      },
      selectRuntime: function (event, details, sender) {
        var id = sender.getAttribute('data-id');
        if (id == 'new-browser-runtime') {
          // Launch new runtime instead of connect to existing
          this.close();
          this.debugOnDevice();
          return;
        } else if (id == 'custom-iframe-address') {
          // Add new iframe runtime for given address
          this.close();
          this.addIframeRuntime();
          return;
        } else if (id == 'imgflo-heroku-new') {
          this.close();
          this.deployHeroku("https://github.com/jonnor/imgflo");
        }
        this.runtimes.forEach(function (runtime) {
          if (runtime.id === id) {
            this.fire('runtime', runtime);
            this.close();
          }
        }.bind(this));
      },
      debugOnDevice: function () {
        this.debugOnDeviceModal = document.createElement('noflo-runtime-browserdebug');
        this.debugOnDeviceModal.graph = this.graph;
        this.debugOnDeviceModal.addEventListener('runtime', function (event) {
          var runtime = event.detail;
          this.fire('runtime', runtime);
        }.bind(this));
        document.body.appendChild(this.debugOnDeviceModal);
      },
      addIframeRuntime: function () {
        this.addIframeModal = document.createElement('noflo-runtime-customiframe');
        this.addIframeModal.graph = this.graph;
        this.addIframeModal.addEventListener('runtime', function (event) {
          var runtime = event.detail;
          this.fire('runtime', runtime);
        }.bind(this));
        document.body.appendChild(this.addIframeModal);
      },
      deployHeroku: function (template) {
        // Send user over to Heroku
        // The deployed runtime will then have a link which takes them back to Flowhub
        // TODO: inform the user about this process
        var baseUrl = "https://dashboard.heroku.com/new?template=";
        document.location.href = baseUrl + encodeURIComponent(template);
      },
      bgClick: function (event) {
        // Don't close if clicking within container
        event.stopPropagation();
      },
      close: function () {
        if (!this.parentNode) {
          return;
        }
        this.parentNode.removeChild(this);
      }
    });
  </script>
</polymer-element>