Merge pull request #15 from ssysm/update

Update

.gitignore

@@ -69,4 +69,6 @@ typings/
 /server/public/work/*.jpg
 /server/public/work/*.pdf
 
+/server/etc/cucuImg/*.jpg
+
 *.key

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starrysea-client",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

client/src/app/app-routing.module.ts

@@ -12,7 +12,7 @@ import {UserManagementComponent} from "./view/admin/user-management/user-managem
 import {ActivityManagementComponent} from "./view/admin/activity-management/activity-management.component";
 import {WorkManagementComponent} from "./view/admin/work-management/work-management.component";
 import {AuthComponent} from "./view/admin/auth/auth.component";
-import {AdminGuardService} from "./common/admin-guard.service";
+import {AdminGuardService} from "./common/guard/admin-guard.service";
 import {QaComponent} from "./view/qa/qa.component";
 
 const routes: Routes = [

client/src/app/app.component.html

@@ -1,3 +1,8 @@
+<!--Application Navbar-->
 <app-navbar></app-navbar>
-<router-outlet></router-outlet>
+<!--Routing Entry-->
+<main [@routeAnimation]="getRouteAnimation(o)">
+  <router-outlet #o="outlet"></router-outlet>
+</main>
+<!--Application Footer-->
 <app-footer></app-footer>

client/src/app/app.component.ts

@@ -1,9 +1,11 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit,HostBinding, ViewChild} from '@angular/core';
+import {routeAnimation} from "./common/animation";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  animations:[routeAnimation]
 })
 export class AppComponent implements OnInit{
 
@@ -15,4 +17,9 @@ export class AppComponent implements OnInit{
   ngOnInit(){
     this.loaded = true;
   }
+
+  public getRouteAnimation(outlet) {
+    return outlet.isActivated ? outlet.activatedRoute : '';
+  }
+
 }

client/src/app/app.module.ts

@@ -25,7 +25,7 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {HttpModule, BrowserXhr} from "@angular/http";
 import {cros} from "./common/cros";
 import { FooterComponent } from './view/partical/footer/footer.component';
-import {AdminGuardService} from "./common/admin-guard.service";
+import {AdminGuardService} from "./common/guard/admin-guard.service";
 import { AuthComponent } from './view/admin/auth/auth.component';
 import {AuthService} from "./service/auth.service";
 import {FileInputAccessorModule} from "file-input-accessor";
@@ -36,6 +36,8 @@ import { QaComponent } from './view/qa/qa.component';
 import { QaService } from './service/qa.service';
 import { QaManagementComponent } from './view/admin/qa-management/qa-management.component';
 import { TextSlicePipe } from './common/pipe/text-slice.pipe';
+import { SpinnerComponent } from './view/partical/spinner/spinner.component';
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 
 
 @NgModule({
@@ -59,13 +61,15 @@ import { TextSlicePipe } from './common/pipe/text-slice.pipe';
     QaComponent,
     QaManagementComponent,
     TextSlicePipe,
+    SpinnerComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
     FormsModule,
     HttpModule,
+    BrowserAnimationsModule,
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
   ],
   providers: [

client/src/app/common/animation/index.ts

@@ -0,0 +1 @@
+export * from './route.animation';

client/src/app/common/animation/route.animation.ts

@@ -0,0 +1,51 @@
+import {trigger, animate, transition, style, query, group, keyframes} from '@angular/animations';
+
+export const routeAnimation = trigger('routeAnimation', [
+  transition('* <=> *', [
+    query(':enter, :leave', style({
+        position: 'fixed',
+        width: '100%'
+      })
+      , {
+        optional: true
+      }),
+    group([  // block executes in parallel
+      query(':enter', [
+        animate(300, keyframes([
+          style({
+            opacity: 0,
+            display:'none'
+          }),
+          style({
+            opacity: 0.5,
+            display:'none'
+          }),
+          style({
+            opacity: 1,
+            display:'block'
+          })
+        ])),
+      ], {
+        optional: true
+      }),
+      query(':leave', [
+        animate(300, keyframes([
+          style({
+            opacity: 1,
+            display:'none'
+          }),
+          style({
+            opacity: 0.5,
+            display:'none'
+          }),
+          style({
+            opacity: 0,
+            display:'none'
+          })
+        ]))
+      ], {
+        optional: true
+      }),
+    ])
+  ])
+]);

client/src/app/common/admin-guard.service.ts → client/src/app/common/guard/admin-guard.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import {AuthService} from "../service/auth.service";
+import {AuthService} from "../../service/auth.service";
 import {ActivatedRouteSnapshot, Router, RouterStateSnapshot} from "@angular/router";
 import {Observable} from "rxjs/Observable";
 

client/src/app/view/about/about.component.html

@@ -32,8 +32,8 @@ <h1 class="text-center introh1 h1">About Us</h1>
     <div class="col-md-6 col-sm-12">
       <p class="h5">Latest System Releases: <span class="badge badge-success">{{Version}}</span></p>
       <div style="display: inline">
-        <p style="display: inline">Front-End: <span class="badge badge-success">v1.0.6</span></p>
-        <p style="display: inline">Back-End: <span class="badge badge-success">v1.0.6</span></p>
+        <p style="display: inline">Front-End: <span class="badge badge-success">v1.0.7</span></p>
+        <p style="display: inline">Back-End: <span class="badge badge-success">v1.0.7</span></p>
         <p>Latest Commit: <span class="badge badge-info">{{commit}}</span></p>
       </div>
     </div>

client/src/app/view/about/about.component.spec.ts

@@ -3,11 +3,12 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { AboutComponent } from './about.component';
 import {VersionService} from "../../service/version.service";
 import {HttpModule} from "@angular/http";
+import {By} from "@angular/platform-browser";
 
 describe('AboutComponent', () => {
   let component: AboutComponent;
   let fixture: ComponentFixture<AboutComponent>;
-
+  let compiled:any;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ AboutComponent ],
@@ -21,9 +22,21 @@ describe('AboutComponent', () => {
     fixture = TestBed.createComponent(AboutComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    compiled = fixture.debugElement.nativeElement;
   });
-
-  it('should create', () => {
+  it('should create', async() => {
     expect(component).toBeTruthy();
   });
+  it('should have a About Us Title',()=>{
+    expect(compiled.querySelector('.introh1').textContent).toContain('About Us');
+  });
+  it('should have a blockquote',()=>{
+    expect(compiled.querySelector('.blockquote')).toBeTruthy();
+  });
+  it('should have system info',()=>{
+    expect(compiled.querySelector('#sysInfo')).toBeTruthy();
+  });
+  it('should have a qa entry',()=>{
+    expect(compiled.querySelector('.qBox')).toBeTruthy();
+  })
 });

client/src/app/view/about/about.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import {VersionService} from "../../service/version.service";
 import {Meta,Title} from "@angular/platform-browser";
+import {routeAnimation} from "../../common/animation";
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css']
+  styleUrls: ['./about.component.css'],
+  animations: [routeAnimation],
 })
 export class AboutComponent implements OnInit {
 

client/src/app/view/activity-detail/activity-detail.component.html

@@ -24,3 +24,4 @@
     </div>
   </div>
 </div>
+<app-spinner *ngIf="!fundArr&&!activityData"></app-spinner>

client/src/app/view/activity-detail/activity-detail.component.spec.ts

@@ -5,14 +5,15 @@ import {ActivityService} from "../../service/activity.service";
 import {HttpModule} from "@angular/http";
 import {FundingService} from "../../service/funding.service";
 import {RouterTestingModule} from "@angular/router/testing";
+import {SpinnerComponent} from "../partical/spinner/spinner.component";
 
 describe('ActivityDetailComponent', () => {
   let component: ActivityDetailComponent;
   let fixture: ComponentFixture<ActivityDetailComponent>;
-
+  let compiled: any;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ActivityDetailComponent ],
+      declarations: [ ActivityDetailComponent,SpinnerComponent ],
       providers:[ActivityService,FundingService],
       imports:[HttpModule,RouterTestingModule]
     })
@@ -22,6 +23,7 @@ describe('ActivityDetailComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ActivityDetailComponent);
     component = fixture.componentInstance;
+    compiled = fixture.debugElement.nativeElement;
     fixture.detectChanges();
   });
 

client/src/app/view/activity/activity.component.html

@@ -1,6 +1,6 @@
 <div class="container">
   <div class="title">
-    <h2 class="h1">Activities</h2>
+    <h2 class="h2">Activities</h2>
   </div>
   <div class="activity" *ngIf="activityArr">
     <div class="col-sm-12" *ngFor="let activity of activityArr">
@@ -17,4 +17,5 @@ <h2 class="h1">Activities</h2>
       <hr>
     </div>
   </div>
+  <app-spinner *ngIf="!activityArr"></app-spinner>
 </div>

client/src/app/view/activity/activity.component.spec.ts

@@ -4,14 +4,16 @@ import { ActivityComponent } from './activity.component';
 import {ActivityService} from "../../service/activity.service";
 import {HttpModule} from "@angular/http";
 import {RouterTestingModule} from "@angular/router/testing";
+import {SpinnerComponent} from "../partical/spinner/spinner.component";
 
 describe('ActivityComponent', () => {
   let component: ActivityComponent;
   let fixture: ComponentFixture<ActivityComponent>;
+  let compiled:any;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ActivityComponent ],
+      declarations: [ ActivityComponent,SpinnerComponent ],
       imports:[HttpModule,RouterTestingModule],
       providers:[ActivityService]
     })
@@ -22,9 +24,13 @@ describe('ActivityComponent', () => {
     fixture = TestBed.createComponent(ActivityComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    compiled = fixture.debugElement.nativeElement;
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('should have Activities Title',()=>{
+    expect(compiled.querySelector('.h2').textContent).toContain('Activities')
+  });
 });

client/src/app/view/home/home.component.html

@@ -3,8 +3,7 @@
 </div>
 <div class="intro">
   <h1 class="lead  text-center title">
-    <small style="color:#fff">We Are</small>
-    Starry Sea Volunteers Association
+    <small style="color:#fff">We Are</small> Starry Sea Volunteers Association
   </h1>
   <div style="width: 100%;height: 20vh;"></div>
   <h2 class="lead  text-center title2">Dedicated to delivering the best of LoveLive Sunshine<br>Aqours events related support</h2>

client/src/app/view/home/home.component.spec.ts

@@ -6,7 +6,7 @@ import {RouterTestingModule} from "@angular/router/testing";
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
-
+  let compiled : any;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ HomeComponent ],
@@ -18,10 +18,27 @@ describe('HomeComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
+    compiled = fixture.debugElement.nativeElement;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('should have a bg image',()=>{
+    expect(compiled.querySelector('.aq-bg')).toBeTruthy();
+  });
+  it('should have an intro title',()=>{
+    expect(compiled.querySelector('.title').textContent).toContain('We Are Starry Sea Volunteers Association')
+  });
+  it('should have a intro image',()=>{
+    expect(compiled.querySelector('.img-center').src).toContain('/assets/img/TOW.png')
+  });
+  it('should have a about text',()=>{
+    expect(compiled.querySelector('.about')).toBeTruthy();
+  });
+  it('should have a button that go to about page',()=>{
+    expect(compiled.querySelector('.btn').href).toContain('/about');
+  })
+
 });

client/src/app/view/partical/footer/footer.component.css

@@ -5,6 +5,5 @@
   /* Set the fixed height of the footer here */
   height: 60px;
   line-height: 60px;
-  /* Vertically center the text there */
-  background-color: #f5f5f5;
+  background: #f0f0f0;
 }

client/src/app/view/partical/footer/footer.component.html

@@ -1,5 +1,5 @@
 <footer class="footer">
   <div class="container">
-    <span class="text-center text-muted">&copy;2018-2019 StarrySea</span>
+    <span class="text-center text-dark">&copy;2018-2019 StarrySea</span>
   </div>
 </footer>

client/src/app/view/partical/footer/footer.component.spec.ts

@@ -5,7 +5,7 @@ import { FooterComponent } from './footer.component';
 describe('FooterComponent', () => {
   let component: FooterComponent;
   let fixture: ComponentFixture<FooterComponent>;
-
+  let compiled: any;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ FooterComponent ]
@@ -16,10 +16,14 @@ describe('FooterComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;
+    compiled = fixture.debugElement.nativeElement;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  it('should create copyright text',()=>{
+    expect(compiled.querySelector('.text-center').textContent).toBe('©2018-2019 StarrySea');
+  });
 });