Skip to content

GitLab

Commit 122b461a authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

test

parent 49309ac6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 508 additions and 16 deletions
src/components/cards.js
View file @ 122b461a
/// <reference path="../def/stwkit.d.ts" /> /// <reference path="../def/stwkit.d.ts" />
/// <reference path="../def/uikit.d.ts" /> /// <reference path="../def/uikit.d.ts" />
/// <reference path="../def/introJs.d.ts" />
/// <reference path="../def/reqwest.d.ts" />
/// <reference path="../def/leaflet.d.ts" /> /// <reference path="../def/leaflet.d.ts" />
/// <reference path="../def/leaflet-forcing-boundary.d.ts" /> /// <reference path="../def/leaflet-forcing-boundary.d.ts" />
/// <reference path="../def/moment.d.ts" /> /// <reference path="../def/moment.d.ts" />
...@@ -394,9 +396,235 @@ var STWkit; ...@@ -394,9 +396,235 @@ var STWkit;
if (options.langdata) { if (options.langdata) {
_this.langData = options.langdata; _this.langData = options.langdata;
} }
_this.forcingmodel = "NEMO";
if (options.forcing) {
_this.forcing = options.forcing;
if ((_this.forcing.features.length > 0) && (_this.forcing.features[0].properties))
_this.forcingmodel = _this.forcing.features[0].properties.model;
}
_this.cardMap = {}; _this.cardMap = {};
return _this; return _this;
} }
CardControl.prototype.onAdd = function (map) {
var self = this;
if (this.langData) {
self.setup(map);
}
else {
reqwest({
url: "lang/itracer." + 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) {
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;
};
CardControl.prototype.setup = function (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("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + labelTxt + "</b><p>" + 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.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
var fieldset = L.DomUtil.create('fieldset', '', startform);
var calculationRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
addLabelDiv(calculationRowDiv, "Calculation mode", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-calculationmode' target='_blank'>here</a>");
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 <a style='color:#faa732;' href='help/classic/#object-fo-uncertainty' target='_blank'>here</a>");
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'));
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 = function () {
self.startButton.disabled = true;
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: 'startit',
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) {
var param = STWkit.getURLParams();
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(function () {
self.accordion = UIkit.accordion(self.accordionDiv, { collapse: true, showfirst: true });
// self.openCard(periodid, open);
self.updateBadgeStatus();
self.accordion.on('toggle.uk.accordion', function (e, open, c) {
var id = c[0].id;
self.openCard(id, open);
});
var param = STWkit.getURLParams();
var ooload = STWkit.getParamValue('ooload', param);
if (ooload !== null) {
reqwest({
url: "input/" + ooload,
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('ooload', param);
STWkit.updateUrl(param);
}
});
}
});
};
CardControl.prototype.open = function (geojson) {
var self = this;
if (geojson.features[0].properties.type == 'oil' && geojson.features[0].properties.subtype == 'observation') {
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;
}
};
CardControl.prototype.ready = function (name) {
var self = this;
self.compname = name;
var p = STWkit.getURLParams();
var pindex = STWkit.getParamIndex('oo', 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', 'oo', p);
if (gindex >= 0) {
reqwest({
url: 'guide/oo',
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', 'oo', param))
STWkit.replaceParam('guide', 'player', param);
STWkit.updateUrl(param);
self.startButton.click();
});
intro.onexit(function () {
var param = STWkit.getURLParams();
if (STWkit.hasParam('guide', 'oo', param))
STWkit.deleteParam('guide', param);
STWkit.updateUrl(param);
});
intro.start();
}
});
}
};
CardControl.prototype.updateBadgeStatus = function () { CardControl.prototype.updateBadgeStatus = function () {
var self = this; var self = this;
var min = 0, count = 0; var min = 0, count = 0;
...@@ -490,7 +718,7 @@ var STWkit; ...@@ -490,7 +718,7 @@ var STWkit;
return nextId; return nextId;
}; };
; ;
CardControl.prototype.showNext = function (chain, startDiv, id) { CardControl.prototype.showNext = function (chain, id) {
var self = this; var self = this;
if (self.cardMap[id].status) { if (self.cardMap[id].status) {
var nextId = self.getNextCardId(chain, id); var nextId = self.getNextCardId(chain, id);
...@@ -499,25 +727,25 @@ var STWkit; ...@@ -499,25 +727,25 @@ var STWkit;
self.cardMap[nextId].show(); self.cardMap[nextId].show();
} }
else { else {
startDiv.style.display = 'block'; self.startDiv.style.display = 'block';
delete self.cardMap[id].nextId; delete self.cardMap[id].nextId;
} }
} }
}; };
; ;
CardControl.prototype.callback = function (chain, startDiv, accordion, id, gonext) { CardControl.prototype.callback = function (chain, id, gonext) {
var self = this; var self = this;
if (self.cardMap[id].status) { if (self.cardMap[id].status) {
self.updateBadgeStatus(); self.updateBadgeStatus();
if (gonext) { if (gonext) {
self.showNext(chain, startDiv, id); self.showNext(chain, id);
accordion.toggleItem($("#" + id).data('wrapper'), true, true); self.accordion.toggleItem($("#" + id).data('wrapper'), true, true);
(self.cardMap[id].nextId && accordion.toggleItem($("#" + self.cardMap[id].nextId).data('wrapper'), true, true)); (self.cardMap[id].nextId && self.accordion.toggleItem($("#" + self.cardMap[id].nextId).data('wrapper'), true, true));
} }
} }
else { else {
self.updateBadgeStatus(); self.updateBadgeStatus();
startDiv.style.display = 'none'; self.startDiv.style.display = 'none';
} }
}; };
; ;
......
src/components/cards.js.map
View file @ 122b461a
This diff is collapsed.
src/components/cards.ts
View file @ 122b461a
/// <reference path="../def/stwkit.d.ts" /> /// <reference path="../def/stwkit.d.ts" />
/// <reference path="../def/uikit.d.ts" /> /// <reference path="../def/uikit.d.ts" />
/// <reference path="../def/introJs.d.ts" />
/// <reference path="../def/reqwest.d.ts" />
/// <reference path="../def/leaflet.d.ts" /> /// <reference path="../def/leaflet.d.ts" />
/// <reference path="../def/leaflet-forcing-boundary.d.ts" /> /// <reference path="../def/leaflet-forcing-boundary.d.ts" />
/// <reference path="../def/moment.d.ts" /> /// <reference path="../def/moment.d.ts" />
...@@ -424,11 +426,23 @@ module STWkit { ...@@ -424,11 +426,23 @@ module STWkit {
export class CardControl extends L.Control { export class CardControl extends L.Control {
private id: any; private id: any;
private container: HTMLElement;
private startDiv: HTMLDivElement;
private accordionDiv: HTMLDivElement;
private accordion: any;
private lang: string; private lang: string;
private langData: any; private langData: any;
private domain: string; private domain: string;
private cardMap: any; 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;
constructor(options) { constructor(options) {
super(options); super(options);
this.domain = "HELCOM"; this.domain = "HELCOM";
...@@ -442,10 +456,251 @@ module STWkit { ...@@ -442,10 +456,251 @@ module STWkit {
if (options.langdata) { if (options.langdata) {
this.langData = options.langdata; this.langData = options.langdata;
} }
this.forcingmodel = "NEMO";
if (options.forcing) {
this.forcing = options.forcing;
if ((this.forcing.features.length > 0) && (this.forcing.features[0].properties))
this.forcingmodel = this.forcing.features[0].properties.model;
}
this.cardMap = {}; this.cardMap = {};
} }
public onAdd(map) {
var self = this;
if (this.langData) {
self.setup(map);
} else {
reqwest({
url: "lang/itracer." + 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 = <HTMLLabelElement>L.DomUtil.create('label', 'uk-form-label form-label', parentDiv);
label.textContent = labelTxt;
var addPositionInfo = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
addPositionInfo.onclick = function() {
UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + labelTxt + "</b><p>" + labelInfo, { status: 'info', timeout: 10000 });
};
};
function addOption(parent, value, txt ) {
var option = <HTMLOptionElement>L.DomUtil.create('option', '', parent);
option.value = value;
option.textContent = txt;
}
self.startDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-medium-1-1 uk-container-center uk-margin-top', this.container);
var startform = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', self.startDiv);
startform.onsubmit = function(e){
e.preventDefault();
e.stopPropagation();
return false;
};
var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', startform);
var calculationRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
addLabelDiv(calculationRowDiv, "Calculation mode", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-calculationmode' target='_blank'>here</a>");
var calculationMode = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-select', calculationRowDiv);
calculationMode.setAttribute('data-uk-form-select','');
var selectedMode = <HTMLSpanElement>L.DomUtil.create('span', '', calculationMode);
self.selectCalculationMode = <HTMLSelectElement>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 = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
addLabelDiv(uncertaintyRowDiv, "Uncertainty", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-uncertainty' target='_blank'>here</a>");
var uncertaintyLabel = <HTMLLabelElement>L.DomUtil.create('label', '', uncertaintyRowDiv);
uncertaintyLabel.style.display = 'block';
self.uncertaintyInput = <HTMLInputElement>L.DomUtil.create('input', '', uncertaintyLabel);
self.uncertaintyInput.type = 'checkbox';
uncertaintyLabel.appendChild(document.createTextNode(' Extra uncertainty in weather forecast is added to simulation'));
var hr = <HTMLDivElement>L.DomUtil.create('hr', 'uk-margin-top', self.startDiv);
self.startButton = <HTMLButtonElement>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 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: 'startit',
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) {
var param = STWkit.getURLParams();
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(() => {
self.accordion = UIkit.accordion(<any>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 ooload = STWkit.getParamValue('ooload', param);
if (ooload !== null) {
reqwest({
url: "input/" + ooload,
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('ooload', param);
STWkit.updateUrl(param);
}
});
}
});
}
public open(geojson) {
var self = this;
if (geojson.features[0].properties.type == 'oil' && geojson.features[0].properties.subtype == 'observation') {
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('oo', 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', 'oo', p);
if (gindex >= 0) {