Mercurial > code > home > repos > homeauto

<!doctype html>
<html>
  <head>
    <title>pilight</title>
    <meta charset="utf-8" />
    <script src="//bigasterisk.com/lib/jquery-2.0.3.js"></script>
    <script src="//bigasterisk.com/lib/platform/0.2.3/platform.js"></script>
    <link rel="import" href="static/input-rgb/input-rgb.html">
    <style>
      input-rgb {
       border: 1px solid gray;
       width: 300px;
     }
    </style>
  </head>
  <body>

    <polymer-element name="led-output" attributes="url color">
    <!-- calls PUT <url> with color string as the body, but also
         avoids sending many repeated calls to url while the first one
         is still in progress -->
      <template>
        {{status}}
      </template>
      <script>Polymer('led-output', {
          created: function() {
              this.pending = {}; // url: data
              this.inflight = false;
          },
          colorChanged: function() {
              this.pending["led"] = this.color;
              this.sendMore();
          },
          sendMore: function() {
              if (this.inflight) {
                  return;
              }
              var urls = Object.keys(this.pending);
              if (!urls.length) {
                  return;
              }
              var url = urls.pop();
              var data = this.pending[url];
              delete this.pending[url];

              this.status = "Sending...";
              this.inflight = true;
              $.ajax({
                  type: "PUT",
                  url: url,
                  data: data,
                  success: function() {
                      this.status = "";
                  }.bind(this),
                  error: function() {
                      this.status = "Send failed";
                  }.bind(this),
                  complete: function() {
                      this.inflight = false;
                      this.sendMore();
                  }.bind(this)
              });
        }
      });
      </script>

    </polymer-element>

    <polymer-element name="pilight-page" noscript>
      <template>
        LED0 color:
        <input-rgb editable="true" hex="{{c1}}"></input-rgb>
        <led-output which="led" color="{{c1}}"></led-output>
      </template>
    </polymer-element>

    <pilight-page></pilight-page>


  </body>
</html>
author	drewp@bigasterisk.com
date	Sat, 12 Jul 2014 11:31:40 -0700
parents
children	7233fdb6b30a