sk-soil-input-form
Version:
Add a soil input form to Angular2 projects.
221 lines • 21.8 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var enumValues_1 = require("./soil-data-defs/enumValues");
var drainage_enum_1 = require("./soil-data-defs/drainage.enum");
var aspect_enum_1 = require("./soil-data-defs/aspect.enum");
var surface_expression_enum_1 = require("./soil-data-defs/surface-expression.enum");
var slope_position_enum_1 = require("./soil-data-defs/slope-position.enum");
var slope_class_enum_1 = require("./soil-data-defs/slope-class.enum");
var slope_length_enum_1 = require("./soil-data-defs/slope-length.enum");
var concavity_enum_1 = require("./soil-data-defs/concavity.enum");
var land_use_enum_1 = require("./soil-data-defs/land-use.enum");
var stoniness_enum_1 = require("./soil-data-defs/stoniness-enum");
var surfex_mod_enum_1 = require("./soil-data-defs/surfex-mod.enum");
var SoilPitFormComponent = /** @class */ (function () {
function SoilPitFormComponent(_fb) {
this._fb = _fb;
this.drainage = enumValues_1.EnumValues.getNames(drainage_enum_1.Drainage);
this.soilFormSubmittedEmitter = new core_1.EventEmitter();
this.aspect = enumValues_1.EnumValues.getNames(aspect_enum_1.Aspect);
this.surfex = enumValues_1.EnumValues.getNames(surface_expression_enum_1.SurfaceExpression);
this.slopepos = enumValues_1.EnumValues.getNames(slope_position_enum_1.SlopePosition);
this.slopeclass = enumValues_1.EnumValues.getNames(slope_class_enum_1.SlopeClass);
this.slopelen = enumValues_1.EnumValues.getNames(slope_length_enum_1.SlopeLength);
this.concavity = enumValues_1.EnumValues.getNames(concavity_enum_1.Concavity);
this.landuse = enumValues_1.EnumValues.getNames(land_use_enum_1.LandUse);
this.stoniness = enumValues_1.EnumValues.getNames(stoniness_enum_1.Stoniness);
this.surfexmod = enumValues_1.EnumValues.getNames(surfex_mod_enum_1.SurfexMod);
this.layer = ['I', 'II'];
this.locationButtonText = 'Get current';
this.pitorder = [
{ name: 'BR (Brunisolic)', selected: false, value: 'BR' },
{ name: 'CH (Chernozemic)', selected: false, value: 'CH' },
{ name: 'CY (Cryosolic)', selected: false, value: 'CY' },
{ name: 'GL (Gleysolic)', selected: false, value: 'GL' },
{ name: 'LU (Luvisolic)', selected: false, value: 'LU' },
{ name: 'OR (Organic)', selected: false, value: 'OR' },
{ name: 'PZ (Podzolic)', selected: false, value: 'PZ' },
{ name: 'RG (Regosolic)', selected: false, value: 'RG' },
{ name: 'SZ (Solonetzic)', selected: false, value: 'SZ' },
{ name: 'VE (Vertisolic)', selected: false, value: 'VE' },
{ name: '- (N/A)', selected: false, value: '-' }
];
this.ggroup = [
{ name: 'BC Brown Chernozem', selected: false, value: 'BC' },
{ name: 'BLC Black Chernozem', selected: false, value: 'CH' },
{ name: 'DBC Dark Brown Chernozem', selected: false, value: 'DBC' },
{ name: 'DGC Dark Gray Chernozem', selected: false, value: 'DGC' },
{ name: 'EB Eutric Brunisol', selected: false, value: 'EB' },
{ name: 'F Fibrisol', selected: false, value: 'F' },
{ name: 'G Gleysol', selected: false, value: 'G' },
{ name: 'GL Gray Luvisol', selected: false, value: 'GL' },
{ name: 'H Humisol', selected: false, value: 'H' },
{ name: 'HG Humic Gleysol', selected: false, value: 'HG' },
{ name: 'HR Humic Regosol', selected: false, value: 'HR' },
{ name: 'LG Luvic Gleysol', selected: false, value: 'LG' },
{ name: 'M Mesisol', selected: false, value: 'M' },
{ name: 'R Regosol', selected: false, value: 'R' },
{ name: 'SO Solod', selected: false, value: 'SO' },
{ name: 'SS Solodized Solonetz', selected: false, value: 'SS' },
{ name: 'SZ Solonetz', selected: false, value: 'SZ' },
{ name: 'V Vertisol', selected: false, value: 'V' },
{ name: '- NULL', selected: false, value: '-' },
{ name: 'GBL Gray Brown Luvisol', selected: false, value: 'GBL' },
{ name: 'FO Folisol', selected: false, value: 'FO' }
];
this.sgroup = [
{ name: 'B Brown', selected: false, value: 'B' },
{ name: 'BL Black', selected: false, value: 'BL' },
{ name: 'BR Brunisolic', selected: false, value: 'BR' },
{ name: 'CA Calcareous', selected: false, value: 'CA' },
{ name: 'CU Cumulic ', selected: false, value: 'CU' },
{ name: 'D Dark', selected: false, value: 'D' },
{ name: 'DB Dark Brown', selected: false, value: 'DB' },
{ name: 'DG Dark Gray', selected: false, value: 'DG' },
{ name: 'E Eluviated', selected: false, value: 'E' },
{ name: 'FI Fibric', selected: false, value: 'FI' },
{ name: 'G Gray', selected: false, value: 'G' },
{ name: 'GL Gleyed', selected: false, value: 'GL' },
{ name: 'GLB Gleyed Brown', selected: false, value: 'GLB' },
{ name: 'GLBL Gleyed Black', selected: false, value: 'GLBL' },
{ name: 'GLC Gleysolic', selected: false, value: 'GLC' },
{ name: 'GLCA Gleyed Calcareous', selected: false, value: 'GLCA' },
{ name: 'GLCU Gleyed Cumulic', selected: false, value: 'GLCU' },
{ name: 'GLD Gleyed', selected: false, value: 'GLD' },
{ name: 'GLDB Gleyed Dark Brown', selected: false, value: 'GLDB' },
{ name: 'GLDG Gleyed Dark Gray', selected: false, value: 'GLDG' },
{ name: 'GLE Gleyed Eluviated', selected: false, value: 'GLE' },
{ name: 'GLR Gleyed Rego', selected: false, value: 'GLR' },
{ name: 'GLSZ Gleyed Solonetzic', selected: false, value: 'GLSZ' },
{ name: 'HU Humic', selected: false, value: 'HU' },
{ name: 'HY Hydric', selected: false, value: 'HY' },
{ name: 'LM Limnic', selected: false, value: 'LM' },
{ name: 'ME Mesic', selected: false, value: 'ME' },
{ name: 'O Orthic', selected: false, value: 'O' },
{ name: 'R Rego', selected: false, value: 'R' },
{ name: 'SZ Solonetzic', selected: false, value: 'SZ' },
{ name: 'T Terric', selected: false, value: 'T' },
{ name: 'TFI Terric Fibric', selected: false, value: 'TFI' },
{ name: 'TY Typic', selected: false, value: 'TY' },
{ name: '- NULL', selected: false, value: '-' },
];
}
SoilPitFormComponent.prototype.ngOnInit = function () {
this.myForm = this._fb.group({
name: '',
lat: '',
long: '',
horizons: this._fb.array([]),
landscapeDesc: '',
notes: '',
drainage: '',
aspect: '',
surfex1: '',
surfex2: '',
surfexmod: '',
slopeposition: '',
slopeclass: '',
slopelength: '',
concavity: '',
landuse: '',
stoniness: '',
// soilClassification:'',
edition: 3,
pitorder: '',
ggroup: '',
sgroup: '',
years: '',
project: ''
});
this.addHorizon();
/* subscribe to addresses value changes */
// this.myForm.controls['horizons'].valueChanges.subscribe(x => {
// console.log(x);
// })
this.setCurrentLocation();
};
SoilPitFormComponent.prototype.initAddress = function () {
return this._fb.group({
layer: '',
designation: [''],
modifiers: [''],
start: [''],
end: [''],
angularity: '',
cfpercent: '',
lowerboundary: '',
texture: '',
hue: '',
value: '',
chroma: '',
mottles: '',
structureKind: '',
structureClass: '',
structureGrade: '',
parentMaterial: '',
effervesence: '',
comments: ''
});
};
SoilPitFormComponent.prototype.addHorizon = function () {
var control = this.myForm.controls['horizons'];
var addrCtrl = this.initAddress();
control.push(addrCtrl);
/* subscribe to individual address value changes */
// addrCtrl.valueChanges.subscribe(x => {
// console.log(x);
// })
};
SoilPitFormComponent.prototype.removeAddress = function (i) {
var control = this.myForm.controls['horizons'];
control.removeAt(i);
};
SoilPitFormComponent.prototype.setCurrentLocation = function (event) {
var _this = this;
if (event) {
event.preventDefault();
}
this.locationButtonText = 'Getting...';
window.navigator.geolocation.getCurrentPosition(function (position) {
_this.myForm.patchValue({
'lat': position.coords.latitude.toFixed(4),
'long': position.coords.longitude.toFixed(4)
});
_this.locationButtonText = 'Get current';
}, function (err) {
_this.locationButtonText = 'Location error';
console.log(err);
});
};
SoilPitFormComponent.prototype.save = function (model) {
console.log(model);
this.soilFormSubmittedEmitter.emit(model);
this.myForm.reset();
};
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], SoilPitFormComponent.prototype, "soilFormSubmittedEmitter", void 0);
SoilPitFormComponent = __decorate([
core_1.Component({
moduleId: module.id.toString(),
selector: 'soil-pit-form',
template: "<div class=\"container-fluid\">\n <form [formGroup]=\"myForm\" novalidate (ngSubmit)=\"save(myForm)\">\n\n <div class=\"row\">\n <!--title-->\n\n <div class=\"margin-20 col-xs-12\">\n <h2>Add soil pit</h2>\n </div>\n <!--name-->\n <div class=\"form-group col-xs-12 col-sm-12 col-md-3 col-lg-2\">\n <label>Name/ID</label>\n <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n </div>\n <div class=\"form-group col-xs-12 col-sm-12 col-md-3 col-lg-2\">\n <label>Project</label>\n <input type=\"text\" class=\"form-control\" formControlName=\"project\">\n </div>\n <div class=\"form-group col-xs-12 col-sm-12 col-md-3 col-lg-2\">\n <label>Year</label>\n <input type=\"text\" class=\"form-control\" formControlName=\"years\">\n </div>\n\n <div class=\"form-group col-xs-12 col-sm-4 col-md-3 col-lg-2\">\n <label>Lat</label>\n <input type=\"text\" class=\"form-control\" formControlName=\"lat\">\n </div>\n\n <div class=\"form-group col-xs-12 col-sm-4 col-md-3 col-lg-2\">\n <label>Long</label>\n <input type=\"text\" class=\"form-control\" formControlName=\"long\">\n </div>\n\n <div class=\"form-group col-xs-12 col-sm-4 col-md-2 col-lg-2\">\n <label>Location</label>\n <button class=\"btn btn-block btn-default\" (click)=\"setCurrentLocation($event)\">{{ locationButtonText }}</button>\n </div>\n\n </div>\n\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <!--horizons-->\n <div formArrayName=\"horizons\">\n <div *ngFor=\"let address of myForm.controls.horizons.controls; let i=index\" class=\"panel panel-default\">\n <div class=\"panel-heading\">\n <span>Horizon {{i + 1}}</span>\n \n <span class=\"glyphicon glyphicon-remove pull-right\"\n *ngIf=\"myForm.controls.horizons.controls.length > 1\"\n (click)=\"removeAddress(i)\"></span>\n </div>\n <div class=\"panel-body\" [formGroupName]=\"i\">\n <horizon [group]=\"myForm.controls.horizons.controls[i]\"></horizon>\n </div>\n </div>\n </div>\n <!--add horizon-->\n <div class=\"margin-20\">\n <a (click)=\"addHorizon()\" style=\"cursor: default\">\n Add another horizon +\n </a>\n </div>\n <h3>Site description</h3><hr>\n </div>\n </div>\n\n\n\n\n <div class=\"row\">\n <!--parent material-->\n \n <!--Order-->\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>Order</label>\n <select\n class=\"form-control\"\n formControlName=\"pitorder\">\n <option *ngFor=\"let c of pitorder\" [value]=\"c.value\">{{c.name}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>G_Group</label>\n <select\n class=\"form-control\"\n formControlName=\"ggroup\">\n <option *ngFor=\"let c of ggroup\" [value]=\"c.value\">{{c.name}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>S_Group</label>\n <select\n class=\"form-control\"\n formControlName=\"sgroup\">\n <option *ngFor=\"let c of sgroup\" [value]=\"c.value\">{{c.name}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>edition</label>\n <select\n class=\"form-control\"\n formControlName=\"edition\">\n <option value=\"2\">2</option>\n <option value=\"3\" selected>3</option>\n </select>\n </div>\n\n <!--drainage-->\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>drainage</label>\n <select\n class=\"form-control\"\n formControlName=\"drainage\">\n <option *ngFor=\"let c of drainage\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>aspect</label>\n <select\n class=\"form-control\"\n formControlName=\"aspect\">\n <option *ngFor=\"let c of aspect\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-6 col-md-3\">\n <label>surface expression 1</label>\n <select\n class=\"form-control\"\n formControlName=\"surfex1\">\n <option *ngFor=\"let c of surfex\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-6 col-md-3\">\n <label>surface expression 2</label>\n <select\n class=\"form-control\"\n formControlName=\"surfex2\">\n <option *ngFor=\"let c of surfex\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n \n <div class=\"form-group col-xs-12 col-md-6\">\n <label>surfex modifier</label>\n <select class=\"form-control\"\n formControlName=\"surfexmod\">\n <option *ngFor=\"let s of surfexmod\" [value]=\"s\">{{s}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>slope position</label>\n <select\n class=\"form-control\"\n formControlName=\"slopeposition\">\n <option *ngFor=\"let c of slopepos\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>slope class</label>\n <select\n class=\"form-control\"\n formControlName=\"slopeclass\">\n <option *ngFor=\"let c of slopeclass\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>slope length</label>\n <select\n class=\"form-control\"\n formControlName=\"slopelength\">\n <option *ngFor=\"let c of slopelen\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>concavity</label>\n <select\n class=\"form-control\"\n formControlName=\"concavity\">\n <option *ngFor=\"let c of concavity\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>land use</label>\n <select\n class=\"form-control\"\n formControlName=\"landuse\">\n <option *ngFor=\"let c of landuse\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>stoniness</label>\n <select\n class=\"form-control\"\n formControlName=\"stoniness\">\n <option *ngFor=\"let c of stoniness\" [value]=\"c\">{{c}}</option>\n </select>\n </div>\n\n <!--landscape description-->\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>landscape description</label>\n <textarea class=\"form-control\" formControlName=\"landscapeDesc\" rows=\"4\"></textarea>\n </div>\n <!--notes-->\n <div class=\"form-group col-xs-12 col-md-6\">\n <label>notes</label>\n <textarea class=\"form-control\" formControlName=\"notes\" rows=\"4\"></textarea>\n </div>\n\n <!--<div class=\"form-group col-xs-12 col-md-6\">-->\n <!--<label>add photo</label>-->\n <!--<input class=\"form-control file\" type=\"file\">-->\n <!--</div>-->\n\n </div>\n\n <div class=\"row\">\n <div class=\"col-xs-12\">\n <!--submit-->\n <div class=\"margin-20\">\n <button type=\"submit\" class=\"btn btn-primary pull-right\" [disabled]=\"!myForm.valid\">Submit</button>\n </div>\n <div class=\"clearfix\"></div>\n \n <!--diagnostic-->\n <!--<div class=\"margin-20\">-->\n <!--<div>myForm details:-</div>-->\n <!--<pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>-->\n <!--<pre>form value: <br>{{myForm.value | json}}</pre>-->\n <!--</div>-->\n </div>\n </div>\n\n </form>\n </div>\n\n\n <!--<small *ngIf=\"!myForm.controls.name.valid\" class=\"text-danger\">-->\n <!--Name is required (minimum 5 characters).-->\n <!--</small>-->\n "
}),
__metadata("design:paramtypes", [forms_1.FormBuilder])
], SoilPitFormComponent);
return SoilPitFormComponent;
}());
exports.SoilPitFormComponent = SoilPitFormComponent;
//# sourceMappingURL=soil-pit.component.js.map