添加插件管理页面

portal/src/app/main/channel-detail/channel-detail.component.html

-<p>channel-detail works!</p>

portal/src/app/main/channel-detail/channel-detail.component.ts

-import {Component, Input, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'app-channel-detail',
-  templateUrl: './channel-detail.component.html',
-  styleUrls: ['./channel-detail.component.scss']
-})
-export class ChannelDetailComponent implements OnInit {
-
-  @Input() channel = {};
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

portal/src/app/main/channel/channel.component.ts

@@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../api.service';
 import {ChannelEditComponent} from '../channel-edit/channel-edit.component';
 import {NzDrawerService, NzTableQueryParams} from 'ng-zorro-antd';
-import {ChannelDetailComponent} from '../channel-detail/channel-detail.component';
 
 @Component({
   selector: 'app-channel',
@@ -85,17 +84,6 @@ export class ChannelComponent implements OnInit {
     });
   }
 
-  detail(c): void {
-    this.drawer.create({
-      nzTitle: '详情',
-      // nzWidth: 400,
-      nzContent: ChannelDetailComponent,
-      nzContentParams: {
-        channel: c
-      }
-    });
-  }
-
   onTableQuery(params: NzTableQueryParams): void {
     const {pageSize, pageIndex, sort, filter} = params;
     this.pageSize = pageSize;

portal/src/app/main/link-detail/link-detail.component.html

-<p>link-detail works!</p>

portal/src/app/main/link-detail/link-detail.component.ts

-import {Component, Input, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'app-link-detail',
-  templateUrl: './link-detail.component.html',
-  styleUrls: ['./link-detail.component.scss']
-})
-export class LinkDetailComponent implements OnInit {
-
-  @Input() link: any = {};
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-  }
-
-}

portal/src/app/main/link/link.component.ts

@@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {ApiService} from '../../api.service';
 import {NzDrawerService, NzTableQueryParams} from 'ng-zorro-antd';
 import {LinkEditComponent} from '../link-edit/link-edit.component';
-import {LinkDetailComponent} from '../link-detail/link-detail.component';
 
 @Component({
   selector: 'app-link',
@@ -82,17 +81,6 @@ export class LinkComponent implements OnInit {
     });
   }
 
-  detail(l): void {
-    this.drawer.create({
-      nzTitle: '详情',
-      // nzWidth: 400,
-      nzContent: LinkDetailComponent,
-      nzContentParams: {
-        link: l
-      }
-    });
-  }
-
   onTableQuery(params: NzTableQueryParams): void {
     const {pageSize, pageIndex, sort, filter} = params;
     this.pageSize = pageSize;

portal/src/app/main/main.module.ts

@@ -25,25 +25,18 @@ import {UiModule} from '../ui/ui.module';
 import {ChannelComponent} from './channel/channel.component';
 import {LinkComponent} from './link/link.component';
 import {ChannelEditComponent} from './channel-edit/channel-edit.component';
-import {ChannelDetailComponent} from './channel-detail/channel-detail.component';
-import {LinkDetailComponent} from './link-detail/link-detail.component';
 import {LinkMonitorComponent} from './link-monitor/link-monitor.component';
 import {NzSpaceModule} from 'ng-zorro-antd/space';
 import {LinkEditComponent} from './link-edit/link-edit.component';
 import {PluginComponent} from './plugin/plugin.component';
-// import {MqttModule} from "ngx-mqtt";
-// import {IMqttServiceOptions} from "ngx-mqtt/lib/mqtt.model";
-//
-// export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
-//   url: 'ws://localhost:8080/api/mqtt'
-// };
+import {PluginEditComponent} from './plugin-edit/plugin-edit.component';
 
 
 @NgModule({
   declarations: [MainComponent, DashComponent,
-    ChannelComponent, ChannelDetailComponent, ChannelEditComponent,
-    LinkComponent, LinkDetailComponent, LinkMonitorComponent, LinkEditComponent,
-    PluginComponent],
+    ChannelComponent, ChannelEditComponent,
+    LinkComponent, LinkEditComponent, LinkMonitorComponent,
+    PluginComponent, PluginEditComponent],
   imports: [
     CommonModule,
     FormsModule,
@@ -72,7 +65,6 @@ import {PluginComponent} from './plugin/plugin.component';
     NzSelectModule,
     NzSpaceModule,
     NzInputNumberModule,
-    //MqttModule.forRoot(MQTT_SERVICE_OPTIONS)
   ],
   bootstrap: [MainComponent]
 })

