Skip to content

GitLab

L
leaflet-itracer-control
Commit c563c1ee authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files
Options

surface and volume add

parent 9f33f7ed
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 56 deletions
src/leaflet-itracer-cards.js
View file @ c563c1ee
......@@ -19,11 +19,11 @@ var ITLocation = (function (_super) {
var _this = this;
var options = {};
var initials = 'it';
options['singlebutton'] = true;
options['multiplebutton'] = false;
options['linebutton'] = false;
options['areabutton'] = true;
options['afterDiv'] = true;
options['single'] = false;
options['multiple'] = false;
options['line'] = false;
options['circle'] = true;
options['polygon'] = true;
options['initials'] = initials;
_this = _super.call(this, id, 'Specify location', parentDiv, lang, langData, map, forcing, options) || this;
var fieldset = L.DomUtil.create('fieldset', 'uk-margin-top', _this.locationForm);
......@@ -43,29 +43,54 @@ var ITLocation = (function (_super) {
_this.surfaceButton.textContent = 'Surface';
_this.volumeButton = L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
_this.volumeButton.textContent = 'Volume';
var depthRangeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthRangeRowDiv, "Outlet depth range [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
var depthRangeDiv = L.DomUtil.create('div', ' uk-width-1-1', depthRangeRowDiv);
_this.depthMinInput = L.DomUtil.create('input', 'uk-width-1-4', depthRangeDiv);
_this.depthMinInput.type = 'number';
_this.depthMinInput.value = '0';
_this.depthMinInput.step = '10';
_this.depthMinInput.min = '0';
_this.depthMinInput.onchange = function () {
//validate();
};
var separator = L.DomUtil.create('span', '', depthRangeDiv);
var depthSurfaceRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
var depthSurfaceDiv = L.DomUtil.create('div', ' uk-width-1-1', depthSurfaceRowDiv);
_this.depthSurfaceInput = L.DomUtil.create('input', 'uk-width-1-4', depthSurfaceDiv);
_this.depthSurfaceInput.type = 'number';
_this.depthSurfaceInput.value = '0';
_this.depthSurfaceInput.step = '10';
_this.depthSurfaceInput.min = '0';
var depthVolumeRowDiv = L.DomUtil.create('div', 'uk-form-row', fieldset);
_super.prototype.addLabelDiv.call(_this, depthVolumeRowDiv, "Outlet depth range [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#" + initials + "-depth' target='_blank'>here</a>");
var depthVolumeDiv = L.DomUtil.create('div', ' uk-width-1-1', depthVolumeRowDiv);
_this.depthVolumeMinInput = L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
_this.depthVolumeMinInput.type = 'number';
_this.depthVolumeMinInput.value = '0';
_this.depthVolumeMinInput.step = '10';
_this.depthVolumeMinInput.min = '0';
var separator = L.DomUtil.create('span', '', depthVolumeDiv);
separator.textContent = ' - ';
_this.depthMaxInput = L.DomUtil.create('input', 'uk-width-1-4', depthRangeDiv);
_this.depthMaxInput.type = 'number';
_this.depthMaxInput.value = '0';
_this.depthMaxInput.step = '10';
_this.depthMaxInput.min = '0';
_this.depthMaxInput.onchange = function () {
//validate();
_this.depthVolumeMaxInput = L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
_this.depthVolumeMaxInput.type = 'number';
_this.depthVolumeMaxInput.value = '0';
_this.depthVolumeMaxInput.step = '10';
_this.depthVolumeMaxInput.min = '0';
_this.depthVolumeMinInput.onchange = function () { if (parseFloat(_this.depthVolumeMinInput.value) < 0)
_this.depthVolumeMinInput.value = '0'; };
_this.depthVolumeMaxInput.onchange = function () { if (parseFloat(_this.depthVolumeMaxInput.value) < 0)
_this.depthVolumeMaxInput.value = '0'; };
_this.depthSurfaceInput.onchange = function () { if (parseFloat(_this.depthSurfaceInput.value) < 0)
_this.depthSurfaceInput.value = '0'; };
_this.surfaceButton.onclick = function () {
depthSurfaceRowDiv.style.display = '';
depthVolumeRowDiv.style.display = 'none';
};
_this.volumeButton.onclick = function () {
depthVolumeRowDiv.style.display = '';
depthSurfaceRowDiv.style.display = 'none';
};
UIkit.ready(function () {
_super.prototype.defaults.call(_this);
_this.defaults();
});
return _this;
}
ITLocation.prototype.defaults = function () {
var self = this;
if (document.body.contains(self.surfaceButton) && self.surfaceButton.style.display != 'none')
self.surfaceButton.click();
};
ITLocation.prototype.show = function () {
_super.prototype.show.call(this);
};
......@@ -80,6 +105,9 @@ var ITLocation = (function (_super) {
};
ITLocation.prototype.clear = function () {
_super.prototype.clear.call(this);
this.depthSurfaceInput.value = '0';
this.depthVolumeMaxInput.value = '0';
this.depthVolumeMinInput.value = '0';
};
return ITLocation;
}(STWkit.LocationCard));
......
src/leaflet-itracer-cards.js.map
View file @ c563c1ee
This diff is collapsed.
src/leaflet-itracer-cards.ts
View file @ c563c1ee
......@@ -9,8 +9,9 @@ class ITLocation extends STWkit.LocationCard {
private locationDiv: HTMLDivElement;
private locationForm: HTMLFormElement;
public depthMinInput: HTMLInputElement;
public depthMaxInput: HTMLInputElement;
public depthSurfaceInput: HTMLInputElement;
public depthVolumeMinInput: HTMLInputElement;
public depthVolumeMaxInput: HTMLInputElement;
public surfaceButton: HTMLButtonElement;
public volumeButton: HTMLButtonElement;
......@@ -18,11 +19,11 @@ class ITLocation extends STWkit.LocationCard {
constructor(id, parentDiv, lang, langData, map, forcing) {
var options:any = {};
var initials = 'it';
options['singlebutton'] = true;
options['multiplebutton'] = false;
options['linebutton'] = false;
options['areabutton'] = true;
options['afterDiv'] = true;
options['single'] = false;
options['multiple'] = false;
options['line'] = false;
options['circle'] = true;
options['polygon'] = true;
options['initials'] = initials;
super(id, 'Specify location', parentDiv, lang, langData, map, forcing, options);
......@@ -46,37 +47,61 @@ class ITLocation extends STWkit.LocationCard {
this.volumeButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small', surfacevolumeButtonGroup);
this.volumeButton.textContent = 'Volume';
var depthRangeRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(depthRangeRowDiv, "Outlet depth range [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#"+initials+"-depth' target='_blank'>here</a>");
var depthRangeDiv = <HTMLDivElement>L.DomUtil.create('div', ' uk-width-1-1', depthRangeRowDiv);
this.depthMinInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', depthRangeDiv);
this.depthMinInput.type = 'number';
this.depthMinInput.value = '0';
this.depthMinInput.step = '10';
this.depthMinInput.min = '0';
this.depthMinInput.onchange = function () {
//validate();
};
var separator = <HTMLSpanElement>L.DomUtil.create('span', '', depthRangeDiv);
var depthSurfaceRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(depthSurfaceRowDiv, "Outlet depth (m)", "See more information <a style='color:#faa732;' href='help/classic/#"+initials+"-depth' target='_blank'>here</a>");
var depthSurfaceDiv = <HTMLDivElement>L.DomUtil.create('div', ' uk-width-1-1', depthSurfaceRowDiv);
this.depthSurfaceInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', depthSurfaceDiv);
this.depthSurfaceInput.type = 'number';
this.depthSurfaceInput.value = '0';
this.depthSurfaceInput.step = '10';
this.depthSurfaceInput.min = '0';
var depthVolumeRowDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-form-row', fieldset);
super.addLabelDiv(depthVolumeRowDiv, "Outlet depth range [from - to] (m)", "See more information <a style='color:#faa732;' href='help/classic/#"+initials+"-depth' target='_blank'>here</a>");
var depthVolumeDiv = <HTMLDivElement>L.DomUtil.create('div', ' uk-width-1-1', depthVolumeRowDiv);
this.depthVolumeMinInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
this.depthVolumeMinInput.type = 'number';
this.depthVolumeMinInput.value = '0';
this.depthVolumeMinInput.step = '10';
this.depthVolumeMinInput.min = '0';
var separator = <HTMLSpanElement>L.DomUtil.create('span', '', depthVolumeDiv);
separator.textContent = ' - '
this.depthMaxInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', depthRangeDiv);
this.depthMaxInput.type = 'number';
this.depthMaxInput.value = '0';
this.depthMaxInput.step = '10';
this.depthMaxInput.min = '0';
this.depthMaxInput.onchange = function () {
//validate();
this.depthVolumeMaxInput = <HTMLInputElement>L.DomUtil.create('input', 'uk-width-1-4', depthVolumeDiv);
this.depthVolumeMaxInput.type = 'number';
this.depthVolumeMaxInput.value = '0';
this.depthVolumeMaxInput.step = '10';
this.depthVolumeMaxInput.min = '0';
this.depthVolumeMinInput.onchange = () => {if (parseFloat(this.depthVolumeMinInput.value) < 0) this.depthVolumeMinInput.value = '0';}
this.depthVolumeMaxInput.onchange = () => {if (parseFloat(this.depthVolumeMaxInput.value) < 0) this.depthVolumeMaxInput.value = '0';}
this.depthSurfaceInput.onchange = () => {if (parseFloat(this.depthSurfaceInput.value) < 0) this.depthSurfaceInput.value = '0';}
this.surfaceButton.onclick = function () {
depthSurfaceRowDiv.style.display = '';
depthVolumeRowDiv.style.display = 'none';
};
this.volumeButton.onclick = function () {
depthVolumeRowDiv.style.display = '';
depthSurfaceRowDiv.style.display = 'none';
};
UIkit.ready( () => {
super.defaults();
this.defaults();
});
}
public defaults() {
var self = this;
if (document.body.contains(self.surfaceButton) && self.surfaceButton.style.display != 'none') self.surfaceButton.click();
}
public show() {
super.show();
}
......@@ -88,7 +113,6 @@ class ITLocation extends STWkit.LocationCard {
public populateCard(geojson) {
super.populateCard(geojson);
}
public populateData(geojson) {
super.populateData(geojson);
......@@ -96,6 +120,9 @@ class ITLocation extends STWkit.LocationCard {
public clear() {
super.clear();
this.depthSurfaceInput.value = '0';
this.depthVolumeMaxInput.value = '0';
this.depthVolumeMinInput.value = '0';
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment