完成基本功能

app/app-detail.component.html

 <div *ngIf="app">
     <!--<h3 md-subheader>基本信息</h3>-->
-    <form class="example-form">
+    <form class="example-form" (submit)="submit()">
 
         <md-select placeholder="类别" [(ngModel)]="app.category" name="category" class="example-full-width">
             <md-option *ngFor="let l of ['game','runtime','emulator','module']" [value]="l">{{l}}</md-option>
@@ -12,21 +12,21 @@
         </md-input-container>
 
         <md-input-container class="example-full-width">
-            <input md-input name="tags" placeholder="开发者" [(ngModel)]="app.author">
+            <input md-input name="author" placeholder="开发者" [(ngModel)]="app.author">
         </md-input-container>
 
         <md-input-container class="example-full-width">
-            <input md-input name="tags" placeholder="网站" [(ngModel)]="app.homepage">
+            <input md-input name="homepage" placeholder="网站" [(ngModel)]="app.homepage">
             <md-hint align="end">以 http:// 或 https:// 开头，没有可留空</md-hint>
         </md-input-container>
 
         <md-input-container class="example-full-width">
-            <input md-input name="tags" placeholder="聊天室" [(ngModel)]="app.conference">
+            <input md-input name="conference" placeholder="聊天室" [(ngModel)]="app.conference">
             <md-hint align="end">游戏类应用通常与 ID 相同，其他类型的应用留空</md-hint>
         </md-input-container>
 
         <md-input-container class="example-full-width">
-            <input md-input name="tags" placeholder="应用支持的语言" [(ngModel)]="locales">
+            <input md-input name="locales" placeholder="应用支持的语言" [(ngModel)]="locales">
             <md-hint align="end">JSON string[]，不会写请联系 zh99998@gmail.com</md-hint>
         </md-input-container>
 

app/app-detail.component.ts

-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ChangeDetectorRef} from '@angular/core';
 import App from '../models/browserapp';
 import {AppService} from './app.service';
-import {ActivatedRoute, Params} from '@angular/router';
+import {ActivatedRoute, Params, Router} from '@angular/router';
 import 'rxjs/Rx';
