Merge pull request #114 from delphi-hub/feature/newUI

Feature/new ui

Author: janniclas

client/package-lock.json

@@ -10,38 +10,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.1",
-    "@angular/cdk": "^7.2.1",
-    "@angular/common": "^7.2.1",
-    "@angular/compiler": "^7.2.1",
-    "@angular/core": "^7.2.1",
-    "@angular/forms": "^7.2.1",
-    "@angular/http": "^7.2.1",
-    "@angular/material": "^7.2.1",
-    "@angular/platform-browser": "^7.2.1",
-    "@angular/platform-browser-dynamic": "^7.2.1",
-    "@angular/router": "^7.2.1",
-    "@ng-bootstrap/ng-bootstrap": "^4.0.1",
-    "bootstrap": "^4.1.3",
-    "core-js": "^2.6.2",
-    "cytoscape": "^3.3.2",
+    "@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/router": "^7.2.4",
+    "@ng-bootstrap/ng-bootstrap": "^4.0.3",
+    "bootstrap": "^4.3.1",
+    "core-js": "^2.6.4",
+    "cytoscape": "^3.4.1",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "jquery": "^3.3.1",
     "material-design-icons": "^3.0.1",
-    "popper.js": "^1.14.6",
-    "rxjs": "^6.3.3",
-    "zone.js": "^0.8.28"
+    "popper.js": "^1.14.7",
+    "rxjs": "^6.4.0",
+    "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.12.2",
-    "@angular/cli": "^7.2.2",
-    "@angular/compiler-cli": "^7.2.1",
-    "@angular/language-service": "^7.2.1",
+    "@angular-devkit/build-angular": "^0.12.4",
+    "@angular/cli": "^7.3.1",
+    "@angular/compiler-cli": "^7.2.4",
+    "@angular/language-service": "^7.2.4",
     "@types/cytoscape": "^3.2.9",
-    "@types/jasmine": "^3.3.5",
+    "@types/jasmine": "^3.3.9",
     "@types/jasminewd2": "^2.0.6",
-    "@types/node": "^10.12.18",
+    "@types/node": "^10.12.26",
     "codelyzer": "^4.5.0",
     "jasmine-core": "^3.3.0",
     "jasmine-spec-reporter": "^4.2.1",
@@ -55,6 +55,6 @@
     "protractor": "^5.4.1",
     "ts-node": "^7.0.1",
     "tslint": "^5.12.1",
-    "typescript": "^3.2.2"
+    "typescript": "^3.2.4"
   }
 }

client/package.json

@@ -26,11 +26,12 @@ import { HttpClientModule } from '@angular/common/http';
 import { HelpComponent } from './help/help.component';
 
 
+
 @NgModule({
   declarations: [
     AppComponent,
     LandingPageComponent,
-    HelpComponent,
+    HelpComponent
   ],
   imports: [
     DashboardModule,

client/src/app/app.module.ts

@@ -12,5 +12,5 @@ <h2 mat-dialog-title>Add Instance</h2>
 </div>
 <mat-dialog-actions>
 	<button mat-raised-button color="primary" [disabled]="!formControl.valid" [mat-dialog-close]="1" id="confirmButton" (click)="onConfirmAddInstance()">Add</button>
-	<button mat-raised-button (click)="onCloseCancle()">Cancle</button>
+	<button mat-raised-button (click)="onCloseCancel()">Cancel</button>
 </mat-dialog-actions>

client/src/app/dashboard/add-dialog/add-dialog.component.html

@@ -46,7 +46,7 @@ describe('AddDialogComponent', () => {
     });
 
   it('should check for button inside the Add dialog', () => {
-    component.onCloseCancle();
+    component.onCloseCancel();
     expect(mockDialogRef.close).toHaveBeenCalled();
   });
 });

client/src/app/dashboard/add-dialog/add-dialog.component.spec.ts

@@ -33,8 +33,8 @@ export class AddDialogComponent implements OnInit {
     });
   }
 
-  onCloseCancle() {
-    this.thisDialogRef.close('CancleAdd');
+  onCloseCancel() {
+    this.thisDialogRef.close('CancelAdd');
 
   }
 

client/src/app/dashboard/add-dialog/add-dialog.component.ts

@@ -16,9 +16,7 @@
   ~ limitations under the License.
   -->
 
-<h2> Crawler Details</h2>
+<h4> Crawler Details</h4>
 <div class="container">
-    <div class="row">
-        <app-table-all type="Crawler" [dataArray] = "tableData"> </app-table-all>  
-   </div>
 </div>
+

client/src/app/dashboard/crawler/crawler.component.html

@@ -17,38 +17,28 @@
  */
 
 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { MatTableModule, MatInputModule, MatPaginatorModule} from '@angular/material';
-import { MatFormFieldModule} from '@angular/material/form-field';
-import { MatCheckboxModule} from '@angular/material/checkbox';
-import { MatIconModule} from '@angular/material/icon';
-import { MatDialogModule} from '@angular/material/dialog';
-import { TableAllComponent } from '../table-all/table-all.component';
 import { CrawlerComponent } from './crawler.component';
-import { ModelService } from 'src/app/model/model.service';
-
 
 describe('CrawlerComponent', () => {
   let fixture: ComponentFixture<CrawlerComponent>;
+  let component: CrawlerComponent;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CrawlerComponent, TableAllComponent],
-      imports: [HttpClientTestingModule, HttpClientModule, BrowserAnimationsModule,
-         MatTableModule, MatInputModule, MatFormFieldModule, MatCheckboxModule, MatPaginatorModule, MatIconModule, MatDialogModule]
+      declarations: [ CrawlerComponent],
+      imports: [BrowserAnimationsModule]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CrawlerComponent);
+    component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it(`should create`, async(inject([HttpTestingController, ModelService],
-    (modelService: ModelService) => {
-      expect(modelService).toBeTruthy();
-  })));
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

client/src/app/dashboard/crawler/crawler.component.spec.ts

@@ -17,8 +17,6 @@
  */
 
 import {Component, OnInit} from '@angular/core';
-import { Instance, ComponentType, ComponentTypeEnum} from '../../model/models/instance';
-import { ModelService } from 'src/app/model/model.service';
 
 
 @Component({
@@ -28,18 +26,12 @@ import { ModelService } from 'src/app/model/model.service';
 })
 export class CrawlerComponent implements OnInit {
 
-  // this array is inserted into the table all component in the html code
-  tableData: Instance[];
-  compType: ComponentType;
+  constructor() {
 
-  constructor(private modelService: ModelService) {
-    this.tableData = [];
   }
 
   ngOnInit() {
-    this.modelService.getObservableForInstances().subscribe(() => {
-      this.tableData = this.modelService.getComponentsByType(ComponentTypeEnum.Crawler);
-    });
+
   }
 
 }

client/src/app/dashboard/crawler/crawler.component.ts

@@ -16,3 +16,18 @@
  * limitations under the License.
  */
 
+ .alignHeading{
+     text-align: center;
+ }
+
+ .mat-36 {
+    font-size: 36px ;
+    height: 36px ;
+    width: 36px ;
+    }
+
+.topSpace{
+    margin-top:20px;
+}
+
+