Commit 43e69e24 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸

guide

parent 12ac0c6d
......@@ -152,19 +152,19 @@
return urlParams;
};
// Test card:populateData event.
reqwest({
url: "input",
method: 'get',
type: 'json',
success: function (inputjson) {
var cardevt = document.createEvent("CustomEvent");
cardevt.initCustomEvent('card:populateData', false, false, {
'geojson' : inputjson
});
window.dispatchEvent(cardevt);
}
});
// // Test card:populateData event.
// reqwest({
// url: "input",
// method: 'get',
// type: 'json',
// success: function (inputjson) {
// var cardevt = document.createEvent("CustomEvent");
// cardevt.initCustomEvent('card:populateData', false, false, {
// 'geojson' : inputjson
// });
// window.dispatchEvent(cardevt);
// }
// });
</script>
......
......@@ -82,11 +82,11 @@ app.get('/demo/guide/os',
{
steps: [
{
intro: "This guide will take you through the steps needed to start an Floating object simulation."
intro: "This guide will take you through the steps needed to start an Continuous Oil spill simulation."
},
{
element: '#guideos1',
intro: "These buttons specify what type of Object you are using. We will use a single object.",
intro: "This date represents date and time for when the oil spill was observed. We will use a todays date.",
position: 'left'
},
......@@ -110,24 +110,37 @@ app.get('/demo/guide/os',
},
{
element: '#guideos5',
intro: "Simulation direction is forward (forecast) or backward (hindcast).",
intro: 'Simulation period has been specified. We are ready to move on.',
position: 'left'
},
{
intro: 'We specify a type of oil.'
},
{
element: '#guideos6',
intro: 'Simulation period has been specified. We are ready to move on.',
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'
},
{
intro: 'We specify a wind factor.'
},
{
element: '#guideos7',
intro: 'Wind factor is specified in percentage.',
intro: 'We are ready to move on.',
position: 'left'
},
{
intro: 'We specify amount of oil.'
},
{
element: '#guideos8',
intro: 'Total amount/rate is either the total amount or the deploy rate of oil.',
position: 'left'
},
{
element: '#guideos9',
intro: 'Duration specifys the deploy time period for the total amount/rate.',
position: 'left'
},
{
element: '#guideos10',
intro: 'We are ready to move on.',
position: 'left'
},
......@@ -135,6 +148,7 @@ app.get('/demo/guide/os',
intro: 'We can now start the simulation.'
}
],
overlayOpacity : 0,
exitOnOverlayClick: false,
......
......@@ -355,7 +355,7 @@ var OSPeriod = (function (_super) {
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.textContent = 'Next';
self.nextButton.id = 'guideos6';
self.nextButton.id = 'guideos5';
self.nextButton.guideFn = function () {
self.nextButton.click();
};
......@@ -576,6 +576,13 @@ var OSType = (function (_super) {
};
var fieldset = L.DomUtil.create('fieldset', '', form);
var oiltypeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
oiltypeRowDiv.id = 'guideos6';
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:'#osoiltype-switch'}");
var oilClass = L.DomUtil.create('a', '', L.DomUtil.create('li', '', switchOiltype));
......@@ -659,7 +666,7 @@ var OSType = (function (_super) {
self.clear();
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos8';
self.nextButton.id = 'guideos7';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
......@@ -751,9 +758,12 @@ var OSAmount = (function (_super) {
}
var fieldset = L.DomUtil.create('fieldset', '', form);
var amountRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
amountRowDiv.id = 'guideos8';
amountRowDiv.guideFn = function () {
self.amountInput.value = '100';
};
_super.prototype.addLabelDiv.call(_this, amountRowDiv, "Total amount/rate", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-totalamount' target='_blank'>here</a>");
var amountValueDiv = L.DomUtil.create('div', 'uk-width-1-1', amountRowDiv);
amountValueDiv.id = 'guideos7';
self.amountInput = L.DomUtil.create('input', 'uk-width-1-4', amountValueDiv);
self.amountInput.type = 'number';
self.amountInput.step = '100';
......@@ -769,6 +779,11 @@ var OSAmount = (function (_super) {
addOption(self.amountSelect, 'm3/day', 'm³ / day');
addOption(self.amountSelect, 'tonnes/day', 'tonnes / day');
var durationRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
durationRowDiv.id = 'guideos9';
durationRowDiv.guideFn = function () {
self.durationInput.value = '6';
validate();
};
_super.prototype.addLabelDiv.call(_this, durationRowDiv, "Duration", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
var durationDiv = L.DomUtil.create('div', '', durationRowDiv);
durationDiv.id = 'guideos7';
......@@ -815,7 +830,7 @@ var OSAmount = (function (_super) {
self.clear();
};
self.nextButton = L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos8';
self.nextButton.id = 'guideos10';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function () {
self.nextButton.click();
......
This diff is collapsed.
......@@ -406,7 +406,7 @@ class OSPeriod extends OilSpillCard {
};
self.nextButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.textContent = 'Next';
self.nextButton.id = 'guideos6';
self.nextButton.id = 'guideos5';
self.nextButton.guideFn = function(){
self.nextButton.click();
}
......@@ -635,7 +635,14 @@ class OSType extends OilSpillCard {
};
var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', form);
var oiltypeRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
var oiltypeRowDiv:any = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
oiltypeRowDiv.id = 'guideos6';
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:'#osoiltype-switch'}");
var oilClass = <HTMLAnchorElement>L.DomUtil.create('a', '', L.DomUtil.create('li', '', switchOiltype));
......@@ -725,7 +732,7 @@ class OSType extends OilSpillCard {
self.clear();
};
self.nextButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos8';
self.nextButton.id = 'guideos7';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function(){
self.nextButton.click();
......@@ -836,10 +843,14 @@ class OSAmount extends OilSpillCard {
var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', form);
var amountRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
var amountRowDiv:any = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
amountRowDiv.id = 'guideos8';
amountRowDiv.guideFn = function(){
self.amountInput.value = '100';
}
super.addLabelDiv(amountRowDiv, "Total amount/rate", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-totalamount' target='_blank'>here</a>");
var amountValueDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1', amountRowDiv);
amountValueDiv.id = 'guideos7';
self.amountInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', amountValueDiv);
self.amountInput.type = 'number';
self.amountInput.step = '100';
......@@ -855,7 +866,13 @@ class OSAmount extends OilSpillCard {
addOption(self.amountSelect, 'm3/day', 'm³ / day');
addOption(self.amountSelect, 'tonnes/day', 'tonnes / day');
var durationRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
var durationRowDiv:any = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
durationRowDiv.id = 'guideos9';
durationRowDiv.guideFn = function(){
self.durationInput.value = '6';
validate();
}
super.addLabelDiv(durationRowDiv, "Duration", "See more information <a style='color:#faa732;' href='help/classic/#oil-os-amount-duration' target='_blank'>here</a>");
var durationDiv = <HTMLDivElement>L.DomUtil.create('div', '', durationRowDiv);
durationDiv.id = 'guideos7';
......@@ -901,7 +918,7 @@ class OSAmount extends OilSpillCard {
self.clear();
};
self.nextButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-margin-top uk-align-right', clearDiv);
self.nextButton.id = 'guideos8';
self.nextButton.id = 'guideos10';
self.nextButton.textContent = 'Next';
self.nextButton.guideFn = function(){
self.nextButton.click();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment