Skip to content

GitLab

Commit 5334ab74 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

adjusted against stwkit cards

parent 99135041
Expand all Hide whitespace changes
Inline Side-by-side
demo/server.js
View file @ 5334ab74
......@@ -142,65 +142,56 @@ app.get('/demo/guide/it',
{
intro: "This guide will take you through the steps needed to start an Instant Tracer simulation."
},
{
element: '#guideoo1',
intro: "This date represents date and time for when the oil spill was observed. We will use a todays date.",
position: 'left'
},
{
element: '#guideoo2',
intro: "You can either enter position manually or draw by hand. We entered it manually",
position: 'left'
},
{
element: '#guideoo3',
intro: 'Location has been specified. We are ready to move on.',
position: 'left'
},
{
intro: 'Here we specify a simulation period.'
},
{
element: '#guideoo4',
intro: "Duration in hours. Default is 48 hours.",
position: 'left'
},
{
element: '#guideoo5',
intro: 'Simulation period has been specified. We are ready to move on.',
position: 'left'
},
{
intro: 'We specify a type of oil.'
},
{
element: '#guideoo6',
intro: 'We can specify a general oil class or a more specific oil class by clicking on tabs. We choose oil class Medium.',
position: 'left'
},
{
element: '#guideoo7',
intro: 'We are ready to move on.',
position: 'left'
},
{
intro: 'We specify amount of oil.'
},
{
element: '#guideoo8',
intro: 'We specify an amount value.',
position: 'left'
},
{
element: '#guideoo9',
intro: 'We are ready to move on.',
position: 'left'
},
{
intro: 'We can now start the simulation.'
}
{
element: '#guideitpos',
intro: "You can either enter position manually or draw by hand. We entered it manually",
position: 'left'
},
{
element: '#guideitsurfacevolume',
intro: "You can either specify an initial outlet as a flat 2D layer or a 3D volume. We choose flat layer.",
position: 'left'
},
{
element: '#guideitsurface',
intro: "We specify a initial depth for the flat surface.",
position: 'left'
},
{
element: '#guideitlocation',
intro: 'Location has been specified. We are ready to move on.',
position: 'left'
},
{
intro: 'Here we specify a simulation period.'
},
{
element: '#guideitduration',
intro: "Duration in hours. Default is 48 hours.",
position: 'left'
},
{
element: '#guideitperiod',
intro: 'Simulation period has been specified. We are ready to move on.',
position: 'left'
},
{
intro: 'We specify a type of spreading.'
},
{
element: '#guideitspreadingmethod',
intro: 'We specify if the particle points will spread over a contstant depth or normal 3D spreading. We choose 3D.',
position: 'left'
},
{
element: '#guideitspreading',
intro: 'We are ready to move on.',
position: 'left'
},
{
intro: 'We can now start the simulation.'
}
],
overlayOpacity : 0,
......
dist/leaflet-itracer-control.js
View file @ 5334ab74
......@@ -15,7 +15,7 @@ var __extends = (this && this.__extends) || (function () {
})();
var ITLocation = (function (_super) {
__extends(ITLocation, _super);
function ITLocation(id, parentDiv, lang, langData, map, forcing) {
function ITLocation(id, parentDiv, lang, langData, map, forcing, type, initials) {
var _this = this;
var options = {};
var initials = 'it';
......@@ -28,23 +28,24 @@ var ITLocation = (function (_super) {
_this = _super.call(this, id, 'Specify location', parentDiv, lang, langData, map, forcing, options) || this;
var fieldset = L.DomUtil.create('fieldset', 'uk-margin-top', _this.locationForm);
var surfacevolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
surfacevolumeRowDiv.id = 'guideos9';
surfacevolumeRowDiv.id = 'guide' + initials + 'surfacevolume';
surfacevolumeRowDiv.guideFn = function () {
_this.depthSurfaceInput.value = '12';
_this.validate();
};
_super.prototype.addLabelDiv.call(_this, surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-amount-duration' target='_blank'>here</a>");
var surfacevolumeDiv = L.DomUtil.create('div', '', surfacevolumeRowDiv);
surfacevolumeDiv.setAttribute('data-uk-button-radio', '');
var surfacevolumeButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', surfacevolumeDiv);
var surfacevolumebuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', surfacevolumeButtonGrid);
surfacevolumeButtonGrid.id = 'guidefo5';
var surfacevolumeButtonGroup = L.DomUtil.create('div', 'uk-button-group', surfacevolumebuttonsDiv);
_this.surfaceButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.surfaceButton.textContent = 'Flat Layer';
_this.volumeButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.volumeButton.textContent = 'Volume';
var depthSurfaceRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-depth' target='_blank'>here</a>");
depthSurfaceRowDiv.id = 'guide' + initials + 'surface';
var depthSurfaceDiv = L.DomUtil.create('div', ' uk-width-1-1', depthSurfaceRowDiv);
_this.depthSurfaceInput = L.DomUtil.create('input', 'uk-width-1-4', depthSurfaceDiv);
_this.depthSurfaceInput.type = 'number';
......@@ -53,7 +54,7 @@ var ITLocation = (function (_super) {
_this.depthSurfaceInput.min = '0';
_this.depthSurfaceInput.onsubmit = function () { };
var depthVolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-depth' target='_blank'>here</a>");
var depthVolumeDiv = L.DomUtil.create('div', ' uk-width-1-1', depthVolumeRowDiv);
_this.depthVolumeMinInput = L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
_this.depthVolumeMinInput.type = 'number';
......@@ -188,7 +189,7 @@ var ITLocation = (function (_super) {
}(STWkit.LocationCard));
var ITSpreading = (function (_super) {
__extends(ITSpreading, _super);
function ITSpreading(id, title, parentDiv, lang, map) {
function ITSpreading(id, title, parentDiv, lang, map, type, initials) {
var _this = this;
var distributionDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, title, parentDiv, distributionDiv) || this;
......@@ -206,16 +207,15 @@ var ITSpreading = (function (_super) {
}
var fieldset = L.DomUtil.create('fieldset', '', form);
var spreadingRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
spreadingRowDiv.id = 'guideos9';
spreadingRowDiv.id = 'guide' + initials + 'spreadingmethod';
spreadingRowDiv.guideFn = function () {
validate();
self.spreading3DButton.click();
};
_super.prototype.addLabelDiv.call(_this, spreadingRowDiv, "Spreading method", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, spreadingRowDiv, "Spreading method", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-amount-duration' target='_blank'>here</a>");
var spreadingDiv = L.DomUtil.create('div', 'uk-margin-bottom', spreadingRowDiv);
spreadingDiv.setAttribute('data-uk-button-radio', '');
var spreadingButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', spreadingDiv);
var spreadingbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', spreadingButtonGrid);
spreadingButtonGrid.id = 'guidefo5';
var spreadingButtonGroup = L.DomUtil.create('div', 'uk-button-group', spreadingbuttonsDiv);
self.spreading2DButton = L.DomUtil.create('button', 'uk-button uk-button-small', spreadingButtonGroup);
self.spreading2DButton.textContent = 'Constant depth';
......@@ -240,7 +240,7 @@ var ITSpreading = (function (_super) {
self.clear();
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos10';
self.nextButton.id = 'guide' + initials + 'spreading';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
......@@ -248,7 +248,7 @@ var ITSpreading = (function (_super) {
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>amount</b> and <b>duration</b>.');
STWkit.AccordionCard.warningMsg('Mandatory fields missing', 'Specify a spreading method.');
return;
}
(self.oncallback && self.oncallback(true));
......@@ -275,30 +275,32 @@ var ITSpreading = (function (_super) {
};
ITSpreading.prototype.populateCard = function (geojson) {
var self = this;
var simulation = geojson.features[0].properties.simulation;
self.amountInput.value = simulation.amount;
var amountevt = document.createEvent('Event');
amountevt.initEvent("change", true, true);
self.amountInput.dispatchEvent(amountevt);
self.amountSelect.value = simulation.amountUnit;
self.spreadingInput.value = simulation.duration;
var durationevt = document.createEvent('Event');
durationevt.initEvent("change", true, true);
self.spreadingInput.dispatchEvent(durationevt);
self.durationSelect.value = simulation.durationUnit;
// var simulation = geojson.features[0].properties.simulation;
// self.amountInput.value = simulation.amount;
// var amountevt = document.createEvent('Event');
// amountevt.initEvent("change", true, true);
// self.amountInput.dispatchEvent(amountevt);
// self.amountSelect.value = simulation.amountUnit;
// self.spreadingInput.value = simulation.duration;
// var durationevt = document.createEvent('Event');
// durationevt.initEvent("change", true, true);
// self.spreadingInput.dispatchEvent(durationevt);
// self.durationSelect.value = simulation.durationUnit;
};
ITSpreading.prototype.populateData = function (geojson) {
var self = this;
geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
geojson.features[0].properties["simulation"]["duration"] = self.spreadingInput.value;
geojson.features[0].properties["simulation"]["durationUnit"] = self.durationSelect.options[self.durationSelect.selectedIndex].value;
// geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
// geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
// geojson.features[0].properties["simulation"]["duration"] = self.spreadingInput.value;
// geojson.features[0].properties["simulation"]["durationUnit"] = self.durationSelect.options[self.durationSelect.selectedIndex].value;
};
ITSpreading.prototype.clear = function () {
var self = this;
_super.prototype.clear.call(this);
self.amountInput.value = '';
self.spreadingInput.value = '';
if (this.spreading2DButton.classList.contains('uk-active'))
this.spreading2DButton.classList.remove('uk-active');
if (this.spreading3DButton.classList.contains('uk-active'))
this.spreading3DButton.classList.remove('uk-active');
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.status = false;
(self.oncallback && self.oncallback());
......@@ -343,12 +345,15 @@ var L;
this.container = L.DomUtil.create('div', self.name + '-control');
this.accordionDiv = L.DomUtil.create('div', 'uk-accordion', this.container);
var locationid = self.initials + 'locationCard';
self.cardMap[locationid] = new ITLocation(locationid, this.accordionDiv, self.lang, self.langData, map, self.forcing);
self.cardMap[locationid] = new ITLocation(locationid, this.accordionDiv, self.lang, self.langData, map, self.forcing, self.type, self.initials);
self.cardMap[locationid].show();
var periodid = self.initials + 'periodCard';
self.cardMap[periodid] = new STWkit.PeriodCard(periodid, 'Simulation period', this.accordionDiv, self.lang, map, self.domain, self.forcingmodel);
var periodoptions = {};
periodoptions['type'] = this.type;
periodoptions['initials'] = this.initials;
self.cardMap[periodid] = new STWkit.PeriodCard(periodid, 'Simulation period', this.accordionDiv, self.lang, map, self.domain, self.forcingmodel, periodoptions);
var spreadingid = self.initials + 'distributionCard';
self.cardMap[spreadingid] = new ITSpreading(spreadingid, 'Spreading', this.accordionDiv, self.lang, map);
self.cardMap[spreadingid] = new ITSpreading(spreadingid, 'Spreading', this.accordionDiv, self.lang, map, self.type, self.initials);
self.cardMap[locationid].addChangeFnListener(self.cardMap[spreadingid]);
_super.prototype.setup.call(this, map);
var chain = [];
......
src/leaflet-itracer-cards.js
View file @ 5334ab74
......@@ -15,7 +15,7 @@ var __extends = (this && this.__extends) || (function () {
})();
var ITLocation = (function (_super) {
__extends(ITLocation, _super);
function ITLocation(id, parentDiv, lang, langData, map, forcing) {
function ITLocation(id, parentDiv, lang, langData, map, forcing, type, initials) {
var _this = this;
var options = {};
var initials = 'it';
......@@ -28,23 +28,24 @@ var ITLocation = (function (_super) {
_this = _super.call(this, id, 'Specify location', parentDiv, lang, langData, map, forcing, options) || this;
var fieldset = L.DomUtil.create('fieldset', 'uk-margin-top', _this.locationForm);
var surfacevolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
surfacevolumeRowDiv.id = 'guideos9';
surfacevolumeRowDiv.id = 'guide' + initials + 'surfacevolume';
surfacevolumeRowDiv.guideFn = function () {
_this.depthSurfaceInput.value = '12';
_this.validate();
};
_super.prototype.addLabelDiv.call(_this, surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-amount-duration' target='_blank'>here</a>");
var surfacevolumeDiv = L.DomUtil.create('div', '', surfacevolumeRowDiv);
surfacevolumeDiv.setAttribute('data-uk-button-radio', '');
var surfacevolumeButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', surfacevolumeDiv);
var surfacevolumebuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', surfacevolumeButtonGrid);
surfacevolumeButtonGrid.id = 'guidefo5';
var surfacevolumeButtonGroup = L.DomUtil.create('div', 'uk-button-group', surfacevolumebuttonsDiv);
_this.surfaceButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.surfaceButton.textContent = 'Flat Layer';
_this.volumeButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.volumeButton.textContent = 'Volume';
var depthSurfaceRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-depth' target='_blank'>here</a>");
depthSurfaceRowDiv.id = 'guide' + initials + 'surface';
var depthSurfaceDiv = L.DomUtil.create('div', ' uk-width-1-1', depthSurfaceRowDiv);
_this.depthSurfaceInput = L.DomUtil.create('input', 'uk-width-1-4', depthSurfaceDiv);
_this.depthSurfaceInput.type = 'number';
......@@ -53,7 +54,7 @@ var ITLocation = (function (_super) {
_this.depthSurfaceInput.min = '0';
_this.depthSurfaceInput.onsubmit = function () { };
var depthVolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-depth' target='_blank'>here</a>");
var depthVolumeDiv = L.DomUtil.create('div', ' uk-width-1-1', depthVolumeRowDiv);
_this.depthVolumeMinInput = L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
_this.depthVolumeMinInput.type = 'number';
......@@ -188,7 +189,7 @@ var ITLocation = (function (_super) {
}(STWkit.LocationCard));
var ITSpreading = (function (_super) {
__extends(ITSpreading, _super);
function ITSpreading(id, title, parentDiv, lang, map) {
function ITSpreading(id, title, parentDiv, lang, map, type, initials) {
var _this = this;
var distributionDiv = L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, title, parentDiv, distributionDiv) || this;
......@@ -206,16 +207,15 @@ var ITSpreading = (function (_super) {
}
var fieldset = L.DomUtil.create('fieldset', '', form);
var spreadingRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
spreadingRowDiv.id = 'guideos9';
spreadingRowDiv.id = 'guide' + initials + 'spreadingmethod';
spreadingRowDiv.guideFn = function () {
validate();
self.spreading3DButton.click();
};
_super.prototype.addLabelDiv.call(_this, spreadingRowDiv, "Spreading method", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
_super.prototype.addLabelDiv.call(_this, spreadingRowDiv, "Spreading method", "See more information <a style='color:#faa732;' href='help/classic/#" + type + "-" + initials + "-amount-duration' target='_blank'>here</a>");
var spreadingDiv = L.DomUtil.create('div', 'uk-margin-bottom', spreadingRowDiv);
spreadingDiv.setAttribute('data-uk-button-radio', '');
var spreadingButtonGrid = L.DomUtil.create('div', 'uk-grid uk-grid-small', spreadingDiv);
var spreadingbuttonsDiv = L.DomUtil.create('div', 'uk-width-1-2', spreadingButtonGrid);
spreadingButtonGrid.id = 'guidefo5';
var spreadingButtonGroup = L.DomUtil.create('div', 'uk-button-group', spreadingbuttonsDiv);
self.spreading2DButton = L.DomUtil.create('button', 'uk-button uk-button-small', spreadingButtonGroup);
self.spreading2DButton.textContent = 'Constant depth';
......@@ -240,7 +240,7 @@ var ITSpreading = (function (_super) {
self.clear();
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos10';
self.nextButton.id = 'guide' + initials + 'spreading';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
......@@ -248,7 +248,7 @@ var ITSpreading = (function (_super) {
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>amount</b> and <b>duration</b>.');
STWkit.AccordionCard.warningMsg('Mandatory fields missing', 'Specify a spreading method.');
return;
}
(self.oncallback && self.oncallback(true));
......@@ -275,30 +275,32 @@ var ITSpreading = (function (_super) {
};
ITSpreading.prototype.populateCard = function (geojson) {
var self = this;
var simulation = geojson.features[0].properties.simulation;
self.amountInput.value = simulation.amount;
var amountevt = document.createEvent('Event');
amountevt.initEvent("change", true, true);
self.amountInput.dispatchEvent(amountevt);
self.amountSelect.value = simulation.amountUnit;
self.spreadingInput.value = simulation.duration;
var durationevt = document.createEvent('Event');
durationevt.initEvent("change", true, true);
self.spreadingInput.dispatchEvent(durationevt);
self.durationSelect.value = simulation.durationUnit;
// var simulation = geojson.features[0].properties.simulation;
// self.amountInput.value = simulation.amount;
// var amountevt = document.createEvent('Event');
// amountevt.initEvent("change", true, true);
// self.amountInput.dispatchEvent(amountevt);
// self.amountSelect.value = simulation.amountUnit;
// self.spreadingInput.value = simulation.duration;
// var durationevt = document.createEvent('Event');
// durationevt.initEvent("change", true, true);
// self.spreadingInput.dispatchEvent(durationevt);
// self.durationSelect.value = simulation.durationUnit;
};
ITSpreading.prototype.populateData = function (geojson) {
var self = this;
geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
geojson.features[0].properties["simulation"]["duration"] = self.spreadingInput.value;
geojson.features[0].properties["simulation"]["durationUnit"] = self.durationSelect.options[self.durationSelect.selectedIndex].value;
// geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
// geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
// geojson.features[0].properties["simulation"]["duration"] = self.spreadingInput.value;
// geojson.features[0].properties["simulation"]["durationUnit"] = self.durationSelect.options[self.durationSelect.selectedIndex].value;
};
ITSpreading.prototype.clear = function () {
var self = this;
_super.prototype.clear.call(this);
self.amountInput.value = '';
self.spreadingInput.value = '';
if (this.spreading2DButton.classList.contains('uk-active'))
this.spreading2DButton.classList.remove('uk-active');
if (this.spreading3DButton.classList.contains('uk-active'))
this.spreading3DButton.classList.remove('uk-active');
STWkit.AccordionCard.enableNext(self.nextButton, false);
self.status = false;
(self.oncallback && self.oncallback());
......
src/leaflet-itracer-cards.js.map
View file @ 5334ab74
This diff is collapsed.
src/leaflet-itracer-cards.ts
View file @ 5334ab74
......@@ -17,7 +17,7 @@ class ITLocation extends STWkit.LocationCard {
public isVolume: boolean;
constructor(id, parentDiv, lang, langData, map, forcing) {
constructor(id, parentDiv, lang, langData, map, forcing, type, initials) {
var options:any = {};
var initials = 'it';
options['single'] = false;
......@@ -30,25 +30,26 @@ class ITLocation extends STWkit.LocationCard {
var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', 'uk-margin-top', this.locationForm);
var surfacevolumeRowDiv: any = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
surfacevolumeRowDiv.id = 'guideos9';
surfacevolumeRowDiv.id = 'guide'+initials+'surfacevolume';
surfacevolumeRowDiv.guideFn = () => {
this.depthSurfaceInput.value = '12';
this.validate();
}
super.addLabelDiv(surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
super.addLabelDiv(surfacevolumeRowDiv, "Flat Layer/Volume", "See more information <a style='color:#faa732;' href='help/classic/#"+type+"-"+initials+"-amount-duration' target='_blank'>here</a>");
var surfacevolumeDiv = <HTMLDivElement>L.DomUtil.create('div', '', surfacevolumeRowDiv);
surfacevolumeDiv.setAttribute('data-uk-button-radio', '');
var surfacevolumeButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', surfacevolumeDiv);
var surfacevolumebuttonsDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', surfacevolumeButtonGrid);
surfacevolumeButtonGrid.id = 'guidefo5';
var surfacevolumeButtonGroup = <HTMLDivElement>L.DomUtil.create('div', 'uk-button-group', surfacevolumebuttonsDiv);
this.surfaceButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
this.surfaceButton.textContent = 'Flat Layer';
this.volumeButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
this.volumeButton.textContent = 'Volume';
var depthSurfaceRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#"+initials+"-depth' target='_blank'>here</a>");
super.addLabelDiv(depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#"+type+"-"+initials+"-depth' target='_blank'>here</a>");
depthSurfaceRowDiv.id = 'guide'+initials+'surface';
var depthSurfaceDiv = <HTMLDivElement>L.DomUtil.create('div', ' uk-width-1-1', depthSurfaceRowDiv);
this.depthSurfaceInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', depthSurfaceDiv);
this.depthSurfaceInput.type = 'number';
......@@ -58,7 +59,7 @@ class ITLocation extends STWkit.LocationCard {
this.depthSurfaceInput.onsubmit = function() {};
var depthVolumeRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#"+initials+"-depth' target='_blank'>here</a>");
super.addLabelDiv(depthVolumeRowDiv, "Outlet depth [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#"+type+"-"+initials+"-depth' target='_blank'>here</a>");
var depthVolumeDiv = <HTMLDivElement>L.DomUtil.create('div', ' uk-width-1-1', depthVolumeRowDiv);
this.depthVolumeMinInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
this.depthVolumeMinInput.type = 'number';
......@@ -218,7 +219,7 @@ class ITSpreading extends STWkit.AccordionCard {
public nextButton: any;
public status: boolean;
constructor(id, title, parentDiv, lang, map) {
constructor(id, title, parentDiv, lang, map, type, initials) {
var distributionDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, title, parentDiv, distributionDiv);
var self = this;
......@@ -239,17 +240,16 @@ class ITSpreading extends STWkit.AccordionCard {
var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', form);
var spreadingRowDiv: any = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
spreadingRowDiv.id = 'guideos9';
spreadingRowDiv.id = 'guide'+initials+'spreadingmethod';
spreadingRowDiv.guideFn = function () {
validate();
self.spreading3DButton.click();
}
super.addLabelDiv(spreadingRowDiv, "Spreading method", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
super.addLabelDiv(spreadingRowDiv, "Spreading method", "See more information <a style='color:#faa732;' href='help/classic/#"+type+"-"+initials+"-amount-duration' target='_blank'>here</a>");
var spreadingDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-bottom', spreadingRowDiv);
spreadingDiv.setAttribute('data-uk-button-radio', '');
var spreadingButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', spreadingDiv);
var spreadingbuttonsDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', spreadingButtonGrid);
spreadingButtonGrid.id = 'guidefo5';
var spreadingButtonGroup = <HTMLDivElement>L.DomUtil.create('div', 'uk-button-group', spreadingbuttonsDiv);
self.spreading2DButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', spreadingButtonGroup);
self.spreading2DButton.textContent = 'Constant depth';
......@@ -278,7 +278,7 @@ class ITSpreading extends STWkit.AccordionCard {
self.clear();
};
self.nextButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos10';
self.nextButton.id = 'guide'+initials+'spreading';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
......@@ -287,7 +287,7 @@ class ITSpreading extends STWkit.AccordionCard {
self.nextButton.onclick = function () {
if (!STWkit.AccordionCard.isEnabled(self.nextButton)) {
STWkit.AccordionCard.warningMsg('Mandatory fields missing',
'Specify a valid <b>amount</b> and <b>duration</b>.');
'Specify a spreading method.');
return;
}
......@@ -320,35 +320,35 @@ class ITSpreading extends STWkit.AccordionCard {
public populateCard(geojson) {
var self = this;
var simulation = geojson.features[0].properties.simulation;
self.amountInput.value = simulation.amount;
var amountevt = document.createEvent('Event');
amountevt.initEvent("change", true, true);
self.amountInput.dispatchEvent(amountevt);
self.amountSelect.value = simulation.amountUnit;
self.spreadingInput.value = simulation.duration;
var durationevt = document.createEvent('Event');
durationevt.initEvent("change", true, true);
self.spreadingInput.dispatchEvent(durationevt);
self.durationSelect.value = simulation.durationUnit;
// var simulation = geojson.features[0].properties.simulation;
// self.amountInput.value = simulation.amount;
// var amountevt = document.createEvent('Event');
// amountevt.initEvent("change", true, true);
// self.amountInput.dispatchEvent(amountevt);
// self.amountSelect.value = simulation.amountUnit;
// self.spreadingInput.value = simulation.duration;
// var durationevt = document.createEvent('Event');
// durationevt.initEvent("change", true, true);
// self.spreadingInput.dispatchEvent(durationevt);
// self.durationSelect.value = simulation.durationUnit;
}
public populateData(geojson) {
var self = this;
geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
geojson.features[0].properties["simulation"]["duration"] = self.spreadingInput.value;
geojson.features[0].properties["simulation"]["durationUnit"] = self.durationSelect.options[self.durationSelect.selectedIndex].value;
// geojson.features[0].properties["simulation"]["amount"] = self.amountInput.value;
// geojson.features[0].properties["simulation"]["amountUnit"] = self.amountSelect.options[self.amountSelect.selectedIndex].value;
// geojson.features[0].properties["simulation"]["duration"] = self.spreadingInput.value;
// geojson.features[0].properties["simulation"]["durationUnit"] = self.durationSelect.options[self.durationSelect.selectedIndex].value;