myEventEmber

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Event Planning'
});

application.template.hbs

    <link rel="stylesheet" type="text/css" href="//cdn.cmich.edu/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.cmich.edu/css/fonts/fonts.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.cmich.edu/fonts/cmichIcons/cmich_icons.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.cmich.edu/css/applicationTemplate/web/flat/1.4.1/applicationTemplateFlat.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.cmich.edu/css/applicationTemplate/print/1.0.0/applicationTemplatePrint.min.css" media="print" />

<h1>Welcome to {{appName}}</h1>
<br>
<div class="pageContent_applicationBodyHolderInner">
{{my-events}}
</div>
<br>

my-events.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  firstName: "Jeff",
  lastName: "Blevins",
  myEvents: [],
  
  actions: {
     alert() {
         alert("Hello, I'm " + this.get('firstName') + " " + this.get('lastName') + ", the stuff!");
     },
     addEvent(event) {
                    this.myEvents.push(
                        {
                            id: event.Id,
                            urlId: '/Admin/Details/' + event.Id,
                            name: event.Name,
                            description: event.Description,
                            location: event.Location,
                            date: event.Date,
                            startTime: event.StartTime,
                            endTime: event.EndTime,
                            hasMeal: event.HasMeal,
                            mealDescription: event.MealDescription
                        })
                    console.log('event=', event);
                },
      findMyEvents () {

                    var that = this;
                    //clear old events
                    that.set('myEvents',[]);

                    $.ajax({
                        url: '@Url.Action("MyEventsAPI", "Home")',
                        dataType: 'json',
                        method: 'GET',
                        async: false,
                        data: { firstName: that.get('firstName'), lastName: that.get('lastName') },
                        success: function (data) {

                            var responseData = jQuery.parseJSON(data);
                            //console.log('dataReturned:', responseData);
                            for (i = 0; i < responseData.length; i++) {
                                //console.log('for loop', i, responseData[i]);
                                that.addEvent(responseData[i]);
                            }

                        }
                    });
                }
  }
});

my-events.template.hbs

<p>
        <a href="/Home" class="btn btn-default">
            <span class="glyphicon icon-cmich-arrow-left13" aria-hidden="true"></span>
        </a>
    </p>


    <h2>My Registrations Search</h2>
    <div class="alert alert-info" role="alert">
        Enter your first name and last name and click Find My Registrations to see what you've registered for in the past.
    </div>
       <form {{action 'findMyEvents'}}>

                <div class="row form-group">
                    <div class="col-md-6">
                        <label> First Name *</label>
                        {{input class="form-control text-box single-line" value=firstName placeholder="first"}}
                    </div>
                </div>

                <div class="row form-group">
                    <div class="col-md-6">
                        <label> Last Name *</label>
                        {{input class="form-control text-box single-line" value=lastName placeholder="last"}}
                    </div>
                </div>

                <div class="row form-group">
                    <div class="col-md-6">
                        <div class="col-md-offset-2">
                            <button type="submit" class="btn btn-maroon">
                                Find My Registrations
                            </button>
                        </div>
                    </div>
                </div>

            </form>
            
             <button {{action 'alert'}}>Alert</button>

            <table class="table">
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        Date
                    </th>
                    <th>
                        Location
                    </th>
                    <th>
                        Has Meal
                    </th>
                    <th>
                        Meal Description
                    </th>
                    <th>
                        Start Time
                    </th>
                    <th>
                        End Time
                    </th>
                    <th></th>
                </tr>
                
                {{#each myEvents as |event|}}
                <tr>
                    <td>
                        <span>{{event.name}}</span>
                    </td>
                    <td>
                        <span>{{event.description}}</span>
                    </td>
                    <td>
                        <span>{{event.date}}</span>
                    </td>
                    <td>
                        <span>{{event.location}}</span>
                    </td>
                    <td>
                        <span>{{event.hasMeal}}</span>
                    </td>
                    <td>
                        <span>{{event.mealDescription}}</span>
                    </td>
                    <td>
                        <span>{{event.startTime}}</span>
                    </td>
                    <td>
                        <span>{{event.endTime}}</span>
                    </td>
                    <td>
                        <a data-ng-href="/Admin/Details/{{event.id}}" class="btn btn-info"><i class="icon-cmich-microscope"></i></a>
                    </td>
                </tr>
                {{/each}}
                
             </table>

twiddle.json

{
  "version": "0.6.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.3.1/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}