add app-detail

app/app-detail.component.css

@@ -4,6 +4,13 @@
     overflow-y: auto;
 }
 
-.hidden {
-    display: none;
-}
\ No newline at end of file
+
+.list-group {
+    width: 20rem;
+}
+
+
+.news-block {
+    padding: 0;
+}
+

app/app-detail.component.html

@@ -15,49 +15,48 @@
 <br>
 
 <h2>新闻</h2>
-<p>这里是新闻</p>
 
-<br>
+<p *ngIf="!news">没有新闻</p>
+<div *ngIf="news">
+    <div class="list-group">
+        <a *ngFor="let item of news" href="{{item.url}}" class="list-group-item">{{item.title}}</a>
+    </div>
 
-<h2>好友</h2>
-<p>好友信息</p>
+</div>
 
 <br>
 
-<h2>成就</h2>
-<p>成就信息</p>
+<div *ngIf="friends">
+    <h2>好友</h2>
+    <p>好友信息</p>
+    <br>
+</div>
 
-<br>
+<div *ngIf="achievement">
+    <h2>成就</h2>
+    <p>成就信息</p>
+    <br>
+</div>
 
-<h2>Mods</h2>
-
-<table class="table table-striped">
-    <thead>
-    <tr>
-        <th>#</th>
-        <th>名称</th>
-        <th>类型</th>
-        <th>启用</th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr>
-        <th scope="row">1</th>
-        <td>东方绯想天</td>
-        <td>依赖</td>
-        <td>√</td>
-    </tr>
-    <tr>
-        <th scope="row">2</th>
-        <td>简体中文包</td>
-        <td>语言</td>
-        <td>√</td>
-    </tr>
-    <tr>
-        <th scope="row">3</th>
-        <td>东方绯想天则OST</td>
-        <td>OST</td>
-        <td>√</td>
-    </tr>
-    </tbody>
-</table>
+<div *ngIf="mods">
+    <h2>Mods</h2>
+    <table class="table table-striped">
+        <thead>
+        <tr>
+            <th>#</th>
+            <th>名称</th>
+            <th>类型</th>
+            <th>操作</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let mod of mods; let i = index">
+            <th scope="row">{{i + 1}}</th>
+            <td>{{searchApp(mod.id).name[searchApp(mod.id).locales[0]]}}</td>
+            <td>{{mod.type}}</td>
+            <td *ngIf="checkInstall(mod.id)"><button type="button" class="btn btn-danger btn-sm">卸载</button></td>
+            <td *ngIf="!checkInstall(mod.id)"><button type="button" class="btn btn-primary btn-sm">安装</button></td>
+        </tr>
+        </tbody>
+    </table>
+</div>

app/app-detail.component.ts

 import { Component } from '@angular/core';
 import { AppsService } from './apps.service'
 import { RoutingService } from './routing.service'
-
-//import 'rxjs/Rx';
 import {App} from "./app";
