Skip to content

GitLab

Commit 823fa5b5 authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

test

parent 57dc470f
Expand all Hide whitespace changes
Inline Side-by-side
src/components/cards.js
View file @ 823fa5b5
......@@ -84,12 +84,13 @@ var STWkit;
};
return AccordionCard;
}());
STWkit.AccordionCard = AccordionCard;
var LocationCard = (function (_super) {
__extends(LocationCard, _super);
function LocationCard(id, parentDiv, lang, langData, map, forcing, obs) {
function LocationCard(id, title, parentDiv, lang, langData, map, forcing) {
var _this = this;
var locationDiv = STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
_this = _super.call(this, id, 'Specify time and location', parentDiv, locationDiv) || this;
_this = _super.call(this, id, title, parentDiv, locationDiv) || this;
var self = _this;
if (forcing)
self.forcingBoundary = new Forcing.Boundary(locationDiv, map, forcing);
......@@ -123,66 +124,12 @@ var STWkit;
var legendText = L.DomUtil.create('div', 'legend-text', rowDiv);
legendText.textContent = text;
}
if (obs && obs.sat) {
self.satObs = new Observation.Sat(map, satCallbackFn, 'observation/oo');
var satDetectionDiv = L.DomUtil.create('div', '', locationDiv);
var satDetectionList = L.DomUtil.create('dl', 'uk-description-list-line', satDetectionDiv);
var satDetectionItem = L.DomUtil.create('dt', '', satDetectionList);
var satDetectionHeading = L.DomUtil.create('h5', 'uk-width-1-1 chevron-title', satDetectionItem);
satDetectionHeading.textContent = "Satellite oil detections";
self.satDetectionChevronIcon = L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
self.satDetectionContent = L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
self.satDetectionContent.style.display = 'none';
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-down');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-up');
self.satDetectionContent.style.display = "";
self.satObs.show();
}
else {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
};
var satDetectionform = L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
satDetectionform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
var satDetectionfieldset = L.DomUtil.create('fieldset', '', satDetectionform);
var satDetectionRowDiv = L.DomUtil.create('div', 'uk-form-row uk-margin-top', satDetectionfieldset);
_super.prototype.addLabelDiv.call(_this, satDetectionRowDiv, "Detection frequency", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-satdetection' target='_blank'>here</a>");
legendBox(satDetectionfieldset, 'rgb(255, 0, 0)', 'Past day', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 153, 0)', 'Past week', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 0)', 'Two weeks', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 204)', 'Older', '10px');
}
var obsform = L.DomUtil.create('form', 'uk-form uk-form-stacked', locationDiv);
obsform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
self.datetimeFormat = 'YYYY-MM-DD HH:mm';
self.datetimeTFormat = 'YYYY-MM-DDTHH:mm:ss.000';
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
var obsdateLabelGrid = L.DomUtil.create('div', 'uk-grid', obsform);
var obsfieldset = L.DomUtil.create('fieldset', '', obsform);
var obsdateRowDiv = L.DomUtil.create('div', 'uk-form-row', obsfieldset);
_super.prototype.addLabelDiv.call(_this, obsdateRowDiv, "Observation time (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-time' target='_blank'>here</a>");
var obsdateDiv = L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', obsdateRowDiv);
obsdateDiv.id = 'guideoo1';
var obsdateIcon = L.DomUtil.create('span', 'uk-icon-calendar', obsdateDiv);
self.obsDateInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsDateInput.type = 'text';
self.obsDateInput.placeholder = self.dateFormat;
self.obsTimeInput = L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsTimeInput.type = 'text';
var typeLabelGrid = L.DomUtil.create('div', 'uk-grid uk-margin-top', obsform);
var objectlabelDiv = L.DomUtil.create('div', 'uk-width-1-2', typeLabelGrid);
_super.prototype.addLabelDiv.call(_this, objectlabelDiv, "Outlet type", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-type' target='_blank'>here</a>");
......
src/components/cards.js.map
View file @ 823fa5b5
This diff is collapsed.
src/components/cards.ts
View file @ 823fa5b5
......@@ -5,89 +5,89 @@
/// <reference path="../def/moment.d.ts" />
module STWkit {
class AccordionCard {
private content: any;
public status: boolean;
public title: HTMLDivElement;
public badgeSpan: HTMLSpanElement;
public titleIcon: HTMLSpanElement;
private changeListeners: Array<Object>;
public disabled: boolean;
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;
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 = [];
}
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 = [];
}
public addChangeFnListener(listener) {
this.changeListeners.push(listener);
}
public addChangeFnListener(listener) {
this.changeListeners.push(listener);
}
public fireChangeFn(changeCard) {
for (var i = 0; i < this.changeListeners.length; i++) {
var listener: any = this.changeListeners[i];
listener.changeFn(changeCard);
public fireChangeFn(changeCard) {
for (var i = 0; i < this.changeListeners.length; i++) {
var listener: any = this.changeListeners[i];
listener.changeFn(changeCard);
}
}
}
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);
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);
};
};
};
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 });
}
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 });
}
static enableNext(button: HTMLButtonElement, enable) {
var isEnabled = button.classList.contains('next-enabled');
if (enable && !isEnabled) {
button.classList.add('next-enabled');
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 });
}
if (!enable && isEnabled) {
button.classList.remove('next-enabled');
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 });
}
}
static isEnabled(button: HTMLButtonElement) {
return button.classList.contains('next-enabled');
}
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');
}
}
public clear() {
this.status = false;
}
static isEnabled(button: HTMLButtonElement) {
return button.classList.contains('next-enabled');
}
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 clear() {
this.status = false;
}
public visible() {
return (this.title.style.display == 'block')
}
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')
}
}
......@@ -112,9 +112,9 @@ module STWkit {
private satDetectionChevronIcon: HTMLSpanElement;
private forcingBoundary: any;
constructor(id, parentDiv, lang, langData, map, forcing, obs) {
constructor(id, title ,parentDiv, lang, langData, map, forcing) {
var locationDiv = <HTMLDivElement>STWkit.DomUtil.create('div', 'uk-width-1-1 uk-margin-top', parentDiv);
super(id, 'Specify time and location', parentDiv, locationDiv);
super(id, title, parentDiv, locationDiv);
var self = this;
if (forcing) self.forcingBoundary = new Forcing.Boundary(locationDiv, map, forcing);
......@@ -152,71 +152,12 @@ module STWkit {
legendText.textContent = text;
}
if (obs && obs.sat) {
self.satObs = new Observation.Sat(map, satCallbackFn, 'observation/oo');
var satDetectionDiv = <HTMLDivElement>L.DomUtil.create('div', '', locationDiv);
var satDetectionList = <HTMLDListElement>L.DomUtil.create('dl', 'uk-description-list-line', satDetectionDiv);
var satDetectionItem = <HTMLDListElement>L.DomUtil.create('dt', '', satDetectionList);
var satDetectionHeading = <HTMLHeadingElement>L.DomUtil.create('h5', 'uk-width-1-1 chevron-title', satDetectionItem);
satDetectionHeading.textContent = "Satellite oil detections";
self.satDetectionChevronIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-chevron-down chevron-icon', satDetectionHeading);
self.satDetectionContent = <HTMLDivElement>L.DomUtil.create('div', 'uk-animation-fade', satDetectionItem);
self.satDetectionContent.style.display = 'none';
satDetectionHeading.onclick = function (evt) {
if (self.satDetectionChevronIcon.classList.contains('uk-icon-chevron-down')) {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-down');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-up');
self.satDetectionContent.style.display = "";
self.satObs.show();
} else {
self.satDetectionChevronIcon.classList.remove('uk-icon-chevron-up');
self.satDetectionChevronIcon.classList.add('uk-icon-chevron-down');
self.satDetectionContent.style.display = 'none';
self.satObs.hide();
}
};
var satDetectionform = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', self.satDetectionContent);
satDetectionform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
var satDetectionfieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', satDetectionform);
var satDetectionRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row uk-margin-top', satDetectionfieldset);
super.addLabelDiv(satDetectionRowDiv, "Detection frequency", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-satdetection' target='_blank'>here</a>");
legendBox(satDetectionfieldset, 'rgb(255, 0, 0)', 'Past day', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 153, 0)', 'Past week', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 0)', 'Two weeks', '10px');
legendBox(satDetectionfieldset, 'rgb(255, 255, 204)', 'Older', '10px');
}
var obsform = <HTMLFormElement>L.DomUtil.create('form', 'uk-form uk-form-stacked', locationDiv);
obsform.onsubmit = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
self.datetimeFormat = 'YYYY-MM-DD HH:mm';
self.datetimeTFormat = 'YYYY-MM-DDTHH:mm:ss.000';
self.dateFormat = 'YYYY-MM-DD';
self.timeFormat = 'HH:mm';
var obsdateLabelGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid', obsform);
var obsfieldset = <HTMLFieldSetElement>L.DomUtil.create('fieldset', '', obsform);
var obsdateRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', obsfieldset);
super.addLabelDiv(obsdateRowDiv, "Observation time (UTC)", "See more information <a style='color:#faa732;' href='help/classic/#oil-oo-time' target='_blank'>here</a>");
var obsdateDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-controls uk-form-icon uk-width-1-1', obsdateRowDiv);
obsdateDiv.id = 'guideoo1';
var obsdateIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-calendar', obsdateDiv);
self.obsDateInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsDateInput.type = 'text';
self.obsDateInput.placeholder = self.dateFormat;
self.obsTimeInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-2', obsdateDiv);
self.obsTimeInput.type = 'text';
var typeLabelGrid = <HTMLDivElement>L.DomUtil.create('div', 'uk-grid uk-margin-top', obsform);
var objectlabelDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-width-1-2', typeLabelGrid);
......@@ -532,6 +473,8 @@ module STWkit {
}
this.cardMap = {};
}
private updateBadgeStatus() {
var self = this;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment