Adds sessions layout public event

app/components/public/session-filter.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+
+  actions: {
+    filter(trackId = null) {
+      this.set('selectedTrackId', trackId);
+    }
+  }
+});

app/components/public/session-item.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  classNames: ['ui', 'segment']
+});

app/components/public/session-list.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+});

app/controllers/public/sessions.js

@@ -0,0 +1,30 @@
+import Ember from 'ember';
+import { chain } from 'lodash';
+
+const { Controller, computed } = Ember;
+
+export default Controller.extend({
+  sessions: [{ session_type: { length: '11:00', id: 12, name: 'Talk' }, shortAbstract: 'An introduction to the event', id: '1', title: 'Welcome to FOSSASIA', startAt: new Date(), endAt: new Date(), track: { color: 'green', fontColor: 'green', id: 1, name: 'Track 1' }, microlocation: { id: 2, name: 'Room 1' }, speakers: [{ shortBiography: 'Works for ORG 1', id: 0, city: 'Delhi', name: 'Arnold Singh', speakingExperience: 'GSOC 2015', organisation: 'ORG 1', longBiography: '', photo: { 'iconImageUrl': '' } }] },
+  { session_type: { length: '15:00', id: 11, name: 'Talk' }, shortAbstract: 'Welcome to open source', id: '2', title: 'Introduction to Open source', startAt: new Date(), endAt: new Date(), track: { color: 'red', fontColor: 'white', id: 2, name: 'Track 2' }, microlocation: { id: 3, name: 'Room 5' }, speakers: [{ shortBiography: '', id: 0, city: 'Delhi', name: 'Tux', speakingExperience: 'Speaker at the high conference', organisation: 'ORG 2', longBiography: '', photo: { 'iconImageUrl': '' } }] }
+  ],
+  sessionsByTracks: computed('sessions.[]', 'selectedTrackId', function() {
+    if (this.get('selectedTrackId')) {
+      return chain(this.get('sessions'))
+        .filter(['track.id', this.get('selectedTrackId')])
+        .orderBy(['track.name', 'startAt'])
+        .value();
+    } else {
+      return chain(this.get('sessions'))
+        .orderBy(['track.name', 'startAt'])
+        .groupBy('track.name')
+        .value();
+    }
+  }),
+  tracks: computed('sessions.[]', function() {
+    return chain(this.get('sessions'))
+      .map('track')
+      .uniqBy('id')
+      .orderBy('name')
+      .value();
+  })
+});

app/styles/pages/public-event.scss

@@ -99,4 +99,8 @@
   .tickets {
     margin-bottom: 20px;
   }
+
+  .session-container {
+    margin-top: 15px;
+  }
 }

app/templates/components/public/session-filter.hbs

