├── .gitignore
├── app
    ├── stores
    │   └── registry.js
    ├── app.js
    └── components
    │   ├── calendar
    │       ├── calendar.js
    │       └── calendar.html
    │   └── calendar-cell
    │       ├── calendar-cell.html
    │       └── calendar-cell.js
├── README.md
├── package.json
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /deps/ng
3 | Todo.md
4 | node_modules/
5 | .*.sw*
6 | .idea
7 | 


--------------------------------------------------------------------------------
/app/stores/registry.js:
--------------------------------------------------------------------------------
 1 | var cells = [];
 2 | 
 3 | export function addCell(cell) {
 4 |   cells.push(cell);
 5 | }
 6 | 
 7 | export function searchAllCells() {
 8 |   for (var i=0; i<cells.length; i++) {
 9 |     cells[i].cellClicked();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/app/app.js:
--------------------------------------------------------------------------------
1 | import {bootstrap, ChangeDetection, jitChangeDetection} from 'angular2/angular2';
2 | import {bind} from 'angular2/di';
3 | import {Calendar} from 'components/calendar/calendar';
4 | import {CalendarCell} from 'components/calendar-cell/calendar-cell';
5 | 
6 | export function main() {
7 |   return bootstrap(Calendar, [bind(ChangeDetection).toValue(jitChangeDetection)]);
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is just a demo of an Angular2 calendar search app. It's only useful to show how to use Angular2.
 2 | 
 3 | To run it:
 4 | 
 5 |  - Clone this repo
 6 |  - `npm install -g http-server`
 7 |  - `cd angular2_calendar`
 8 |  - `npm install`
 9 |  - `http-server -c-1`
10 |  - Go to http://localhost:8080 in your browser
11 |  - Click the "Load" button.
12 |  - Click the "Search all Month" button.
13 | 
14 | Note that this example does es6-to-es5 transpilation in the browser at runtime, so the initial page load is very slow as a result. Once it loads, things go quite fast.
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "calendar_demo",
 3 |   "version": "0.0.1",
 4 |   "description": "Calendar app using Angular 2.0",
 5 |   "main": "main.js",
 6 |   "dependencies": {
 7 |     "angular2": "2.0.0-alpha.13",
 8 |     "es6-module-loader": "0.14.0",
 9 |     "hammerjs": "2.0.4",
10 |     "lodash": "3.4.0",
11 |     "rtts_assert": "2.0.0-alpha.8",
12 |     "systemjs": "0.14.1",
13 |     "traceur": "0.0.85",
14 |     "zone.js": "0.4.0"
15 |   },
16 |   "devDependencies": {},
17 |   "scripts": {
18 |     "test": "echo \"Error: no test specified\" && exit 1"
19 |   },
20 |   "author": "",
21 |   "license": "MIT"
22 | }


--------------------------------------------------------------------------------
/app/components/calendar/calendar.js:
--------------------------------------------------------------------------------
 1 | import {Component, Foreach, Template, If} from 'angular2/angular2';
 2 | import {CalendarCell} from 'components/calendar-cell/calendar-cell';
 3 | import {searchAllCells} from 'stores/registry';
 4 | import _ from '../../node_modules/lodash/index';
 5 | 
 6 | var DAYS = _.range(1, 32).map((day) => ("Oct " + day));
 7 | 
 8 | @Component({
 9 |   selector: 'calendar',
10 | })
11 | @Template({
12 |   url: System.baseURL+'app/components/calendar/calendar.html',
13 |   directives: [
14 |     Foreach,
15 |     If,
16 |     CalendarCell
17 |   ]
18 | })
19 | export class Calendar {
20 |   constructor() {
21 |     this.hours = _.range(24);
22 |     this.days = DAYS;
23 |     this.isLoaded = false;
24 |   }
25 |   load() {
26 |     this.isLoaded = true;
27 |   }
28 |   searchAll() {
29 |     searchAllCells();
30 |   }
31 |   dayHeaderClicked() {
32 |     alert('dayHeaderClicked()');
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/app/components/calendar-cell/calendar-cell.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .searching {
 3 |     color: blue;
 4 |     font-size: 10px;
 5 |     padding-top: 6px; /* poor man's vertical centering */
 6 |   }
 7 |   .goodresults {
 8 |     color: #090;
 9 |     background: #efffef;
10 |   }
11 | 
12 |   .result-label {
13 |     font-size: 8px;
14 |   }
15 | 
16 |   .weakresults {
17 |     color: orange;
18 |     background: #ffffef;
19 |   }
20 | 
21 |   .badresults {
22 |     color: red;
23 |     background: #ffefef;
24 |   }
25 | 
26 |   :hover {
27 |     background-color: #559 !important;
28 |     color: white;
29 |   }
30 | </style>
31 | 
32 | <div
33 |   [class.goodresults]="status.searchResults.options > 3"
34 |   [class.weakresults]="status.searchResults.options >= 1 && status.searchResults.options <= 3"
35 |   [class.badresults]="status.searchResults.options == 0"
36 |   [class.searching]="status.isSearching"
37 |   >
38 |   <div *if="showSpinner()">
39 |     ...
40 |   </div>
41 |   <div *if="showTime()" (click)="cellClicked()" class="time">
42 |     {{hour}}:00
43 |   </div>
44 |   <div *if="showSearchResults()">
45 |     <div>{{status.searchResults.options}}</div>
46 |     <div class="result-label">results</div>
47 |   </div>
48 | </div>
49 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>Angular2 Example</title>
 5 |   <style>
 6 |     body {
 7 |       font-family: arial;
 8 |     }
 9 |   </style>
10 | 
11 |   <script src="/node_modules/traceur/bin/traceur.js"></script>
12 |   <script src="/node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.js"></script>
13 |   <script src="/node_modules/systemjs/dist/system.js"></script>
14 |   <script src="/node_modules/zone.js/zone.js"></script>
15 |   <script src="/node_modules/zone.js/long-stack-trace-zone.js"></script>
16 | 
17 |   <script>
18 |       // atscript without runtime-type assertions.
19 |       System.traceurOptions = {
20 |         annotations: true,
21 |         memberVariables: true,
22 |         typeAssertions: false,
23 |         types: true
24 |       };
25 | 
26 |     System.config({
27 |       baseURL: '/',
28 |       paths: {
29 |         'angular2/*':'/node_modules/angular2/es6/prod/*.es6',
30 |         'app/*': 'app/*',
31 |         'components/*': 'app/components/*.js',
32 |         'decorators/*': 'app/decorators/*.js',
33 |         'services/*': 'app/services/*.js',
34 |         'stores/*': 'app/stores/*.js'
35 |       },
36 |     });
37 | 
38 |     System.import('app/app.js')
39 |     .then(function(module) {
40 |       // uncomment for debugging.
41 |       // zone = zone.fork(Zone.longStackTraceZone);
42 |       return module.main();
43 |     })
44 |     .catch(console.error.bind(console));
45 |   </script>
46 | </head>
47 | <body>
48 | 
49 |   <h1>Angular2 Example</h1>
50 |   <calendar></calendar>
51 | 
52 | </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/app/components/calendar/calendar.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   table {
 3 |     border-right: 2px solid gray;
 4 |     border-spacing: 0;
 5 |     border-collapse: collapse;
 6 |   }
 7 |   .day-header {
 8 |     border: 1px solid gray;
 9 |     white-space: nowrap
10 |   }
11 | 
12 |   .day-header:hover {
13 |     cursor: pointer;
14 |   }
15 | 
16 |   .hour-cell:hover {
17 |     background-color: #559 !important;
18 |     color: white;
19 |   }
20 | 
21 |   .hour-cell {
22 |     width: 120px;
23 |     text-align: center;
24 |     border-left: 1px solid gray;
25 |     border-bottom: 1px solid #eee;
26 |     cursor: pointer;
27 |     height: 30px;
28 |     padding: 0;
29 |   }
30 | 
31 |   .hour-cell > div {
32 |     height: 100%;
33 |   }
34 | 
35 |   .hour-cell .time {
36 |     padding-top: 10px; /* poor man's vertical centering */
37 |   }
38 | 
39 |   .hour-cell .searching {
40 |     color: blue;
41 |     font-size: 12px;
42 |     padding-top: 12px; /* poor man's vertical centering */
43 |   }
44 | 
45 |   .hour-cell .good-results {
46 |     color: #090;
47 |     background: #efffef;
48 |   }
49 | 
50 |   .hour-cell .weak-results {
51 |     color: orange;
52 |     background: #ffffef;
53 |   }
54 | 
55 |   .hour-cell .bad-results {
56 |     color: red;
57 |     background: #ffefef;
58 |   }
59 | </style>
60 | 
61 | <div class="calendar">
62 |  <button class="btn" *if="!isLoaded" (click)="load()">Load</button>
63 |  <button class="btn" *if="isLoaded"  (click)="searchAll()">Search all month</button>
64 |  <table *if="isLoaded">
65 |   <tr>
66 |     <th template="foreach: #day in days" class="day-header" (click)="dayHeaderClicked(day)">
67 |      {{day}}
68 |    </th>
69 |   </tr>
70 |   <tr template="foreach: #hour in hours">
71 |    <td template="foreach: #day in days" class="hour-cell">
72 |      <calendar-cell [hour]="hour" [day]="day" />
73 |    </td>
74 |   </tr>
75 |  </table>
76 | </div>
77 | 


--------------------------------------------------------------------------------
/app/components/calendar-cell/calendar-cell.js:
--------------------------------------------------------------------------------
 1 | import {Component, Foreach, Template, If} from 'angular2/angular2';
 2 | import {addCell} from 'stores/registry';
 3 | import {BindingPropagationConfig} from 'angular2/core';
 4 | 
 5 | var randomMillis = function() {
 6 |   //return 0;
 7 |   return Math.floor(Math.random() * 500);
 8 | }
 9 | 
10 | @Component({
11 |   selector: 'calendar-cell',
12 |   bind: {
13 |     hour: 'hour',
14 |     day: 'day'
15 |   }
16 | })
17 | @Template({
18 |   url: System.baseURL+'app/components/calendar-cell/calendar-cell.html',
19 |   directives: [
20 |     Foreach, If
21 |   ]
22 | })
23 | export class CalendarCell {
24 | 	bpc;
25 | 
26 |   constructor(bpc:BindingPropagationConfig) {
27 |     this.isPure = true;
28 |     this.bpc = bpc;
29 |     if (this.isPure) this.bpc.shouldBePropagated();
30 | 
31 |     addCell(this);
32 |     this.status = {
33 |       isSearching: false,
34 |       searchResults: {
35 |         options: null
36 |       }
37 |     }
38 |   }
39 |   cellClicked() {
40 |     var alreadySearching = this.status.isSearching;
41 |     this.status.searchResults.options = null;
42 |     this.status.isSearching = !alreadySearching;
43 |     if (!alreadySearching) {
44 |       // Simulate an AJAX request:
45 |       var self = this;
46 |       self.isSearching = true;
47 |       if (this.isPure) this.bpc.shouldBePropagated();
48 |       setTimeout(() => {
49 |         self.status.isSearching = false;
50 |         self.status.searchResults.options = Math.floor(Math.random() * 5);
51 |         if (this.isPure) this.bpc.shouldBePropagated();
52 |       }, randomMillis());
53 |     }
54 |   }
55 |   showSpinner() {
56 |     return this.status.isSearching;
57 |   }
58 |   hideSpinner() {
59 |     return !this.status.isSearching;
60 |   }
61 |   showTime() {
62 |     return !this.status.isSearching && this.status.searchResults.options === null;
63 |   }
64 |   showSearchResults() {
65 |     return !this.status.isSearching && this.status.searchResults.options !== null;
66 |   }
67 | }
68 | 
69 | 


--------------------------------------------------------------------------------