STWkit.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
addPositionInfo.onclick = function () {
AccordionCard.infoMsg(labelTxt, labelInfo);
};
};
static infoMsg(title: string, msg: string) {
return UIkit.notify(" " + title + "" + msg, { status: 'info', timeout: 10000 });
}
static warningMsg(title: string, msg: string) {
return UIkit.notify(" " + title + "
" + msg, { status: 'warning', timeout: 10000 });
}
static enableNext(button: HTMLButtonElement, enable) {
var isEnabled = button.classList.contains('next-enabled');
if (enable && !isEnabled) {
button.classList.add('next-enabled');
}
if (!enable && isEnabled) {
button.classList.remove('next-enabled');
}
}
static isEnabled(button: HTMLButtonElement) {
return button.classList.contains('next-enabled');
}
public clear() {
this.status = false;
}
public hide() {
this.title.style.display = 'none';
this.content.style.display = 'none';
}
public show() {
this.title.style.display = 'block';
this.content.style.display = 'block';
}
public visible() {
return (this.title.style.display == 'block')
}
}
export class LocationCard extends AccordionCard {
private control: any;
public oncallback: Function;
public nextButton: any;
public polygonButton: HTMLButtonElement;
public multipleButton: HTMLButtonElement;
public pointButton: HTMLButtonElement;
public circleButton: HTMLButtonElement;
public lineButton: HTMLButtonElement;
public exitControl: L.Control;
public dateFormat: string;
public timeFormat: string;
public datetimeFormat: string;
public datetimeTFormat: string;
public positions: any[];
public positionMaxDepth: number;
public geometryType: string;
private forcingBoundary: any;
private locationDiv: HTMLDivElement;
private locationForm: HTMLFormElement;
constructor(id, title ,parentDiv, lang, langData, map, forcing, options) {
var locationDiv = STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, title, parentDiv, locationDiv);
var self = this;
self.locationDiv = locationDiv;
if (forcing) self.forcingBoundary = new Forcing.Boundary(self.locationDiv, map, forcing);
var satCallbackFn = function(latlngs, geojsonfeature, timestamp, id){
self.clear();
var geojson:any = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
geojson["features"].push(geojsonfeature);
geojson.features[0].properties["simulation"] = {};
self.populateCard(geojson);
};
self.locationForm = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.locationDiv);
self.locationForm.setAttribute('novalidate','');
self.locationForm.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
this.locationForm.onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) e.preventDefault();
};
var type = (options && options.hasOwnProperty('type'))?options.type:'';
var subtype = (options && options.hasOwnProperty('subtype'))?options.subtype:'';
var initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
var domain = (options && options.hasOwnProperty('domain'))?options.domain:'';
var guide = (options && options.hasOwnProperty('guide'))?options.guide:'';
var showsingle = (options && options.hasOwnProperty('single'))?options.single:true;
var showmultiple = (options && options.hasOwnProperty('multiple'))?options.multiple:false;
var showpolygon = (options && options.hasOwnProperty('polygon') && options.polygon.hasOwnProperty('show'))?options.polygon.show:true;
var namepolygon = (options && options.hasOwnProperty('polygon') && options.polygon.hasOwnProperty('name'))?options.polygon.name:'Polygon';
var showline = (options && options.hasOwnProperty('line'))?options.line:true;
var showcircle = (options && options.hasOwnProperty('circle'))?options.circle:false;
var showoutlettype = (options && options.hasOwnProperty('outlettype'))?options.outlettype:true;
var outlettypeDiv = L.DomUtil.create('div', '', self.locationForm);
if (!showoutlettype) outlettypeDiv.style.display = 'none';
var typeLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', outlettypeDiv);
var objectlabelDiv = L.DomUtil.create('div', 'uk-width-1-2', typeLabelGrid);
super.addLabelDiv(objectlabelDiv, "Outlet type", "See more information here");
var typeButtonDiv = L.DomUtil.create('div', '', outlettypeDiv);
typeButtonDiv.id = 'guide'+initials+'type';
typeButtonDiv.setAttribute('data-uk-button-radio', '');
var typeButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', typeButtonDiv);
var objectbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', typeButtonGrid);
var objectButtonGroup = L.DomUtil.create('div', 'uk-button-group', objectbuttonsDiv);
self.pointButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.pointButton.textContent = 'Single';
if (!showsingle) self.pointButton.style.display = 'none';
self.multipleButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.multipleButton.textContent = 'Multiple';
self.multipleButton.disabled = false;
if (!showmultiple) self.multipleButton.style.display = 'none';
self.circleButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.circleButton.textContent = 'Circle';
if (!showcircle) self.circleButton.style.display = 'none';
self.lineButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.lineButton.textContent = 'Line';
self.lineButton.disabled = false;
if (!showline) self.lineButton.style.display = 'none';
self.polygonButton = L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
self.polygonButton.textContent = namepolygon;
if (!showpolygon) self.polygonButton.style.display = 'none';
self.pointButton.onclick = function () { self.geometryType = "point"; self.control.setType(self.geometryType); }
self.lineButton.onclick = function () { self.geometryType = "linestring"; self.control.setType(self.geometryType); }
self.multipleButton.onclick = function () { self.geometryType = "multipoint"; self.control.setType(self.geometryType); }
self.polygonButton.onclick = function () { self.geometryType = "polygon"; self.control.setType(self.geometryType); }
self.circleButton.onclick = function () { self.geometryType = "circle"; self.control.setType(self.geometryType); }
self.polygonButton.disabled = false;
self.positions = [];
var positionLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', self.locationForm);
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', '', self.locationForm);
positionDiv.id = 'guide'+initials+'pos';
var positionButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', positionDiv);
var latlonDiv = L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
var drawDiv = L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
// var importDiv = L.DomUtil.create('div', 'uk-width-1-3', positionButtonGrid);
var latlngButton = L.DomUtil.create('button', 'uk-button uk-button-small', latlonDiv);
latlngButton.textContent = 'Enter manually';
var drawButton = L.DomUtil.create('button', 'uk-button uk-button-small uk-align-right uk-margin-remove', drawDiv);
drawButton.textContent = 'Free hand draw';
// var importButton = L.DomUtil.create('button', 'uk-button uk-button-small', importDiv);
// importButton.textContent = 'Import';
positionDiv.guideFn = function () {
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
var feature = {};
feature['type'] = "Feature";
feature['geometry'] = {};
feature['geometry']['type'] = "Point";
feature['geometry']['coordinates'] = [];
var lat = 56.0;
var lng = 19.0;
if (guide) {
lat = guide[0];
lng = guide[1];
}
feature['geometry']['coordinates'].push(19.0);
feature['geometry']['coordinates'].push(56.0);
geojson["features"].push(feature);
self.control.addGeoJSON(geojson);
}
var bbox = {};
bbox['s'] = -90;
bbox['n'] = 90;
bbox['w'] = -180;
bbox['e'] = 180;
if (forcing) bbox = forcing.features[0].properties.bbox;
self.control = new L.Control.Coordinates({
"lang": lang,
"langdata": langData.coordinates,
"id": id,
"inline": true,
"bbox" : bbox,
"table": true,
"type": false,
"buttons": false,
"tabs": false,
"callback": function (latlngs, geojson) {
self.positions = [];
self.positionMaxDepth = 0;
if (latlngs.length > 0) {
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;
var coordinates = [];
switch (self.geometryType) {
case 'point':
coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat, 0]);
break;
case 'circle':
coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat, 0]);
break;
case 'multipoint':
coordinates = geojson.features[0].geometry.coordinates;
for (var i = 0; i < coordinates.length; i++) {coordinates[i].push(0);}
break;
case 'linestring':
var center = L.polyline(latlngs).getBounds().getCenter()
coordinates.push([center.lng, center.lat, 0]);
break;
case 'polygon':
var center = L.polygon(latlngs).getBounds().getCenter();
coordinates.push([center.lng, center.lat, 0]);
break;
default:
break;
}
if (self.forcingBoundary) {
self.forcingBoundary.validate(coordinates);
self.forcingBoundary.addListener(self.control.layers);
}
self.control.showTable();
for (var i = 0; i < coordinates.length; i++) {
var depth = 0;
if (self.forcingBoundary) depth = self.forcingBoundary.depth(coordinates[i][1], coordinates[i][0])
self.positions.push([coordinates[i][1], coordinates[i][0], depth]);
}
self.positionMaxDepth = Math.floor(self.positions[0][2]);
self.validate();
}
}
});
var content = self.control.onAdd(map);
var coordinateDiv = L.DomUtil.create('div', 'uk-margin-top uk-margin-bottom', self.locationForm);
coordinateDiv.appendChild(content);
self.control.hideTable();
latlngButton.onclick = function () { self.control.latlng(); };
drawButton.onclick = function () {
var toggleevt = document.createEvent("CustomEvent");
toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
'show': false
});
window.dispatchEvent(toggleevt);
if (self.forcingBoundary) self.forcingBoundary.show();
self.control.draw();
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';
// 4 is multipoint type in coordinates control
if (self.control.getType() == GeometryType.MULTIPOINT) finishButton.style.display = '';
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);
};
// importButton.onclick = function(){self.control.import();};
var clearDiv = L.DomUtil.create('div', 'uk-clearfix', self.locationDiv);
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.textContent = 'Next';
self.nextButton.id = 'guide'+initials+'location';
self.nextButton.guideFn = function () {
self.nextButton.click();
}
AccordionCard.enableNext(self.nextButton, false);
self.nextButton.onclick = function () {
if (!AccordionCard.isEnabled(self.nextButton)) {
AccordionCard.warningMsg('Mandatory fields missing', self.mandatoryTxt());
return;
}
if (self.forcingBoundary) self.forcingBoundary.hide();
(self.oncallback && self.oncallback(true));
};
UIkit.ready(function () {
self.defaults();
});
}
public mandatoryTxt() {
return 'Specify a location by manually entering position or draw on the map.';
}
public show() {
super.show();
}
public validate() {
if (this.positions.length == 0) return;
this.status = true;
AccordionCard.enableNext(this.nextButton, true);
(this.oncallback && this.oncallback());
};
public hide() {
super.hide();
}
public defaults() {
var self = this;
if (document.body.contains(self.pointButton) && self.pointButton.style.display != 'none') self.pointButton.click();
else if (document.body.contains(self.circleButton) && self.circleButton.style.display != 'none') self.circleButton.click();
else if (document.body.contains(self.lineButton) && self.lineButton.style.display != 'none') self.lineButton.click();
}
public populateCard(geojson) {
var self = this;
var simulation = geojson.features[0].properties.simulation;
var type = geojson.features[0].geometry.type.toLowerCase();
if (geojson.features[0].properties.hasOwnProperty('radius')) type = 'circle';
switch (type) {
case "point":
self.pointButton.click();
break;
case "circle":
self.circleButton.click();
break;
case "multipoint":
self.multipleButton.click();
break;
case "linestring":
self.lineButton.click();
break;
case "polygon":
self.polygonButton.click();
break;
default:
break;
}
self.control.setType(type);
self.control.addGeoJSON(geojson);
}
public populateData(geojson) {
var self = this;
var json = self.control.getGeoJSON();
for (var i = 0; i < json.features.length; i++) {
json.features[i]["properties"] = {};
geojson.features.push(json.features[i]);
}
geojson.features[0].properties["simulation"] = {};
}
public clear() {
var self = this;
super.clear();
if (self.forcingBoundary) {
self.forcingBoundary.hide();
self.forcingBoundary.removeListener(self.control.layers);
}
self.control.clear();
self.control.hideTable();
if (self.nextButton) AccordionCard.enableNext(self.nextButton, false);
(self.oncallback && self.oncallback());
}
}
export class PeriodCard extends AccordionCard {
public oncallback: Function;
public forwardButton: HTMLButtonElement;
public backwardButton: HTMLButtonElement;
public nextButton: any;
public forward: any;
public from: any;
public to: any;
public durationHours: HTMLInputElement;
public startDateInput: HTMLInputElement;
public startTimeInput: HTMLInputElement;
public datetimeFormat: string;
public dateFormat: string;
public timeFormat: string;
public minDate: any;
public maxDate: any;
public slider: any;
public domain: string;
public forcingmodel: string;
public ready: boolean;
constructor(id, title, parentDiv, lang, map, domain, forcingmodel, options?) {
var periodDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, title, parentDiv, periodDiv);
var self = this;
self.domain = domain;
self.forcingmodel = forcingmodel;
var type = (options && options.hasOwnProperty('type'))?options.type:'';
var subtype = (options && options.hasOwnProperty('subtype'))?options.subtype:'';
var initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
var showforwardbackward = (options && options.hasOwnProperty('forwardbackward'))?options.forwardbackward:true;
var form = L.DomUtil.create('form', 'uk-form uk-form-stacked', periodDiv);
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.datetimeFormat = 'YYYY-MM-DD HH:mm';
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
self.minDate = moment.utc().startOf('hour').subtract(72, 'hours');
self.maxDate = moment.utc().startOf('hour').add(240, 'hours');
var fieldset = L.DomUtil.create('fieldset', '', form);
var availableRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(availableRowDiv, "Selected period (UTC)", "See more information here");
var availableDiv = L.DomUtil.create('div', '', availableRowDiv);
var startRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(startRowDiv, "Start date (UTC)", "See more information here");
var startDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', startRowDiv);
var startIcon = L.DomUtil.create('span', 'uk-icon-calendar', startDiv);
self.startDateInput = L.DomUtil.create('input', 'uk-width-1-2', startDiv);
self.startDateInput.type = 'text';
self.startDateInput.placeholder = self.dateFormat;
self.startTimeInput = L.DomUtil.create('input', 'uk-width-1-2', startDiv);
self.startTimeInput.type = 'text';
var durationRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(durationRowDiv, "Duration", "See more information here");
var durationDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', durationRowDiv);
durationDiv.id = 'guide'+initials+'duration';
var durationIcon = L.DomUtil.create('span', 'uk-icon-clock-o', durationDiv);
self.durationHours = L.DomUtil.create('input', 'uk-width-2-6', durationDiv);
self.durationHours.type = 'number';
self.durationHours.value = '48';
self.durationHours.min = '0';
self.durationHours.step = '12';
var hoursSpan = L.DomUtil.create('span', 'uk-width-1-6', durationDiv);
hoursSpan.textContent = " hours";
var directionRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
if (!showforwardbackward) directionRowDiv.style.display = 'none';
super.addLabelDiv(directionRowDiv, "Forward / Backward", "See more information here");
var directionDiv = L.DomUtil.create('div', 'uk-margin-bottom', directionRowDiv);
directionDiv.setAttribute('data-uk-button-radio', '');
var directionButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', directionDiv);
var directionbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', directionButtonGrid);
directionButtonGrid.id = 'guide'+initials+'direction';
var directionButtonGroup = L.DomUtil.create('div', 'uk-button-group', directionbuttonsDiv);
self.forwardButton = L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
self.forwardButton.textContent = 'Forward';
self.backwardButton = L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
self.backwardButton.textContent = 'Backward';
self.forwardButton.onclick = function () {
self.forward = true;
self.updateFromStartDate();
};
self.backwardButton.onclick = function () {
self.forward = false;
self.updateFromStartDate();
};
var clearDiv = L.DomUtil.create('div', 'uk-clearfix', periodDiv);
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.textContent = 'Next';
self.nextButton.id = 'guide'+initials+'period';
self.nextButton.guideFn = function () {
self.nextButton.click();
}
AccordionCard.enableNext(self.nextButton, false);
self.nextButton.onclick = function () {
if (!AccordionCard.isEnabled(self.nextButton)) {
AccordionCard.warningMsg('Mandatory fields missing',
'Specify a valid start date and duration period.');
return;
}
(self.oncallback && self.oncallback(true));
};
self.clear();
$(availableDiv).ionRangeSlider({
min: +self.minDate.utc().format("X"),
max: +self.maxDate.utc().format("X"),
from: +self.from.utc().format("X"),
to: +self.to.utc().format("X"),
disable: true,
step: 1800,
grid: false,
type: "double",
force_edges: true,
prettify: function (num) {
return moment(num, "X").utc().format(self.datetimeFormat);
}
});
self.slider = $(availableDiv).data("ionRangeSlider");
self.durationHours.onchange = function () {
var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat);
if (self.forward) {
date.add(parseInt(self.durationHours.value), 'hours');
if (self.isDateValid(date)) {
self.to = date;
} else {
self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
}
} else {
date.subtract(parseInt(self.durationHours.value), 'hours');
if (self.isDateValid(date)) {
self.from = date;
} else {
self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
}
}
self.updateFromStartDate();
};
self.startDateInput.onchange = function (evt) {
self.updateFromStartDate();
};
self.startTimeInput.onchange = function (evt) {
self.updateFromStartDate();
};
UIkit.ready(function () {
if (!self.ready) {
reqwest({
url: "availableTimes/ms/" + self.domain + "_" + self.forcingmodel,
method: 'get',
type: 'json',
success: function (data) {
self.minDate = moment.utc(data.availableTime.start);
self.maxDate = moment.utc(data.availableTime.stop);
var sliderOpt = {};
sliderOpt['min'] = self.minDate.format("X");
sliderOpt['max'] = self.maxDate.format("X");
self.slider.update(sliderOpt);
var initDate = self.getInitDate();
self.startDateInput.value = initDate.format(self.dateFormat);
self.startTimeInput.value = initDate.startOf('hour').format(self.timeFormat);
self.durationHours.value = '0';
var startDatePicker = UIkit.datepicker(self.startDateInput, { minDate: self.minDate.format(self.dateFormat), maxDate: self.maxDate.format(self.dateFormat), format: self.dateFormat });
var startTimePicker = UIkit.timepicker(self.startTimeInput, {});
self.ready = true;
self.defaults();
}
});
}
});
}
public changeFn(changeCard) {
var self = this;
if ((typeof changeCard.obsDateInput !== 'undefined') && (typeof changeCard.obsTimeInput !== 'undefined')) {
var date = moment.utc(changeCard.obsDateInput.value + ' ' + changeCard.obsTimeInput.value, self.datetimeFormat);
if (date.isBefore(self.minDate) || date.isAfter(self.maxDate)) return;
self.startDateInput.value = changeCard.obsDateInput.value;
self.startTimeInput.value = changeCard.obsTimeInput.value;
self.updateFromStartDate();
}
}
private isDateValid(date) {
var self = this;
if (!date.isValid()) return false;
if (date.isBefore(self.minDate) || date.isAfter(self.maxDate)) return false;
return true;
}
private getValidDateInfo() {
var self = this;
var result: any = {};
result.valid = false;
var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat);
(self.forward) ? date.add(parseInt(self.durationHours.value), 'hours') : date.subtract(parseInt(self.durationHours.value), 'hours');
result.date = date;
if (self.isDateValid(date)) {
result.valid = true;
}
return result;
}
private validate() {
var self = this;
self.status = false;
AccordionCard.enableNext(self.nextButton, false);
var dateinfo = self.getValidDateInfo();
if (typeof dateinfo.valid == 'undefined') {
(self.oncallback && self.oncallback());
return;
};
if (moment.duration(self.to.diff(self.from)).asHours() == 0) {
(self.oncallback && self.oncallback());
return;
};
if (!dateinfo.valid) {
self.from = moment.utc(self.slider.result.from * 1000);
self.to = moment.utc(self.slider.result.to * 1000);
var duration = moment.duration(self.to.diff(self.from)).asHours();
self.durationHours.value = duration + '';
if (duration == 0) return;
}
self.status = true;
self.fireChangeFn(self);
AccordionCard.enableNext(self.nextButton, true);
(self.oncallback && self.oncallback());
}
private updateSlider() {
var self = this;
var sliderOpt = {};
sliderOpt['from'] = self.from.format("X");
sliderOpt['to'] = self.to.format("X");
if (self.slider) {
self.slider.update(sliderOpt);
}
}
private adjustDateToRange() {
var self = this;
var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat);
if (date.isBefore(self.minDate)) self.startTimeInput.value = self.minDate.startOf('hour').format(self.timeFormat);
if (date.isAfter(self.maxDate)) self.startTimeInput.value = self.maxDate.startOf('hour').format(self.timeFormat);
if (self.forward) {
self.from = date.clone();
self.to = date.add(self.durationHours.value, 'hours');
} else {
self.to = date.clone();
self.from = date.subtract(self.durationHours.value, 'hours');
}
}
public defaults() {
var self = this;
self.durationHours.value = '48';
if (document.body.contains(self.forwardButton))
self.forwardButton.click();
else {
self.forward = true;
self.updateFromStartDate();
}
}
public populateCard(geojson) {
var self = this;
var simulation = geojson.features[0].properties.simulation;
var startDate = moment.utc(simulation.startDate);
var stopDate = moment.utc(simulation.stopDate);
var forward = simulation.forwardCalculation;
if (forward) {
self.from = startDate;
self.to = stopDate;
self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
if (document.body.contains(self.forwardButton)) self.forwardButton.click();
} else {
self.from = stopDate;
self.to = startDate;
self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
if (document.body.contains(self.backwardButton)) self.backwardButton.click();
}
}
public populateData(geojson) {
var self = this;
geojson.features[0].properties["simulation"]["forwardCalculation"] = self.forward;
geojson.features[0].properties["simulation"]["startDate"] = self.from.valueOf();
geojson.features[0].properties["simulation"]["stopDate"] = self.to.valueOf();
if (!self.forward) {
geojson.features[0].properties["simulation"]["startDate"] = self.to.valueOf();
geojson.features[0].properties["simulation"]["stopDate"] = self.from.valueOf();
}
}
private updateFromStartDate() {
var self = this;
var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat)
if (self.forward) {
self.from = date.clone();
self.to = date.clone().add(self.durationHours.value, 'hours');
} else {
self.to = date.clone();
self.from = date.clone().subtract(parseInt(self.durationHours.value), 'hours');
}
self.adjustDateToRange();
self.updateSlider();
if (self.ready) self.validate();
}
private getInitDate() {
var self = this;
var initDate = moment.utc();
if (self.obsdate) initDate = self.obsdate;
if (initDate.isBefore(self.minDate) || initDate.isAfter(self.maxDate)) initDate = self.minDate;
return initDate;
}
public clear() {
var self = this;
super.clear();
self.forward = true;
var initDate = self.getInitDate();
self.startDateInput.value = initDate.format(self.dateFormat);
self.startTimeInput.value = initDate.startOf('hour').format(self.timeFormat);
self.durationHours.value = '0';
self.updateFromStartDate();
}
}
export class OilTypeCard extends STWkit.AccordionCard {
public oncallback: Function;
public fresh: boolean;
public freshButton: HTMLButtonElement;
public weatheredButton: HTMLButtonElement;
public nextButton: any;
public selectOilClass: HTMLSelectElement;
public selectOilSpecific: HTMLSelectElement;
private forward: boolean;
private initials: string;
private showstateofoil: boolean;
constructor(id, title, parentDiv, lang, map, options?) {
var oiltypeDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, title, parentDiv, oiltypeDiv);
var self = this;
var form = L.DomUtil.create('form', 'uk-form uk-form-stacked', oiltypeDiv);
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();
};
var type = (options && options.hasOwnProperty('type'))?options.type:'';
var subtype = (options && options.hasOwnProperty('subtype'))?options.subtype:'';
var domain = (options && options.hasOwnProperty('domain'))?options.domain:'';
this.initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
this.showstateofoil = (options && options.hasOwnProperty('stateofoil'))?options.stateofoil:true;
var fieldset = L.DomUtil.create('fieldset', '', form);
var oiltypeRowDiv: any = L.DomUtil.create('div', 'uk-form-row', fieldset);
oiltypeRowDiv.id = 'guide'+this.initials+'class';
oiltypeRowDiv.guideFn = function () {
self.selectOilClass.selectedIndex = 1;
var evt = document.createEvent('Event');
evt.initEvent("change", true, true);
self.selectOilClass.dispatchEvent(evt);
}
var switchOiltype = L.DomUtil.create('ul', 'uk-tab', oiltypeRowDiv);
switchOiltype.setAttribute('data-uk-tab', "{connect:'#"+this.initials+"oiltype-switch'}");
var oilClass = L.DomUtil.create('a', '', L.DomUtil.create('li', '', switchOiltype));
oilClass.id = this.initials+'OilClassTab';
oilClass.textContent = 'Oil class';
var specificOil = L.DomUtil.create('a', '', L.DomUtil.create('li', '', switchOiltype));
specificOil.id = this.initials+'OilSpecificTab';
specificOil.textContent = 'Specific oil';
var contentOiltype = L.DomUtil.create('ul', 'uk-switcher', oiltypeRowDiv);
contentOiltype.id = this.initials+'oiltype-switch';
function addOption(parent, value, txt) {
var option = L.DomUtil.create('option', '', parent);
option.value = value;
option.textContent = txt;
}
var contentoilClass = L.DomUtil.create('li', 'uk-margin-top', contentOiltype);
super.addLabelDiv(contentoilClass, "Select oil class", "See more information here");
var divOilClass = L.DomUtil.create('div', 'uk-form-select', contentoilClass);
divOilClass.setAttribute('data-uk-form-select', '');
var selectedOilClass = L.DomUtil.create('span', '', divOilClass);
self.selectOilClass = L.DomUtil.create('select', '', divOilClass);
self.selectOilClass.size = 3;
self.selectOilClass.style.width = '240px';
addOption(self.selectOilClass, 'Light oils (0-100 cSt)', 'Light oils (0-100 cSt)');
addOption(self.selectOilClass, 'Medium oils (100-1000 cSt)', 'Medium oils (100-1000 cSt)');
addOption(self.selectOilClass, 'Heavy oils (>1000 cSt)', 'Heavy oils (>1000 cSt)');
var contentspecificOil = L.DomUtil.create('li', 'uk-margin-top', contentOiltype);
super.addLabelDiv(contentspecificOil, "Select specific oil", "See more information here");
var divOilSpecific = L.DomUtil.create('div', 'uk-form-select', contentspecificOil);
divOilSpecific.setAttribute('data-uk-form-select', '');
var selectedOilSpecific = L.DomUtil.create('span', '', divOilSpecific);
self.selectOilSpecific = L.DomUtil.create('select', '', divOilSpecific);
self.selectOilSpecific.size = 3;
self.selectOilSpecific.style.width = '240px';
addOption(self.selectOilSpecific, 'GASOLINE', 'Gasoline (700.0 kg/m³)');
addOption(self.selectOilSpecific, 'JET FUEL AND KEROSINE', 'Jet Fuel and Kerosene (802.0 kg/m³)');
addOption(self.selectOilSpecific, 'LIGHT DIESEL FUEL', 'Light Diesel Fuel (852.5 kg/m³)');
addOption(self.selectOilSpecific, 'FUEL OIL NO. 2', 'Fuel Oil no. 2 (852.5 kg/m³)');
addOption(self.selectOilSpecific, 'LIGHT-MEDIUM CRUDE', 'Light-medium Crude (864.0 kg/m³)');
addOption(self.selectOilSpecific, 'LUBRICATING OIL', 'Lubricating Oil (872.0 kg/m³)');
addOption(self.selectOilSpecific, 'INTERMEDIATE OIL', 'Intermediate Oil (904.0 kg/m³)');
addOption(self.selectOilSpecific, 'BUNKER B', 'Bunker B (914.0 kg/m³)');
addOption(self.selectOilSpecific, 'BUNKER C', 'Bunker C (986.2 kg/m³)');
addOption(self.selectOilSpecific, 'HEAVY CRUDE', 'Heavy Crude (990.0 kg/m³)');
addOption(self.selectOilSpecific, 'ASPHALT', 'Asphalt (1000.0 kg/m³)');
addOption(self.selectOilSpecific, 'ORIMULSION (TEST)', 'Orimulsion (test) (1020.0 kg/m³)');
addOption(self.selectOilSpecific, 'HIGH VISCOSITY FUEL OIL (TEST)', 'High Viscosity Fuel Oil (test) (1015.0 kg/m³)');
addOption(self.selectOilSpecific, 'BALDER (IKU-96)', 'Balder (IKU-96)');
addOption(self.selectOilSpecific, 'EKOFISK BLEND 2000', 'Ekofisk Blend 2000');
addOption(self.selectOilSpecific, 'GRANE (SINTEF)', 'Grane (SINTEF)');
addOption(self.selectOilSpecific, 'GULLFAKS A-B', 'Gullfaks A-B');
addOption(self.selectOilSpecific, 'GULLFAKS SOER (IKU)', 'Gullfaks Soer (IKU)');
addOption(self.selectOilSpecific, 'KRISTIN_CORR', 'Kristin_Corr');
addOption(self.selectOilSpecific, 'NORNE (IKU)', 'Norne (IKU)');
addOption(self.selectOilSpecific, 'OSEBERG A (IKU)', 'Oseberg A');
addOption(self.selectOilSpecific, 'SLEIPNER (IKU)', 'Sleipner (IKU)');
addOption(self.selectOilSpecific, 'STATFJORD A', 'Statfjord A');
addOption(self.selectOilSpecific, 'ULA (IKU)', 'Ula (IKU)');
addOption(self.selectOilSpecific, 'VALHALL 2000', 'Valhall 2000');
addOption(self.selectOilSpecific, 'AASGARD 2002', 'Aasgard 2002');
addOption(self.selectOilSpecific, 'DUC (IKU)', 'Duc (IKU)');
addOption(self.selectOilSpecific, 'SIRI', 'Siri');
addOption(self.selectOilSpecific, 'SOUTH ARNE 5C', 'South Arne 5C');
addOption(self.selectOilSpecific, 'SOUTH ARNE 13C', 'South Arne 13C');
addOption(self.selectOilSpecific, 'FUEL OIL NO 6LS (IKU)', 'Fuel Oil No 6LS (IKU)');
addOption(self.selectOilSpecific, 'IF 180-LS ESSO (SINTEF)', 'IF 180-LS Esso (SINTEF)');
addOption(self.selectOilSpecific, 'IF 180-NS ESSO (SINTEF)', 'IF 180-NS Esso (SINTEF)');
addOption(self.selectOilSpecific, 'IF-180 SHELL', 'IF-180 Shell');
addOption(self.selectOilSpecific, 'IF-380 HEAVY FUEL OIL', 'IF-380 Heavy Fuel Oil');
addOption(self.selectOilSpecific, 'IF-30 BUNKER (IKU)', 'IF-30 Bunker (IKU)');
addOption(self.selectOilSpecific, 'MARINE DIESEL (IKU)', 'Marine diesel (IKU)');
addOption(self.selectOilSpecific, 'IFO 380 FU SHAN HAI', 'Ifo 380 Fu Shan Hai');
var oilstateRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
if (!this.showstateofoil) oilstateRowDiv.style.display = 'none';
super.addLabelDiv(oilstateRowDiv, "State of oil", "See more information here");
var oilstateDiv = L.DomUtil.create('div', 'uk-margin-bottom', oilstateRowDiv);
oilstateDiv.setAttribute('data-uk-button-radio', '');
var oilstateButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', oilstateDiv);
var directionbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', oilstateButtonGrid);
var oilstateButtonGroup = L.DomUtil.create('div', 'uk-button-group', directionbuttonsDiv);
self.freshButton = L.DomUtil.create('button', 'uk-button uk-button-small', oilstateButtonGroup);
self.freshButton.textContent = 'Fresh';
self.weatheredButton = L.DomUtil.create('button', 'uk-button uk-button-small', oilstateButtonGroup);
self.weatheredButton.textContent = 'Weathered';
var clearDiv = L.DomUtil.create('div', 'uk-clearfix', oiltypeDiv);
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'+this.initials+'oiltype';
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 oil class or specific oil.');
return;
}
(self.oncallback && self.oncallback(true));
};
self.freshButton.onclick = function () {
self.fresh = true;
self.validate();
};
self.weatheredButton.onclick = function () {
self.fresh = false;
self.validate();
};
UIkit.ready(function () {
self.defaults();
if (document.body.contains(self.freshButton)) self.freshButton.click();
$(switchOiltype).on('show.uk.switcher', function (event, area) {
self.clear();
});
self.selectOilClass.onchange = function (evt) {
self.validate();
};
self.selectOilSpecific.onchange = function (evt) {
self.validate();
};
});
}
private validate() {
var self = this;
self.status = false;
if (self.selectOilClass.selectedIndex == -1 && self.selectOilSpecific.selectedIndex == -1) return;
self.status = true;
STWkit.AccordionCard.enableNext(self.nextButton, true);
(self.oncallback && self.oncallback());
}
public changeFn(changeCard) {
var self = this;
if (typeof changeCard.forward !== 'undefined') {
self.forward = changeCard.forward;
self.freshButton.disabled = false;
self.freshButton.click();
if (!self.forward) {
self.freshButton.disabled = true;
self.weatheredButton.click();
}
}
}
public defaults() {
var self = this;
}
public populateCard(geojson) {
var self = this;
var evt = document.createEvent('Event');
evt.initEvent("change", true, true);
var simulation = geojson.features[0].properties.simulation;
var fresh = simulation.fresh;
UIkit.ready(function () {
if (fresh) {
self.freshButton.click();
} else {
self.weatheredButton.click();
}
if (simulation.oilclass == 'Oil classes') {
document.getElementById(self.initials+'OilClassTab').click();
self.selectOilClass.value = simulation.substance;
self.selectOilClass.dispatchEvent(evt);
}
if (simulation.oilclass == 'Oil, specific') {
document.getElementById(self.initials+'OilSpecificTab').click();
self.selectOilSpecific.value = simulation.substance;
self.selectOilSpecific.dispatchEvent(evt);
}
});
}
public populateData(geojson) {
var self = this;
if (self.selectOilClass.selectedIndex !== -1) {
geojson.features[0].properties["simulation"]["oilclass"] = 'Oil classes';
geojson.features[0].properties["simulation"]["substance"] = self.selectOilClass.options[self.selectOilClass.selectedIndex].value;
}
if (self.selectOilSpecific.selectedIndex !== -1) {
geojson.features[0].properties["simulation"]["oilclass"] = 'Oil, specific';
geojson.features[0].properties["simulation"]["substance"] = self.selectOilSpecific.options[self.selectOilSpecific.selectedIndex].value;
}
geojson.features[0].properties["simulation"]["fresh"] = self.fresh;
}
public clear() {
var self = this;
super.clear();
self.freshButton.disabled = false;
self.freshButton.click();
if (!self.forward) {
self.freshButton.disabled = true;
self.weatheredButton.click();
}
self.fresh = self.forward;
self.selectOilClass.selectedIndex = -1;
self.selectOilSpecific.selectedIndex = -1;
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.status = false;
(self.oncallback && self.oncallback());
}
}
export class CardControl extends L.Control {
private id: any;
private container: HTMLElement;
private startDiv: HTMLDivElement;
private accordionDiv: HTMLDivElement;
private accordion: any;
private lang: string;
private langData: any;
private domain: string;
private cardMap: any;
private forcing: any;
private forcingmodel: string;
private map: L.Map;
private compname: string;
private selectCalculationMode: HTMLSelectElement;
private uncertaintyInput: HTMLInputElement;
private startButton: HTMLButtonElement;
private type: string;
private subtype: any;
private name: string;
private initials: string;
private showuncertainty: boolean;
private showcalculationmode: boolean;
constructor(options) {
super(options);
this.domain = "HELCOM";
if (options.domain) {
this.domain = options.domain;
}
this.forcingmodel = "NEMO";
if (options.forcingmodel) {
this.forcingmodel = options.forcingmodel;
}
this.lang = "en";
if (options.lang) {
this.lang = options.lang;
}
if (options.langdata) {
this.langData = options.langdata;
}
if (options.forcing) {
this.forcing = options.forcing;
}
this.showuncertainty = true;
if (typeof options.uncertainty !== "undefined") this.showuncertainty = options.uncertainty;
this.showcalculationmode = true;
if (typeof options.calculationmode !== "undefined") this.showcalculationmode = options.calculationmode;
this.cardMap = {};
}
public onAdd(map) {
var self = this;
if (this.langData) {
self.setup(map);
} else {
reqwest({
url: "lang/"+self.name+"." + self.lang + ".json",
method: 'get',
type: 'json',
success: function (lang) {
self.setup(map);
}
});
}
L.DomEvent.disableClickPropagation(this.container);
L.DomEvent.on(this.container, 'mousewheel', L.DomEvent.stopPropagation);
window.addEventListener('card:populateData', function (e: any) {
var showevt = document.createEvent("CustomEvent");
showevt.initCustomEvent('container:showComponent', false, false, {
'name': self.compname,
'show': true
});
window.dispatchEvent(showevt);
(e.detail && e.detail.geojson && self.open(e.detail.geojson));
});
return this.container;
}
private setup(map) {
var self = this;
this.map = map;
function addLabelDiv(parentDiv, labelTxt, labelInfo){
var self = this;
var label = L.DomUtil.create('label', 'uk-form-label form-label', parentDiv);
label.textContent = labelTxt;
var addPositionInfo = L.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
addPositionInfo.onclick = function() {
UIkit.notify(" " + labelTxt + "" + labelInfo, { status: 'info', timeout: 10000 });
};
};
function addOption(parent, value, txt ) {
var option = L.DomUtil.create('option', '', parent);
option.value = value;
option.textContent = txt;
}
self.startDiv = L.DomUtil.create('div', 'uk-width-medium-1-1 uk-container-center uk-margin-top', this.container);
var startform = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.startDiv);
startform.setAttribute('novalidate', '');
startform.onsubmit = function(e){
e.preventDefault();
e.stopPropagation();
return false;
};
startform.onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) e.preventDefault();
};
var fieldset = L.DomUtil.create('fieldset', '', startform);
var calculationRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
if (!this.showcalculationmode) calculationRowDiv.style.display = 'none';
addLabelDiv(calculationRowDiv, "Calculation mode", "See more information here");
var calculationMode = L.DomUtil.create('div', 'uk-form-select', calculationRowDiv);
calculationMode.setAttribute('data-uk-form-select','');
var selectedMode = L.DomUtil.create('span', '', calculationMode);
self.selectCalculationMode = L.DomUtil.create('select', '', calculationMode);
addOption(self.selectCalculationMode,'Fast', 'Fast / less detailed');
addOption(self.selectCalculationMode,'Normal', 'Normal');
addOption(self.selectCalculationMode,'Detailed', 'Detailed / slower');
self.selectCalculationMode.selectedIndex = 1;
var uncertaintyRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
addLabelDiv(uncertaintyRowDiv, "Uncertainty", "See more information here");
var uncertaintyLabel = L.DomUtil.create('label', '', uncertaintyRowDiv);
uncertaintyLabel.style.display = 'block';
self.uncertaintyInput = L.DomUtil.create('input', '', uncertaintyLabel);
self.uncertaintyInput.type = 'checkbox';
uncertaintyLabel.appendChild(document.createTextNode(' Extra uncertainty in weather forecast is added to simulation'));
if (!this.showuncertainty) uncertaintyRowDiv.style.display = 'none';
var hr = L.DomUtil.create('hr', 'uk-margin-top', self.startDiv);
self.startButton = L.DomUtil.create('button', 'uk-button uk-button-success uk-margin-top uk-align-center', self.startDiv);
self.startButton.textContent = 'Start model';
self.startDiv.style.display = 'none';
self.startButton.onclick = () => {
self.startButton.disabled = true;
var param = STWkit.getURLParams();
var exerciseid = STWkit.getParamValue('exercise', param);
if (exerciseid) {
STWkit.deleteParam('exercise', param);
param.push(['id', exerciseid]);
window.location.search = STWkit.getSearchUrl(param);
}
var geojson = {};
geojson["type"] = "FeatureCollection";
geojson["features"] = [];
for (var i in self.cardMap) {
if (self.cardMap.hasOwnProperty(i)) {
var card = self.cardMap[i];
card.populateData(geojson);
}
}
if (self.id) geojson["features"][0]["properties"]["uuid"] = self.id;
geojson["features"][0]["properties"]["domain"] = self.domain;
geojson["features"][0]["properties"]["model"] = self.forcingmodel;
geojson["features"][0]["properties"]["simulation"]["uncertainty"] = false;
if (self.uncertaintyInput.checked) geojson["features"][0]["properties"]["simulation"]["uncertainty"] = true;
geojson["features"][0]["properties"]["simulation"]["mode"] = self.selectCalculationMode.value;
reqwest({
url: 'start'+self.initials,
type: 'json',
method: 'post',
contentType: 'application/json',
data: JSON.stringify(geojson),
error: function (err) {
self.startButton.disabled = false;
AccordionCard.warningMsg("Login", "You need to login to use this function.");
},
success: function (location) {
param.push(['id', location.id]);
STWkit.updateUrl(param);
self.clear();
var showevt = document.createEvent("CustomEvent");
showevt.initCustomEvent('container:showComponent', false, false, {
'name': self.compname,
'show': false
});
window.dispatchEvent(showevt);
var simevt = document.createEvent("CustomEvent");
simevt.initCustomEvent('model:newSimulation', false, false, location.id);
window.dispatchEvent(simevt);
self.startButton.disabled = false;
}
});
};
UIkit.ready(() => {
if (!self.accordion) {
self.accordion = UIkit.accordion(self.accordionDiv, { collapse: true, showfirst: true });
// self.openCard(periodid, open);
self.updateBadgeStatus();
self.accordion.on('toggle.uk.accordion', (e, open, c) => {
var id = c[0].id;
self.openCard(id, open);
});
var param = STWkit.getURLParams();
var load = STWkit.getParamValue(self.initials+'load', param);
if (load !== null) {
reqwest({
url: "input/" + load,
method: 'get',
type: 'json',
success: function (inputjson) {
var cardevt = document.createEvent("CustomEvent");
cardevt.initCustomEvent('card:populateData', false, false, {
'geojson': inputjson
});
window.dispatchEvent(cardevt);
STWkit.deleteParam(self.initials+'load', param);
STWkit.updateUrl(param);
}
});
}
}
});
}
public open(geojson) {
var self = this;
if (geojson.features[0].properties.type == self.type && (self.subtype.indexOf(geojson.features[0].properties.subtype)) >= 0) {
self.clear();
for (var i in self.cardMap) {
if (self.cardMap.hasOwnProperty(i)) {
var card = self.cardMap[i];
card.populateCard(geojson);
card.show();
}
}
var evt = document.createEvent('Event');
evt.initEvent("change", true, true);
var simulation = geojson.features[0].properties.simulation;
self.selectCalculationMode.value = simulation.mode;
self.selectCalculationMode.dispatchEvent(evt);
self.uncertaintyInput.checked = simulation.uncertainty;
self.id = geojson.features[0].properties.uuid;
}
}
public ready(name) {
var self = this;
self.compname = name;
var p = STWkit.getURLParams();
var pindex = STWkit.getParamIndex(self.initials, 1, p);
if (pindex >= 0) {
p[pindex][1] = 0;
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + STWkit.getSearchUrl(p);
window.history.pushState({ path: newurl }, '', newurl);
var showevt = document.createEvent("CustomEvent");
showevt.initCustomEvent('container:showComponent', false, false, {
'name': self.compname,
'show': true
});
window.dispatchEvent(showevt);
}
}
var gindex = STWkit.getParamIndex('guide', self.initials, p);
if (gindex >= 0) {
reqwest({
url: 'guide/'+self.initials,
method: 'get',
type: 'json',
success: function (guide) {
var intro = introJs();
intro.setOptions(guide);
var prevElement = null;
intro.onbeforechange(function (targetElement) {
(prevElement && prevElement.guideFn && prevElement.guideFn())
prevElement = targetElement;
});
intro.oncomplete(function() {
var param = STWkit.getURLParams();
if (STWkit.hasParam('guide', self.initials, param)) STWkit.replaceParam('guide', 'player', param);
STWkit.updateUrl(param);
self.startButton.click();
});
intro.onexit(function () {
var param = STWkit.getURLParams();
if (STWkit.hasParam('guide', self.initials, param)) STWkit.deleteParam('guide', param);
STWkit.updateUrl(param);
});
intro.start();
}
});
}
}
private updateBadgeStatus() {
var self = this;
var min = 0, count = 0;
for (var i in self.cardMap) {
if (self.cardMap.hasOwnProperty(i)) {
count++;
var classList = self.cardMap[i].badgeSpan.classList;
if (classList.contains('uk-icon-check')) classList.remove('uk-icon-check');
if (classList.contains('uk-icon-square-o')) classList.remove('uk-icon-square-o');
if (classList.contains('badge-neutral')) classList.remove('badge-neutral');
if (classList.contains('uk-badge-warning')) classList.remove('uk-badge-warning');
if (classList.contains('uk-badge-success')) classList.remove('uk-badge-success');
if (min == 0 && !self.cardMap[i].status) min = count;
}
}
count = 0;
for (var i in self.cardMap) {
if (self.cardMap.hasOwnProperty(i)) {
count++;
var classList = self.cardMap[i].badgeSpan.classList;
if (count == min) {
classList.add('uk-icon-square-o');
classList.add('uk-badge-warning');
}
else if (self.cardMap[i].status) {
classList.add('uk-icon-check');
classList.add('uk-badge-success');
} else {
classList.add('uk-icon-square-o');
classList.add('badge-neutral');
}
}
}
}
private clear() {
var self = this;
self.id = undefined;
var c = 1;
for (var i in self.cardMap) {
if (self.cardMap.hasOwnProperty(i)) {
var card = self.cardMap[i];
card.clear();
card.defaults();
if (c > 1) card.hide();
c++;
}
}
}
private openCard(id, open) {
var self = this;
for (var i in self.cardMap) {
if (self.cardMap.hasOwnProperty(i)) {
if (self.cardMap[i].titleIcon.classList.contains('uk-icon-chevron-up')) {
self.cardMap[i].titleIcon.classList.remove('uk-icon-chevron-up');
self.cardMap[i].titleIcon.classList.add('uk-icon-chevron-down');
}
}
}
if (open) {
if (self.cardMap[id].titleIcon.classList.contains('uk-icon-chevron-down')) {
self.cardMap[id].titleIcon.classList.remove('uk-icon-chevron-down');
self.cardMap[id].titleIcon.classList.add('uk-icon-chevron-up');
}
}
}
private getNextCardId(chain, id) {
var self = this;
var nextId = '';
for (var i in self.cardMap) {
if (self.cardMap.hasOwnProperty(i)) {
var card = self.cardMap[i];
if ((!card.status) && (card.visible())) {
nextId = i;
break;
}
}
}
if (nextId == '') {
nextId = chain[id];
if (nextId !== '' && self.cardMap[nextId].disabled) nextId = self.getNextCardId(chain, nextId);
}
return nextId;
};
private showNext(chain, id) {
var self = this;
if (self.cardMap[id].status) {
var nextId = self.getNextCardId(chain, id);
if (nextId !== '') {
self.cardMap[id].nextId = nextId;
self.cardMap[nextId].show();
} else {
self.startDiv.style.display = 'block';
delete self.cardMap[id].nextId;
}
}
};
public callback(chain, id, gonext) {
var self = this;
if (self.cardMap[id].status) {
self.updateBadgeStatus();
if (gonext) {
self.showNext(chain, id);
self.accordion.toggleItem($("#" + id).data('wrapper'), true, true);
(self.cardMap[id].nextId && $("#" + self.cardMap[id].nextId).data('wrapper') && self.accordion.toggleItem($("#" + self.cardMap[id].nextId).data('wrapper'), true, true))
}
} else {
self.updateBadgeStatus();
self.startDiv.style.display = 'none'
}
};
}
}