cards.ts 52.7 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
Tomas Pettersson committed
111 112
        public geometryType: string;
        private forcingBoundary: any;
Tomas Pettersson's avatar
Tomas Pettersson committed
113 114
        private locationDiv: HTMLDivElement;
        private locationForm: HTMLFormElement;
Tomas Pettersson's avatar
Tomas Pettersson committed
115
    
Tomas Pettersson's avatar
Tomas Pettersson committed
116 117
    
        constructor(id, title ,parentDiv, lang, langData, map, forcing, options) {
Tomas Pettersson's avatar
Tomas Pettersson committed
118
            var locationDiv = <HTMLDivElement>STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
119
            super(id, title, parentDiv, locationDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
120
            var self = this;
Tomas Pettersson's avatar
Tomas Pettersson committed
121 122
            self.locationDiv = locationDiv;
            if (forcing) self.forcingBoundary = new Forcing.Boundary(self.locationDiv, map, forcing);            
Tomas Pettersson's avatar
Tomas Pettersson committed
123 124 125 126 127 128 129 130 131 132
            
    
            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
133
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
134
    
Tomas Pettersson's avatar
Tomas Pettersson committed
135
            self.locationForm = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', self.locationDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
136
            self.locationForm.setAttribute('novalidate','');            
Tomas Pettersson's avatar
Tomas Pettersson committed
137
            self.locationForm.onsubmit = function (e) {
Tomas Pettersson's avatar
Tomas Pettersson committed
138 139 140 141
                e.preventDefault();
                e.stopPropagation();
                return false;
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
142 143 144 145
            this.locationForm.onkeypress = function(e) {
                var key = e.charCode || e.keyCode || 0;     
                if (key == 13) e.preventDefault();
            };            
Tomas Pettersson's avatar
Tomas Pettersson committed
146 147 148 149 150 151
            var initials = (options && options.hasOwnProperty('initials'))?options.initials:'';
            var showsingle = (options && options.hasOwnProperty('single'))?options.single:true;
            var showmultiple = (options && options.hasOwnProperty('multiple'))?options.multiple:false;
            var showpolygon = (options && options.hasOwnProperty('polygon'))?options.polygon:true;
            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
152
            var typeLabelGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-margin-top', self.locationForm);
Tomas Pettersson's avatar
Tomas Pettersson committed
153 154
            var objectlabelDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', typeLabelGrid);
            super.addLabelDiv(objectlabelDiv, "Outlet type", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-type' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
155 156
            var typeDiv = <HTMLDivElement>L.DomUtil.create('div', '', self.locationForm);
            typeDiv.id = 'guide'+initials+'1';
Tomas Pettersson's avatar
Tomas Pettersson committed
157 158 159 160 161 162
            typeDiv.setAttribute('data-uk-button-radio', '');
            var typeButtonGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-grid-small', typeDiv);
            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
163 164 165 166 167
            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
168 169 170
            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
171 172 173
            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
174
            if (!showline) self.lineButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
175
            self.polygonButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', objectButtonGroup);
Tomas Pettersson's avatar
Tomas Pettersson committed
176 177
            self.polygonButton.textContent = 'Polygon';
            if (!showpolygon) self.polygonButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
178 179
            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
180
            self.multipleButton.onclick = function () { self.geometryType = "multipoint"; self.control.setType(self.geometryType); }
Tomas Pettersson's avatar
Tomas Pettersson committed
181
            self.polygonButton.onclick = function () { self.geometryType = "polygon"; self.control.setType(self.geometryType); }
Tomas Pettersson's avatar
Tomas Pettersson committed
182
            self.circleButton.onclick = function () { self.geometryType = "circle"; self.control.setType(self.geometryType); }
Tomas Pettersson's avatar
Tomas Pettersson committed
183 184
            self.polygonButton.disabled = false;
    
185
            self.positions = [];
186

Tomas Pettersson's avatar
Tomas Pettersson committed
187
            var positionLabelGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-margin-top', self.locationForm);
Tomas Pettersson's avatar
Tomas Pettersson committed
188 189 190
    
            var positionlabelDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-1', positionLabelGrid);
            super.addLabelDiv(positionlabelDiv, "Position", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-position' target='_blank'>here</a>");
Tomas Pettersson's avatar
Tomas Pettersson committed
191 192
            var positionDiv: any = <HTMLDivElement>L.DomUtil.create('div', '', self.locationForm);
            positionDiv.id = 'guide'+initials+'2';
Tomas Pettersson's avatar
Tomas Pettersson committed
193 194 195 196 197 198 199 200 201 202
            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
203 204 205

            
            
Tomas Pettersson's avatar
Tomas Pettersson committed
206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
            positionDiv.guideFn = function () {
                var geojson = {};
                geojson["type"] = "FeatureCollection";
                geojson["features"] = [];
                var feature = {};
                feature['type'] = "Feature";
                feature['geometry'] = {};
                feature['geometry']['type'] = "Point";
                feature['geometry']['coordinates'] = [];
                feature['geometry']['coordinates'].push(19.0);
                feature['geometry']['coordinates'].push(56.0);
                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) {
239
                    self.positions = [];
Tomas Pettersson's avatar
Tomas Pettersson committed
240 241 242 243 244 245 246 247 248 249 250 251
                    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
252
                                coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat, 0]);
Tomas Pettersson's avatar
Tomas Pettersson committed
253
                                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
254 255 256
                            case 'circle':
                                coordinates.push([latlngs[0][0].lng, latlngs[0][0].lat, 0]);
                                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
257 258
                            case 'multipoint':
                                coordinates = geojson.features[0].geometry.coordinates;
Tomas Pettersson's avatar
Tomas Pettersson committed
259
                                for (var i = 0; i < coordinates.length; i++) {coordinates[i].push(0);}
Tomas Pettersson's avatar
Tomas Pettersson committed
260 261 262
                                break;
                            case 'linestring':
                                var center = L.polyline(latlngs).getBounds().getCenter()
Tomas Pettersson's avatar
Tomas Pettersson committed
263
                                coordinates.push([center.lng, center.lat, 0]);
Tomas Pettersson's avatar
Tomas Pettersson committed
264 265 266
                                break;
                            case 'polygon':
                                var center = L.polygon(latlngs).getBounds().getCenter();   
Tomas Pettersson's avatar
Tomas Pettersson committed
267
                                coordinates.push([center.lng, center.lat, 0]);
Tomas Pettersson's avatar
Tomas Pettersson committed
268 269 270 271 272
                                break;
                        
                            default:
                                break;
                        }
273 274 275 276
                        if (self.forcingBoundary) {
                            self.forcingBoundary.validate(coordinates);
                            self.forcingBoundary.addListener(self.control.layers);
                        }
Tomas Pettersson's avatar
Tomas Pettersson committed
277
                        self.control.showTable();
278 279
                        for (var i = 0; i < coordinates.length; i++) 
                            self.positions.push([coordinates[i][1], coordinates[i][0], self.forcingBoundary.depth(coordinates[i][1], coordinates[i][0])]);                            
280
                        self.validate();
Tomas Pettersson's avatar
Tomas Pettersson committed
281 282 283
                    }
                }
            });
