From cec00f891cf5c8c0834e0ea0bd7ebc6ea5060c62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A4rt=20Kalmo?= Date: Sat, 29 Apr 2017 11:26:20 +0300 Subject: [PATCH] done state --- .gitignore | 10 ++++++++++ app/app.cmp.ts | 7 +++++++ app/app.html | 1 + app/app.module.ts | 22 +++++++++++++++++++++ app/list/list.cmp.ts | 37 +++++++++++++++++++++++++++++++++++ app/list/list.css | 3 +++ app/list/list.html | 10 ++++++++++ app/main.ts | 9 +++++++++ app/polyfills.ts | 3 +++ app/routes.ts | 10 ++++++++++ app/task.srv.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++ app/view/view.cmp.ts | 26 +++++++++++++++++++++++++ app/view/view.html | 5 +++++ data/db.json | 14 ++++++++++++++ data/routes.json | 3 +++ index.html | 18 +++++++++++++++++ package.json | 31 +++++++++++++++++++++++++++++ tsconfig.json | 14 ++++++++++++++ webpack.config.js | 39 +++++++++++++++++++++++++++++++++++++ 19 files changed, 308 insertions(+) create mode 100644 .gitignore create mode 100644 app/app.cmp.ts create mode 100644 app/app.html create mode 100644 app/app.module.ts create mode 100644 app/list/list.cmp.ts create mode 100644 app/list/list.css create mode 100644 app/list/list.html create mode 100644 app/main.ts create mode 100644 app/polyfills.ts create mode 100644 app/routes.ts create mode 100644 app/task.srv.ts create mode 100644 app/view/view.cmp.ts create mode 100644 app/view/view.html create mode 100644 data/db.json create mode 100644 data/routes.json create mode 100644 index.html create mode 100644 package.json create mode 100644 tsconfig.json create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..872d944 --- /dev/null +++ b/.gitignore @@ -0,0 +1,10 @@ +node_modules +/build + +/.settings +/.classpath +/.project + +/.idea +*.iml +*.log diff --git a/app/app.cmp.ts b/app/app.cmp.ts new file mode 100644 index 0000000..397a3f8 --- /dev/null +++ b/app/app.cmp.ts @@ -0,0 +1,7 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'my-app', + templateUrl: 'app/app.html' +}) +export class AppComponent {} diff --git a/app/app.html b/app/app.html new file mode 100644 index 0000000..90c6b64 --- /dev/null +++ b/app/app.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/app.module.ts b/app/app.module.ts new file mode 100644 index 0000000..8879c06 --- /dev/null +++ b/app/app.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpModule } from '@angular/http'; +import { FormsModule } from '@angular/forms'; + +import { AppComponent } from './app.cmp'; +import { RouterModule } from "@angular/router"; +import { routes } from "./routes"; +import { ListComponent } from "./list/list.cmp"; +import { ViewComponent } from "./view/view.cmp"; +import { TaskService } from "./task.srv"; + +@NgModule({ + imports: [ + BrowserModule, + HttpModule, FormsModule, + RouterModule.forRoot(routes, { useHash: true }) ], + declarations: [ AppComponent, ListComponent, ViewComponent ], + providers: [ TaskService ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } \ No newline at end of file diff --git a/app/list/list.cmp.ts b/app/list/list.cmp.ts new file mode 100644 index 0000000..4b8fc7a --- /dev/null +++ b/app/list/list.cmp.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; +import { Task, TaskService } from '../task.srv'; + +@Component({ + selector: 'list', + templateUrl: 'app/list/list.html', + styleUrls: ['app/list/list.css'] +}) +export class ListComponent implements OnInit { + + tasks: Task[] = []; + newTaskTitle: string; + + constructor(private taskService: TaskService) {} + + private updateTasks(): void { + this.taskService.getTasks().then(tasks => this.tasks = tasks); + } + + addNewTask(): void { + this.taskService.saveTask(new Task(this.newTaskTitle)) + .then(() => { + this.updateTasks(); + this.newTaskTitle = ''; + }); + } + + deleteTask(taskId : number): void { + this.taskService.deleteTask(taskId) + .then(() => this.updateTasks()); + } + + ngOnInit(): void { + this.updateTasks(); + } + +} diff --git a/app/list/list.css b/app/list/list.css new file mode 100644 index 0000000..3dadbff --- /dev/null +++ b/app/list/list.css @@ -0,0 +1,3 @@ +.done { + text-decoration: line-through; +} diff --git a/app/list/list.html b/app/list/list.html new file mode 100644 index 0000000..bf0d687 --- /dev/null +++ b/app/list/list.html @@ -0,0 +1,10 @@ + +

+ +
+ {{ task.title }} + + + + +
diff --git a/app/main.ts b/app/main.ts new file mode 100644 index 0000000..e45fa07 --- /dev/null +++ b/app/main.ts @@ -0,0 +1,9 @@ +import 'rxjs/add/observable/throw'; +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/toPromise'; + +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/app/polyfills.ts b/app/polyfills.ts new file mode 100644 index 0000000..148e40b --- /dev/null +++ b/app/polyfills.ts @@ -0,0 +1,3 @@ +import 'core-js/es6'; +import 'core-js/es7/reflect'; +import 'zone.js/dist/zone'; diff --git a/app/routes.ts b/app/routes.ts new file mode 100644 index 0000000..eb4d158 --- /dev/null +++ b/app/routes.ts @@ -0,0 +1,10 @@ +import { Routes } from '@angular/router'; + +import { ListComponent } from './list/list.cmp'; +import { ViewComponent } from './view/view.cmp'; + +export const routes: Routes = [ + { path: 'list', component: ListComponent }, + { path: 'view/:id', component: ViewComponent }, + { path: '', redirectTo: 'list', pathMatch: 'full' } +]; \ No newline at end of file diff --git a/app/task.srv.ts b/app/task.srv.ts new file mode 100644 index 0000000..b35dd72 --- /dev/null +++ b/app/task.srv.ts @@ -0,0 +1,46 @@ +import { Http, Response } from "@angular/http"; +import { Injectable } from "@angular/core"; + +export class Task { + added: Date; + _id: number; + done: boolean = false; + + constructor(public title : string) { + this.added = new Date(); + }; +} + +@Injectable() +export class TaskService { + constructor(private http: Http) {} + + getTasks(): Promise { + return this.http + .get('api/tasks') + .toPromise() + .then((response: Response) => response.json()); + } + + getTask(id: number): Promise { + return this.http + .get('api/tasks/' + id) + .toPromise() + .then((response: Response) => response.json()); + } + + saveTask(task: Task): Promise { + return this.http + .post('api/tasks', task) + .toPromise() + .then(() => null); + } + + deleteTask(id: number): Promise { + return this.http + .delete('api/tasks/' + id) + .toPromise() + .then(() => null); + } + +} \ No newline at end of file diff --git a/app/view/view.cmp.ts b/app/view/view.cmp.ts new file mode 100644 index 0000000..2e3765b --- /dev/null +++ b/app/view/view.cmp.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router' + +import { Task, TaskService } from '../task.srv'; + +@Component({ + templateUrl: 'app/view/view.html' +}) +export class ViewComponent implements OnInit { + + task: Task; + + constructor(private route: ActivatedRoute, + private router: Router, + private taskService: TaskService) {} + + back() { + this.router.navigateByUrl('/list'); + } + + ngOnInit(): void { + const id = parseInt(this.route.snapshot.paramMap.get('id')); + this.taskService.getTask(id).then(task => this.task = task); + } + +} diff --git a/app/view/view.html b/app/view/view.html new file mode 100644 index 0000000..44b0ca5 --- /dev/null +++ b/app/view/view.html @@ -0,0 +1,5 @@ + +Title: {{ task?.title }}
+Added: {{ task?.added | date: 'dd-MM-yyyy hh:mm' }}

+ + diff --git a/data/db.json b/data/db.json new file mode 100644 index 0000000..62435ff --- /dev/null +++ b/data/db.json @@ -0,0 +1,14 @@ +{ + "tasks": [ + { + "title": "Call Jill", + "added": "2017-03-13T09:46:46.127Z", + "_id": 1 + }, + { + "title": "Write to John", + "added": "2017-03-13T10:09:38.867Z", + "_id": 2 + } + ] +} \ No newline at end of file diff --git a/data/routes.json b/data/routes.json new file mode 100644 index 0000000..c042bf3 --- /dev/null +++ b/data/routes.json @@ -0,0 +1,3 @@ +{ + "/api/": "/" +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..74ea947 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + i399exng2 + + + + + + + + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..1abd52f --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "i399exng2", + "version": "1.0.0", + "scripts": { + "serve": "webpack-dev-server --port 3001", + "build": "webpack -p", + "back-end": "json-server ./data/db.json --static ./ --id _id --port 3000 --routes ./data/routes.json" + }, + "dependencies": { + "@angular/common": "^4.0.2", + "@angular/compiler": "^4.0.2", + "@angular/compiler-cli": "^4.0.2", + "@angular/core": "^4.0.2", + "@angular/forms": "^4.0.2", + "@angular/http": "^4.0.2", + "@angular/platform-browser": "^4.0.2", + "@angular/platform-browser-dynamic": "^4.0.2", + "@angular/platform-server": "^4.0.2", + "@angular/router": "^4.0.2", + "core-js": "^2.4.1", + "rxjs": "^5.3.0", + "zone.js": "^0.8.5" + }, + "devDependencies": { + "awesome-typescript-loader": "^3.1.2", + "typescript": "^2.2.2", + "webpack": "^2.3.3", + "webpack-dev-server": "^2.4.2", + "json-server": "^0.8.22" + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..bdcc47c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "es2015", + "moduleResolution": "node", + "sourceMap": false, + "removeComments": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": ["es2015", "dom"], + "noImplicitAny": false, + "suppressImplicitAnyIndexErrors": true + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..5c39f83 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,39 @@ +var path = require('path'); + +module.exports = { + + entry: { + polyfills: './app/polyfills.ts', + app: './app/main.ts' + }, + + output: { + path: path.resolve(__dirname, 'build'), + publicPath: '/build/', + filename: '[name].js' + }, + + module: { + loaders: [ + { + test: /\.ts$/, + loader: 'awesome-typescript-loader' + } + ], + exprContextCritical: false + }, + + resolve: { + extensions: ['.js', '.ts'] + }, + + devServer: { + proxy: { + '/api': { + target: 'http://localhost:3000', + secure: false + } + } + } + +};