Skip to content

GitLab

Commit e5c98474 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

added oiltypecard

parent 2e9d8897
Expand all Hide whitespace changes
Inline Side-by-side
demo/index.html
View file @ e5c98474
......@@ -153,23 +153,6 @@
};
if (forcing.features.length > 0) properties["forcing"] = forcing;
// SimpleCardControl = STWkit.CardControl.extend({
// setup: function (map) {
// this.container = STWkit.DomUtil.create('div', +self.name+'-control');
// this.accordionDiv = STWkit.DomUtil.create('div', 'uk-accordion', this.container);
// var locationid = self.initials+'locationCard';
// self.cardMap[locationid] = new Location(locationid, this.accordionDiv, self.lang, self.langData, map, self.forcing);
// self.cardMap[locationid].show();
// // super.setup(map);
// },
// show: function() {},
// // ready: function(name) {super.ready(name)},
// // clear: function() {super.clear()},
// // hide: function() {super.hide()}
// });
class SimpleCardControl extends STWkit.CardControl {
constructor(options) {super(options);}
setup(map) {
......@@ -196,16 +179,28 @@
// periodoptions['forwardbackward'] = false;
var periodid = 'periodCard';
this.cardMap[periodid] = new STWkit.PeriodCard(periodid, 'Simulation period', this.accordionDiv, this.lang, map, this.domain, this.forcingmodel, periodoptions);
var oiltypeoptions = {};
oiltypeoptions['type'] = type;
oiltypeoptions['initials'] = initials;
var oiltypeid = 'oiltypeCard';
this.cardMap[oiltypeid] = new STWkit.OilTypeCard(oiltypeid, 'Type of oil', this.accordionDiv, this.lang, map, oiltypeoptions);
this.cardMap[periodid].addChangeFnListener(this.cardMap[oiltypeid]);
super.setup(map);
var chain = [];
chain[locationid] = periodid;
chain[periodid] = '';
chain[periodid] = oiltypeid;
chain[oiltypeid] = '';
this.cardMap[locationid].oncallback = (gonext) => {
super.callback(chain, locationid, gonext);
};
this.cardMap[periodid].oncallback = (gonext) => {
super.callback(chain, periodid, gonext);
};
this.cardMap[oiltypeid].oncallback = (gonext) => {
super.callback(chain, oiltypeid, gonext);
};
}
show() {}
hide() {}
......
src/components/cards.js
View file @ e5c98474
......@@ -730,6 +730,243 @@ var STWkit;
return PeriodCard;
}(AccordionCard));
STWkit.PeriodCard = PeriodCard;
var OilTypeCard = (function (_super) {
__extends(OilTypeCard, _super);
function OilTypeCard(id, title, parentDiv, lang, map, options) {
var _this = this;
var oiltypeDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, title, parentDiv, oiltypeDiv) || this;
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 : '';
_this.initials = (options && options.hasOwnProperty('initials')) ? options.initials : '';
var fieldset = L.DomUtil.create('fieldset', '', form);
var oiltypeRowDiv = 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.prototype.addLabelDiv.call(_this, contentoilClass, "Select oil class", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + _this.initials + "-oilclass' target='_blank'>here</a>");
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.prototype.addLabelDiv.call(_this, contentspecificOil, "Select specific oil", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + _this.initials + "-specificoil' target='_blank'>here</a>");
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);
_super.prototype.addLabelDiv.call(_this, oilstateRowDiv, "State of oil", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + _this.initials + "-oilstate' target='_blank'>here</a>");
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 + 'type';
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 <b>oil class</b> or <b>specific oil</b>.');
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();
};
});
return _this;
}
OilTypeCard.prototype.validate = function () {
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());
};
OilTypeCard.prototype.changeFn = function (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();
}
}
};
OilTypeCard.prototype.defaults = function () {
var self = this;
};
OilTypeCard.prototype.populateCard = function (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);
}
});
};
OilTypeCard.prototype.populateData = function (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;
};
OilTypeCard.prototype.clear = function () {
var self = this;
_super.prototype.clear.call(this);
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());
};
return OilTypeCard;
}(STWkit.AccordionCard));
STWkit.OilTypeCard = OilTypeCard;
var CardControl = (function (_super) {
__extends(CardControl, _super);
function CardControl(options) {
......
src/components/cards.js.map
View file @ e5c98474
This diff is collapsed.
src/components/cards.ts
View file @ e5c98474
......@@ -791,9 +791,269 @@ module STWkit {
}
}
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;
constructor(id, title, parentDiv, lang, map, options?) {
var oiltypeDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, title, parentDiv, oiltypeDiv);
var self = this;
var form = <HTMLFormElement>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:'';
this.initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', form);
var oiltypeRowDiv: any = <HTMLDivElement>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 = <HTMLUListElement>L.DomUtil.create('ul', 'uk-tab', oiltypeRowDiv);
switchOiltype.setAttribute('data-uk-tab', "{connect:'#"+this.initials+"oiltype-switch'}");
var oilClass = <HTMLAnchorElement>L.DomUtil.create('a', '', L.DomUtil.create('li', '', switchOiltype));
oilClass.id = this.initials+'OilClassTab';
oilClass.textContent = 'Oil class';
var specificOil = <HTMLAnchorElement>L.DomUtil.create('a', '', L.DomUtil.create('li', '', switchOiltype));
specificOil.id = this.initials+'OilSpecificTab';
specificOil.textContent = 'Specific oil';
var contentOiltype = <HTMLUListElement>L.DomUtil.create('ul', 'uk-switcher', oiltypeRowDiv);
contentOiltype.id = this.initials+'oiltype-switch';
function addOption(parent, value, txt) {
var option = <HTMLOptionElement>L.DomUtil.create('option', '', parent);
option.value = value;
option.textContent = txt;
}
var contentoilClass = <HTMLLIElement>L.DomUtil.create('li', 'uk-margin-top', contentOiltype);
super.addLabelDiv(contentoilClass, "Select oil class", "See more information <a style='color:#faa732;' href='help/classic/#"+type+"-"+this.initials+"-oilclass' target='_blank'>here</a>");
var divOilClass = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-select', contentoilClass);
divOilClass.setAttribute('data-uk-form-select', '');
var selectedOilClass = <HTMLSpanElement>L.DomUtil.create('span', '', divOilClass);
self.selectOilClass = <HTMLSelectElement>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 = <HTMLLIElement>L.DomUtil.create('li', 'uk-margin-top', contentOiltype);
super.addLabelDiv(contentspecificOil, "Select specific oil", "See more information <a style='color:#faa732;' href='help/classic/#"+type+"-"+this.initials+"-specificoil' target='_blank'>here</a>");
var divOilSpecific = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-select', contentspecificOil);
divOilSpecific.setAttribute('data-uk-form-select', '');
var selectedOilSpecific = <HTMLSpanElement>L.DomUtil.create('span', '', divOilSpecific);
self.selectOilSpecific = <HTMLSelectElement>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 = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(oilstateRowDiv, "State of oil", "See more information <a style='color:#faa732;' href='help/classic/#"+type+"-"+this.initials+"-oilstate' target='_blank'>here</a>");
var oilstateDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-bottom', oilstateRowDiv);
oilstateDiv.setAttribute('data-uk-button-radio', '');
var oilstateButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', oilstateDiv);
var directionbuttonsDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', oilstateButtonGrid);
var oilstateButtonGroup = <HTMLDivElement>L.DomUtil.create('div', 'uk-button-group', directionbuttonsDiv);
self.freshButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', oilstateButtonGroup);
self.freshButton.textContent = 'Fresh';
self.weatheredButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', oilstateButtonGroup);
self.weatheredButton.textContent = 'Weathered';
var clearDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-clearfix', oiltypeDiv);
var clearButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-left', clearDiv);
clearButton.textContent = 'Clear';
clearButton.onclick = function () {
self.clear();
};
self.nextButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guide'+this.initials+'type';
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 <b>oil class</b> or <b>specific oil</b>.');
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;