-import {MdIconRegistry} from '@angular/material';
+import {MdIconRegistry, MdSnackBar} from '@angular/material';
 import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({
@@ -14,14 +14,22 @@ import {DomSanitizer} from '@angular/platform-browser';
 export class AppDetailComponent implements OnInit {
     app: App;
 
-    constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
+    constructor(private appService: AppService, private route: ActivatedRoute,
+                private snackBar: MdSnackBar) {
+    }
+
+    async submit() {
+        // TODO: 处理上传的数据
+        try {
+            await this.appService.update(this.app);
+            this.snackBar.open('编辑成功', undefined, {duration: 2000});
+        } catch (e) {
+            this.snackBar.open(e.toString(), undefined, {duration: 2000});
+        }
     }
 
     async ngOnInit() {
-        this.route.parent.params
-            .switchMap((params: Params) => this.appService.find(params['id']))
-            .subscribe(app => {
-                this.app = app;
-            });
+        let id = this.route.parent.snapshot.params['id'];
+        this.app = await this.appService.find(id);
     }
 }

app/app-locales.component.css

 .example-full-width {
     width: 100%;
 }
+
+.example-form {
+    margin-top: 16px;
+}
+
 md-select {
     margin: 16px 0;
 }
\ No newline at end of file

app/app-locales.component.html

 <md-tab-group *ngIf="app">
     <md-tab *ngFor="let locale of locales" [label]="locale">
-        <form class="example-form" style="margin-top:16px;">
+        <form class="example-form" (submit)="submit()">
             <md-input-container class="example-full-width">
                 <input md-input name="name" placeholder="应用名称" [(ngModel)]="app.name[locale]">
             </md-input-container>
@@ -23,8 +23,12 @@
     </md-tab>
 
     <md-tab #translate label="添加翻译">
-        <md-select placeholder="语言" [(ngModel)]="locale" name="locale" class="example-full-width">
-            <md-option *ngFor="let l of untranslated_locales()" [value]="l">{{l}}</md-option>
-        </md-select>
+
+        <form class="example-form" (submit)="addTranslate(locale)">
+            <md-select placeholder="语言" [(ngModel)]="locale" name="locale" class="example-full-width" >
+                <md-option *ngFor="let l of untranslated_locales()" [value]="l">{{l}}</md-option>
+            </md-select>
+            <button md-raised-button color="primary">提交</button>
+        </form>
     </md-tab>
 </md-tab-group>
\ No newline at end of file

app/app-locales.component.ts

@@ -3,8 +3,7 @@ import App, {I18n} from '../models/browserapp';
 import {AppService} from './app.service';
 import {ActivatedRoute, Params} from '@angular/router';
 import 'rxjs/Rx';
-import {MdIconRegistry, MdTab} from '@angular/material';
-import {DomSanitizer} from '@angular/platform-browser';
+import {MdTab, MdSnackBar} from '@angular/material';
 
 @Component({
     moduleId: module.id,
@@ -17,8 +16,25 @@ export class AppLocalesComponent implements OnInit {
     news: I18n<string> = {};
     @ViewChild('translate')
     translate: MdTab;
+    locale: string;
 
-    constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
+    constructor(private appService: AppService, private route: ActivatedRoute,
+                private snackBar: MdSnackBar) {
+    }
+
+    async addTranslate(locale: string) {
+        this.locales.push(locale);
+        this.locale = this.untranslated_locales()[0];
+    }
+
+    async submit() {
+        // TODO: 处理上传的数据
+        try {
+            await this.appService.update(this.app);
+            this.snackBar.open('编辑成功', undefined, {duration: 2000});
+        } catch (e) {
+            this.snackBar.open(e.toString(), undefined, {duration: 2000});
+        }
     }
 
     async ngOnInit() {
@@ -27,6 +43,7 @@ export class AppLocalesComponent implements OnInit {
             .subscribe(app => {
                 this.app = app;
                 this.locales = Object.keys(app.name);
+                this.locale = this.untranslated_locales()[0];
                 for (let [locale, news] of Object.entries(app.news)) {
                     this.news[locale] = JSON.stringify(news);
                 }

app/app.component.ts

 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, Params} from '@angular/router';
+import {ActivatedRoute, Params, Router} from '@angular/router';
 import {AppService} from './app.service';
 import App from '../models/browserapp';
+import {MdSnackBar} from '@angular/material';
 @Component({
     moduleId: module.id,
     templateUrl: 'app.component.html',
@@ -10,7 +11,8 @@ import App from '../models/browserapp';
 export class AppComponent implements OnInit {
     app: App;
 
-    constructor(private route: ActivatedRoute, private appService: AppService) {
+    constructor(private route: ActivatedRoute, private appService: AppService,
+                private snackBar: MdSnackBar, private router: Router) {
     }
 
     ngOnInit() {
@@ -28,8 +30,16 @@ export class AppComponent implements OnInit {
         console.log(app, file);
     }
 
-    remove() {
-
+    async remove() {
+        if (confirm('确认删除')) {
+            try {
+                await this.appService.remove(this.app);
+                await this.router.navigate(['/apps']);
+                this.snackBar.open('删除成功', undefined, {duration: 2000});
+            } catch (e) {
+                this.snackBar.open(e.toString(), undefined, {duration: 2000});
+            }
+        }
     }
 
     unpublish() {

app/app.service.ts

@@ -53,7 +53,7 @@ export class AppService {
     update(app: App) {
         let options = addJsonOptions();
         return this.http.patch(`http://localhost:8000/apps/${app.id}`, app, options)
-            .map((response) => response.json())
+            .map((response) => new App(response.json()))
             .catch(this.handleError)
             .toPromise();
     }
@@ -67,7 +67,7 @@ export class AppService {
 
     find(id: string): Promise<App> {
         return this.http.get(`http://localhost:8000/apps/${id}`)
-            .map((response) => response.json)
+            .map((response) => new App(response.json()))
             .catch(this.handleError)
             .toPromise();
     }

server.ts

@@ -45,6 +45,7 @@ app.use(async(ctx, next) => {
 // 跨域
 app.use(async(ctx, next) => {
     ctx.set('Access-Control-Allow-Origin', '*');
+    ctx.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH');
     ctx.set('Access-Control-Allow-Headers', 'Content-Type');
     if (ctx.method === 'OPTIONS') {
         ctx.status = 204;