@totvs-agro/mobile-components
Version:
Componentes Mobile Totvs (Front-End) para utilização dos estilos do T-Faces e Ionic v3
353 lines • 18.5 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { BackgroundMode } from '@ionic-native/background-mode';
import { Spherical } from '@ionic-native/google-maps';
import { Events, Platform } from 'ionic-angular';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/timer';
import { MapUtil } from '../../map/map-util';
import { TotvsNotificationProvider } from '../../providers/totvs-notification-provider';
import { TotvsNotificationType } from '../../providers/totvs-notification-type';
import { PontosShapeListController } from './shape-draw-controller';
import { TotvsTranslateProvider } from '../../providers/translate/totvs-translate-provider';
var HTML_TEMPLATE = "\n<ion-content>\n <div #map id=\"map\"></div>\n \n <button #elementArea class=\"area restart\"></button>\n \n <div [hidden]=\"!isOnlyDraw\">\n <ion-grid class=\"grid\">\n <ion-row>\n <ion-col class=\"col-restart\">\n <button #buttonRestart class=\"btn restart\" ion-button (click)=\"cleanPolygon()\">{{'COMMON.RESTART' | tTranslate}}</button>\n </ion-col>\n <ion-col class=\"col-save\" (click)=\"save()\">\n <button #buttonSave class=\"btn save\" ion-button>{{'COMMON.SAVE' | tTranslate}}</button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n <div [hidden]=\"isOnlyDraw\" style=\"position: fixed; width: 100%; bottom: 0px; background-color: #ffffff\">\n <p class=\"caminhe-o-permetro\">{{'COMMON.WALK_PERIMETER' | tTranslate}}</p>\n <ion-grid class=\"grid\">\n <ion-row>\n <ion-col>\n <button class=\"btn-walk restart\" ion-button outline (click)=\"cancelTracking()\">{{'COMMON.CANCEL' | tTranslate}}</button>\n </ion-col>\n <ion-col>\n <button #buttonConclude class=\"btn-walk save\" ion-button (click)=\"concludeTracking()\">Teste {{'COMMON.CONCLUDE' | tTranslate}}</button>\n </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n <ion-fab #deletePoint right top class=\"fb-delete\" (click)=\"deleteSelectedPoint()\">\n <button ion-fab class=\"thf-fab-button\">\n <ion-icon name=\"trash\"></ion-icon> \n </button>\n </ion-fab>\n <ion-fab #walkPoint left top class=\"fb-walk\" (click)=\"walkDrawOption()\">\n <button ion-fab class=\"thf-fab-button\">\n <ion-icon name=\"walk\"></ion-icon>\n </button>\n </ion-fab>\n</ion-content>\n";
var ShapeDrawComponent = /** @class */ (function () {
function ShapeDrawComponent(platform, _notification, _events, _translate, backgroundMode) {
var _this = this;
this.platform = platform;
this._notification = _notification;
this._events = _events;
this._translate = _translate;
this.backgroundMode = backgroundMode;
this.translate = {};
this.isOnlyDraw = true;
this._events.subscribe("shape-draw:deletePoint", function () {
_this.changeButtonVisibility(_this.deletePoint, true);
});
setTimeout(function () {
_this.labelSiglaHectare = " " + _this._translate.instant("COMMON.SIGLA_HECTARES");
/*this.translate = {
restart: this._translate.instant("COMMON.RESTART"),
cancel: this._translate.instant("COMMON.CANCEL"),
save: this._translate.instant("COMMON.SAVE"),
conclude: this._translate.instant("COMMON.CONCLUDE"),
walkPerimeter: this._translate.instant("COMMON.WALK_PERIMETER")
}*/
}, 400);
}
ShapeDrawComponent.prototype.ngOnInit = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.platform.ready()];
case 1:
_a.sent();
return [4 /*yield*/, this.loadMap()];
case 2:
_a.sent();
this.changeButtonColor();
return [2 /*return*/];
}
});
});
};
ShapeDrawComponent.prototype.ngOnChanges = function (changes) {
if (changes['backgroundPolygons']) {
this.drawBackgroundPolygons(true);
}
};
ShapeDrawComponent.prototype.drawBackgroundPolygons = function (repositioning) {
var _this = this;
if (this.backgroundPolygons) {
this.map.clearMap();
this.backgroundPolygons.forEach(function (polygon) {
var polygonOptions = {
points: polygon,
strokeColor: 'rgba(255, 255, 255, 0.50)',
fillColor: 'rgba(255, 255, 255, 0.25)',
strokeWidth: 2,
clickable: false
};
_this.map.getMapObject().addPolygonSync(polygonOptions);
});
if (repositioning) {
var points = this.backgroundPolygons.reduce(function (latLng1, latLng2) { return latLng1.concat(latLng2); }, []);
this.map.moveCamera({
'target': points
});
}
}
};
ShapeDrawComponent.prototype.cleanPolygon = function () {
if (this.editPolygon)
this.editPolygon.unsubscribe();
this.isFinish = false;
this.isStart = false;
this.isOnlyDraw = true;
this.pontosShape.clear();
this.drawBackgroundPolygons();
this.changeButtonColor();
this.changeButtonVisibility(this.deletePoint, false);
this.changeButtonVisibility(this.walkPoint, true);
this.observablePolygonArea("end");
};
ShapeDrawComponent.prototype.save = function () {
if (this.pontosShape.isPolygonDrew()) {
if (this.saveClick) {
this.saveClick({ polygon: this.pontosShape.getSimplifiedPoints(), areaPolygon: this.pontosShape.getAreaPolygon() });
}
else
console.log('Não possui nenhuma evento a ser lançado');
}
else {
this._notification.toast(this._translate.instant("COMMON.UNFORMED_POLYGON"), { type: TotvsNotificationType.ERROR });
}
};
ShapeDrawComponent.prototype.changeButtonColor = function () {
if (this.buttonSave) {
if (this.pontosShape.isPolygonDrew()) {
this.buttonSave.nativeElement.style.backgroundColor = "#0c9abe";
this.buttonSave.nativeElement.style.opacity = "1";
this.changeButtonVisibility(this.elementArea, true);
}
else {
this.buttonSave.nativeElement.style.backgroundColor = "#b6bdbf";
this.buttonSave.nativeElement.style.opacity = ".7";
this.changeButtonVisibility(this.elementArea, false);
}
}
if (this.buttonConclude) {
if (this.pontosShape.isPolygonDrew()) {
this.buttonConclude.nativeElement.style.backgroundColor = "#0c9abe";
this.buttonConclude.nativeElement.style.opacity = "1";
this.changeButtonVisibility(this.elementArea, true);
}
else {
this.buttonConclude.nativeElement.style.backgroundColor = "#b6bdbf";
this.buttonConclude.nativeElement.style.opacity = ".7";
this.changeButtonVisibility(this.elementArea, false);
}
}
if (this.buttonRestart) {
if (this.pontosShape.getLatLngPoints().length || this.isFinish) {
this.buttonRestart.nativeElement.style.backgroundColor = "#ffffff";
this.buttonRestart.nativeElement.style.color = "#0c9abe";
this.buttonRestart.nativeElement.style.opacity = "1";
}
else {
this.buttonRestart.nativeElement.style.backgroundColor = "#b6bdbf";
this.buttonRestart.nativeElement.style.color = "#ffffff";
this.buttonRestart.nativeElement.style.opacity = ".7";
}
}
};
ShapeDrawComponent.prototype.changeButtonVisibility = function (element, isVisibility) {
if (element)
element.nativeElement.style.visibility = isVisibility ? 'visible' : 'hidden';
};
ShapeDrawComponent.prototype.deleteSelectedPoint = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.pontosShape.removeSelectedPoint();
this.changeButtonVisibility(this.deletePoint, false);
this.changeButtonColor();
return [2 /*return*/];
});
});
};
ShapeDrawComponent.prototype.loadMap = function () {
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
this.map = MapUtil.create(this.mapElement, {
onclick: function (latLng) {
if (!_this._observableArea)
_this.observablePolygonArea("start");
_this.changeButtonVisibility(_this.walkPoint, false);
if (_this.pontosShape.getSelectedPoint()) {
_this.pontosShape.unselectPoints();
_this.changeButtonVisibility(_this.deletePoint, false);
}
else if (_this.isOnlyDraw) {
_this.pontosShape.add(latLng[0]);
}
_this.changeButtonColor();
}
});
this.pontosShape = new PontosShapeListController(this.map.getMapObject(), this._events);
this.map.getMyLocation().then(function (currentPosition) {
if (_this.backgroundPolygons == undefined || _this.backgroundPolygons.length == 0) {
_this.map.moveCamera({ target: [currentPosition.latLng] });
}
});
return [2 /*return*/];
});
});
};
/**
* Walking
*/
/**
* Walking
*/
ShapeDrawComponent.prototype.walkDrawOption = /**
* Walking
*/
function () {
var _this = this;
this.changeButtonVisibility(this.walkPoint, false);
var buttons = [
{
text: this._translate.instant("COMMON.CANCEL"),
handler: function (data) {
_this.changeButtonVisibility(_this.walkPoint, true);
}
},
{
text: this._translate.instant("COMMON.CONTINUE_BUTTON"),
handler: function (data) {
_this.isWalkDraw = true;
_this.isOnlyDraw = false;
_this.startTracking();
}
}
];
this._notification.presentAlert(this._translate.instant("COMMON.WALK_MODE"), this._translate.instant("COMMON.WALK_MODE_INFO"), buttons, true);
};
ShapeDrawComponent.prototype.startTracking = function () {
var _this = this;
this.backgroundMode.enable();
this.backgroundMode.disableWebViewOptimizations();
this.points = [];
var lastLocation = null;
var index = 0;
this.observablePolygonArea("start");
this.trackObs = Observable.timer(1000, 1000).subscribe(function () {
_this.map.getMyLocation()
.then(function (location) {
var actualLocation = location.latLng;
if (lastLocation != null) {
var distance = Spherical.computeDistanceBetween(lastLocation, actualLocation);
if (distance < 5) {
return;
}
}
lastLocation = actualLocation;
_this.points.push(actualLocation);
_this.pontosShape.add(actualLocation, {
drawMiddleMarkers: false,
index: index++
});
_this.map.moveCamera({ target: actualLocation });
//this._map.setCenter([actualLocation]);
_this.changeButtonColor();
});
});
};
ShapeDrawComponent.prototype.cancelTracking = function () {
this.isStart = false;
this.isFinish = false;
this.stopTracking();
this.changeButtonColor();
this.cleanPolygon();
};
ShapeDrawComponent.prototype.getAreaPolygon = function () {
return this.pontosShape ? this.pontosShape.getAreaPolygon().toFixed(2) : 0;
};
ShapeDrawComponent.prototype.observablePolygonArea = function (action) {
var _this = this;
if (action == "start") {
this._observableArea = Observable.interval(100)
.subscribe(function (p) {
_this.elementArea.nativeElement.innerText = _this.getAreaPolygon() + _this.labelSiglaHectare;
});
}
else if (this._observableArea) {
this._observableArea.unsubscribe();
this._observableArea = null;
}
};
ShapeDrawComponent.prototype.stopTracking = function () {
this.backgroundMode.disable();
this.trackObs.unsubscribe();
this.observablePolygonArea("end");
};
ShapeDrawComponent.prototype.concludeTracking = function () {
this.isStart = false;
this.isFinish = true;
this.isOnlyDraw = true;
this.stopTracking();
if (this.points.length > 0) {
var listPoints = [].concat(this.points);
this.points = this.pontosShape.getSimplifiedPointsByList(listPoints);
this.pontosShape.clear();
this.drawBackgroundPolygons();
this.pontosShape.addAll(this.points);
}
this.changeButtonColor();
this._notification.toast(this._translate.instant("COMMON.DRAW_YET"));
};
ShapeDrawComponent.decorators = [
{ type: Component, args: [{
selector: 'shape-draw',
template: HTML_TEMPLATE
},] },
];
/** @nocollapse */
ShapeDrawComponent.ctorParameters = function () { return [
{ type: Platform, },
{ type: TotvsNotificationProvider, },
{ type: Events, },
{ type: TotvsTranslateProvider, },
{ type: BackgroundMode, },
]; };
ShapeDrawComponent.propDecorators = {
"mapElement": [{ type: ViewChild, args: ['map',] },],
"buttonSave": [{ type: ViewChild, args: ['buttonSave', { read: ElementRef },] },],
"buttonConclude": [{ type: ViewChild, args: ['buttonConclude', { read: ElementRef },] },],
"buttonRestart": [{ type: ViewChild, args: ['buttonRestart', { read: ElementRef },] },],
"deletePoint": [{ type: ViewChild, args: ['deletePoint', { read: ElementRef },] },],
"walkPoint": [{ type: ViewChild, args: ['walkPoint', { read: ElementRef },] },],
"elementArea": [{ type: ViewChild, args: ['elementArea', { read: ElementRef },] },],
"saveClick": [{ type: Input, args: ['saveClick',] },],
"backgroundPolygons": [{ type: Input, args: ['backgroundPolygons',] },],
};
return ShapeDrawComponent;
}());
export { ShapeDrawComponent };
//# sourceMappingURL=shape-draw.js.map