Colorize the agenda

background.css

@@ -29,4 +29,16 @@ body,
     border: none;
     Background: none;
     box-shadow: none;
+}
+
+tr.past_event {
+    color: #6F6F6F;
+}
+
+tr.next_event {
+    color: #10AE00;
+}
+
+tr.future_event {
+    color: #BBBBBB;
 }

index.html

@@ -37,15 +37,35 @@
               <th>
                 Лекция
               </th>
+              <th>
+                Лектор
+              </th>
             </tr>
           </thead>
           <tbody>
-            {{#agenda}}
+            {{#pastEvents}}
-            <tr>
+            <tr class="past_event">
               <td>{{startTime.format('HH:mm')}}</td>
               <td>{{title}}</td>
+              <td>{{lecturer.name}}</td>
             </tr>
-            {{/agenda}}
+            {{/pastEvents}}
+
+            {{#nextEvent}}
+            <tr class="next_event">
+              <td>{{startTime.format('HH:mm')}}</td>
+              <td>{{title}}</td>
+              <td>{{lecturer.name}}</td>
+            </tr>
+            {{/nextEvent}}
+
+            {{#futureEvents}}
+            <tr class="future_event">
+              <td>{{startTime.format('HH:mm')}}</td>
+              <td>{{title}}</td>
+              <td>{{lecturer.name}}</td>
+            </tr>
+            {{/futureEvents}}
           </tbody>
         </table>
       </section>
@@ -54,17 +74,17 @@
     <script id="next_lecture_template" type="text/reactive">
       <section id="next-lecture">
         <h3>Следва</h3>
-        <h1>{{event.title}}</h1>
+        <h1>{{nextEvent.title}}</h1>
-        <p>{{event.description}}</p>
+        <p>{{nextEvent.description}}</p>
-        <h4>({{event.startTime.fromNow()}})</h4>
+        <h4>({{nextEvent.startTime.fromNow()}})</h4>
       </section>
     </script>
 
     <script id="next_lecturer_template" type="text/reactive">
       <section id="next-lecturer">
         <h3>Лектор</h3>
-        <h1>{{event.lecturer.name}}</h1>
+        <h1>{{nextEvent.lecturer.name}}</h1>
-        <p>{{event.lecturer.description}}</p>
+        <p>{{nextEvent.lecturer.description}}</p>
       </section>
     </script>
 
@@ -73,17 +93,17 @@
         <img src="logo.svg">
       </section>
 
-      {{#agenda.length}}
+      {{#eventCount}}
         {{> agenda_template}}
-      {{/agenda.length}}
+      {{/eventCount}}
 
-      {{#event}}
+      {{#nextEvent}}
         {{> next_lecture_template}}
-      {{/event}}
+      {{/nextEvent}}
 
-      {{#event.lecturer}}
+      {{#nextEvent.lecturer}}
         {{> next_lecturer_template}}
-      {{/event.lecturer}}
+      {{/nextEvent.lecturer}}
 
       <section>
         <h1>#PlovdivConf</h1>

reactive-init.js

@@ -7,9 +7,15 @@ var reactive = new Ractive({
     template: '#slides_template',
 
     // Here, we're passing in some initial data
-    data: {event: schedule.nextEvent(), agenda: schedule.getEvents()}
+    data: {pastEvents: schedule.pastEvents(),
+           nextEvent: schedule.nextEvent(),
+           futureEvents: schedule.futureEvents(),
+           eventCount: schedule.allEvents().length}
 });
 
 function refreshEvent() {
-    reactive.set({event: schedule.nextEvent(), agenda: schedule.getEvents()});
+    reactive.set({pastEvents: schedule.pastEvents(),
+                  nextEvent: schedule.nextEvent(),
+                  futureEvents: schedule.futureEvents(),
+                  eventCount: schedule.allEvents().length});
 }

schedule.js

@@ -18,7 +18,17 @@ function Schedule() {
         return _.first(this.upcomingEvents());
     }
 
-    this.getEvents = function() {
+    this.futureEvents = function() {
+        return this.upcomingEvents().splice(1);
+    }
+
+    this.pastEvents = function() {
+        return _.select(events, function(event) {
+            return event.startTime.isBefore(moment());
+        });
+    }
+
+    this.allEvents = function() {
         return events;
     }