/**
* Widget that creates the Tide and Surge Widget in the sidebar
* @module app/widget/TideSurgeWidget
* @requires module: app/DataController
* @requires module: app/widget/MapWidget
* @author David Kristiansen <david.kristiansen@nscc.ca>
* @copyright Nova Scotia Community College 2017
*/
define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/on",
"dojo/dom",
"dojo/topic",
"dojo/dom-style",
"dstore/Memory",
"dstore/legacy/DstoreAdapter",
"dijit/_WidgetBase",
"dijit/_OnDijitClickMixin",
"dijit/registry",
"dijit/form/Select",
"dijit/form/Button",
"dijit/Dialog",
"app/widget/TideChart"
],
function (
declare,
lang,
on,
dom,
topic,
domStyle,
Memory,
DstoreAdapter,
_WidgetBase,
_OnDijitClickMixin,
registry,
Select,
Button,
Dialog,
Chart
) {
return declare([_WidgetBase, _OnDijitClickMixin], {
baseClass: "tideSurge",
title: null,
options: {
map: null,
pane: null,
data: null
},
/** @constructor
* @param {object} args Object of properties to mixin
* @param {object} srcRefNode Dom node for the widget to attach to
**/
constructor: function (param, srcRefNode) {
/** mix in settings and defaults
* @mixin args
*/
declare.safeMixin(this.options, param);
/** Dom widget node */
this.domNode = srcRefNode;
// store localized strings
this.title = this.options.title || "Tide & Surge";
this.set("map", this.options.map);
this.set("pane", this.options.pane);
this.set("data", this.options.data);
},
/**
* Sets title and html content of the base class content pane.
* Occurs after the constructor has run and dom elements have been created.
*
**/
postCreate: function () {
// console.log("TideSurgeWidget::postCreate");
if (this.pane) {
this.pane.set("title", this.title);
this.pane.set("content", "<label for='fsbStation' class='ddLabel'>Tide Station: </label><div id='tsSelect'></div><p id='chartNote'>* Note: Predictions do not take into account waves, adding 0.5 to 1.5 metres for wave run up is suggested.</p></div><div class='centerButton'><button id='btnChart' type='button'></button></div><div id='chartLegend'></div>");
}
},
/**
* Starts the widget after it has been constructed.
* Checks to make sure the required data is loaded.
* @public
*
**/
startup: function () {
// console.log("TideSurgeWidget::startup");
// map not defined
if (!this.data) {
this.destroy();
console.warn("TideSurgeWidget::map required");
}
// when map is loaded
if (this.data) {
this._init();
} else {
on(this.data, "load", lang.hitch(this, function () {
this._init();
}));
}
},
/**
* Destroys widget
* @public
*
**/
destroy: function () {
// console.log("TideSurgeWidget::destory");
this.inherited(arguments);
},
/**
* Creates the button that opens a dialog with a tide chart
* @private
*
**/
_init: function () {
// console.log("TideSurgeWidget::_init");
var minTide = 0; //minimum tide level in cm
var maxTide = 1200; //maximum tide level in cm
var step = 10; //step in cm
var discreteLevel = ((minTide + maxTide) / 10) + 1; //number of stops on the slider
var ruleTicks = discreteLevel - 1; //slider rule tick marks
var diagContent = "<div id='divChart'></div><p id='chartNote'>* Note: Does not account for waves, consider adding 0.5-1.5 m.</p>";
var chartDialog = new Dialog({
// title: "Chart",
class: "nonModal",
content: diagContent
});
chartDialog.on("show", lang.hitch(this, function () {
registry.byId('btnChart').set('disabled', true);
var val = registry.byId('fsbStation').get('displayedValue');
chartDialog.set('title', val + " Tide Station");
this.diagChart = new Chart({
dataStore: this.data
// title: val.name + " Tide Station"
}, dom.byId("divChart")).startup();
}));
chartDialog.on("hide", function () {
try {
registry.byId('chartLegend').destroy(true);
domStyle.set('chartLegend', 'visibility', 'hidden');
registry.byId('btnChart').set('disabled', false);
} catch (err) {
console.error(err);
}
registry.byId('divChart').destroy(false);
chartDialog.set("content", diagContent);
});
var tableDataStore = new DstoreAdapter(this.data.stationList);
var tsSelect = new Select({
id: "fsbStation",
name: "station",
value: 301,
store: tableDataStore,
labelAttr: 'name',
style: "width:170px;",
onChange: function (value) {
// registry.byId('btnChart').set('disabled', false);
}
}, "tsSelect").startup();
var btnChart = new Button({
label: "Tide & Storm Surge Chart",
// style: "width:20px; margin:0 auto;",
onClick: lang.hitch(this, function () {
var val = registry.byId('fsbStation').get('value');
var vURL = "//agrgims.cogs.nscc.ca/arcgis/rest/services/mcfm_pro/tide_stns/MapServer/" + this.data.stationsIds[val];
this.data.getTideData(vURL);
this.data.on("tideData_ready", function () {
chartDialog.show();
});
})
}, "btnChart").startup();
topic.subscribe("fsb/LCA", function () {
registry.byId('fsbStation').set('value', arguments[1].default_site_id);
});
topic.subscribe("ChartDemo", lang.hitch(this, function () {
var vURL = "//agrgims.cogs.nscc.ca/arcgis/rest/services/mcfm_pro/tide_stns/MapServer/38";
this.data.getTideData(vURL);
this.data.on("tideData_ready", function () {
chartDialog.show();
});
}));
topic.subscribe("nor'easter", lang.hitch(this, function () {
var vURL = "//agrgims.cogs.nscc.ca/arcgis/rest/services/mcfm_pro/tide_stns/MapServer/39";
this.data.getTideData(vURL);
this.data.on("tideData_ready", function () {
chartDialog.show();
});
}));
}
});
});