Tomas Pettersson's avatar
Tomas Pettersson committed
284
            var content = self.control.onAdd(map);
Tomas Pettersson's avatar
Tomas Pettersson committed
285
            var coordinateDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-top uk-margin-bottom', self.locationForm);
Tomas Pettersson's avatar
Tomas Pettersson committed
286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301
            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
302 303 304
                    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
305 306
                        map.fire('draw:canceled');
                    };
Tomas Pettersson's avatar
Tomas Pettersson committed
307
                    finishButton.style.display = 'none';
Tomas Pettersson's avatar
Tomas Pettersson committed
308
                    // 3 is multipoint type in coordinates control
Tomas Pettersson's avatar
Tomas Pettersson committed
309
                    if (self.control.getType() == 3) finishButton.style.display = '';
Tomas Pettersson's avatar
Tomas Pettersson committed
310 311 312 313 314 315 316 317 318 319 320 321 322 323 324
                    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
325
                };
Tomas Pettersson's avatar
Tomas Pettersson committed
326 327
                self.exitControl.addTo(map);
    
Tomas Pettersson's avatar
Tomas Pettersson committed
328
            };
Tomas Pettersson's avatar
Tomas Pettersson committed
329
            // importButton.onclick = function(){self.control.import();};
Tomas Pettersson's avatar
Tomas Pettersson committed
330
            var clearDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-clearfix', self.locationDiv);