+
+declare var process;
+
 @Component({
     selector: 'app-detail',
     templateUrl: 'app/app-detail.component.html',
@@ -13,14 +14,7 @@ export class AppDetailComponent {
 
     _currentApp;
     get currentApp(): App {
-
-        let data = this.appsService.data;
-        let tmp;
-        if(data) {
-            tmp = data.find((v)=>v.id === this.routingService.app);
-            return tmp;
-        } else {
-        }
+        return this.searchApp(this.routingService.app);
     }
 
     _name;
@@ -33,16 +27,80 @@ export class AppDetailComponent {
 
     _isInstalled;
     get isInstalled() {
+        return this.checkInstall(this.routingService.app);
+    }
+
+    _news;
+    get news() {
         if(this.currentApp) {
-            if(this.currentApp.local.path) {
-                return true;
+            if(this.currentApp.news.length > 0) {
+                return this.currentApp.news;
             }
         }
+    }
+
+    _friends;
+    get friends() {
         return false;
     }
 
+    _achievement;
+    get achievement() {
+        return false;
+    }
+
+    _mods;
+    get mods() {
+        let contains = ["optional", "language"];
+
+        if(this.currentApp) {
+            if(this.currentApp.references[process.platform] && this.currentApp.references[process.platform].length > 0) {
+                console.log(this.currentApp.references[process.platform]);
+                let refs = this.currentApp.references[process.platform];
+                refs = refs.filter((ref)=>{
+                    return contains.includes(ref.type);
+                });
+                refs = refs.map((ref)=>{
+                    let tmp = Object.create(ref);
+                    switch(tmp.type) {
+                        case "optional":
+                            tmp.type = "选项";
+                            break;
+                        case "language":
+                            tmp.type = "语言";
+                            break;
+                        default:
+                            break;
+                    }
+                    console.log(tmp.type);
+                    return tmp;
+                });
+                return refs;
+
+                //return this.currentApp.references[process.platform];
+            }
+        }
+    }
 
     constructor(private appsService: AppsService, private routingService: RoutingService ) {
     }
 
+    searchApp(id): App {
+        let data = this.appsService.data;
+        let tmp;
+        if(data) {
+            tmp = data.find((v)=>v.id === id);
+            return tmp;
+        }
+    }
+
+    checkInstall(id): boolean {
+        if(this.searchApp(id)) {
+            if(this.searchApp(id).local.path) {
+                return true;
+            }
+        }
+        return false;
+    }
+
 }

app/apps.component.html

@@ -4,7 +4,7 @@
     <a href="#" class="list-group-item list-group-item-action">绯想天</a>
     <a href="#" class="list-group-item list-group-item-action disabled">永远消失的幻想乡</a>
     -->
-    <a *ngFor="let app of appsService.data"
+    <a *ngFor="let app of apps"
        (click)="selectApp(app.id)"
        href="#"
        class="list-group-item list-group-item-action"

app/apps.component.ts

 import { Component } from '@angular/core';
 import { AppsService } from './apps.service'
 import { RoutingService } from './routing.service'
+import {App} from "./app";
 
 @Component({
     selector: 'apps',
@@ -20,6 +21,22 @@ export class AppsComponent {
         });
     }
 
+    _apps;
+    get apps() {
+        let contains = ["game", "music", "book"];
+
+        let data = this.appsService.data;
+        let apps;
+
+        if(data) {
+            apps = this.appsService.data.filter((app)=>{
+                return contains.includes(app.category);
+            });
+        }
+
+        return apps;
+    }
+
     selectApp(id) {
         this.routingService.app = id;
     }

app/apps.service.ts

@@ -8,6 +8,7 @@ import {AppLocal} from "./app-local";
 export class AppsService {
     data : App[];
 
+
     constructor(private http: Http) {
     }
 

apps.json

@@ -21,10 +21,7 @@
         }
       }
     },
-    "references": {
-      "id": "",
-      "type": "runtime"
-    },
+    "references": {},
     "locales": ["zh-CN"],
     "download": "",
     "news": [{
@@ -67,8 +64,20 @@
       }
     },
     "references": {
-      "id": "th12_mod1",
-      "type": "language"
+      "darwin": [
+        {
+        "id": "th105",
+        "type": "optional"
+        },
+        {
+          "id": "th12_mod1",
+          "type": "language"
+        },
+        {
+          "id": "th12_mod2",
+          "type": "runtime"
+        }
+      ]
     },
     "locales": ["zh-CN"],
     "download": "",
@@ -102,10 +111,40 @@
         }
       }
     },
-    "references": {
-      "id": "",
-      "type": "runtime"
+    "references": {},
+    "locales": ["zh-CN"],
+    "download": "",
+    "news": [],
+    "tags": ["STG"],
+    "local": {
+      "path": "/foo/bar",
+      "version": "10.3"
+    }
+  },
+
+  {
+    "id": "th12_mod2",
+    "name":
+    {
+      "zh-CN": "th12_mod2"
+    },
+    "description": {
+      "zh-CN": "th12 desc"
+    },
+    "author": "ZUN",
+    "homepage": "http://www.myacg.cc",
+    "category": "runtime",
+    "actions": {
+      "darwin": {
+        "main": {
+          "execute": "",
+          "args": [],
+          "env": "",
+          "open": ""
+        }
+      }
     },
+    "references": {},
     "locales": ["zh-CN"],
     "download": "",
     "news": [],