cth-student-list.html

<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<script src="../bower_components/lodash/dist/lodash.js"></script>

<polymer-element name="cth-student-list" attributes="selectedStudent">

  <template>

    <style>
      :host {
        width: 400px;
        margin: 5px 0px 5px 10px; 
        font-family: 'Roboto', sans-serif;
      }

      table {
        border-collapse: collapse;
        background: #E5CF39;
      }


      tbody tr {
        border-bottom: 5px solid white;
      } 

      tr {
        height: 50px;
      }

      tbody tr:hover {
        color: white;
        background: #A5CC45;
      }

      td {
        padding: 15px 20px;
      }


      thead td {
        padding: 15px;
      }


      .person {
        height: 40px;
        vertical-align: center;
        padding: 0;
      }

      td.image {
        width: 20%;
      }
      
      .student-id {
        text-align: right;
      }
    </style>

    <core-ajax url="https://ast2014.firebaseio.com/students/.json" 
                  auto response="{{students}}">
    </core-ajax>

    <core-ajax url="https://ast2014.firebaseio.com/students/0/github.json" 
                  method="PUT"
                  auto body='{"githubID": "hEllo"}'
                  response="{{resp}}">
    </core-ajax>

    <table>
      <tbody>
        <template repeat="{{ student in students }}">
          <template if="{{student}}">
            <tr on-click="{{selectStudent}}"
                class="student-info"
                id="{{student.studentId}}">
              <td class="image"><img class="person" src="person.svg"/></td>
              <td>{{ student.firstName }} {{ student.lastName  }}</td>
              <td class="student-id">{{ student.studentId  }}</td>
            </tr>
          </template>
        </template>
      </tbody>
    </table>
  </template>

  <script>
    Polymer('cth-student-list', {
      selectStudent: function(event, detail, sender){
        var student = _.find(this.students, function(student){
          if(student){
            return student.studentId === sender.id;
          }
        });
        this.selectedStudent = student;
      }
    });
  </script>

</polymer-element>