diff --git a/angular.json b/angular.json index 3ba5a39..d4cbf9e 100644 --- a/angular.json +++ b/angular.json @@ -31,7 +31,10 @@ "node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.scss" ], - "scripts": [] + "scripts": [ + "node_modules/jquery/dist/jquery.min.js", + "node_modules/bootstrap/dist/js/bootstrap.min.js" + ] }, "configurations": { "production": { diff --git a/package-lock.json b/package-lock.json index 25737ce..56b7b8f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6674,6 +6674,11 @@ } } }, + "jquery": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz", + "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -7830,6 +7835,29 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ngx-bootstrap-icons": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/ngx-bootstrap-icons/-/ngx-bootstrap-icons-1.2.0.tgz", + "integrity": "sha512-e6AT33wrhZfUEahZoZoVji2Nk2twj0GlPeusf6sW2Ebds9eeN3tBoSCE4kqLEZHS1B/6eOw8jDdOhKYhRPSgLw==", + "requires": { + "tslib": "^2.0.0" + } + }, + "ngx-dropzone": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/ngx-dropzone/-/ngx-dropzone-2.2.2.tgz", + "integrity": "sha512-REuBcPNTY33OtcZD6dw8Fq/jFqwviiYydYaCn74yig8TvDDYhtJ/BPjtvbw7uEgF4BJr/UEHbKMvkdZIyCgsww==", + "requires": { + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -8866,6 +8894,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", diff --git a/package.json b/package.json index 4294002..3911245 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,10 @@ "@angular/platform-browser-dynamic": "~10.2.0", "@angular/router": "~10.2.0", "bootstrap": "^4.5.3", + "jquery": "^3.5.1", + "ngx-bootstrap-icons": "^1.2.0", + "ngx-dropzone": "^2.2.2", + "popper.js": "^1.16.1", "rxjs": "^6.6.3", "tslib": "^2.0.0", "zone.js": "~0.10.2" diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts deleted file mode 100644 index d425c6f..0000000 --- a/src/app/app-routing.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -const routes: Routes = []; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] -}) -export class AppRoutingModule { } diff --git a/src/app/app.component.html b/src/app/app.component.html deleted file mode 100644 index 3ce6f05..0000000 --- a/src/app/app.component.html +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/app/app.component.scss b/src/app/app.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index e508e41..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'fdit-visualisation'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('fdit-visualisation'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement; - expect(compiled.querySelector('.content span').textContent).toContain('fdit-visualisation app is running!'); - }); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts deleted file mode 100644 index d1acb69..0000000 --- a/src/app/app.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] -}) -export class AppComponent { - title = 'fdit-visualisation'; -} diff --git a/src/app/app.module.ts b/src/app/app.module.ts deleted file mode 100644 index d083130..0000000 --- a/src/app/app.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; - -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { NavBarComponent } from './nav-bar/nav-bar.component'; -import { BoatListComponent } from './boat-list/boat-list.component'; -import { MapComponent } from './map/map.component'; -import { GraphComponent } from './graph/graph.component'; - -@NgModule({ - declarations: [ - AppComponent, - NavBarComponent, - BoatListComponent, - MapComponent, - GraphComponent - ], - imports: [ - BrowserModule, - AppRoutingModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/src/app/boat-list/boat-list.component.html b/src/app/boat-list/boat-list.component.html deleted file mode 100644 index 5c2ddc7..0000000 --- a/src/app/boat-list/boat-list.component.html +++ /dev/null @@ -1 +0,0 @@ -

boat-list works!

diff --git a/src/app/boat-list/boat-list.component.scss b/src/app/boat-list/boat-list.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/boat-list/boat-list.component.spec.ts b/src/app/boat-list/boat-list.component.spec.ts deleted file mode 100644 index 25b01d1..0000000 --- a/src/app/boat-list/boat-list.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BoatListComponent } from './boat-list.component'; - -describe('BoatListComponent', () => { - let component: BoatListComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ BoatListComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(BoatListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/boat-list/boat-list.component.ts b/src/app/boat-list/boat-list.component.ts deleted file mode 100644 index 3b45b1e..0000000 --- a/src/app/boat-list/boat-list.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-boat-list', - templateUrl: './boat-list.component.html', - styleUrls: ['./boat-list.component.scss'] -}) -export class BoatListComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/component/app-routing.module.ts b/src/app/component/app-routing.module.ts new file mode 100644 index 0000000..d425c6f --- /dev/null +++ b/src/app/component/app-routing.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/src/app/component/app.component.html b/src/app/component/app.component.html new file mode 100644 index 0000000..435cdfd --- /dev/null +++ b/src/app/component/app.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/component/app.component.scss b/src/app/component/app.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/app.component.spec.ts b/src/app/component/app.component.spec.ts new file mode 100644 index 0000000..e508e41 --- /dev/null +++ b/src/app/component/app.component.spec.ts @@ -0,0 +1,35 @@ +import { TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + RouterTestingModule + ], + declarations: [ + AppComponent + ], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'fdit-visualisation'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('fdit-visualisation'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement; + expect(compiled.querySelector('.content span').textContent).toContain('fdit-visualisation app is running!'); + }); +}); diff --git a/src/app/component/app.component.ts b/src/app/component/app.component.ts new file mode 100644 index 0000000..d1acb69 --- /dev/null +++ b/src/app/component/app.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +export class AppComponent { + title = 'fdit-visualisation'; +} diff --git a/src/app/component/app.module.ts b/src/app/component/app.module.ts new file mode 100644 index 0000000..d84e419 --- /dev/null +++ b/src/app/component/app.module.ts @@ -0,0 +1,34 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule } from '@angular/core'; +import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'; + +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; +import { NavBarComponent } from './nav-bar/nav-bar.component'; +import { MapComponent } from './map/map.component'; +import { GraphComponent } from './graph/graph.component'; +import { ProgressComponent } from './import-vessels/progress/progress.component'; +import { ImportVesselsComponent } from './import-vessels/import-vessels.component'; +import { ImportVesselsDirective } from './import-vessels/import-vessels.directive'; +import { ListVesselComponent } from './list-vessel/list-vessel.component'; + +@NgModule({ + declarations: [ + AppComponent, + NavBarComponent, + MapComponent, + GraphComponent, + ProgressComponent, + ImportVesselsComponent, + ImportVesselsDirective, + ListVesselComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + NgxBootstrapIconsModule.pick(allIcons) + ], + providers: [], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/src/app/component/graph/graph.component.html b/src/app/component/graph/graph.component.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/graph/graph.component.scss b/src/app/component/graph/graph.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/graph/graph.component.spec.ts b/src/app/component/graph/graph.component.spec.ts new file mode 100644 index 0000000..99783d4 --- /dev/null +++ b/src/app/component/graph/graph.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GraphComponent } from './graph.component'; + +describe('GraphComponent', () => { + let component: GraphComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ GraphComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GraphComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/graph/graph.component.ts b/src/app/component/graph/graph.component.ts new file mode 100644 index 0000000..ae46986 --- /dev/null +++ b/src/app/component/graph/graph.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-graph', + templateUrl: './graph.component.html', + styleUrls: ['./graph.component.scss'] +}) +export class GraphComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/component/import-vessels/import-vessels.component.html b/src/app/component/import-vessels/import-vessels.component.html new file mode 100644 index 0000000..6c61a16 --- /dev/null +++ b/src/app/component/import-vessels/import-vessels.component.html @@ -0,0 +1,22 @@ +
+ + +

Drag and drop file here

+

or

+ +
+
+
+ file +
+

+ {{ file?.name }} +

+

+ {{ formatBytes(file?.size) }} +

+ +
+ file +
+
diff --git a/src/app/component/import-vessels/import-vessels.component.scss b/src/app/component/import-vessels/import-vessels.component.scss new file mode 100644 index 0000000..62b77d4 --- /dev/null +++ b/src/app/component/import-vessels/import-vessels.component.scss @@ -0,0 +1,126 @@ + +.container { + width: 450px; + height: 200px; + padding: 2rem; + text-align: center; + //border: dashed 1px #979797; + position: relative; + margin: 0 auto; + + input { + opacity: 0; + position: absolute; + z-index: 2; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + + label { + color: white; + width: 183px; + height: 44px; + border-radius: 21.5px; + background-color: #db202f; + padding: 8px 16px; + } + + h3 { + font-size: 20px; + font-weight: 600; + color: #38424c; + } +} + +.fileover { + animation: shake 1s; + animation-iteration-count: infinite; +} + +.files-list { + margin-top: 1.5rem; + + .single-file { + display: flex; + padding: 0.5rem; + justify-content: space-between; + align-items: center; + border: dashed 1px #979797; + margin-bottom: 1rem; + + img.delete { + margin-left: 0.5rem; + cursor: pointer; + align-self: flex-end; + } + + flex-grow: 1; + + .name { + font-size: 14px; + font-weight: 500; + color: #353f4a; + margin: 0; + } + + .size { + font-size: 12px; + font-weight: 500; + color: #a4a4a4; + margin: 0 0 0.25rem; + } + + .info { + width: 100% + } + } +} + +/* Shake animation */ +@keyframes shake { + 0% { + transform: translate(1px, 1px) rotate(0deg); + } + + 10% { + transform: translate(-1px, -2px) rotate(-1deg); + } + + 20% { + transform: translate(-3px, 0px) rotate(1deg); + } + + 30% { + transform: translate(3px, 2px) rotate(0deg); + } + + 40% { + transform: translate(1px, -1px) rotate(1deg); + } + + 50% { + transform: translate(-1px, 2px) rotate(-1deg); + } + + 60% { + transform: translate(-3px, 1px) rotate(0deg); + } + + 70% { + transform: translate(3px, 1px) rotate(-1deg); + } + + 80% { + transform: translate(-1px, -1px) rotate(1deg); + } + + 90% { + transform: translate(1px, 2px) rotate(0deg); + } + + 100% { + transform: translate(1px, -2px) rotate(-1deg); + } +} diff --git a/src/app/component/import-vessels/import-vessels.component.spec.ts b/src/app/component/import-vessels/import-vessels.component.spec.ts new file mode 100644 index 0000000..3e51769 --- /dev/null +++ b/src/app/component/import-vessels/import-vessels.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImportVesselsComponent } from './import-vessels.component'; + +describe('ImportVesselsComponent', () => { + let component: ImportVesselsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ImportVesselsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ImportVesselsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/import-vessels/import-vessels.component.ts b/src/app/component/import-vessels/import-vessels.component.ts new file mode 100644 index 0000000..88cdcd9 --- /dev/null +++ b/src/app/component/import-vessels/import-vessels.component.ts @@ -0,0 +1,92 @@ +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {VesselsService} from '../../service/vessels.service'; +import {Vessel} from '../../model/vessel'; + +@Component({ + selector: 'app-import-vessels', + templateUrl: './import-vessels.component.html', + styleUrls: ['./import-vessels.component.scss'] +}) +export class ImportVesselsComponent implements OnInit { + vessels: Map; + + + constructor(private vesselsService: VesselsService) { + } + + @ViewChild('fileDropRef', {static: false}) fileDropEl: ElementRef; + files: any[] = []; + + ngOnInit(): void { + this.vesselsService.currentVessels.subscribe(vessels => this.vessels = vessels); + } + + /** + * on file drop handler + */ + onFileDropped($event): void { + this.prepareFilesList($event); + } + + /** + * handle file from browsing + */ + fileBrowseHandler(files): void { + this.prepareFilesList(files); + } + + /** + * Delete file from files list + * @param index (File index) + */ + deleteFile(index: number): void { + if (this.files[index].progress < 100) { + return; + } + this.files.splice(index, 1); + } + + + uploadFilesSimulator(index: number): void { + const fileReader = new FileReader(); + let nbLine: number; + + fileReader.onload = (e) => { + const lines: string[] = (fileReader.result as string).split('\n'); + nbLine = lines.length; + for (const line of lines) { + const splitLine = line.split(','); + const newVessel = new Vessel(splitLine); + this.vessels.set(Number(newVessel.mmsi), newVessel); + } + }; + + fileReader.onprogress = (e ) => { + if (e.lengthComputable) { + this.files[index].progress = Math.round(((e.loaded / e.total) * 100)); + } + }; + + fileReader.readAsText(this.files[index]); + } + + prepareFilesList(files: Array): void { + for (const item of files) { + item.progress = 0; + this.files.push(item); + } + this.fileDropEl.nativeElement.value = ''; + this.uploadFilesSimulator(0); + } + + formatBytes(bytes, decimals = 2): string { + if (bytes === 0) { + return '0 Bytes'; + } + const k = 1024; + const dm = decimals <= 0 ? 0 : decimals; + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; + } +} diff --git a/src/app/component/import-vessels/import-vessels.directive.spec.ts b/src/app/component/import-vessels/import-vessels.directive.spec.ts new file mode 100644 index 0000000..5c04924 --- /dev/null +++ b/src/app/component/import-vessels/import-vessels.directive.spec.ts @@ -0,0 +1,8 @@ +import { ImportVesselsDirective } from './import-vessels.directive'; + +describe('ImportVesselsDirective', () => { + it('should create an instance', () => { + const directive = new ImportVesselsDirective(); + expect(directive).toBeTruthy(); + }); +}); diff --git a/src/app/component/import-vessels/import-vessels.directive.ts b/src/app/component/import-vessels/import-vessels.directive.ts new file mode 100644 index 0000000..8f18100 --- /dev/null +++ b/src/app/component/import-vessels/import-vessels.directive.ts @@ -0,0 +1,35 @@ +import {Directive, EventEmitter, HostBinding, HostListener, Output} from '@angular/core'; + +@Directive({ + selector: '[appImportVessels]' +}) +export class ImportVesselsDirective { + + @HostBinding('class.fileover') fileOver: boolean; + @Output() fileDropped = new EventEmitter(); + + @HostListener('dragover', ['$event']) + onDragOver(evt): void { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = true; + } + + @HostListener('dragleave', ['$event']) + public onDragLeave(evt): void { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = false; + } + + @HostListener('drop', ['$event']) + public ondrop(evt): void { + evt.preventDefault(); + evt.stopPropagation(); + this.fileOver = false; + const files = evt.dataTransfer.files; + if (files.length > 0) { + this.fileDropped.emit(files); + } + } +} diff --git a/src/app/component/import-vessels/progress/progress.component.html b/src/app/component/import-vessels/progress/progress.component.html new file mode 100644 index 0000000..fa1a5a9 --- /dev/null +++ b/src/app/component/import-vessels/progress/progress.component.html @@ -0,0 +1,4 @@ +
+
+
+
diff --git a/src/app/component/import-vessels/progress/progress.component.scss b/src/app/component/import-vessels/progress/progress.component.scss new file mode 100644 index 0000000..a9cb2df --- /dev/null +++ b/src/app/component/import-vessels/progress/progress.component.scss @@ -0,0 +1,19 @@ +.progress-cont { + height: 7px; + width: 100%; + border-radius: 4px; + background-color: #d0d0d0; + position: relative; + + .progress { + width: 0; + height: 100%; + position: absolute; + z-index: 1; + top: 0; + left: 0; + border-radius: 4px; + background-color: #4c97cb; + transition: 0.5s all; + } +} diff --git a/src/app/component/import-vessels/progress/progress.component.spec.ts b/src/app/component/import-vessels/progress/progress.component.spec.ts new file mode 100644 index 0000000..6003cbc --- /dev/null +++ b/src/app/component/import-vessels/progress/progress.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProgressComponent } from './progress.component'; + +describe('ProgressComponent', () => { + let component: ProgressComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProgressComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ProgressComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/import-vessels/progress/progress.component.ts b/src/app/component/import-vessels/progress/progress.component.ts new file mode 100644 index 0000000..54f51cf --- /dev/null +++ b/src/app/component/import-vessels/progress/progress.component.ts @@ -0,0 +1,15 @@ +import {Component, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-progress', + templateUrl: './progress.component.html', + styleUrls: ['./progress.component.scss'] +}) +export class ProgressComponent implements OnInit { + @Input() progress = 0; + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/component/list-vessel/list-vessel.component.html b/src/app/component/list-vessel/list-vessel.component.html new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/list-vessel/list-vessel.component.scss b/src/app/component/list-vessel/list-vessel.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/list-vessel/list-vessel.component.spec.ts b/src/app/component/list-vessel/list-vessel.component.spec.ts new file mode 100644 index 0000000..338d26b --- /dev/null +++ b/src/app/component/list-vessel/list-vessel.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ListVesselComponent } from './list-vessel.component'; + +describe('ListVesselComponent', () => { + let component: ListVesselComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ListVesselComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ListVesselComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/list-vessel/list-vessel.component.ts b/src/app/component/list-vessel/list-vessel.component.ts new file mode 100644 index 0000000..42235c0 --- /dev/null +++ b/src/app/component/list-vessel/list-vessel.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-list-vessel', + templateUrl: './list-vessel.component.html', + styleUrls: ['./list-vessel.component.scss'] +}) +export class ListVesselComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/component/map/map.component.html b/src/app/component/map/map.component.html new file mode 100644 index 0000000..088f942 --- /dev/null +++ b/src/app/component/map/map.component.html @@ -0,0 +1 @@ +

map works!

diff --git a/src/app/component/map/map.component.scss b/src/app/component/map/map.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/map/map.component.spec.ts b/src/app/component/map/map.component.spec.ts new file mode 100644 index 0000000..f163147 --- /dev/null +++ b/src/app/component/map/map.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MapComponent } from './map.component'; + +describe('MapComponent', () => { + let component: MapComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MapComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MapComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/map/map.component.ts b/src/app/component/map/map.component.ts new file mode 100644 index 0000000..0a3a763 --- /dev/null +++ b/src/app/component/map/map.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-map', + templateUrl: './map.component.html', + styleUrls: ['./map.component.scss'] +}) +export class MapComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/component/nav-bar/nav-bar.component.html b/src/app/component/nav-bar/nav-bar.component.html new file mode 100644 index 0000000..7f8529e --- /dev/null +++ b/src/app/component/nav-bar/nav-bar.component.html @@ -0,0 +1,45 @@ + + + + + diff --git a/src/app/component/nav-bar/nav-bar.component.scss b/src/app/component/nav-bar/nav-bar.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/component/nav-bar/nav-bar.component.spec.ts b/src/app/component/nav-bar/nav-bar.component.spec.ts new file mode 100644 index 0000000..94e5b30 --- /dev/null +++ b/src/app/component/nav-bar/nav-bar.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NavBarComponent } from './nav-bar.component'; + +describe('NavBarComponent', () => { + let component: NavBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NavBarComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NavBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/nav-bar/nav-bar.component.ts b/src/app/component/nav-bar/nav-bar.component.ts new file mode 100644 index 0000000..056f8f5 --- /dev/null +++ b/src/app/component/nav-bar/nav-bar.component.ts @@ -0,0 +1,15 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-nav-bar', + templateUrl: './nav-bar.component.html', + styleUrls: ['./nav-bar.component.scss'] +}) +export class NavBarComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/graph/graph.component.html b/src/app/graph/graph.component.html deleted file mode 100644 index 5989ffa..0000000 --- a/src/app/graph/graph.component.html +++ /dev/null @@ -1 +0,0 @@ -

graph works!

diff --git a/src/app/graph/graph.component.scss b/src/app/graph/graph.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/graph/graph.component.spec.ts b/src/app/graph/graph.component.spec.ts deleted file mode 100644 index 99783d4..0000000 --- a/src/app/graph/graph.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GraphComponent } from './graph.component'; - -describe('GraphComponent', () => { - let component: GraphComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ GraphComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(GraphComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/graph/graph.component.ts b/src/app/graph/graph.component.ts deleted file mode 100644 index ae46986..0000000 --- a/src/app/graph/graph.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-graph', - templateUrl: './graph.component.html', - styleUrls: ['./graph.component.scss'] -}) -export class GraphComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html deleted file mode 100644 index 088f942..0000000 --- a/src/app/map/map.component.html +++ /dev/null @@ -1 +0,0 @@ -

map works!

diff --git a/src/app/map/map.component.scss b/src/app/map/map.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/map/map.component.spec.ts b/src/app/map/map.component.spec.ts deleted file mode 100644 index f163147..0000000 --- a/src/app/map/map.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MapComponent } from './map.component'; - -describe('MapComponent', () => { - let component: MapComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ MapComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MapComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts deleted file mode 100644 index 0a3a763..0000000 --- a/src/app/map/map.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-map', - templateUrl: './map.component.html', - styleUrls: ['./map.component.scss'] -}) -export class MapComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/model/vessel.spec.ts b/src/app/model/vessel.spec.ts new file mode 100644 index 0000000..08fc35e --- /dev/null +++ b/src/app/model/vessel.spec.ts @@ -0,0 +1,7 @@ +import { Vessel } from './vessel'; + +describe('Vessel', () => { + // it('should create an instance', () => { + // expect(new Vessel()).toBeTruthy(); + // }); +}); diff --git a/src/app/model/vessel.ts b/src/app/model/vessel.ts new file mode 100644 index 0000000..8780293 --- /dev/null +++ b/src/app/model/vessel.ts @@ -0,0 +1,38 @@ +export class Vessel { + mmsi: string; + time: string; + latitude: string; + longitude: string; + speedOverGround: string; + courseOverGround: string; + heading: string; + vesselName: string; + imo: string; + callSign: string; + vesselType: string; + status: string; + length: string; + width: string; + draft: string; + cargo: string; + + + constructor(splitLine: string[]) { + this.mmsi = splitLine[0]; + this.time = splitLine[1]; + this.latitude = splitLine[2]; + this.longitude = splitLine[3]; + this.speedOverGround = splitLine[4]; + this.courseOverGround = splitLine[5]; + this.heading = splitLine[6]; + this.vesselName = splitLine[7]; + this.imo = splitLine[8]; + this.callSign = splitLine[9]; + this.vesselType = splitLine[10]; + this.status = splitLine[11]; + this.length = splitLine[12]; + this.width = splitLine[13]; + this.draft = splitLine[14]; + this.cargo = splitLine[15]; + } +} diff --git a/src/app/nav-bar/nav-bar.component.html b/src/app/nav-bar/nav-bar.component.html deleted file mode 100644 index 108f6fd..0000000 --- a/src/app/nav-bar/nav-bar.component.html +++ /dev/null @@ -1 +0,0 @@ -

nav-bar works!

diff --git a/src/app/nav-bar/nav-bar.component.scss b/src/app/nav-bar/nav-bar.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/nav-bar/nav-bar.component.spec.ts b/src/app/nav-bar/nav-bar.component.spec.ts deleted file mode 100644 index 94e5b30..0000000 --- a/src/app/nav-bar/nav-bar.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { NavBarComponent } from './nav-bar.component'; - -describe('NavBarComponent', () => { - let component: NavBarComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ NavBarComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(NavBarComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/nav-bar/nav-bar.component.ts b/src/app/nav-bar/nav-bar.component.ts deleted file mode 100644 index 6082d5b..0000000 --- a/src/app/nav-bar/nav-bar.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-nav-bar', - templateUrl: './nav-bar.component.html', - styleUrls: ['./nav-bar.component.scss'] -}) -export class NavBarComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/service/vessels.service.spec.ts b/src/app/service/vessels.service.spec.ts new file mode 100644 index 0000000..7fa20a0 --- /dev/null +++ b/src/app/service/vessels.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { VesselsService } from './vessels.service'; + +describe('VesselsService', () => { + let service: VesselsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(VesselsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/service/vessels.service.ts b/src/app/service/vessels.service.ts new file mode 100644 index 0000000..b41d249 --- /dev/null +++ b/src/app/service/vessels.service.ts @@ -0,0 +1,18 @@ +import {Injectable} from '@angular/core'; +import {BehaviorSubject, Observable} from 'rxjs'; +import {Vessel} from '../model/vessel'; + +@Injectable({ + providedIn: 'root' +}) +export class VesselsService { + private vessels = new BehaviorSubject(new Map()); + currentVessels = this.vessels.asObservable(); + + constructor() { + } + + changeVesselsSet(newVessels: Map): void { + this.vessels.next(newVessels); + } +} diff --git a/src/assets/ic-delete-file.svg b/src/assets/ic-delete-file.svg new file mode 100644 index 0000000..cde93d3 --- /dev/null +++ b/src/assets/ic-delete-file.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/ic-file.svg b/src/assets/ic-file.svg new file mode 100644 index 0000000..36b32e7 --- /dev/null +++ b/src/assets/ic-file.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/ic-upload-file.svg b/src/assets/ic-upload-file.svg new file mode 100644 index 0000000..bda0c72 --- /dev/null +++ b/src/assets/ic-upload-file.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index c7b673c..d8655f1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,7 @@ import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import { AppModule } from './app/component/app.module'; import { environment } from './environments/environment'; if (environment.production) {