@@ -0,0 +1,10 @@
+<div class="ui secondary menu">
+  <a href="#" class="item {{unless selectedTrackId 'active'}}" {{action 'filter'}}>
+    All
+  </a>
+  {{#each-in tracks as |id track|}}
+    <a href="#" class="item {{if (eq selectedTrackId track.id) 'active'}}" {{action 'filter' track.id}}>
+      {{track.name}}
+    </a>
+  {{/each-in}}
+</div>

app/templates/components/public/session-item.hbs

@@ -0,0 +1,54 @@
+{{#ui-accordion}}
+  <div class="title">
+    <div class="ui">
+      <h3 class="ui header">
+        {{session.title}}
+        <div class="sub header">
+          {{session.sessionType.name}}
+        </div>
+      </h3>
+      <div class="ui row">Talk</div>
+    </div>
+    <br>
+    <div class="ui grid">
+      <div class="row">
+        <div class="column twelve wide">
+          <div class="session-speakers">
+            {{#each session.speakers as |speaker|}}
+              <img alt="speaker" class="ui mini avatar image" src="{{if speaker.photo.iconImageUrl speaker.image '/images/placeholders/avatar.png'}}">
+            {{/each}}
+          </div>
+        </div>
+        <div class="ui right aligned column four wide" style="padding-left: 0">
+          <div class="">{{session.microlocation.name}} <i class="marker icon"></i></div>
+          <div class="">{{moment-format session.startAt 'hh:mm a / DD-MM-YYYY'}} <i class="wait icon"></i></div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="column session-description">
+          {{session.shortAbstract}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="content">
+    {{#each session.speakers as |speaker|}}
+      <h3 class="ui header">About {{speaker.name}}:</h3>
+      <p>
+        {{#if speaker.shortBiography}}
+          {{speaker.shortBiography}}
+        {{else if speaker.longBiography}}
+          {{speaker.longBiography}}
+        {{else}}
+          {{speaker.speakingExperience}}
+        {{/if}}
+      </p>
+      <div class="social-icons">
+        <a href="#" target="_blank" rel="noopener noreferrer"><i class="facebook f icon"></i>Facebook</a>
+        <a href="#" target="_blank" rel="noopener noreferrer"><i class="linkedin f icon"></i>Linkedin</a>
+        <a href="#" target="_blank" rel="noopener noreferrer"><i class="twitter icon"></i>Twitter</a>
+        <a href="#" target="_blank" rel="noopener noreferrer"><i class="github icon"></i>Github</a>
+      </div>
+    {{/each}}
+  </div>
+{{/ui-accordion}}

app/templates/components/public/session-list.hbs

@@ -0,0 +1,15 @@
+<div class="ui session-container">
+  {{#if (is-array sessions)}}
+    <h3 class="ui header">{{track}}</h3>
+    {{#each sessions as |session|}}
+      {{public/session-item session=session}}
+    {{/each}}
+  {{else}}
+    {{#each-in sessions as |track trackSession|}}
+      <h3 class="ui header">{{track}}</h3>
+      {{#each trackSession as |session|}}
+        {{public/session-item session=session}}
+      {{/each}}
+    {{/each-in}}
+  {{/if}}
+</div>

app/templates/public/sessions.hbs

@@ -1 +1,4 @@
-{{outlet}}
+<h2 class="ui header">Sessions</h2>
+{{public/session-filter selectedTrackId=selectedTrackId tracks=tracks}}
+
+{{public/session-list sessions=sessionsByTracks}}

tests/integration/components/public/session-filter-test.js

@@ -0,0 +1,13 @@
+import { test } from 'ember-qunit';
+import moduleForComponent from 'open-event-frontend/tests/helpers/component-helper';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('public/session-filter', 'Integration | Component | public/session filter');
+
+const tracks = { '1': { name: 'Track 1', id: '1' } };
+
+test('it renders', function(assert) {
+  this.set('tracks', tracks);
+  this.render(hbs `{{public/session-filter tracks=tracks}}`);
+  assert.ok(this.$().html().trim().includes('Track'));
+});

tests/integration/components/public/session-item-test.js

@@ -0,0 +1,13 @@
+import { test } from 'ember-qunit';
+import moduleForComponent from 'open-event-frontend/tests/helpers/component-helper';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('public/session-item', 'Integration | Component | public/session item');
+
+const session = { session_type: { length: '11:00', id: 12, name: 'Talk' }, shortAbstract: 'An introduction to the event', id: '1', title: 'Welcome to FOSSASIA', startAt: '10:35 AM / 17-03-2017', track: { color: 'green', fontColor: 'green', id: 0, name: 'Track 1' }, microlocation: { id: 0, name: 'Room 1' }, speakers: [{ shortBiography: 'Works for ORG 1', id: 0, city: 'Delhi', name: 'Arnold Singh', speakingExperience: 'GSOC 2015', organisation: 'ORG 1', longBiography: '', photo: { 'iconImageUrl': '' } }] };
+
+test('it renders', function(assert) {
+  this.set('session', session);
+  this.render(hbs `{{public/session-item session=session}}`);
+  assert.ok(this.$().html().trim().includes('Room 1'));
+});

tests/integration/components/public/session-list-test.js

@@ -0,0 +1,13 @@
+import { test } from 'ember-qunit';
+import moduleForComponent from 'open-event-frontend/tests/helpers/component-helper';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('public/session-list', 'Integration | Component | public/session list');
+
+const sessions = { 'Track 1': [{ session_type: { length: '11:00', id: 12, name: 'Talk' }, shortAbstract: 'An introduction to the event', id: '1', title: 'Welcome to FOSSASIA', startAt: '10:35 AM / 17-03-2017', track: { color: 'green', fontColor: 'green', id: 1, name: 'Track 1' }, microlocation: { id: 0, name: 'Room 1' }, speakers: [{ shortBiography: 'Works for ORG 1', id: 0, city: 'Delhi', name: 'Arnold Singh', speakingExperience: 'GSOC 2015', organisation: 'ORG 1', longBiography: '', photo: { 'iconImageUrl': '' } }] }] };
+
+test('it renders', function(assert) {
+  this.set('sessions', sessions);
+  this.render(hbs `{{public/session-list sessions=sessions}}`);
+  assert.ok(this.$().html().trim().includes('Track'));
+});

tests/unit/controllers/public/sessions-test.js

@@ -0,0 +1,9 @@
+import { test } from 'ember-qunit';
+import moduleFor from 'open-event-frontend/tests/helpers/unit-helper';
+
+moduleFor('controller:public/sessions', 'Unit | Controller | public/sessions');
+
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});