將前端專案新增到 gitea

2023-08-03 10:37:39 +08:00 · 2023-08-03 10:37:39 +08:00 · 3215b35d41
commit 3215b35d41
544 changed files with 32188 additions and 0 deletions
--- a/.angular-cli.json
+++ b/.angular-cli.json
@ -0,0 +1,63 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "version": "1.0.6",
+    "name": "@coreui/angular"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": ["assets"],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "../node_modules/font-awesome/css/font-awesome.css",
+        "../node_modules/simple-line-icons/css/simple-line-icons.css",
+        "../node_modules/datatables.net-dt/css/jquery.dataTables.css",
+        "scss/style.scss"
+      ],
+      "scripts": [
+        "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/datatables.net/js/jquery.dataTables.js",
+        "../node_modules/chart.js/dist/Chart.bundle.min.js",
+        "../node_modules/chart.js/dist/Chart.min.js"
+      ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "prefixInterfaces": false
+  }
+}
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,22 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,33 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+node_modules
+bower_components
+
+# IDEs and editors
+.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
--- a/2.4.2
+++ b/2.4.2
--- a/README.md
+++ b/README.md
@ -0,0 +1,27 @@
+# Angular2DevelopmentCLI
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-beta.32.3.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/e2e/app.e2e-spec.ts
+++ b/e2e/app.e2e-spec.ts
@ -0,0 +1,14 @@
+import { CoreUIPage } from './app.po';
+
+describe('core-ui App', function() {
+  let page: CoreUIPage;
+
+  beforeEach(() => {
+    page = new CoreUIPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});
--- a/e2e/app.po.ts
+++ b/e2e/app.po.ts
@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor/globals';
+
+export class CoreUIPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}
--- a/karma.conf.js
+++ b/karma.conf.js
@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,83 @@
+{
+  "name": "@coreui/angular",
+  "version": "1.0.6",
+  "description": "Open Source Bootstrap Admin Template",
+  "author": "Łukasz Holeczek",
+  "homepage": "http://coreui.io",
+  "copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "depoly": "ng build --base-href=./ --prod --build-optimizer --source-map",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@agm/core": "^1.0.0-beta.2",
+    "@angular/animations": "^5.2.10",
+    "@angular/cdk": "^5.2.5",
+    "@angular/common": "5.0.1",
+    "@angular/compiler": "5.0.1",
+    "@angular/core": "5.0.1",
+    "@angular/forms": "5.0.1",
+    "@angular/http": "5.0.1",
+    "@angular/material": "^5.2.5",
+    "@angular/platform-browser": "5.0.1",
+    "@angular/platform-browser-dynamic": "5.0.1",
+    "@angular/router": "5.0.1",
+    "@angular/upgrade": "5.0.1",
+    "@toverux/ngx-sweetalert2": "^3.2.1",
+    "angular-datatables": "^5.0.0",
+    "angular-moment-timezone": "^1.7.1",
+    "bootstrap": "4.0.0-beta.2",
+    "chart.js": "^2.7.1",
+    "core-js": "2.5.1",
+    "datatables.net": "^1.10.16",
+    "datatables.net-dt": "^1.10.16",
+    "file-saver": "^1.3.8",
+    "font-awesome": "^4.7.0",
+    "jquery": "^3.2.1",
+    "moment": "^2.19.1",
+    "mydatepicker": "^2.6.3",
+    "ng2-charts": "1.6.0",
+    "ngx-bootstrap": "1.9.3",
+    "ngx-loading": "^1.0.14",
+    "ngx-moment": "^3.0.1",
+    "rxjs": "5.5.2",
+    "simple-line-icons": "^2.4.1",
+    "sweetalert2": "^7.11.0",
+    "time-ago-pipe": "^1.3.2",
+    "ts-helpers": "1.1.2",
+    "zone.js": "0.8.18"
+  },
+  "devDependencies": {
+    "@angular/cli": "^1.6.5",
+    "@angular/compiler-cli": "^5.0.1",
+    "@types/datatables.net": "^1.10.8",
+    "@types/jasmine": "2.6.3",
+    "@types/jquery": "^3.2.16",
+    "@types/node": "8.0.50",
+    "codelyzer": "4.0.1",
+    "jasmine-core": "2.8.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "1.7.1",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-cli": "1.0.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
+    "karma-jasmine": "1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "node-sass": "^4.14.1",
+    "protractor": "5.2.0",
+    "ts-node": "3.3.0",
+    "tslint": "5.8.0",
+    "typescript": "^2.6.1"
+  },
+  "engines": {
+    "node": ">= 6.9.0",
+    "npm": ">= 3.0.0"
+  }
+}
--- a/protractor.conf.js
+++ b/protractor.conf.js
@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/src/app/_nav.ts
+++ b/src/app/_nav.ts
@ -0,0 +1,47 @@
+export const navigation = [
+  { name: "首頁", url: "/dashboard", icon: "icon-home" },
+  { name: "開單", url: "/punish", icon: "icon-check" },
+  {
+    name: "開單設定",
+    url: "/set",
+    icon: "icon-settings",
+    children: [
+      { name: "行政區管理", url: "/set/set001", icon: "icon-folder" },
+      { name: "原因設定", url: "/set/set002", icon: "icon-folder" },
+      { name: "廠商資料設定", url: "/set/set003", icon: "icon-folder" }
+    ]
+  },
+  {
+    name: "報表管理",
+    url: "/mro",
+    icon: "icon-support",
+    children: [
+      { name: "違規類型違規數統計", url: "/mro/mro004", icon: "icon-list" },
+      { name: "違規事件&站點違規數統計", url: "/mro/mro005", icon: "icon-list" },
+      { name: "設備故障統計表", url: "/mro/mro006", icon: "icon-list" },
+      { name: " API 表格清單", url: "/mro/mro007", icon: "icon-list" }
+    ]
+  },
+  {
+    name: "公佈欄管理",
+    url: "/board",
+    icon: "icon-settings",
+    children: [
+      { name: "公佈欄設定", url: "/board/board001", icon: "icon-folder" },
+    ]
+  },
+  {
+    name: "系統設定",
+    url: "/sys",
+    icon: "icon-settings",
+    children: [
+      { name: "變更密碼", url: "/sys/sys001", icon: "icon-lock" },
+      { name: "使用者管理", url: "/sys/sys002", icon: "icon-people" },
+      { name: "個人資料顯示", url: "/sys/sys003", icon: "icon-people" },
+      { name: "角色權限管理", url: "/sys/sys004", icon: "icon-key" },
+      { name: "分局管理", url: "/sys/sys006", icon: "icon-key" },
+      { name: "頁面管理", url: "/sys/sys005", icon: "icon-layers" }
+    ]
+  },
+  { name: "線上報修", url: "/login/loginPostRepair", icon: "icon-wrench" }
+];
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+import { HelperService } from "app/service/helper.service";
+
+@Component({
+  // tslint:disable-next-line
+  selector: "body",
+  template: "<router-outlet></router-outlet>"
+})
+export class AppComponent implements OnInit {
+  constructor(private helperService: HelperService) {}
+
+  ngOnInit() {
+    this.helperService.setUserCodeData();
+    this.helperService.setRoleCodeData();
+    this.helperService.setGroupName();
+  }
+}
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -0,0 +1,143 @@
+import { Board001Service } from './views/board/board001/board001.service';
+import { LoginService } from "./service/login.service";
+import { SysDataService } from "./service/sys-data.service";
+import { HttpModule } from "@angular/http";
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { LocationStrategy, HashLocationStrategy } from "@angular/common";
+import { AppComponent } from "./app.component";
+
+// import { TimeAgoPipe } from "time-ago-pipe";
+
+// Import containers
+import { FullLayoutComponent, SimpleLayoutComponent } from "./containers";
+
+const APP_CONTAINERS = [FullLayoutComponent, SimpleLayoutComponent];
+
+// Import components
+import {
+  AppAsideComponent,
+  AppBreadcrumbsComponent,
+  AppFooterComponent,
+  AppHeaderComponent,
+  AppSidebarComponent,
+  AppSidebarFooterComponent,
+  AppSidebarFormComponent,
+  AppSidebarHeaderComponent,
+  AppSidebarMinimizerComponent,
+  APP_SIDEBAR_NAV
+} from "./components";
+
+const APP_COMPONENTS = [
+  AppAsideComponent,
+  AppBreadcrumbsComponent,
+  AppFooterComponent,
+  AppHeaderComponent,
+  AppSidebarComponent,
+  AppSidebarFooterComponent,
+  AppSidebarFormComponent,
+  AppSidebarHeaderComponent,
+  AppSidebarMinimizerComponent,
+  APP_SIDEBAR_NAV
+];
+
+// Import directives
+import {
+  AsideToggleDirective,
+  NAV_DROPDOWN_DIRECTIVES,
+  ReplaceDirective,
+  SIDEBAR_TOGGLE_DIRECTIVES
+} from "./directives";
+
+const APP_DIRECTIVES = [
+  AsideToggleDirective,
+  NAV_DROPDOWN_DIRECTIVES,
+  ReplaceDirective,
+  SIDEBAR_TOGGLE_DIRECTIVES
+];
+
+// Import routing module
+import { AppRoutingModule } from "./app.routing";
+
+// Import 3rd party components
+import { BsDropdownModule } from "ngx-bootstrap/dropdown";
+import { TabsModule } from "ngx-bootstrap/tabs";
+import { ModalModule } from "ngx-bootstrap/modal";
+import { AccordionModule } from "ngx-bootstrap/accordion";
+import { ChartsModule } from "ng2-charts/ng2-charts";
+import { SweetAlert2Module } from "@toverux/ngx-sweetalert2";
+// import { TimeAgoPipe } from "time-ago-pipe";
+
+// import { LoadingModule } from "ngx-loading";
+// import { AgmCoreModule } from "@agm/core";
+import { HelperService } from "app/service/helper.service";
+import { MroDataService } from "app/service/mro-data.service";
+
+import { Sys002Service } from "app/views/sys/sys002/sys002.service";
+import { Sys004Service } from "app/views/sys/sys004/sys004.service";
+import { Set001Service } from "app/views/set/set001/set001.service";
+import { Set002Service } from "./views/set/set002/set002.service";
+import { Set003Service } from "app/views/set/set003/set003.service";
+
+import { HttpService } from "app/service/http.service";
+import { LoginModule } from "app/views/login/login.module";
+import { AuthGuard } from "app/auth-guard.service";
+import { SetDataService } from "app/service/set-data.service";
+import { Sys005Service } from "app/views/sys/sys005/sys005.service";
+import { Sys006Service } from "app/views/sys/sys006/sys006.service";
+import { BoardDataService } from './service/board-data.service';
+
+// import { InfoComponent } from './views/info/info.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BsDropdownModule.forRoot(),
+    TabsModule.forRoot(),
+    ModalModule.forRoot(),
+    AccordionModule.forRoot(),
+    SweetAlert2Module.forRoot(),
+    ChartsModule,
+    // LoadingModule,
+    HttpModule,
+    LoginModule
+    // TimeAgoPipe
+    // AgmCoreModule.forRoot({
+    //   apiKey: "AIzaSyABeRdjDq-nodR8XjO4lzk_QAmjVJLqqis",
+    //   language: "zh-TW"
+    // })
+  ],
+  declarations: [
+    AppComponent,
+    ...APP_CONTAINERS,
+    ...APP_COMPONENTS,
+    ...APP_DIRECTIVES
+    // TimeAgoPipe
+    // InfoComponent
+  ],
+  providers: [
+    {
+      provide: LocationStrategy,
+      useClass: HashLocationStrategy
+    },
+    SysDataService,
+    SetDataService,
+    MroDataService,
+    HelperService,
+    BoardDataService,
+    Sys002Service,
+    Sys004Service,
+    Sys005Service,
+    Sys006Service,
+    Set001Service,
+    Set002Service,
+    Set003Service,
+    Board001Service,
+    HttpService,
+    LoginService,
+    AuthGuard
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
--- a/src/app/app.routing.ts
+++ b/src/app/app.routing.ts
@ -0,0 +1,32 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+
+// Import Containers
+import { FullLayoutComponent, SimpleLayoutComponent } from "./containers";
+
+export const routes: Routes = [
+  { path: "login", loadChildren: "./views/login/login.module#LoginModule" },
+  { path: "", redirectTo: "login", pathMatch: "full" },
+  {
+    path: "",
+    component: FullLayoutComponent,
+    data: { title: "Home" },
+    children: [
+      {
+        path: "dashboard",
+        loadChildren: "./views/dashboard/dashboard.module#DashboardModule"
+      },
+      { path: "punish", loadChildren: "./views/punish/punish.module#PunishModule" },
+      { path: "board", loadChildren: "./views/board/board.module#BoardModule" },
+      { path: "set", loadChildren: "./views/set/set.module#SetModule" },
+      { path: "mro", loadChildren: "./views/mro/mro.module#MroModule" },
+      { path: "sys", loadChildren: "./views/sys/sys.module#SysModule" }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
--- a/src/app/auth-guard.service.ts
+++ b/src/app/auth-guard.service.ts
@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import {
+  Router,
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from "@angular/router";
+import { LoginService } from "./service/login.service";
+import { HttpService } from "app/service/http.service";
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private httpService: HttpService, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    if (!this.httpService._token) {
+      this.router.navigate(["/login"]);
+      return false;
+    }
+    if (this.httpService._permissions.indexOf(state.url) === -1) {
+      this.router.navigate(["/login"]);
+      return false;
+    }
+
+    return true;
+  }
+}
--- a/src/app/components/app-aside/app-aside.component.html
+++ b/src/app/components/app-aside/app-aside.component.html
@ -0,0 +1,3 @@
+<aside class="aside-menu">
+  
+</aside>
--- a/src/app/components/app-aside/app-aside.component.ts
+++ b/src/app/components/app-aside/app-aside.component.ts
@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-aside',
+  templateUrl: './app-aside.component.html'
+})
+export class AppAsideComponent {
+
+  constructor() { }
+}
--- a/src/app/components/app-aside/index.ts
+++ b/src/app/components/app-aside/index.ts
@ -0,0 +1 @@
+export * from './app-aside.component';
--- a/src/app/components/app-breadcrumbs/app-breadcrumbs.component.ts
+++ b/src/app/components/app-breadcrumbs/app-breadcrumbs.component.ts
@ -0,0 +1,45 @@
+import { Component } from "@angular/core";
+import { Router, ActivatedRoute, NavigationEnd } from "@angular/router";
+import "rxjs/add/operator/filter";
+
+@Component({
+  selector: "app-breadcrumbs",
+  template: `
+  <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs" let-last = last>
+    <li class="breadcrumb-item"
+        *ngIf="breadcrumb.label.title&&breadcrumb.url.substring(breadcrumb.url.length-1) == '/'||breadcrumb.label.title&&last"
+        [ngClass]="{active: last}">
+      <span *ngIf="!last" >{{breadcrumb.label.title}}</span>
+      <span *ngIf="last" >{{breadcrumb.label.title}}</span>
+    </li>
+  </ng-template>`
+})
+export class AppBreadcrumbsComponent {
+  breadcrumbs: Array<Object>;
+  constructor(private router: Router, private route: ActivatedRoute) {
+    this.router.events
+      .filter(event => event instanceof NavigationEnd)
+      .subscribe(event => {
+        this.breadcrumbs = [];
+        let currentRoute = this.route.root,
+          url = "";
+        do {
+          const childrenRoutes = currentRoute.children;
+          currentRoute = null;
+          // tslint:disable-next-line:no-shadowed-variable
+          childrenRoutes.forEach(route => {
+            if (route.outlet === "primary") {
+              const routeSnapshot = route.snapshot;
+              url +=
+                "/" + routeSnapshot.url.map(segment => segment.path).join("/");
+              this.breadcrumbs.push({
+                label: route.snapshot.data,
+                url: url
+              });
+              currentRoute = route;
+            }
+          });
+        } while (currentRoute);
+      });
+  }
+}
--- a/src/app/components/app-breadcrumbs/index.ts
+++ b/src/app/components/app-breadcrumbs/index.ts
@ -0,0 +1 @@
+export * from './app-breadcrumbs.component';
--- a/src/app/components/app-footer/app-footer.component.html
+++ b/src/app/components/app-footer/app-footer.component.html
@ -0,0 +1,4 @@
+<footer class="app-footer">
+  <span>     </span>
+  <span class="ml-auto">   </span>
+</footer>
--- a/src/app/components/app-footer/app-footer.component.ts
+++ b/src/app/components/app-footer/app-footer.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './app-footer.component.html'
+})
+export class AppFooterComponent { }
--- a/src/app/components/app-footer/index.ts
+++ b/src/app/components/app-footer/index.ts
@ -0,0 +1 @@
+export * from './app-footer.component';
--- a/src/app/components/app-header/app-header.component.html
+++ b/src/app/components/app-header/app-header.component.html
@ -0,0 +1,16 @@
+<header class="app-header navbar">
+  <button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <a class="navbar-brand" href="/#/dashboard"></a>
+  <button class="btn btn-sm btn-sign-out" (click)="logout()">
+    嗨！ {{loginUser}}
+    <i class=" fa fa-sign-out " aria-hidden="true "></i>
+  </button>
+  <!-- <button class="navbar-toggler d-md-down-none mr-auto" type="button" appSidebarToggler>
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <button class="navbar-toggler d-md-down-none" type="button" appAsideMenuToggler>
+    <span class="navbar-toggler-icon"></span>
+  </button> -->
+</header>
--- a/src/app/components/app-header/app-header.component.ts
+++ b/src/app/components/app-header/app-header.component.ts
@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+import { LoginService } from "app/service/login.service";
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-header",
+  templateUrl: "./app-header.component.html"
+})
+export class AppHeaderComponent {
+  loginRole = localStorage.getItem("role");
+  loginUser = localStorage.getItem("name");
+  constructor(private loginService: LoginService, private router: Router) {}
+
+  logout() {
+    this.loginService.logout();
+    this.router.navigateByUrl("/login");
+  }
+}
--- a/src/app/components/app-header/index.ts
+++ b/src/app/components/app-header/index.ts
@ -0,0 +1 @@
+export * from './app-header.component';
--- a/src/app/components/app-sidebar-footer/app-sidebar-footer.component.html
+++ b/src/app/components/app-sidebar-footer/app-sidebar-footer.component.html
@ -0,0 +1 @@
+<!-- <div class="sidebar-footer"></div> -->
--- a/src/app/components/app-sidebar-footer/app-sidebar-footer.component.ts
+++ b/src/app/components/app-sidebar-footer/app-sidebar-footer.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-footer',
+  templateUrl: './app-sidebar-footer.component.html'
+})
+export class AppSidebarFooterComponent { }
--- a/src/app/components/app-sidebar-footer/index.ts
+++ b/src/app/components/app-sidebar-footer/index.ts
@ -0,0 +1 @@
+export * from './app-sidebar-footer.component';
--- a/src/app/components/app-sidebar-form/app-sidebar-form.component.html
+++ b/src/app/components/app-sidebar-form/app-sidebar-form.component.html
@ -0,0 +1 @@
+<!-- <form class="sidebar-form"></form> -->
--- a/src/app/components/app-sidebar-form/app-sidebar-form.component.ts
+++ b/src/app/components/app-sidebar-form/app-sidebar-form.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-form',
+  templateUrl: './app-sidebar-form.component.html'
+})
+export class AppSidebarFormComponent { }
--- a/src/app/components/app-sidebar-form/index.ts
+++ b/src/app/components/app-sidebar-form/index.ts
@ -0,0 +1 @@
+export * from './app-sidebar-form.component';
--- a/src/app/components/app-sidebar-header/app-sidebar-header.component.html
+++ b/src/app/components/app-sidebar-header/app-sidebar-header.component.html
@ -0,0 +1 @@
+<!-- <div class="sidebar-header"></div> -->
--- a/src/app/components/app-sidebar-header/app-sidebar-header.component.ts
+++ b/src/app/components/app-sidebar-header/app-sidebar-header.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-header',
+  templateUrl: './app-sidebar-header.component.html'
+})
+export class AppSidebarHeaderComponent { }
--- a/src/app/components/app-sidebar-header/index.ts
+++ b/src/app/components/app-sidebar-header/index.ts
@ -0,0 +1 @@
+export * from './app-sidebar-header.component';
--- a/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.html
+++ b/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.html
@ -0,0 +1 @@
+<button class="sidebar-minimizer" type="button" appSidebarMinimizer appBrandMinimizer></button>
--- a/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.ts
+++ b/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-minimizer',
+  templateUrl: './app-sidebar-minimizer.component.html'
+})
+export class AppSidebarMinimizerComponent { }
--- a/src/app/components/app-sidebar-minimizer/index.ts
+++ b/src/app/components/app-sidebar-minimizer/index.ts
@ -0,0 +1 @@
+export * from './app-sidebar-minimizer.component';
--- a/src/app/components/app-sidebar-nav/app-sidebar-nav.component.ts
+++ b/src/app/components/app-sidebar-nav/app-sidebar-nav.component.ts
@ -0,0 +1,197 @@
+import { Component, ElementRef, Input, OnInit, Renderer2 } from "@angular/core";
+import { HttpService } from "app/service/http.service";
+
+// Import navigation elements
+import { navigation } from "./../../_nav";
+
+@Component({
+  selector: "app-sidebar-nav",
+  template: `
+    <nav class="sidebar-nav">
+      <ul class="nav">
+        <ng-template ngFor let-navitem [ngForOf]="navigation">
+          <li *ngIf="isDivider(navitem)" class="nav-divider"></li>
+          <ng-template [ngIf]="isTitle(navitem)">
+            <app-sidebar-nav-title [title]='navitem'></app-sidebar-nav-title>
+          </ng-template>
+          <ng-template [ngIf]="!isDivider(navitem)&&!isTitle(navitem)">
+            <app-sidebar-nav-item [item]='navitem'></app-sidebar-nav-item>
+          </ng-template>
+        </ng-template>
+      </ul>
+    </nav>`
+})
+export class AppSidebarNavComponent implements OnInit {
+  public navigation = navigation;
+
+  public isDivider(item) {
+    return item.divider ? true : false;
+  }
+
+  public isTitle(item) {
+    return item.title ? true : false;
+  }
+
+  constructor() {}
+
+  ngOnInit() {}
+}
+
+import { Router } from "@angular/router";
+
+@Component({
+  selector: "app-sidebar-nav-item",
+  template: `
+    <li *ngIf="!isDropdown(); else dropdown" [ngClass]="hasClass() ? 'nav-item ' + item.class : 'nav-item'">
+      <app-sidebar-nav-link [link]='item'></app-sidebar-nav-link>
+    </li>
+    <ng-template #dropdown>
+      <li [ngClass]="hasClass() ? 'nav-item nav-dropdown ' + item.class : 'nav-item nav-dropdown'"
+          [class.open]="isActive()"
+          routerLinkActive="open"
+          appNavDropdown>
+        <app-sidebar-nav-dropdown [link]='item'></app-sidebar-nav-dropdown>
+      </li>
+    </ng-template>
+    `
+})
+export class AppSidebarNavItemComponent implements OnInit {
+  @Input() item: any;
+
+  public hasClass() {
+    return this.item.class ? true : false;
+  }
+
+  public isDropdown() {
+    return this.item.children ? true : false;
+  }
+
+  public thisUrl() {
+    return this.item.url;
+  }
+
+  public isActive() {
+    return this.router.isActive(this.thisUrl(), false);
+  }
+
+  constructor(private router: Router) {}
+  ngOnInit() {}
+}
+
+@Component({
+  selector: "app-sidebar-nav-link",
+  template: `
+    <a *ngIf="!isExternalLink(); else external"
+      [ngClass]="hasVariant() ? 'nav-link nav-link-' + link.variant : 'nav-link'"
+      routerLinkActive="active"
+      [routerLink]="[link.url]">
+      <i *ngIf="isIcon()" class="{{ link.icon }}"></i>
+      {{ link.name }}
+      <span *ngIf="isBadge()" [ngClass]="'badge badge-' + link.badge.variant">{{ link.badge.text }}</span>
+    </a>
+    <ng-template #external>
+      <a [ngClass]="hasVariant() ? 'nav-link nav-link-' + link.variant : 'nav-link'" href="{{link.url}}">
+        <i *ngIf="isIcon()" class="{{ link.icon }}"></i>
+        {{ link.name }}
+        <span *ngIf="isBadge()" [ngClass]="'badge badge-' + link.badge.variant">{{ link.badge.text }}</span>
+      </a>
+    </ng-template>
+  `
+})
+export class AppSidebarNavLinkComponent {
+  @Input() link: any;
+
+  public hasVariant() {
+    return this.link.variant ? true : false;
+  }
+
+  public isBadge() {
+    return this.link.badge ? true : false;
+  }
+
+  public isExternalLink() {
+    return this.link.url.substring(0, 4) === "http" ? true : false;
+  }
+
+  public isIcon() {
+    return this.link.icon ? true : false;
+  }
+
+  constructor() {}
+}
+
+@Component({
+  selector: "app-sidebar-nav-dropdown",
+  template: `
+    <a class="nav-link nav-dropdown-toggle" appNavDropdownToggle>
+      <i *ngIf="isIcon()" class="{{ link.icon }}"></i>
+      {{ link.name }}
+      <span *ngIf="isBadge()" [ngClass]="'badge badge-' + link.badge.variant">{{ link.badge.text }}</span>
+    </a>
+    <ul class="nav-dropdown-items">
+      <ng-template ngFor let-child [ngForOf]="availableChild">
+        <app-sidebar-nav-item [item]='child' *ngIf="true"></app-sidebar-nav-item>
+      </ng-template>
+    </ul>
+  `
+})
+export class AppSidebarNavDropdownComponent implements OnInit {
+  page: any[];
+  availableChild: any[];
+
+  @Input() link: any;
+  constructor(private httpService: HttpService) {}
+  ngOnInit() {
+    this.availableChild = this.link.children.filter(child => {
+      return this.httpService.isAvailableLink(child.url);
+    });
+  }
+  public isBadge() {
+    return this.link.badge ? true : false;
+  }
+
+  public isIcon() {
+    return this.link.icon ? true : false;
+  }
+}
+
+@Component({
+  selector: "app-sidebar-nav-title",
+  template: ""
+})
+export class AppSidebarNavTitleComponent implements OnInit {
+  @Input() title: any;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit() {
+    const nativeElement: HTMLElement = this.el.nativeElement;
+    const li = this.renderer.createElement("li");
+    const name = this.renderer.createText(this.title.name);
+
+    this.renderer.addClass(li, "nav-title");
+
+    if (this.title.class) {
+      const classes = this.title.class;
+      this.renderer.addClass(li, classes);
+    }
+
+    if (this.title.wrapper) {
+      const wrapper = this.renderer.createElement(this.title.wrapper.element);
+
+      this.renderer.appendChild(wrapper, name);
+      this.renderer.appendChild(li, wrapper);
+    } else {
+      this.renderer.appendChild(li, name);
+    }
+    this.renderer.appendChild(nativeElement, li);
+  }
+}
+
+export const APP_SIDEBAR_NAV = [
+  AppSidebarNavComponent,
+  AppSidebarNavDropdownComponent,
+  AppSidebarNavItemComponent,
+  AppSidebarNavLinkComponent,
+  AppSidebarNavTitleComponent
+];
--- a/src/app/components/app-sidebar-nav/index.ts
+++ b/src/app/components/app-sidebar-nav/index.ts
@ -0,0 +1 @@
+export * from './app-sidebar-nav.component';
--- a/src/app/components/app-sidebar/app-sidebar.component.html
+++ b/src/app/components/app-sidebar/app-sidebar.component.html
@ -0,0 +1,7 @@
+<div class="sidebar">
+  <app-sidebar-header></app-sidebar-header>
+  <app-sidebar-form></app-sidebar-form>
+  <app-sidebar-nav></app-sidebar-nav>
+  <app-sidebar-footer></app-sidebar-footer>
+  <app-sidebar-minimizer></app-sidebar-minimizer>
+</div>
--- a/src/app/components/app-sidebar/app-sidebar.component.ts
+++ b/src/app/components/app-sidebar/app-sidebar.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './app-sidebar.component.html'
+})
+export class AppSidebarComponent { }
--- a/src/app/components/app-sidebar/index.ts
+++ b/src/app/components/app-sidebar/index.ts
@ -0,0 +1 @@
+export * from './app-sidebar.component';
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@ -0,0 +1,10 @@
+export * from './app-aside';
+export * from './app-breadcrumbs';
+export * from './app-footer';
+export * from './app-header';
+export * from './app-sidebar';
+export * from './app-sidebar-footer';
+export * from './app-sidebar-form';
+export * from './app-sidebar-header';
+export * from './app-sidebar-minimizer';
+export * from './app-sidebar-nav';
--- a/src/app/containers/full-layout/full-layout.component.html
+++ b/src/app/containers/full-layout/full-layout.component.html
@ -0,0 +1,16 @@
+<app-header></app-header>
+<div class="app-body">
+  <app-sidebar></app-sidebar>
+  <!-- Main content -->
+  <main class="main">
+    <!-- Breadcrumb -->
+    <ol class="breadcrumb">
+      <app-breadcrumbs></app-breadcrumbs>
+    </ol>
+    <div class="container-fluid">
+      <router-outlet></router-outlet>
+    </div><!-- /.conainer-fluid -->
+  </main>
+  <app-aside></app-aside>
+</div>
+<app-footer></app-footer>
--- a/src/app/containers/full-layout/full-layout.component.ts
+++ b/src/app/containers/full-layout/full-layout.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './full-layout.component.html'
+})
+export class FullLayoutComponent { }
--- a/src/app/containers/full-layout/index.ts
+++ b/src/app/containers/full-layout/index.ts
@ -0,0 +1 @@
+export * from './full-layout.component';
--- a/src/app/containers/index.ts
+++ b/src/app/containers/index.ts
@ -0,0 +1,2 @@
+export * from './full-layout';
+export * from './simple-layout';
--- a/src/app/containers/simple-layout/index.ts
+++ b/src/app/containers/simple-layout/index.ts
@ -0,0 +1 @@
+export * from './simple-layout.component';
--- a/src/app/containers/simple-layout/simple-layout.component.html
+++ b/src/app/containers/simple-layout/simple-layout.component.html
--- a/src/app/containers/simple-layout/simple-layout.component.ts
+++ b/src/app/containers/simple-layout/simple-layout.component.ts
@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  template: '<router-outlet></router-outlet>',
+})
+export class SimpleLayoutComponent { }
--- a/src/app/data/AnnounceData.ts
+++ b/src/app/data/AnnounceData.ts
@ -0,0 +1,10 @@
+export class AnnounceData {
+  Id: string;
+  Title: string;
+  Content: string;
+  StartOn: string;
+  EndtOn: string;
+  Status: number;
+
+  constructor() {}
+}
--- a/src/app/data/ApiTableData.ts
+++ b/src/app/data/ApiTableData.ts
@ -0,0 +1,12 @@
+export class ApiTableData {
+  Id: number;
+  Timestamp: any;
+  Trendflags: number;
+  Status: number;
+  Value: string;
+  Trendflags_Tag: string;
+  Status_tag: string;
+  Time: string;
+
+  constructor() {}
+}
--- a/src/app/data/CarData.ts
+++ b/src/app/data/CarData.ts
@ -0,0 +1,6 @@
+export class CarData {
+  vehicleType: string;
+  vehicleNumber: string
+
+  constructor() {}
+}
--- a/src/app/data/CompanyInformationData.ts
+++ b/src/app/data/CompanyInformationData.ts
@ -0,0 +1,8 @@
+export class CompanyInformationData {
+  id: number;
+  companyCode: string;
+  companyName: string;
+  email: string;
+
+  constructor() {}
+}
--- a/src/app/data/EventCountIntervalData.ts
+++ b/src/app/data/EventCountIntervalData.ts
@ -0,0 +1,10 @@
+export class EventCountIntervalData {
+  PunishedCount: number;
+  CheckPunishedCount: number;
+  RejectedCount: number;
+  NoStatusCount: number;
+  NoPunishedCount: number;
+
+
+  constructor() {}
+}
--- a/src/app/data/EventData.ts
+++ b/src/app/data/EventData.ts
@ -0,0 +1,9 @@
+export class EventData {
+  Id: string;
+  Number: string;
+  SiteName: string;
+  EventName: string;
+  InTime: string;
+  Status: string;
+  constructor() {}
+}
--- a/src/app/data/EventTypeReportData.ts
+++ b/src/app/data/EventTypeReportData.ts
@ -0,0 +1,9 @@
+export class EventTypeReportData {
+  StartDate: string;
+  EndDate: string;
+  StartTime: number;
+  EndTime: number;
+  Sites: any;
+
+  constructor() {}
+}
--- a/src/app/data/GroupData.ts
+++ b/src/app/data/GroupData.ts
@ -0,0 +1,8 @@
+export class GroupData {
+  Id: number;
+  StationName: string;
+  Area: string;
+  CreatorId: string;
+  CreatedOn: string;
+  constructor() {}
+}
--- a/src/app/data/LoginData.ts
+++ b/src/app/data/LoginData.ts
@ -0,0 +1,5 @@
+export class LoginData {
+  Account: string;
+  Password: string;
+  constructor() {}
+}
--- a/src/app/data/MalfunctionData.ts
+++ b/src/app/data/MalfunctionData.ts
@ -0,0 +1,9 @@
+export class MalfunctionData {
+  StartDate: string;
+  EndDate: string;
+  StartTime: number;
+  EndTime: number;
+  Sites: any;
+
+  constructor() {}
+}
--- a/src/app/data/NewPwdMailData.ts
+++ b/src/app/data/NewPwdMailData.ts
@ -0,0 +1,8 @@
+export class NewPwdMailData {
+  MailFrom: string;
+  MailTo_Acct: String;
+  MailTo_Add: String;
+  MailSub: String;
+  MailBody: string;
+  constructor() {}
+}
--- a/src/app/data/PageData.ts
+++ b/src/app/data/PageData.ts
@ -0,0 +1,7 @@
+export class PageData {
+  Id: string;
+  PageModule: string;
+  PageName: String;
+  PageUrl: String;
+  constructor() {}
+}
--- a/src/app/data/PremissionData.ts
+++ b/src/app/data/PremissionData.ts
@ -0,0 +1,6 @@
+export class PremissionData {
+  RoleId: Number;
+  PageId: Number;
+  Enable: boolean;
+  constructor() {}
+}
--- a/src/app/data/PunishQueryData.ts
+++ b/src/app/data/PunishQueryData.ts
@ -0,0 +1,9 @@
+export class PunishQueryData {
+  site: string;
+  status: string;
+  time: string;
+  speed: string;
+  method: string;
+
+  constructor() {}
+}
--- a/src/app/data/ReasonData.ts
+++ b/src/app/data/ReasonData.ts
@ -0,0 +1,8 @@
+export class ReasonData {
+  Id: number;
+  EventTypeId: number;
+  NotPunishType: number;
+  NotPunishReason: string;
+
+  constructor() {}
+}
--- a/src/app/data/RepairData.ts
+++ b/src/app/data/RepairData.ts
@ -0,0 +1,7 @@
+export class RepairData {
+  questionType: number;
+  sendTo: string;
+  title: string;
+  content: string;
+  constructor() {}
+}
--- a/src/app/data/ReportSiteEventTypesData.ts
+++ b/src/app/data/ReportSiteEventTypesData.ts
@ -0,0 +1,6 @@
+export class ReportSiteEventTypesData {
+  eachEventTypesSiteViewModel: any;
+  eachSiteEventTypesViewModel: any;
+
+  constructor() {}
+}
--- a/src/app/data/RoleData.ts
+++ b/src/app/data/RoleData.ts
@ -0,0 +1,9 @@
+export class RoleData {
+  Id: string;
+  RoleID: string;
+  RoleName: string;
+  ProgramUrlID: string;
+  CreatorId: string;
+  CreatedOn: string;
+  constructor() {}
+}
--- a/src/app/data/SiteEventTypesData.ts
+++ b/src/app/data/SiteEventTypesData.ts
@ -0,0 +1,8 @@
+export class SiteEventTypesData {
+  StartTime: string;
+  EndTime: string;
+  Sites: any;
+  EventTypes: any;
+
+  constructor() {}
+}
--- a/src/app/data/SiteInformationData.ts
+++ b/src/app/data/SiteInformationData.ts
@ -0,0 +1,31 @@
+export class SiteInformationData {
+  Id: number;
+  Country: string;
+  Area: string;
+  SiteID: string;
+  SiteName: string;
+  EventType: string;
+  Laws: string;
+  CompanyCode: string;
+
+  constructor() {}
+}
+
+
+export class AreaArrayData {
+  Area: string;
+  IsChecked: boolean;
+
+  constructor() {}
+}
+
+export class SiteData {
+  Id: number;
+  SiteId: string;
+  SiteName: string
+
+  constructor() {}
+}
+
+
+
--- a/src/app/data/TableQueryData.ts
+++ b/src/app/data/TableQueryData.ts
@ -0,0 +1,9 @@
+export class TableQueryData {
+  Term?: string;
+  Page?: number;
+  CurrentPage?: number;
+  PageSize?: number;
+  Order?: string;
+  IsAsc?: string;
+  constructor() {}
+}
--- a/src/app/data/UserData.ts
+++ b/src/app/data/UserData.ts
@ -0,0 +1,17 @@
+export class UserData {
+  Id: string;
+  Account: string;
+  UserName: string;
+  PassWord: string;
+  newPassWord: string;
+  checkNewPassword: string;
+  Email: string;
+  PhoneNumber: string;
+  Status: boolean;
+  RoleCode_Id: string;
+  GroupCode_Id: string;
+  CreatorId: string;
+  CreatedOn: Date;
+  Site_Id: any;
+  constructor() {}
+}
--- a/src/app/directives/aside/aside.directive.ts
+++ b/src/app/directives/aside/aside.directive.ts
@ -0,0 +1,17 @@
+import { Directive, HostListener } from '@angular/core';
+
+/**
+* Allows the aside to be toggled via click.
+*/
+@Directive({
+  selector: '[appAsideMenuToggler]',
+})
+export class AsideToggleDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('aside-menu-hidden');
+  }
+}
--- a/src/app/directives/aside/index.ts
+++ b/src/app/directives/aside/index.ts
@ -0,0 +1 @@
+export * from './aside.directive';
--- a/src/app/directives/equal-validator/equal-validator.directive.ts
+++ b/src/app/directives/equal-validator/equal-validator.directive.ts
@ -0,0 +1,58 @@
+import { Directive, forwardRef, Attribute } from "@angular/core";
+import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
+
+@Directive({
+  selector:
+    // tslint:disable-next-line:directive-selector
+    "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]",
+  providers: [
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => EqualValidator),
+      multi: true
+    }
+  ]
+})
+export class EqualValidator implements Validator {
+  constructor(
+    @Attribute("validateEqual") public validateEqual: string,
+    @Attribute("reverse") public reverse: string
+  ) {}
+
+  private get isReverse() {
+    // tslint:disable-next-line:curly
+    if (!this.reverse) return false;
+    return this.reverse === "true" ? true : false;
+  }
+
+  validate(c: AbstractControl): { [key: string]: any } {
+    // self value
+    // tslint:disable-next-line:prefer-const
+    let v = c.value;
+
+    // control vlaue
+    // tslint:disable-next-line:prefer-const
+    let e = c.root.get(this.validateEqual);
+
+    // value not equal
+    if (e && v !== e.value && !this.isReverse) {
+      return {
+        validateEqual: false
+      };
+    }
+
+    // value equal and reverse
+    if (e && v === e.value && this.isReverse) {
+      delete e.errors["validateEqual"];
+      // tslint:disable-next-line:curly
+      if (!Object.keys(e.errors).length) e.setErrors(null);
+    }
+
+    // value not equal and reverse
+    if (e && v !== e.value && this.isReverse) {
+      e.setErrors({ validateEqual: false });
+    }
+
+    return null;
+  }
+}
--- a/src/app/directives/equal-validator/index.ts
+++ b/src/app/directives/equal-validator/index.ts
@ -0,0 +1 @@
+export * from "./equal-validator.directive";
--- a/src/app/directives/field-match/field-match.directive.ts
+++ b/src/app/directives/field-match/field-match.directive.ts
@ -0,0 +1,49 @@
+import { Directive, Input, OnChanges, SimpleChanges } from "@angular/core";
+import {
+  AbstractControl,
+  NG_VALIDATORS,
+  NgModel,
+  ValidationErrors,
+  Validator,
+  ValidatorFn,
+  Validators
+} from "@angular/forms";
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: "[fieldMatches]",
+  providers: [
+    {
+      provide: NG_VALIDATORS,
+      useExisting: FieldMatchesValidatorDirective,
+      multi: true
+    }
+  ]
+})
+export class FieldMatchesValidatorDirective implements Validator, OnChanges {
+  @Input() fieldMatches: NgModel;
+
+  private validationFunction = Validators.nullValidator;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const change = changes["fieldMatches"];
+    if (change) {
+      const otherFieldModel = change.currentValue;
+      this.validationFunction = fieldMatchesValidator(otherFieldModel);
+    } else {
+      this.validationFunction = Validators.nullValidator;
+    }
+  }
+
+  validate(control: AbstractControl): ValidationErrors | any {
+    return this.validationFunction(control);
+  }
+}
+
+export function fieldMatchesValidator(otherFieldModel: NgModel): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors => {
+    return control.value === otherFieldModel.value
+      ? null
+      : { fieldMatches: { match: false } };
+  };
+}
--- a/src/app/directives/field-match/index.ts
+++ b/src/app/directives/field-match/index.ts
@ -0,0 +1 @@
+export * from "./field-match.directive";
--- a/src/app/directives/index.ts
+++ b/src/app/directives/index.ts
@ -0,0 +1,6 @@
+export * from "./aside";
+export * from "./nav-dropdown";
+export * from "./replace";
+export * from "./sidebar";
+export * from "./field-match";
+export * from "./equal-validator";
--- a/src/app/directives/nav-dropdown/index.ts
+++ b/src/app/directives/nav-dropdown/index.ts
@ -0,0 +1 @@
+export * from './nav-dropdown.directive';
--- a/src/app/directives/nav-dropdown/nav-dropdown.directive.ts
+++ b/src/app/directives/nav-dropdown/nav-dropdown.directive.ts
@ -0,0 +1,31 @@
+import { Directive, HostListener, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appNavDropdown]'
+})
+export class NavDropdownDirective {
+
+  constructor(private el: ElementRef) { }
+
+  toggle() {
+    this.el.nativeElement.classList.toggle('open');
+  }
+}
+
+/**
+* Allows the dropdown to be toggled via click.
+*/
+@Directive({
+  selector: '[appNavDropdownToggle]'
+})
+export class NavDropdownToggleDirective {
+  constructor(private dropdown: NavDropdownDirective) {}
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    this.dropdown.toggle();
+  }
+}
+
+export const NAV_DROPDOWN_DIRECTIVES = [NavDropdownDirective, NavDropdownToggleDirective];
--- a/src/app/directives/replace/index.ts
+++ b/src/app/directives/replace/index.ts
@ -0,0 +1 @@
+export * from './replace.directive';
--- a/src/app/directives/replace/replace.directive.ts
+++ b/src/app/directives/replace/replace.directive.ts
@ -0,0 +1,22 @@
+import { Directive, ElementRef, OnInit } from '@angular/core';
+
+@Directive({
+  // tslint:disable-next-line:max-line-length
+  selector: '[appHostReplace], app-aside, app-breadcrumbs, app-footer, app-header, app-sidebar, app-sidebar-footer, app-sidebar-form, app-sidebar-header, app-sidebar-minimizer, app-sidebar-nav, app-sidebar-nav-dropdown, app-sidebar-nav-item, app-sidebar-nav-link, app-sidebar-nav-title'
+})
+export class ReplaceDirective implements OnInit {
+
+  constructor(private el: ElementRef) { }
+
+  // wait for the component to render completely
+  ngOnInit() {
+    const nativeElement: HTMLElement = this.el.nativeElement;
+    const parentElement: HTMLElement = nativeElement.parentElement;
+    // move all children out of the element
+    while (nativeElement.firstChild) {
+      parentElement.insertBefore(nativeElement.firstChild, nativeElement);
+    }
+    // remove the empty element(the host)
+    parentElement.removeChild(nativeElement);
+  }
+}
--- a/src/app/directives/sidebar/index.ts
+++ b/src/app/directives/sidebar/index.ts
@ -0,0 +1 @@
+export * from './sidebar.directive';
--- a/src/app/directives/sidebar/sidebar.directive.ts
+++ b/src/app/directives/sidebar/sidebar.directive.ts
@ -0,0 +1,106 @@
+import { Directive, HostListener } from '@angular/core';
+
+/**
+* Allows the sidebar to be toggled via click.
+*/
+@Directive({
+  selector: '[appSidebarToggler]'
+})
+export class SidebarToggleDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('sidebar-hidden');
+  }
+}
+
+@Directive({
+  selector: '[appSidebarMinimizer]'
+})
+export class SidebarMinimizeDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('sidebar-minimized');
+  }
+}
+
+@Directive({
+  selector: '[appBrandMinimizer]'
+})
+export class BrandMinimizeDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('brand-minimized');
+  }
+}
+
+@Directive({
+  selector: '[appMobileSidebarToggler]'
+})
+export class MobileSidebarToggleDirective {
+  constructor() { }
+
+  // Check if element has class
+  private hasClass(target: any, elementClassName: string) {
+    return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
+  }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('sidebar-mobile-show');
+  }
+}
+
+/**
+* Allows the off-canvas sidebar to be closed via click.
+*/
+@Directive({
+  selector: '[appSidebarClose]'
+})
+export class SidebarOffCanvasCloseDirective {
+  constructor() { }
+
+  // Check if element has class
+  private hasClass(target: any, elementClassName: string) {
+    return new RegExp('(\\s|^)' + elementClassName + '(\\s|$)').test(target.className);
+  }
+
+  // Toggle element class
+  private toggleClass(elem: any, elementClassName: string) {
+    let newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
+    if (this.hasClass(elem, elementClassName)) {
+      while (newClass.indexOf(' ' + elementClassName + ' ') >= 0 ) {
+        newClass = newClass.replace( ' ' + elementClassName + ' ' , ' ' );
+      }
+      elem.className = newClass.replace(/^\s+|\s+$/g, '');
+    } else {
+      elem.className += ' ' + elementClassName;
+    }
+  }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+
+    if (this.hasClass(document.querySelector('body'), 'sidebar-off-canvas')) {
+      this.toggleClass(document.querySelector('body'), 'sidebar-opened');
+    }
+  }
+}
+
+export const SIDEBAR_TOGGLE_DIRECTIVES = [
+    SidebarToggleDirective,
+    SidebarMinimizeDirective,
+    BrandMinimizeDirective,
+    SidebarOffCanvasCloseDirective,
+    MobileSidebarToggleDirective
+];
--- a/src/app/pipe/filter.pipe.ts
+++ b/src/app/pipe/filter.pipe.ts
@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+
+  transform(items: any[], searchText: string, fieldName: string): any[] {
+
+    // return empty array if array is falsy
+    if (!items) { return []; }
+
+    // return the original array if search text is empty
+    if (!searchText) { return items; }
+
+    // convert the searchText to lower case
+    searchText = searchText.toLowerCase();
+
+    // retrun the filtered array
+    return items.filter(item => {
+      if (item && item[fieldName]) {
+        return item[fieldName].toLowerCase().includes(searchText);
+      }
+      return false;
+    });
+   }
+}
--- a/src/app/service/board-data.service.ts
+++ b/src/app/service/board-data.service.ts
@ -0,0 +1,278 @@
+import { Injectable } from "@angular/core";
+import { HttpService } from "app/service/http.service";
+import { Http, Headers, Response, RequestOptions } from "@angular/http";
+// tslint:disable-next-line:import-blacklist
+import { Observable } from "rxjs";
+import "rxjs/add/operator/map";
+import "rxjs/add/operator/catch";
+import { TableQueryData } from "../data/TableQueryData";
+import { AnnounceData } from "app/data/AnnounceData";
+import { CarData } from "app/data/CarData";
+import { SiteEventTypesData } from "app/data/SiteEventTypesData";
+import { MalfunctionData } from "app/data/MalfunctionData";
+import { EventTypeReportData } from "app/data/EventTypeReportData";
+
+@Injectable()
+export class BoardDataService {
+  constructor(private httpService: HttpService) {}
+
+  postAnnounceData(announceData: AnnounceData): Observable<any> {
+    return (
+      this.httpService
+        .post("/announce", announceData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getAnnouncePageList(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+    return this.httpService
+      .get("/announce" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+  deleteAnnounceData(id: string): Observable<any> {
+    return (
+      this.httpService
+        .delete("/announce/" + id)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  putAnnounceData(announceData: AnnounceData): Observable<any> {
+    return (
+      this.httpService
+        .put("/announce/" + announceData.Id, announceData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  getEventPageList(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+    return this.httpService
+      .get("/event" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+  getEventCountByThisYear(): Observable<any> {
+    return (
+      this.httpService
+        .get("/event/count/thisYear")
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getEventCountByThisMonth(): Observable<any> {
+    return (
+      this.httpService
+        .get("/event/count/thisMonth")
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  getEventCountByInterval(startDatetime: string, endDatetime: string): Observable<any> {
+    return (
+      this.httpService
+        .get("/event/count/interval?startDatetime=" + startDatetime + "&endDatetime=" + endDatetime)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getSiteMalfunctionInformation(): Observable<any> {
+    return this.httpService
+      .get("/malfunction")
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+  getPunishEvent(eventType: string, startTime: string, endTime: string, site: string, status: string, time: string, speed: string, method: string): Observable<any> {
+    let query =
+      "?startTime=" + (startTime ? startTime : "") + "&";
+    query += "endTime=" + (endTime ? endTime : "") + "&";
+    query += "site=" + (site ? site : "") + "&";
+    query += "status=" + (status ? status : "") + "&";
+    query += "time=" + (time ? time : "") + "&";
+    query += "speed=" + (speed ? speed : "") + "&";
+    query += "method=" + (method ? method : "");
+
+    return (
+      this.httpService
+        .get("/event/eventType/" + eventType + query)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+
+  getPunishEventExport(eventType: string, startTime: string, endTime: string, site: string, status: string, time: string, speed: string, method: string): Observable<any> {
+    let query =
+      "?startTime=" + (startTime ? startTime : "") + "&";
+    query += "endTime=" + (endTime ? endTime : "") + "&";
+    query += "site=" + (site ? site : "") + "&";
+    query += "status=" + (status ? status : "") + "&";
+    query += "time=" + (time ? time : "") + "&";
+    query += "speed=" + (speed ? speed : "") + "&";
+    query += "method=" + (method ? method : "");
+
+    return (
+      this.httpService
+        .getDownload("/event/eventType/" + eventType + query)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putCheckPunish(eventId: number, law: string): Observable<any> {
+    return (
+      this.httpService
+        .put("/event/" + eventId + "/checkPunish?law=" + law, null)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  putMuticheckPunish(law: string, eventId: any): Observable<any> {
+    const query = "?law=" + (law ? law : "");
+
+    return (
+      this.httpService
+        .put("/event/muti/checkPunish" + query, eventId)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putNopunish(eventId: number, reason: string): Observable<any> {
+    return (
+      this.httpService
+        .put("/event/" + eventId + "/nopunish?reason=" + reason, null)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+
+  putCancel(eventId: number): Observable<any> {
+    return (
+      this.httpService
+        .put("/event/" + eventId + "/cancel", null)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getNotPunishReasonAll(): Observable<any> {
+    return this.httpService
+      .get("/notPunish/all")
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+
+  getEventById(id: string): Observable<any> {
+    return this.httpService
+      .get("/event/" + id)
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+  putEventVehicle(eventId: number, vehicleType: string, vehicleNumber: string): Observable<any> {
+    let query =
+      "?vehicleType=" + (vehicleType ? vehicleType : "") + "&";
+    query += "vehicleNumber=" + (vehicleNumber ? vehicleNumber : "");
+    return (
+      this.httpService
+        .put("/event/" + eventId + "/vehicle" + query, null)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  postReportSiteEventTypes(method: string, siteEventTypesData: SiteEventTypesData): Observable<any> {
+    return (
+      this.httpService
+        .post("/report/site/eventTypes?method=" + method, siteEventTypesData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  postReportMalfunction(method: string, malfunctionData: MalfunctionData): Observable<any> {
+    return (
+      this.httpService
+        .post("/report/malfunction?method=" + method, malfunctionData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  postReportEventType1(method: string, eventTypeData: EventTypeReportData): Observable<any> {
+    return (
+      this.httpService
+        .post("/report/eventType/1?method=" + method, eventTypeData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  postReportEventType2(method: string, eventTypeData: EventTypeReportData): Observable<any> {
+    return (
+      this.httpService
+        .post("/report/eventType/2?method=" + method, eventTypeData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  postReportEventType34(method: string, eventTypeData: EventTypeReportData): Observable<any> {
+    return (
+      this.httpService
+        .post("/report/eventType/34?method=" + method, eventTypeData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  postReportEventType6(method: string, eventTypeData: EventTypeReportData): Observable<any> {
+    return (
+      this.httpService
+        .post("/report/eventType/6?method=" + method, eventTypeData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  private extractData(res: Response) {
+    const body = res.json();
+    return body.Result || [];
+  }
+  private handleErrorObservable(error: Response | any) {
+    console.error(error.message || error);
+    return Observable.throw(error.message || error);
+  }
+}
--- a/src/app/service/helper.service.ts
+++ b/src/app/service/helper.service.ts
@ -0,0 +1,116 @@
+import { Injectable } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { Http, Headers } from "@angular/http";
+@Injectable()
+export class HelperService {
+  status: any[];
+  failureInfo: any[];
+  lightNo: any[];
+  RoleCode: any[];
+  RolePermission: any[];
+  UserCode: any[];
+  GroupCode: any[];
+  VillageInfo: any[];
+  FinishedInfo: any[];
+  MaintenanceProviderInfo: any[];
+  _token = "";
+  _role = "";
+  _id = "";
+  _permissions: string[] = [];
+  // _url = "https://localhost:44306/api";
+
+  _url = "https://172.16.1.49:8443/violation/api";
+  // _url = "https://carviolation.tycg.gov.tw:8443/violation/api";
+
+
+  constructor(private http: Http) {
+    this.setToken(localStorage.getItem("token")),
+      this.setPermission(JSON.parse(localStorage.getItem("pages"))),
+      this.setRole(JSON.parse(localStorage.getItem("role")));
+  }
+
+  setToken(token) {
+    this._token = token;
+  }
+
+  setRole(role) {
+    this._role = role;
+  }
+
+  setId(id) {
+    this._id = id;
+  }
+
+  setPermission(permissions) {
+    this._permissions = permissions;
+  }
+
+  createAuthorizationHeader(headers: Headers) {
+    if (this._token) {
+      headers.append("Authorization", "Bearer " + this._token);
+    }
+  }
+
+  setRoleCodeData() {
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    this.http.get(this._url + "/Role/GetRoleInfoList", { headers: headers }).subscribe(res => {
+      this.RoleCode = res.json().Result;
+    });
+  }
+
+  setUserCodeData() {
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    this.http.get(this._url + "/User/GetUserNameList", { headers: headers }).subscribe(res => {
+      this.UserCode = res.json().Result;
+    });
+  }
+
+  setGroupName() {
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    this.http.get(this._url + "/Group/GetGroupNameList", { headers: headers }).subscribe(res => {
+      this.GroupCode = res.json().Result;
+    });
+  }
+
+  getStatusText(id: number) {
+    return this.status.filter(x => x.Id === id)[0].StatusName;
+  }
+
+  getFailureText(id: number) {
+    return this.failureInfo.filter(x => x.Id === id)[0].FailureInfo;
+  }
+
+  getRoleCodeText(id: number) {
+    return this.RoleCode.filter(x => x.Id === id)[0].RoleName;
+  }
+
+  getUserCodeText(id: number) {
+    const users = this.UserCode.filter(x => x.Id === id);
+    if (users && users.length > 0) {
+      return users[0].UserName;
+    }
+  }
+
+  getGroupCodeText(id: number) {
+    return this.GroupCode.filter(x => x.Id === id)[0].StationName;
+  }
+
+  getVillageCodeText(villageNo: number) {
+    const villages = this.VillageInfo.filter(x => x.VillageNo === villageNo);
+    if (villages && villages.length > 0) {
+      return villages[0].VillageName;
+    }
+  }
+
+  getFinishedCodeText(id: number) {
+    return this.FinishedInfo.filter(x => x.id === id)[0].FinishedItem;
+  }
+
+  getMaintenanceProviderInfo(id: number) {
+    console.log(id);
+    return this.MaintenanceProviderInfo.filter(x => x.id === id)[0].ProviderName;
+  }
+}
--- a/src/app/service/http.service.ts
+++ b/src/app/service/http.service.ts
@ -0,0 +1,90 @@
+import { Injectable } from "@angular/core";
+import { Http, Headers, ResponseContentType } from "@angular/http";
+
+@Injectable()
+export class HttpService {
+  // _url = "https://localhost:44306/api";
+
+  _url = "https://172.16.1.49:8443/violation/api";
+  // _url = "https://carviolation.tycg.gov.tw:8443/violation/api";
+
+  _token = "";
+  _role = "";
+  _id = "";
+  _permissions: string[] = [];
+  blob: Blob;
+  constructor(private http: Http) {
+    this.setToken(localStorage.getItem("token")),
+      this.setPermission(JSON.parse(localStorage.getItem("pages"))),
+      this.setRole(JSON.parse(localStorage.getItem("role")));
+  }
+
+  createAuthorizationHeader(headers: Headers) {
+    if (this._token) {
+      headers.append("Authorization", "Bearer " + this._token);
+    }
+  }
+
+  setToken(token) {
+    this._token = token;
+  }
+
+  setRole(role) {
+    this._role = role;
+  }
+
+  setId(id) {
+    this._id = id;
+  }
+
+  setPermission(permissions) {
+    this._permissions = permissions;
+  }
+  isAvailableLink(link) {
+    return this._permissions.indexOf(link) > -1;
+  }
+
+  get(path) {
+    const fullPath = `${this._url}${path}`;
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    return this.http.get(fullPath, { headers: headers });
+  }
+
+  getDownload(path) {
+    const fullPath = `${this._url}${path}`;
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    return this.http.get(fullPath, { headers: headers } );
+  }
+
+  post(path, data) {
+    const fullPath = `${this._url}${path}`;
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    return this.http.post(fullPath, data, { headers: headers });
+  }
+
+  put(path, data) {
+    const fullPath = `${this._url}${path}`;
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    headers.append("Content-Type", "application/json");
+    return this.http.put(fullPath, data, { headers: headers });
+  }
+
+  delete(path) {
+    const fullPath = `${this._url}${path}`;
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    headers.append("Content-Type", "application/json");
+    return this.http.delete(fullPath, { headers: headers });
+  }
+
+  upload(path, file: FormData) {
+    const fullPath = `${this._url}${path}`;
+    const headers = new Headers();
+    this.createAuthorizationHeader(headers);
+    return this.http.post(fullPath, file, { headers: headers });
+  }
+}
--- a/src/app/service/login.service.ts
+++ b/src/app/service/login.service.ts
@ -0,0 +1,49 @@
+import { Injectable } from "@angular/core";
+import { Http, Headers, Response, RequestOptions } from "@angular/http";
+// tslint:disable-next-line:import-blacklist
+import { Observable } from "rxjs";
+import "rxjs/add/operator/map";
+import "rxjs/add/operator/catch";
+import { LoginData } from "app/data/LoginData";
+import { HttpService } from "./http.service";
+
+@Injectable()
+export class LoginService {
+  constructor(private httpService: HttpService) {}
+
+  postLoginForm(loginData: LoginData): Observable<Response> {
+    return this.httpService.post("/Login/PostLogin", loginData);
+  }
+
+  set token(token) {
+    this.httpService._token = token;
+  }
+
+  set role(role) {
+    this.httpService._role = role;
+  }
+
+  set id(id) {
+    this.httpService._id = id;
+  }
+
+  set permissions(permissions) {
+    this.httpService._permissions = permissions
+      .filter(p => p.Enable)
+      .map(p => `/${p.PageUrl}`);
+    localStorage.setItem(
+      "pages",
+      JSON.stringify(this.httpService._permissions)
+    );
+  }
+
+  logout() {
+    this.httpService._token = "";
+    localStorage.removeItem("id");
+    localStorage.removeItem("role");
+    localStorage.removeItem("token");
+    localStorage.removeItem("name");
+    localStorage.removeItem("pages");
+    localStorage.removeItem("password");
+  }
+}
--- a/src/app/service/mro-data.service.ts
+++ b/src/app/service/mro-data.service.ts
@ -0,0 +1,57 @@
+import { Observable } from "rxjs/Observable";
+import { Injectable } from "@angular/core";
+import { HttpService } from "app/service/http.service";
+import { Http, Headers, Response, RequestOptions } from "@angular/http";
+import "rxjs/add/operator/map";
+import "rxjs/add/operator/catch";
+import { RepairData } from "app/data/RepairData";
+import { TableQueryData } from "../data/TableQueryData";
+
+@Injectable()
+export class MroDataService {
+  constructor(private httpService: HttpService) {}
+
+
+  getAPITableDataList(tableQueryData: TableQueryData, tycgTableName: string, method: string): Observable<any> {
+    let query =
+        "?tycgTableName=" + (tycgTableName ? tycgTableName : "") + "&";
+        query += "term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+        query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+        query += "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+        query += "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+        query += "method=" + (method ? method : "");
+    return (
+        this.httpService
+        .get("/report/tycg" + query)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  postRepairForm(repairData: RepairData): Observable<any> {
+    return (
+      this.httpService
+        .post("/Repair", repairData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getTycgTableName(): Observable<any> {
+    return this.httpService
+      .get("/report/tycg/tableName")
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+
+  private extractData(res: Response) {
+    const body = res.json();
+    return body.Result || [];
+  }
+  private handleErrorObservable(error: Response | any) {
+    console.error(error.message || error);
+    return Observable.throw(error.message || error);
+  }
+}
--- a/src/app/service/set-data.service.ts
+++ b/src/app/service/set-data.service.ts
@ -0,0 +1,178 @@
+import { Injectable } from "@angular/core";
+import { HttpService } from "app/service/http.service";
+import { Http, Headers, Response, RequestOptions } from "@angular/http";
+// tslint:disable-next-line:import-blacklist
+import { Observable } from "rxjs";
+import "rxjs/add/operator/map";
+import "rxjs/add/operator/catch";
+import { TableQueryData } from "../data/TableQueryData";
+import { SiteInformationData } from "app/data/SiteInformationData";
+import { CompanyInformationData } from "../data/CompanyInformationData"
+import { ReasonData } from "app/data/ReasonData";
+
+@Injectable()
+export class SetDataService {
+  constructor(private httpService: HttpService) {}
+
+  getSiteInformations(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+
+    return this.httpService
+      .get("/SiteInformation" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+  postSiteInformations(siteInformationData: SiteInformationData): Observable<any> {
+    return (
+      this.httpService
+        .post("/siteInformation", siteInformationData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getCompanyInformation(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+
+    return this.httpService
+      .get("/companyInformation" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+  deleteCompanyInformationData(id: string): Observable<any> {
+    return (
+      this.httpService
+        .delete("/companyInformation/" + id)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  postCompanyInformation(companyInformationData: CompanyInformationData): Observable<any> {
+    return (
+      this.httpService
+        .post("/companyInformation", companyInformationData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putCompanyInformationData(companyInformationData: CompanyInformationData): Observable<any> {
+    return (
+      this.httpService
+        .put("/companyInformation/" + companyInformationData.id , companyInformationData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putSiteData(siteInformationData: SiteInformationData): Observable<any> {
+    return (
+      this.httpService
+        .put("/siteInformation/" + siteInformationData.Id , siteInformationData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  deleteSiteInformationData(id: string): Observable<any> {
+    return (
+      this.httpService
+        .delete("/siteInformation/" + id)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  postReasonData(reasonData: ReasonData): Observable<any> {
+    return (
+      this.httpService
+        .post("/notPunish", reasonData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  getReasonPageList(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+    return this.httpService
+      .get("/notPunish" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+
+  deleteReasonData(id: string): Observable<any> {
+    return (
+      this.httpService
+        .delete("/notPunish/" + id)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+
+  putReasonData(reasonData: ReasonData): Observable<any> {
+    return (
+      this.httpService
+        .put("/notPunish/" + reasonData.Id , reasonData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getEventTypeId(): Observable<any> {
+    return (
+      this.httpService
+        .get("/eventType/all")
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getCompanyEmail(): Observable<any> {
+    return (
+      this.httpService
+        .get("/companyInformation/all/emailNotNull")
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getCompanyAllInfo(): Observable<any> {
+    return (
+      this.httpService
+        .get("/companyInformation/all")
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  private extractData(res: Response) {
+    const body = res.json();
+    return body.Result || [];
+  }
+  private handleErrorObservable(error: Response | any) {
+    console.error(error.message || error);
+    return Observable.throw(error.message || error);
+  }
+}
--- a/src/app/service/sys-data.service.ts
+++ b/src/app/service/sys-data.service.ts
@ -0,0 +1,312 @@
+import { Injectable } from "@angular/core";
+import { Http, Headers, Response, RequestOptions } from "@angular/http";
+// tslint:disable-next-line:import-blacklist
+import { Observable } from "rxjs";
+import "rxjs/add/operator/map";
+import "rxjs/add/operator/catch";
+import { UserData } from "../data/UserData";
+import { GroupData } from "../data/GroupData";
+import { RoleData } from "../data/RoleData";
+import { PageData } from "../data/PageData";
+import { PremissionData } from "../data/PremissionData";
+import { HttpService } from "app/service/http.service";
+import { NewPwdMailData } from "app/data/NewPwdMailData";
+import { TableQueryData } from "app/data/TableQueryData";
+
+@Injectable()
+export class SysDataService {
+  constructor(private httpService: HttpService) {}
+
+  postUserData(userdata: UserData): Observable<any> {
+    return (
+      this.httpService
+        .post("/User/PostUserDataList", userdata)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getUserData(term: string, page?: number, id?: number): Observable<any> {
+    const queryWord = "?term=" + (term ? term : "") + "&";
+    const queryPage = "page=" + (page ? page : "") + "&";
+    const queryId = "id=" + (id ? id : "") + "&";
+    return this.httpService
+      .get("/User/GetUserDataList" + queryWord + queryPage + queryId)
+      .catch(this.handleErrorObservable);
+  }
+
+  getUserbyId(id: number): Observable<any> {
+    return this.httpService
+      .get("/user/" + id)
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+  getSiteInformations(
+    tableQueryData: TableQueryData,
+    id?: number
+  ): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+
+    return this.httpService
+      .get("/SiteInformation" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+  getSiteInformationAll(): Observable<any> {
+    return this.httpService
+      .get("/siteInformation/all")
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+  getSiteInformationAllByUser(): Observable<any> {
+    return this.httpService
+      .get("/siteInformation/user")
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+
+  getUserSiteInfo(): Observable<any> {
+    return this.httpService
+      .get("/user/GetUserSiteInfo")
+      // .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+
+  getUserPageData(
+    tableQueryData: TableQueryData,
+    id?: number
+  ): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+    const queryId = "id=" + (id ? id : "") + "&";
+    return this.httpService
+      .get("/User/GetUserDataList" + query + queryId)
+      .catch(this.handleErrorObservable);
+  }
+
+  getUserDatabyId(id: number): Observable<UserData[]> {
+    return this.httpService
+      .get("/User/GetUserDataById/" + id)
+      .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+  getExistUserName(account: string): Observable<any> {
+    return (
+      this.httpService
+        .get("/User/GetExistUser?account=" + account)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putUserData(userData: UserData): Observable<any> {
+    return (
+      this.httpService
+        .put("/user/PutUserData/" + userData.Id, userData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putUserStatus(id: number, status: number): Observable<any> {
+    const statusKey = "?status=" + status;
+    return (
+      this.httpService
+        .put("/user/PutUserStatus/" + id + statusKey, null)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putUserPasswordById(id: number): Observable<any> {
+    return (
+      this.httpService
+        .put("/user/PutUserPassword/" + id, null)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  deleteUserData(id: string): Observable<any> {
+    return (
+      this.httpService
+        .delete("/user/DeleteUserData?id=" + id)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putUserPassword(userData: UserData): Observable<any> {
+    return (
+      this.httpService
+        .put("/User/PutUserPassword", userData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  postRoleDataList(roleData: RoleData): Observable<any> {
+    return (
+      this.httpService
+        .post("/Role/PostRoleDataList", roleData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getRoleDataList(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+    return this.httpService
+      .get("/Role/GetRoleDataList" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+  postPageListData(pageData: PageData): Observable<any> {
+    return (
+      this.httpService
+        .post("/System/PostPageListData", pageData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putPageData(pageData: PageData): Observable<any> {
+    return (
+      this.httpService
+        .put("/System/PutPageData/" + pageData.Id, pageData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getPageDataList(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+    return (
+      this.httpService
+        .get("/System/GetPageDataList" + query)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  deletePageData(id: string): Observable<any> {
+    return (
+      this.httpService
+        .delete("/System/DeletePageData/" + id)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+  getAllPagePermission(roleId: number): Observable<any[]> {
+    return this.httpService
+      .get("/Role/GetAllPagePermission/" + roleId)
+      .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+  putPageRoleStatus(premissionData: PremissionData): Observable<any[]> {
+    console.log(`current enable ${premissionData.Enable}`);
+    const body = { ...premissionData, Enable: !premissionData.Enable };
+    console.log("body", body);
+    return this.httpService
+      .put("/Role/PutPageRoleStatus/", body)
+      .map(this.extractData)
+      .catch(this.handleErrorObservable);
+  }
+
+  sendNewPwdMail(newPwdMailData: NewPwdMailData): Observable<any> {
+    return this.httpService
+      .post("/Account/SendNewPwdMail", newPwdMailData)
+      .catch(this.handleErrorObservable);
+  }
+
+  postGroupData(groupData: GroupData): Observable<any> {
+    return (
+      this.httpService
+        .post("/Group/PostGroupData", groupData)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  putGroupData(groupData: GroupData): Observable<any> {
+    return this.httpService
+      .put("/Group/PutGroupData", groupData)
+      .catch(this.handleErrorObservable);
+  }
+
+  getGroupData(tableQueryData: TableQueryData): Observable<any> {
+    let query =
+      "?term=" + (tableQueryData.Term ? tableQueryData.Term : "") + "&";
+    query += "page=" + (tableQueryData.Page ? tableQueryData.Page : "") + "&";
+    query +=
+      "order=" + (tableQueryData.Order ? tableQueryData.Order : "") + "&";
+    query +=
+      "isAsc=" + (tableQueryData.IsAsc ? tableQueryData.IsAsc : "") + "&";
+    return this.httpService
+      .get("/Group/GetGroupDataList" + query)
+      .catch(this.handleErrorObservable);
+  }
+
+  deleteGroupData(id: string): Observable<any> {
+    return (
+      this.httpService
+        .delete("/Group/DeleteGroupData/" + id)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  getGroupMember(
+    term: string,
+    page?: number,
+    groupId?: number
+  ): Observable<any> {
+    let query = "?term=" + (term ? term : "") + "&";
+    query += "page=" + (page ? page : "") + "&";
+    query += "groupId=" + (groupId ? groupId : "") + "&";
+    return (
+      this.httpService
+        .get("/Group/GetGroupMemberList" + query)
+        // .map(this.extractData)
+        .catch(this.handleErrorObservable)
+    );
+  }
+
+  private extractData(res: Response) {
+    const body = res.json();
+    return body.Result || [];
+  }
+  private handleErrorObservable(error: Response | any) {
+    console.error(error.message || error);
+    return Observable.throw(error.message || error);
+  }
+}
--- a/src/app/views/board/board-routing.module.ts
+++ b/src/app/views/board/board-routing.module.ts
@ -0,0 +1,64 @@
+import { NgModule } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+import { AuthGuard } from "app/auth-guard.service";
+import { Board001CreateBoardComponent } from "./board001/board001-create-board.component";
+import { Board001Resolver } from "./board001/board001-resolver.service";
+import { Board001SetBoardComponent } from "./board001/board001-set-board.component";
+import { Board001ViewBoardComponent } from "./board001/board001-view-board.component";
+import { Board001Component } from "./board001/board001.component";
+
+
+
+
+const routes: Routes = [
+  {
+    path: "",
+    data: {
+      title: "公佈欄管理"
+    },
+    children: [
+      {
+        path: "board001",
+        component: Board001Component,
+        resolve: { selectedItem: Board001Resolver },
+        canActivate: [AuthGuard],
+        data: {
+          title: "公佈欄設定"
+        }
+      },
+      {
+        path: "board001-create-board",
+        component: Board001CreateBoardComponent,
+        canActivate: [AuthGuard],
+        data: {
+          title: "新增公佈欄資料"
+        }
+      },
+      {
+        path: "board001-set-board",
+        component: Board001SetBoardComponent,
+        resolve: { selectedItem: Board001Resolver },
+        canActivate: [AuthGuard],
+        data: {
+          title: "修改公佈欄資料"
+        }
+      },
+      {
+        path: "board001-view-board",
+        component: Board001ViewBoardComponent,
+        resolve: { selectedItem: Board001Resolver },
+        canActivate: [AuthGuard],
+        data: {
+          title: "詳細公佈欄資料"
+        }
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: [Board001Resolver]
+})
+export class BoardRoutingModule {}
--- a/src/app/views/board/board.module.ts
+++ b/src/app/views/board/board.module.ts
@ -0,0 +1,43 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { TabsModule } from "ngx-bootstrap/tabs";
+
+import { DataTablesModule } from "angular-datatables";
+import { AgmCoreModule } from "@agm/core";
+import { LoadingModule } from "ngx-loading";
+import { MomentModule } from 'ngx-moment';
+import {MomentTimezoneModule} from 'angular-moment-timezone';
+
+import { BoardRoutingModule } from "./board-routing.module";
+import { Board001Component } from "./board001/board001.component";
+import { Board001CreateBoardComponent } from "./board001/board001-create-board.component";
+import { Board001ViewBoardComponent } from "./board001/board001-view-board.component";
+import { Board001SetBoardComponent } from "./board001/board001-set-board.component";
+import { MyDatePickerModule } from "mydatepicker";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MomentModule,
+    MomentTimezoneModule,
+    BoardRoutingModule,
+    DataTablesModule,
+    MyDatePickerModule,
+    LoadingModule,
+    TabsModule.forRoot(),
+    AgmCoreModule.forRoot({
+      apiKey: "",
+      language: "zh-TW"
+    }),
+    LoadingModule
+  ],
+  declarations: [
+    Board001Component,
+    Board001CreateBoardComponent,
+    Board001SetBoardComponent,
+    Board001ViewBoardComponent,
+  ]
+})
+export class BoardModule {}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export * from './app-breadcrumbs.component';`
				`@ -0,0 +1 @@`
				`export * from './app-sidebar-footer.component';`
				`@ -0,0 +1 @@`
				`export * from './app-sidebar-form.component';`
				`@ -0,0 +1 @@`
				`export * from './app-sidebar-header.component';`
				`@ -0,0 +1 @@`
				`<button class="sidebar-minimizer" type="button" appSidebarMinimizer appBrandMinimizer></button>`
				`@ -0,0 +1 @@`
				`export * from './app-sidebar-minimizer.component';`
				`@ -0,0 +1 @@`
				`export * from './app-sidebar-nav.component';`
				`@ -0,0 +1 @@`
				`export * from "./equal-validator.directive";`