///
///
///
///
/// import { GeoJSON } from "leaflet";
class EXLocation extends STWkit.LocationCard {
private locationDiv: HTMLDivElement;
private locationForm: HTMLFormElement;
public obsDateInput: HTMLInputElement;
public obsTimeInput: HTMLInputElement;
private type: string;
private subtype: string;
constructor(id, parentDiv, lang, langData, map, forcing, obs, type, subtype, initials) {
var options: any = {};
options['single'] = true;
options['line'] = true;
options.polygon = {};
options['polygon']['show'] = true;
options['polygon']['name'] = 'Area';
options['type'] = type;
options['initials'] = initials;
super(id, 'Specify time and location', parentDiv, lang, langData, map, forcing, options);
var self = this;
self.type = type;
self.subtype = subtype;
var fieldset = L.DomUtil.create('fieldset', 'uk-margin-top');
this.locationForm.insertBefore(fieldset, this.locationForm.firstChild);
var satCallbackFn = function (latlngs, geojsonfeature, timestamp, id) {
self.clear();
var geojson: any = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
geojson["features"].push(geojsonfeature);
var observation = {
"id": id,
"provider": "EMSA",
"providerDataRef": null,
"providerImgRef": null,
"providerType": null,
"type": "SAT",
"date": moment.utc(timestamp).valueOf()
};
geojson.features[0].properties["observation"] = [];
geojson.features[0].properties["observation"].push(observation);
geojson.features[0].properties["simulation"] = {};
self.populateCard(geojson);
satdetectionHide();
};
function legendBox(fieldset: HTMLFieldSetElement, color, text, size) {
var rowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
var legendBox = L.DomUtil.create('div', 'legend-box', rowDiv);
legendBox.style.backgroundColor = color;
legendBox.style.width = size;
legendBox.style.height = size;
legendBox.title = text;
var legendText = L.DomUtil.create('div', 'legend-text', rowDiv);
legendText.textContent = text;
}
if (obs && obs.sat) {
var obssatRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
self.satObs = new Observation.Sat(map, satCallbackFn, 'observation/oo');
var satDetectionDiv = L.DomUtil.create('div', '', obssatRowDiv);
var satDetectionList = L.DomUtil.create('dl', 'uk-description-list-line', satDetectionDiv);
var satDetectionItem = L.DomUtil.create('dt', '', satDetectionList);
var satDetectionHeading = L.DomUtil.create('h5', 'uk-width-1-1 chevron-title', satDetectionItem);
satDetectionHeading.textContent = "Satellite oil detections";
self.satDetectionChevronIcon = L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
self.satDetectionContent = L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
self.satDetectionContent.style.display = 'none';
var satdetectionShow = function () {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-down');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-up');
self.satDetectionContent.style.display = "";
self.satObs.show();
}
}
var satdetectionHide = function () {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-up')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
}
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down'))
satdetectionShow();
else
satdetectionHide();
};
var satDetectionform = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
satDetectionform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
var satDetectionfieldset = L.DomUtil.create('fieldset', '', satDetectionform);
var satDetectionRowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-top', satDetectionfieldset);
super.addLabelDiv(satDetectionRowDiv, "Detection frequency", "See more information here");
legendBox(satDetectionfieldset, 'rgb(255, 0, 0)', 'Within 24 hours', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 153, 0)', 'Within 48 hours', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 0)', 'More than two days ago', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 255)', 'Older', '10px');
}
self.datetimeFormat = 'YYYY-MM-DD HH:mm';
self.datetimeTFormat = 'YYYY-MM-DDTHH:mm:ss.000';
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
var obsdateRowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-remove', fieldset);
super.addLabelDiv(obsdateRowDiv, "Observation time (UTC)", "See more information here");
var obsdateDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', obsdateRowDiv);
obsdateDiv.id = 'guide' + initials + 'date';
var obsdateIcon = L.DomUtil.create('span', 'uk-icon-calendar', obsdateDiv);
self.obsDateInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsDateInput.type = 'text';
self.obsDateInput.placeholder = self.dateFormat;
self.obsTimeInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsTimeInput.type = 'text';
self.obsDateInput.onchange = function () { self.fireChangeFn(self); };
self.obsTimeInput.onchange = function () { self.fireChangeFn(self); };
UIkit.ready(function () {
var startDatePicker = UIkit.datepicker(self.obsDateInput, { format: self.dateFormat });
var startTimePicker = UIkit.timepicker(self.obsTimeInput, {});
self.defaults();
});
}
public defaults() {
super.defaults();
var self = this;
if (document.body.contains(self.obsDateInput)) {
if (self.obsDateInput.value == '') {
var initDate = moment.utc();
self.obsDateInput.value = initDate.format(self.dateFormat);
self.obsTimeInput.value = initDate.startOf('hour').format(self.timeFormat);
}
}
}
public populateCard(geojson) {
var self = this;
super.populateCard(geojson);
var simulation = geojson.features[0].properties.simulation;
var observation = geojson.features[0].properties.observation[0];
var datetime = simulation.startDate;
if (geojson.features[0].properties.observation.length > 0) {
var observation = geojson.features[0].properties.observation[0];
datetime = observation.date;
}
var date = moment.utc(datetime).format(self.dateFormat);
self.obsDateInput.value = date;
var time = moment.utc(datetime).format(self.timeFormat);
self.obsTimeInput.value = time;
self.fireChangeFn(this);
}
public populateData(geojson) {
super.populateData(geojson);
var self = this;
var observation = {
"id": null,
"provider": "USER",
"providerDataRef": null,
"providerImgRef": null,
"providerType": null,
"type": "MANUAL",
"date": moment.utc(self.obsDateInput.value + ' ' + self.obsTimeInput.value, self.datetimeFormat).valueOf()
};
var layer:any = L.GeoJSON.geometryToLayer(geojson.features[0]);
var center = null;
if (layer._latlng) center = layer._latlng; else center = layer.getBounds().getCenter()
geojson.features[0].properties["primary"] = 'PADM';
geojson.features[0].properties["type"] = self.type;
geojson.features[0].properties["subtype"] = self.subtype;
geojson.features[0].properties["meanLat"] = center.lat;
geojson.features[0].properties["meanLng"] = center.lng;
geojson.features[0].properties["observation"] = [];
geojson.features[0].properties["observation"].push(observation);
}
}
class EXAmount extends STWkit.AccordionCard {
public oncallback: Function;
public amountInput: HTMLInputElement;
public amountSelect: HTMLSelectElement;
public nextButton: any;
constructor(id, parentDiv, lang, map, type, initials) {
var amountDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, 'Amount', parentDiv, amountDiv);
var self = this;
var form = L.DomUtil.create('form', 'uk-form uk-form-stacked', amountDiv);
form.setAttribute('novalidate', '');
form.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
form.onkeypress = function (e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) e.preventDefault();
};
function addOption(parent, value, txt) {
var option = L.DomUtil.create('option', '', parent);
option.value = value;
option.textContent = txt;
}
var fieldset = L.DomUtil.create('fieldset', '', form);
var amountRowDiv: any = L.DomUtil.create('div', 'uk-form-row', fieldset);
amountRowDiv.id = 'guide' + initials + 'amountvalue';
amountRowDiv.guideFn = function () {
self.amountInput.value = '10';
validate();
}
super.addLabelDiv(amountRowDiv, "Amount", "See more information here");
var amountValueDiv = L.DomUtil.create('div', 'uk-width-1-1', amountRowDiv);
self.amountInput = L.DomUtil.create('input', 'uk-width-1-4', amountValueDiv);
self.amountInput.type = 'number';
self.amountInput.step = '10';
self.amountInput.min = '0';
var amountUnitDiv = L.DomUtil.create('div', 'uk-width-1-2 uk-form-select select', amountValueDiv);
amountUnitDiv.setAttribute('data-uk-form-select', '');
var selectedAmountUnit = L.DomUtil.create('span', '', amountUnitDiv);
self.amountSelect = L.DomUtil.create('select', '', amountUnitDiv);
addOption(self.amountSelect, 'm3', 'm³');
addOption(self.amountSelect, 'tonnes', 'tonnes');
self.amountInput.onchange = function () {
validate();
};
function validate() {
var amountValue = parseInt(self.amountInput.value);
var amountOk = false;
if (amountValue > 0) amountOk = true;
if (amountOk) {
self.status = true;
STWkit.AccordionCard.enableNext(self.nextButton, true);
(self.oncallback && self.oncallback());
} else {
self.clear();
}
};
var clearDiv = L.DomUtil.create('div', 'uk-clearfix', amountDiv);
var clearButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
clearButton.textContent = 'Clear';
clearButton.onclick = function () {
self.clear();
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guide' + initials + 'amount';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
}
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.nextButton.onclick = function () {
if (!STWkit.AccordionCard.isEnabled(self.nextButton)) {
STWkit.AccordionCard.warningMsg('Mandatory fields missing',
'Specify a valid amount.');
return;
}
(self.oncallback && self.oncallback(true));
};
UIkit.ready(function () {
self.defaults();
});
}
public defaults() {
var self = this;
}
public populateCard(geojson) {
var self = this;
var simulation = geojson.features[0].properties.simulation;
self.amountInput.value = simulation.amount;
var amountevt = document.createEvent('Event');
amountevt.initEvent("change", true, true);
self.amountInput.dispatchEvent(amountevt);
self.amountSelect.value = simulation.amountUnit;
}
public populateData(geojson) {
var self = this;
geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
}
public clear() {
var self = this;
super.clear();
self.amountInput.value = '';
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.status = false;
(self.oncallback && self.oncallback());
}
}
class TrajectoryLineHandler extends LineHandler {
private _errorShown : any;
private _mouseDownOrigin : any;
private _map : any;
private _currentLatLng: any;
private _enabled: any;
private _mouseMarker: any;
private _clickHandled: any;
private _disableMarkers: any;
constructor(time, map, options){
super(map,options);
}
private autoPoint(e, latlng) {
if (this._errorShown)
return;
if (this._mouseDownOrigin) {
var originalEvent = e.originalEvent;
//if(originalEvent.button == 2) {
var distance = L.point(originalEvent.clientX, originalEvent.clientY)
.distanceTo(this._mouseDownOrigin);
//if (Math.abs(distance) < 9 * (window.devicePixelRatio || 1)) {
if (Math.abs(distance) > 6 * (window.devicePixelRatio || 1)) {
// if (this.time.length > 0) {
(L).drawLocal.draw.handlers.polyline.tooltip.cont = 'Relase button to stop drawing';
// (L).drawLocal.draw.handlers.polyline.tooltip.cont = moment.utc(this.time.pop()).format('YYYY-MM-DD HH:mm')+' ('+this.time.length+' left)';
super.addVertex(latlng);
this._mouseDownOrigin = L.point(originalEvent.clientX, originalEvent.clientY);
// } else {
// super._finishShape();
// this._mouseDownOrigin = null;
// this._clickHandled = false;
// this._disableMarkers = false;
// return;
// }
}
//}
}
};
private _onMouseMove(e) {
var newPos = this._map.mouseEventToLayerPoint(e.originalEvent);
var latlng = this._map.layerPointToLatLng(newPos);
// Save latlng
// should this be moved to _updateGuide() ?
this._currentLatLng = latlng;
super._updateTooltip(latlng);
if (e.originalEvent.ctrlKey) {
super.deleteLastVertex(e);
}
else {
this.autoPoint(e, latlng);
}
if (this._enabled) {
// Update the guide line
super._updateGuide(newPos);
// Update the mouse marker position
this._mouseMarker.setLatLng(latlng);
}
L.DomEvent.preventDefault(e.originalEvent);
L.DomEvent.stopPropagation(e.originalEvent);
};
}
class EXTrajectory extends STWkit.AccordionCard {
public oncallback: Function;
public lineButton: HTMLButtonElement;
private lineHandler : any;
private drawnfeature : any;
private trajectoryLayer : L.GeoJSON;
private trajectoryLabelLayer : any;
private trajMarkerArray : any[];
public exitControl: L.Control;
public positions: any[];
private map: any;
private time: any;
private from: any;
private to: any;
public nextButton: any;
endDateInput: HTMLInputElement;
endTimeInput: HTMLInputElement;
dateFormat: string;
timeFormat: string;
constructor(id, parentDiv, lang, langData, map, domain, type, subtype, initials) {
var trajectoryDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, 'Trajectory', parentDiv, trajectoryDiv);
var self = this;
this.map = map;
var form = L.DomUtil.create('form', 'uk-form uk-form-stacked', trajectoryDiv);
form.setAttribute('novalidate', '');
form.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
form.onkeypress = function (e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) e.preventDefault();
};
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
self.positions = [];
var positionLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', form);
var positionlabelDiv = L.DomUtil.create('div', 'uk-width-1-1', positionLabelGrid);
super.addLabelDiv(positionlabelDiv, "Position", "See more information here");
var positionDiv: any = L.DomUtil.create('div', '', form);
positionDiv.id = 'guide' + initials + 'pos';
var fieldset = L.DomUtil.create('fieldset', 'uk-margin-top', form);
var endRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(endRowDiv, "End point date (UTC)", "See more information here");
var endDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', endRowDiv);
var endIcon = L.DomUtil.create('span', 'uk-icon-calendar', endDiv);
self.endDateInput = L.DomUtil.create('input', 'uk-width-1-2', endDiv);
self.endDateInput.type = 'text';
self.endDateInput.placeholder = self.dateFormat;
self.endTimeInput = L.DomUtil.create('input', 'uk-width-1-2', endDiv);
self.endTimeInput.type = 'text';
var positionButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', positionDiv);
var drawDiv = L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
var drawButton = L.DomUtil.create('button', 'uk-button uk-button-small uk-align-left uk-margin-remove', drawDiv);
drawButton.textContent = 'Free hand draw';
self.endDateInput.onchange = function (evt) {
var date = moment.utc(self.endDateInput.value + ' ' + self.endTimeInput.value, self.datetimeFormat);
self.to = date.clone();
self.refreshTrajectory();
self.fireChangeFn(self);
};
self.endTimeInput.onchange = function (evt) {
var date = moment.utc(self.endDateInput.value + ' ' + self.endTimeInput.value, self.datetimeFormat);
self.to = date.clone();
self.refreshTrajectory();
self.fireChangeFn(self);
};
positionDiv.guideFn = function () {
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
var feature = {};
feature['type'] = "Feature";
feature['geometry'] = {};
feature['geometry']['type'] = "Point";
feature['geometry']['coordinates'] = [];
// feature['geometry']['coordinates'].push(19.0);
// feature['geometry']['coordinates'].push(56.0);
geojson["features"].push(feature);
// self.control.addGeoJSON(geojson);
}
var color = '#CA5A1B';
this.lineHandler = new TrajectoryLineHandler(null, map, {
allowIntersection: true,
icon: new L.DivIcon({
iconSize: new L.Point(8, 8),
className: 'leaflet-div-icon leaflet-editing-icon'
}),
drawError: {
color: color,
timeout: 1000
},
shapeOptions: {
color: color
},
showArea: true,
metric: true,
repeatMode : false
});
this.lineHandler.type = 'draw'+id;
map.on('zoomend', function () {
if (self.map.hasLayer(self.trajectoryLabelLayer)) {
self.updateTrajectoryLabelVisibility();
}
});
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type == 'draw'+id) {
self.drawnfeature = layer.toGeoJSON();
self.refreshTrajectory();
var toggleevt = document.createEvent("CustomEvent");
toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
'show': true
});
window.dispatchEvent(toggleevt);
self.fireChangeFn(self);
if (self.exitControl) map.removeControl(self.exitControl);
self.exitControl = null;
if (self.getLatLngArray().length > 0) {
self.status = true;
STWkit.AccordionCard.enableNext(self.nextButton, true);
(self.oncallback && self.oncallback());
}
}
});
this.trajectoryLayer = new L.GeoJSON(null, {});
this.trajMarkerArray = [];
this.trajectoryLabelLayer = L.geoJson(null, {
'pointToLayer': function (feature: any, latlng: L.LatLng) {
var iconOpts: any = {
iconSize: [25, 41],
iconAnchor: [40, 61],
className: 'iconHiddentextIcon',
clickable: false,
html: '' + moment.utc(feature.properties.time).format('YYYY-MM-DD HH:mm') + ' [' + STWkit.convertDDtoDDM(latlng.lat, true) + ', ' + STWkit.convertDDtoDDM(latlng.lng, false) + '] '
};
var marker: any = L.marker(latlng, {
clickable: false,
icon: L.divIcon(iconOpts)
}
);
marker.visible = true;
self.trajMarkerArray.push(marker);
return marker;
}
});
map.addLayer(this.trajectoryLayer);
map.addLayer(this.trajectoryLabelLayer);
drawButton.onclick = function () {
self.clear();
var toggleevt = document.createEvent("CustomEvent");
toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
'show': false
});
window.dispatchEvent(toggleevt);
self.lineHandler.enable();
self.exitControl = new L.Control({ position: 'bottomright' });
self.exitControl.onAdd = function (map: L.Map) {
var container = L.DomUtil.create('div', 'exit-control');
var exitPanel = L.DomUtil.create('div', 'uk-panel uk-panel-box', container);
var finishButton = L.DomUtil.create('button', 'uk-button uk-button-small uk-button-primary uk-margin-right', exitPanel);
finishButton.textContent = 'Finish';
finishButton.onclick = function (e) {
map.fire('draw:canceled');
};
finishButton.style.display = 'none';
var cancelButton = L.DomUtil.create('button', 'uk-button uk-button-small', exitPanel);
cancelButton.textContent = 'Cancel';
cancelButton.onclick = function (e) {
if (self.exitControl) map.removeControl(self.exitControl);
self.exitControl = null;
var toggleevt = document.createEvent("CustomEvent");
toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
'show': true
});
window.dispatchEvent(toggleevt);
self.clear();
};
L.DomEvent.disableClickPropagation(container);
return container;
};
self.exitControl.addTo(map);
};
var clearDiv = L.DomUtil.create('div', 'uk-clearfix', trajectoryDiv);
var clearButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
clearButton.textContent = 'Clear';
clearButton.onclick = function () {
self.clear();
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guide' + initials + 'trajectory';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
}
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.nextButton.onclick = function () {
if (!STWkit.AccordionCard.isEnabled(self.nextButton)) {
STWkit.AccordionCard.warningMsg('Mandatory fields missing',
'Specify a valid position.');
return;
}
(self.oncallback && self.oncallback(true));
};
UIkit.ready(function () {
var endDatePicker = UIkit.datepicker(self.endDateInput, {format: self.dateFormat });
var endTimePicker = UIkit.timepicker(self.endTimeInput, {});
self.defaults();
});
}
public changeFn(changeCard) {
var self = this;
if ((typeof changeCard.from !== 'undefined') && (typeof changeCard.to !== 'undefined')) {
self.from = changeCard.from.clone();
self.to = changeCard.to.clone();
if (self.endDateInput) {
self.endDateInput.value = self.to.format(self.dateFormat);
self.endTimeInput.value = self.to.startOf('hour').format(self.timeFormat);
}
self.refreshTrajectory();
}
}
private refreshTrajectory(){
var self = this;
if (this.drawnfeature && this.drawnfeature.geometry && this.drawnfeature.geometry.coordinates.length > 2) {
self.trajMarkerArray = [];
self.trajectoryLayer.clearLayers();
self.trajectoryLabelLayer.clearLayers();
var timeIncrement = 15;
var currentlength = self.drawnfeature.geometry.coordinates.length;
var wantedTimeIncrementlength = Math.round(((Math.abs(this.from - this.to)/1000)/60) / timeIncrement);
var coords = self.drawnfeature.geometry.coordinates.slice(0);
while(coords.length < wantedTimeIncrementlength) {
// too small, add random points
var index = self.getRandomInt(1, currentlength-1);
var newpoint = [(coords[index][0]+coords[index+1][0])/2,(coords[index][1]+coords[index+1][1])/2];
coords.splice(index+1, 0, newpoint);
}
while(coords.length > wantedTimeIncrementlength) {
// too big, remove random points
var index = self.getRandomInt(1, currentlength-1);
coords.splice(index, 1);
}
self.time = [];
var t = self.from.clone();
for (var i = 0; i < coords.length; i++) {
self.time.push(t.valueOf());
t = t.add(timeIncrement,'m');
}
self.time[self.time.length-1] = self.to.valueOf();
var trajfeature: any = STWkit.createFeature("LineString");
trajfeature.geometry.coordinates = coords;
self.trajectoryLayer.addData(trajfeature);
var trajpointfeaturecollection = STWkit.featurecollection();
for (var i = 0; i < coords.length; i++) {
var trajpointfeature: any = STWkit.createFeature("Point");
trajpointfeature.geometry.coordinates = coords[i];
trajpointfeature.properties.time = self.time[i];
if (i == 0) trajpointfeature.properties.start = true;
if (i == self.time.length - 1) trajpointfeature.properties.end = true;
trajpointfeaturecollection.features.push(trajpointfeature);
}
self.trajectoryLabelLayer.addData(trajpointfeaturecollection);
self.updateTrajectoryLabelVisibility();
}
}
private getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
public setTime() {
var self = this;
self.time = [];
if (self.timeIncrement > 0 && self.from.isBefore(self.to)) {
var t = self.from.clone();
for (var i = 0; i < self.trajlength; i++) {
self.time.push(t.valueOf());
t = t.add(self.timeIncrement,'m');
}
self.time[self.time.length-1] = self.to.valueOf();
return true;
}
return false;
}
private updateTrajectoryLabelTimeValues() {
var self = this;
self.trajMarkerArray = [];
self.trajectoryLabelLayer.clearLayers();
for (var i = 0; i < self.time.length; i++)
self.trajpointfeaturecollection.features[i].properties.time = self.time[i];
self.trajectoryLabelLayer.addData(self.trajpointfeaturecollection);
self.updateTrajectoryLabelVisibility();
}
private updateTrajectoryLabelVisibility() {
var self = this;
if (self.trajMarkerArray.length > 2) {
var occupied = new Array();
occupied[0] = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[0]._latlng));
occupied[1] = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[self.trajMarkerArray.length - 1]._latlng));
var k = 2;
for (var i = 1; i < self.trajMarkerArray.length - 1; i++) {
var rect = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[i]._latlng));
var ok = true;
for (var j = 0; j < occupied.length; j++) {
if (STWkit.intersect(rect, occupied[j])) {
ok = false;
break;
}
}
if (ok) {
occupied[k] = STWkit.getRectangle(self.map.latLngToLayerPoint(self.trajMarkerArray[i]._latlng));
k++;
if (!self.trajMarkerArray[i].visible) {
self.trajectoryLabelLayer.addLayer(self.trajMarkerArray[i]);
self.trajMarkerArray[i].visible = true;
}
} else {
if (self.trajMarkerArray[i].visible) {
self.trajectoryLabelLayer.removeLayer(self.trajMarkerArray[i]);
self.trajMarkerArray[i].visible = false;
}
}
}
}
};
private getLatLngArray() {
var self = this;
var latlngs = [];
self.trajectoryLayer.getLayers().forEach (function (layer:any) {
if (layer._latlngs) latlngs.push(layer._latlngs); else latlngs.push([layer._latlng]);
});
return latlngs;
}
public validate() {
if (this.positions.length == 0) return;
this.status = true;
STWkit.AccordionCard.enableNext(this.nextButton, true);
(this.oncallback && this.oncallback());
};
public defaults() {
var self = this;
}
public populateCard(geojson) {
var self = this;
}
public populateData(geojson) {
var self = this;
var feature = STWkit.createFeature('LineString');
var props = feature.properties;
props['auxiliary'] = 'exercise';
props['time'] = self.time;
var coords = feature.geometry.coordinates;
var latlngs:Array = self.getLatLngArray()[0];
for (let i = 0; i < latlngs.length; i++) {
const latlng = latlngs[i];
coords.push([latlng.lng, latlng.lat]);
}
geojson.features.push(feature);
}
public clear() {
var self = this;
super.clear();
self.trajectoryLabelLayer.clearLayers();
self.trajectoryLayer.clearLayers()
self.trajMarkerArray = [];
if (self.lineHandler._enabled) self.lineHandler.disable();
if (self.nextButton) STWkit.AccordionCard.enableNext(self.nextButton, false);
(self.oncallback && self.oncallback());
}
}