portal/src/app/main/plugin-edit/plugin-edit.component.html

+<div class="item" nz-row nzAlign="middle">
+  <div nz-col nzSpan="4">
+    名称
+  </div>
+  <div nz-col nzSpan="20">
+    <input nz-input [(ngModel)]="plugin.name" placeholder="名称"/>
+  </div>
+</div>
+
+<div class="item" nz-row nzAlign="middle">
+  <div nz-col nzSpan="4">
+    密钥
+  </div>
+  <div nz-col nzSpan="20">
+    <input nz-input [(ngModel)]="plugin.key" placeholder="密钥"/>
+  </div>
+</div>
+
+<div class="item" nz-row nzAlign="middle">
+  <div nz-col nzSpan="4">
+    密码
+  </div>
+  <div nz-col nzSpan="20">
+    <input nz-input [(ngModel)]="plugin.secret" placeholder="密码"/>
+  </div>
+</div>
+
+<div class="item" nz-row nzAlign="middle">
+  <div nz-col nzSpan="4">
+    禁用
+  </div>
+  <div nz-col nzSpan="20">
+    <nz-switch [(ngModel)]="plugin.disabled"></nz-switch>
+  </div>
+</div>
+
+
+<button nz-button nzType="primary" (click)="submit()">保存</button>
+

portal/src/app/main/plugin-edit/plugin-edit.component.scss

+
+.item{
+  margin-bottom: 20px;
+}

portal/src/app/main/plugin-edit/plugin-edit.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../../api.service';
+import {NzDrawerRef} from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-plugin-edit',
+  templateUrl: './plugin-edit.component.html',
+  styleUrls: ['./plugin-edit.component.scss']
+})
+export class PluginEditComponent implements OnInit {
+
+  @Input() plugin: any = {};
+
+
+  constructor(private as: ApiService, private drawerRef: NzDrawerRef<string>) {
+  }
+
+  ngOnInit(): void {
+    if (this.plugin.id) {
+      this.as.get('plugin/' + this.plugin.id).subscribe(res => {
+        this.plugin = res.data;
+      });
+    }
+  }
+
+  submit(): void {
+    if (this.plugin.id) {
+      this.as.put('plugin/' + this.plugin.id, this.plugin).subscribe(res => {
+        console.log(res);
+        // TODO 修改成功
+        this.drawerRef.close(res.data);
+      });
+    } else {
+      this.as.post('plugin', this.plugin).subscribe(res => {
+        console.log(res);
+        // TODO 保存成功
+        this.drawerRef.close(res.data);
+      });
+    }
+  }
+}

portal/src/app/main/plugin/plugin.component.html

+<nz-space>
+  <nz-space-item>
+    <button nz-button (click)="load()" [nzLoading]="loading">
+      <i nz-icon nzType="reload"></i>
+      刷新
+    </button>
+  </nz-space-item>
+  <nz-space-item>
+    <button nz-button (click)="edit()">
+      <i nz-icon nzType="plus"></i>
+      创建
+    </button>
+  </nz-space-item>
+  <nz-space-item>
+    <nz-input-group nzSearch nzCompact [nzAddOnAfter]="suffixButton">
+      <input type="text" nz-input [(ngModel)]="keyword" placeholder="名称、地址"/>
+    </nz-input-group>
 
-<p>plugin works!</p>
-
-<p>TODO： 显示插件列表，以及状态，可以点开详情，启动关闭，禁用</p>
+    <ng-template #suffixButton>
+      <button nz-button nzSearch (click)="search()">搜索</button>
+    </ng-template>
+  </nz-space-item>
+</nz-space>
+<nz-table #tbl [nzData]="channels" nzTableLayout="fixed" [nzFrontPagination]="false" [nzPageSize]="pageSize"
+          [nzPageIndex]="pageIndex" [nzTotal]="total" [nzLoading]="loading" (nzQueryParams)="onTableQuery($event)">
+  <thead>
+  <tr>
+    <th nzColumnKey="Id" [nzSortFn]="true">ID</th>
+    <th nzColumnKey="Name" [nzSortFn]="true">名称</th>
+    <th nzColumnKey="Key" [nzSortFn]="true">密钥</th>
+    <th nzColumnKey="Secret" [nzSortFn]="true">密码</th>
+    <th nzColumnKey="Status" nzShowFilter [nzFilterFn]="true" [nzFilters]="statusFilters">状态</th>
+    <th nzColumnKey="CreatedAt" [nzSortFn]="true">创建时间</th>
+    <th></th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of tbl.data">
+    <td>{{ data.id }}</td>
+    <td>{{ data.name }}</td>
+    <td>{{ data.key }}</td>
+    <td>{{data.status}}</td>
+    <td>
+      {{data.disabled ? '禁用' : ''}}
+    </td>
+    <td>{{ data.created_at | amDateFormat:'YYYY-MM-DD HH:mm:ss'  }}</td>
+    <td>
+      <a (click)="edit(data)" title="编辑">
+        <i nz-icon nzType="edit"></i>
+      </a>
+    </td>
+  </tr>
+  </tbody>
+</nz-table>

portal/src/app/main/plugin/plugin.component.ts

 import { Component, OnInit } from '@angular/core';
+import {ApiService} from '../../api.service';
+import {PluginEditComponent} from '../plugin-edit/plugin-edit.component';
+import {NzDrawerService, NzTableQueryParams} from 'ng-zorro-antd';
 
 @Component({
   selector: 'app-plugin',
@@ -7,9 +10,76 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PluginComponent implements OnInit {
 
-  constructor() { }
+  plugins: [];
+  total = 0;
+  pageIndex = 1;
+  pageSize = 10;
+  sortField = null;
+  sortOrder = null;
+  filters = [];
+  keyword = '';
+  loading = false;
+
+  statusFilters = [{text: '启动', value: 1}];
+
+
+  constructor(private as: ApiService, private drawer: NzDrawerService) {
+  }
 
   ngOnInit(): void {
   }
 
+  reload(): void {
+    this.pageIndex = 1;
+    this.keyword = '';
+    this.load();
+  }
+
+  load(): void {
+    this.loading = true;
+    this.as.post('plugins', {
+      offset: (this.pageIndex - 1) * this.pageSize,
+      length: this.pageSize,
+      sortKey: this.sortField,
+      sortOrder: this.sortOrder,
+      filters: this.filters,
+      keyword: this.keyword,
+    }).subscribe(res => {
+
+      this.plugins = res.data;
+      this.total = res.total;
+    }, error => {
+      console.log('error', error);
+    }, () => {
+      this.loading = false;
+    });
+  }
+
+  edit(c?): void {
+    this.drawer.create({
+      nzTitle: c ? '编辑' : '创建',
+      nzMaskClosable: false,
+      nzWidth: 500,
+      nzContent: PluginEditComponent,
+      nzContentParams: {
+        plugin: c || {}
+      }
+    });
+  }
+
+  onTableQuery(params: NzTableQueryParams): void {
+    const {pageSize, pageIndex, sort, filter} = params;
+    this.pageSize = pageSize;
+    this.pageIndex = pageIndex;
+    const currentSort = sort.find(item => item.value !== null);
+    this.sortField = (currentSort && currentSort.key) || null;
+    this.sortOrder = (currentSort && currentSort.value) || null;
+    this.filters = filter;
+    this.load();
+  }
+
+  search(): void {
+    this.pageIndex = 1;
+    this.load();
+  }
 }