initial dummy version of calendar

.angular-cli.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "reactive-calendar"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

README.md

@@ -1,2 +1,28 @@
-# reactive-calendar
-Project for blogpost on how to think reactive
+# ReactiveCalendar
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "reactive-calendar",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "4.2.6",
+    "@angular/common": "4.2.6",
+    "@angular/compiler": "4.2.6",
+    "@angular/core": "4.2.6",
+    "@angular/forms": "4.2.6",
+    "@angular/http": "4.2.6",
+    "@angular/material": "2.0.0-beta.7",
+    "@angular/platform-browser": "4.2.6",
+    "@angular/platform-browser-dynamic": "4.2.6",
+    "@angular/router": "4.2.6",
+    "angularfire2": "^4.0.0-rc.1",
+    "core-js": "2.4.1",
+    "firebase": "^4.1.3",
+    "lodash": "^4.17.4",
+    "moment": "^2.18.1",
+    "promise-polyfill": "^6.0.2",
+    "rxjs": "5.4.2",
+    "zone.js": "0.8.4"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.0.1",
+    "@angular/compiler-cli": "4.2.6",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "6.0.60",
+    "codelyzer": "2.0.0",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "3.2.0",
+    "karma": "1.4.1",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-cli": "1.0.1",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "karma-coverage-istanbul-reporter": "0.2.0",
+    "protractor": "5.1.0",
+    "ts-node": "2.0.0",
+    "tslint": "4.5.0",
+    "typescript": "2.4.1"
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,62 @@
+import 'rxjs';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import {
+    MdButtonModule,
+    MdCardModule,
+    MdIconModule,
+    MdInputModule,
+    MdToolbarModule,
+    MdTooltipModule
+} from '@angular/material';
+import { AppComponent } from './containers/app/app.component';
+import { DayViewComponent } from './components/day-view/day-view.component';
+import { WeekViewComponent } from './components/week-view/week-view.component';
+import { MonthViewComponent } from './components/month-view/month-view.component';
+import { DayDetailComponent } from './components/day-detail/day-detail.component';
+import { TopbarComponent } from './components/topbar/topbar.component';
+import { AngularFireModule } from 'angularfire2';
+import { AngularFireAuthModule } from 'angularfire2/auth';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+// replace this config here with the one from firebase
+export const firebaseConfig = {
+    apiKey: '',
+    authDomain: '',
+    databaseURL: '',
+    projectId: '',
+    storageBucket: '',
+    messagingSenderId: ''
+};
+
+@NgModule({
+    declarations: [
+        AppComponent,
+        DayViewComponent,
+        WeekViewComponent,
+        MonthViewComponent,
+        DayDetailComponent,
+        TopbarComponent
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        BrowserAnimationsModule,
+        MdCardModule,
+        MdButtonModule,
+        MdInputModule,
+        MdTooltipModule,
+        MdToolbarModule,
+        MdIconModule,
+        AngularFireModule.initializeApp(firebaseConfig, 'reactive-calendar'),
+        AngularFireAuthModule,
+        AngularFireDatabaseModule
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

src/app/components/day-detail/day-detail.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Appointment } from '../../types/appointment.type';
+import * as moment from 'moment';
+@Component({
+    selector: 'day-detail',
+    template: `
+        <md-card *ngIf="date">
+            {{date | date: "dd/MM/yyyy"}}&nbsp;
+            <md-card-content>
+                <table>
+                    <tr *ngFor="let appointment of appointments;" [mdTooltipPosition]="'before'"
+                        mdTooltip="{{appointment.description}}">
+                        <td (click)="editMode = true">
+                            <md-input-container class="example-full-width">
+                                <input mdInput [(ngModel)]="appointment.description"
+                                       (change)="update(appointment, appointment.$key)">
+                            </md-input-container>
+                            {{appointment.date | date: "hh:mm"}}
+                        </td>
+                        <td>
+                            <button md-mini-fab color="warn" (click)="removeAppointment.emit(appointment.$key)">
+                                <md-icon>delete</md-icon>
+                            </button>
+                        </td>
+                    </tr>
+                </table>
+            </md-card-content>
+            <md-card-actions>
+                <button md-button color="primary" class="button-block" (click)="add()">
+                    <md-icon>add</md-icon>
+                </button>
+            </md-card-actions>
+        </md-card>
+    `
+})
+export class DayDetailComponent {
+    @Input() date: Date;
+    @Input() appointments: Array<Appointment>;
+
+    @Output() public addAppointment = new EventEmitter<Date>();
+    @Output() public updateAppointment = new EventEmitter<Appointment>();
+    @Output() public removeAppointment = new EventEmitter<Appointment>();
+
+    editMode = false;
+
+    add(): void {
+        this.addAppointment.emit(moment(this.date).toDate());
+    }
+
+    update(appointment: Appointment, $key: string) {
+        this.updateAppointment.emit(Object.assign({$key}, appointment));
+    }
+}

src/app/components/day-view/day-view.component.ts

@@ -0,0 +1,24 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Appointment } from '../../types/appointment.type';
+@Component({
+    selector: 'day-view',
+    template: `
+        <h2>Day: {{date | date:"dd/MM/yyyy"}}</h2>
+        <day-detail
+                (addAppointment)="addAppointment.emit($event)"
+                (removeAppointment)="removeAppointment.emit($event)"
+                (updateAppointment)="updateAppointment.emit($event)"
+                [date]="date"
+                [appointments]="appointments">
+        </day-detail>
+
+    `
+})
+export class DayViewComponent {
+    @Input() date: Date;
+    @Input() appointments: Array<Appointment>;
+
+    @Output() public addAppointment = new EventEmitter<Date>();
+    @Output() public updateAppointment = new EventEmitter<Appointment>();
+    @Output() public removeAppointment = new EventEmitter<Appointment>();
+}