From f867fb7fed885c474dda18e9a9ca7b1d64c9407f Mon Sep 17 00:00:00 2001 From: crupest Date: Fri, 15 Feb 2019 16:08:08 +0800 Subject: Develop front end. --- Timeline/ClientApp/angular.json | 1 - Timeline/ClientApp/package.json | 57 +++++++++++----------- Timeline/ClientApp/src/app/app.component.css | 16 ++++-- Timeline/ClientApp/src/app/app.component.html | 18 ++++++- Timeline/ClientApp/src/app/app.component.ts | 2 + Timeline/ClientApp/src/app/app.module.ts | 11 ++++- .../ClientApp/src/app/home/home.component.html | 25 +--------- .../todo-list-page/todo-list-page.component.css | 0 .../todo-list-page/todo-list-page.component.html | 3 ++ .../todo-list-page.component.spec.ts | 25 ++++++++++ .../app/todo-list-page/todo-list-page.component.ts | 15 ++++++ Timeline/ClientApp/src/index.html | 3 ++ Timeline/ClientApp/src/styles.css | 5 ++ 13 files changed, 119 insertions(+), 62 deletions(-) create mode 100644 Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css create mode 100644 Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html create mode 100644 Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts create mode 100644 Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts (limited to 'Timeline/ClientApp') diff --git a/Timeline/ClientApp/angular.json b/Timeline/ClientApp/angular.json index d1381991..bf8a95ed 100644 --- a/Timeline/ClientApp/angular.json +++ b/Timeline/ClientApp/angular.json @@ -24,7 +24,6 @@ "src/assets" ], "styles": [ - "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [] diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json index 8456cb8e..205874e5 100644 --- a/Timeline/ClientApp/package.json +++ b/Timeline/ClientApp/package.json @@ -12,47 +12,46 @@ }, "private": true, "dependencies": { - "@angular/animations": "7.2.2", - "@angular/common": "7.2.2", - "@angular/compiler": "7.2.2", - "@angular/core": "7.2.2", - "@angular/forms": "7.2.2", - "@angular/http": "7.2.2", - "@angular/platform-browser": "7.2.2", - "@angular/platform-browser-dynamic": "7.2.2", - "@angular/platform-server": "7.2.2", - "@angular/router": "7.2.2", - "@nguniversal/module-map-ngfactory-loader": "7.1.0", + "@angular/animations": "^7.2.4", + "@angular/cdk": "^7.3.2", + "@angular/common": "^7.2.4", + "@angular/compiler": "^7.2.4", + "@angular/core": "^7.2.4", + "@angular/forms": "^7.2.4", + "@angular/http": "^7.2.4", + "@angular/material": "^7.3.2", + "@angular/platform-browser": "^7.2.4", + "@angular/platform-browser-dynamic": "^7.2.4", + "@angular/platform-server": "^7.2.4", + "@angular/router": "^7.2.4", + "@nguniversal/module-map-ngfactory-loader": "^7.1.0", "aspnet-prerendering": "^3.0.1", - "bootstrap": "^4.2.1", "core-js": "^2.6.3", - "jquery": "3.3.1", - "popper.js": "^1.14.6", "rxjs": "^6.3.3", "zone.js": "^0.8.29" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.12.3", - "@angular/cli": "~7.2.3", - "@angular/compiler-cli": "7.2.2", - "@angular/language-service": "^7.2.2", - "@types/jasmine": "~3.3.8", - "@types/jasminewd2": "~2.0.6", - "@types/node": "~10.12.19", - "codelyzer": "~4.5.0", - "jasmine-core": "~3.3.0", - "jasmine-spec-reporter": "~4.2.1", + "@angular-devkit/build-angular": "^0.12.3", + "@angular/cli": "^7.3.1", + "@angular/compiler-cli": "^7.2.4", + "@angular/language-service": "^7.2.4", + "@types/jasmine": "^3.3.8", + "@types/jasminewd2": "^2.0.6", + "@types/node": "^10.12.19", + "codelyzer": "^4.5.0", + "jasmine-core": "^3.3.0", + "jasmine-spec-reporter": "^4.2.1", "karma": "^4.0.0", - "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.4", - "karma-jasmine": "~2.0.1", + "karma-chrome-launcher": "^2.2.0", + "karma-coverage-istanbul-reporter": "^2.0.4", + "karma-jasmine": "^2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "tslint": "^5.12.1", "typescript": "~3.2.4" }, "optionalDependencies": { "node-sass": "^4.9.3", - "protractor": "~5.4.0", - "ts-node": "~5.0.1" + "protractor": "^5.4.0", + "ts-node": "^5.0.1" } } diff --git a/Timeline/ClientApp/src/app/app.component.css b/Timeline/ClientApp/src/app/app.component.css index 63459382..759a30d6 100644 --- a/Timeline/ClientApp/src/app/app.component.css +++ b/Timeline/ClientApp/src/app/app.component.css @@ -1,6 +1,14 @@ -body { - margin: 0; - display: flex; - justify-content: center; +.fill-remaining-space { + flex: 1 1 auto; +} + +a.icp-record { + color: grey; + text-decoration: none; + font-size: 0.8rem; + margin: 0 5vw; } +footer { + display: flex; +} diff --git a/Timeline/ClientApp/src/app/app.component.html b/Timeline/ClientApp/src/app/app.component.html index ae729c0c..fc2d6cfe 100644 --- a/Timeline/ClientApp/src/app/app.component.html +++ b/Timeline/ClientApp/src/app/app.component.html @@ -1,5 +1,19 @@ -
- + + Timeline + TodoList + + + + +
+
+ + diff --git a/Timeline/ClientApp/src/app/app.component.ts b/Timeline/ClientApp/src/app/app.component.ts index 7b0f6728..bba1f59d 100644 --- a/Timeline/ClientApp/src/app/app.component.ts +++ b/Timeline/ClientApp/src/app/app.component.ts @@ -7,4 +7,6 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'app'; + + public isCollapse = false; } diff --git a/Timeline/ClientApp/src/app/app.module.ts b/Timeline/ClientApp/src/app/app.module.ts index c16d8bae..e1f45136 100644 --- a/Timeline/ClientApp/src/app/app.module.ts +++ b/Timeline/ClientApp/src/app/app.module.ts @@ -3,21 +3,28 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule } from '@angular/material'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; +import { TodoListPageComponent } from './todo-list-page/todo-list-page.component'; @NgModule({ declarations: [ AppComponent, - HomeComponent + HomeComponent, + TodoListPageComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, + BrowserAnimationsModule, + MatMenuModule, MatIconModule, MatButtonModule, MatToolbarModule, RouterModule.forRoot([ - { path: '', component: HomeComponent, pathMatch: 'full' } + { path: '', component: HomeComponent, pathMatch: 'full' }, + { path: 'todo', component: TodoListPageComponent} ]) ], providers: [], diff --git a/Timeline/ClientApp/src/app/home/home.component.html b/Timeline/ClientApp/src/app/home/home.component.html index 8515536b..28ab3039 100644 --- a/Timeline/ClientApp/src/app/home/home.component.html +++ b/Timeline/ClientApp/src/app/home/home.component.html @@ -1,26 +1,3 @@ -

+

This page is under construction!

- -

- This line to indicate that ci/cd is working well. -

- -

- To-do list: -

- -
    -
  1. Learn DI and Service module in Angular.
    2. -
  2. Develop basic authentication module.
    3. -
  3. Learn Bootstrap.
    4. -
- -
- - - - - -
{{message}}
-
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css new file mode 100644 index 00000000..e69de29b diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html new file mode 100644 index 00000000..0d005c83 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html @@ -0,0 +1,3 @@ +

+ todo-list-page works! +

diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts new file mode 100644 index 00000000..a74ce3e6 --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TodoListPageComponent } from './todo-list-page.component'; + +describe('TodoListPageComponent', () => { + let component: TodoListPageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TodoListPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TodoListPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts new file mode 100644 index 00000000..37de232b --- /dev/null +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-todo-list-page', + templateUrl: './todo-list-page.component.html', + styleUrls: ['./todo-list-page.component.css'] +}) +export class TodoListPageComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/Timeline/ClientApp/src/index.html b/Timeline/ClientApp/src/index.html index 553e9032..58959f75 100644 --- a/Timeline/ClientApp/src/index.html +++ b/Timeline/ClientApp/src/index.html @@ -7,6 +7,9 @@ + + + Loading... diff --git a/Timeline/ClientApp/src/styles.css b/Timeline/ClientApp/src/styles.css index 90d4ee00..7a81e04c 100644 --- a/Timeline/ClientApp/src/styles.css +++ b/Timeline/ClientApp/src/styles.css @@ -1 +1,6 @@ /* You can add global styles to this file, and also import other style files */ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; + +body { + margin: 0; +} -- cgit v1.2.3