spincycle/example/app/elements/main-app/main-app.html

A reactive message router and object manager that lets clients subscribe to object property changes on the server

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-input/iron-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<link rel="import" href="../../elements/message-router/message-router.html">

<polymer-element name="main-app" attributes="">
  <template>

    <message-router io="{{socket}}"></message-router>
    <link rel="stylesheet" href="main-app.css">
    <div>
        <paper-button raised fill on-click="{{newGame}}">New Game</paper-button>
    </div>
      <div if="{{selectedgame}}">
          Selected Game: {{selectedgame.name}}
          Players:
      </div>
    Games:
    <ul id="gamelist">
        <template repeat="{{game in generatedgames}}">
            <li>
                <input is="iron-input" gameid="{{game.id}}" value="{{game.name}}" on-change="{{onGameNameChange}}"> </input> <paper-button raised on-click="{{selectGame}}" gameid="{{game.id}}">Select</paper-button>
            </li>
        </template>
    </ul>
    <div>
        Update from server:{{update}}
    </div>

  </template>
  <script>
    (function () {

      Polymer({
        ready: function ()
        {
            console.log('main app starting up');
            this.socket = io();
            this.asyncFire('iron-signal', {name: "emit", data: {target:'listGames', callback: this.onListGames.bind(this) }});
        },

      gameById: function(id)
      {
          return this.games.filter(function(g) { return g.id == id })[0];
      },

        newGame: function()
        {
            console.log('new game clicked');
            this.asyncFire('iron-signal', {name: "emit", data: {target:'newGame', callback: this.onNewGame.bind(this) }});
        },

        onNewGame: function(reply)
        {
            console.log('onNewGame called. reply is');
            console.dir(reply);
            this.asyncFire('iron-signal', {name: "emit", data: {target:'listGames', callback: this.onListGames.bind(this) }});
        },

        onListGames: function(games)
        {
            console.log("onGamesList called with ");
            console.dir(games);
            this.gameids = games;
            this.generatedgames = [];
            this.gameids.forEach(function(gameid)
            {
                this.asyncFire('iron-signal', {name: "emit", data: {target:'_getSampleGame', obj:{id: gameid, type: 'samplegame'}, callback: this.onGameDetails.bind(this) } });
            }.bind(this))
        },

        onGameDetails: function(msg)
        {
            console.log('got game details');
            console.dir(msg);
            this.generatedgames.push(msg)
        },

        onGameNameChange: function(e, detail, el)
        {
          console.log("onGameNameChange called");
          var name = el.value;
          var gameid = el.attributes['gameid'].value;
          console.log("new name is "+name);
          this.asyncFire('iron-signal', {name: "emit", data: {target:'updateObject', obj: {id: gameid, type: 'samplegame', name: name }, callback: function(msg) { console.log('updatedObject said:');console.dir(msg); }} });
        },

        selectGame: function(e, detail, el)
        {
          console.log("selectGame called");
          var gameid = el.attributes['gameid'].value;
          console.log("gameid = "+gameid);
          this.selectedgame = this.gameById(gameid);
          this.asyncFire('iron-signal', {name: "objectsubscribe", data: {obj:{id: this.selectedgame.id, type: 'samplegame'}, callback: this.onGameUpdate.bind(this) } });
        },

        onGameUpdate: function(game)
        {
          console.log("onGameUpdate called. game is "+game);
          console.dir(game);
          this.selectedgame = game;
          this.update = JSON.stringify(game);
        }

      });
    })();
  </script>
</polymer-element>