cards.ts 75 KB
Newer Older
Tomas Pettersson's avatar
Tomas Pettersson committed
1 2
/// <reference path="../def/stwkit.d.ts" />
/// <reference path="../def/uikit.d.ts" />
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
3 4
/// <reference path="../def/introJs.d.ts" />
/// <reference path="../def/reqwest.d.ts" />
Tomas Pettersson's avatar
Tomas Pettersson committed
5 6 7 8
/// <reference path="../def/leaflet.d.ts" />
/// <reference path="../def/leaflet-forcing-boundary.d.ts" />
/// <reference path="../def/moment.d.ts" />

Tomas Pettersson's avatar
Tomas Pettersson committed
9
module STWkit {
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
10 11 12 13 14 15 16 17
    export class AccordionCard  {
        private content: any;
        public status: boolean;
        public title: HTMLDivElement;
        public badgeSpan: HTMLSpanElement;
        public titleIcon: HTMLSpanElement;
        private changeListeners: Array<Object>;
        public disabled: boolean;
Tomas Pettersson's avatar
Tomas Pettersson committed
18

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
        constructor(id, label, parent, content) {
            this.status = false;
            var container = <HTMLDivElement>STWkit.DomUtil.create('div', 'accordion-card', parent);
            this.title = <HTMLDivElement>STWkit.DomUtil.create('h5', 'uk-accordion-title uk-width-1-1 chevron-title', container);
            this.title.id = id;
            this.badgeSpan = <HTMLSpanElement>STWkit.DomUtil.create('span', 'uk-badge', this.title);
            var titleSpan = <HTMLSpanElement>STWkit.DomUtil.create('span', 'title', this.title);
            titleSpan.textContent = '  ' + label;
            this.titleIcon = <HTMLSpanElement>STWkit.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', this.title);
            var accContent = <HTMLDivElement>STWkit.DomUtil.create('div', 'uk-accordion-content uk-padding-remove', container);
            accContent.appendChild(content);
            this.content = content;
            this.hide();
            this.changeListeners = [];
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
34

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
35 36 37
        public addChangeFnListener(listener) {
            this.changeListeners.push(listener);
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
38

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
39 40 41 42 43
        public fireChangeFn(changeCard) {
            for (var i = 0; i < this.changeListeners.length; i++) {
                var listener: any = this.changeListeners[i];
                listener.changeFn(changeCard);
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
44 45
        }

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
46 47 48 49 50 51 52 53
        public addLabelDiv(parentDiv, labelTxt, labelInfo) {
            var self = this;
            var label = <HTMLLabelElement>STWkit.DomUtil.create('label', 'uk-form-label form-label', parentDiv);
            label.textContent = labelTxt;
            var addPositionInfo = <HTMLSpanElement>STWkit.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
            addPositionInfo.onclick = function () {
                AccordionCard.infoMsg(labelTxt, labelInfo);
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
54 55
        };

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
56 57
        static infoMsg(title: string, msg: string) {
            return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'info', timeout: 10000 });
Tomas Pettersson's avatar
Tomas Pettersson committed
58
        }
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
59 60
        static warningMsg(title: string, msg: string) {
            return UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + title + "</b><p>" + msg, { status: 'warning', timeout: 10000 });
Tomas Pettersson's avatar
Tomas Pettersson committed
61 62
        }

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
63 64 65 66 67 68 69 70 71
        static enableNext(button: HTMLButtonElement, enable) {
            var isEnabled = button.classList.contains('next-enabled');
            if (enable && !isEnabled) {
                button.classList.add('next-enabled');
            }
            if (!enable && isEnabled) {
                button.classList.remove('next-enabled');
            }
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
72

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
73 74 75
        static isEnabled(button: HTMLButtonElement) {
            return button.classList.contains('next-enabled');
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
76

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
77 78 79
        public clear() {
            this.status = false;
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
80

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
81 82 83 84 85 86 87 88 89 90 91 92
        public hide() {
            this.title.style.display = 'none';
            this.content.style.display = 'none';
        }
        public show() {
            this.title.style.display = 'block';
            this.content.style.display = 'block';
        }

        public visible() {
            return (this.title.style.display == 'block')
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
93

Tomas Pettersson's avatar
Tomas Pettersson committed
94
    }
Tomas Pettersson's avatar
Tomas Pettersson committed
95

Tomas Pettersson's avatar
Tomas Pettersson committed
96 97 98 99 100
    export class LocationCard extends AccordionCard {
        private control: any;
        public oncallback: Function;
        public nextButton: any;
        public polygonButton: HTMLButtonElement;
Tomas Pettersson's avatar
Tomas Pettersson committed
101
        public multipleButton: HTMLButtonElement;
Tomas Pettersson's avatar
Tomas Pettersson committed
102
        public pointButton: HTMLButtonElement;
Tomas Pettersson's avatar
Tomas Pettersson committed
103
        public circleButton: HTMLButtonElement;
Tomas Pettersson's avatar
Tomas Pettersson committed
104 105 106 107 108 109
        public lineButton: HTMLButtonElement;
        public exitControl: L.Control;
        public dateFormat: string;
        public timeFormat: string;
        public datetimeFormat: string;
        public datetimeTFormat: string;
110
        public positions: any[];
Tomas Pettersson's avatar
rename  
Tomas Pettersson committed
111
        public positionMaxDepth: number;
Tomas Pettersson's avatar
Tomas Pettersson committed
112 113
        public geometryType: string;
        private forcingBoundary: any;
Tomas Pettersson's avatar
Tomas Pettersson committed
114 115
        private locationDiv: HTMLDivElement;
        private locationForm: HTMLFormElement;
Tomas Pettersson's avatar
Tomas Pettersson committed
116
    
Tomas Pettersson's avatar
Tomas Pettersson committed
117 118
    
        constructor(id, title ,parentDiv, lang, langData, map, forcing, options) {
Tomas Pettersson's avatar
Tomas Pettersson committed
119
            var locationDiv = <HTMLDivElement>STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
120
            super(id, title, parentDiv, locationDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
121
            var self = this;
Tomas Pettersson's avatar
Tomas Pettersson committed
122 123
            self.locationDiv = locationDiv;
            if (forcing) self.forcingBoundary = new Forcing.Boundary(self.locationDiv, map, forcing);            
Tomas Pettersson's avatar
Tomas Pettersson committed
124 125 126 127 128 129 130 131 132 133
            
    
            var satCallbackFn = function(latlngs, geojsonfeature, timestamp, id){
                self.clear();
                var geojson:any = {};
                geojson["type"] = "FeatureCollection";
                geojson["features"] = [];
                geojson["features"].push(geojsonfeature);
                geojson.features[0].properties["simulation"] = {};            
                self.populateCard(geojson);
Tomas Pettersson's avatar
Tomas Pettersson committed
134
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
135
    
Tomas Pettersson's avatar
Tomas Pettersson committed
136
            self.locationForm = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', self.locationDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
137
            self.locationForm.setAttribute('novalidate','');            
Tomas Pettersson's avatar
Tomas Pettersson committed
138
            self.locationForm.onsubmit = function (e) {
Tomas Pettersson's avatar
Tomas Pettersson committed
139 140 141 142
                e.preventDefault();
                e.stopPropagation();
                return false;
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
143 144 145 146
            this.locationForm.onkeypress = function(e) {
                var key = e.charCode || e.keyCode || 0;     
                if (key == 13) e.preventDefault();
            };            
Tomas Pettersson's avatar
Tomas Pettersson committed
147
            var type = (options && options.hasOwnProperty('type'))?options.type:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
148
            var subtype = (options && options.hasOwnProperty('subtype'))?options.subtype:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
149
            var initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
150
            var domain = (options && options.hasOwnProperty('domain'))?options.domain:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
151
            var guide = (options && options.hasOwnProperty('guide'))?options.guide:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
152 153
            var showsingle = (options && options.hasOwnProperty('single'))?options.single:true;
            var showmultiple = (options && options.hasOwnProperty('multiple'))?options.multiple:false;
154 155
            var showpolygon = (options && options.hasOwnProperty('polygon') && options.polygon.hasOwnProperty('show'))?options.polygon.show:true;
            var namepolygon = (options && options.hasOwnProperty('polygon') && options.polygon.hasOwnProperty('name'))?options.polygon.name:'Polygon';
Tomas Pettersson's avatar
Tomas Pettersson committed
156 157
            var showline = (options && options.hasOwnProperty('line'))?options.line:true;
            var showcircle = (options && options.hasOwnProperty('circle'))?options.circle:false;
Tomas Pettersson's avatar
Tomas Pettersson committed
158 159 160 161
            var showoutlettype = (options && options.hasOwnProperty('outlettype'))?options.outlettype:true;
            var outlettypeDiv = <HTMLDivElement>L.DomUtil.create('div', '', self.locationForm);
            if (!showoutlettype) outlettypeDiv.style.display = 'none';
            var typeLabelGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-margin-top', outlettypeDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
162
            var objectlabelDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', typeLabelGrid);
Tomas Pettersson's avatar
Tomas Pettersson committed
163
            super.addLabelDiv(objectlabelDiv, "Outlet type", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-type' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
164 165 166 167
            var typeButtonDiv = <HTMLDivElement>L.DomUtil.create('div', '', outlettypeDiv);
            typeButtonDiv.id = 'guide'+initials+'type';
            typeButtonDiv.setAttribute('data-uk-button-radio', '');
            var typeButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', typeButtonDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
168 169 170 171
            var objectbuttonsDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', typeButtonGrid);
            var objectButtonGroup = <HTMLDivElement>L.DomUtil.create('div', 'uk-button-group', objectbuttonsDiv);
            self.pointButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
            self.pointButton.textContent = 'Single';
Tomas Pettersson's avatar
Tomas Pettersson committed
172 173 174 175 176
            if (!showsingle) self.pointButton.style.display = 'none';
            self.multipleButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
            self.multipleButton.textContent = 'Multiple';
            self.multipleButton.disabled = false;
            if (!showmultiple) self.multipleButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
177 178 179
            self.circleButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
            self.circleButton.textContent = 'Circle';
            if (!showcircle) self.circleButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
180 181 182
            self.lineButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
            self.lineButton.textContent = 'Line';
            self.lineButton.disabled = false;
Tomas Pettersson's avatar
Tomas Pettersson committed
183
            if (!showline) self.lineButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
184
            self.polygonButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
185
            self.polygonButton.textContent = namepolygon;
Tomas Pettersson's avatar
Tomas Pettersson committed
186
            if (!showpolygon) self.polygonButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
187 188
            self.pointButton.onclick = function () { self.geometryType = "point"; self.control.setType(self.geometryType); }
            self.lineButton.onclick = function () { self.geometryType = "linestring"; self.control.setType(self.geometryType); }
Tomas Pettersson's avatar
Tomas Pettersson committed
189
            self.multipleButton.onclick = function () { self.geometryType = "multipoint"; self.control.setType(self.geometryType); }
Tomas Pettersson's avatar
Tomas Pettersson committed
190
            self.polygonButton.onclick = function () { self.geometryType = "polygon"; self.control.setType(self.geometryType); }
Tomas Pettersson's avatar
Tomas Pettersson committed
191
            self.circleButton.onclick = function () { self.geometryType = "circle"; self.control.setType(self.geometryType); }
Tomas Pettersson's avatar
Tomas Pettersson committed
192 193
            self.polygonButton.disabled = false;
    
194
            self.positions = [];
195

Tomas Pettersson's avatar
Tomas Pettersson committed
196
            var positionLabelGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-margin-top', self.locationForm);
Tomas Pettersson's avatar
Tomas Pettersson committed
197 198
    
            var positionlabelDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1', positionLabelGrid);
Tomas Pettersson's avatar
Tomas Pettersson committed
199
            super.addLabelDiv(positionlabelDiv, "Position", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-position' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
200
            var positionDiv: any = <HTMLDivElement>L.DomUtil.create('div', '', self.locationForm);
Tomas Pettersson's avatar
Tomas Pettersson committed
201
            positionDiv.id = 'guide'+initials+'pos';
Tomas Pettersson's avatar
Tomas Pettersson committed
202 203 204 205 206 207 208 209 210 211
            var positionButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', positionDiv);
            var latlonDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
            var drawDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', positionButtonGrid);
            // var importDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-3', positionButtonGrid);
            var latlngButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', latlonDiv);
            latlngButton.textContent = 'Enter manually';
            var drawButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small uk-align-right uk-margin-remove', drawDiv);
            drawButton.textContent = 'Free hand draw';
            // var importButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', importDiv);
            // importButton.textContent = 'Import';
Tomas Pettersson's avatar
Tomas Pettersson committed
212 213 214

            
            
Tomas Pettersson's avatar
Tomas Pettersson committed
215 216 217 218 219 220 221 222 223
            positionDiv.guideFn = function () {
                var geojson = {};
                geojson["type"] = "FeatureCollection";
                geojson["features"] = [];
                var feature = {};
                feature['type'] = "Feature";
                feature['geometry'] = {};
                feature['geometry']['type'] = "Point";
                feature['geometry']['coordinates'] = [];
Tomas Pettersson's avatar
Tomas Pettersson committed
224 225 226 227 228 229
                var lat = 56.0;
                var lng = 19.0;
                if (guide) {
                    lat = guide[0];
                    lng = guide[1];
                }
Tomas Pettersson's avatar
Tomas Pettersson committed
230 231
                feature['geometry']['coordinates'].push(lng);
                feature['geometry']['coordinates'].push(lat);
Tomas Pettersson's avatar
Tomas Pettersson committed
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
                geojson["features"].push(feature);
                self.control.addGeoJSON(geojson);
            }
    
            var bbox = {};
            bbox['s'] = -90;
            bbox['n'] = 90;
            bbox['w'] = -180;
            bbox['e'] = 180;
            if (forcing) bbox = forcing.features[0].properties.bbox;
    
            self.control = new L.Control.Coordinates({
                "lang": lang,
                "langdata": langData.coordinates,
                "id": id,
                "inline": true,
                "bbox" : bbox,
                "table": true,
                "type": false,
                "buttons": false,
                "tabs": false,
                "callback": function (latlngs, geojson) {
254
                    self.positions = [];
Tomas Pettersson's avatar
rename  
Tomas Pettersson committed
255
                    self.positionMaxDepth = 0;                          
Tomas Pettersson's avatar
Tomas Pettersson committed
256 257 258 259 260 261 262 263 264 265 266 267
                    if (latlngs.length > 0) {
                        var toggleevt = document.createEvent("CustomEvent");
                        toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
                            'show': true
                        });
                        window.dispatchEvent(toggleevt);
                        self.fireChangeFn(self);
                        if (self.exitControl) map.removeControl(self.exitControl);
                        self.exitControl = null;
                        var coordinates = [];
                        switch (self.geometryType) {
                            case 'point':
Tomas Pettersson's avatar
Tomas Pettersson committed
268
                                coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat, 0]);
Tomas Pettersson's avatar
Tomas Pettersson committed
269
                                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
270 271 272
                            case 'circle':
                                coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat, 0]);
                                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
273 274
                            case 'multipoint':
                                coordinates = geojson.features[0].geometry.coordinates;
Tomas Pettersson's avatar
Tomas Pettersson committed
275
                                for (var i = 0; i < coordinates.length; i++) {coordinates[i].push(0);}
Tomas Pettersson's avatar
Tomas Pettersson committed
276 277 278
                                break;
                            case 'linestring':
                                var center = L.polyline(latlngs).getBounds().getCenter()
Tomas Pettersson's avatar
Tomas Pettersson committed
279
                                coordinates.push([center.lng, center.lat, 0]);
Tomas Pettersson's avatar
Tomas Pettersson committed
280 281 282
                                break;
                            case 'polygon':
                                var center = L.polygon(latlngs).getBounds().getCenter();   
Tomas Pettersson's avatar
Tomas Pettersson committed
283
                                coordinates.push([center.lng, center.lat, 0]);
Tomas Pettersson's avatar
Tomas Pettersson committed
284 285 286 287 288
                                break;
                        
                            default:
                                break;
                        }
289 290 291 292
                        if (self.forcingBoundary) {
                            self.forcingBoundary.validate(coordinates);
                            self.forcingBoundary.addListener(self.control.layers);
                        }
Tomas Pettersson's avatar
Tomas Pettersson committed
293
                        self.control.showTable();
294 295 296 297 298
                        for (var i = 0; i < coordinates.length; i++) {
                            var depth = 0;
                            if (self.forcingBoundary) depth = self.forcingBoundary.depth(coordinates[i][1], coordinates[i][0])
                            self.positions.push([coordinates[i][1], coordinates[i][0], depth]);
                        }
Tomas Pettersson's avatar
Tomas Pettersson committed
299
                        self.positionMaxDepth = Math.floor(self.positions[0][2]);         
300
                        self.validate();
Tomas Pettersson's avatar
Tomas Pettersson committed
301 302 303
                    }
                }
            });
Tomas Pettersson's avatar
Tomas Pettersson committed
304
            var content = self.control.onAdd(map);
Tomas Pettersson's avatar
Tomas Pettersson committed
305
            var coordinateDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-top uk-margin-bottom', self.locationForm);
Tomas Pettersson's avatar
Tomas Pettersson committed
306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321
            coordinateDiv.appendChild(content);
            self.control.hideTable();
    
            latlngButton.onclick = function () { self.control.latlng(); };
            drawButton.onclick = function () {
                var toggleevt = document.createEvent("CustomEvent");
                toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
                    'show': false
                });
                window.dispatchEvent(toggleevt);
                if (self.forcingBoundary) self.forcingBoundary.show();
                self.control.draw();
                self.exitControl = new L.Control({ position: 'bottomright' });
                self.exitControl.onAdd = function (map: L.Map) {
                    var container = L.DomUtil.create('div', 'exit-control');
                    var exitPanel = L.DomUtil.create('div', 'uk-panel uk-panel-box', container);
Tomas Pettersson's avatar
Tomas Pettersson committed
322 323 324
                    var finishButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small uk-button-primary uk-margin-right', exitPanel);
                    finishButton.textContent = 'Finish';
                    finishButton.onclick = function (e) {
Tomas Pettersson's avatar
Tomas Pettersson committed
325 326
                        map.fire('draw:canceled');
                    };
Tomas Pettersson's avatar
Tomas Pettersson committed
327
                    finishButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
328 329
                    // 4 is multipoint type in coordinates control
                    if (self.control.getType() == GeometryType.MULTIPOINT) finishButton.style.display = '';
Tomas Pettersson's avatar
Tomas Pettersson committed
330 331 332 333 334 335 336 337 338 339 340 341 342 343 344
                    var cancelButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', exitPanel);
                    cancelButton.textContent = 'Cancel';
                    cancelButton.onclick = function (e) {
                        if (self.exitControl) map.removeControl(self.exitControl);
                        self.exitControl = null;
                        var toggleevt = document.createEvent("CustomEvent");
                        toggleevt.initCustomEvent('container:toggleVisibility', false, false, {
                            'show': true
                        });
                        window.dispatchEvent(toggleevt);
                        self.clear();
                    };
    
                    L.DomEvent.disableClickPropagation(container);
                    return container;
Tomas Pettersson's avatar
Tomas Pettersson committed
345
                };
Tomas Pettersson's avatar
Tomas Pettersson committed
346 347
                self.exitControl.addTo(map);
    
Tomas Pettersson's avatar
Tomas Pettersson committed
348
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
349
            // importButton.onclick = function(){self.control.import();};
Tomas Pettersson's avatar
Tomas Pettersson committed
350
            var clearDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-clearfix', self.locationDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
351 352 353 354 355 356 357
            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.textContent = 'Next';
Tomas Pettersson's avatar
Tomas Pettersson committed
358
            self.nextButton.id = 'guide'+initials+'location';
Tomas Pettersson's avatar
Tomas Pettersson committed
359 360 361
    
            self.nextButton.guideFn = function () {
                self.nextButton.click();
Tomas Pettersson's avatar
Tomas Pettersson committed
362
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
363 364 365 366 367
    
            AccordionCard.enableNext(self.nextButton, false);
    
            self.nextButton.onclick = function () {
                if (!AccordionCard.isEnabled(self.nextButton)) {
Tomas Pettersson's avatar
Tomas Pettersson committed
368
                    AccordionCard.warningMsg('Mandatory fields missing', self.mandatoryTxt());
Tomas Pettersson's avatar
Tomas Pettersson committed
369 370 371 372 373
                    return;
                }
                if (self.forcingBoundary) self.forcingBoundary.hide();
                (self.oncallback && self.oncallback(true));
            };
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
374
            UIkit.ready(function () {    
Tomas Pettersson's avatar
Tomas Pettersson committed
375 376 377
                self.defaults();
            });
    
Tomas Pettersson's avatar
Tomas Pettersson committed
378
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
379 380 381 382

        public mandatoryTxt() {
            return 'Specify a location by <b>manually entering</b> position or <b>draw</b> on the map.';
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
383 384 385
    
        public show() {
            super.show();
Tomas Pettersson's avatar
Tomas Pettersson committed
386
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
387
    
388
        public validate() {
389
            if (this.positions.length == 0) return;
390 391 392 393 394
            this.status = true;
            AccordionCard.enableNext(this.nextButton, true);
            (this.oncallback && this.oncallback());
        };

Tomas Pettersson's avatar
Tomas Pettersson committed
395 396 397 398 399 400 401
        public hide() {
            super.hide();
        }
    
    
        public defaults() {
            var self = this;
Tomas Pettersson's avatar
Tomas Pettersson committed
402 403
            if (document.body.contains(self.pointButton) && self.pointButton.style.display != 'none') self.pointButton.click();
            else if (document.body.contains(self.circleButton) && self.circleButton.style.display != 'none') self.circleButton.click();
404 405
            else if (document.body.contains(self.lineButton) && self.lineButton.style.display != 'none') self.lineButton.click();
        
Tomas Pettersson's avatar
Tomas Pettersson committed
406 407 408 409 410 411
        }
    
        public populateCard(geojson) {
            var self = this;
            var simulation = geojson.features[0].properties.simulation;
            var type = geojson.features[0].geometry.type.toLowerCase();
Tomas Pettersson's avatar
Tomas Pettersson committed
412
            if (geojson.features[0].properties.hasOwnProperty('radius')) type = 'circle';
Tomas Pettersson's avatar
Tomas Pettersson committed
413 414 415 416
            switch (type) {
                case "point":
                self.pointButton.click();
                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
417 418 419
                case "circle":
                self.circleButton.click();
                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
420 421 422
                case "multipoint":
                self.multipleButton.click();
                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
423 424 425 426 427 428 429 430 431 432 433
                case "linestring":
                self.lineButton.click();
                break;
                case "polygon":
                self.polygonButton.click();
                break;
                default:
                break;
            }
            self.control.setType(type);
            self.control.addGeoJSON(geojson);
Tomas Pettersson's avatar
Tomas Pettersson committed
434
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
435 436 437 438 439 440 441 442 443 444 445
    
        public populateData(geojson) {
            var self = this;
            var json = self.control.getGeoJSON();
            for (var i = 0; i < json.features.length; i++) {
                json.features[i]["properties"] = {};
                geojson.features.push(json.features[i]);
            }
    
            geojson.features[0].properties["simulation"] = {};
    
Tomas Pettersson's avatar
Tomas Pettersson committed
446
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
447 448 449 450
    
        public clear() {
            var self = this;
            super.clear();
451 452 453 454
            if (self.forcingBoundary) {
                self.forcingBoundary.hide();
                self.forcingBoundary.removeListener(self.control.layers);
            }        
Tomas Pettersson's avatar
Tomas Pettersson committed
455 456 457 458 459 460 461
            self.control.clear();
            self.control.hideTable();
            if (self.nextButton) AccordionCard.enableNext(self.nextButton, false);
            (self.oncallback && self.oncallback());
        }
    
    
Tomas Pettersson's avatar
Tomas Pettersson committed
462
    }
Tomas Pettersson's avatar
Tomas Pettersson committed
463 464 465

    export class PeriodCard extends AccordionCard {
        public oncallback: Function;
466 467
        public forwardButton: HTMLButtonElement;
        public backwardButton: HTMLButtonElement;            
Tomas Pettersson's avatar
Tomas Pettersson committed
468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485
        public nextButton: any;
        public forward: any;
        public from: any;
        public to: any;
        public durationHours: HTMLInputElement;
        public startDateInput: HTMLInputElement;
        public startTimeInput: HTMLInputElement;
        public datetimeFormat: string;
        public dateFormat: string;
        public timeFormat: string;
        public minDate: any;
        public maxDate: any;
        public slider: any;
        public domain: string;
        public forcingmodel: string;
        public ready: boolean;

        
486
        constructor(id, title, parentDiv, lang, map, domain, forcingmodel, options?) {
Tomas Pettersson's avatar
Tomas Pettersson committed
487 488 489 490 491
            var periodDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
            super(id, title, parentDiv, periodDiv);
            var self = this;
            self.domain = domain;
            self.forcingmodel = forcingmodel;
492

Tomas Pettersson's avatar
Tomas Pettersson committed
493
            var type = (options && options.hasOwnProperty('type'))?options.type:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
494
            var subtype = (options && options.hasOwnProperty('subtype'))?options.subtype:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
495
            var initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
496
            var showforwardbackward = (options && options.hasOwnProperty('forwardbackward'))?options.forwardbackward:true;
Tomas Pettersson's avatar
Tomas Pettersson committed
497
            var form = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', periodDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
498
            form.setAttribute('novalidate', '');
Tomas Pettersson's avatar
Tomas Pettersson committed
499 500 501 502 503
            form.onsubmit = function (e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
504 505 506 507
            form.onkeypress = function(e) {
                var key = e.charCode || e.keyCode || 0;     
                if (key == 13) e.preventDefault();
            };              
Tomas Pettersson's avatar
Tomas Pettersson committed
508 509 510 511 512 513 514
            self.datetimeFormat = 'YYYY-MM-DD HH:mm';
            self.dateFormat = 'YYYY-MM-DD';
            self.timeFormat = 'HH:mm';
            self.minDate = moment.utc().startOf('hour').subtract(72, 'hours');
            self.maxDate = moment.utc().startOf('hour').add(240, 'hours');
            var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', form);
            var availableRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
Tomas Pettersson's avatar
Tomas Pettersson committed
515
            super.addLabelDiv(availableRowDiv, "Selected period (UTC)", "See more information <a style='color:#faa732;' href='help/classic?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-period' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
516 517
            var availableDiv = <HTMLDivElement>L.DomUtil.create('div', '', availableRowDiv);
            var startRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
Tomas Pettersson's avatar
Tomas Pettersson committed
518
            super.addLabelDiv(startRowDiv, "Start date (UTC)", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-start' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
519 520 521 522 523 524 525 526
            var startDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', startRowDiv);
            var startIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-calendar', startDiv);
            self.startDateInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', startDiv);
            self.startDateInput.type = 'text';
            self.startDateInput.placeholder = self.dateFormat;
            self.startTimeInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', startDiv);
            self.startTimeInput.type = 'text';
            var durationRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
Tomas Pettersson's avatar
Tomas Pettersson committed
527
            super.addLabelDiv(durationRowDiv, "Duration", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-duration' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
528
            var durationDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', durationRowDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
529
            durationDiv.id = 'guide'+initials+'duration';
Tomas Pettersson's avatar
Tomas Pettersson committed
530 531 532 533 534 535 536 537
            var durationIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-clock-o', durationDiv);
            self.durationHours = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-2-6', durationDiv);
            self.durationHours.type = 'number';
            self.durationHours.value = '48';
            self.durationHours.min = '0';
            self.durationHours.step = '12';
            var hoursSpan = <HTMLInputElement>L.DomUtil.create('span', 'uk-width-1-6', durationDiv);
            hoursSpan.textContent = " hours";
538
            var directionRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
539
            if (!showforwardbackward) directionRowDiv.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
540
            super.addLabelDiv(directionRowDiv, "Forward / Backward", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-direction' target='_blank'>here</a>");
541 542 543 544
            var directionDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-bottom', directionRowDiv);
            directionDiv.setAttribute('data-uk-button-radio', '');
            var directionButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', directionDiv);
            var directionbuttonsDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', directionButtonGrid);
Tomas Pettersson's avatar
Tomas Pettersson committed
545
            directionButtonGrid.id = 'guide'+initials+'direction';
546 547 548 549 550 551 552
            var directionButtonGroup = <HTMLDivElement>L.DomUtil.create('div', 'uk-button-group', directionbuttonsDiv);
            self.forwardButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
            self.forwardButton.textContent = 'Forward';
            self.backwardButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', directionButtonGroup);
            self.backwardButton.textContent = 'Backward';
    
            self.forwardButton.onclick = function () {
Tomas Pettersson's avatar
Tomas Pettersson committed
553 554
                    self.forward = true;
                    self.updateFromStartDate();
555 556
            };
            self.backwardButton.onclick = function () {
Tomas Pettersson's avatar
Tomas Pettersson committed
557 558
                    self.forward = false;
                    self.updateFromStartDate();
559 560
            };

Tomas Pettersson's avatar
Tomas Pettersson committed
561 562 563 564 565 566 567 568
            var clearDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-clearfix', periodDiv);
            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.textContent = 'Next';
Tomas Pettersson's avatar
Tomas Pettersson committed
569
            self.nextButton.id = 'guide'+initials+'period';
Tomas Pettersson's avatar
Tomas Pettersson committed
570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618
            self.nextButton.guideFn = function () {
                self.nextButton.click();
            }
            AccordionCard.enableNext(self.nextButton, false);
            self.nextButton.onclick = function () {
                if (!AccordionCard.isEnabled(self.nextButton)) {
                    AccordionCard.warningMsg('Mandatory fields missing',
                        'Specify a valid <b>start date</b> and <b>duration</b> period.');
                    return;
                }
    
                (self.oncallback && self.oncallback(true));
            };
    
            self.clear();
    
            $(availableDiv).ionRangeSlider({
                min: +self.minDate.utc().format("X"),
                max: +self.maxDate.utc().format("X"),
                from: +self.from.utc().format("X"),
                to: +self.to.utc().format("X"),
                disable: true,
                step: 1800,
                grid: false,
                type: "double",
                force_edges: true,
                prettify: function (num) {
                    return moment(num, "X").utc().format(self.datetimeFormat);
                }
            });
    
            self.slider = $(availableDiv).data("ionRangeSlider");
            self.durationHours.onchange = function () {
                var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat);
                if (self.forward) {
                    date.add(parseInt(self.durationHours.value), 'hours');
                    if (self.isDateValid(date)) {
                        self.to = date;
                    } else {
                        self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
                    }
                } else {
                    date.subtract(parseInt(self.durationHours.value), 'hours');
                    if (self.isDateValid(date)) {
                        self.from = date;
                    } else {
                        self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
                    }
                }
Tomas Pettersson's avatar
Tomas Pettersson committed
619
                self.updateFromStartDate();
Tomas Pettersson's avatar
Tomas Pettersson committed
620 621 622
            };
    
            self.startDateInput.onchange = function (evt) {
Tomas Pettersson's avatar
Tomas Pettersson committed
623
                self.updateFromStartDate();
Tomas Pettersson's avatar
Tomas Pettersson committed
624 625 626
            };
    
            self.startTimeInput.onchange = function (evt) {
Tomas Pettersson's avatar
Tomas Pettersson committed
627
                self.updateFromStartDate();
Tomas Pettersson's avatar
Tomas Pettersson committed
628
            };
629 630 631 632


    

Tomas Pettersson's avatar
Tomas Pettersson committed
633 634 635 636 637 638 639 640 641 642 643 644 645
            UIkit.ready(function () {
                if (!self.ready) {
                    reqwest({
                        url: "availableTimes/ms/" + self.domain + "_" + self.forcingmodel,
                        method: 'get',
                        type: 'json',
                        success: function (data) {
                            self.minDate = moment.utc(data.availableTime.start);
                            self.maxDate = moment.utc(data.availableTime.stop);
                            var sliderOpt = {};
                            sliderOpt['min'] = self.minDate.format("X");
                            sliderOpt['max'] = self.maxDate.format("X");
                            self.slider.update(sliderOpt);
Tomas Pettersson's avatar
Tomas Pettersson committed
646 647 648 649 650
                            var initDate = self.getInitDate();
                            self.startDateInput.value = initDate.format(self.dateFormat);
                            self.startTimeInput.value = initDate.startOf('hour').format(self.timeFormat);            
                            self.durationHours.value = '0';
                                            
651 652
                            var startDatePicker = UIkit.datepicker(<any>self.startDateInput, { minDate: self.minDate.format(self.dateFormat), maxDate: self.maxDate.format(self.dateFormat), format: self.dateFormat });
                            var startTimePicker = UIkit.timepicker(<any>self.startTimeInput, {});
Tomas Pettersson's avatar
Tomas Pettersson committed
653
                            self.ready = true;
Tomas Pettersson's avatar
Tomas Pettersson committed
654
                            self.defaults();
Tomas Pettersson's avatar
Tomas Pettersson committed
655 656 657 658 659 660
                        }
                    });
    
                }
            });
        }
661 662 663 664 665


        public changeFn(changeCard) {
            var self = this;
            if ((typeof changeCard.obsDateInput !== 'undefined') && (typeof changeCard.obsTimeInput !== 'undefined')) {
666 667
                var date = moment.utc(changeCard.obsDateInput.value + ' ' + changeCard.obsTimeInput.value, self.datetimeFormat);
                if (date.isBefore(self.minDate) || date.isAfter(self.maxDate)) return;    
Tomas Pettersson's avatar
Tomas Pettersson committed
668 669
                self.startDateInput.value = changeCard.obsDateInput.value;
                self.startTimeInput.value = changeCard.obsTimeInput.value;
Tomas Pettersson's avatar
Tomas Pettersson committed
670
                self.updateFromStartDate();
671 672 673
            }
        }

Tomas Pettersson's avatar
Tomas Pettersson committed
674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716
    
        private isDateValid(date) {
            var self = this;
            if (!date.isValid()) return false;
            if (date.isBefore(self.minDate) || date.isAfter(self.maxDate)) return false;
            return true;
        }
    
        private getValidDateInfo() {
            var self = this;
            var result: any = {};
            result.valid = false;
            var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat);
            (self.forward) ? date.add(parseInt(self.durationHours.value), 'hours') : date.subtract(parseInt(self.durationHours.value), 'hours');
            result.date = date;
            if (self.isDateValid(date)) {
                result.valid = true;
            }
            return result;
        }
    
    
        private validate() {
            var self = this;
            self.status = false;
            AccordionCard.enableNext(self.nextButton, false);
            var dateinfo = self.getValidDateInfo();
            if (typeof dateinfo.valid == 'undefined') {
                (self.oncallback && self.oncallback());
                return;
            };
            if (moment.duration(self.to.diff(self.from)).asHours() == 0) {
                (self.oncallback && self.oncallback());
                return;
            };
            if (!dateinfo.valid) {
                self.from = moment.utc(self.slider.result.from * 1000);
                self.to = moment.utc(self.slider.result.to * 1000);
                var duration = moment.duration(self.to.diff(self.from)).asHours();
                self.durationHours.value = duration + '';
                if (duration == 0) return;
            }
            self.status = true;
717
            self.fireChangeFn(self);     
Tomas Pettersson's avatar
Tomas Pettersson committed
718 719 720 721 722 723 724 725 726
            AccordionCard.enableNext(self.nextButton, true);
            (self.oncallback && self.oncallback());
        }
    
        private updateSlider() {
            var self = this;
            var sliderOpt = {};
            sliderOpt['from'] = self.from.format("X");
            sliderOpt['to'] = self.to.format("X");
Tomas Pettersson's avatar
Tomas Pettersson committed
727 728 729
            if (self.slider) {
                self.slider.update(sliderOpt);
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749
        }
    
    
        private adjustDateToRange() {
            var self = this;
            var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat);
            if (date.isBefore(self.minDate)) self.startTimeInput.value = self.minDate.startOf('hour').format(self.timeFormat);
            if (date.isAfter(self.maxDate)) self.startTimeInput.value = self.maxDate.startOf('hour').format(self.timeFormat);
            if (self.forward) {
                self.from = date.clone();
                self.to = date.add(self.durationHours.value, 'hours');
            } else {
                self.to = date.clone();
                self.from = date.subtract(self.durationHours.value, 'hours');
            }
        }
    
        public defaults() {
            var self = this;
            self.durationHours.value = '48';
Tomas Pettersson's avatar
Tomas Pettersson committed
750 751 752 753 754 755 756 757
            
            if (document.body.contains(self.forwardButton)) 
                self.forwardButton.click();
            else {
                self.forward = true;
                self.updateFromStartDate();
            }
            
Tomas Pettersson's avatar
Tomas Pettersson committed
758 759 760 761 762 763 764 765 766 767 768 769
        }
    
        public populateCard(geojson) {
            var self = this;
            var simulation = geojson.features[0].properties.simulation;
            var startDate = moment.utc(simulation.startDate);
            var stopDate = moment.utc(simulation.stopDate);
            var forward = simulation.forwardCalculation;
            if (forward) {
                self.from = startDate;
                self.to = stopDate;
                self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
770
                if (document.body.contains(self.forwardButton)) self.forwardButton.click();
Tomas Pettersson's avatar
Tomas Pettersson committed
771 772 773 774
            } else {
                self.from = stopDate;
                self.to = startDate;
                self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
775
                if (document.body.contains(self.backwardButton))  self.backwardButton.click();
Tomas Pettersson's avatar
Tomas Pettersson committed
776 777 778 779 780 781 782 783 784 785 786 787 788
            }
        }
    
        public populateData(geojson) {
            var self = this;
            geojson.features[0].properties["simulation"]["forwardCalculation"] = self.forward;
            geojson.features[0].properties["simulation"]["startDate"] = self.from.valueOf();
            geojson.features[0].properties["simulation"]["stopDate"] = self.to.valueOf();
            if (!self.forward) {
                geojson.features[0].properties["simulation"]["startDate"] = self.to.valueOf();
                geojson.features[0].properties["simulation"]["stopDate"] = self.from.valueOf();
            }
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
789 790 791 792 793 794 795 796 797 798 799 800 801 802

        private updateFromStartDate() {
            var self = this;
            var date = moment.utc(self.startDateInput.value + ' ' + self.startTimeInput.value, self.datetimeFormat)
            if (self.forward) {
                self.from = date.clone();
                self.to = date.clone().add(self.durationHours.value, 'hours');
            } else {
                self.to = date.clone();
                self.from =  date.clone().subtract(parseInt(self.durationHours.value), 'hours');
            }
            
            self.adjustDateToRange();
            self.updateSlider();            
Tomas Pettersson's avatar
Tomas Pettersson committed
803
            if (self.ready) self.validate();
Tomas Pettersson's avatar
Tomas Pettersson committed
804 805 806 807 808 809 810 811 812 813 814 815
        }

        private getInitDate() {
            var self = this;
            var initDate = moment.utc();
            if (self.obsdate) initDate = self.obsdate;
            if (initDate.isBefore(self.minDate) || initDate.isAfter(self.maxDate)) initDate = self.minDate;            
            return initDate;
        }



Tomas Pettersson's avatar
Tomas Pettersson committed
816 817 818
        public clear() {
            var self = this;
            super.clear();
Tomas Pettersson's avatar
Tomas Pettersson committed
819
            self.forward = true;
820
            var initDate = self.getInitDate();
Tomas Pettersson's avatar
Tomas Pettersson committed
821
            self.startDateInput.value = initDate.format(self.dateFormat);
Tomas Pettersson's avatar
Tomas Pettersson committed
822
            self.startTimeInput.value = initDate.startOf('hour').format(self.timeFormat);            
Tomas Pettersson's avatar
Tomas Pettersson committed
823
            self.durationHours.value = '0';
Tomas Pettersson's avatar
Tomas Pettersson committed
824
            self.updateFromStartDate();
Tomas Pettersson's avatar
Tomas Pettersson committed
825 826 827
        }
    }
    
Tomas Pettersson's avatar
Tomas Pettersson committed
828 829 830 831 832 833 834 835 836 837
    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;
Tomas Pettersson's avatar
Tomas Pettersson committed
838
        private showstateofoil: boolean;
Tomas Pettersson's avatar
Tomas Pettersson committed
839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854
    
        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();
            };             
Tomas Pettersson's avatar
Tomas Pettersson committed
855

Tomas Pettersson's avatar
Tomas Pettersson committed
856
            var type = (options && options.hasOwnProperty('type'))?options.type:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
857
            var subtype = (options && options.hasOwnProperty('subtype'))?options.subtype:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
858
            var domain = (options && options.hasOwnProperty('domain'))?options.domain:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
859
            this.initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
Tomas Pettersson's avatar
Tomas Pettersson committed
860
            this.showstateofoil = (options && options.hasOwnProperty('stateofoil'))?options.stateofoil:true;
Tomas Pettersson's avatar
Tomas Pettersson committed
861

Tomas Pettersson's avatar
Tomas Pettersson committed
862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888
            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);
Tomas Pettersson's avatar
Tomas Pettersson committed
889
            super.addLabelDiv(contentoilClass, "Select oil class", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-oilclass' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
890 891 892 893 894 895 896 897 898 899 900
            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);
Tomas Pettersson's avatar
Tomas Pettersson committed
901
            super.addLabelDiv(contentspecificOil, "Select specific oil", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-specificoil' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947
            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);
Tomas Pettersson's avatar
Tomas Pettersson committed
948
            if (!this.showstateofoil) oilstateRowDiv.style.display = 'none';            
Tomas Pettersson's avatar
Tomas Pettersson committed
949
            super.addLabelDiv(oilstateRowDiv, "State of oil", "See more information <a style='color:#faa732;' href='help/classic/?domain="+domain.toLowerCase()+"#"+type+"-"+subtype+"-oilstate' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967
            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);
Tomas Pettersson's avatar
Tomas Pettersson committed
968
            self.nextButton.id = 'guide'+this.initials+'oiltype';
Tomas Pettersson's avatar
Tomas Pettersson committed
969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095
            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;
                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());
        }
    }
Tomas Pettersson's avatar
Tomas Pettersson committed
1096
    
Tomas Pettersson's avatar
Tomas Pettersson committed
1097
   export class CardControl extends L.Control {
Tomas Pettersson's avatar
Tomas Pettersson committed
1098
    
Tomas Pettersson's avatar
Tomas Pettersson committed
1099
        private id: any;
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1100 1101 1102 1103
        private container: HTMLElement;        
        private startDiv: HTMLDivElement;
        private accordionDiv: HTMLDivElement;
        private accordion: any;
Tomas Pettersson's avatar
Tomas Pettersson committed
1104 1105 1106 1107
        private lang: string;
        private langData: any;
        private domain: string;
        private cardMap: any;
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1108 1109 1110 1111 1112 1113 1114
        private forcing: any;
        private forcingmodel: string;
        private map: L.Map;
        private compname: string;
        private selectCalculationMode: HTMLSelectElement;
        private uncertaintyInput: HTMLInputElement;                
        private startButton: HTMLButtonElement;
Tomas Pettersson's avatar
Tomas Pettersson committed
1115
        private type: string;
Tomas Pettersson's avatar
Tomas Pettersson committed
1116
        private subtype: any;
Tomas Pettersson's avatar
Tomas Pettersson committed
1117 1118
        private name: string;
        private initials: string;
1119
        private showuncertainty: boolean;
Tomas Pettersson's avatar
Tomas Pettersson committed
1120
        private showcalculationmode: boolean;
Tomas Pettersson's avatar
Tomas Pettersson committed
1121 1122 1123 1124 1125 1126 1127
        
        constructor(options) {
            super(options);
            this.domain = "HELCOM";
            if (options.domain) {
                this.domain = options.domain;
            }
1128 1129 1130 1131
            this.forcingmodel = "NEMO";
            if (options.forcingmodel) {
                this.forcingmodel = options.forcingmodel;
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
1132 1133 1134
            this.lang = "en";
            if (options.lang) {
                this.lang = options.lang;
Tomas Pettersson's avatar
Tomas Pettersson committed
1135
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
1136 1137
            if (options.langdata) {
                this.langData = options.langdata;
Tomas Pettersson's avatar
Tomas Pettersson committed
1138 1139
            }