/// /// /// /// /// /// /// module STWkit { export class AccordionCard { private content: any; public status: boolean; public title: HTMLDivElement; public badgeSpan: HTMLSpanElement; public titleIcon: HTMLSpanElement; private changeListeners: Array; public disabled: boolean; constructor(id, label, parent, content) { this.status = false; var container = STWkit.DomUtil.create('div', 'accordion-card', parent); this.title = STWkit.DomUtil.create('h5', 'uk-accordion-title uk-width-1-1 chevron-title', container); this.title.id = id; this.badgeSpan = STWkit.DomUtil.create('span', 'uk-badge', this.title); var titleSpan = STWkit.DomUtil.create('span', 'title', this.title); titleSpan.textContent = ' ' + label; this.titleIcon = STWkit.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', this.title); var accContent = STWkit.DomUtil.create('div', 'uk-accordion-content uk-padding-remove', container); accContent.appendChild(content); this.content = content; this.hide(); this.changeListeners = []; } public addChangeFnListener(listener) { this.changeListeners.push(listener); } public fireChangeFn(changeCard) { for (var i = 0; i < this.changeListeners.length; i++) { var listener: any = this.changeListeners[i]; listener.changeFn(changeCard); } } public addLabelDiv(parentDiv, labelTxt, labelInfo) { var self = this; var label = STWkit.DomUtil.create('label', 'uk-form-label form-label', parentDiv); label.textContent = labelTxt; var addPositionInfo = 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' } }; } }