Tomas Pettersson's avatar
Tomas Pettersson committed
331 332 333 334 335 336 337
            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
338
            self.nextButton.id = 'guide'+initials+'3';
Tomas Pettersson's avatar
Tomas Pettersson committed
339 340 341
    
            self.nextButton.guideFn = function () {
                self.nextButton.click();
Tomas Pettersson's avatar
Tomas Pettersson committed
342
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
343 344 345 346 347 348 349 350 351 352 353 354
    
            AccordionCard.enableNext(self.nextButton, false);
    
            self.nextButton.onclick = function () {
                if (!AccordionCard.isEnabled(self.nextButton)) {
                    AccordionCard.warningMsg('Mandatory fields missing',
                        'Specify a location by <b>manually entering</b> position or <b>draw</b> on the map.');
                    return;
                }
                if (self.forcingBoundary) self.forcingBoundary.hide();
                (self.oncallback && self.oncallback(true));
            };
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
355
            UIkit.ready(function () {    
Tomas Pettersson's avatar
Tomas Pettersson committed
356 357 358
                self.defaults();
            });
    
Tomas Pettersson's avatar
Tomas Pettersson committed
359
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
360 361 362
    
        public show() {
            super.show();
Tomas Pettersson's avatar
Tomas Pettersson committed
363
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
364
    
365
        public validate() {
366
            if (this.positions.length == 0) return;
367 368 369 370 371
            this.status = true;
            AccordionCard.enableNext(this.nextButton, true);
            (this.oncallback && this.oncallback());
        };

Tomas Pettersson's avatar
Tomas Pettersson committed
372 373 374 375 376 377 378
        public hide() {
            super.hide();
        }
    
    
        public defaults() {
            var self = this;
Tomas Pettersson's avatar
Tomas Pettersson committed
379 380
            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();
Tomas Pettersson's avatar
Tomas Pettersson committed
381 382 383 384 385 386
        }
    
        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
387
            if (geojson.features[0].properties.hasOwnProperty('radius')) type = 'circle';
Tomas Pettersson's avatar
Tomas Pettersson committed
388 389 390 391
            switch (type) {
                case "point":
                self.pointButton.click();
                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
392 393 394
                case "circle":
                self.circleButton.click();
                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
395 396 397
                case "multipoint":
                self.multipleButton.click();
                break;
Tomas Pettersson's avatar
Tomas Pettersson committed
398 399 400 401 402 403 404 405 406 407 408
                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
409
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
410 411 412 413 414 415 416 417 418 419 420
    
        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
421
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
422 423 424 425
    
        public clear() {
            var self = this;
            super.clear();
426 427 428 429
            if (self.forcingBoundary) {
                self.forcingBoundary.hide();
                self.forcingBoundary.removeListener(self.control.layers);
            }        
Tomas Pettersson's avatar
Tomas Pettersson committed
430 431 432 433 434 435 436
            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
437
    }
Tomas Pettersson's avatar
Tomas Pettersson committed
438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 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 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 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 717 718 719 720 721 722 723 724 725

    export class PeriodCard extends AccordionCard {
        public oncallback: Function;
        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;

        
        constructor(id, title, parentDiv, lang, map, domain, forcingmodel) {
            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;
            var form = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', periodDiv);
            form.onsubmit = function (e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            };
            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);
            super.addLabelDiv(availableRowDiv, "Selected period (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-period' target='_blank'>here</a>");
            var availableDiv = <HTMLDivElement>L.DomUtil.create('div', '', availableRowDiv);
            var startRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
            super.addLabelDiv(startRowDiv, "Start date (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-start' target='_blank'>here</a>");
            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);
            super.addLabelDiv(durationRowDiv, "Duration", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-duration' target='_blank'>here</a>");
            var durationDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', durationRowDiv);
            durationDiv.id = 'guideos4';
            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";
            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';
            self.nextButton.id = 'guideos5';
            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() + '';
                    }
                }
                self.updateSlider();
            };
    
            self.startDateInput.onchange = function (evt) {
                self.adjustDateToRange();
                self.updateSlider();
            };
    
            self.startTimeInput.onchange = function (evt) {
                self.adjustDateToRange();
                self.updateSlider();
            };
            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);
                            self.ready = true;
                        }
                    });
    
                    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, {});
                    self.defaults();
                }
            });
        }
    
        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;
            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");
            self.slider.update(sliderOpt);
            self.validate();
        }
    
    
        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';
            self.forward = true;
            self.adjustDateToRange();
            self.updateSlider();
        }
    
        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() + '';
            } else {
                self.from = stopDate;
                self.to = startDate;
                self.durationHours.value = moment.duration(self.to.diff(self.from)).asHours() + '';
            }
        }
    
        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();
            }
        }
    
        public clear() {
            var self = this;
            super.clear();
            var initDate = moment.utc();
            if (initDate.isBefore(self.minDate) || initDate.isAfter(self.maxDate)) initDate = self.minDate;
            self.startDateInput.value = initDate.format(self.dateFormat);
            self.startTimeInput.value = initDate.startOf('hour').format(self.timeFormat);
            self.forward = true;
            self.durationHours.value = '0';
            self.from = initDate.clone();
            self.to = initDate.clone().add(self.durationHours.value, 'hours');
            if (self.slider) {
                var sliderOpt = {};
                sliderOpt['from'] = self.from.format("X");
                sliderOpt['to'] = self.to.format("X");
                self.slider.update(sliderOpt);
            }
            AccordionCard.enableNext(self.nextButton, false);
            (self.oncallback && self.oncallback());
        }
    }
    



