dennisharrison/app.html

## app.html
<head>
  <title>sosport</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>
</body>

## client-routes.js
Router.map(function() {
  this.route('home', {
    path: '/',
    controller: 'MediaController',
    action: 'customAction'
  });
  this.route('media_item_view', {
    path: '/media_item/:_id',
    data: function() { return Media.findOne(this.params._id); }
  });
});

Router.configure({
    layout: 'defaultLayout',
    notFoundTemplate: 'defaultNotFound',
    loadingTemplate: 'defaultLoading'
  });

  Subscriptions = {
    media: Meteor.subscribe('media')
  };

  MediaController = RouteController.extend({
    template: 'media_items',

    /*
     * During rendering, wait on the items subscription and show the loading
     * template while the subscription is not ready. This can also be a function
     * that returns on subscription handle or an array of subscription handles.
     */

    waitOn: Subscriptions['media'],

    /*
     * The data function will be called after the subscrition is ready, at
     * render time.
     */

    data: function () {
      // we can return anything here, but since I don't want to use 'this' in
      // as the each parameter, I'm just returning an object here with a named
      // property.
      return {
        media_items: Media.find({}, {sort: {timestamp: -1}})
      };
    },

    /*
     * By default the router will call the *run* method which will render the
     * controller's template (or the template with the same name as the route)
     * to the main yield area {{yield}}. But you can provide your own action
     * methods as well.
     */
    customAction: function () {

      /* render customController into the main yield */
      this.render('media_items');

      /*
       * You can call render multiple times. You can even pass an object of
       * template names (keys) to render options (values). Typically, the
       * options object would include a *to* property specifiying the named
       * yield to render to.
       *
       */

      // this.render({
      //   itemsAside: { to: 'aside', waitOn: false, data: false },
      //   itemsFooter: { to: 'footer', waitOn: false, data: false }
      // });
    }
  });

## templates-file_picker.html
<template name="file_picker">
<div id="ImageUploadBar" role="navigation" class="navbar navbar-default navbar-fixed-bottom">
<button id="CameraButton" type="button" class="btn btn-default navbar-btn btn-lg">
  <span class="glyphicon glyphicon-camera"></span>
</button>
<input id="FilePickerInput" class="hide" type=file />
</div>
</template>

## templates-layout.html
<template name="defaultLayout">
<div id="SoSportContentWrapper">
  {{loginButtons}}

  {{yield}}

 </div>
</template>

<template name="defaultLoading">
  <h1 id="LoadingNotice">Loading...</h1>
</template>

<template name="defaultNotFound">
  <h1>Not Found!</h1>
</template>

## templates-media_items.html
<template name="media_items">
  <div id="ImagesContainer">
  {{#each media_items}}
    {{> media_item_listing}}
  {{/each}}
  </div>
  {{> file_picker}}
</template>

<template name="media_item_listing">
  <img src="{{file_server_url}}{{this.name}}" class="sport_image"/>
</template>
	<head>
	<title>sosport</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	</head>

	<body>
	</body>
	Router.map(function() {
	this.route('home', {
	path: '/',
	controller: 'MediaController',
	action: 'customAction'
	});
	this.route('media_item_view', {
	path: '/media_item/:_id',
	data: function() { return Media.findOne(this.params._id); }
	});
	});

	Router.configure({
	layout: 'defaultLayout',
	notFoundTemplate: 'defaultNotFound',
	loadingTemplate: 'defaultLoading'
	});

	Subscriptions = {
	media: Meteor.subscribe('media')
	};

	MediaController = RouteController.extend({
	template: 'media_items',

	/*
	* During rendering, wait on the items subscription and show the loading
	* template while the subscription is not ready. This can also be a function
	* that returns on subscription handle or an array of subscription handles.
	*/

	waitOn: Subscriptions['media'],

	/*
	* The data function will be called after the subscrition is ready, at
	* render time.
	*/

	data: function () {
	// we can return anything here, but since I don't want to use 'this' in
	// as the each parameter, I'm just returning an object here with a named
	// property.
	return {
	media_items: Media.find({}, {sort: {timestamp: -1}})
	};
	},

	/*
	* By default the router will call the run method which will render the
	* controller's template (or the template with the same name as the route)
	* to the main yield area {{yield}}. But you can provide your own action
	* methods as well.
	*/
	customAction: function () {

	/* render customController into the main yield */
	this.render('media_items');

	/*
	* You can call render multiple times. You can even pass an object of
	* template names (keys) to render options (values). Typically, the
	* options object would include a to property specifiying the named
	* yield to render to.
	*
	*/

	// this.render({
	// itemsAside: { to: 'aside', waitOn: false, data: false },
	// itemsFooter: { to: 'footer', waitOn: false, data: false }
	// });
	}
	});
	<template name="file_picker">
	<div id="ImageUploadBar" role="navigation" class="navbar navbar-default navbar-fixed-bottom">
	<button id="CameraButton" type="button" class="btn btn-default navbar-btn btn-lg">
	<span class="glyphicon glyphicon-camera"></span>
	</button>
	<input id="FilePickerInput" class="hide" type=file />
	</div>
	</template>
	<template name="defaultLayout">
	<div id="SoSportContentWrapper">
	{{loginButtons}}

	{{yield}}

	</div>
	</template>

	<template name="defaultLoading">
	<h1 id="LoadingNotice">Loading...</h1>
	</template>

	<template name="defaultNotFound">
	<h1>Not Found!</h1>
	</template>
	<template name="media_items">
	<div id="ImagesContainer">
	{{#each media_items}}
	{{> media_item_listing}}
	{{/each}}
	</div>
	{{> file_picker}}
	</template>

	<template name="media_item_listing">
	<img src="{{file_server_url}}{{this.name}}" class="sport_image"/>
	</template>