FDITeam / visualisation-maritime2

Commit c4e931730a3243381e44071858fe79721c7381ca

Authored by lsagona 2020-10-27 16:57:22 +0100

Exists in master

add vessel list

Showing 5 changed files with 46 additions and 3 deletions Inline Diff

src/app/component/app.component.html
src/app/component/import-vessels/import-vessels.component.ts
src/app/component/list-vessel/list-vessel.component.html
src/app/component/list-vessel/list-vessel.component.scss
src/app/component/list-vessel/list-vessel.component.ts

<app-nav-bar></app-nav-bar>	1	1	<app-nav-bar></app-nav-bar>
		2	<app-list-vessel></app-list-vessel>
<router-outlet></router-outlet>	2	3	<router-outlet></router-outlet>

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';	1	1	import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {VesselsService} from '../../service/vessels.service';	2	2	import {VesselsService} from '../../service/vessels.service';
import {Vessel} from '../../model/vessel';	3	3	import {Vessel} from '../../model/vessel';
	4	4
@Component({	5	5	@Component({
selector: 'app-import-vessels',	6	6	selector: 'app-import-vessels',
templateUrl: './import-vessels.component.html',	7	7	templateUrl: './import-vessels.component.html',
styleUrls: ['./import-vessels.component.scss']	8	8	styleUrls: ['./import-vessels.component.scss']
})	9	9	})
export class ImportVesselsComponent implements OnInit {	10	10	export class ImportVesselsComponent implements OnInit {
vessels: Map<number, Vessel>;	11	11	vessels: Map<number, Vessel>;
	12	12
	13	13
constructor(private vesselsService: VesselsService) {	14	14	constructor(private vesselsService: VesselsService) {
}	15	15	}
	16	16
@ViewChild('fileDropRef', {static: false}) fileDropEl: ElementRef;	17	17	@ViewChild('fileDropRef', {static: false}) fileDropEl: ElementRef;
files: any[] = [];	18	18	files: any[] = [];
	19	19
ngOnInit(): void {	20	20	ngOnInit(): void {
this.vesselsService.currentVessels.subscribe(vessels => this.vessels = vessels);	21	21	this.vesselsService.currentVessels.subscribe(vessels => this.vessels = vessels);
}	22	22	}
	23	23
/**	24	24	/**
* on file drop handler	25	25	* on file drop handler
*/	26	26	*/
onFileDropped($event): void {	27	27	onFileDropped($event): void {
this.prepareFilesList($event);	28	28	this.prepareFilesList($event);
}	29	29	}
	30	30
/**	31	31	/**
* handle file from browsing	32	32	* handle file from browsing
*/	33	33	*/
fileBrowseHandler(files): void {	34	34	fileBrowseHandler(files): void {
this.prepareFilesList(files);	35	35	this.prepareFilesList(files);
}	36	36	}
	37	37
/**	38	38	/**
* Delete file from files list	39	39	* Delete file from files list
* @param index (File index)	40	40	* @param index (File index)
*/	41	41	*/
deleteFile(index: number): void {	42	42	deleteFile(index: number): void {
if (this.files[index].progress < 100) {	43	43	if (this.files[index].progress < 100) {
return;	44	44	return;
}	45	45	}
this.files.splice(index, 1);	46	46	this.files.splice(index, 1);
}	47	47	}
	48	48
	49	49
uploadFilesSimulator(index: number): void {	50	50	uploadFilesSimulator(index: number): void {
const fileReader = new FileReader();	51	51	const fileReader = new FileReader();
let nbLine: number;	52	52	let nbLine: number;
	53	53
fileReader.onload = (e) => {	54	54	fileReader.onload = (e) => {
const lines: string[] = (fileReader.result as string).split('\n');	55	55	const lines: string[] = (fileReader.result as string).split('\n');
nbLine = lines.length;	56	56	nbLine = lines.length;
for (const line of lines) {	57	57	for (const line of lines) {
const splitLine = line.split(',');	58	58	const splitLine = line.split(',');
const newVessel = new Vessel(splitLine);	59	59	const newVessel = new Vessel(splitLine);
this.vessels.set(Number(newVessel.mmsi), newVessel);	60	60	this.vessels.set(Number(newVessel.mmsi), newVessel);
}	61	61	}
		62	this.vesselsService.changeVesselsSet(this.vessels);
};	62	63	};
	63	64
fileReader.onprogress = (e ) => {	64	65	fileReader.onprogress = (e ) => {
if (e.lengthComputable) {	65	66	if (e.lengthComputable) {
this.files[index].progress = Math.round(((e.loaded / e.total) * 100));	66	67	this.files[index].progress = Math.round(((e.loaded / e.total) * 100));
}	67	68	}
};	68	69	};
	69	70
fileReader.readAsText(this.files[index]);	70	71	fileReader.readAsText(this.files[index]);
}	71	72	}
	72	73
prepareFilesList(files: Array<any>): void {	73	74	prepareFilesList(files: Array<any>): void {
for (const item of files) {	74	75	for (const item of files) {
item.progress = 0;	75	76	item.progress = 0;
this.files.push(item);	76	77	this.files.push(item);
}	77	78	}

			1
			2	<div class="list-group border" id="list-tab" role="tablist">
			3	<h2 class="side-title">Vessel</h2>
			4	<a *ngFor="let vessel of vessels \| keyvalue" class=" list-group-item list-group-item-action" id="{{vessel.value.mmsi}}"
			5	data-toggle="list" role="tab">
			6	{{vessel.value.mmsi}} - {{vessel.value.vesselName}}
			7	</a>
			8	</div>

			1	h2.side-title {
			2	margin-right: 0;
			3	margin-bottom: 10px;
			4	padding: 10px;
			5	font-size: 20px;
			6	color: #333;
			7	text-transform: uppercase;
			8	}
			9
			10	h2.side-title:after {
			11	content: '';
			12	width: 60px;
			13	height: 1px;
			14	background: #ff173c;
			15	display: block;
			16	margin-top: 6px;
			17	}
			18
			19	.list-group {
			20	margin-right: 80%;
			21	height: 94.7vh;
			22	}

import { Component, OnInit } from '@angular/core';	1	1	import {Component, OnInit} from '@angular/core';
		2	import {Vessel} from '../../model/vessel';
		3	import {VesselsService} from '../../service/vessels.service';
	2	4
@Component({	3	5	@Component({
selector: 'app-list-vessel',	4	6	selector: 'app-list-vessel',
templateUrl: './list-vessel.component.html',	5	7	templateUrl: './list-vessel.component.html',
styleUrls: ['./list-vessel.component.scss']	6	8	styleUrls: ['./list-vessel.component.scss']
})	7	9	})
export class ListVesselComponent implements OnInit {	8	10	export class ListVesselComponent implements OnInit {
		11	vessels: Map<number, Vessel>;
	9	12
constructor() { }	10
	11	13
ngOnInit(): void {	12	14	constructor(private vesselsService: VesselsService) {
}	13	15	}
	14	16
		17	ngOnInit(): void {
		18	this.vesselsService.currentVessels.subscribe(vessels => {
		19	this.vessels = vessels;
		20	console.log(this.vessels);
		21	});