Tomas Pettersson's avatar
Tomas Pettersson committed
726
    
Tomas Pettersson's avatar
Tomas Pettersson committed
727
   export class CardControl extends L.Control {
Tomas Pettersson's avatar
Tomas Pettersson committed
728
    
Tomas Pettersson's avatar
Tomas Pettersson committed
729
        private id: any;
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
730 731 732 733
        private container: HTMLElement;        
        private startDiv: HTMLDivElement;
        private accordionDiv: HTMLDivElement;
        private accordion: any;
Tomas Pettersson's avatar
Tomas Pettersson committed
734 735 736 737
        private lang: string;
        private langData: any;
        private domain: string;
        private cardMap: any;
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
738 739 740 741 742 743 744
        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
745 746 747 748
        private type: string;
        private subtype: string;
        private name: string;
        private initials: string;
Tomas Pettersson's avatar
Tomas Pettersson committed
749 750 751 752 753 754 755 756 757 758
        
        constructor(options) {
            super(options);
            this.domain = "HELCOM";
            if (options.domain) {
                this.domain = options.domain;
            }
            this.lang = "en";
            if (options.lang) {
                this.lang = options.lang;
Tomas Pettersson's avatar
Tomas Pettersson committed
759
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
760 761
            if (options.langdata) {
                this.langData = options.langdata;
Tomas Pettersson's avatar
Tomas Pettersson committed
762 763
            }             

Tomas Pettersson's avatar
test  
Tomas Pettersson committed
764 765 766 767 768 769
            this.forcingmodel = "NEMO";
            if (options.forcing) {
              this.forcing = options.forcing;
              if ((this.forcing.features.length > 0) && (this.forcing.features[0].properties))
                this.forcingmodel = this.forcing.features[0].properties.model;
            }             
Tomas Pettersson's avatar
Tomas Pettersson committed
770
            this.cardMap = {};               
Tomas Pettersson's avatar
Tomas Pettersson committed
771
        }
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
772 773

        
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
774 775 776 777 778 779 780
        public onAdd(map) {
            var self = this;

            if (this.langData) {
                self.setup(map);
            } else {
                reqwest({
Tomas Pettersson's avatar
Tomas Pettersson committed
781
                    url: "lang/"+self.name+"." + self.lang + ".json",
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874
                    method: 'get',
                    type: 'json',
                    success: function (lang) {
                        self.setup(map);
                    }
                });
            }

            L.DomEvent.disableClickPropagation(this.container);
            L.DomEvent.on(this.container, 'mousewheel', L.DomEvent.stopPropagation);

            window.addEventListener('card:populateData', function (e: any) {
                var showevt = document.createEvent("CustomEvent");
                showevt.initCustomEvent('container:showComponent', false, false, {
                    'name': self.compname,
                    'show': true
                });
                window.dispatchEvent(showevt);
                (e.detail && e.detail.geojson && self.open(e.detail.geojson));
            });

            return this.container;
        }

        private setup(map) {
            var self = this;
            this.map = map;

            function addLabelDiv(parentDiv, labelTxt, labelInfo){
                var self = this;
                var label = <HTMLLabelElement>L.DomUtil.create('label', 'uk-form-label form-label', parentDiv);
                label.textContent = labelTxt;        
                var addPositionInfo = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-hover uk-icon-info-circle', parentDiv);
                addPositionInfo.onclick = function() {
                    UIkit.notify("<span class='uk-icon-small uk-icon-info-circle'></span> <b>" + labelTxt + "</b><p>" + labelInfo, { status: 'info', timeout: 10000 });
                };
            };   
            function addOption(parent, value, txt ) {
                var option = <HTMLOptionElement>L.DomUtil.create('option', '', parent);
                option.value = value;
                option.textContent = txt;
            }            
            self.startDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-medium-1-1 uk-container-center uk-margin-top', this.container);
            var startform = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', self.startDiv);
            startform.onsubmit = function(e){
                e.preventDefault();
                e.stopPropagation();
                return false;
            };
            var fieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', startform);
            var calculationRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);           
            addLabelDiv(calculationRowDiv, "Calculation mode", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-calculationmode' target='_blank'>here</a>");
            var calculationMode = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-select', calculationRowDiv);
            calculationMode.setAttribute('data-uk-form-select','');
            var selectedMode = <HTMLSpanElement>L.DomUtil.create('span', '', calculationMode);
            self.selectCalculationMode = <HTMLSelectElement>L.DomUtil.create('select', '', calculationMode);
            addOption(self.selectCalculationMode,'Fast', 'Fast / less detailed');
            addOption(self.selectCalculationMode,'Normal', 'Normal');
            addOption(self.selectCalculationMode,'Detailed', 'Detailed / slower');
            self.selectCalculationMode.selectedIndex = 1;
            var uncertaintyRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);           
            addLabelDiv(uncertaintyRowDiv, "Uncertainty", "See more information <a style='color:#faa732;' href='help/classic/#object-fo-uncertainty' target='_blank'>here</a>");
            var uncertaintyLabel = <HTMLLabelElement>L.DomUtil.create('label', '', uncertaintyRowDiv);    
            uncertaintyLabel.style.display = 'block';
            self.uncertaintyInput = <HTMLInputElement>L.DomUtil.create('input', '', uncertaintyLabel);
            self.uncertaintyInput.type = 'checkbox';
            uncertaintyLabel.appendChild(document.createTextNode(' Extra uncertainty in weather forecast is added to simulation'));

            var hr = <HTMLDivElement>L.DomUtil.create('hr', 'uk-margin-top', self.startDiv);
            self.startButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-success uk-margin-top uk-align-center', self.startDiv);
            self.startButton.textContent = 'Start model';
            self.startDiv.style.display = 'none';

            self.startButton.onclick = () => {
                self.startButton.disabled = true;
                var geojson = {};
                geojson["type"] = "FeatureCollection";
                geojson["features"] = [];

                for (var i in self.cardMap) {
                    if (self.cardMap.hasOwnProperty(i)) {
                        var card = self.cardMap[i];
                        card.populateData(geojson);
                    }
                }
                if (self.id) geojson["features"][0]["properties"]["uuid"] = self.id;
                geojson["features"][0]["properties"]["domain"] = self.domain;
                geojson["features"][0]["properties"]["model"] = self.forcingmodel;
                geojson["features"][0]["properties"]["simulation"]["uncertainty"] = false;
                if (self.uncertaintyInput.checked) geojson["features"][0]["properties"]["simulation"]["uncertainty"] = true;
                geojson["features"][0]["properties"]["simulation"]["mode"] = self.selectCalculationMode.value;

                reqwest({
Tomas Pettersson's avatar
Tomas Pettersson committed
875
                    url: 'start'+self.initials,
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903
                    type: 'json',
                    method: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(geojson),
                    error: function (err) {
                        self.startButton.disabled = false;
                        AccordionCard.warningMsg("Login", "You need to login to use this function.");
                    },
                    success: function (location) {
                        var param = STWkit.getURLParams();
                        param.push(['id', location.id]);
                        STWkit.updateUrl(param);
                        self.clear();
                        var showevt = document.createEvent("CustomEvent");
                        showevt.initCustomEvent('container:showComponent', false, false, {
                            'name': self.compname,
                            'show': false
                        });
                        window.dispatchEvent(showevt);
                        var simevt = document.createEvent("CustomEvent");
                        simevt.initCustomEvent('model:newSimulation', false, false, location.id);
                        window.dispatchEvent(simevt);
                        self.startButton.disabled = false;
                    }
                });
            };

            UIkit.ready(() => {
Tomas Pettersson's avatar
Tomas Pettersson committed
904 905 906 907 908 909 910 911
                if (!self.accordion) {
                    self.accordion = UIkit.accordion(<any>self.accordionDiv, { collapse: true, showfirst: true });
                    // self.openCard(periodid, open);
                    self.updateBadgeStatus();
    
                    self.accordion.on('toggle.uk.accordion', (e, open, c) => {
                        var id = c[0].id;
                        self.openCard(id, open);
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
912
                    });
Tomas Pettersson's avatar
Tomas Pettersson committed
913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931
                    var param = STWkit.getURLParams();
                    var load = STWkit.getParamValue(self.initials+'load', param);
                    if (load !== null) {
                        reqwest({
                            url: "input/" + load,
                            method: 'get',
                            type: 'json',
                            success: function (inputjson) {
                                var cardevt = document.createEvent("CustomEvent");
                                cardevt.initCustomEvent('card:populateData', false, false, {
                                    'geojson': inputjson
                                });
                                window.dispatchEvent(cardevt);
                                STWkit.deleteParam(self.initials+'load', param);
                                STWkit.updateUrl(param);
                            }
                        });
                    }                
                }
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
932 933 934 935 936 937 938 939 940
            });


            
        }


        public open(geojson) {
            var self = this;
Tomas Pettersson's avatar
Tomas Pettersson committed
941
            if (geojson.features[0].properties.type == self.type && geojson.features[0].properties.subtype == self.subtype) {
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964
                self.clear();
                for (var i in self.cardMap) {
                    if (self.cardMap.hasOwnProperty(i)) {
                        var card = self.cardMap[i];
                        card.populateCard(geojson);
                        card.show();
                    }
                }
                var evt = document.createEvent('Event');
                evt.initEvent("change", true, true);
                var simulation = geojson.features[0].properties.simulation;
                self.selectCalculationMode.value = simulation.mode;
                self.selectCalculationMode.dispatchEvent(evt);        
                self.uncertaintyInput.checked = simulation.uncertainty;
                self.id = geojson.features[0].properties.uuid;
                
            }
        }

        public ready(name) {
            var self = this;
            self.compname = name;
            var p = STWkit.getURLParams();
Tomas Pettersson's avatar
Tomas Pettersson committed
965
            var pindex = STWkit.getParamIndex(self.initials, 1, p);
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
966 967 968 969 970 971 972 973 974 975 976 977 978 979
            if (pindex >= 0) {
                p[pindex][1] = 0;
                if (history.pushState) {
                    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + STWkit.getSearchUrl(p);
                    window.history.pushState({ path: newurl }, '', newurl);
                    var showevt = document.createEvent("CustomEvent");
                    showevt.initCustomEvent('container:showComponent', false, false, {
                        'name': self.compname,
                        'show': true
                    });
                    window.dispatchEvent(showevt);
                }

            }
Tomas Pettersson's avatar
Tomas Pettersson committed
980
            var gindex = STWkit.getParamIndex('guide', self.initials, p);
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
981 982
            if (gindex >= 0) {
                reqwest({
Tomas Pettersson's avatar
Tomas Pettersson committed
983
                    url: 'guide/'+self.initials,
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
984 985 986 987 988 989 990 991 992 993 994 995
                    method: 'get',
                    type: 'json',
                    success: function (guide) {
                        var intro = introJs();
                        intro.setOptions(guide);
                        var prevElement = null;
                        intro.onbeforechange(function (targetElement) {
                            (prevElement && prevElement.guideFn && prevElement.guideFn())
                            prevElement = targetElement;
                        });
                        intro.oncomplete(function() {
                            var param = STWkit.getURLParams();
Tomas Pettersson's avatar
Tomas Pettersson committed
996
                            if (STWkit.hasParam('guide', self.initials, param)) STWkit.replaceParam('guide', 'player', param);
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
997 998 999 1000 1001
                            STWkit.updateUrl(param);
                            self.startButton.click();
                        });        
                        intro.onexit(function () {
                            var param = STWkit.getURLParams();
Tomas Pettersson's avatar
Tomas Pettersson committed
1002
                            if (STWkit.hasParam('guide', self.initials, param)) STWkit.deleteParam('guide', param);
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1003 1004 1005 1006 1007 1008 1009 1010
                            STWkit.updateUrl(param); 
                        });                                         
                        intro.start();
                    }
                });
            }
        }

Tomas Pettersson's avatar
Tomas Pettersson committed
1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024
    
        private updateBadgeStatus() {
            var self = this;
            var min = 0, count = 0;
            for (var i in self.cardMap) {
                if (self.cardMap.hasOwnProperty(i)) {
                    count++;
                    var classList = self.cardMap[i].badgeSpan.classList;
                    if (classList.contains('uk-icon-check')) classList.remove('uk-icon-check');
                    if (classList.contains('uk-icon-square-o')) classList.remove('uk-icon-square-o');
                    if (classList.contains('badge-neutral')) classList.remove('badge-neutral');
                    if (classList.contains('uk-badge-warning')) classList.remove('uk-badge-warning');
                    if (classList.contains('uk-badge-success')) classList.remove('uk-badge-success');
                    if (min == 0 && !self.cardMap[i].status) min = count;
Tomas Pettersson's avatar
Tomas Pettersson committed
1025
                }
Tomas Pettersson's avatar
Tomas Pettersson committed
1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043
            }
            count = 0;
            for (var i in self.cardMap) {
                if (self.cardMap.hasOwnProperty(i)) {
                    count++;
                    var classList = self.cardMap[i].badgeSpan.classList;
                    if (count == min) {
                        classList.add('uk-icon-square-o');
                        classList.add('uk-badge-warning');
    
                    }
                    else if (self.cardMap[i].status) {
                        classList.add('uk-icon-check');
                        classList.add('uk-badge-success');
                    } else {
                        classList.add('uk-icon-square-o');
                        classList.add('badge-neutral');
                    }
Tomas Pettersson's avatar
Tomas Pettersson committed
1044 1045 1046
                }
            }
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063


        private clear() {
            var self = this;
            self.id = undefined;
            var c = 1;
            for (var i in self.cardMap) {
                if (self.cardMap.hasOwnProperty(i)) {
                    var card = self.cardMap[i];
                    card.clear();
                    card.defaults();
                    if (c > 1) card.hide();
                    c++;
                }
            }

        }        
Tomas Pettersson's avatar
Tomas Pettersson committed
1064 1065 1066 1067 1068 1069 1070 1071 1072
    
        private openCard(id, open) {
            var self = this;
            for (var i in self.cardMap) {
                if (self.cardMap.hasOwnProperty(i)) {
                    if (self.cardMap[i].titleIcon.classList.contains('uk-icon-chevron-up')) {
                        self.cardMap[i].titleIcon.classList.remove('uk-icon-chevron-up');
                        self.cardMap[i].titleIcon.classList.add('uk-icon-chevron-down');
                    }
Tomas Pettersson's avatar
Tomas Pettersson committed
1073 1074
                }
            }
Tomas Pettersson's avatar
Tomas Pettersson committed
1075 1076 1077 1078 1079
            if (open) {
                if (self.cardMap[id].titleIcon.classList.contains('uk-icon-chevron-down')) {
                    self.cardMap[id].titleIcon.classList.remove('uk-icon-chevron-down');
                    self.cardMap[id].titleIcon.classList.add('uk-icon-chevron-up');
                }
Tomas Pettersson's avatar
Tomas Pettersson committed
1080 1081
            }
        }
Tomas Pettersson's avatar
Tomas Pettersson committed
1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101

        private getNextCardId(chain, id) {
            var self = this;
            var nextId = '';
            for (var i in self.cardMap) {
                if (self.cardMap.hasOwnProperty(i)) {
                    var card = self.cardMap[i];
                    if ((!card.status) && (card.visible())) {
                        nextId = i;
                        break;
                    }
                }
            }
            if (nextId == '') {
                nextId = chain[id];
                if (nextId !== '' && self.cardMap[nextId].disabled) nextId = self.getNextCardId(chain, nextId);                                       
            }
            return nextId;
        };
        
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1102
        private showNext(chain, id) {
Tomas Pettersson's avatar
Tomas Pettersson committed
1103 1104 1105 1106 1107 1108 1109
            var self = this;
            if (self.cardMap[id].status) {
                var nextId = self.getNextCardId(chain, id);
                if (nextId !== '') {
                    self.cardMap[id].nextId = nextId;
                    self.cardMap[nextId].show();
                } else {
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1110
                    self.startDiv.style.display = 'block';
Tomas Pettersson's avatar
Tomas Pettersson committed
1111 1112 1113 1114 1115
                    delete self.cardMap[id].nextId;
                }
            }
        };
        
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1116
        public callback(chain, id, gonext) {    
Tomas Pettersson's avatar
Tomas Pettersson committed
1117 1118 1119 1120
            var self = this;
            if (self.cardMap[id].status) {
                self.updateBadgeStatus();
                if (gonext) {
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1121 1122
                    self.showNext(chain, id);
                    self.accordion.toggleItem($("#" + id).data('wrapper'), true, true);
Tomas Pettersson's avatar
fixes  
Tomas Pettersson committed
1123
                    (self.cardMap[id].nextId && $("#" + self.cardMap[id].nextId).data('wrapper') && self.accordion.toggleItem($("#" + self.cardMap[id].nextId).data('wrapper'), true, true))
Tomas Pettersson's avatar
Tomas Pettersson committed
1124 1125 1126
                }
            } else {
                self.updateBadgeStatus();
Tomas Pettersson's avatar
test  
Tomas Pettersson committed
1127
                self.startDiv.style.display = 'none'
Tomas Pettersson's avatar
Tomas Pettersson committed
1128 1129
            }
        };
Tomas Pettersson's avatar
Tomas Pettersson committed
1130 1131
    }

Tomas Pettersson's avatar
Tomas Pettersson committed
1132
}
Tomas Pettersson's avatar
Tomas Pettersson committed
1133