diff --git a/package-lock.json b/package-lock.json index 56b7b8f..5e21bfd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1746,6 +1746,14 @@ "@types/jasmine": "*" } }, + "@types/jquery": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.3.tgz", + "integrity": "sha512-IENpHTjGksr2wQS6ZO8eMIE0tIB22Ywg+n3/yAWCa56VSZ26phcwAbFdh9+VNUWk7e83qB27QLax3Rf4G92Y9A==", + "requires": { + "@types/sizzle": "*" + } + }, "@types/json-schema": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz", @@ -1759,9 +1767,9 @@ "dev": true }, "@types/node": { - "version": "12.19.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.1.tgz", - "integrity": "sha512-/xaVmBBjOGh55WCqumLAHXU9VhjGtmyTGqJzFBXRWZzByOXI5JAJNx9xPVGEsNizrNwcec92fQMj458MWfjN1A==", + "version": "12.19.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.19.2.tgz", + "integrity": "sha512-SRH6QM0IMOBBFmDiJ75vlhcbUEYEquvSuhsVW9ijG20JvdFTfOrB1p6ddZxz5y/JNnbf+9HoHhjhOVSX2hsJyA==", "dev": true }, "@types/q": { @@ -1776,6 +1784,11 @@ "integrity": "sha512-tGomyEuzSC1H28y2zlW6XPCaDaXFaD6soTdb4GNdmte2qfHtrKqhy0ZFs4r/1hpazCfEZqeTSRLvSasmEx89uw==", "dev": true }, + "@types/sizzle": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", + "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==" + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", @@ -2106,6 +2119,21 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "angular-split": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/angular-split/-/angular-split-4.0.0.tgz", + "integrity": "sha512-HiTEazVlnpovjeIL0gEgOWdfjTcm8/hdhtOx8rkLJTN//uc9ImExVXnVRBGZwAPeAHMJ8O+8IJWizpzIhRwk/g==", + "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==" + } + } + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -7864,6 +7892,14 @@ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", "dev": true }, + "ninja-splitter": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/ninja-splitter/-/ninja-splitter-1.1.3.tgz", + "integrity": "sha512-qpDVIVD0ZWjVAu0tLiEOUgwWhx7jBOSW9aiES2fqFO+EGKgl+zFjj6uVBIMcz+b7rN8TUVuH21pCG4vCB2AkCA==", + "requires": { + "tslib": "^2.0.0" + } + }, "node-fetch-npm": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz", @@ -11578,6 +11614,11 @@ "extend-shallow": "^3.0.0" } }, + "split.js": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.6.2.tgz", + "integrity": "sha512-72C7zcQePzlmWqPOKkB2Ro0sUmnWSx+qEWXjLJKk6Qp4jAkFRz1hJgJb+ay6ZQyz/Aw9r8N/PZiCEKbPVpFoDQ==" + }, "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -12281,9 +12322,9 @@ "dev": true }, "typescript": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz", - "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.5.tgz", + "integrity": "sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==", "dev": true }, "ua-parser-js": { diff --git a/package.json b/package.json index 3911245..f692b2f 100644 --- a/package.json +++ b/package.json @@ -19,12 +19,16 @@ "@angular/platform-browser": "~10.2.0", "@angular/platform-browser-dynamic": "~10.2.0", "@angular/router": "~10.2.0", + "@types/jquery": "^3.5.3", + "angular-split": "^4.0.0", "bootstrap": "^4.5.3", "jquery": "^3.5.1", "ngx-bootstrap-icons": "^1.2.0", "ngx-dropzone": "^2.2.2", + "ninja-splitter": "^1.1.3", "popper.js": "^1.16.1", "rxjs": "^6.6.3", + "split.js": "^1.6.2", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, @@ -32,9 +36,9 @@ "@angular-devkit/build-angular": "~0.1002.0", "@angular/cli": "~10.2.0", "@angular/compiler-cli": "~10.2.0", - "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", + "@types/node": "^12.19.2", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", @@ -46,6 +50,6 @@ "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", - "typescript": "~4.0.2" + "typescript": "^4.0.5" } } diff --git a/src/app/component/app.component.html b/src/app/component/app.component.html index e781435..5a44dbd 100644 --- a/src/app/component/app.component.html +++ b/src/app/component/app.component.html @@ -1,3 +1,20 @@ - + +
+ + + + + + + + map + + + Graph + + + + +
diff --git a/src/app/component/app.component.scss b/src/app/component/app.component.scss index e69de29..cd3a64b 100644 --- a/src/app/component/app.component.scss +++ b/src/app/component/app.component.scss @@ -0,0 +1,6 @@ +.split, .gutter.gutter-horizontal { + float: left; +} +.gutter.gutter-horizontal { + cursor: ew-resize; +} diff --git a/src/app/component/app.component.ts b/src/app/component/app.component.ts index d1acb69..0b693a2 100644 --- a/src/app/component/app.component.ts +++ b/src/app/component/app.component.ts @@ -1,4 +1,6 @@ -import { Component } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import * as Split from 'split.js'; + @Component({ selector: 'app-root', @@ -7,4 +9,5 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'fdit-visualisation'; + } diff --git a/src/app/component/app.module.ts b/src/app/component/app.module.ts index d84e419..99c1b0c 100644 --- a/src/app/component/app.module.ts +++ b/src/app/component/app.module.ts @@ -1,16 +1,17 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; +import {allIcons, NgxBootstrapIconsModule} 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'; +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'; +import {AngularSplitModule} from 'angular-split'; @NgModule({ declarations: [ @@ -26,9 +27,11 @@ import { ListVesselComponent } from './list-vessel/list-vessel.component'; imports: [ BrowserModule, AppRoutingModule, - NgxBootstrapIconsModule.pick(allIcons) + NgxBootstrapIconsModule.pick(allIcons), + AngularSplitModule, ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/app/component/import-vessels/import-vessels.component.ts b/src/app/component/import-vessels/import-vessels.component.ts index 33274d0..2a56aba 100644 --- a/src/app/component/import-vessels/import-vessels.component.ts +++ b/src/app/component/import-vessels/import-vessels.component.ts @@ -1,6 +1,8 @@ import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {VesselsService} from '../../service/vessels.service'; import {Message} from '../../model/message'; +import {Vessel} from '../../model/vessel'; +import {Vessels} from '../../model/vessels'; @Component({ selector: 'app-import-vessels', @@ -8,8 +10,7 @@ import {Message} from '../../model/message'; styleUrls: ['./import-vessels.component.scss'] }) export class ImportVesselsComponent implements OnInit { - vessels: Map; - + vessels: Vessels; constructor(private vesselsService: VesselsService) { } @@ -50,14 +51,18 @@ export class ImportVesselsComponent implements OnInit { uploadFilesSimulator(index: number): void { const fileReader = new FileReader(); let nbLine: number; - fileReader.onload = (e) => { + this.vessels = new Vessels(); const lines: string[] = (fileReader.result as string).split('\n'); nbLine = lines.length; - for (const line of lines) { + for (let line of lines) { + line = line.replace(/[^\x20-\x7F]/g, ''); const splitLine = line.split(','); - const newVessel = new Message(splitLine); - this.vessels.set(Number(newVessel.mmsi), newVessel); + if (isNaN(Number(splitLine[0])) || line === '') { + continue; + } + const newMessage = new Message(splitLine); + this.vessels.addMessage(newMessage); } this.vesselsService.changeVesselsSet(this.vessels); }; diff --git a/src/app/component/list-vessel/list-vessel.component.html b/src/app/component/list-vessel/list-vessel.component.html index bae30cf..d2d0e09 100644 --- a/src/app/component/list-vessel/list-vessel.component.html +++ b/src/app/component/list-vessel/list-vessel.component.html @@ -1,9 +1,10 @@ -

Vessel

- + - {{vessel.value.mmsi}} - {{vessel.value.vesselName}} + {{vessel.getMMSI()}} - {{vessel.getName()}}
diff --git a/src/app/component/list-vessel/list-vessel.component.scss b/src/app/component/list-vessel/list-vessel.component.scss index 15299da..4d10996 100644 --- a/src/app/component/list-vessel/list-vessel.component.scss +++ b/src/app/component/list-vessel/list-vessel.component.scss @@ -17,7 +17,7 @@ h2.side-title:after { } .list-group { - margin-right: 80%; + //margin-right: 80%; height: 94.7vh; } diff --git a/src/app/component/list-vessel/list-vessel.component.ts b/src/app/component/list-vessel/list-vessel.component.ts index 3b7ebd5..5ff9194 100644 --- a/src/app/component/list-vessel/list-vessel.component.ts +++ b/src/app/component/list-vessel/list-vessel.component.ts @@ -1,6 +1,7 @@ import {Component, OnInit} from '@angular/core'; -import {Message} from '../../model/message'; import {VesselsService} from '../../service/vessels.service'; +import {Vessels} from '../../model/vessels'; +declare var $: any; @Component({ selector: 'app-list-vessel', @@ -8,7 +9,7 @@ import {VesselsService} from '../../service/vessels.service'; styleUrls: ['./list-vessel.component.scss'] }) export class ListVesselComponent implements OnInit { - vessels: Map; + vessels: Vessels; constructor(private vesselsService: VesselsService) { @@ -17,7 +18,15 @@ export class ListVesselComponent implements OnInit { ngOnInit(): void { this.vesselsService.currentVessels.subscribe(vessels => { this.vessels = vessels; - console.log(this.vessels); + }); + + $(document).ready(() => { + $('#myInput').on('keyup', function(): void { + const value = $(this).val().toLowerCase(); + $('#list-tab a').filter(function(): void { + $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); + }); + }); }); } } diff --git a/src/app/model/message.spec.ts b/src/app/model/message.spec.ts new file mode 100644 index 0000000..de775d8 --- /dev/null +++ b/src/app/model/message.spec.ts @@ -0,0 +1,7 @@ +import { Message } from './message'; + +describe('Vessel', () => { + // it('should create an instance', () => { + // expect(new Vessel()).toBeTruthy(); + // }); +}); diff --git a/src/app/model/vessel.spec.ts b/src/app/model/vessel.spec.ts index de775d8..a3570a1 100644 --- a/src/app/model/vessel.spec.ts +++ b/src/app/model/vessel.spec.ts @@ -1,7 +1,7 @@ -import { Message } from './message'; +import { Vessel } from './vessel'; describe('Vessel', () => { - // it('should create an instance', () => { - // expect(new Vessel()).toBeTruthy(); - // }); + 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..6530798 --- /dev/null +++ b/src/app/model/vessel.ts @@ -0,0 +1,22 @@ +import {Message} from './message'; + +export class Vessel { + messages: Array; + + constructor(messages: Array) { + this.messages = messages; + } + + addMessage(message: Message): void { + this.messages.push(message); + } + + getMMSI(): string { + return this.messages[0].mmsi; + } + + getName(): string { + return this.messages[0].vesselName; + } + +} diff --git a/src/app/model/vessels.spec.ts b/src/app/model/vessels.spec.ts new file mode 100644 index 0000000..0a47c53 --- /dev/null +++ b/src/app/model/vessels.spec.ts @@ -0,0 +1,7 @@ +import { Vessels } from './vessels'; + +describe('Vessels', () => { + it('should create an instance', () => { + expect(new Vessels()).toBeTruthy(); + }); +}); diff --git a/src/app/model/vessels.ts b/src/app/model/vessels.ts new file mode 100644 index 0000000..282f727 --- /dev/null +++ b/src/app/model/vessels.ts @@ -0,0 +1,19 @@ +import {Vessel} from './vessel'; +import {Message} from './message'; + +export class Vessels { + vessels: Map; + + constructor() { + this.vessels = new Map(); + } + + addMessage(message: Message): void { + if (!this.vessels.get(Number(message.mmsi))) { + this.vessels.set(Number(message.mmsi), new Vessel(new Array())); + } + + this.vessels.get(Number(message.mmsi)).addMessage(message); + } + +} diff --git a/src/app/service/vessels.service.ts b/src/app/service/vessels.service.ts index d504774..9167cc6 100644 --- a/src/app/service/vessels.service.ts +++ b/src/app/service/vessels.service.ts @@ -1,18 +1,18 @@ import {Injectable} from '@angular/core'; -import {BehaviorSubject, Observable} from 'rxjs'; -import {Message} from '../model/message'; +import {BehaviorSubject} from 'rxjs'; +import {Vessels} from '../model/vessels'; @Injectable({ providedIn: 'root' }) export class VesselsService { - private vessels = new BehaviorSubject(new Map()); + private vessels = new BehaviorSubject(new Vessels()); currentVessels = this.vessels.asObservable(); constructor() { } - changeVesselsSet(newVessels: Map): void { + changeVesselsSet(newVessels: Vessels): void { this.vessels.next(newVessels); } }