页面

app/app.component.css

@@ -65,6 +65,7 @@ h1 {
 #info-contents {
     margin-left: 12px;
 }
+
 #info-contents a, #info-contents span {
     line-height: 20px;
     padding: 0 4px;
@@ -78,4 +79,13 @@ md-toolbar {
 
 md-toolbar /deep/ md-toolbar-row {
     height: auto;
+}
+
+#icon img {
+    width: 80px;
+    height: 80px;
+}
+
+#icon input {
+    display: none;
 }
\ No newline at end of file

app/app.component.html

@@ -2,7 +2,7 @@
     <md-sidenav mode="side" opened="true">
         <h3>信息中心</h3>
         <ul>
-            <li><a md-list-item href="#">概览</a></li>
+            <li><a md-list-item href="#" disabled>概览</a></li>
         </ul>
         <h3>编辑应用</h3>
         <ul>
@@ -14,7 +14,10 @@
 
     <md-toolbar *ngIf="app" id="info" color="primary">
         <div>
-            <img src="https://lh6.ggpht.com/mUAFCY_JUfHQBlAE4JsnwyrghcxIldv-uk0iPPL66IpPxM8-KQCof6NN4usLm6LUpA=h80-rw" alt="喵帕斯~">
+            <label id="icon">
+                <img [src]="app.icon">
+                <input type="file" (change)="change_icon(app, $event.target.files[0])"/>
+            </label>
         </div>
         <div id="info-contents">
             <h1>{{app.name['zh-CN']}}</h1>
@@ -22,11 +25,11 @@
                 <span>{{app.id}}</span>
                 <a md-button target="_blank" href="https://mycard.moe">在商店中查看</a>
             </div>
-            <div class="IDWJ4SB-Yf-i">
+            <div>
                 <span style="color:#84a000;">已发布</span>
-                <span>2014年2月20日</span>
-                <a md-button href="#">取消发布应用</a>
-                <a md-button href="#">删除应用</a>
+                <span lang="zh-CN">{{app.created_at | date}}</span>
+                <a md-button (click)="unpublish(app)">取消发布应用</a>
+                <a md-button (click)="remove(app)">删除应用</a>
             </div>
         </div>
     </md-toolbar>

app/app.component.ts

@@ -20,4 +20,20 @@ export class AppComponent implements OnInit {
                 this.app = app;
             });
     }
+
+    change_icon(app: App, file: File) {
+        if (!file) {
+            return;
+        }
+        console.log(app, file);
+    }
+
+    remove() {
+
+    }
+
+    unpublish() {
+
+    }
+
 }

app/app.service.ts

 import {Injectable} from '@angular/core';
-import App from '../models/app';
+import App from '../models/browserapp';
 import {Http} from '@angular/http';
 import 'rxjs/add/operator/toPromise';
 /**
@@ -12,10 +12,10 @@ export class AppService {
     }
 
     getApps(): Promise<App[]> {
-        return this.http.get('http://localhost:8000/apps').map((response) => response.json()).toPromise();
+        return this.http.get('http://localhost:8000/apps').map((response) => response.json().map((app: any) => new App(app))).toPromise();
     }
 
     getApp(id: string): Promise<App> {
-        return this.http.get(`http://localhost:8000/apps/${id}`).map((response) => response.json()).toPromise();
+        return this.http.get(`http://localhost:8000/apps/${id}`).map((response) => new App(response.json())).toPromise();
     }
 }

app/routing.module.ts

@@ -17,6 +17,7 @@ const routes: Routes = [
         path: 'apps/:id',
         component: AppComponent,
         children: [
+            {path: '', redirectTo: 'detail', pathMatch: 'full'},
             {path: 'detail', component: AppDetailComponent},
             {path: 'locales', component: AppLocalesComponent},
             {path: 'packages', component: AppPackagesComponent}

models/browserapp.ts

@@ -12,12 +12,15 @@ class App {
     news: I18n<{title: string, url: string, image: string}[]>;
     conference?: string;
     data: any;
+    icon = 'http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg';
+    created_at: Date;
 
     // TODO: 实现进 Model 里
     constructor(o: any) {
         for (let [key, value] of Object.entries(o)) {
             this[key] = value;
         }
+        this.created_at = new Date(o.created_at);
     }
 }