Compare commits
38 Commits
FarmMapsLi
...
719c699981
Author | SHA1 | Date | |
---|---|---|---|
719c699981 | |||
456628d014 | |||
76a44a8f95 | |||
f66428d04c | |||
ee925d07b4 | |||
9b03b49028 | |||
15c224ff5d | |||
7cb129dbc4 | |||
2059b48abb | |||
e1ff44ed3c | |||
|
709c76a851 | ||
|
677608c14d | ||
|
fd8025c674 | ||
|
560c426bc0 | ||
|
e1fef2d7f3 | ||
|
f44b079cde | ||
|
8e5383b0f2 | ||
|
615872992f | ||
|
2e0b090fb7 | ||
|
5d7fd63adc | ||
|
0948bacaaf | ||
8fd653afbc | |||
b058cb80b1 | |||
|
490ae1868b | ||
|
4384fd1387 | ||
|
529b1c9bd7 | ||
|
fc84548d8a | ||
|
e57b8297c0 | ||
|
efe38aba62 | ||
|
7bd5dada2b | ||
|
16db063339 | ||
|
5d79dcc7b6 | ||
|
deda769e8b | ||
|
f31e4154b2 | ||
|
7476e4c928 | ||
|
d5258b7c79 | ||
|
04929a1ca3 | ||
|
67e0e5ed5d |
@@ -1,47 +1,47 @@
|
||||
pipeline {
|
||||
agent any
|
||||
environment {
|
||||
PACKAGE_VERSION_PREFIX=sh(script: 'jq .version package.json |sed "s/\\"//g"', returnStdout: true).trim()
|
||||
PACKAGE_VERSION="${PACKAGE_VERSION_PREFIX + '-prerelease.' + env.BUILD_NUMBER}"
|
||||
}
|
||||
stages {
|
||||
stage('npm install'){
|
||||
steps {
|
||||
sh '''npm install
|
||||
cd projects/common
|
||||
npm install
|
||||
cd ../common-map
|
||||
npm install
|
||||
'''
|
||||
}
|
||||
}
|
||||
stage('build'){
|
||||
steps {
|
||||
sh '''ng build common
|
||||
ng build common-map'''
|
||||
}
|
||||
}
|
||||
stage('npm publish'){
|
||||
steps {
|
||||
sh '''cd dist/common
|
||||
npm version ${PACKAGE_VERSION}
|
||||
npm publish
|
||||
cd ../common-map
|
||||
npm version ${PACKAGE_VERSION}
|
||||
npm publish'''
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
post {
|
||||
always {
|
||||
emailext (
|
||||
body: '${DEFAULT_CONTENT}',
|
||||
mimeType: 'text/html',
|
||||
replyTo: '${DEFAULT_REPLYTO}',
|
||||
subject: '${DEFAULT_SUBJECT}',
|
||||
to: emailextrecipients([[$class: 'CulpritsRecipientProvider'], [$class: 'RequesterRecipientProvider']])
|
||||
)
|
||||
}
|
||||
}
|
||||
pipeline {
|
||||
agent any
|
||||
environment {
|
||||
PACKAGE_VERSION_PREFIX=sh(script: 'jq .version package.json |sed "s/\\"//g"', returnStdout: true).trim()
|
||||
PACKAGE_VERSION="${PACKAGE_VERSION_PREFIX + '-prerelease.' + env.BUILD_NUMBER}"
|
||||
}
|
||||
stages {
|
||||
stage('npm install'){
|
||||
steps {
|
||||
sh '''npm install
|
||||
cd projects/common
|
||||
npm install
|
||||
cd ../common-map
|
||||
npm install
|
||||
'''
|
||||
}
|
||||
}
|
||||
stage('build'){
|
||||
steps {
|
||||
sh '''ng build common
|
||||
ng build common-map'''
|
||||
}
|
||||
}
|
||||
stage('npm publish'){
|
||||
steps {
|
||||
sh '''cd dist/common
|
||||
npm version ${PACKAGE_VERSION}
|
||||
npm publish
|
||||
cd ../common-map
|
||||
npm version ${PACKAGE_VERSION}
|
||||
npm publish'''
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
post {
|
||||
always {
|
||||
emailext (
|
||||
body: '${DEFAULT_CONTENT}',
|
||||
mimeType: 'text/html',
|
||||
replyTo: '${DEFAULT_REPLYTO}',
|
||||
subject: '${DEFAULT_SUBJECT}',
|
||||
to: emailextrecipients([[$class: 'CulpritsRecipientProvider'], [$class: 'RequesterRecipientProvider']])
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
118
README.md
118
README.md
@@ -1,59 +1,59 @@
|
||||
# Farmmaps viewer
|
||||
|
||||
This is a sample FarmMaps client in Angular 7.x.
|
||||
|
||||
|
||||
## Quick start
|
||||
|
||||
Use one of the two options below to get started.
|
||||
|
||||
## Option 1, Using docker
|
||||
|
||||
*Dependencies*
|
||||
|
||||
* docker desktop
|
||||
|
||||
*Setup*
|
||||
|
||||
```
|
||||
docker pull node:10.16.0
|
||||
docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:10.16.0
|
||||
```
|
||||
|
||||
Inside the running container
|
||||
```
|
||||
git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
|
||||
cd FarmMapsLib
|
||||
npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
|
||||
npm install -g @angular/cli
|
||||
npm install
|
||||
ng serve --host 0.0.0.0
|
||||
```
|
||||
*Go*
|
||||
|
||||
Point your browser to http://localhost:4200
|
||||
|
||||
## Option 2, Using local machine
|
||||
|
||||
*Dependencies*
|
||||
|
||||
* npm 6.9.0
|
||||
* nodejs 10.16.0
|
||||
* git
|
||||
|
||||
*Setup*
|
||||
|
||||
```
|
||||
git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
|
||||
cd FarmMapsLib
|
||||
npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
|
||||
npm install -g @angular/cli
|
||||
npm install
|
||||
ng serve
|
||||
```
|
||||
*Go*
|
||||
|
||||
Point your browser to http://localhost:4200
|
||||
|
||||
|
||||
|
||||
# Farmmaps viewer
|
||||
|
||||
This is a sample FarmMaps client in Angular 7.x.
|
||||
|
||||
|
||||
## Quick start
|
||||
|
||||
Use one of the two options below to get started.
|
||||
|
||||
## Option 1, Using docker
|
||||
|
||||
*Dependencies*
|
||||
|
||||
* docker desktop
|
||||
|
||||
*Setup*
|
||||
|
||||
```
|
||||
docker pull node:12.13.1
|
||||
docker run -t -i --entrypoint /bin/bash -p 4200:4200 node:12.13.1
|
||||
```
|
||||
|
||||
Inside the running container
|
||||
```
|
||||
git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
|
||||
cd FarmMapsLib
|
||||
npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
|
||||
npm install -g @angular/cli
|
||||
npm install
|
||||
ng serve --host 0.0.0.0
|
||||
```
|
||||
*Go*
|
||||
|
||||
Point your browser to http://localhost:4200
|
||||
|
||||
## Option 2, Using local machine
|
||||
|
||||
*Dependencies*
|
||||
|
||||
* npm 6.9.0
|
||||
* nodejs 10.16.0
|
||||
* git
|
||||
|
||||
*Setup*
|
||||
|
||||
```
|
||||
git clone https://git.akkerweb.nl/FarmMaps/FarmMapsLib.git
|
||||
cd FarmMapsLib
|
||||
npm config set @farmmaps:registry https://repository.akkerweb.nl/repository/npm-group/
|
||||
npm install -g @angular/cli
|
||||
npm install
|
||||
ng serve
|
||||
```
|
||||
*Go*
|
||||
|
||||
Point your browser to http://localhost:4200
|
||||
|
||||
|
||||
|
||||
|
@@ -66,7 +66,7 @@
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
"maximumError": "7mb"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@@ -1,11 +1,11 @@
|
||||
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
#
|
||||
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
#
|
||||
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
not IE 9-11
|
9460
package-lock.json
generated
9460
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
48
package.json
48
package.json
@@ -11,40 +11,40 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~7.2.0",
|
||||
"@angular/common": "~7.2.0",
|
||||
"@angular/compiler": "~7.2.0",
|
||||
"@angular/core": "~7.2.0",
|
||||
"@angular/forms": "~7.2.0",
|
||||
"@angular/platform-browser": "~7.2.0",
|
||||
"@angular/platform-browser-dynamic": "~7.2.0",
|
||||
"@angular/router": "~7.2.0",
|
||||
"@angular/animations": "~8.2.14",
|
||||
"@angular/common": "~8.2.14",
|
||||
"@angular/compiler": "~8.2.14",
|
||||
"@angular/core": "~8.2.14",
|
||||
"@angular/forms": "~8.2.14",
|
||||
"@angular/platform-browser": "~8.2.14",
|
||||
"@angular/platform-browser-dynamic": "~8.2.14",
|
||||
"@angular/router": "~8.2.14",
|
||||
"@aspnet/signalr": "^1.1.4",
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.69 <0.0.1",
|
||||
"@farmmaps/common-map": ">=0.0.1-prerelease.69 <0.0.1",
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.95 <0.0.1",
|
||||
"@farmmaps/common-map": ">=0.0.1-prerelease.95 <0.0.1",
|
||||
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
|
||||
"@ngrx/effects": "^7.2.0",
|
||||
"@ngrx/router-store": "^7.2.0",
|
||||
"@ngrx/store": "^7.2.0",
|
||||
"@ngrx/effects": "^8.2.0",
|
||||
"@ngrx/router-store": "^8.2.0",
|
||||
"@ngrx/store": "^8.2.0",
|
||||
"bootstrap": "^4.3.1",
|
||||
"font-awesome": "^4.7.0",
|
||||
"core-js": "^2.5.4",
|
||||
"ngrx-store-localstorage": "^8.0.0",
|
||||
"resumablejs": "^1.1.0",
|
||||
"rxjs": "~6.3.3",
|
||||
"rxjs": "~6.5.3",
|
||||
"tassign": "^1.0.0",
|
||||
"zone.js": "~0.8.26"
|
||||
"zone.js": "~0.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.13.0",
|
||||
"@angular-devkit/build-ng-packagr": "~0.13.0",
|
||||
"@angular/cli": "~7.3.8",
|
||||
"@angular/compiler-cli": "~7.2.0",
|
||||
"@angular/language-service": "~7.2.0",
|
||||
"@angular-devkit/build-angular": "~0.803.19",
|
||||
"@angular-devkit/build-ng-packagr": "~0.803.19",
|
||||
"@angular/cli": "~8.3.19",
|
||||
"@angular/compiler-cli": "~8.2.14",
|
||||
"@angular/language-service": "~8.2.14",
|
||||
"@types/node": "~8.9.4",
|
||||
"@types/jasmine": "~2.8.8",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"codelyzer": "~4.5.0",
|
||||
"codelyzer": "^5.0.1",
|
||||
"jasmine-core": "~2.99.1",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"karma": "~4.0.0",
|
||||
@@ -52,12 +52,12 @@
|
||||
"karma-coverage-istanbul-reporter": "~2.0.1",
|
||||
"karma-jasmine": "~1.1.2",
|
||||
"karma-jasmine-html-reporter": "^0.2.2",
|
||||
"ng-packagr": "^4.2.0",
|
||||
"ng-packagr": "^5.4.0",
|
||||
"protractor": "~5.4.0",
|
||||
"ts-node": "~7.0.0",
|
||||
"tsickle": ">=0.34.0",
|
||||
"tsickle": "^0.37.0",
|
||||
"tslib": "^1.9.0",
|
||||
"tslint": "~5.11.0",
|
||||
"typescript": "~3.2.2"
|
||||
"typescript": "~3.5.3"
|
||||
}
|
||||
}
|
||||
|
76
projects/common-map/package-lock.json
generated
76
projects/common-map/package-lock.json
generated
@@ -4,68 +4,42 @@
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@farmmaps/common": {
|
||||
"version": "0.0.1-prerelease.56",
|
||||
"resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.56.tgz",
|
||||
"integrity": "sha512-m9KxWsLkTSz2JI074gIJH1kDR0PCLsFAug8oBjtlU/QxgBySrvqHCRiODpNmNWnFyNTZHqKHJQefn3Q9iAil4g==",
|
||||
"requires": {
|
||||
"angular-oauth2-oidc": "^5.0.2",
|
||||
"ngx-uploadx": "^3.1.3",
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"angular-oauth2-oidc": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
|
||||
"integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
|
||||
"requires": {
|
||||
"jsrsasign": "^8.0.12",
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
"@openlayers/pepjs": {
|
||||
"version": "0.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@openlayers/pepjs/-/pepjs-0.5.3.tgz",
|
||||
"integrity": "sha512-Bgvi5c14BS0FJWyYWWFstNEnXsB30nK8Jt8hkAAdqr7E0gDdBBWVDglF3Ub19wTxvgJ/CVHyTY6VuCtnyRzglg=="
|
||||
},
|
||||
"ieee754": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
|
||||
"integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
|
||||
},
|
||||
"jsrsasign": {
|
||||
"version": "8.0.12",
|
||||
"resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
|
||||
"integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
|
||||
},
|
||||
"ngx-openlayers": {
|
||||
"version": "1.0.0-next.9",
|
||||
"resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.9.tgz",
|
||||
"integrity": "sha512-14UFxJX9oeOXtq+HJCJyXn0sBmYmCqj2AnFtetKk1FsDe8EUMFGIRju8UOFegCr2oEu5JsuRjALcfW7lCe+teg==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"ngx-uploadx": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
|
||||
"integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
|
||||
"version": "1.0.0-next.13",
|
||||
"resolved": "https://registry.npmjs.org/ngx-openlayers/-/ngx-openlayers-1.0.0-next.13.tgz",
|
||||
"integrity": "sha512-6y724s5JV6n1oxEhryxP3wcbwzpierj9RLiMLXInfKOG3l5IO1AtPNkeK9+mKctVDUVm5URIfzzZH02Ld+bvSQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"ol": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/ol/-/ol-5.3.3.tgz",
|
||||
"integrity": "sha512-7eU4x8YMduNcED1D5wI+AMWDRe7/1HmGfsbV+kFFROI9RNABU/6n4osj6Q3trZbxxKnK2DSRIjIRGwRHT/Z+Ww==",
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ol/-/ol-6.1.1.tgz",
|
||||
"integrity": "sha512-0dL3i3eJqgOpqIjDKEY3grkeQnjAYfV5L/JCxhOu4SxiaizRwFrFgeas6LILRoxKa03jhQFbut2r2bbgcLGQeA==",
|
||||
"requires": {
|
||||
"pbf": "3.1.0",
|
||||
"@openlayers/pepjs": "^0.5.3",
|
||||
"pbf": "3.2.1",
|
||||
"pixelworks": "1.1.0",
|
||||
"rbush": "2.0.2"
|
||||
"rbush": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"pbf": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.1.0.tgz",
|
||||
"integrity": "sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==",
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
|
||||
"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
|
||||
"requires": {
|
||||
"ieee754": "^1.1.6",
|
||||
"resolve-protobuf-schema": "^2.0.0"
|
||||
"ieee754": "^1.1.12",
|
||||
"resolve-protobuf-schema": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"pixelworks": {
|
||||
@@ -79,16 +53,16 @@
|
||||
"integrity": "sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w=="
|
||||
},
|
||||
"quickselect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-1.1.1.tgz",
|
||||
"integrity": "sha512-qN0Gqdw4c4KGPsBOQafj6yj/PA6c/L63f6CaZ/DCF/xF4Esu3jVmKLUDYxghFx8Kb/O7y9tI7x2RjTSXwdK1iQ=="
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
|
||||
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
|
||||
},
|
||||
"rbush": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rbush/-/rbush-2.0.2.tgz",
|
||||
"integrity": "sha512-XBOuALcTm+O/H8G90b6pzu6nX6v2zCKiFG4BJho8a+bY6AER6t8uQUZdi5bomQc0AprCWhEGa7ncAbbRap0bRA==",
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
|
||||
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
|
||||
"requires": {
|
||||
"quickselect": "^1.0.1"
|
||||
"quickselect": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"resolve-protobuf-schema": {
|
||||
|
@@ -5,16 +5,16 @@
|
||||
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
|
||||
},
|
||||
"dependencies": {
|
||||
"ngx-openlayers": "1.0.0-next.9",
|
||||
"ol": "^5.3.3"
|
||||
"ngx-openlayers": "1.0.0-next.13",
|
||||
"ol": "^6.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/core": "^7.2.0",
|
||||
"@angular/core": "^8.2.0",
|
||||
"ngrx-store-localstorage": "^8.0.0",
|
||||
"@ngrx/effects": "^7.2",
|
||||
"@ngrx/router-store": "^7.2",
|
||||
"@ngrx/store": "^7.2",
|
||||
"@ngrx/effects": "^8.2",
|
||||
"@ngrx/router-store": "^8.2",
|
||||
"@ngrx/store": "^8.2",
|
||||
"tassign": "^1.0.0",
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.56 <0.0.1"
|
||||
"@farmmaps/common": ">=0.0.1-prerelease.90 <0.0.1"
|
||||
}
|
||||
}
|
||||
|
@@ -1,6 +1,8 @@
|
||||
import { Action } from '@ngrx/store';
|
||||
|
||||
import { IMapState,IItemLayer,IQueryState } from '../models';
|
||||
import { IMapState } from '../models/map.state';
|
||||
import { IItemLayer } from '../models/item.layer';
|
||||
import { IQueryState } from '../models/query.state';
|
||||
import { IItem } from '@farmmaps/common';
|
||||
import { Feature } from 'ol';
|
||||
import { Extent } from 'ol/extent';
|
||||
|
@@ -16,12 +16,12 @@ import * as mapReducers from './reducers/map.reducer';
|
||||
import * as mapActions from './actions/map.actions';
|
||||
import * as mapEffects from './effects/map.effects';
|
||||
|
||||
import { IMapState} from './models';
|
||||
import { ISelectedFeatures } from './models';
|
||||
import { IItemLayer } from './models';
|
||||
import { ItemLayer} from './models';
|
||||
import { IQueryState } from './models';
|
||||
import { IPeriodState } from './models';
|
||||
import { IMapState} from './models/map.state';
|
||||
import { ISelectedFeatures } from './models/selected.features';
|
||||
import { IItemLayer } from './models/item.layer';
|
||||
import { ItemLayer} from './models/item.layer';
|
||||
import { IQueryState } from './models/query.state';
|
||||
import { IPeriodState } from './models/period.state';
|
||||
|
||||
// components
|
||||
import { GpsLocation} from './components/aol/gps-location/gps-location.component';
|
||||
@@ -54,7 +54,7 @@ import { LayerListComponent } from './components/aol/layer-list/layer-list.compo
|
||||
import { MetaDataModalComponent } from './components/meta-data-modal/meta-data-modal.component';
|
||||
import { SelectPeriodModalComponent } from './components/select-period-modal/select-period-modal.component';
|
||||
import { MapComponent } from './components/map/map.component';
|
||||
import { MapSearchComponent } from './components/map-search';
|
||||
import { MapSearchComponent } from './components/map-search/map-search.component';
|
||||
import { MapRoutingModule } from './common-map-routing.module';
|
||||
import { LegendComponent } from './components/legend/legend.component';
|
||||
import { LayerVectorImageComponent } from './components/aol/layer-vector-image/layer-vector-image.component';
|
||||
|
@@ -1,68 +1,68 @@
|
||||
import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { MapComponent } from 'ngx-openlayers';
|
||||
import Overlay from 'ol/Overlay';
|
||||
import { fromLonLat, toLonLat } from 'ol/proj';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-gps-location',
|
||||
templateUrl: './gps-location.component.html',
|
||||
styleUrls: ['./gps-location.component.scss']
|
||||
})
|
||||
export class GpsLocation implements OnInit,OnChanges{
|
||||
|
||||
@Input() enable:boolean;
|
||||
public instance: Overlay;
|
||||
@Input() position: Position;
|
||||
@Input() location: number[]=[0,0];
|
||||
@Input() locationTolerance: number = 0;
|
||||
@Input() showHeading: boolean = false;
|
||||
@Input() heading: number = 0;
|
||||
@Input() headingTolerance: number = 0;
|
||||
public locTolerancePixels: number = 0;
|
||||
public path: string = "";
|
||||
public rotate: string = "";
|
||||
private resolution: number = 0;
|
||||
@ViewChild('location') locationElement: ElementRef;
|
||||
|
||||
constructor(private map: MapComponent) {
|
||||
|
||||
}
|
||||
|
||||
recalcLocationTolerance() {
|
||||
this.locTolerancePixels = this.resolution >0? this.locationTolerance / this.resolution:0;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.instance = new Overlay({
|
||||
stopEvent:false,
|
||||
positioning: 'center-center',
|
||||
position: fromLonLat( this.location),
|
||||
element: this.locationElement.nativeElement
|
||||
});
|
||||
var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
|
||||
var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
|
||||
var y1 = Math.round(500 - y);
|
||||
var x1 = Math.round(500 - x);
|
||||
var y2 = Math.round(y1);
|
||||
var x2 = Math.round(500 + x);
|
||||
this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
|
||||
this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
|
||||
this.locTolerancePixels = this.locationTolerance;
|
||||
this.map.instance.addOverlay(this.instance);
|
||||
this.map.instance.getView().on('change:resolution', (evt) => {
|
||||
this.resolution = evt.target.get('resolution');
|
||||
this.recalcLocationTolerance();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes.position && this.instance) {
|
||||
var p = changes.position.currentValue as Position;
|
||||
this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
|
||||
this.locationTolerance = p.coords.accuracy;
|
||||
this.recalcLocationTolerance();
|
||||
this.heading = p.coords.heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { MapComponent } from 'ngx-openlayers';
|
||||
import Overlay from 'ol/Overlay';
|
||||
import { fromLonLat, toLonLat } from 'ol/proj';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-gps-location',
|
||||
templateUrl: './gps-location.component.html',
|
||||
styleUrls: ['./gps-location.component.scss']
|
||||
})
|
||||
export class GpsLocation implements OnInit,OnChanges{
|
||||
|
||||
@Input() enable:boolean;
|
||||
public instance: Overlay;
|
||||
@Input() position: Position;
|
||||
@Input() location: number[]=[0,0];
|
||||
@Input() locationTolerance: number = 0;
|
||||
@Input() showHeading: boolean = false;
|
||||
@Input() heading: number = 0;
|
||||
@Input() headingTolerance: number = 0;
|
||||
public locTolerancePixels: number = 0;
|
||||
public path: string = "";
|
||||
public rotate: string = "";
|
||||
private resolution: number = 0;
|
||||
@ViewChild('location', { static: true }) locationElement: ElementRef;
|
||||
|
||||
constructor(private map: MapComponent) {
|
||||
|
||||
}
|
||||
|
||||
recalcLocationTolerance() {
|
||||
this.locTolerancePixels = this.resolution >0? this.locationTolerance / this.resolution:0;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.instance = new Overlay({
|
||||
stopEvent:false,
|
||||
positioning: 'center-center',
|
||||
position: fromLonLat( this.location),
|
||||
element: this.locationElement.nativeElement
|
||||
});
|
||||
var x = Math.tan(this.headingTolerance * Math.PI / 180)*40;
|
||||
var y = Math.cos(this.headingTolerance * Math.PI / 180) * 40;
|
||||
var y1 = Math.round(500 - y);
|
||||
var x1 = Math.round(500 - x);
|
||||
var y2 = Math.round(y1);
|
||||
var x2 = Math.round(500 + x);
|
||||
this.path = "M " + x2 + " " + y2 + " A 45 45,0,0,0, " + x1 + " " + y1 + " L 493 500 L 507 500 Z";
|
||||
this.rotate = "rotate(" + Math.round(this.heading) + " 500 500)";
|
||||
this.locTolerancePixels = this.locationTolerance;
|
||||
this.map.instance.addOverlay(this.instance);
|
||||
this.map.instance.getView().on('change:resolution', (evt) => {
|
||||
this.resolution = evt.target.get('resolution');
|
||||
this.recalcLocationTolerance();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes.position && this.instance) {
|
||||
var p = changes.position.currentValue as Position;
|
||||
this.instance.setPosition(fromLonLat([p.coords.longitude, p.coords.latitude]));
|
||||
this.locationTolerance = p.coords.accuracy;
|
||||
this.recalcLocationTolerance();
|
||||
this.heading = p.coords.heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -4,7 +4,7 @@ import { LayerVectorComponent, SourceVectorComponent, MapComponent, LayerImageCo
|
||||
import { LayerVectorImageComponent } from '../layer-vector-image/layer-vector-image.component';
|
||||
import { ItemService } from '@farmmaps/common';
|
||||
import { IItem } from '@farmmaps/common';
|
||||
import { ISelectedFeatures } from '../../../models';
|
||||
import { ISelectedFeatures } from '../../../models/selected.features';
|
||||
|
||||
import {Vector} from 'ol/source';
|
||||
import {Feature,Collection} from 'ol';
|
||||
|
@@ -3,8 +3,9 @@ import { HttpClient } from "@angular/common/http";
|
||||
import { LayerVectorComponent, LayerTileComponent, LayerGroupComponent, MapComponent } from 'ngx-openlayers';
|
||||
import { ItemService } from '@farmmaps/common';
|
||||
import { AppConfig } from '@farmmaps/common';
|
||||
import { IItemLayer, ILayerData, IRenderoutputTiles, IRenderoutputImage, IGradientstop, ILayer, IHistogram } from '../../../models';
|
||||
|
||||
import { IItemLayer} from '../../../models/item.layer';
|
||||
import { ILayerData} from '../../../models/layer.data';
|
||||
import { IRenderoutputTiles,IRenderoutputImage,IGradientstop,ILayer,IHistogram} from '../../../models/color.map';
|
||||
import {Extent} from 'ol/extent';
|
||||
import Projection from 'ol/proj/Projection';
|
||||
import * as proj from 'ol/proj';
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import { Component,Input,Output,EventEmitter } from '@angular/core';
|
||||
import { IItemLayer } from '../../../models';
|
||||
import { IItemLayer } from '../../../models/item.layer';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-layer-list',
|
||||
|
@@ -1,59 +1,59 @@
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { Feature } from 'ol';
|
||||
import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
import {IQueryState } from '../../models/query.state';
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-feature-list-container',
|
||||
templateUrl: './feature-list-container.component.html',
|
||||
styleUrls: ['./feature-list-container.component.scss']
|
||||
})
|
||||
export class FeatureListContainerComponent {
|
||||
|
||||
constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() features: Array<Feature>
|
||||
@Input() queryState: IQueryState;
|
||||
|
||||
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent(queryState:IQueryState) {
|
||||
var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
|
||||
var selected = -1;
|
||||
for (var i = 0; i < this.featureLists.length; i++) {
|
||||
if (this.featureLists[i]['forItemType'] == queryState.itemType && this.featureLists[i]['forChild'] && queryState.parentCode && queryState.parentCode != "") {
|
||||
selected = i;
|
||||
break;
|
||||
} else if (this.featureLists[i]['forItemType'] == queryState.itemType) {
|
||||
selected = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (selected >= 0) {
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
|
||||
if (this.featureLists[selected]['collapseSearch'] === true) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractFeatureListComponent>componentRef.instance).features = this.features;
|
||||
(<AbstractFeatureListComponent>componentRef.instance).queryState = this.queryState;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["features"] && changes["features"].currentValue) {
|
||||
if (this.queryState) {
|
||||
this.loadComponent(this.queryState);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { Feature } from 'ol';
|
||||
import { FeatureListComponent,AbstractFeatureListComponent } from '../feature-list/feature-list.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
import {IQueryState } from '../../models/query.state';
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-feature-list-container',
|
||||
templateUrl: './feature-list-container.component.html',
|
||||
styleUrls: ['./feature-list-container.component.scss']
|
||||
})
|
||||
export class FeatureListContainerComponent {
|
||||
|
||||
constructor(private store: Store<mapReducers.State>,private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListComponent) public featureLists: AbstractFeatureListComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() features: Array<Feature>
|
||||
@Input() queryState: IQueryState;
|
||||
|
||||
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent(queryState:IQueryState) {
|
||||
var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default
|
||||
var selected = -1;
|
||||
for (var i = 0; i < this.featureLists.length; i++) {
|
||||
if (this.featureLists[i]['forItemType'] == queryState.itemType && this.featureLists[i]['forChild'] && queryState.parentCode && queryState.parentCode != "") {
|
||||
selected = i;
|
||||
break;
|
||||
} else if (this.featureLists[i]['forItemType'] == queryState.itemType) {
|
||||
selected = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (selected >= 0) {
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
|
||||
if (this.featureLists[selected]['collapseSearch'] === true) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractFeatureListComponent>componentRef.instance).features = this.features;
|
||||
(<AbstractFeatureListComponent>componentRef.instance).queryState = this.queryState;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["features"] && changes["features"].currentValue) {
|
||||
if (this.queryState) {
|
||||
this.loadComponent(this.queryState);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,43 +1,43 @@
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { Feature } from 'ol';
|
||||
import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-feature-list-feature-container',
|
||||
template: `
|
||||
<div>
|
||||
<ng-template fm-map-widget-host></ng-template>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class FeatureListFeatureContainerComponent {
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListFeatureComponent) public featureLists: AbstractFeatureListFeatureComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() feature: Feature;
|
||||
|
||||
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent() {
|
||||
var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default
|
||||
for (var i = 0; i < this.featureLists.length; i++) {
|
||||
if (this.featureLists[i]['forItemType'] == this.feature.get("itemType")) {
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractFeatureListFeatureComponent>componentRef.instance).feature = this.feature;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["feature"] && changes["feature"].currentValue) {
|
||||
this.loadComponent();
|
||||
}
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { Feature } from 'ol';
|
||||
import { AbstractFeatureListFeatureComponent,FeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-feature-list-feature-container',
|
||||
template: `
|
||||
<div>
|
||||
<ng-template fm-map-widget-host></ng-template>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class FeatureListFeatureContainerComponent {
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractFeatureListFeatureComponent) public featureLists: AbstractFeatureListFeatureComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() feature: Feature;
|
||||
|
||||
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent() {
|
||||
var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default
|
||||
for (var i = 0; i < this.featureLists.length; i++) {
|
||||
if (this.featureLists[i]['forItemType'] == this.feature.get("itemType")) {
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.featureLists[i]['constructor'] as any);
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractFeatureListFeatureComponent>componentRef.instance).feature = this.feature;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["feature"] && changes["feature"].currentValue) {
|
||||
this.loadComponent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -8,7 +8,7 @@ import * as mapActions from '../../actions/map.actions';
|
||||
import { Observable, from } from 'rxjs';
|
||||
import { withLatestFrom } from 'rxjs/operators';
|
||||
import { tassign } from 'tassign';
|
||||
import { IQueryState } from '../../models';
|
||||
import { IQueryState } from '../../models/query.state';
|
||||
|
||||
|
||||
@Injectable()
|
||||
|
@@ -1,47 +1,47 @@
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { AbstractItemListItemComponent,ItemListItemComponent } from '../item-list-item/item-list-item.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
import { IItem, IListItem } from '@farmmaps/common';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-item-list-item-container',
|
||||
template: `
|
||||
<div style="height:100%">
|
||||
<ng-template fm-map-widget-host></ng-template>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ItemListItemContainerComponent {
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractItemListItemComponent) public itemComponentList: AbstractItemListItemComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() item: IListItem;
|
||||
|
||||
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent() {
|
||||
var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default
|
||||
for (var i = 0; i < this.itemComponentList.length; i++) {
|
||||
if (this.itemComponentList[i]['forItemType'] &&
|
||||
this.itemComponentList[i]['forItemType'].indexOf(this.item.itemType) >= 0 &&
|
||||
this.itemComponentList[i]['forSourceTask'] &&
|
||||
this.itemComponentList[i]['forSourceTask'].indexOf(this.item.sourceTask) >= 0 )
|
||||
{
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.itemComponentList[i]['constructor'] as any);
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractItemListItemComponent>componentRef.instance).item = this.item;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["item"] && changes["item"].currentValue) {
|
||||
this.loadComponent();
|
||||
}
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { AbstractItemListItemComponent,ItemListItemComponent } from '../item-list-item/item-list-item.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
import { IItem, IListItem } from '@farmmaps/common';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-item-list-item-container',
|
||||
template: `
|
||||
<div style="height:100%">
|
||||
<ng-template fm-map-widget-host></ng-template>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ItemListItemContainerComponent {
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractItemListItemComponent) public itemComponentList: AbstractItemListItemComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() item: IListItem;
|
||||
|
||||
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent() {
|
||||
var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default
|
||||
for (var i = 0; i < this.itemComponentList.length; i++) {
|
||||
if (this.itemComponentList[i]['forItemType'] &&
|
||||
this.itemComponentList[i]['forItemType'].indexOf(this.item.itemType) >= 0 &&
|
||||
this.itemComponentList[i]['forSourceTask'] &&
|
||||
this.itemComponentList[i]['forSourceTask'].indexOf(this.item.sourceTask) >= 0 )
|
||||
{
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.itemComponentList[i]['constructor'] as any);
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractItemListItemComponent>componentRef.instance).item = this.item;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["item"] && changes["item"].currentValue) {
|
||||
this.loadComponent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div *ngIf="items;let items" class="widget-container">
|
||||
<div *ngIf="items;let items" class="widget-container pt-0">
|
||||
<div class="widget" *ngFor="let item of items" (click)="handleItemClick(item)">
|
||||
<div class="content">
|
||||
<fm-map-item-list-item-container [item]="item" class="item-container"></fm-map-item-list-item-container>
|
||||
|
@@ -1,14 +1,10 @@
|
||||
import { Component, Input, Injectable } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Feature } from 'ol';
|
||||
import { Store } from '@ngrx/store';
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import { commonReducers,ItemTypeService, IItem, Item,IListItem } from '@farmmaps/common';
|
||||
import { commonReducers,ItemTypeService,IListItem } from '@farmmaps/common';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { Observable, from } from 'rxjs';
|
||||
import { withLatestFrom } from 'rxjs/operators';
|
||||
import { tassign } from 'tassign';
|
||||
import { IQueryState } from '../../models';
|
||||
|
||||
|
||||
@Injectable()
|
||||
|
@@ -1,4 +1,4 @@
|
||||
<div *ngIf="widgets;let widgets" class="widget-container">
|
||||
<div *ngIf="widgets;let widgets" class="widget-container pt-0">
|
||||
<div class="widget" *ngFor="let widget of widgets">
|
||||
<div class="content">
|
||||
<ng-template #widgetTemplate></ng-template>
|
||||
|
@@ -1,39 +1,41 @@
|
||||
<table class="container" *ngIf="layer">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="title">
|
||||
<h4 *ngIf="showTitle">{{layer.name}}</h4>
|
||||
<b *ngIf="layer.unit">({{layer.unit}})</b>
|
||||
</div>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<div class="title" *ngIf="histogramenabled">
|
||||
<h4>{{histogram}}</h4>
|
||||
<b *ngIf="histogramunit">({{histogramunit}})</b>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index ">
|
||||
<td class="legend-items"><div [style.background-color]="getHex(entry.color)"></div></td>
|
||||
<td class="legend-items-text">{{entry.value | number:'1.0-2'}} {{legendunit}}</td>
|
||||
<!--<td class="histogram-items-text"><span *ngIf="histogramenabled">{{entry.value}} {{histogramunit}}</span></td>
|
||||
<td class="histogram-items">
|
||||
<div *ngIf="histogramenabled" [style.background-color]="getHex(selectedColorMap.noValue)" [style.width]="getPart(selectedColorMap, entry)">
|
||||
</div>
|
||||
</td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4"></td>
|
||||
</tr>
|
||||
<!--<tr>
|
||||
<td>
|
||||
<i class="fas fa-chart-bar" (click)="onClickHistoGram()"></i>
|
||||
</td>
|
||||
<td colspan="3"></td>
|
||||
</tr>-->
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<table class="container" *ngIf="showLegend()">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="title">
|
||||
<h4 *ngIf="showTitle">{{layer.name}}</h4>
|
||||
<b *ngIf="layer.unit">({{layer.unit}})</b>
|
||||
</div>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<div class="title" *ngIf="histogramenabled">
|
||||
<h4>{{histogram}}</h4>
|
||||
<b *ngIf="histogramunit">({{histogramunit}})</b>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index ">
|
||||
<td class="legend-items"><span [style.background-color]="getHex(entry.color)" class="color"></span></td>
|
||||
<td class="legend-items-text"><span *ngIf="!entry.label">{{entry.value | number:'1.0-2'}} {{legendunit}}</span><span *ngIf="entry.label">{{entry.label}}</span></td>
|
||||
<td class="histogram-items">
|
||||
<div *ngIf="showHistogram()">
|
||||
<span class="bar" [style.background-color]="getHex(entry.color)" [style.width]="getPart(layer.renderer, i)">
|
||||
</span>
|
||||
<span class="bar-label">{{getLabel(layer.renderer,i)}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4"></td>
|
||||
</tr>
|
||||
<!--<tr *ngIf="layer.renderer.colorMap.entries.length > 0">
|
||||
<td>
|
||||
<i title="Show histogram" class="fa fa-bar-chart fa-rotate-90" (click)="onClickHistoGram()"></i>
|
||||
</td>
|
||||
<td colspan="3"></td>
|
||||
</tr>-->
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@@ -1,58 +1,67 @@
|
||||
|
||||
.container {
|
||||
max-width: 40em;
|
||||
border-spacing: 0.5em;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 7px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.title > h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.legend-items {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
padding: 0.1em;
|
||||
border-style: none;
|
||||
border-width: 0.05em;
|
||||
}
|
||||
|
||||
.legend-items div {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.legend-items-text {
|
||||
max-width: 20em;
|
||||
padding-left: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.histogram-items {
|
||||
width: 5em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.histogram-items > div {
|
||||
height: 1em;
|
||||
border-style: solid;
|
||||
border-width: 0.05em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.histogram-items-text {
|
||||
max-width: 20em;
|
||||
font-size: 14pt;
|
||||
padding-left: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 40em;
|
||||
border-spacing: 0.5em;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 7px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.title > h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
span.color {
|
||||
display:inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.legend-items {
|
||||
padding: 0.1em;
|
||||
border-style: none;
|
||||
border-width: 0.05em;
|
||||
}
|
||||
|
||||
.legend-items div {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.legend-items-text {
|
||||
max-width: 20em;
|
||||
padding-left: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.histogram-items {
|
||||
width: 100%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
|
||||
.histogram-items-text {
|
||||
max-width: 20em;
|
||||
font-size: 14pt;
|
||||
padding-left: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display:inline-block;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
margin-left:0.3em;
|
||||
font-size:0.7em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
@@ -1,66 +1,83 @@
|
||||
import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
|
||||
import { IColorMap, IColor, IColorEntry,ILayer } from '../../models';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-layer-legend',
|
||||
templateUrl: './legend.component.html',
|
||||
styleUrls: ['./legend.component.scss']
|
||||
})
|
||||
export class LegendComponent implements OnInit,AfterViewInit {
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
}
|
||||
|
||||
@Input()
|
||||
layer: ILayer;
|
||||
|
||||
@Input()
|
||||
legend: string;
|
||||
|
||||
@Input()
|
||||
histogram: string;
|
||||
|
||||
@Input()
|
||||
showTitle: boolean = true;
|
||||
|
||||
@Input()
|
||||
histogramenabled: boolean;
|
||||
|
||||
@Input()
|
||||
legendunit: string;
|
||||
|
||||
@Input()
|
||||
histogramunit: string;
|
||||
|
||||
|
||||
onClickHistoGram(): void {
|
||||
this.histogramenabled = !this.histogramenabled;
|
||||
}
|
||||
|
||||
public getHex(color: IColor): string {
|
||||
return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
|
||||
}
|
||||
|
||||
public componentToHex(c: number): string {
|
||||
const hex = c.toString(16);
|
||||
return hex.length === 1 ? `0${hex}` : hex;
|
||||
}
|
||||
|
||||
private getPart(colorMap: IColorMap, colorEntry: IColorEntry): string {
|
||||
let sumOfValue = colorMap.entries.reduce((sum, item) => sum + item.value, 0);
|
||||
let part = ((colorEntry.value / sumOfValue) * 100) + "%";
|
||||
|
||||
return part;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
import { Component, OnInit, Input,AfterViewInit } from '@angular/core';
|
||||
import { IColorMap, IColor, IColorEntry,ILayer, IRenderer } from '../../models/color.map';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-layer-legend',
|
||||
templateUrl: './legend.component.html',
|
||||
styleUrls: ['./legend.component.scss']
|
||||
})
|
||||
export class LegendComponent implements OnInit,AfterViewInit {
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
}
|
||||
|
||||
@Input()
|
||||
layer: ILayer;
|
||||
|
||||
@Input()
|
||||
legend: string;
|
||||
|
||||
@Input()
|
||||
histogram: string;
|
||||
|
||||
@Input()
|
||||
showTitle: boolean = true;
|
||||
|
||||
@Input()
|
||||
histogramenabled: boolean;
|
||||
|
||||
@Input()
|
||||
legendunit: string;
|
||||
|
||||
@Input()
|
||||
histogramunit: string;
|
||||
|
||||
|
||||
onClickHistoGram(): void {
|
||||
this.histogramenabled = !this.histogramenabled;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
public getHex(color: IColor): string {
|
||||
return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
|
||||
}
|
||||
|
||||
private componentToHex(c: number): string {
|
||||
const hex = c.toString(16);
|
||||
return hex.length === 1 ? `0${hex}` : hex;
|
||||
}
|
||||
|
||||
public getPart(renderer: IRenderer, index: number): string {
|
||||
let max = renderer.band.histogram.entries.reduce((max, entry) => entry.freqency > max ? entry.freqency : max, 0);
|
||||
let scale = 75 / max;
|
||||
let part = (renderer.band.histogram.entries[index].freqency * scale) + "%";
|
||||
|
||||
return part;
|
||||
}
|
||||
|
||||
public getLabel(renderer: IRenderer, index: number): string {
|
||||
let scale = 100 / renderer.band.histogram.entries.reduce((sum, entry) => sum + entry.freqency, 0);
|
||||
let percent = renderer.band.histogram.entries[index].freqency * scale;
|
||||
return percent < 0.1 ? "" : percent.toFixed(1) + " %";
|
||||
}
|
||||
|
||||
showLegend(): boolean {
|
||||
return this.layer && this.layer.renderer && this.layer.renderer.renderType != "MULTIBAND_COLOR";
|
||||
}
|
||||
|
||||
showHistogram(): boolean {
|
||||
return this.histogramenabled && this.layer.renderer.band.histogram.entries && this.layer.renderer.band.histogram.entries.length > 0 && this.layer.renderer.colorMap.colormapType == "minmax";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@@ -1 +0,0 @@
|
||||
export * from './map-search.component';
|
@@ -1,178 +1,178 @@
|
||||
import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
|
||||
import { Observable , of } from 'rxjs';
|
||||
import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
|
||||
import { TypeaheadService, TimespanService } from '@farmmaps/common';
|
||||
import { IQueryState,IPeriodState } from '../../models';
|
||||
import { fillProperties } from '@angular/core/src/util/property';
|
||||
import { tassign } from 'tassign';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-map-search',
|
||||
templateUrl: './map-search.component.html',
|
||||
styleUrls: ['./map-search.component.scss']
|
||||
})
|
||||
export class MapSearchComponent {
|
||||
|
||||
@ViewChild('searchText') searchText;
|
||||
@Input() clearEnabled: boolean
|
||||
@Input() set collapsed(collapsed: boolean) {
|
||||
this.collapsedLocal = collapsed;
|
||||
if (collapsed) this.searchText.nativeElement.blur();
|
||||
}
|
||||
@Input() set searchMinified(minified: boolean) {
|
||||
this.searchMinifiedLocal = minified;
|
||||
}
|
||||
@Input() period: IPeriodState
|
||||
@Output() onSearch = new EventEmitter<IQueryState>();
|
||||
@Output() onClear = new EventEmitter<any>();
|
||||
@Output() onSearchCollapse = new EventEmitter<any>();
|
||||
@Output() onSearchExpand = new EventEmitter<any>();
|
||||
@Output() onToggleMenu = new EventEmitter<any>();
|
||||
@Output() onOpenModal = new EventEmitter<string>();
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Input() openedModalName: string;
|
||||
@Input() set filterOptions(filterOptions: IQueryState) {
|
||||
if (filterOptions && filterOptions.query && filterOptions.query.length > 0) {
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.disabled = true;
|
||||
}
|
||||
this.filterOptionsLocal = tassign(this.filterOptionsLocal, { tags: filterOptions.tags, query: filterOptions.query,bbox:filterOptions.bbox });
|
||||
if (filterOptions.tags) {
|
||||
this.searchTextLocal = { name: filterOptions.tags };
|
||||
} else {
|
||||
this.searchTextLocal = { name: filterOptions.query };
|
||||
}
|
||||
if (this.dateFilter) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
}
|
||||
}
|
||||
|
||||
public collapsedLocal: boolean = true;
|
||||
public searchMinifiedLocal: boolean = false;
|
||||
public filterOptionsLocal: IQueryState;
|
||||
private extent: number[];
|
||||
public searchTextLocal: any;
|
||||
public searchTextLocalOutput: string;
|
||||
public dateFilter: boolean = true;
|
||||
public startDate: Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
|
||||
public endDate: Date = new Date(Date.now());
|
||||
public startEndCaption: string = this.timespanService.getCaption(this.startDate, this.endDate, 4);
|
||||
|
||||
searching = false;
|
||||
searchFailed = false;
|
||||
hideSearchingWhenUnsubscribed = new Observable(() => () => this.searching = false);
|
||||
|
||||
public disabled: boolean = true;
|
||||
|
||||
constructor(private typeaheadService: TypeaheadService, private timespanService: TimespanService) {
|
||||
this.filterOptionsLocal = { query: "", tags: "", startDate: null, endDate: null, bboxFilter: true, itemType: null, itemCode:null,level:0,parentCode:null,bbox:[] };
|
||||
}
|
||||
|
||||
search = (text$: Observable<string>) =>
|
||||
text$.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
tap(() => this.searching = true),
|
||||
switchMap(term => term.length < 1 ? of([]) :
|
||||
this.typeaheadService.getSearchTypeaheadItems(term).pipe(
|
||||
tap(() => this.searchFailed = false),
|
||||
catchError(() => {
|
||||
this.searchFailed = true;
|
||||
return of([]);
|
||||
})) ),
|
||||
tap(() => this.searching = false),
|
||||
merge(this.hideSearchingWhenUnsubscribed));
|
||||
|
||||
formatter = (x: { name: string }) => x.name;
|
||||
|
||||
handleSearch(event) {
|
||||
this.filterOptionsLocal.tags = null;
|
||||
this.filterOptionsLocal.itemType = null;
|
||||
this.filterOptionsLocal.itemCode = null;
|
||||
this.filterOptionsLocal.parentCode = null;
|
||||
this.filterOptionsLocal.query = this.searchTextLocalOutput;
|
||||
if (this.dateFilter) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
}
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
handleOpenSelectPeriodModal(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
this.onOpenModal.emit('selectPeriodModal');
|
||||
}
|
||||
|
||||
handleCloseModal() {
|
||||
this.onCloseModal.emit({});
|
||||
}
|
||||
|
||||
handleSelect(event) {
|
||||
event.preventDefault();
|
||||
this.filterOptionsLocal.query = null;
|
||||
this.filterOptionsLocal.itemType = null;
|
||||
this.filterOptionsLocal.itemCode = null;
|
||||
this.filterOptionsLocal.parentCode = null;
|
||||
this.filterOptionsLocal.tags = event.item.name;
|
||||
if (this.dateFilter) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
}
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
this.searchTextLocal = { name: this.filterOptionsLocal.tags };
|
||||
}
|
||||
|
||||
handleSelectPeriod(event: { startDate: Date, endDate: Date }) {
|
||||
this.startDate = event.startDate;
|
||||
this.endDate = event.endDate;
|
||||
this.handleCloseModal();
|
||||
this.startEndCaption = this.timespanService.getCaption(event.startDate, event.endDate, 4);
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
handleChangeEnableDateFilter(enabled) {
|
||||
this.dateFilter = enabled;
|
||||
if (enabled) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
} else {
|
||||
this.filterOptionsLocal.startDate = null;
|
||||
this.filterOptionsLocal.endDate = null;
|
||||
}
|
||||
if(this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
handleChangeEnableBBOXFilter(enabled) {
|
||||
this.filterOptionsLocal.bboxFilter = enabled;
|
||||
if (this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.onToggleMenu.emit({});
|
||||
}
|
||||
|
||||
handleFocus(event) {
|
||||
this.onSearchExpand.emit({});
|
||||
}
|
||||
|
||||
handleChange(event: string) {
|
||||
this.searchTextLocalOutput = event;
|
||||
if (event && event.length == 1) {
|
||||
this.onSearchExpand.emit({});
|
||||
}
|
||||
if (event && event.length > 0)
|
||||
this.disabled = false;
|
||||
else
|
||||
this.disabled = true;
|
||||
}
|
||||
|
||||
handleClearClick(event) {
|
||||
this.onClear.emit({});
|
||||
}
|
||||
}
|
||||
|
||||
import { Component, Input, Output, OnInit, EventEmitter, SimpleChanges, OnChanges, ViewChild } from '@angular/core';
|
||||
import { Observable , of } from 'rxjs';
|
||||
import { debounceTime,distinctUntilChanged,tap,switchMap,merge,catchError} from 'rxjs/operators';
|
||||
import { TypeaheadService, TimespanService } from '@farmmaps/common';
|
||||
import { IQueryState } from '../../models/query.state';
|
||||
import { IPeriodState } from '../../models/period.state';
|
||||
import { tassign } from 'tassign';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-map-search',
|
||||
templateUrl: './map-search.component.html',
|
||||
styleUrls: ['./map-search.component.scss']
|
||||
})
|
||||
export class MapSearchComponent {
|
||||
|
||||
@ViewChild('searchText', { static: true }) searchText;
|
||||
@Input() clearEnabled: boolean
|
||||
@Input() set collapsed(collapsed: boolean) {
|
||||
this.collapsedLocal = collapsed;
|
||||
if (collapsed) this.searchText.nativeElement.blur();
|
||||
}
|
||||
@Input() set searchMinified(minified: boolean) {
|
||||
this.searchMinifiedLocal = minified;
|
||||
}
|
||||
@Input() period: IPeriodState
|
||||
@Output() onSearch = new EventEmitter<IQueryState>();
|
||||
@Output() onClear = new EventEmitter<any>();
|
||||
@Output() onSearchCollapse = new EventEmitter<any>();
|
||||
@Output() onSearchExpand = new EventEmitter<any>();
|
||||
@Output() onToggleMenu = new EventEmitter<any>();
|
||||
@Output() onOpenModal = new EventEmitter<string>();
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Input() openedModalName: string;
|
||||
@Input() set filterOptions(filterOptions: IQueryState) {
|
||||
if (filterOptions && filterOptions.query && filterOptions.query.length > 0) {
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.disabled = true;
|
||||
}
|
||||
this.filterOptionsLocal = tassign(this.filterOptionsLocal, { tags: filterOptions.tags, query: filterOptions.query,bbox:filterOptions.bbox });
|
||||
if (filterOptions.tags) {
|
||||
this.searchTextLocal = { name: filterOptions.tags };
|
||||
} else {
|
||||
this.searchTextLocal = { name: filterOptions.query };
|
||||
}
|
||||
if (this.dateFilter) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
}
|
||||
}
|
||||
|
||||
public collapsedLocal: boolean = true;
|
||||
public searchMinifiedLocal: boolean = false;
|
||||
public filterOptionsLocal: IQueryState;
|
||||
private extent: number[];
|
||||
public searchTextLocal: any;
|
||||
public searchTextLocalOutput: string;
|
||||
public dateFilter: boolean = true;
|
||||
public startDate: Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
|
||||
public endDate: Date = new Date(Date.now());
|
||||
public startEndCaption: string = this.timespanService.getCaption(this.startDate, this.endDate, 4);
|
||||
|
||||
searching = false;
|
||||
searchFailed = false;
|
||||
hideSearchingWhenUnsubscribed = new Observable(() => () => this.searching = false);
|
||||
|
||||
public disabled: boolean = true;
|
||||
|
||||
constructor(private typeaheadService: TypeaheadService, private timespanService: TimespanService) {
|
||||
this.filterOptionsLocal = { query: "", tags: "", startDate: null, endDate: null, bboxFilter: true, itemType: null, itemCode:null,level:0,parentCode:null,bbox:[] };
|
||||
}
|
||||
|
||||
search = (text$: Observable<string>) =>
|
||||
text$.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
tap(() => this.searching = true),
|
||||
switchMap(term => term.length < 1 ? of([]) :
|
||||
this.typeaheadService.getSearchTypeaheadItems(term).pipe(
|
||||
tap(() => this.searchFailed = false),
|
||||
catchError(() => {
|
||||
this.searchFailed = true;
|
||||
return of([]);
|
||||
})) ),
|
||||
tap(() => this.searching = false),
|
||||
merge(this.hideSearchingWhenUnsubscribed));
|
||||
|
||||
formatter = (x: { name: string }) => x.name;
|
||||
|
||||
handleSearch(event) {
|
||||
this.filterOptionsLocal.tags = null;
|
||||
this.filterOptionsLocal.itemType = null;
|
||||
this.filterOptionsLocal.itemCode = null;
|
||||
this.filterOptionsLocal.parentCode = null;
|
||||
this.filterOptionsLocal.query = this.searchTextLocalOutput;
|
||||
if (this.dateFilter) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
}
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
handleOpenSelectPeriodModal(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
this.onOpenModal.emit('selectPeriodModal');
|
||||
}
|
||||
|
||||
handleCloseModal() {
|
||||
this.onCloseModal.emit({});
|
||||
}
|
||||
|
||||
handleSelect(event) {
|
||||
event.preventDefault();
|
||||
this.filterOptionsLocal.query = null;
|
||||
this.filterOptionsLocal.itemType = null;
|
||||
this.filterOptionsLocal.itemCode = null;
|
||||
this.filterOptionsLocal.parentCode = null;
|
||||
this.filterOptionsLocal.tags = event.item.name;
|
||||
if (this.dateFilter) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
}
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
this.searchTextLocal = { name: this.filterOptionsLocal.tags };
|
||||
}
|
||||
|
||||
handleSelectPeriod(event: { startDate: Date, endDate: Date }) {
|
||||
this.startDate = event.startDate;
|
||||
this.endDate = event.endDate;
|
||||
this.handleCloseModal();
|
||||
this.startEndCaption = this.timespanService.getCaption(event.startDate, event.endDate, 4);
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
handleChangeEnableDateFilter(enabled) {
|
||||
this.dateFilter = enabled;
|
||||
if (enabled) {
|
||||
this.filterOptionsLocal.startDate = this.startDate;
|
||||
this.filterOptionsLocal.endDate = this.endDate;
|
||||
} else {
|
||||
this.filterOptionsLocal.startDate = null;
|
||||
this.filterOptionsLocal.endDate = null;
|
||||
}
|
||||
if(this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
handleChangeEnableBBOXFilter(enabled) {
|
||||
this.filterOptionsLocal.bboxFilter = enabled;
|
||||
if (this.filterOptionsLocal.query || this.filterOptionsLocal.tags)
|
||||
this.onSearch.emit(this.filterOptionsLocal);
|
||||
}
|
||||
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.onToggleMenu.emit({});
|
||||
}
|
||||
|
||||
handleFocus(event) {
|
||||
this.onSearchExpand.emit({});
|
||||
}
|
||||
|
||||
handleChange(event: string) {
|
||||
this.searchTextLocalOutput = event;
|
||||
if (event && event.length == 1) {
|
||||
this.onSearchExpand.emit({});
|
||||
}
|
||||
if (event && event.length > 0)
|
||||
this.disabled = false;
|
||||
else
|
||||
this.disabled = true;
|
||||
}
|
||||
|
||||
handleClearClick(event) {
|
||||
this.onClear.emit({});
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -1,303 +1,307 @@
|
||||
import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
|
||||
import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
|
||||
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
|
||||
import { Store } from '@ngrx/store';
|
||||
//import { proj,Map } from 'openlayers';
|
||||
|
||||
// Map
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { IMapState,ISelectedFeatures,IItemLayer, ItemLayer,IQueryState,IPeriodState } from '../../models';
|
||||
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
|
||||
import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
|
||||
import { StateSerializerService } from '../../services/state-serializer.service';
|
||||
import { GeolocationService} from '../../services/geolocation.service';
|
||||
|
||||
// AppCommon
|
||||
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
|
||||
import { IItemType, IItem } from '@farmmaps/common';
|
||||
import {commonReducers} from '@farmmaps/common';
|
||||
import {commonActions} from '@farmmaps/common';
|
||||
|
||||
import {Feature} from 'ol';
|
||||
import {Extent,createEmpty,extend } from 'ol/extent';
|
||||
import {transform} from 'ol/proj';
|
||||
import { query } from '@angular/animations';
|
||||
import { tassign } from 'tassign';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-map',
|
||||
templateUrl: './map.component.html',
|
||||
styleUrls: ['./map.component.scss']
|
||||
})
|
||||
|
||||
export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
title: string = 'Map';
|
||||
public openedModalName: Observable<string>;
|
||||
public itemTypes: Observable<{ [id: string]: IItemType }>;
|
||||
public mapState: Observable<IMapState>;
|
||||
public features: Observable<Array<Feature>>;
|
||||
public overlayLayers: Observable<Array<IItemLayer>>;
|
||||
public selectedOverlayLayer: Observable<IItemLayer>;
|
||||
public selectedItemLayer: Observable<IItemLayer>;
|
||||
public baseLayers: Observable<Array<IItemLayer>>;
|
||||
public selectedBaseLayer: Observable<IItemLayer>;
|
||||
public projection: Observable<string>;
|
||||
public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
|
||||
public droppedFile: Subject<IDroppedFile> = new Subject<IDroppedFile>();
|
||||
private paramSub: Subscription;
|
||||
private itemTypeSub: Subscription;
|
||||
private mapStateSub: Subscription;
|
||||
private queryStateSub: Subscription;
|
||||
public parentCode: Observable<string>;
|
||||
public panelVisible: Observable<boolean>;
|
||||
public panelCollapsed: Observable<boolean>;
|
||||
public selectedFeature: Observable<Feature>;
|
||||
public selectedItem: Observable<IItem>;
|
||||
public queryState: Observable<IQueryState>;
|
||||
public period: Observable<IPeriodState>;
|
||||
public clearEnabled: Observable<boolean>;
|
||||
public searchCollapsed: Observable<boolean>;
|
||||
public searchMinified: Observable<boolean>;
|
||||
public menuVisible: Observable<boolean>;
|
||||
public query: Observable<IQueryState>;
|
||||
public position: Observable<Position>;
|
||||
public baseLayersCollapsed:boolean = true;
|
||||
public overlayLayersCollapsed: boolean = true;
|
||||
public extent: Observable<Extent>;
|
||||
@ViewChild('map') map;
|
||||
|
||||
constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
|
||||
}
|
||||
|
||||
@HostListener('document:keyup', ['$event'])
|
||||
escapeClose(event: KeyboardEvent) {
|
||||
let x = event.keyCode;
|
||||
if (x === 27) {
|
||||
this.handleCloseModal()
|
||||
}
|
||||
}
|
||||
|
||||
handleOpenModal(modalName: string) {
|
||||
this.store.dispatch(new commonActions.OpenModal(modalName));
|
||||
}
|
||||
|
||||
handleCloseModal() {
|
||||
this.store.dispatch(new commonActions.CloseModal());
|
||||
}
|
||||
|
||||
handleFileDropped(droppedFile: IDroppedFile) {
|
||||
this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
|
||||
}
|
||||
|
||||
handleFeaturesSelected(feature: Feature) {
|
||||
if (feature) {
|
||||
let newQuery = tassign(mapReducers.initialQueryState, { itemCode: feature.get('code') });
|
||||
this.store.dispatch(new mapActions.DoQuery(newQuery));
|
||||
}
|
||||
}
|
||||
|
||||
handleSearch(queryState: IQueryState) {
|
||||
this.store.dispatch(new mapActions.DoQuery(queryState));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.dispatch(new mapActions.Init());
|
||||
this.selectedFeatures.next({x:0,y:0,features:[]});
|
||||
this.mapState = this.store.select(mapReducers.selectGetMapState);
|
||||
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
|
||||
this.features = this.store.select(mapReducers.selectGetFeatures);
|
||||
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
|
||||
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
|
||||
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
|
||||
this.projection = this.store.select(mapReducers.selectGetProjection);
|
||||
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
|
||||
this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
|
||||
this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
|
||||
this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
|
||||
this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
|
||||
this.queryState = this.store.select(mapReducers.selectGetQueryState);
|
||||
this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
|
||||
this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
|
||||
this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
|
||||
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
|
||||
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
|
||||
this.query = this.store.select(mapReducers.selectGetQuery);
|
||||
this.extent = this.store.select(mapReducers.selectGetExtent);
|
||||
this.selectedFeatures.next(null);
|
||||
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
|
||||
this.period = this.store.select(mapReducers.selectGetPeriod);
|
||||
this.position = this.geolocationService.getCurrentPosition();
|
||||
|
||||
this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
|
||||
this.replaceUrl(state[0], state[1], true);
|
||||
});
|
||||
this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
|
||||
this.replaceUrl(state[1], state[0],false);
|
||||
});
|
||||
}
|
||||
|
||||
private stateSetCount: number = 0;
|
||||
private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
|
||||
private lastMapState: string = "";
|
||||
ngAfterViewInit() {
|
||||
this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
|
||||
//console.log("Param sub");
|
||||
var newMapState: IMapState = null;
|
||||
var newQueryState: IQueryState = null;
|
||||
var mapStateChanged = false;
|
||||
var queryStateChanged = false;
|
||||
if (params.has("xCenter") && params.has("yCenter")) {
|
||||
let xCenter = parseFloat(params.get("xCenter"));
|
||||
let yCenter = parseFloat(params.get("yCenter"));
|
||||
let zoom = parseFloat(params.get("zoom"));
|
||||
let rotation = parseFloat(params.get("rotation"));
|
||||
let baseLayer = params.get("baseLayer")?params.get("baseLayer"):"";
|
||||
newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
|
||||
mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
|
||||
this.lastMapState = JSON.stringify(newMapState);
|
||||
}
|
||||
if (params.has("queryState")) {
|
||||
let queryState = params.get("queryState");
|
||||
newQueryState = tassign(mapReducers.initialQueryState);
|
||||
if (queryState != "") {
|
||||
newQueryState = this.serializeService.deserialize(queryState);
|
||||
}
|
||||
queryStateChanged = this.lastQueryState != queryState;
|
||||
this.lastQueryState = queryState;
|
||||
}
|
||||
|
||||
if (mapStateChanged && queryStateChanged) {
|
||||
//console.log("Both states");
|
||||
this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
|
||||
} else if (mapStateChanged) {
|
||||
//console.log("Map state");
|
||||
this.store.dispatch(new mapActions.SetMapState(newMapState));
|
||||
} else if (queryStateChanged) {
|
||||
//console.log("Query state");
|
||||
this.store.dispatch(new mapActions.SetQueryState(newQueryState));
|
||||
}
|
||||
this.stateSetCount += 1;
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.map.instance.updateSize();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
handleSearchCollapse(event) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
|
||||
handleSearchExpand(event) {
|
||||
this.store.dispatch(new mapActions.ExpandSearch());
|
||||
}
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.store.dispatch(new mapActions.ToggleMenu());
|
||||
}
|
||||
|
||||
handleToggleBaseLayers(event:MouseEvent) {
|
||||
this.baseLayersCollapsed = !this.baseLayersCollapsed;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleToggleOverlayLayers(event: MouseEvent) {
|
||||
this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handlePredefinedQuery(event: MouseEvent, query: any) {
|
||||
event.preventDefault();
|
||||
var queryState = tassign(mapReducers.initialQueryState, query);
|
||||
this.store.dispatch(new mapActions.DoQuery(queryState));
|
||||
}
|
||||
|
||||
handleTrijntjeClick(event: MouseEvent, query: any) {
|
||||
event.preventDefault();
|
||||
var queryState = tassign(mapReducers.initialQueryState, query);
|
||||
var mapState = JSON.parse(this.lastMapState);
|
||||
this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
|
||||
}
|
||||
|
||||
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
|
||||
console.debug(`Replace url : Baselayer(${mapState.baseLayerCode}) Querystate(${this.serializeService.serialize(queryState)})`);
|
||||
let parts =["."];
|
||||
parts.push(mapState.xCenter.toFixed(5));
|
||||
parts.push(mapState.yCenter.toFixed(5));
|
||||
parts.push( mapState.zoom.toFixed(0));
|
||||
parts.push( mapState.rotation.toFixed(2));
|
||||
if(mapState.baseLayerCode!="") {
|
||||
parts.push(mapState.baseLayerCode);
|
||||
parts.push( this.serializeService.serialize(queryState));
|
||||
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
|
||||
}
|
||||
}
|
||||
|
||||
handleOnMoveEnd(event) {
|
||||
var map = event.map;
|
||||
var view = map.getView();
|
||||
var rotation = view.getRotation();
|
||||
var zoom = view.getZoom();
|
||||
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
|
||||
var extent = view.calculateExtent(this.map.instance.getSize());
|
||||
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
|
||||
let state = { mapState: mapState, extent: extent };
|
||||
let source = from([state]);
|
||||
source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
|
||||
if (mapState && baselayer && queryState) {
|
||||
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
|
||||
this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));
|
||||
this.store.dispatch(new mapActions.SetViewExtent(state.extent));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleOnMouseDown(event: MouseEvent) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
|
||||
handleOnDownload(event) {
|
||||
|
||||
}
|
||||
|
||||
handleClearSearch(event) {
|
||||
this.store.dispatch(new commonActions.Escape(true, false));
|
||||
}
|
||||
|
||||
handleOnDelete(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
|
||||
}
|
||||
|
||||
handleOnToggleVisibility(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
|
||||
}
|
||||
|
||||
handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
|
||||
this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
|
||||
}
|
||||
|
||||
handleZoomToExtent(itemLayer: IItemLayer) {
|
||||
var extent = createEmpty();
|
||||
extend(extent, itemLayer.layer.getExtent());
|
||||
if (extent) {
|
||||
this.store.dispatch(new mapActions.SetExtent(extent));
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectBaseLayer(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
|
||||
}
|
||||
|
||||
handleSelectOverlayLayer(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.paramSub.unsubscribe();
|
||||
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
|
||||
if (this.mapStateSub) this.mapStateSub.unsubscribe();
|
||||
if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
|
||||
}
|
||||
import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
|
||||
import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
|
||||
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
|
||||
import { Store } from '@ngrx/store';
|
||||
//import { proj,Map } from 'openlayers';
|
||||
|
||||
// Map
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { IMapState} from '../../models/map.state';
|
||||
import { ISelectedFeatures } from '../../models/selected.features';
|
||||
import { IItemLayer } from '../../models/item.layer';
|
||||
import { IQueryState } from '../../models/query.state';
|
||||
import { IPeriodState } from '../../models/period.state';
|
||||
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
|
||||
import { IMetaData } from '../meta-data-modal/meta-data-modal.component';
|
||||
import { StateSerializerService } from '../../services/state-serializer.service';
|
||||
import { GeolocationService} from '../../services/geolocation.service';
|
||||
|
||||
// AppCommon
|
||||
import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
|
||||
import { IItemType, IItem } from '@farmmaps/common';
|
||||
import {commonReducers} from '@farmmaps/common';
|
||||
import {commonActions} from '@farmmaps/common';
|
||||
|
||||
import {Feature} from 'ol';
|
||||
import {Extent,createEmpty,extend } from 'ol/extent';
|
||||
import {transform} from 'ol/proj';
|
||||
import { query } from '@angular/animations';
|
||||
import { tassign } from 'tassign';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-map',
|
||||
templateUrl: './map.component.html',
|
||||
styleUrls: ['./map.component.scss']
|
||||
})
|
||||
|
||||
export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
|
||||
title: string = 'Map';
|
||||
public openedModalName: Observable<string>;
|
||||
public itemTypes: Observable<{ [id: string]: IItemType }>;
|
||||
public mapState: Observable<IMapState>;
|
||||
public features: Observable<Array<Feature>>;
|
||||
public overlayLayers: Observable<Array<IItemLayer>>;
|
||||
public selectedOverlayLayer: Observable<IItemLayer>;
|
||||
public selectedItemLayer: Observable<IItemLayer>;
|
||||
public baseLayers: Observable<Array<IItemLayer>>;
|
||||
public selectedBaseLayer: Observable<IItemLayer>;
|
||||
public projection: Observable<string>;
|
||||
public selectedFeatures: Subject<ISelectedFeatures> = new Subject<ISelectedFeatures>();
|
||||
public droppedFile: Subject<IDroppedFile> = new Subject<IDroppedFile>();
|
||||
private paramSub: Subscription;
|
||||
private itemTypeSub: Subscription;
|
||||
private mapStateSub: Subscription;
|
||||
private queryStateSub: Subscription;
|
||||
public parentCode: Observable<string>;
|
||||
public panelVisible: Observable<boolean>;
|
||||
public panelCollapsed: Observable<boolean>;
|
||||
public selectedFeature: Observable<Feature>;
|
||||
public selectedItem: Observable<IItem>;
|
||||
public queryState: Observable<IQueryState>;
|
||||
public period: Observable<IPeriodState>;
|
||||
public clearEnabled: Observable<boolean>;
|
||||
public searchCollapsed: Observable<boolean>;
|
||||
public searchMinified: Observable<boolean>;
|
||||
public menuVisible: Observable<boolean>;
|
||||
public query: Observable<IQueryState>;
|
||||
public position: Observable<Position>;
|
||||
public baseLayersCollapsed:boolean = true;
|
||||
public overlayLayersCollapsed: boolean = true;
|
||||
public extent: Observable<Extent>;
|
||||
@ViewChild('map', { static: true }) map;
|
||||
|
||||
constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
|
||||
}
|
||||
|
||||
@HostListener('document:keyup', ['$event'])
|
||||
escapeClose(event: KeyboardEvent) {
|
||||
let x = event.keyCode;
|
||||
if (x === 27) {
|
||||
this.handleCloseModal()
|
||||
}
|
||||
}
|
||||
|
||||
handleOpenModal(modalName: string) {
|
||||
this.store.dispatch(new commonActions.OpenModal(modalName));
|
||||
}
|
||||
|
||||
handleCloseModal() {
|
||||
this.store.dispatch(new commonActions.CloseModal());
|
||||
}
|
||||
|
||||
handleFileDropped(droppedFile: IDroppedFile) {
|
||||
this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
|
||||
}
|
||||
|
||||
handleFeaturesSelected(feature: Feature) {
|
||||
if (feature) {
|
||||
let newQuery = tassign(mapReducers.initialQueryState, { itemCode: feature.get('code') });
|
||||
this.store.dispatch(new mapActions.DoQuery(newQuery));
|
||||
}
|
||||
}
|
||||
|
||||
handleSearch(queryState: IQueryState) {
|
||||
this.store.dispatch(new mapActions.DoQuery(queryState));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.dispatch(new mapActions.Init());
|
||||
this.selectedFeatures.next({x:0,y:0,features:[]});
|
||||
this.mapState = this.store.select(mapReducers.selectGetMapState);
|
||||
this.parentCode = this.store.select(mapReducers.selectGetParentCode);
|
||||
this.features = this.store.select(mapReducers.selectGetFeatures);
|
||||
this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
|
||||
this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
|
||||
this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
|
||||
this.projection = this.store.select(mapReducers.selectGetProjection);
|
||||
this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
|
||||
this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
|
||||
this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
|
||||
this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
|
||||
this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
|
||||
this.queryState = this.store.select(mapReducers.selectGetQueryState);
|
||||
this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
|
||||
this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
|
||||
this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
|
||||
this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
|
||||
this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
|
||||
this.query = this.store.select(mapReducers.selectGetQuery);
|
||||
this.extent = this.store.select(mapReducers.selectGetExtent);
|
||||
this.selectedFeatures.next(null);
|
||||
this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
|
||||
this.period = this.store.select(mapReducers.selectGetPeriod);
|
||||
this.position = this.geolocationService.getCurrentPosition();
|
||||
|
||||
this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
|
||||
this.replaceUrl(state[0], state[1], true);
|
||||
});
|
||||
this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
|
||||
this.replaceUrl(state[1], state[0],false);
|
||||
});
|
||||
}
|
||||
|
||||
private stateSetCount: number = 0;
|
||||
private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
|
||||
private lastMapState: string = "";
|
||||
ngAfterViewInit() {
|
||||
this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
|
||||
//console.log("Param sub");
|
||||
var newMapState: IMapState = null;
|
||||
var newQueryState: IQueryState = null;
|
||||
var mapStateChanged = false;
|
||||
var queryStateChanged = false;
|
||||
if (params.has("xCenter") && params.has("yCenter")) {
|
||||
let xCenter = parseFloat(params.get("xCenter"));
|
||||
let yCenter = parseFloat(params.get("yCenter"));
|
||||
let zoom = parseFloat(params.get("zoom"));
|
||||
let rotation = parseFloat(params.get("rotation"));
|
||||
let baseLayer = params.get("baseLayer")?params.get("baseLayer"):"";
|
||||
newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
|
||||
mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
|
||||
this.lastMapState = JSON.stringify(newMapState);
|
||||
}
|
||||
if (params.has("queryState")) {
|
||||
let queryState = params.get("queryState");
|
||||
newQueryState = tassign(mapReducers.initialQueryState);
|
||||
if (queryState != "") {
|
||||
newQueryState = this.serializeService.deserialize(queryState);
|
||||
}
|
||||
queryStateChanged = this.lastQueryState != queryState;
|
||||
this.lastQueryState = queryState;
|
||||
}
|
||||
|
||||
if (mapStateChanged && queryStateChanged) {
|
||||
//console.log("Both states");
|
||||
this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
|
||||
} else if (mapStateChanged) {
|
||||
//console.log("Map state");
|
||||
this.store.dispatch(new mapActions.SetMapState(newMapState));
|
||||
} else if (queryStateChanged) {
|
||||
//console.log("Query state");
|
||||
this.store.dispatch(new mapActions.SetQueryState(newQueryState));
|
||||
}
|
||||
this.stateSetCount += 1;
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.map.instance.updateSize();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
handleSearchCollapse(event) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
|
||||
handleSearchExpand(event) {
|
||||
this.store.dispatch(new mapActions.ExpandSearch());
|
||||
}
|
||||
|
||||
handleToggleMenu(event) {
|
||||
this.store.dispatch(new mapActions.ToggleMenu());
|
||||
}
|
||||
|
||||
handleToggleBaseLayers(event:MouseEvent) {
|
||||
this.baseLayersCollapsed = !this.baseLayersCollapsed;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleToggleOverlayLayers(event: MouseEvent) {
|
||||
this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handlePredefinedQuery(event: MouseEvent, query: any) {
|
||||
event.preventDefault();
|
||||
var queryState = tassign(mapReducers.initialQueryState, query);
|
||||
this.store.dispatch(new mapActions.DoQuery(queryState));
|
||||
}
|
||||
|
||||
handleTrijntjeClick(event: MouseEvent, query: any) {
|
||||
event.preventDefault();
|
||||
var queryState = tassign(mapReducers.initialQueryState, query);
|
||||
var mapState = JSON.parse(this.lastMapState);
|
||||
this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
|
||||
}
|
||||
|
||||
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
|
||||
console.debug(`Replace url : Baselayer(${mapState.baseLayerCode}) Querystate(${this.serializeService.serialize(queryState)})`);
|
||||
let parts =["."];
|
||||
parts.push(mapState.xCenter.toFixed(5));
|
||||
parts.push(mapState.yCenter.toFixed(5));
|
||||
parts.push( mapState.zoom.toFixed(0));
|
||||
parts.push( mapState.rotation.toFixed(2));
|
||||
if(mapState.baseLayerCode!="") {
|
||||
parts.push(mapState.baseLayerCode);
|
||||
parts.push( this.serializeService.serialize(queryState));
|
||||
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
|
||||
}
|
||||
}
|
||||
|
||||
handleOnMoveEnd(event) {
|
||||
var map = event.map;
|
||||
var view = map.getView();
|
||||
var rotation = view.getRotation();
|
||||
var zoom = view.getZoom();
|
||||
var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
|
||||
var extent = view.calculateExtent(this.map.instance.getSize());
|
||||
let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
|
||||
let state = { mapState: mapState, extent: extent };
|
||||
let source = from([state]);
|
||||
source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
|
||||
if (mapState && baselayer && queryState) {
|
||||
let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
|
||||
this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));
|
||||
this.store.dispatch(new mapActions.SetViewExtent(state.extent));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleOnMouseDown(event: MouseEvent) {
|
||||
this.store.dispatch(new mapActions.CollapseSearch());
|
||||
}
|
||||
|
||||
handleOnDownload(event) {
|
||||
|
||||
}
|
||||
|
||||
handleClearSearch(event) {
|
||||
this.store.dispatch(new commonActions.Escape(true, false));
|
||||
}
|
||||
|
||||
handleOnDelete(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
|
||||
}
|
||||
|
||||
handleOnToggleVisibility(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
|
||||
}
|
||||
|
||||
handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
|
||||
this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
|
||||
}
|
||||
|
||||
handleZoomToExtent(itemLayer: IItemLayer) {
|
||||
var extent = createEmpty();
|
||||
extend(extent, itemLayer.layer.getExtent());
|
||||
if (extent) {
|
||||
this.store.dispatch(new mapActions.SetExtent(extent));
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectBaseLayer(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
|
||||
}
|
||||
|
||||
handleSelectOverlayLayer(itemLayer: IItemLayer) {
|
||||
this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.paramSub.unsubscribe();
|
||||
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
|
||||
if (this.mapStateSub) this.mapStateSub.unsubscribe();
|
||||
if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
|
||||
}
|
||||
|
@@ -1,61 +1,61 @@
|
||||
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
|
||||
import { FormGroup,FormBuilder, Validators } from '@angular/forms';
|
||||
import { IListItem } from '@farmmaps/common';
|
||||
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
|
||||
import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
|
||||
|
||||
export interface IMetaData {
|
||||
droppedFile: IDroppedFile,
|
||||
attributes: any
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-meta-data-modal',
|
||||
templateUrl: 'meta-data-modal.component.html'
|
||||
})
|
||||
export class MetaDataModalComponent {
|
||||
|
||||
private modalName: string = 'metaDataModal';
|
||||
private modalRef: NgbModalRef;
|
||||
|
||||
@ViewChild('content') _templateModal:ElementRef;
|
||||
@Input() droppedFile: IDroppedFile;
|
||||
@Input() set modalState(_modalState:any) {;
|
||||
if(_modalState == this.modalName) {
|
||||
this.openModal()
|
||||
} else if(this.modalRef) {
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
@Input() event: IListItem;
|
||||
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Output() onAddFilesWithMetaData = new EventEmitter<IMetaData>();
|
||||
|
||||
constructor(private modalService: NgbModal, public fb: FormBuilder) { }
|
||||
|
||||
public metaDataForm: FormGroup;
|
||||
|
||||
handleMetaDataEntered(event) {
|
||||
if (this.metaDataForm.valid) {
|
||||
this.onAddFilesWithMetaData.emit({ droppedFile: this.droppedFile, attributes: { name: this.metaDataForm.value.name } });
|
||||
}
|
||||
}
|
||||
|
||||
openModal() {
|
||||
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
|
||||
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false }));
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalRef.close();
|
||||
this.metaDataForm.patchValue({ name: "" });
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.metaDataForm = this.fb.group({
|
||||
name: ["", Validators.compose([Validators.required, Validators.pattern("[a-zA-Z0-9_].*")])]
|
||||
});
|
||||
}
|
||||
}
|
||||
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
|
||||
import { FormGroup,FormBuilder, Validators } from '@angular/forms';
|
||||
import { IListItem } from '@farmmaps/common';
|
||||
import { IDroppedFile } from '../aol/file-drop-target/file-drop-target.component';
|
||||
import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
|
||||
|
||||
export interface IMetaData {
|
||||
droppedFile: IDroppedFile,
|
||||
attributes: any
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-meta-data-modal',
|
||||
templateUrl: 'meta-data-modal.component.html'
|
||||
})
|
||||
export class MetaDataModalComponent {
|
||||
|
||||
private modalName: string = 'metaDataModal';
|
||||
private modalRef: NgbModalRef;
|
||||
|
||||
@ViewChild('content', { static: true }) _templateModal:ElementRef;
|
||||
@Input() droppedFile: IDroppedFile;
|
||||
@Input() set modalState(_modalState:any) {;
|
||||
if(_modalState == this.modalName) {
|
||||
this.openModal()
|
||||
} else if(this.modalRef) {
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
@Input() event: IListItem;
|
||||
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Output() onAddFilesWithMetaData = new EventEmitter<IMetaData>();
|
||||
|
||||
constructor(private modalService: NgbModal, public fb: FormBuilder) { }
|
||||
|
||||
public metaDataForm: FormGroup;
|
||||
|
||||
handleMetaDataEntered(event) {
|
||||
if (this.metaDataForm.valid) {
|
||||
this.onAddFilesWithMetaData.emit({ droppedFile: this.droppedFile, attributes: { name: this.metaDataForm.value.name } });
|
||||
}
|
||||
}
|
||||
|
||||
openModal() {
|
||||
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
|
||||
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false }));
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalRef.close();
|
||||
this.metaDataForm.patchValue({ name: "" });
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.metaDataForm = this.fb.group({
|
||||
name: ["", Validators.compose([Validators.required, Validators.pattern("[a-zA-Z0-9_].*")])]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@@ -1,93 +1,93 @@
|
||||
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { NgbDateNativeAdapter } from '@farmmaps/common';
|
||||
|
||||
|
||||
const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
one && two && two.year === one.year && two.month === one.month && two.day === one.day;
|
||||
|
||||
const before = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day < two.day : one.month < two.month : one.year < two.year;
|
||||
|
||||
const after = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day > two.day : one.month > two.month : one.year > two.year;
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-select-period-modal',
|
||||
templateUrl: 'select-period-modal.component.html',
|
||||
styleUrls: ['select-period-modal.component.scss']
|
||||
})
|
||||
export class SelectPeriodModalComponent {
|
||||
|
||||
private modalName: string = 'selectPeriodModal';
|
||||
private modalRef: NgbModalRef;
|
||||
private dateAdapter = new NgbDateNativeAdapter();
|
||||
hoveredDate: NgbDateStruct;
|
||||
fromDate: NgbDateStruct;
|
||||
toDate: NgbDateStruct;
|
||||
|
||||
@ViewChild('content') _templateModal:ElementRef;
|
||||
|
||||
@Input() set modalState(_modalState:any) {;
|
||||
if(_modalState == this.modalName) {
|
||||
this.openModal()
|
||||
} else if(this.modalRef) {
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
@Input() set startDate(_modalState: Date) {
|
||||
this.fromDate = this.dateAdapter.fromModel(_modalState);
|
||||
}
|
||||
|
||||
@Input() set endDate(_modalState: Date) {
|
||||
var d = new Date(_modalState);
|
||||
d.setDate(d.getDate() - 1);
|
||||
this.toDate = this.dateAdapter.fromModel(d);
|
||||
}
|
||||
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
|
||||
|
||||
constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
|
||||
|
||||
openModal() {
|
||||
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
|
||||
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false}));
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalRef.close();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
onDateChange(date: NgbDateStruct) {
|
||||
if (!this.fromDate && !this.toDate) {
|
||||
this.fromDate = date;
|
||||
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
|
||||
this.toDate = date;
|
||||
} else {
|
||||
this.toDate = null;
|
||||
this.fromDate = date;
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect(event:MouseEvent) {
|
||||
event.preventDefault();
|
||||
if (this.fromDate && this.toDate && before(this.fromDate, this.toDate)) {
|
||||
var endDate = new Date(this.dateAdapter.toModel(this.toDate));
|
||||
endDate.setDate(endDate.getDate() + 1);
|
||||
this.onSelect.emit({startDate:this.dateAdapter.toModel(this.fromDate),endDate:endDate})
|
||||
}
|
||||
}
|
||||
|
||||
isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate);
|
||||
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
|
||||
isFrom = date => equals(date, this.fromDate);
|
||||
isTo = date => equals(date, this.toDate);
|
||||
}
|
||||
import { Component, Output, ViewChild, EventEmitter, Input, ElementRef, HostListener } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { NgbModal, NgbModalRef, NgbDateStruct, NgbCalendar, NgbDateAdapter } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { NgbDateNativeAdapter } from '@farmmaps/common';
|
||||
|
||||
|
||||
const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
one && two && two.year === one.year && two.month === one.month && two.day === one.day;
|
||||
|
||||
const before = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day < two.day : one.month < two.month : one.year < two.year;
|
||||
|
||||
const after = (one: NgbDateStruct, two: NgbDateStruct) =>
|
||||
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
|
||||
? false : one.day > two.day : one.month > two.month : one.year > two.year;
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-select-period-modal',
|
||||
templateUrl: 'select-period-modal.component.html',
|
||||
styleUrls: ['select-period-modal.component.scss']
|
||||
})
|
||||
export class SelectPeriodModalComponent {
|
||||
|
||||
private modalName: string = 'selectPeriodModal';
|
||||
private modalRef: NgbModalRef;
|
||||
private dateAdapter = new NgbDateNativeAdapter();
|
||||
hoveredDate: NgbDateStruct;
|
||||
fromDate: NgbDateStruct;
|
||||
toDate: NgbDateStruct;
|
||||
|
||||
@ViewChild('content', { static: true }) _templateModal:ElementRef;
|
||||
|
||||
@Input() set modalState(_modalState:any) {;
|
||||
if(_modalState == this.modalName) {
|
||||
this.openModal()
|
||||
} else if(this.modalRef) {
|
||||
this.closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
@Input() set startDate(_modalState: Date) {
|
||||
this.fromDate = this.dateAdapter.fromModel(_modalState);
|
||||
}
|
||||
|
||||
@Input() set endDate(_modalState: Date) {
|
||||
var d = new Date(_modalState);
|
||||
d.setDate(d.getDate() - 1);
|
||||
this.toDate = this.dateAdapter.fromModel(d);
|
||||
}
|
||||
|
||||
@Output() onCloseModal = new EventEmitter<any>();
|
||||
@Output() onSelect = new EventEmitter<{ startDate: Date, endDate: Date }>();
|
||||
|
||||
constructor(private modalService: NgbModal, private calendar: NgbCalendar) { }
|
||||
|
||||
openModal() {
|
||||
//Timeout trick to avoid ExpressionChangedAfterItHasBeenCheckedError
|
||||
setTimeout(() => this.modalRef = this.modalService.open(this._templateModal, { backdrop: 'static', keyboard: false}));
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.modalRef.close();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
onDateChange(date: NgbDateStruct) {
|
||||
if (!this.fromDate && !this.toDate) {
|
||||
this.fromDate = date;
|
||||
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
|
||||
this.toDate = date;
|
||||
} else {
|
||||
this.toDate = null;
|
||||
this.fromDate = date;
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect(event:MouseEvent) {
|
||||
event.preventDefault();
|
||||
if (this.fromDate && this.toDate && before(this.fromDate, this.toDate)) {
|
||||
var endDate = new Date(this.dateAdapter.toModel(this.toDate));
|
||||
endDate.setDate(endDate.getDate() + 1);
|
||||
this.onSelect.emit({startDate:this.dateAdapter.toModel(this.fromDate),endDate:endDate})
|
||||
}
|
||||
}
|
||||
|
||||
isHovered = date => this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate);
|
||||
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
|
||||
isFrom = date => equals(date, this.fromDate);
|
||||
isTo = date => equals(date, this.toDate);
|
||||
}
|
||||
|
@@ -1,40 +1,50 @@
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { IItem } from '@farmmaps/common';
|
||||
import { AbstractSelectedItemComponent, SelectedItemComponent } from '../selected-item/selected-item.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-selected-item-container',
|
||||
templateUrl: './selected-item-container.component.html',
|
||||
styleUrls: ['./selected-item-container.component.scss']
|
||||
})
|
||||
export class SelectedItemContainerComponent {
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractSelectedItemComponent) public selectedItemComponents: AbstractSelectedItemComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() item: IItem;
|
||||
|
||||
@ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent() {
|
||||
var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
|
||||
for (var i = 0; i < this.selectedItemComponents.length; i++) {
|
||||
if (this.selectedItemComponents[i]['forItemType'] == this.item.itemType) {
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[i]['constructor'] as any);
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["item"] && changes["item"].currentValue) {
|
||||
this.loadComponent();
|
||||
}
|
||||
}
|
||||
}
|
||||
import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
|
||||
import { IItem } from '@farmmaps/common';
|
||||
import { AbstractSelectedItemComponent, SelectedItemComponent } from '../selected-item/selected-item.component';
|
||||
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'fm-map-selected-item-container',
|
||||
templateUrl: './selected-item-container.component.html',
|
||||
styleUrls: ['./selected-item-container.component.scss']
|
||||
})
|
||||
export class SelectedItemContainerComponent {
|
||||
|
||||
constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractSelectedItemComponent) public selectedItemComponents: AbstractSelectedItemComponent[] ) {
|
||||
}
|
||||
|
||||
@Input() item: IItem;
|
||||
|
||||
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
|
||||
|
||||
loadComponent() {
|
||||
let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
|
||||
let firstComponentWithTypeAndTask = this.selectedItemComponents
|
||||
.find(value => value['forSourceTask'] == this.item.sourceTask &&
|
||||
value['forItemType'] == this.item.itemType
|
||||
);
|
||||
|
||||
if (firstComponentWithTypeAndTask) {
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithTypeAndTask['constructor'] as any);
|
||||
} else {
|
||||
let firstComponentWithType = this.selectedItemComponents
|
||||
.find(value => value['forItemType'] == this.item.itemType);
|
||||
|
||||
if (firstComponentWithType) {
|
||||
componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithType['constructor'] as any);
|
||||
}
|
||||
}
|
||||
const viewContainerRef = this.widgetHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
const componentRef = viewContainerRef.createComponent(componentFactory);
|
||||
(<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes["item"] && changes["item"].currentValue) {
|
||||
this.loadComponent();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -3,11 +3,15 @@
|
||||
<div class="card border-0">
|
||||
<div class="card-body">
|
||||
<div><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
|
||||
<h4>Cropfield</h4>
|
||||
<h1>{{item.name}}</h1>
|
||||
<div>{{item.data.cropTypeName}}</div>
|
||||
<div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
|
||||
<div class="mt-1"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></div>
|
||||
<div class="card menu-card">
|
||||
<h1>Cropfield</h1>
|
||||
<h4>{{item.name}}</h4>
|
||||
<div>{{item.data.cropTypeName}}</div>
|
||||
<div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
|
||||
<ul class="p-0 mt-2">
|
||||
<li><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<fm-map-item-list [items]="(items|async)"></fm-map-item-list>
|
||||
<fm-map-item-widget-list [item]="item"></fm-map-item-widget-list>
|
||||
|
@@ -1,5 +1,7 @@
|
||||
@import "../../_theme.scss";
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
@import "../../../app/theme.scss";
|
||||
@import "node_modules/bootstrap/scss/functions";
|
||||
@import "node_modules/bootstrap/scss/variables";
|
||||
@import "node_modules/bootstrap/scss/mixins";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
@@ -13,6 +15,10 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding-bottom: unset;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display: none;
|
||||
height: 4rem;
|
||||
@@ -23,3 +29,11 @@
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
margin-left: -7px;
|
||||
padding-left: 7px;
|
||||
margin-right: -7px;
|
||||
padding-right: 7px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
@@ -1,22 +1,23 @@
|
||||
<div class="spacer"></div>
|
||||
<div *ngIf="item;let item">
|
||||
<div class="card border-0">
|
||||
<div class="card-body">
|
||||
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
|
||||
<h1>{{item.name}}</h1>
|
||||
<div class="legend-container" *ngIf="item?.data.layers;let layers">
|
||||
<!--<div *ngIf="layers.length>1">
|
||||
<select (change)="onLayerChanged($event.target.value)">
|
||||
<option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
|
||||
</select>
|
||||
</div>-->
|
||||
<fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
|
||||
</div>
|
||||
<ul class="p-0 mt-2">
|
||||
<!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
|
||||
<li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
|
||||
<li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div *ngIf="item;let item">
|
||||
<div class="card border-0">
|
||||
<div class="card-body">
|
||||
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
|
||||
<div class="card menu-card">
|
||||
<h1>{{item.name}}</h1>
|
||||
</div>
|
||||
<div class="legend-container" *ngIf="item?.data.layers;let layers">
|
||||
<div class="card menu-card">
|
||||
<fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card menu-card">
|
||||
<ul class="p-0 mt-2">
|
||||
<!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
|
||||
<li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
|
||||
<li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -1,33 +1,42 @@
|
||||
@import "../../_theme.scss";
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
color: white;
|
||||
font-size: 9rem;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display:none;
|
||||
height:4rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.spacer {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
@import "../../_theme.scss";
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
.big-icon {
|
||||
width: 100%;
|
||||
color: white;
|
||||
font-size: 9rem;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display:none;
|
||||
height:4rem;
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
.spacer {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
margin-left: -7px;
|
||||
padding-left: 7px;
|
||||
margin-right: -7px;
|
||||
padding-right: 7px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
|
@@ -3,20 +3,26 @@
|
||||
<div class="card border-0">
|
||||
<div class="card-body">
|
||||
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
|
||||
<h1>{{item.name}}</h1>
|
||||
<div class="legend-container" *ngIf="item?.data.layers;let layers">
|
||||
<div *ngIf="layers.length>1">
|
||||
<select (change)="onLayerChanged($event.target.value)">
|
||||
<option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
|
||||
<div class="card menu-card">
|
||||
<h1>{{item.name}}</h1>
|
||||
</div>
|
||||
<ul class="p-0 mt-2">
|
||||
<!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
|
||||
<li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
|
||||
<li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="legend-container" *ngIf="item?.data.layers;let layers">
|
||||
<div class="card menu-card">
|
||||
<div *ngIf="layers.length>1">
|
||||
<select (change)="onLayerChanged($event.target.value)">
|
||||
<option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card menu-card">
|
||||
<ul class="p-0 mt-2">
|
||||
<!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
|
||||
<li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
|
||||
<li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -39,3 +39,11 @@ li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
margin-left: -7px;
|
||||
padding-left: 7px;
|
||||
margin-right: -7px;
|
||||
padding-right: 7px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
@@ -1,16 +1,18 @@
|
||||
<div *ngIf="item;let item">
|
||||
<div class="card border-0">
|
||||
<img *ngIf="item.thumbnail" class="card-img-top" [src]="'/api/v1/items/'+item.code+'/thumbnail?v='+item.updated.getTime()" />
|
||||
<div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
|
||||
<i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
|
||||
<h1 class="card-title">{{item.name}}</h1>
|
||||
<a *ngIf="itemTypeService.hasViewer(item)" href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="View"></i> View</a>
|
||||
<a href="/api/v1/items/{{item.code}}/data" class="btn btn-outline-secondary" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a>
|
||||
<a href="#" class="btn btn-outline-secondary" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a>
|
||||
<a *ngIf="itemTypeService.isLayer(item)" href="#" (click)="handleAddAsLayer(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="item;let item">
|
||||
<div class="card border-0">
|
||||
<img *ngIf="item.thumbnail" class="card-img-top" [src]="config.getConfig('apiEndPoint') +'/api/v1/items/'+item.code+'/thumbnail?v='+item.updated.getTime()" />
|
||||
<div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
|
||||
<i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
|
||||
<h1 class="card-title">{{item.name}}</h1>
|
||||
<a *ngIf="itemTypeService.hasViewer(item)" href="#" (click)="handleOnView(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="View"></i> View</a>
|
||||
<a href="/api/v1/items/{{item.code}}/data" class="btn btn-outline-secondary" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a>
|
||||
<a href="#" class="btn btn-outline-secondary" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a>
|
||||
<a *ngIf="itemTypeService.isLayer(item)" href="#" (click)="handleAddAsLayer(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -1,56 +1,56 @@
|
||||
import { Component, Input, Injectable } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Feature } from 'ol';
|
||||
import { Store } from '@ngrx/store';
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export abstract class AbstractSelectedItemComponent {
|
||||
@Input() item: IItem
|
||||
constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, private router: Router) {
|
||||
}
|
||||
|
||||
handleOnView(item: IItem) {
|
||||
var itemType = this.itemTypeService.itemTypes[item.itemType];
|
||||
if (itemType) {
|
||||
if (itemType.viewer) {
|
||||
let url = `/viewer/${itemType.viewer}/item/${item.code}`;
|
||||
this.router.navigate([url]);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
handleOnEdit(item: IItem) {
|
||||
let url = `/editor/property/item/${item.code}`;
|
||||
this.router.navigate([url]);
|
||||
return false;
|
||||
}
|
||||
|
||||
handleAddAsLayer(item: IItem,layerIndex:number = -1) {
|
||||
this.store.dispatch(new mapActions.AddLayer(item,layerIndex));
|
||||
return false;
|
||||
}
|
||||
|
||||
handleBackToList(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
this.location.back();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
@Component({
|
||||
selector: 'fm-map-selected-item',
|
||||
templateUrl: './selected-item.component.html',
|
||||
styleUrls: ['./selected-item.component.scss']
|
||||
})
|
||||
export class SelectedItemComponent extends AbstractSelectedItemComponent {
|
||||
|
||||
constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router) {
|
||||
super(store, itemTypeService,location,router);
|
||||
}
|
||||
}
|
||||
import { Component, Input, Injectable } from '@angular/core';
|
||||
import { Location } from '@angular/common';
|
||||
import { Feature } from 'ol';
|
||||
import { Store } from '@ngrx/store';
|
||||
import * as mapReducers from '../../reducers/map.reducer';
|
||||
import { commonReducers,ItemTypeService, IItem, Item,AppConfig } from '@farmmaps/common';
|
||||
import * as mapActions from '../../actions/map.actions';
|
||||
import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export abstract class AbstractSelectedItemComponent {
|
||||
@Input() item: IItem
|
||||
constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, private router: Router) {
|
||||
}
|
||||
|
||||
handleOnView(item: IItem) {
|
||||
var itemType = this.itemTypeService.itemTypes[item.itemType];
|
||||
if (itemType) {
|
||||
if (itemType.viewer) {
|
||||
let url = `/viewer/${itemType.viewer}/item/${item.code}`;
|
||||
this.router.navigate([url]);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
handleOnEdit(item: IItem) {
|
||||
let url = `/editor/property/item/${item.code}`;
|
||||
this.router.navigate([url]);
|
||||
return false;
|
||||
}
|
||||
|
||||
handleAddAsLayer(item: IItem,layerIndex:number = -1) {
|
||||
this.store.dispatch(new mapActions.AddLayer(item,layerIndex));
|
||||
return false;
|
||||
}
|
||||
|
||||
handleBackToList(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
this.location.back();
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
@Component({
|
||||
selector: 'fm-map-selected-item',
|
||||
templateUrl: './selected-item.component.html',
|
||||
styleUrls: ['./selected-item.component.scss']
|
||||
})
|
||||
export class SelectedItemComponent extends AbstractSelectedItemComponent {
|
||||
|
||||
constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, public config:AppConfig) {
|
||||
super(store, itemTypeService,location,router);
|
||||
}
|
||||
}
|
||||
|
@@ -1,230 +1,238 @@
|
||||
import { Injectable, Inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Store, Action } from '@ngrx/store';
|
||||
import { Effect, Actions,ofType } from '@ngrx/effects';
|
||||
|
||||
import { Observable , of } from 'rxjs';
|
||||
import { withLatestFrom, switchMap, map, catchError, mergeMap, delay} from 'rxjs/operators';
|
||||
|
||||
import {GeoJSON} from 'ol/format';
|
||||
import {Feature} from 'ol';
|
||||
import { getCenter, Extent, createEmpty, extend} from 'ol/extent';
|
||||
import {Point} from 'ol/geom'
|
||||
|
||||
|
||||
import * as mapActions from '../actions/map.actions';
|
||||
import * as mapReducers from '../reducers/map.reducer';
|
||||
import {commonReducers} from '@farmmaps/common';
|
||||
|
||||
import {commonActions} from '@farmmaps/common';
|
||||
|
||||
import { IListItem, IItem } from '@farmmaps/common';
|
||||
import { FolderService, ItemService } from '@farmmaps/common';
|
||||
import { tassign } from 'tassign';
|
||||
|
||||
@Injectable()
|
||||
export class MapEffects {
|
||||
private _format: GeoJSON;
|
||||
|
||||
private toPointFeature(feature: any): Feature {
|
||||
var f = this._format.readFeature(feature);
|
||||
var centroid = getCenter(f.getGeometry().getExtent());
|
||||
f.setGeometry(new Point(centroid));
|
||||
return f;
|
||||
}
|
||||
|
||||
@Effect()
|
||||
init$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.INIT),
|
||||
withLatestFrom(this.store$.select(commonReducers.selectGetRootItems)),
|
||||
switchMap(([action, rootItems]) => {
|
||||
for (let rootItem of rootItems) {
|
||||
if (rootItem.itemType == "UPLOADS_FOLDER") return of(new mapActions.SetParent(rootItem.code));
|
||||
}
|
||||
return [];
|
||||
}
|
||||
));
|
||||
|
||||
@Effect()
|
||||
initBaseLayers$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.INIT),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetProjection)),
|
||||
map(([action, projection]) => new mapActions.LoadBaseLayers(projection)));
|
||||
|
||||
@Effect()
|
||||
loadBaseLayers$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.LOADBASELAYERS),
|
||||
switchMap((action: mapActions.LoadBaseLayers) => {
|
||||
return this.itemService$.getItemList("vnd.farmmaps.itemtype.layer", { "isBaseLayer": true }).pipe(
|
||||
map((items: IItem[]) => new mapActions.LoadBaseLayersSuccess(items)),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
initRootItems$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.INITROOTSUCCESS),
|
||||
map((action) => new mapActions.Init()
|
||||
));
|
||||
|
||||
@Effect()
|
||||
startSearch$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.STARTSEARCH),
|
||||
switchMap((action: mapActions.StartSearch) => {
|
||||
console.debug("Start search");
|
||||
var startDate = action.queryState.startDate;
|
||||
var endDate = action.queryState.endDate;
|
||||
var newAction;
|
||||
if (action.queryState.itemCode || action.queryState.parentCode || action.queryState.itemType || action.queryState.query || action.queryState.tags) {
|
||||
newAction= this.itemService$.getFeatures(action.queryState.bbox, "EPSG:3857", action.queryState.query, action.queryState.tags, startDate, endDate, action.queryState.itemType, action.queryState.parentCode).pipe(
|
||||
switchMap((features: any) => {
|
||||
for (let f of features.features) {
|
||||
if (f.properties && f.properties["code"]) {
|
||||
f.id = f.properties["code"];
|
||||
}
|
||||
}
|
||||
return of(new mapActions.StartSearchSuccess(this._format.readFeatures(features), action.queryState));
|
||||
}
|
||||
),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
} else {
|
||||
newAction= of(new commonActions.Escape(true,false));
|
||||
}
|
||||
return newAction;
|
||||
}));
|
||||
|
||||
|
||||
@Effect()
|
||||
startSearchSucces$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.STARTSEARCHSUCCESS),
|
||||
mergeMap((action: mapActions.StartSearchSuccess) => {
|
||||
if (action.query.bboxFilter) {
|
||||
return [];
|
||||
} else {
|
||||
var extent = createEmpty();
|
||||
|
||||
if (extent) {
|
||||
for (let f of action.features) {
|
||||
extend(extent, (f as Feature).getGeometry().getExtent());
|
||||
}
|
||||
}
|
||||
//return [];
|
||||
return of(new mapActions.SetExtent(extent));
|
||||
}
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
selectItem$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SELECTITEM),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetSelectedItem)),
|
||||
switchMap(([action, selectedItem]) => {
|
||||
let a = action as mapActions.SelectItem;
|
||||
let itemCode = selectedItem ? selectedItem.code : "";
|
||||
if (a.itemCode != itemCode) {
|
||||
return this.itemService$.getItem(a.itemCode).pipe(
|
||||
map((item: IItem) => new mapActions.SelectItemSuccess(item)),
|
||||
catchError(error => of(new commonActions.Fail(error))))
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
@Effect()
|
||||
selectItemSuccess$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SELECTITEMSUCCESS),
|
||||
switchMap((action:mapActions.SelectItemSuccess) => {
|
||||
return this.itemService$.getFeature(action.item.code, "EPSG:3857").pipe(
|
||||
map((feature: IItem) => new mapActions.AddFeatureSuccess(this._format.readFeature(feature) )),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
}
|
||||
));
|
||||
|
||||
@Effect()
|
||||
uploadedItemClick$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.UPLOADEDFILECLICK),
|
||||
switchMap((action: commonActions.UploadedFileClick) => of(new mapActions.DoQuery(tassign(mapReducers.initialState.query, {itemCode:action.itemCode})))
|
||||
));
|
||||
|
||||
//@Effect()
|
||||
//itemAdded$: Observable<Action> = this.actions$.pipe(
|
||||
// ofType(commonActions.ITEMADDEDEVENT),
|
||||
// withLatestFrom(this.store$.select(mapReducers.selectGetParentCode)),
|
||||
// mergeMap(([action, parentCode]) => {
|
||||
// let itemAddedAction = action as commonActions.ItemAddedEvent;
|
||||
// if (parentCode && itemAddedAction.attributes["parentCode"] == parentCode) {
|
||||
// return this.itemService$.getFeature(itemAddedAction.itemCode,"EPSG:3857").pipe(
|
||||
// map((feature: Feature) => new mapActions.AddFeatureSuccess(this.toPointFeature(feature))),
|
||||
// catchError(error => of(new commonActions.Fail(error))))
|
||||
// } else
|
||||
// return [
|
||||
// ];
|
||||
// }));
|
||||
|
||||
@Effect()
|
||||
featureUpdate$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.ITEMCHANGEDEVENT),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetFeatures)),
|
||||
mergeMap(([action, features]) => {
|
||||
let itemChangedAction = action as commonActions.ItemChangedEvent;
|
||||
var feature: Feature = null;
|
||||
for (let f of features) {
|
||||
if (f.get("code") == itemChangedAction.itemCode) {
|
||||
feature = f;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (feature) {
|
||||
return this.itemService$.getFeature(itemChangedAction.itemCode, "EPSG:3857").pipe(
|
||||
map((feature: any) => new mapActions.UpdateFeatureSuccess(this.toPointFeature(feature))),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
itemUpdate$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.ITEMCHANGEDEVENT),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetSelectedItem)),
|
||||
mergeMap(([action, selectedItem]) => {
|
||||
let itemChangedAction = action as commonActions.ItemChangedEvent;
|
||||
if (selectedItem && selectedItem.code == itemChangedAction.itemCode) {
|
||||
return this.itemService$.getItem(itemChangedAction.itemCode).pipe(
|
||||
map((item: IItem) => new mapActions.SelectItemSuccess(item)),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
setQueryState$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SETQUERYSTATE),
|
||||
switchMap((action: mapActions.SetQueryState) => {
|
||||
var newAction:Action;
|
||||
if (action.queryState.itemCode && action.queryState.itemCode != "") {
|
||||
newAction= new mapActions.SelectItem(action.queryState.itemCode);
|
||||
} else {
|
||||
newAction= new mapActions.StartSearch(action.queryState);
|
||||
}
|
||||
return of(newAction);
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
setState$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SETSTATE),
|
||||
switchMap((action: mapActions.SetState) => {
|
||||
var newAction:Action;
|
||||
if (action.queryState.itemCode && action.queryState.itemCode != "") {
|
||||
newAction= new mapActions.SelectItem(action.queryState.itemCode);
|
||||
} else {
|
||||
newAction= new mapActions.StartSearch(action.queryState);
|
||||
}
|
||||
return of(newAction);
|
||||
}));
|
||||
|
||||
constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService) {
|
||||
this._format = new GeoJSON();
|
||||
}
|
||||
}
|
||||
import { Injectable, Inject } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Store, Action } from '@ngrx/store';
|
||||
import { Effect, Actions,ofType } from '@ngrx/effects';
|
||||
|
||||
import { Observable , of } from 'rxjs';
|
||||
import { withLatestFrom, switchMap, map, catchError, mergeMap, delay} from 'rxjs/operators';
|
||||
|
||||
import {GeoJSON,WKT} from 'ol/format';
|
||||
import {Feature} from 'ol';
|
||||
import { getCenter, Extent, createEmpty, extend} from 'ol/extent';
|
||||
import {Point} from 'ol/geom'
|
||||
|
||||
|
||||
import * as mapActions from '../actions/map.actions';
|
||||
import * as mapReducers from '../reducers/map.reducer';
|
||||
import {commonReducers} from '@farmmaps/common';
|
||||
|
||||
import {commonActions} from '@farmmaps/common';
|
||||
|
||||
import { IListItem, IItem } from '@farmmaps/common';
|
||||
import { FolderService, ItemService } from '@farmmaps/common';
|
||||
import { tassign } from 'tassign';
|
||||
|
||||
@Injectable()
|
||||
export class MapEffects {
|
||||
private _geojsonFormat: GeoJSON;
|
||||
private _wktFormat: WKT;
|
||||
|
||||
private toPointFeature(updateEvent:commonActions.DeviceUpdateEvent): Feature {
|
||||
var f = this._wktFormat.readFeature(updateEvent.attributes["geometry"],{
|
||||
dataProjection: 'EPSG:4326',
|
||||
featureProjection: 'EPSG:3857'
|
||||
});
|
||||
f.setId(updateEvent.itemCode);
|
||||
var centroid = getCenter(f.getGeometry().getExtent());
|
||||
f.setGeometry(new Point(centroid));
|
||||
return f;
|
||||
}
|
||||
|
||||
@Effect()
|
||||
init$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.INIT),
|
||||
withLatestFrom(this.store$.select(commonReducers.selectGetRootItems)),
|
||||
switchMap(([action, rootItems]) => {
|
||||
for (let rootItem of rootItems) {
|
||||
if (rootItem.itemType == "UPLOADS_FOLDER") return of(new mapActions.SetParent(rootItem.code));
|
||||
}
|
||||
return [];
|
||||
}
|
||||
));
|
||||
|
||||
@Effect()
|
||||
initBaseLayers$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.INIT),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetProjection)),
|
||||
map(([action, projection]) => new mapActions.LoadBaseLayers(projection)));
|
||||
|
||||
@Effect()
|
||||
loadBaseLayers$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.LOADBASELAYERS),
|
||||
switchMap((action: mapActions.LoadBaseLayers) => {
|
||||
return this.itemService$.getItemList("vnd.farmmaps.itemtype.layer", { "isBaseLayer": true }).pipe(
|
||||
map((items: IItem[]) => new mapActions.LoadBaseLayersSuccess(items)),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
initRootItems$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.INITROOTSUCCESS),
|
||||
map((action) => new mapActions.Init()
|
||||
));
|
||||
|
||||
@Effect()
|
||||
startSearch$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.STARTSEARCH),
|
||||
switchMap((action: mapActions.StartSearch) => {
|
||||
console.debug("Start search");
|
||||
var startDate = action.queryState.startDate;
|
||||
var endDate = action.queryState.endDate;
|
||||
var newAction:Observable<Action>;
|
||||
if (action.queryState.itemCode || action.queryState.parentCode || action.queryState.itemType || action.queryState.query || action.queryState.tags) {
|
||||
newAction= this.itemService$.getFeatures(action.queryState.bbox, "EPSG:3857", action.queryState.query, action.queryState.tags, startDate, endDate, action.queryState.itemType, action.queryState.parentCode).pipe(
|
||||
switchMap((features: any) => {
|
||||
for (let f of features.features) {
|
||||
if (f.properties && f.properties["code"]) {
|
||||
f.id = f.properties["code"];
|
||||
}
|
||||
}
|
||||
return of(new mapActions.StartSearchSuccess(this._geojsonFormat.readFeatures(features), action.queryState));
|
||||
}
|
||||
),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
} else {
|
||||
newAction= of(new commonActions.Escape(true,false));
|
||||
}
|
||||
return newAction;
|
||||
}));
|
||||
|
||||
|
||||
@Effect()
|
||||
startSearchSucces$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.STARTSEARCHSUCCESS),
|
||||
mergeMap((action: mapActions.StartSearchSuccess) => {
|
||||
if (action.query.bboxFilter) {
|
||||
return [];
|
||||
} else {
|
||||
var extent = createEmpty();
|
||||
|
||||
if (extent) {
|
||||
for (let f of action.features) {
|
||||
extend(extent, (f as Feature).getGeometry().getExtent());
|
||||
}
|
||||
}
|
||||
//return [];
|
||||
return of(new mapActions.SetExtent(extent));
|
||||
}
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
selectItem$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SELECTITEM),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetSelectedItem)),
|
||||
switchMap(([action, selectedItem]) => {
|
||||
let a = action as mapActions.SelectItem;
|
||||
let itemCode = selectedItem ? selectedItem.code : "";
|
||||
if (a.itemCode != itemCode) {
|
||||
return this.itemService$.getItem(a.itemCode).pipe(
|
||||
map((item: IItem) => new mapActions.SelectItemSuccess(item)),
|
||||
catchError(error => of(new commonActions.Fail(error))))
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
));
|
||||
|
||||
@Effect()
|
||||
selectItemSuccess$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SELECTITEMSUCCESS),
|
||||
switchMap((action:mapActions.SelectItemSuccess) => {
|
||||
return this.itemService$.getFeature(action.item.code, "EPSG:3857").pipe(
|
||||
map((feature: any) => {
|
||||
let f = this._geojsonFormat.readFeature(feature);
|
||||
f.setId(action.item.code);
|
||||
return new mapActions.AddFeatureSuccess(f );
|
||||
}),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
}
|
||||
));
|
||||
|
||||
@Effect()
|
||||
uploadedItemClick$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.UPLOADEDFILECLICK),
|
||||
switchMap((action: commonActions.UploadedFileClick) => of(new mapActions.DoQuery(tassign(mapReducers.initialState.query, {itemCode:action.itemCode})))
|
||||
));
|
||||
|
||||
//@Effect()
|
||||
//itemAdded$: Observable<Action> = this.actions$.pipe(
|
||||
// ofType(commonActions.ITEMADDEDEVENT),
|
||||
// withLatestFrom(this.store$.select(mapReducers.selectGetParentCode)),
|
||||
// mergeMap(([action, parentCode]) => {
|
||||
// let itemAddedAction = action as commonActions.ItemAddedEvent;
|
||||
// if (parentCode && itemAddedAction.attributes["parentCode"] == parentCode) {
|
||||
// return this.itemService$.getFeature(itemAddedAction.itemCode,"EPSG:3857").pipe(
|
||||
// map((feature: Feature) => new mapActions.AddFeatureSuccess(this.toPointFeature(feature))),
|
||||
// catchError(error => of(new commonActions.Fail(error))))
|
||||
// } else
|
||||
// return [
|
||||
// ];
|
||||
// }));
|
||||
|
||||
@Effect()
|
||||
featureUpdate$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.DEVICEUPDATEEVENT),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetFeatures)),
|
||||
mergeMap(([action, features]) => {
|
||||
let deviceUpdateEventAction = action as commonActions.DeviceUpdateEvent;
|
||||
var feature: Feature = null;
|
||||
for (let f of features) {
|
||||
if (f.getId() == deviceUpdateEventAction.itemCode) {
|
||||
feature = f;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (feature) {
|
||||
return of(new mapActions.UpdateFeatureSuccess(this.toPointFeature(deviceUpdateEventAction)));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
itemUpdate$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(commonActions.ITEMCHANGEDEVENT),
|
||||
withLatestFrom(this.store$.select(mapReducers.selectGetSelectedItem)),
|
||||
mergeMap(([action, selectedItem]) => {
|
||||
let itemChangedAction = action as commonActions.ItemChangedEvent;
|
||||
if (selectedItem && selectedItem.code == itemChangedAction.itemCode) {
|
||||
return this.itemService$.getItem(itemChangedAction.itemCode).pipe(
|
||||
map((item: IItem) => new mapActions.SelectItemSuccess(item)),
|
||||
catchError(error => of(new commonActions.Fail(error))));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
setQueryState$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SETQUERYSTATE),
|
||||
switchMap((action: mapActions.SetQueryState) => {
|
||||
var newAction:Action;
|
||||
if (action.queryState.itemCode && action.queryState.itemCode != "") {
|
||||
newAction= new mapActions.SelectItem(action.queryState.itemCode);
|
||||
} else {
|
||||
newAction= new mapActions.StartSearch(action.queryState);
|
||||
}
|
||||
return of(newAction);
|
||||
}));
|
||||
|
||||
@Effect()
|
||||
setState$: Observable<Action> = this.actions$.pipe(
|
||||
ofType(mapActions.SETSTATE),
|
||||
switchMap((action: mapActions.SetState) => {
|
||||
var newAction:Action;
|
||||
if (action.queryState.itemCode && action.queryState.itemCode != "") {
|
||||
newAction= new mapActions.SelectItem(action.queryState.itemCode);
|
||||
} else {
|
||||
newAction= new mapActions.StartSearch(action.queryState);
|
||||
}
|
||||
return of(newAction);
|
||||
}));
|
||||
|
||||
constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService) {
|
||||
this._geojsonFormat = new GeoJSON();
|
||||
this._wktFormat = new WKT();
|
||||
}
|
||||
}
|
||||
|
@@ -1,69 +1,72 @@
|
||||
export interface IColor {
|
||||
red: number,
|
||||
green: number,
|
||||
blue: number,
|
||||
alpha: number,
|
||||
}
|
||||
|
||||
export interface IColorEntry {
|
||||
value: number,
|
||||
color: IColor
|
||||
}
|
||||
|
||||
export interface IHistogramEntry {
|
||||
value: number,
|
||||
freqency: number
|
||||
}
|
||||
|
||||
export interface IHistogram {
|
||||
min: number,
|
||||
max: number,
|
||||
mean: number,
|
||||
stddev: number,
|
||||
classes: number,
|
||||
entries: IHistogramEntry[]
|
||||
}
|
||||
|
||||
export interface IGradientstop {
|
||||
relativestop: number,
|
||||
color: IColor
|
||||
}
|
||||
|
||||
export interface IColorMap {
|
||||
gradient: IGradientstop[],
|
||||
noValue: IColorEntry,
|
||||
entries: IColorEntry[]
|
||||
}
|
||||
|
||||
export interface IBand {
|
||||
histogram: IHistogram
|
||||
}
|
||||
|
||||
|
||||
export interface IRenderer {
|
||||
band:IBand,
|
||||
colorMap: IColorMap
|
||||
}
|
||||
|
||||
export interface IRenderoutput {
|
||||
renderoutputType: string
|
||||
}
|
||||
|
||||
export interface IRenderoutputTiles {
|
||||
renderoutputType: string,
|
||||
minzoom: number,
|
||||
maxzoom: number
|
||||
}
|
||||
|
||||
export interface IRenderoutputImage {
|
||||
renderoutputType: string,
|
||||
extent: [number,number,number,number]
|
||||
}
|
||||
|
||||
export interface ILayer {
|
||||
name: string,
|
||||
unit: string,
|
||||
index: number,
|
||||
renderer: IRenderer,
|
||||
rendering: IRenderoutput
|
||||
}
|
||||
export interface IColor {
|
||||
red: number,
|
||||
green: number,
|
||||
blue: number,
|
||||
alpha: number,
|
||||
}
|
||||
|
||||
export interface IColorEntry {
|
||||
value: number,
|
||||
color: IColor,
|
||||
label: string
|
||||
}
|
||||
|
||||
export interface IHistogramEntry {
|
||||
value: number,
|
||||
freqency: number
|
||||
}
|
||||
|
||||
export interface IHistogram {
|
||||
min: number,
|
||||
max: number,
|
||||
mean: number,
|
||||
stddev: number,
|
||||
classes: number,
|
||||
entries: IHistogramEntry[]
|
||||
}
|
||||
|
||||
export interface IGradientstop {
|
||||
relativestop: number,
|
||||
color: IColor
|
||||
}
|
||||
|
||||
export interface IColorMap {
|
||||
gradient: IGradientstop[],
|
||||
noValue: IColorEntry,
|
||||
entries: IColorEntry[],
|
||||
colormapType: string
|
||||
}
|
||||
|
||||
export interface IBand {
|
||||
histogram: IHistogram
|
||||
}
|
||||
|
||||
|
||||
export interface IRenderer {
|
||||
band:IBand,
|
||||
colorMap: IColorMap,
|
||||
renderType:string
|
||||
}
|
||||
|
||||
export interface IRenderoutput {
|
||||
renderoutputType: string
|
||||
}
|
||||
|
||||
export interface IRenderoutputTiles {
|
||||
renderoutputType: string,
|
||||
minzoom: number,
|
||||
maxzoom: number
|
||||
}
|
||||
|
||||
export interface IRenderoutputImage {
|
||||
renderoutputType: string,
|
||||
extent: [number,number,number,number]
|
||||
}
|
||||
|
||||
export interface ILayer {
|
||||
name: string,
|
||||
unit: string,
|
||||
index: number,
|
||||
renderer: IRenderer,
|
||||
rendering: IRenderoutput
|
||||
}
|
||||
|
@@ -1,7 +0,0 @@
|
||||
export * from './map.state';
|
||||
export * from './selected.features';
|
||||
export * from './item.layer'
|
||||
export * from './layer.data'
|
||||
export * from './color.map';
|
||||
export * from './query.state';
|
||||
export * from './period.state';
|
@@ -1,369 +1,372 @@
|
||||
import { tassign } from 'tassign';
|
||||
import { IItem,Item } from '@farmmaps/common';
|
||||
import { IItemLayer,ItemLayer, IMapState,IQueryState,IPeriodState} from '../models'
|
||||
import * as mapActions from '../actions/map.actions';
|
||||
import {commonActions} from '@farmmaps/common';
|
||||
import { createSelector, createFeatureSelector } from '@ngrx/store';
|
||||
|
||||
import {Feature} from 'ol';
|
||||
|
||||
import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
|
||||
|
||||
import { MODULE_NAME } from '../module-name';
|
||||
|
||||
const startDate:Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
|
||||
const endDate:Date = new Date(Date.now());
|
||||
|
||||
export const initialQueryState: IQueryState = {
|
||||
itemCode: null,
|
||||
parentCode: null,
|
||||
level: 1,
|
||||
itemType: null,
|
||||
bboxFilter: false,
|
||||
query: null,
|
||||
tags: null,
|
||||
endDate: null,
|
||||
startDate: null,
|
||||
bbox: []
|
||||
};
|
||||
|
||||
export interface State {
|
||||
period:IPeriodState,
|
||||
mapState: IMapState,
|
||||
viewExtent: number[],
|
||||
queryState: IQueryState,
|
||||
query:IQueryState,
|
||||
parentCode: string,
|
||||
features: Array<Feature>,
|
||||
panelVisible: boolean,
|
||||
panelCollapsed: boolean,
|
||||
selectedFeature: Feature,
|
||||
selectedItem:IItem,
|
||||
clearEnabled: boolean,
|
||||
searchCollapsed: boolean,
|
||||
searchMinified: boolean,
|
||||
menuVisible: boolean,
|
||||
extent: number[],
|
||||
baseLayers: Array<IItemLayer>
|
||||
overlayLayers: Array<IItemLayer>,
|
||||
selectedItemLayer: IItemLayer,
|
||||
projection: string,
|
||||
selectedBaseLayer: IItemLayer,
|
||||
selectedOverlayLayer: IItemLayer
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
period: {
|
||||
startDate: startDate,
|
||||
endDate: endDate
|
||||
},
|
||||
mapState: {
|
||||
zoom: 8,
|
||||
rotation: 0,
|
||||
xCenter: 5.377554,
|
||||
yCenter: 52.162422,
|
||||
baseLayerCode: ""
|
||||
},
|
||||
viewExtent:[],
|
||||
queryState: tassign(initialQueryState),
|
||||
query: tassign(initialQueryState),
|
||||
parentCode: null,
|
||||
features: [],
|
||||
panelVisible: false,
|
||||
panelCollapsed: false,
|
||||
selectedFeature: null,
|
||||
selectedItem: null,
|
||||
clearEnabled: false,
|
||||
searchCollapsed: true,
|
||||
searchMinified:false,
|
||||
menuVisible: true,
|
||||
extent: null,
|
||||
baseLayers: [],
|
||||
overlayLayers: [],
|
||||
projection: "EPSG:3857",
|
||||
selectedBaseLayer: null,
|
||||
selectedOverlayLayer: null,
|
||||
selectedItemLayer: null
|
||||
}
|
||||
|
||||
export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
|
||||
switch (action.type) {
|
||||
case ROUTER_NAVIGATION: {
|
||||
let a = action as RouterNavigationAction;
|
||||
return tassign(state);
|
||||
}
|
||||
case mapActions.SETMAPSTATE: {
|
||||
let a = action as mapActions.SetMapState;
|
||||
return tassign(state, {
|
||||
mapState: a.mapState
|
||||
});
|
||||
}
|
||||
case mapActions.SETQUERYSTATE: {
|
||||
let a = action as mapActions.SetQueryState;
|
||||
return tassign(state, { queryState: tassign(a.queryState )});
|
||||
}
|
||||
case mapActions.SETSTATE: {
|
||||
let a = action as mapActions.SetState;
|
||||
return tassign(state, { mapState: tassign(a.mapState), queryState: tassign(a.queryState)});
|
||||
}
|
||||
case mapActions.SETVIEWEXTENT: {
|
||||
let a = action as mapActions.SetViewExtent;
|
||||
return tassign(state, { viewExtent: a.extent });
|
||||
}
|
||||
case mapActions.SETPARENT: {
|
||||
let a = action as mapActions.SetParent;
|
||||
return tassign(state, {
|
||||
parentCode : a.parentCode
|
||||
});
|
||||
}
|
||||
case mapActions.STARTSEARCHSUCCESS: {
|
||||
let a = action as mapActions.StartSearchSuccess;
|
||||
return tassign(state, {
|
||||
panelVisible: true,
|
||||
clearEnabled: true,
|
||||
searchMinified: true,
|
||||
features: a.features
|
||||
});
|
||||
}
|
||||
case mapActions.SELECTFEATURE: {
|
||||
let a = action as mapActions.SelectFeature;
|
||||
return tassign(state, {
|
||||
selectedFeature: state.selectedItem?state.selectedFeature: a.feature
|
||||
});
|
||||
}
|
||||
case mapActions.SELECTITEM: {
|
||||
return tassign(state, {
|
||||
selectedItem: null,
|
||||
searchMinified:false,
|
||||
selectedItemLayer: null,
|
||||
features:[]
|
||||
});
|
||||
}
|
||||
case mapActions.SELECTITEMSUCCESS: {
|
||||
let a = action as mapActions.SelectItemSuccess;
|
||||
var itemLayer = null;
|
||||
if (a.item && "vnd.farmmaps.itemtype.layer,vnd.farmmaps.itemtype.shape.processed,vnd.farmmaps.itemtype.geotiff.processed".indexOf(a.item.itemType) >=0 ) {
|
||||
itemLayer = new ItemLayer(a.item);
|
||||
}
|
||||
return tassign(state, {
|
||||
selectedItem: a.item,
|
||||
selectedItemLayer: itemLayer,
|
||||
panelVisible: a.item != null,
|
||||
clearEnabled: a.item != null,
|
||||
searchCollapsed: false,
|
||||
searchMinified: true,
|
||||
queryState: tassign(state.queryState, {itemCode:a.item ? a.item.code:null})
|
||||
});
|
||||
}
|
||||
case mapActions.STARTSEARCH: {
|
||||
let a = action as mapActions.StartSearch;
|
||||
return tassign(state, {
|
||||
selectedItem: null,
|
||||
selectedItemLayer:null,
|
||||
queryState: tassign(a.queryState),
|
||||
searchCollapsed: false,
|
||||
searchMinified: true,
|
||||
menuVisible:false
|
||||
});
|
||||
}
|
||||
case mapActions.DOQUERY: {
|
||||
let a = action as mapActions.DoQuery;
|
||||
return tassign(state, {
|
||||
query: tassign(a.query, { bbox: a.query.bboxFilter ? state.viewExtent : [] })});
|
||||
}
|
||||
case mapActions.ADDFEATURESUCCESS: {
|
||||
let a = action as mapActions.AddFeatureSuccess;
|
||||
let features = state.features.slice();
|
||||
features.push(a.feature);
|
||||
return tassign(state, {
|
||||
panelVisible: true,
|
||||
selectedFeature: a.feature,
|
||||
menuVisible: false,
|
||||
extent: a.feature.getGeometry().getExtent(),
|
||||
searchCollapsed: false,
|
||||
clearEnabled:true,
|
||||
features:features
|
||||
});
|
||||
}
|
||||
case mapActions.UPDATEFEATURESUCCESS: {
|
||||
let a = action as mapActions.UpdateFeatureSuccess;
|
||||
let features: any[] = [];
|
||||
var index = -1;
|
||||
for (var i = 0; i < state.features.length; i++) {
|
||||
if (state.features[i].get("code") == a.feature.get("code")) {
|
||||
features.push(a.feature);
|
||||
} else {
|
||||
features.push(state.features[i]);
|
||||
}
|
||||
}
|
||||
return tassign(state, { features: features });
|
||||
}
|
||||
case mapActions.EXPANDSEARCH: {
|
||||
return tassign(state, { searchCollapsed: false });
|
||||
}
|
||||
case mapActions.COLLAPSESEARCH: {
|
||||
return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
|
||||
}
|
||||
case mapActions.TOGGLEMENU: {
|
||||
return tassign(state, { menuVisible: !state.menuVisible });
|
||||
}
|
||||
case mapActions.SETEXTENT: {
|
||||
let a = action as mapActions.SetExtent;
|
||||
return tassign(state, { extent: a.extent });
|
||||
}
|
||||
case mapActions.ADDLAYER: {
|
||||
let a = action as mapActions.AddLayer;
|
||||
let itemLayers = state.overlayLayers.slice(0);
|
||||
let itemLayer = new ItemLayer(a.item);
|
||||
itemLayer.layerIndex = a.layerIndex == -1 ? 0 : a.layerIndex;
|
||||
itemLayers.push(itemLayer);
|
||||
return tassign(state, { overlayLayers: itemLayers, selectedOverlayLayer: itemLayer });
|
||||
}
|
||||
case mapActions.REMOVELAYER: {
|
||||
let a = action as mapActions.RemoveLayer;
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
var selectedOverlayLayer: IItemLayer = null;
|
||||
if (i>0 && state.overlayLayers.length > 1)
|
||||
selectedOverlayLayer = state.overlayLayers[i - 1];
|
||||
else if (i == 0 && state.overlayLayers.length > 1)
|
||||
selectedOverlayLayer = state.overlayLayers[i + 1];
|
||||
newLayers.splice(i, 1);
|
||||
return tassign(state, { overlayLayers: newLayers, selectedOverlayLayer: selectedOverlayLayer });
|
||||
}
|
||||
case mapActions.SETVISIBILITY: {
|
||||
let a = action as mapActions.SetVisibility;
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
newLayers[i].visible = a.visibility;
|
||||
return tassign(state, { overlayLayers: newLayers });
|
||||
}
|
||||
case mapActions.SETOPACITY: {
|
||||
let a = action as mapActions.SetOpacity;
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
newLayers[i].opacity = a.opacity;
|
||||
return tassign(state, { overlayLayers: newLayers });
|
||||
}
|
||||
case mapActions.SETLAYERINDEX: {
|
||||
let a = action as mapActions.SetLayerIndex;
|
||||
if (a.itemLayer == null) {
|
||||
var newItemlayer = new ItemLayer(state.selectedItemLayer.item);
|
||||
newItemlayer.layerIndex = a.layerIndex;
|
||||
return tassign(state, { selectedItemLayer: newItemlayer})
|
||||
} else {
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
newLayers[i].layerIndex = a.layerIndex;
|
||||
return tassign(state, { overlayLayers: newLayers });
|
||||
}
|
||||
}
|
||||
case mapActions.LOADBASELAYERSSUCCESS: {
|
||||
let a =action as mapActions.LoadBaseLayersSuccess;
|
||||
let baseLayers:ItemLayer[] = [];
|
||||
for (let item of a.items) {
|
||||
var l = new ItemLayer(item);
|
||||
l.visible = false;
|
||||
baseLayers.push(l);
|
||||
}
|
||||
var selectedBaseLayer: IItemLayer = null;
|
||||
var mapState = tassign(state.mapState);
|
||||
console.debug(`Base layerload: ${mapState.baseLayerCode}`)
|
||||
if (baseLayers.length > 0 && mapState.baseLayerCode != "") {
|
||||
selectedBaseLayer = baseLayers.filter(layer => layer.item.code === mapState.baseLayerCode)[0];
|
||||
selectedBaseLayer.visible = true;
|
||||
} else if (baseLayers.length > 0) {
|
||||
selectedBaseLayer = baseLayers[0];
|
||||
selectedBaseLayer.visible = true;
|
||||
mapState.baseLayerCode = selectedBaseLayer.item.code;
|
||||
}
|
||||
return tassign(state, { mapState:mapState, baseLayers: baseLayers, selectedBaseLayer: selectedBaseLayer });
|
||||
}
|
||||
case mapActions.SELECTBASELAYER: {
|
||||
let a = action as mapActions.SelectBaseLayer;
|
||||
let baseLayers = state.baseLayers.slice(0);
|
||||
baseLayers.forEach((l) => l.visible = false);
|
||||
let i = state.baseLayers.indexOf(a.itemLayer);
|
||||
baseLayers[i].visible = true;
|
||||
var mapState = tassign(state.mapState);
|
||||
mapState.baseLayerCode = a.itemLayer.item.code;
|
||||
return tassign(state, {mapState:mapState, baseLayers:baseLayers,selectedBaseLayer:a.itemLayer });
|
||||
}
|
||||
case mapActions.SELECTOVERLAYLAYER: {
|
||||
let a = action as mapActions.SelectOverlayLayer;
|
||||
return tassign(state, { selectedOverlayLayer: a.itemLayer });
|
||||
}
|
||||
case commonActions.ESCAPE: {
|
||||
let a = action as commonActions.Escape;
|
||||
let newQueryState = tassign(state.queryState, { query: null, tags: null, itemCode: null, parentCode: null, itemType: null });
|
||||
if (a.escapeKey) {
|
||||
return tassign(state, {
|
||||
panelVisible: false,
|
||||
panelCollapsed:false,
|
||||
selectedItem: null,
|
||||
selectedItemLayer: null,
|
||||
selectedFeature: null,
|
||||
queryState: newQueryState,
|
||||
clearEnabled: false,
|
||||
searchCollapsed: true,
|
||||
searchMinified: false,
|
||||
menuVisible:false,
|
||||
features: [],
|
||||
query:initialState.query
|
||||
});
|
||||
} else {
|
||||
return tassign(state, {});
|
||||
}
|
||||
}
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const getMapState = (state: State) => state.mapState;
|
||||
export const getParentCode = (state: State) => state.parentCode;
|
||||
export const getFeatures = (state: State) => state.features;
|
||||
export const getPanelVisible = (state: State) => state.panelVisible;
|
||||
export const getPanelCollapsed = (state: State) => state.panelCollapsed;
|
||||
export const getSelectedFeature = (state: State) => state.selectedFeature;
|
||||
export const getSelectedItem = (state: State) => state.selectedItem;
|
||||
export const getQueryState = (state: State) => state.queryState;
|
||||
export const getClearEnabled = (state: State) => state.clearEnabled;
|
||||
export const getSearchCollapsed = (state: State) => state.searchCollapsed;
|
||||
export const getSearchMinified = (state: State) => state.searchMinified;
|
||||
export const getMenuVisible = (state: State) => state.menuVisible;
|
||||
export const getExtent = (state: State) => state.extent;
|
||||
export const getOverlayLayers = (state: State) => state.overlayLayers;
|
||||
export const getBaseLayers = (state: State) => state.baseLayers;
|
||||
export const getProjection = (state: State) => state.projection;
|
||||
export const getSelectedBaseLayer = (state: State) => state.selectedBaseLayer;
|
||||
export const getSelectedOverlayLayer = (state: State) => state.selectedOverlayLayer;
|
||||
export const getQuery = (state: State) => state.query;
|
||||
export const getSelectedItemLayer = (state: State) => state.selectedItemLayer;
|
||||
export const getPeriod = (state:State) => state.period;
|
||||
|
||||
export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
|
||||
export const selectGetMapState= createSelector(selectMapState, getMapState);
|
||||
export const selectGetParentCode = createSelector(selectMapState, getParentCode);
|
||||
export const selectGetFeatures = createSelector(selectMapState, getFeatures);
|
||||
export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisible);
|
||||
export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
|
||||
export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
|
||||
export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
|
||||
export const selectGetQueryState = createSelector(selectMapState, getQueryState);
|
||||
export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
|
||||
export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
|
||||
export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
|
||||
export const selectGetMenuVisible = createSelector(selectMapState, getMenuVisible);
|
||||
export const selectGetExtent = createSelector(selectMapState, getExtent);
|
||||
export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
|
||||
export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);
|
||||
export const selectGetProjection = createSelector(selectMapState, getProjection);
|
||||
export const selectGetSelectedBaseLayer = createSelector(selectMapState, getSelectedBaseLayer);
|
||||
export const selectGetSelectedOverlayLayer = createSelector(selectMapState, getSelectedOverlayLayer);
|
||||
export const selectGetQuery = createSelector(selectMapState, getQuery);
|
||||
export const selectGetSelectedItemLayer = createSelector(selectMapState, getSelectedItemLayer);
|
||||
export const selectGetPeriod = createSelector(selectMapState, getPeriod);
|
||||
|
||||
|
||||
import { tassign } from 'tassign';
|
||||
import { IItem,Item } from '@farmmaps/common';
|
||||
import { IItemLayer,ItemLayer} from '../models/item.layer';
|
||||
import { IMapState} from '../models/map.state';
|
||||
import { IQueryState} from '../models/query.state';
|
||||
import { IPeriodState} from '../models/period.state';
|
||||
import * as mapActions from '../actions/map.actions';
|
||||
import {commonActions} from '@farmmaps/common';
|
||||
import { createSelector, createFeatureSelector } from '@ngrx/store';
|
||||
|
||||
import {Feature} from 'ol';
|
||||
|
||||
import { ROUTER_NAVIGATION, RouterNavigationAction } from '@ngrx/router-store';
|
||||
|
||||
import { MODULE_NAME } from '../module-name';
|
||||
|
||||
const startDate:Date = new Date(new Date(Date.now()).getFullYear(), new Date(Date.now()).getMonth() - 3, 1);
|
||||
const endDate:Date = new Date(Date.now());
|
||||
|
||||
export const initialQueryState: IQueryState = {
|
||||
itemCode: null,
|
||||
parentCode: null,
|
||||
level: 1,
|
||||
itemType: null,
|
||||
bboxFilter: false,
|
||||
query: null,
|
||||
tags: null,
|
||||
endDate: null,
|
||||
startDate: null,
|
||||
bbox: []
|
||||
};
|
||||
|
||||
export interface State {
|
||||
period:IPeriodState,
|
||||
mapState: IMapState,
|
||||
viewExtent: number[],
|
||||
queryState: IQueryState,
|
||||
query:IQueryState,
|
||||
parentCode: string,
|
||||
features: Array<Feature>,
|
||||
panelVisible: boolean,
|
||||
panelCollapsed: boolean,
|
||||
selectedFeature: Feature,
|
||||
selectedItem:IItem,
|
||||
clearEnabled: boolean,
|
||||
searchCollapsed: boolean,
|
||||
searchMinified: boolean,
|
||||
menuVisible: boolean,
|
||||
extent: number[],
|
||||
baseLayers: Array<IItemLayer>
|
||||
overlayLayers: Array<IItemLayer>,
|
||||
selectedItemLayer: IItemLayer,
|
||||
projection: string,
|
||||
selectedBaseLayer: IItemLayer,
|
||||
selectedOverlayLayer: IItemLayer
|
||||
}
|
||||
|
||||
export const initialState: State = {
|
||||
period: {
|
||||
startDate: startDate,
|
||||
endDate: endDate
|
||||
},
|
||||
mapState: {
|
||||
zoom: 8,
|
||||
rotation: 0,
|
||||
xCenter: 5.377554,
|
||||
yCenter: 52.162422,
|
||||
baseLayerCode: ""
|
||||
},
|
||||
viewExtent:[],
|
||||
queryState: tassign(initialQueryState),
|
||||
query: tassign(initialQueryState),
|
||||
parentCode: null,
|
||||
features: [],
|
||||
panelVisible: false,
|
||||
panelCollapsed: false,
|
||||
selectedFeature: null,
|
||||
selectedItem: null,
|
||||
clearEnabled: false,
|
||||
searchCollapsed: true,
|
||||
searchMinified:false,
|
||||
menuVisible: true,
|
||||
extent: null,
|
||||
baseLayers: [],
|
||||
overlayLayers: [],
|
||||
projection: "EPSG:3857",
|
||||
selectedBaseLayer: null,
|
||||
selectedOverlayLayer: null,
|
||||
selectedItemLayer: null
|
||||
}
|
||||
|
||||
export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
|
||||
switch (action.type) {
|
||||
case ROUTER_NAVIGATION: {
|
||||
let a = action as RouterNavigationAction;
|
||||
return tassign(state);
|
||||
}
|
||||
case mapActions.SETMAPSTATE: {
|
||||
let a = action as mapActions.SetMapState;
|
||||
return tassign(state, {
|
||||
mapState: a.mapState
|
||||
});
|
||||
}
|
||||
case mapActions.SETQUERYSTATE: {
|
||||
let a = action as mapActions.SetQueryState;
|
||||
return tassign(state, { queryState: tassign(a.queryState )});
|
||||
}
|
||||
case mapActions.SETSTATE: {
|
||||
let a = action as mapActions.SetState;
|
||||
return tassign(state, { mapState: tassign(a.mapState), queryState: tassign(a.queryState)});
|
||||
}
|
||||
case mapActions.SETVIEWEXTENT: {
|
||||
let a = action as mapActions.SetViewExtent;
|
||||
return tassign(state, { viewExtent: a.extent });
|
||||
}
|
||||
case mapActions.SETPARENT: {
|
||||
let a = action as mapActions.SetParent;
|
||||
return tassign(state, {
|
||||
parentCode : a.parentCode
|
||||
});
|
||||
}
|
||||
case mapActions.STARTSEARCHSUCCESS: {
|
||||
let a = action as mapActions.StartSearchSuccess;
|
||||
return tassign(state, {
|
||||
panelVisible: true,
|
||||
clearEnabled: true,
|
||||
searchMinified: true,
|
||||
features: a.features
|
||||
});
|
||||
}
|
||||
case mapActions.SELECTFEATURE: {
|
||||
let a = action as mapActions.SelectFeature;
|
||||
return tassign(state, {
|
||||
selectedFeature: state.selectedItem?state.selectedFeature: a.feature
|
||||
});
|
||||
}
|
||||
case mapActions.SELECTITEM: {
|
||||
return tassign(state, {
|
||||
selectedItem: null,
|
||||
searchMinified:false,
|
||||
selectedItemLayer: null,
|
||||
features:[]
|
||||
});
|
||||
}
|
||||
case mapActions.SELECTITEMSUCCESS: {
|
||||
let a = action as mapActions.SelectItemSuccess;
|
||||
var itemLayer = null;
|
||||
if (a.item && "vnd.farmmaps.itemtype.layer,vnd.farmmaps.itemtype.shape.processed,vnd.farmmaps.itemtype.geotiff.processed".indexOf(a.item.itemType) >=0 ) {
|
||||
itemLayer = new ItemLayer(a.item);
|
||||
}
|
||||
return tassign(state, {
|
||||
selectedItem: a.item,
|
||||
selectedItemLayer: itemLayer,
|
||||
panelVisible: a.item != null,
|
||||
clearEnabled: a.item != null,
|
||||
searchCollapsed: false,
|
||||
searchMinified: true,
|
||||
queryState: tassign(state.queryState, {itemCode:a.item ? a.item.code:null})
|
||||
});
|
||||
}
|
||||
case mapActions.STARTSEARCH: {
|
||||
let a = action as mapActions.StartSearch;
|
||||
return tassign(state, {
|
||||
selectedItem: null,
|
||||
selectedItemLayer:null,
|
||||
queryState: tassign(a.queryState),
|
||||
searchCollapsed: false,
|
||||
searchMinified: true,
|
||||
menuVisible:false
|
||||
});
|
||||
}
|
||||
case mapActions.DOQUERY: {
|
||||
let a = action as mapActions.DoQuery;
|
||||
return tassign(state, {
|
||||
query: tassign(a.query, { bbox: a.query.bboxFilter ? state.viewExtent : [] })});
|
||||
}
|
||||
case mapActions.ADDFEATURESUCCESS: {
|
||||
let a = action as mapActions.AddFeatureSuccess;
|
||||
let features = state.features.slice();
|
||||
features.push(a.feature);
|
||||
return tassign(state, {
|
||||
panelVisible: true,
|
||||
selectedFeature: a.feature,
|
||||
menuVisible: false,
|
||||
extent: a.feature.getGeometry().getExtent(),
|
||||
searchCollapsed: false,
|
||||
clearEnabled:true,
|
||||
features:features
|
||||
});
|
||||
}
|
||||
case mapActions.UPDATEFEATURESUCCESS: {
|
||||
let a = action as mapActions.UpdateFeatureSuccess;
|
||||
let features: any[] = [];
|
||||
var index = -1;
|
||||
for (var i = 0; i < state.features.length; i++) {
|
||||
if (state.features[i].getId() == a.feature.getId()) {
|
||||
features.push(a.feature);
|
||||
} else {
|
||||
features.push(state.features[i]);
|
||||
}
|
||||
}
|
||||
return tassign(state, { features: features });
|
||||
}
|
||||
case mapActions.EXPANDSEARCH: {
|
||||
return tassign(state, { searchCollapsed: false });
|
||||
}
|
||||
case mapActions.COLLAPSESEARCH: {
|
||||
return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
|
||||
}
|
||||
case mapActions.TOGGLEMENU: {
|
||||
return tassign(state, { menuVisible: !state.menuVisible });
|
||||
}
|
||||
case mapActions.SETEXTENT: {
|
||||
let a = action as mapActions.SetExtent;
|
||||
return tassign(state, { extent: a.extent });
|
||||
}
|
||||
case mapActions.ADDLAYER: {
|
||||
let a = action as mapActions.AddLayer;
|
||||
let itemLayers = state.overlayLayers.slice(0);
|
||||
let itemLayer = new ItemLayer(a.item);
|
||||
itemLayer.layerIndex = a.layerIndex == -1 ? 0 : a.layerIndex;
|
||||
itemLayers.push(itemLayer);
|
||||
return tassign(state, { overlayLayers: itemLayers, selectedOverlayLayer: itemLayer });
|
||||
}
|
||||
case mapActions.REMOVELAYER: {
|
||||
let a = action as mapActions.RemoveLayer;
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
var selectedOverlayLayer: IItemLayer = null;
|
||||
if (i>0 && state.overlayLayers.length > 1)
|
||||
selectedOverlayLayer = state.overlayLayers[i - 1];
|
||||
else if (i == 0 && state.overlayLayers.length > 1)
|
||||
selectedOverlayLayer = state.overlayLayers[i + 1];
|
||||
newLayers.splice(i, 1);
|
||||
return tassign(state, { overlayLayers: newLayers, selectedOverlayLayer: selectedOverlayLayer });
|
||||
}
|
||||
case mapActions.SETVISIBILITY: {
|
||||
let a = action as mapActions.SetVisibility;
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
newLayers[i].visible = a.visibility;
|
||||
return tassign(state, { overlayLayers: newLayers });
|
||||
}
|
||||
case mapActions.SETOPACITY: {
|
||||
let a = action as mapActions.SetOpacity;
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
newLayers[i].opacity = a.opacity;
|
||||
return tassign(state, { overlayLayers: newLayers });
|
||||
}
|
||||
case mapActions.SETLAYERINDEX: {
|
||||
let a = action as mapActions.SetLayerIndex;
|
||||
if (a.itemLayer == null) {
|
||||
var newItemlayer = new ItemLayer(state.selectedItemLayer.item);
|
||||
newItemlayer.layerIndex = a.layerIndex;
|
||||
return tassign(state, { selectedItemLayer: newItemlayer})
|
||||
} else {
|
||||
let newLayers = state.overlayLayers.slice(0);
|
||||
let i = state.overlayLayers.indexOf(a.itemLayer);
|
||||
newLayers[i].layerIndex = a.layerIndex;
|
||||
return tassign(state, { overlayLayers: newLayers });
|
||||
}
|
||||
}
|
||||
case mapActions.LOADBASELAYERSSUCCESS: {
|
||||
let a =action as mapActions.LoadBaseLayersSuccess;
|
||||
let baseLayers:ItemLayer[] = [];
|
||||
for (let item of a.items) {
|
||||
var l = new ItemLayer(item);
|
||||
l.visible = false;
|
||||
baseLayers.push(l);
|
||||
}
|
||||
var selectedBaseLayer: IItemLayer = null;
|
||||
var mapState = tassign(state.mapState);
|
||||
console.debug(`Base layerload: ${mapState.baseLayerCode}`)
|
||||
if (baseLayers.length > 0 && mapState.baseLayerCode != "") {
|
||||
selectedBaseLayer = baseLayers.filter(layer => layer.item.code === mapState.baseLayerCode)[0];
|
||||
selectedBaseLayer.visible = true;
|
||||
} else if (baseLayers.length > 0) {
|
||||
selectedBaseLayer = baseLayers[0];
|
||||
selectedBaseLayer.visible = true;
|
||||
mapState.baseLayerCode = selectedBaseLayer.item.code;
|
||||
}
|
||||
return tassign(state, { mapState:mapState, baseLayers: baseLayers, selectedBaseLayer: selectedBaseLayer });
|
||||
}
|
||||
case mapActions.SELECTBASELAYER: {
|
||||
let a = action as mapActions.SelectBaseLayer;
|
||||
let baseLayers = state.baseLayers.slice(0);
|
||||
baseLayers.forEach((l) => l.visible = false);
|
||||
let i = state.baseLayers.indexOf(a.itemLayer);
|
||||
baseLayers[i].visible = true;
|
||||
var mapState = tassign(state.mapState);
|
||||
mapState.baseLayerCode = a.itemLayer.item.code;
|
||||
return tassign(state, {mapState:mapState, baseLayers:baseLayers,selectedBaseLayer:a.itemLayer });
|
||||
}
|
||||
case mapActions.SELECTOVERLAYLAYER: {
|
||||
let a = action as mapActions.SelectOverlayLayer;
|
||||
return tassign(state, { selectedOverlayLayer: a.itemLayer });
|
||||
}
|
||||
case commonActions.ESCAPE: {
|
||||
let a = action as commonActions.Escape;
|
||||
let newQueryState = tassign(state.queryState, { query: null, tags: null, itemCode: null, parentCode: null, itemType: null });
|
||||
if (a.escapeKey) {
|
||||
return tassign(state, {
|
||||
panelVisible: false,
|
||||
panelCollapsed:false,
|
||||
selectedItem: null,
|
||||
selectedItemLayer: null,
|
||||
selectedFeature: null,
|
||||
queryState: newQueryState,
|
||||
clearEnabled: false,
|
||||
searchCollapsed: true,
|
||||
searchMinified: false,
|
||||
menuVisible:false,
|
||||
features: [],
|
||||
query:initialState.query
|
||||
});
|
||||
} else {
|
||||
return tassign(state, {});
|
||||
}
|
||||
}
|
||||
default: {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const getMapState = (state: State) => state.mapState;
|
||||
export const getParentCode = (state: State) => state.parentCode;
|
||||
export const getFeatures = (state: State) => state.features;
|
||||
export const getPanelVisible = (state: State) => state.panelVisible;
|
||||
export const getPanelCollapsed = (state: State) => state.panelCollapsed;
|
||||
export const getSelectedFeature = (state: State) => state.selectedFeature;
|
||||
export const getSelectedItem = (state: State) => state.selectedItem;
|
||||
export const getQueryState = (state: State) => state.queryState;
|
||||
export const getClearEnabled = (state: State) => state.clearEnabled;
|
||||
export const getSearchCollapsed = (state: State) => state.searchCollapsed;
|
||||
export const getSearchMinified = (state: State) => state.searchMinified;
|
||||
export const getMenuVisible = (state: State) => state.menuVisible;
|
||||
export const getExtent = (state: State) => state.extent;
|
||||
export const getOverlayLayers = (state: State) => state.overlayLayers;
|
||||
export const getBaseLayers = (state: State) => state.baseLayers;
|
||||
export const getProjection = (state: State) => state.projection;
|
||||
export const getSelectedBaseLayer = (state: State) => state.selectedBaseLayer;
|
||||
export const getSelectedOverlayLayer = (state: State) => state.selectedOverlayLayer;
|
||||
export const getQuery = (state: State) => state.query;
|
||||
export const getSelectedItemLayer = (state: State) => state.selectedItemLayer;
|
||||
export const getPeriod = (state:State) => state.period;
|
||||
|
||||
export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
|
||||
export const selectGetMapState= createSelector(selectMapState, getMapState);
|
||||
export const selectGetParentCode = createSelector(selectMapState, getParentCode);
|
||||
export const selectGetFeatures = createSelector(selectMapState, getFeatures);
|
||||
export const selectGetPanelVisible = createSelector(selectMapState, getPanelVisible);
|
||||
export const selectGetPanelCollapsed = createSelector(selectMapState, getPanelCollapsed);
|
||||
export const selectGetSelectedFeature = createSelector(selectMapState, getSelectedFeature);
|
||||
export const selectGetSelectedItem = createSelector(selectMapState, getSelectedItem);
|
||||
export const selectGetQueryState = createSelector(selectMapState, getQueryState);
|
||||
export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
|
||||
export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
|
||||
export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
|
||||
export const selectGetMenuVisible = createSelector(selectMapState, getMenuVisible);
|
||||
export const selectGetExtent = createSelector(selectMapState, getExtent);
|
||||
export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
|
||||
export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);
|
||||
export const selectGetProjection = createSelector(selectMapState, getProjection);
|
||||
export const selectGetSelectedBaseLayer = createSelector(selectMapState, getSelectedBaseLayer);
|
||||
export const selectGetSelectedOverlayLayer = createSelector(selectMapState, getSelectedOverlayLayer);
|
||||
export const selectGetQuery = createSelector(selectMapState, getQuery);
|
||||
export const selectGetSelectedItemLayer = createSelector(selectMapState, getSelectedItemLayer);
|
||||
export const selectGetPeriod = createSelector(selectMapState, getPeriod);
|
||||
|
||||
|
||||
|
@@ -0,0 +1,24 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observer, Observable } from 'rxjs';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class DeviceOrientationService {
|
||||
|
||||
/**
|
||||
* Tries HTML5 geolocation.
|
||||
*
|
||||
* Wraps the Geolocation API into an observable.
|
||||
*
|
||||
* @return An observable of Bearing
|
||||
*/
|
||||
getCurrentBearing(): Observable<number> {
|
||||
return Observable.create((observer: Observer<number>) => {
|
||||
let sensor = new Magnetometer();
|
||||
sensor.onreading= (ev:Event) => {
|
||||
observer.next(Math.atan2(sensor.y, sensor.x) * (180 / Math.PI));
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
}
|
70
projects/common/package-lock.json
generated
70
projects/common/package-lock.json
generated
@@ -1,35 +1,35 @@
|
||||
{
|
||||
"name": "@farmmaps/common",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"angular-oauth2-oidc": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
|
||||
"integrity": "sha512-jtOv4IWEjSFfBHVE4seWGWT/ZfWJ95QJ1JaFhVVGJEF64ibGuPwV3ztwTOUl98QHi/Yg4PXXDAisb31JnIbxBw==",
|
||||
"requires": {
|
||||
"jsrsasign": "^8.0.12",
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"jsrsasign": {
|
||||
"version": "8.0.12",
|
||||
"resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
|
||||
"integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
|
||||
},
|
||||
"ngx-uploadx": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.1.3.tgz",
|
||||
"integrity": "sha512-RX3uEaqMTpjTv5mtdnTQYsDOED3Qg5V3OBU5ohOyL35uL+dllF7I0y+kojJprm9thzHNAWih1DLeTlVWZKo+hQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
}
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "@farmmaps/common",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"angular-oauth2-oidc": {
|
||||
"version": "8.0.4",
|
||||
"resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-8.0.4.tgz",
|
||||
"integrity": "sha512-7/3niJBqD7rnElcW+SudE36g7zMWChW4gSq7NpJSzDA4aQadBgvg0hn317MfPm9tpYGrpE3G/z2NMnbzek4TMA==",
|
||||
"requires": {
|
||||
"jsrsasign": "^8.0.12",
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"jsrsasign": {
|
||||
"version": "8.0.12",
|
||||
"resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
|
||||
"integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
|
||||
},
|
||||
"ngx-uploadx": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.3.2.tgz",
|
||||
"integrity": "sha512-gRdXXq2cRU9HE6dj65qay9GV8NRC7n8y5LtMzJWqsfu2k3CHMQxo2TqZwA9/l/PqJ76RoO7sTPy1OenFQ+krkQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,24 +1,24 @@
|
||||
{
|
||||
"name": "@farmmaps/common",
|
||||
"version": "0.0.1",
|
||||
"publishConfig": {
|
||||
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
|
||||
},
|
||||
"dependencies": {
|
||||
"angular-oauth2-oidc": "^5.0.2",
|
||||
"ngx-uploadx": "^3.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
|
||||
"@angular/common": "^7.2.0",
|
||||
"@angular/core": "^7.2.0",
|
||||
"@angular/forms": "^7.2.0",
|
||||
"@ngrx/effects": "^7.2",
|
||||
"@ngrx/router-store": "^7.2",
|
||||
"@ngrx/store": "^7.2",
|
||||
"tassign": "^1.0.0",
|
||||
"bootstrap": "^4.3.1",
|
||||
"@aspnet/signalr": "^1.1.4",
|
||||
"font-awesome": "^4.7.0"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "@farmmaps/common",
|
||||
"version": "0.0.1",
|
||||
"publishConfig": {
|
||||
"registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
|
||||
},
|
||||
"dependencies": {
|
||||
"angular-oauth2-oidc": "^8.0.2",
|
||||
"ngx-uploadx": "^3.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ng-bootstrap/ng-bootstrap": "^4.2.1",
|
||||
"@angular/common": "^8.2.0",
|
||||
"@angular/core": "^8.2.0",
|
||||
"@angular/forms": "^8.2.0",
|
||||
"@ngrx/effects": "^8.2",
|
||||
"@ngrx/router-store": "^8.2",
|
||||
"@ngrx/store": "^8.2",
|
||||
"tassign": "^1.0.0",
|
||||
"bootstrap": "^4.3.1",
|
||||
"@aspnet/signalr": "^1.1.4",
|
||||
"font-awesome": "^4.7.0"
|
||||
}
|
||||
}
|
||||
|
@@ -1,234 +1,243 @@
|
||||
import { Action } from '@ngrx/store';
|
||||
|
||||
import { IItemTypes } from '../models/item.types';
|
||||
import { IListItem } from '../models/list.item';
|
||||
import { IUser } from '../models/user';
|
||||
|
||||
export const INITUSER = '[AppCommon] InitUser';
|
||||
export const INITUSERSUCCESS = '[AppCommon] InitUserSuccess';
|
||||
|
||||
export const INITROOT = '[Explorer] InitRoot';
|
||||
export const INITROOTSUCCESS = '[Explorer] InitRootSuccess';
|
||||
|
||||
export const OPENMODAL = '[AppCommon] OpenModal';
|
||||
export const CLOSEMODAL = '[AppCommon] CloseModal';
|
||||
export const LOGIN = '[AppCommon] Login';
|
||||
export const INITIALIZED = '[AppCommon] Initialized';
|
||||
export const ESCAPE = '[AppCommon] Escape';
|
||||
|
||||
export const LOADITEMTYPES = '[AppCommon] LoadItemTypes';
|
||||
export const LOADITEMTYPESSUCCESS = '[AppCommon] LoadItemTypesSuccess';
|
||||
|
||||
export const ITEMCHANGEDEVENT = '[AppCommon] ItemChangedEvent';
|
||||
export const ITEMADDEDEVENT = '[AppCommon] ItemAddedEvent';
|
||||
export const ITEMDELETEDEVENT = '[AppCommon] ItemDeletedEvent';
|
||||
|
||||
export const TASKSTARTEVENT = '[AppCommon] TaskStartEvent';
|
||||
export const TASKENDEVENT = '[AppCommon] TaskEndEvent';
|
||||
export const TASKERRORTEVENT = '[AppCommon] TaskErrorEvent';
|
||||
|
||||
export const DELETEITEMS = '[AppCommon] DeleteItems';
|
||||
export const DELETEITEMSSUCCESS = '[AppCommon] DeleteItemsSuccess';
|
||||
|
||||
export const STARTROUTELOADING = '[AppCommon] StartRouteLoading';
|
||||
export const ENDROUTELOADING = '[AppCommon] EndRouteLoading';
|
||||
|
||||
export const FULLSCREEN = '[AppCommon] FullScreen';
|
||||
export const SHOWNAVBAR = '[AppCommon] ShowNavBar';
|
||||
|
||||
export const EDITITEM = "[AppCommon] EditItem";
|
||||
|
||||
export const VIEWITEM = "[AppCommon] ViewItem";
|
||||
|
||||
export const FAIL = '[AppCommon] Fail';
|
||||
|
||||
export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
|
||||
|
||||
export class InitUser implements Action {
|
||||
readonly type = INITUSER;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class InitUserSuccess implements Action {
|
||||
readonly type = INITUSERSUCCESS;
|
||||
|
||||
constructor(public user:IUser ) { }
|
||||
}
|
||||
|
||||
export class InitRoot implements Action {
|
||||
readonly type = INITROOT;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class InitRootSuccess implements Action {
|
||||
readonly type = INITROOTSUCCESS;
|
||||
|
||||
constructor(public items:IListItem[]) { }
|
||||
}
|
||||
|
||||
export class OpenModal implements Action {
|
||||
readonly type = OPENMODAL;
|
||||
|
||||
constructor(public modalName: string) { }
|
||||
}
|
||||
|
||||
export class CloseModal implements Action {
|
||||
readonly type = CLOSEMODAL;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class StartRouteLoading implements Action {
|
||||
readonly type = STARTROUTELOADING;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class EndRouteLoading implements Action {
|
||||
readonly type = ENDROUTELOADING;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class Login implements Action {
|
||||
readonly type = LOGIN;
|
||||
|
||||
constructor(public url: string) { }
|
||||
}
|
||||
|
||||
export class Initialized implements Action {
|
||||
readonly type = INITIALIZED;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class Escape implements Action {
|
||||
readonly type = ESCAPE;
|
||||
|
||||
constructor(public escapeKey:boolean, public click:boolean) { }
|
||||
}
|
||||
|
||||
export class LoadItemTypes implements Action {
|
||||
readonly type = LOADITEMTYPES;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class LoadItemTypesSuccess implements Action {
|
||||
readonly type = LOADITEMTYPESSUCCESS;
|
||||
|
||||
constructor(public itemTypes: IItemTypes) { }
|
||||
}
|
||||
|
||||
export class Fail implements Action {
|
||||
readonly type = FAIL;
|
||||
|
||||
constructor(public payload: string) { }
|
||||
}
|
||||
|
||||
export class ItemChangedEvent implements Action {
|
||||
readonly type = ITEMCHANGEDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class ItemAddedEvent implements Action {
|
||||
readonly type = ITEMADDEDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class ItemDeletedEvent implements Action {
|
||||
readonly type = ITEMDELETEDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class TaskStartEvent implements Action {
|
||||
readonly type = TASKSTARTEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class TaskEndEvent implements Action {
|
||||
readonly type = TASKENDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class TaskErrorEvent implements Action {
|
||||
readonly type = TASKERRORTEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class DeleteItems implements Action {
|
||||
readonly type = DELETEITEMS;
|
||||
|
||||
constructor(public itemCodes: string[]) { }
|
||||
}
|
||||
|
||||
export class DeleteItemsSuccess implements Action {
|
||||
readonly type = DELETEITEMSSUCCESS;
|
||||
|
||||
constructor(public deletedItemCodes: string[]) { }
|
||||
}
|
||||
|
||||
export class EditItem implements Action {
|
||||
readonly type = EDITITEM;
|
||||
|
||||
constructor(public item: IListItem) { }
|
||||
}
|
||||
|
||||
export class ViewItem implements Action {
|
||||
readonly type = VIEWITEM;
|
||||
|
||||
constructor(public item: IListItem) { }
|
||||
}
|
||||
|
||||
export class FullScreen implements Action {
|
||||
readonly type = FULLSCREEN;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class ShowNavBar implements Action {
|
||||
readonly type = SHOWNAVBAR;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class UploadedFileClick implements Action {
|
||||
readonly type = UPLOADEDFILECLICK;
|
||||
constructor(public itemCode:string) { }
|
||||
}
|
||||
|
||||
|
||||
export type Actions = OpenModal
|
||||
| InitRoot
|
||||
| InitRootSuccess
|
||||
| CloseModal
|
||||
| Login
|
||||
| Initialized
|
||||
| ItemChangedEvent
|
||||
| ItemAddedEvent
|
||||
| ItemDeletedEvent
|
||||
| Escape
|
||||
| LoadItemTypes
|
||||
| LoadItemTypesSuccess
|
||||
| DeleteItems
|
||||
| DeleteItemsSuccess
|
||||
| Fail
|
||||
| EditItem
|
||||
| ViewItem
|
||||
| FullScreen
|
||||
| ShowNavBar
|
||||
| StartRouteLoading
|
||||
| EndRouteLoading
|
||||
| InitUser
|
||||
| InitUserSuccess
|
||||
| TaskStartEvent
|
||||
| TaskEndEvent
|
||||
| TaskErrorEvent;
|
||||
import { Action } from '@ngrx/store';
|
||||
|
||||
import { IItemTypes } from '../models/item.types';
|
||||
import { IListItem } from '../models/list.item';
|
||||
import { IUser } from '../models/user';
|
||||
|
||||
export const INITUSER = '[AppCommon] InitUser';
|
||||
export const INITUSERSUCCESS = '[AppCommon] InitUserSuccess';
|
||||
|
||||
export const INITROOT = '[Explorer] InitRoot';
|
||||
export const INITROOTSUCCESS = '[Explorer] InitRootSuccess';
|
||||
|
||||
export const OPENMODAL = '[AppCommon] OpenModal';
|
||||
export const CLOSEMODAL = '[AppCommon] CloseModal';
|
||||
export const LOGIN = '[AppCommon] Login';
|
||||
export const INITIALIZED = '[AppCommon] Initialized';
|
||||
export const ESCAPE = '[AppCommon] Escape';
|
||||
|
||||
export const LOADITEMTYPES = '[AppCommon] LoadItemTypes';
|
||||
export const LOADITEMTYPESSUCCESS = '[AppCommon] LoadItemTypesSuccess';
|
||||
|
||||
export const ITEMCHANGEDEVENT = '[AppCommon] ItemChangedEvent';
|
||||
export const ITEMADDEDEVENT = '[AppCommon] ItemAddedEvent';
|
||||
export const ITEMDELETEDEVENT = '[AppCommon] ItemDeletedEvent';
|
||||
|
||||
export const TASKSTARTEVENT = '[AppCommon] TaskStartEvent';
|
||||
export const TASKENDEVENT = '[AppCommon] TaskEndEvent';
|
||||
export const TASKERRORTEVENT = '[AppCommon] TaskErrorEvent';
|
||||
|
||||
export const DEVICEUPDATEEVENT = '[AppCommon] DeviceUpdateEvent';
|
||||
|
||||
export const DELETEITEMS = '[AppCommon] DeleteItems';
|
||||
export const DELETEITEMSSUCCESS = '[AppCommon] DeleteItemsSuccess';
|
||||
|
||||
export const STARTROUTELOADING = '[AppCommon] StartRouteLoading';
|
||||
export const ENDROUTELOADING = '[AppCommon] EndRouteLoading';
|
||||
|
||||
export const FULLSCREEN = '[AppCommon] FullScreen';
|
||||
export const SHOWNAVBAR = '[AppCommon] ShowNavBar';
|
||||
|
||||
export const EDITITEM = "[AppCommon] EditItem";
|
||||
|
||||
export const VIEWITEM = "[AppCommon] ViewItem";
|
||||
|
||||
export const FAIL = '[AppCommon] Fail';
|
||||
|
||||
export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
|
||||
|
||||
export class InitUser implements Action {
|
||||
readonly type = INITUSER;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class InitUserSuccess implements Action {
|
||||
readonly type = INITUSERSUCCESS;
|
||||
|
||||
constructor(public user:IUser ) { }
|
||||
}
|
||||
|
||||
export class InitRoot implements Action {
|
||||
readonly type = INITROOT;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class InitRootSuccess implements Action {
|
||||
readonly type = INITROOTSUCCESS;
|
||||
|
||||
constructor(public items:IListItem[]) { }
|
||||
}
|
||||
|
||||
export class OpenModal implements Action {
|
||||
readonly type = OPENMODAL;
|
||||
|
||||
constructor(public modalName: string) { }
|
||||
}
|
||||
|
||||
export class CloseModal implements Action {
|
||||
readonly type = CLOSEMODAL;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class StartRouteLoading implements Action {
|
||||
readonly type = STARTROUTELOADING;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class EndRouteLoading implements Action {
|
||||
readonly type = ENDROUTELOADING;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class Login implements Action {
|
||||
readonly type = LOGIN;
|
||||
|
||||
constructor(public url: string) { }
|
||||
}
|
||||
|
||||
export class Initialized implements Action {
|
||||
readonly type = INITIALIZED;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class Escape implements Action {
|
||||
readonly type = ESCAPE;
|
||||
|
||||
constructor(public escapeKey:boolean, public click:boolean) { }
|
||||
}
|
||||
|
||||
export class LoadItemTypes implements Action {
|
||||
readonly type = LOADITEMTYPES;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class LoadItemTypesSuccess implements Action {
|
||||
readonly type = LOADITEMTYPESSUCCESS;
|
||||
|
||||
constructor(public itemTypes: IItemTypes) { }
|
||||
}
|
||||
|
||||
export class Fail implements Action {
|
||||
readonly type = FAIL;
|
||||
|
||||
constructor(public payload: string) { }
|
||||
}
|
||||
|
||||
export class ItemChangedEvent implements Action {
|
||||
readonly type = ITEMCHANGEDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class ItemAddedEvent implements Action {
|
||||
readonly type = ITEMADDEDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class ItemDeletedEvent implements Action {
|
||||
readonly type = ITEMDELETEDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class TaskStartEvent implements Action {
|
||||
readonly type = TASKSTARTEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class TaskEndEvent implements Action {
|
||||
readonly type = TASKENDEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class TaskErrorEvent implements Action {
|
||||
readonly type = TASKERRORTEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class DeviceUpdateEvent implements Action {
|
||||
readonly type = DEVICEUPDATEEVENT;
|
||||
|
||||
constructor(public itemCode: string, public attributes: any) { }
|
||||
}
|
||||
|
||||
export class DeleteItems implements Action {
|
||||
readonly type = DELETEITEMS;
|
||||
|
||||
constructor(public itemCodes: string[]) { }
|
||||
}
|
||||
|
||||
export class DeleteItemsSuccess implements Action {
|
||||
readonly type = DELETEITEMSSUCCESS;
|
||||
|
||||
constructor(public deletedItemCodes: string[]) { }
|
||||
}
|
||||
|
||||
export class EditItem implements Action {
|
||||
readonly type = EDITITEM;
|
||||
|
||||
constructor(public item: IListItem) { }
|
||||
}
|
||||
|
||||
export class ViewItem implements Action {
|
||||
readonly type = VIEWITEM;
|
||||
|
||||
constructor(public item: IListItem) { }
|
||||
}
|
||||
|
||||
export class FullScreen implements Action {
|
||||
readonly type = FULLSCREEN;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class ShowNavBar implements Action {
|
||||
readonly type = SHOWNAVBAR;
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
|
||||
export class UploadedFileClick implements Action {
|
||||
readonly type = UPLOADEDFILECLICK;
|
||||
constructor(public itemCode:string) { }
|
||||
}
|
||||
|
||||
|
||||
export type Actions = OpenModal
|
||||
| InitRoot
|
||||
| InitRootSuccess
|
||||
| CloseModal
|
||||
| Login
|
||||
| Initialized
|
||||
| ItemChangedEvent
|
||||
| ItemAddedEvent
|
||||
| ItemDeletedEvent
|
||||
| Escape
|
||||
| LoadItemTypes
|
||||
| LoadItemTypesSuccess
|
||||
| DeleteItems
|
||||
| DeleteItemsSuccess
|
||||
| Fail
|
||||
| EditItem
|
||||
| ViewItem
|
||||
| FullScreen
|
||||
| ShowNavBar
|
||||
| StartRouteLoading
|
||||
| EndRouteLoading
|
||||
| InitUser
|
||||
| InitUserSuccess
|
||||
| TaskStartEvent
|
||||
| TaskEndEvent
|
||||
| TaskErrorEvent
|
||||
| DeviceUpdateEvent;
|
||||
|
106
projects/common/src/fm/common-service.module.ts
Normal file
106
projects/common/src/fm/common-service.module.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
// angular modules
|
||||
import { NgModule, APP_INITIALIZER, ModuleWithProviders, Injector,Optional,SkipSelf } from '@angular/core';
|
||||
import { CommonModule, DatePipe } from '@angular/common';
|
||||
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
// external modules
|
||||
import { OAuthModule,AuthConfig, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
|
||||
|
||||
|
||||
// routing module
|
||||
import { AppCommonRoutingModule } from './common-routing.module';
|
||||
|
||||
import { MODULE_NAME } from './module-name';
|
||||
|
||||
//components
|
||||
import { ItemTypeService } from './services/itemtype.service';
|
||||
import { FolderService } from './services/folder.service';
|
||||
import { TimespanService} from './services/timespan.service';
|
||||
import { ItemService} from './services/item.service';
|
||||
import { EventService } from './services/event.service';
|
||||
import { TypeaheadService } from './services/typeahead.service';
|
||||
import { UserService } from './services/user.service';
|
||||
import { AppConfig } from './shared/app.config';
|
||||
import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor";
|
||||
import { appConfigFactory } from "./shared/app.config.factory";
|
||||
import { AuthGuard } from './services/auth-guard.service';
|
||||
import { NavBarGuard } from './services/nav-bar-guard.service';
|
||||
import { FullScreenGuard } from './services/full-screen-guard.service';
|
||||
import { SafePipe } from './shared/safe.pipe';
|
||||
import { AppComponent} from './components/app/app.component';
|
||||
import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
|
||||
import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
|
||||
import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
|
||||
import { ResumableFileUploadService } from './components/resumable-file-upload/resumable-file-upload.service';
|
||||
import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
|
||||
import { NotFoundComponent } from './components/not-found/not-found.component';
|
||||
import { NotImplementedComponent } from './components/not-implemented/not-implemented.component';
|
||||
import { SidePanelComponent } from './components/side-panel/side-panel.component';
|
||||
import { TimespanComponent } from './components/timespan/timespan.component';
|
||||
import { TagInputComponent } from './components/tag-input/tag-input.component';
|
||||
import {IEventMessage } from './models/event.message';
|
||||
import { IItem, Item } from './models/item';
|
||||
import {IItemType} from './models/item.type';
|
||||
import {IItemTypes} from './models/item.types';
|
||||
import {IItemTask,ItemTask} from './models/itemTask';
|
||||
import {IListItem} from './models/list.item';
|
||||
import {ITypeaheadItem} from './models/typeahead.item';
|
||||
import {IUser} from './models/user';
|
||||
import * as commonActions from './actions/app-common.actions';
|
||||
import * as commonReducers from './reducers/app-common.reducer';
|
||||
import * as commonEffects from './effects/app-common.effects';
|
||||
import {NgbDateNativeAdapter} from './services/date-adapter.service'
|
||||
import { from } from 'rxjs';
|
||||
import {AuthConfigFactory} from './shared/authconfigFactory';
|
||||
|
||||
export {FolderService,
|
||||
ItemTypeService,
|
||||
TimespanService,
|
||||
ItemService,
|
||||
EventService,
|
||||
TypeaheadService,
|
||||
UserService,
|
||||
AppConfig,
|
||||
AccessTokenInterceptor,
|
||||
AuthGuard,
|
||||
NavBarGuard,
|
||||
FullScreenGuard,
|
||||
AuthCallbackGuard,
|
||||
ResumableFileUploadService,
|
||||
NgbDateNativeAdapter
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
OAuthModule.forRoot(),
|
||||
]
|
||||
})
|
||||
export class AppCommonServiceModule {
|
||||
constructor (@Optional() @SkipSelf() parentModule: AppCommonServiceModule) {
|
||||
if (parentModule) {
|
||||
throw new Error(
|
||||
'AppCommonServiceModule is already loaded. Import it in the AppModule only');
|
||||
}
|
||||
}
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return {
|
||||
ngModule: AppCommonServiceModule,
|
||||
providers: [
|
||||
AppConfig,
|
||||
{
|
||||
provide: APP_INITIALIZER,
|
||||
useFactory: appConfigFactory,
|
||||
deps: [Injector, AppConfig, OAuthService,AuthConfigFactory],
|
||||
multi: true
|
||||
},
|
||||
{
|
||||
provide: HTTP_INTERCEPTORS,
|
||||
useClass: AccessTokenInterceptor,
|
||||
multi: true
|
||||
},
|
||||
DatePipe
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
@@ -18,25 +18,11 @@ import { AppCommonRoutingModule } from './common-routing.module';
|
||||
import { MODULE_NAME } from './module-name';
|
||||
|
||||
//components
|
||||
import { ItemTypeService } from './services/itemtype.service';
|
||||
import { FolderService } from './services/folder.service';
|
||||
import { TimespanService} from './services/timespan.service';
|
||||
import { ItemService} from './services/item.service';
|
||||
import { EventService } from './services/event.service';
|
||||
import { TypeaheadService } from './services/typeahead.service';
|
||||
import { UserService } from './services/user.service';
|
||||
import { AppConfig } from './shared/app.config';
|
||||
import { AccessTokenInterceptor } from "./shared/accesstoken.interceptor";
|
||||
import { appConfigFactory } from "./shared/app.config.factory";
|
||||
import { AuthGuard } from './services/auth-guard.service';
|
||||
import { NavBarGuard } from './services/nav-bar-guard.service';
|
||||
import { FullScreenGuard } from './services/full-screen-guard.service';
|
||||
import { SafePipe } from './shared/safe.pipe';
|
||||
import { AuthConfigFactory,IAuthconfigFactory} from './shared/authconfigFactory';
|
||||
import { AppComponent} from './components/app/app.component';
|
||||
import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
|
||||
import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
|
||||
import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
|
||||
import { ResumableFileUploadService } from './components/resumable-file-upload/resumable-file-upload.service';
|
||||
import { ResumableFileUploadComponent } from './components/resumable-file-upload/resumable-file-upload.component';
|
||||
import { NotFoundComponent } from './components/not-found/not-found.component';
|
||||
import { NotImplementedComponent } from './components/not-implemented/not-implemented.component';
|
||||
@@ -54,27 +40,12 @@ import {IUser} from './models/user';
|
||||
import * as commonActions from './actions/app-common.actions';
|
||||
import * as commonReducers from './reducers/app-common.reducer';
|
||||
import * as commonEffects from './effects/app-common.effects';
|
||||
import {NgbDateNativeAdapter} from './services/date-adapter.service'
|
||||
import { from } from 'rxjs';
|
||||
|
||||
export {FolderService,
|
||||
ItemTypeService,
|
||||
TimespanService,
|
||||
ItemService,
|
||||
EventService,
|
||||
TypeaheadService,
|
||||
UserService,
|
||||
AppConfig,
|
||||
AccessTokenInterceptor,
|
||||
AuthGuard,
|
||||
NavBarGuard,
|
||||
FullScreenGuard,
|
||||
export {
|
||||
SafePipe,
|
||||
AuthCallbackComponent,
|
||||
AuthCallbackGuard,
|
||||
AppComponent,
|
||||
SessionClearedComponent,
|
||||
ResumableFileUploadService,
|
||||
ResumableFileUploadComponent,
|
||||
NotFoundComponent,
|
||||
NotImplementedComponent,
|
||||
@@ -93,7 +64,8 @@ export {FolderService,
|
||||
IUser,
|
||||
commonActions,
|
||||
commonReducers,
|
||||
NgbDateNativeAdapter
|
||||
IAuthconfigFactory,
|
||||
AuthConfigFactory
|
||||
};
|
||||
|
||||
@NgModule({
|
||||
@@ -108,9 +80,6 @@ export {FolderService,
|
||||
FormsModule,
|
||||
UploadxModule
|
||||
],
|
||||
providers: [
|
||||
DatePipe
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AuthCallbackComponent,
|
||||
@@ -141,29 +110,4 @@ export {FolderService,
|
||||
]
|
||||
})
|
||||
export class AppCommonModule {
|
||||
constructor (@Optional() @SkipSelf() parentModule: AppCommonModule) {
|
||||
if (parentModule) {
|
||||
throw new Error(
|
||||
'AppCommonModule is already loaded. Import it in the AppModule only');
|
||||
}
|
||||
}
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return {
|
||||
ngModule: AppCommonModule,
|
||||
providers: [
|
||||
AppConfig,
|
||||
{
|
||||
provide: APP_INITIALIZER,
|
||||
useFactory: appConfigFactory,
|
||||
deps: [Injector, AppConfig, OAuthService],
|
||||
multi: true
|
||||
},
|
||||
{
|
||||
provide: HTTP_INTERCEPTORS,
|
||||
useClass: AccessTokenInterceptor,
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@@ -1,129 +1,133 @@
|
||||
import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
|
||||
import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
|
||||
import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
|
||||
import { Subscription , Observable } from 'rxjs';
|
||||
import { Store, Action } from '@ngrx/store';
|
||||
|
||||
//AppCommon
|
||||
import { IEventMessage } from '../../models/event.message';
|
||||
import { IListItem} from '../../models/list.item';
|
||||
import { EventService } from '../../services/event.service';
|
||||
import * as commonActions from '../../actions/app-common.actions';
|
||||
|
||||
import * as appReducers from '../../reducers/app-common.reducer';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-app',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
|
||||
// This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
|
||||
private endPageTitle: string = 'Farmmaps';
|
||||
// If no Title is provided, we'll use a default one before the dash(-)
|
||||
private defaultPageTitle: string = 'Farmmaps';
|
||||
|
||||
private routerSub$: Subscription;
|
||||
private eventSub$: Subscription;
|
||||
|
||||
public currentFolder: Observable<IListItem>;
|
||||
public folderParents: Observable<IListItem[]>;
|
||||
public browseFileElement: any;
|
||||
public browseDirectoryElement: any;
|
||||
public fileDroptarget: any;
|
||||
public fullScreen: Observable<boolean>;
|
||||
public routeLoading: Observable<boolean>;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private title: Title,
|
||||
private meta: Meta,
|
||||
private store: Store<appReducers.State>,
|
||||
private eventService: EventService,
|
||||
) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
getActionFromEvent(event: IEventMessage): Action {
|
||||
var action: Action = null;
|
||||
console.debug(`${event.eventType} Event received`);
|
||||
switch (event.eventType) {
|
||||
case "ItemChanged": {
|
||||
action = new commonActions.ItemChangedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "ItemAdded": {
|
||||
action = new commonActions.ItemAddedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "ItemDeleted": {
|
||||
action = new commonActions.ItemDeletedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskStart": {
|
||||
action = new commonActions.TaskStartEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskEnd": {
|
||||
action = new commonActions.TaskEndEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskError": {
|
||||
action = new commonActions.TaskErrorEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return action;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
|
||||
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
|
||||
this.InstallRouteEventHandler();
|
||||
this.InstallEventServiceEventHandler();
|
||||
}
|
||||
|
||||
@HostListener('document:keyup', ['$event'])
|
||||
keyUp(event: KeyboardEvent) {
|
||||
let x = event.keyCode;
|
||||
if (x === 27) {
|
||||
this.store.dispatch(new commonActions.Escape(true,false));
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
// Subscription clean-up
|
||||
if(this.routerSub$) this.routerSub$.unsubscribe();
|
||||
if(this.eventSub$) this.eventSub$.unsubscribe();
|
||||
}
|
||||
|
||||
private InstallRouteEventHandler() {
|
||||
var other = this;
|
||||
this.routerSub$ = this.router.events.subscribe(event => {
|
||||
if (event instanceof RouteConfigLoadStart) {
|
||||
other.store.dispatch(new commonActions.StartRouteLoading());
|
||||
}
|
||||
if (event instanceof RouteConfigLoadEnd) {
|
||||
other.store.dispatch(new commonActions.EndRouteLoading());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private InstallEventServiceEventHandler() {
|
||||
var other = this;
|
||||
this.eventSub$ = this.eventService.event.subscribe(event => {
|
||||
var action = other.getActionFromEvent(event);
|
||||
if (action) other.store.dispatch(action);
|
||||
});
|
||||
}
|
||||
|
||||
handleClick(event: MouseEvent) {
|
||||
this.store.dispatch(new commonActions.Escape(false,true));
|
||||
}
|
||||
}
|
||||
|
||||
import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
|
||||
import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
|
||||
import { Meta, Title, MetaDefinition } from '@angular/platform-browser';import { DOCUMENT } from "@angular/common";
|
||||
import { Subscription , Observable } from 'rxjs';
|
||||
import { Store, Action } from '@ngrx/store';
|
||||
|
||||
//AppCommon
|
||||
import { IEventMessage } from '../../models/event.message';
|
||||
import { IListItem} from '../../models/list.item';
|
||||
import { EventService } from '../../services/event.service';
|
||||
import * as commonActions from '../../actions/app-common.actions';
|
||||
|
||||
import * as appReducers from '../../reducers/app-common.reducer';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-app',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
|
||||
// This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
|
||||
private endPageTitle: string = 'Farmmaps';
|
||||
// If no Title is provided, we'll use a default one before the dash(-)
|
||||
private defaultPageTitle: string = 'Farmmaps';
|
||||
|
||||
private routerSub$: Subscription;
|
||||
private eventSub$: Subscription;
|
||||
|
||||
public currentFolder: Observable<IListItem>;
|
||||
public folderParents: Observable<IListItem[]>;
|
||||
public browseFileElement: any;
|
||||
public browseDirectoryElement: any;
|
||||
public fileDroptarget: any;
|
||||
public fullScreen: Observable<boolean>;
|
||||
public routeLoading: Observable<boolean>;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private title: Title,
|
||||
private meta: Meta,
|
||||
private store: Store<appReducers.State>,
|
||||
private eventService: EventService,
|
||||
) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
getActionFromEvent(event: IEventMessage): Action {
|
||||
var action: Action = null;
|
||||
console.debug(`${event.eventType} Event received`);
|
||||
switch (event.eventType) {
|
||||
case "ItemChanged": {
|
||||
action = new commonActions.ItemChangedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "ItemAdded": {
|
||||
action = new commonActions.ItemAddedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "ItemDeleted": {
|
||||
action = new commonActions.ItemDeletedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskStart": {
|
||||
action = new commonActions.TaskStartEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskEnd": {
|
||||
action = new commonActions.TaskEndEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskError": {
|
||||
action = new commonActions.TaskErrorEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "deviceUpdate": {
|
||||
action = new commonActions.DeviceUpdateEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return action;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
|
||||
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
|
||||
this.InstallRouteEventHandler();
|
||||
this.InstallEventServiceEventHandler();
|
||||
}
|
||||
|
||||
@HostListener('document:keyup', ['$event'])
|
||||
keyUp(event: KeyboardEvent) {
|
||||
let x = event.keyCode;
|
||||
if (x === 27) {
|
||||
this.store.dispatch(new commonActions.Escape(true,false));
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
// Subscription clean-up
|
||||
if(this.routerSub$) this.routerSub$.unsubscribe();
|
||||
if(this.eventSub$) this.eventSub$.unsubscribe();
|
||||
}
|
||||
|
||||
private InstallRouteEventHandler() {
|
||||
var other = this;
|
||||
this.routerSub$ = this.router.events.subscribe(event => {
|
||||
if (event instanceof RouteConfigLoadStart) {
|
||||
other.store.dispatch(new commonActions.StartRouteLoading());
|
||||
}
|
||||
if (event instanceof RouteConfigLoadEnd) {
|
||||
other.store.dispatch(new commonActions.EndRouteLoading());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private InstallEventServiceEventHandler() {
|
||||
var other = this;
|
||||
this.eventSub$ = this.eventService.event.subscribe(event => {
|
||||
var action = other.getActionFromEvent(event);
|
||||
if (action) other.store.dispatch(action);
|
||||
});
|
||||
}
|
||||
|
||||
handleClick(event: MouseEvent) {
|
||||
this.store.dispatch(new commonActions.Escape(false,true));
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-header p-3 bg-primary text-white">
|
||||
<span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress}}</span> %)</span>
|
||||
<span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
|
||||
<span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
|
||||
<span title="Cancel" class="fa fa-times pull-right" (click)="uploadService.close()"></span><span title="Minimize" class="fa fa-chevron-down pull-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
|
||||
</div>
|
||||
|
@@ -1,85 +1,85 @@
|
||||
import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-side-panel',
|
||||
templateUrl: 'side-panel.component.html',
|
||||
styleUrls: ['side-panel.component.scss']
|
||||
})
|
||||
|
||||
|
||||
export class SidePanelComponent implements OnChanges {
|
||||
@Input() public visible: boolean;
|
||||
@Input() public collapsed: boolean;
|
||||
@Input() public collapsable: boolean;
|
||||
@Input() public resizeable: boolean = false;
|
||||
@ViewChild("resizeGrip") elementView: ElementRef;
|
||||
public mobile:boolean = true;
|
||||
private parentHeight:number = 0;
|
||||
public top = "100%";
|
||||
private resizeTop:number=50;
|
||||
public resizing:boolean=false;
|
||||
|
||||
constructor(private element: ElementRef,private ref: ChangeDetectorRef) {
|
||||
this.collapsable = false;
|
||||
this.setTop();
|
||||
}
|
||||
|
||||
checkMobile():boolean {
|
||||
let size = parseFloat(getComputedStyle(document.documentElement).width);
|
||||
let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
let threshold = 44 * rem;
|
||||
return !(size>threshold);
|
||||
}
|
||||
|
||||
setTop() {
|
||||
this.mobile = this.checkMobile();
|
||||
this.resizeTop = this.mobile?50:0;
|
||||
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.parentHeight = this.element.nativeElement.offsetParent.clientHeight;
|
||||
}
|
||||
|
||||
handleToggleClick(event) {
|
||||
if (this.collapsable) {
|
||||
this.collapsed = !this.collapsed;
|
||||
}
|
||||
}
|
||||
|
||||
handleStartGripDrag(event:DragEvent|TouchEvent) {
|
||||
this.resizing=true;
|
||||
if(event instanceof DragEvent) {
|
||||
var crt = new Image();
|
||||
crt.style.display = "none";
|
||||
document.body.appendChild(crt);
|
||||
event.dataTransfer.setDragImage(crt,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
handleEndGripDrag() {
|
||||
this.resizing = false;
|
||||
}
|
||||
|
||||
handleGripDrag(event:DragEvent|TouchEvent) {
|
||||
var clientY = 0;
|
||||
if((event instanceof TouchEvent)) {
|
||||
clientY = (event as TouchEvent).changedTouches[0].clientY;
|
||||
} else {
|
||||
clientY=(event as DragEvent).clientY;
|
||||
}
|
||||
this.resizeTop = Math.min(98, Math.max(0, clientY / (this.parentHeight / 100)));
|
||||
this.top = (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if(changes.visible) {
|
||||
this.top = (changes.visible.currentValue?this.resizeTop:(this.mobile? 100:0)) + "%";
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
this.setTop();
|
||||
}
|
||||
}
|
||||
import { Component, Input,ViewChild,ElementRef,OnChanges,SimpleChanges,HostListener,ChangeDetectorRef } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-side-panel',
|
||||
templateUrl: 'side-panel.component.html',
|
||||
styleUrls: ['side-panel.component.scss']
|
||||
})
|
||||
|
||||
|
||||
export class SidePanelComponent implements OnChanges {
|
||||
@Input() public visible: boolean;
|
||||
@Input() public collapsed: boolean;
|
||||
@Input() public collapsable: boolean;
|
||||
@Input() public resizeable: boolean = false;
|
||||
@ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
|
||||
public mobile:boolean = true;
|
||||
private parentHeight:number = 0;
|
||||
public top = "100%";
|
||||
private resizeTop:number=50;
|
||||
public resizing:boolean=false;
|
||||
|
||||
constructor(private element: ElementRef,private ref: ChangeDetectorRef) {
|
||||
this.collapsable = false;
|
||||
this.setTop();
|
||||
}
|
||||
|
||||
checkMobile():boolean {
|
||||
let size = parseFloat(getComputedStyle(document.documentElement).width);
|
||||
let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
let threshold = 44 * rem;
|
||||
return !(size>threshold);
|
||||
}
|
||||
|
||||
setTop() {
|
||||
this.mobile = this.checkMobile();
|
||||
this.resizeTop = this.mobile?50:0;
|
||||
this.top = (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.parentHeight = this.element.nativeElement.offsetParent.clientHeight;
|
||||
}
|
||||
|
||||
handleToggleClick(event) {
|
||||
if (this.collapsable) {
|
||||
this.collapsed = !this.collapsed;
|
||||
}
|
||||
}
|
||||
|
||||
handleStartGripDrag(event:DragEvent|TouchEvent) {
|
||||
this.resizing=true;
|
||||
if(event instanceof DragEvent) {
|
||||
var crt = new Image();
|
||||
crt.style.display = "none";
|
||||
document.body.appendChild(crt);
|
||||
event.dataTransfer.setDragImage(crt,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
handleEndGripDrag() {
|
||||
this.resizing = false;
|
||||
}
|
||||
|
||||
handleGripDrag(event:DragEvent|TouchEvent) {
|
||||
var clientY = 0;
|
||||
if((event instanceof TouchEvent)) {
|
||||
clientY = (event as TouchEvent).changedTouches[0].clientY;
|
||||
} else {
|
||||
clientY=(event as DragEvent).clientY;
|
||||
}
|
||||
this.resizeTop = Math.min(98, Math.max(0, clientY / (this.parentHeight / 100)));
|
||||
this.top = (this.visible? this.resizeTop:(this.mobile? 100:0)) + "%";
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if(changes.visible) {
|
||||
this.top = (changes.visible.currentValue?this.resizeTop:(this.mobile? 100:0)) + "%";
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
this.setTop();
|
||||
}
|
||||
}
|
||||
|
@@ -1,104 +1,104 @@
|
||||
import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
|
||||
import { Observable,of } from 'rxjs';
|
||||
import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
|
||||
import { TypeaheadService } from '../../services/typeahead.service';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-tag-input',
|
||||
templateUrl: 'tag-input.component.html',
|
||||
styleUrls: ['tag-input.component.scss'],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => TagInputComponent),
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export class TagInputComponent implements ControlValueAccessor {
|
||||
@Input() tags: string[]
|
||||
@ViewChild('taginput') tagInputElement: ElementRef;
|
||||
public tag: string;
|
||||
searching = false;
|
||||
searchFailed = false;
|
||||
|
||||
constructor(private typeaheadService: TypeaheadService) {
|
||||
}
|
||||
|
||||
tagExists(tag) {
|
||||
if (tag.length == 0) return true;
|
||||
for (let t of this.tags) {
|
||||
if (t.toLowerCase() == tag.toLowerCase()) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
handleDeleteTag(tag) {
|
||||
let tags = [];
|
||||
for (let t of this.tags) {
|
||||
if (t != tag) tags.push(t);
|
||||
}
|
||||
this.tags = tags;
|
||||
this.propagateChange(tags);
|
||||
}
|
||||
|
||||
handleAddTag(event) {
|
||||
if (!this.tagExists(this.tag)) {
|
||||
this.tags.push(this.tag);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
this.tag = "";
|
||||
this.tagInputElement.nativeElement.focus();
|
||||
}
|
||||
|
||||
handleCheckAddTag(event: KeyboardEvent) {
|
||||
if (event.keyCode == 188) {
|
||||
let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
|
||||
if (!this.tagExists(tag)) {
|
||||
this.tags.push(tag);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
this.tag = "";
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect(event) {
|
||||
if (!this.tagExists(event.item)) {
|
||||
this.tags.push(event.item);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
event.preventDefault();
|
||||
this.tag = "";
|
||||
}
|
||||
|
||||
propagateChange = (_: any) => { };
|
||||
|
||||
registerOnChange(fn) {
|
||||
this.propagateChange = fn;
|
||||
}
|
||||
|
||||
findTag = (text$: Observable<string>) =>
|
||||
text$.pipe(
|
||||
debounceTime(200),
|
||||
distinctUntilChanged(),
|
||||
tap(() => this.searching = true),
|
||||
switchMap(term => term.length < 1 ? of([]) :
|
||||
this.typeaheadService.getTagTypeaheadItems(term).pipe(
|
||||
tap(() => this.searchFailed = false),
|
||||
catchError(() => {
|
||||
this.searchFailed = true;
|
||||
return of([]);
|
||||
}))
|
||||
),
|
||||
tap(() => this.searching = false)
|
||||
);
|
||||
|
||||
writeValue(value: any) {
|
||||
this.tags = value;
|
||||
this.tag = "";
|
||||
}
|
||||
|
||||
registerOnTouched() { }
|
||||
}
|
||||
import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
|
||||
import { Observable,of } from 'rxjs';
|
||||
import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
|
||||
import { TypeaheadService } from '../../services/typeahead.service';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-tag-input',
|
||||
templateUrl: 'tag-input.component.html',
|
||||
styleUrls: ['tag-input.component.scss'],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => TagInputComponent),
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export class TagInputComponent implements ControlValueAccessor {
|
||||
@Input() tags: string[]
|
||||
@ViewChild('taginput', { static: true }) tagInputElement: ElementRef;
|
||||
public tag: string;
|
||||
searching = false;
|
||||
searchFailed = false;
|
||||
|
||||
constructor(private typeaheadService: TypeaheadService) {
|
||||
}
|
||||
|
||||
tagExists(tag) {
|
||||
if (tag.length == 0) return true;
|
||||
for (let t of this.tags) {
|
||||
if (t.toLowerCase() == tag.toLowerCase()) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
handleDeleteTag(tag) {
|
||||
let tags = [];
|
||||
for (let t of this.tags) {
|
||||
if (t != tag) tags.push(t);
|
||||
}
|
||||
this.tags = tags;
|
||||
this.propagateChange(tags);
|
||||
}
|
||||
|
||||
handleAddTag(event) {
|
||||
if (!this.tagExists(this.tag)) {
|
||||
this.tags.push(this.tag);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
this.tag = "";
|
||||
this.tagInputElement.nativeElement.focus();
|
||||
}
|
||||
|
||||
handleCheckAddTag(event: KeyboardEvent) {
|
||||
if (event.keyCode == 188) {
|
||||
let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
|
||||
if (!this.tagExists(tag)) {
|
||||
this.tags.push(tag);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
this.tag = "";
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect(event) {
|
||||
if (!this.tagExists(event.item)) {
|
||||
this.tags.push(event.item);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
event.preventDefault();
|
||||
this.tag = "";
|
||||
}
|
||||
|
||||
propagateChange = (_: any) => { };
|
||||
|
||||
registerOnChange(fn) {
|
||||
this.propagateChange = fn;
|
||||
}
|
||||
|
||||
findTag = (text$: Observable<string>) =>
|
||||
text$.pipe(
|
||||
debounceTime(200),
|
||||
distinctUntilChanged(),
|
||||
tap(() => this.searching = true),
|
||||
switchMap(term => term.length < 1 ? of([]) :
|
||||
this.typeaheadService.getTagTypeaheadItems(term).pipe(
|
||||
tap(() => this.searchFailed = false),
|
||||
catchError(() => {
|
||||
this.searchFailed = true;
|
||||
return of([]);
|
||||
}))
|
||||
),
|
||||
tap(() => this.searching = false)
|
||||
);
|
||||
|
||||
writeValue(value: any) {
|
||||
this.tags = value;
|
||||
this.tag = "";
|
||||
}
|
||||
|
||||
registerOnTouched() { }
|
||||
}
|
||||
|
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
|
@@ -1,126 +1,128 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { IItemType } from '../models/item.type';
|
||||
import { IItem } from '../models/item';
|
||||
import { IItemTask } from '../models/itemTask';
|
||||
import { HttpClient, HttpParams } from "@angular/common/http";
|
||||
import { AppConfig } from "../shared/app.config";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class ItemService {
|
||||
constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
|
||||
}
|
||||
|
||||
ApiEndpoint() {
|
||||
return this.appConfig.getConfig("apiEndPoint");
|
||||
}
|
||||
|
||||
parseDates(item: any): IItem {
|
||||
item.created = new Date(Date.parse(item.created));
|
||||
item.updated = new Date(Date.parse(item.updated));
|
||||
item.dataDate = new Date(Date.parse(item.dataDate));
|
||||
return item;
|
||||
}
|
||||
|
||||
getItemTypes(): Observable<{ [id: string]: IItemType }> {
|
||||
return this.httpClient.get<{ [id: string]: IItemType }>(`${this.ApiEndpoint()}/api/v1/itemtypes/`);
|
||||
}
|
||||
|
||||
getFeatures(extent: number[], crs: string, searchText?: string, searchTags?:string,startDate?:Date,endDate?:Date,itemType?:string,parentCode?:string,dataFilter?:string,level?:number): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("bbox", extent.join(","));
|
||||
params = params.append("crs", crs);
|
||||
if (searchText) params = params.append("q", searchText);
|
||||
if (searchTags) params = params.append("t", searchTags);
|
||||
if (startDate) params = params.append("sd", startDate.toISOString());
|
||||
if (endDate) params = params.append("ed", endDate.toISOString());
|
||||
if (itemType) params = params.append("it", itemType);
|
||||
if (parentCode) params = params.append("pc", parentCode);
|
||||
if (dataFilter) params = params.append("df", dataFilter);
|
||||
if (level) params = params.append("lvl", dataFilter);
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/features/`, {params:params});
|
||||
}
|
||||
|
||||
getFeature(code:string, crs: string): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("crs", crs);
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/feature/`, { params: params });
|
||||
}
|
||||
|
||||
getItem(code: string): Observable<IItem> {
|
||||
return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}`).pipe(map(i => this.parseDates(i)));
|
||||
}
|
||||
|
||||
getItemByCodeAndType(code: string, itemType: string): Observable<IItem> {
|
||||
return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}/${itemType}`);
|
||||
}
|
||||
|
||||
getItemList(itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("it", itemType);
|
||||
if(dataFilter != null){
|
||||
params = params.append("df", JSON.stringify(dataFilter));
|
||||
}
|
||||
params = params.append("lvl", itemType);
|
||||
return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
|
||||
}
|
||||
|
||||
getChildItemList(parentcode: string, itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("it", itemType);
|
||||
if (dataFilter != null) {
|
||||
params = params.append("df", JSON.stringify(dataFilter));
|
||||
}
|
||||
params = params.append("lvl", level.toString());
|
||||
return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
|
||||
}
|
||||
|
||||
getChildItemListByExtent(parentcode: string, itemType: string, extent: number[], crs: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("it", itemType);
|
||||
params = params.append("bbox", extent.join(","));
|
||||
params = params.append("crs", crs);
|
||||
if (dataFilter != null) {
|
||||
params = params.append("df", JSON.stringify(dataFilter));
|
||||
}
|
||||
params = params.append("lvl", level.toString());
|
||||
return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
|
||||
}
|
||||
|
||||
getItemFeatures(code: string, extent: number[], crs: string, layerIndex?:number): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("bbox", extent.join(","));
|
||||
params = params.append("crs", crs);
|
||||
if(layerIndex!=null)
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
|
||||
else
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features`, { params: params });
|
||||
}
|
||||
|
||||
putItem(item:IItem): Observable<IItem> {
|
||||
return this.httpClient.put<IItem>(`${this.ApiEndpoint()}/api/v1/items/${item.code}`,item);
|
||||
}
|
||||
|
||||
deleteItems(itemCodes:string[]): Observable<any> {
|
||||
return this.httpClient.post<any>(`${this.ApiEndpoint()}/api/v1/items/delete`, itemCodes);
|
||||
}
|
||||
|
||||
getTemporalLast(code: string): Observable<any> {
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/last`);
|
||||
}
|
||||
|
||||
getTemporal(code: string, startDate?: Date, endDate?: Date): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
if (startDate) params = params.append("sd", startDate.toISOString());
|
||||
if (endDate) params = params.append("ed", endDate.toISOString());
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/`, { params: params });
|
||||
}
|
||||
|
||||
postItemTask(item: IItem, task: IItemTask): Observable<IItemTask> {
|
||||
return this.httpClient.post<IItemTask>(`${this.ApiEndpoint()}/api/v1/items/${item.code}/tasks`, task);
|
||||
}
|
||||
}
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { IItemType } from '../models/item.type';
|
||||
import { IItem } from '../models/item';
|
||||
import { IItemTask } from '../models/itemTask';
|
||||
import { HttpClient, HttpParams } from "@angular/common/http";
|
||||
import { AppConfig } from "../shared/app.config";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class ItemService {
|
||||
constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
|
||||
}
|
||||
|
||||
ApiEndpoint() {
|
||||
return this.appConfig.getConfig("apiEndPoint");
|
||||
}
|
||||
|
||||
parseDates(item: any): IItem {
|
||||
item.created = new Date(Date.parse(item.created));
|
||||
item.updated = new Date(Date.parse(item.updated));
|
||||
item.dataDate = new Date(Date.parse(item.dataDate));
|
||||
return item;
|
||||
}
|
||||
|
||||
getItemTypes(): Observable<{ [id: string]: IItemType }> {
|
||||
return this.httpClient.get<{ [id: string]: IItemType }>(`${this.ApiEndpoint()}/api/v1/itemtypes/`);
|
||||
}
|
||||
|
||||
getFeatures(extent: number[], crs: string, searchText?: string, searchTags?:string,startDate?:Date,endDate?:Date,itemType?:string,parentCode?:string,dataFilter?:string,level?:number): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("bbox", extent.join(","));
|
||||
params = params.append("crs", crs);
|
||||
if (searchText) params = params.append("q", searchText);
|
||||
if (searchTags) params = params.append("t", searchTags);
|
||||
if (startDate) params = params.append("sd", startDate.toISOString());
|
||||
if (endDate) params = params.append("ed", endDate.toISOString());
|
||||
if (itemType) params = params.append("it", itemType);
|
||||
if (parentCode) params = params.append("pc", parentCode);
|
||||
if (dataFilter) params = params.append("df", dataFilter);
|
||||
if (level) params = params.append("lvl", dataFilter);
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/features/`, {params:params});
|
||||
}
|
||||
|
||||
getFeature(code:string, crs: string): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("crs", crs);
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/feature/`, { params: params });
|
||||
}
|
||||
|
||||
getItem(code: string): Observable<IItem> {
|
||||
return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}`).pipe(map(i => this.parseDates(i)));
|
||||
}
|
||||
|
||||
getItemByCodeAndType(code: string, itemType: string): Observable<IItem> {
|
||||
return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}/${itemType}`);
|
||||
}
|
||||
|
||||
getItemList(itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("it", itemType);
|
||||
if(dataFilter != null){
|
||||
params = params.append("df", JSON.stringify(dataFilter));
|
||||
}
|
||||
params = params.append("lvl", itemType);
|
||||
return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
|
||||
}
|
||||
|
||||
getChildItemList(parentcode: string, itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("it", itemType);
|
||||
if (dataFilter != null) {
|
||||
params = params.append("df", JSON.stringify(dataFilter));
|
||||
}
|
||||
params = params.append("lvl", level.toString());
|
||||
return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
|
||||
}
|
||||
|
||||
getChildItemListByExtent(parentcode: string, itemType: string, extent: number[], crs: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("it", itemType);
|
||||
params = params.append("bbox", extent.join(","));
|
||||
params = params.append("crs", crs);
|
||||
if (dataFilter != null) {
|
||||
params = params.append("df", JSON.stringify(dataFilter));
|
||||
}
|
||||
params = params.append("lvl", level.toString());
|
||||
return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
|
||||
}
|
||||
|
||||
getItemFeatures(code: string, extent: number[], crs: string, layerIndex?:number): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
params = params.append("crs", crs);
|
||||
if(extent != null) {
|
||||
params = params.append("bbox", extent.join(","));
|
||||
}
|
||||
if(layerIndex!=null)
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
|
||||
else
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features`, { params: params });
|
||||
}
|
||||
|
||||
putItem(item:IItem): Observable<IItem> {
|
||||
return this.httpClient.put<IItem>(`${this.ApiEndpoint()}/api/v1/items/${item.code}`,item);
|
||||
}
|
||||
|
||||
deleteItems(itemCodes:string[]): Observable<any> {
|
||||
return this.httpClient.post<any>(`${this.ApiEndpoint()}/api/v1/items/delete`, itemCodes);
|
||||
}
|
||||
|
||||
getTemporalLast(code: string): Observable<any> {
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/last`);
|
||||
}
|
||||
|
||||
getTemporal(code: string, startDate?: Date, endDate?: Date): Observable<any> {
|
||||
var params = new HttpParams();
|
||||
if (startDate) params = params.append("sd", startDate.toISOString());
|
||||
if (endDate) params = params.append("ed", endDate.toISOString());
|
||||
return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/`, { params: params });
|
||||
}
|
||||
|
||||
postItemTask(item: IItem, task: IItemTask): Observable<IItemTask> {
|
||||
return this.httpClient.post<IItemTask>(`${this.ApiEndpoint()}/api/v1/items/${item.code}/tasks`, task);
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -1,61 +1,49 @@
|
||||
import { Injector } from '@angular/core';
|
||||
import { Router,UrlSerializer } from '@angular/router';
|
||||
import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent } from 'angular-oauth2-oidc';
|
||||
import { AppConfig } from "./app.config";
|
||||
|
||||
function getAuthConfig(appConfig: AppConfig): AuthConfig {
|
||||
let authConfig: AuthConfig = new AuthConfig();
|
||||
authConfig.issuer = appConfig.getConfig("issuer");
|
||||
authConfig.redirectUri = window.location.origin + "/cb";
|
||||
authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
|
||||
authConfig.clientId = appConfig.getConfig("clientId");
|
||||
authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
|
||||
authConfig.scope = "openid profile email";
|
||||
authConfig.oidc = true;
|
||||
authConfig.disableAtHashCheck = true;
|
||||
authConfig.requireHttps = appConfig.getConfig("requireHttps");
|
||||
return authConfig;
|
||||
}
|
||||
|
||||
export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService): () => Promise<any> {
|
||||
return (): Promise<any> => {
|
||||
return appConfig.load().then(() => {
|
||||
oauthService.events.subscribe((event) => {
|
||||
console.debug(event.type);
|
||||
if (event.type == 'token_error' || event.type == 'silent_refresh_timeout') {
|
||||
let e = event as OAuthErrorEvent;
|
||||
let p = e.params as any;
|
||||
if (event.type == 'silent_refresh_timeout' || (p.error && p.error == 'login_required')) {
|
||||
let router = injector.get(Router);
|
||||
console.debug("Session expired");
|
||||
router.navigate(['loggedout'], { queryParams: { redirectTo: router.url } });
|
||||
}
|
||||
}
|
||||
});
|
||||
oauthService.configure(getAuthConfig(appConfig));
|
||||
oauthService.tokenValidationHandler = new JwksValidationHandler();
|
||||
oauthService.tokenValidationHandler.validateAtHash = function () {
|
||||
return new Promise<boolean>((res) => { res(true); })
|
||||
};
|
||||
oauthService.setupAutomaticSilentRefresh();
|
||||
let router = injector.get(Router);
|
||||
var urlTree = router.parseUrl(window.location.href);
|
||||
var urlPath = window.location.pathname;
|
||||
oauthService.loadDiscoveryDocument().then(() => {
|
||||
oauthService.tryLogin({
|
||||
onTokenReceived: (info) => {
|
||||
urlPath = info.state;
|
||||
}
|
||||
}).then(() => {
|
||||
let router = injector.get(Router);
|
||||
if (!oauthService.hasValidAccessToken()) {
|
||||
oauthService.initImplicitFlow(urlPath);
|
||||
} else {
|
||||
router.navigateByUrl(urlPath);
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
import { Injector } from '@angular/core';
|
||||
import { Router,UrlSerializer } from '@angular/router';
|
||||
import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent } from 'angular-oauth2-oidc';
|
||||
import { AppConfig } from "./app.config";
|
||||
import { IAuthconfigFactory } from './authconfigFactory';
|
||||
|
||||
|
||||
export function appConfigFactory(injector:Injector, appConfig: AppConfig, oauthService: OAuthService, authconfigFactory:IAuthconfigFactory): () => Promise<any> {
|
||||
return (): Promise<any> => {
|
||||
return appConfig.load().then(() => {
|
||||
oauthService.events.subscribe((event) => {
|
||||
console.debug(event.type);
|
||||
if (event.type == 'token_error' || event.type == 'silent_refresh_timeout') {
|
||||
let e = event as OAuthErrorEvent;
|
||||
let p = e.params as any;
|
||||
if (event.type == 'silent_refresh_timeout' || (p.error && p.error == 'login_required')) {
|
||||
let router = injector.get(Router);
|
||||
console.debug("Session expired");
|
||||
router.navigate(['loggedout'], { queryParams: { redirectTo: router.url } });
|
||||
}
|
||||
}
|
||||
});
|
||||
oauthService.configure(authconfigFactory.getAuthConfig(appConfig));
|
||||
oauthService.tokenValidationHandler = new JwksValidationHandler();
|
||||
oauthService.tokenValidationHandler.validateAtHash = function () {
|
||||
return new Promise<boolean>((res) => { res(true); })
|
||||
};
|
||||
oauthService.setupAutomaticSilentRefresh();
|
||||
let router = injector.get(Router);
|
||||
var urlTree = router.parseUrl(window.location.href);
|
||||
var urlPath = window.location.pathname;
|
||||
oauthService.loadDiscoveryDocument().then(() => {
|
||||
oauthService.tryLogin({
|
||||
onTokenReceived: (info) => {
|
||||
urlPath = info.state;
|
||||
}
|
||||
}).then(() => {
|
||||
let router = injector.get(Router);
|
||||
if (!oauthService.hasValidAccessToken()) {
|
||||
oauthService.initImplicitFlow(urlPath);
|
||||
} else {
|
||||
router.navigateByUrl(urlPath);
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -1,32 +1,35 @@
|
||||
import {Inject, Injectable} from '@angular/core';
|
||||
import {HttpClient, HttpXhrBackend} from '@angular/common/http';
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class AppConfig {
|
||||
|
||||
private config: Object = null;
|
||||
private httpClient: HttpClient;
|
||||
|
||||
constructor(xhrBackend: HttpXhrBackend) {
|
||||
this.httpClient = new HttpClient(xhrBackend);
|
||||
this.config = null;
|
||||
}
|
||||
|
||||
public getConfig(key: any) {
|
||||
if (!this.config.hasOwnProperty(key)) {
|
||||
console.error(`Config key ${key} not set`);
|
||||
}
|
||||
return this.config[key];
|
||||
}
|
||||
|
||||
public load(): Promise<any> {
|
||||
return this.httpClient.get('/configuration.json')
|
||||
.toPromise()
|
||||
.then(data => {
|
||||
this.config = data;
|
||||
//return data;
|
||||
})
|
||||
.catch(error => this.config = null);
|
||||
};
|
||||
}
|
||||
import {Inject, Injectable} from '@angular/core';
|
||||
import { Location,PathLocationStrategy,LocationStrategy } from '@angular/common';
|
||||
import {HttpClient, HttpXhrBackend} from '@angular/common/http';
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
export class AppConfig {
|
||||
|
||||
private config: Object = null;
|
||||
private httpClient: HttpClient;
|
||||
|
||||
constructor(xhrBackend: HttpXhrBackend,private location:Location) {
|
||||
this.httpClient = new HttpClient(xhrBackend);
|
||||
this.config = null;
|
||||
}
|
||||
|
||||
public getConfig(key: any) {
|
||||
if (!this.config.hasOwnProperty(key)) {
|
||||
console.error(`Config key ${key} not set`);
|
||||
}
|
||||
return this.config[key];
|
||||
}
|
||||
|
||||
public load(): Promise<any> {
|
||||
var url = this.location.prepareExternalUrl('/configuration.json');
|
||||
if(url.startsWith("#")) url='file:///android_asset/www/configuration.json'; // hack for cordova
|
||||
return this.httpClient.get(url)
|
||||
.toPromise()
|
||||
.then(data => {
|
||||
this.config = data;
|
||||
//return data;
|
||||
})
|
||||
.catch(error => this.config = null);
|
||||
};
|
||||
}
|
||||
|
22
projects/common/src/fm/shared/authconfigFactory.ts
Normal file
22
projects/common/src/fm/shared/authconfigFactory.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { AuthConfig } from 'angular-oauth2-oidc';
|
||||
import {AppConfig} from './app.config';
|
||||
|
||||
export interface IAuthconfigFactory {
|
||||
getAuthConfig(appConfig: AppConfig): AuthConfig;
|
||||
}
|
||||
|
||||
export class AuthConfigFactory implements IAuthconfigFactory {
|
||||
getAuthConfig(appConfig: AppConfig): AuthConfig {
|
||||
let authConfig: AuthConfig = new AuthConfig();
|
||||
authConfig.issuer = appConfig.getConfig("issuer");
|
||||
authConfig.redirectUri = window.location.origin + "/cb";
|
||||
authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
|
||||
authConfig.clientId = appConfig.getConfig("clientId");
|
||||
authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
|
||||
authConfig.scope = "openid profile email";
|
||||
authConfig.oidc = true;
|
||||
authConfig.disableAtHashCheck = true;
|
||||
authConfig.requireHttps = appConfig.getConfig("requireHttps");
|
||||
return authConfig;
|
||||
}
|
||||
}
|
@@ -3,3 +3,4 @@
|
||||
*/
|
||||
|
||||
export * from './fm/common.module';
|
||||
export * from './fm/common-service.module';
|
||||
|
@@ -1,31 +0,0 @@
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'farmmaps-lib-app'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('farmmaps-lib-app');
|
||||
});
|
||||
|
||||
it('should render title in a h1 tag', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to farmmaps-lib-app!');
|
||||
});
|
||||
});
|
@@ -1,64 +1,73 @@
|
||||
import {
|
||||
NgModule,
|
||||
Inject,
|
||||
APP_BOOTSTRAP_LISTENER,
|
||||
InjectionToken, Type,
|
||||
} from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppCommonModule, } from '@farmmaps/common';
|
||||
import { AppCommonMapModule} from '@farmmaps/common-map';
|
||||
|
||||
import {AppRootComponent} from './app.component';
|
||||
|
||||
import {StoreModule, Store} from '@ngrx/store';
|
||||
import {EffectsModule, EffectSources} from '@ngrx/effects';
|
||||
import { StoreRouterConnectingModule} from '@ngrx/router-store';
|
||||
|
||||
import {AppRoutingModule} from './app-routing.module';
|
||||
import { LogoComponent } from './logo/logo.component';
|
||||
import { MenuComponent } from './menu/menu.component';
|
||||
|
||||
export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
|
||||
|
||||
export function bootstrapEffects(effects: Type<any>[], sources: EffectSources) {
|
||||
return () => {
|
||||
effects.forEach(effect => sources.addEffects(effect));
|
||||
};
|
||||
}
|
||||
|
||||
export function createInstances(...instances: any[]) {
|
||||
return instances;
|
||||
}
|
||||
|
||||
export function provideBootstrapEffects(effects: Type<any>[]) {
|
||||
return [
|
||||
effects,
|
||||
{provide: BOOTSTRAP_EFFECTS, deps: effects, useFactory: createInstances},
|
||||
{
|
||||
provide: APP_BOOTSTRAP_LISTENER,
|
||||
multi: true,
|
||||
useFactory: bootstrapEffects,
|
||||
deps: [[new Inject(BOOTSTRAP_EFFECTS)], EffectSources],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppRootComponent,
|
||||
LogoComponent,
|
||||
MenuComponent
|
||||
],
|
||||
imports: [
|
||||
AppRoutingModule,
|
||||
AppCommonModule.forRoot() ,
|
||||
AppCommonMapModule.forRoot(),
|
||||
BrowserModule,
|
||||
StoreModule.forRoot({}),
|
||||
EffectsModule.forRoot([])
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppRootComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
import {
|
||||
NgModule,
|
||||
Inject,
|
||||
APP_BOOTSTRAP_LISTENER,
|
||||
InjectionToken, Type,
|
||||
} from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppCommonModule,AppCommonServiceModule,AuthConfigFactory } from '@farmmaps/common';
|
||||
import { AppCommonMapModule} from '@farmmaps/common-map';
|
||||
|
||||
import {AppRootComponent} from './app.component';
|
||||
|
||||
import {StoreModule, Store} from '@ngrx/store';
|
||||
import {EffectsModule, EffectSources} from '@ngrx/effects';
|
||||
import { StoreRouterConnectingModule} from '@ngrx/router-store';
|
||||
|
||||
import {AppRoutingModule} from './app-routing.module';
|
||||
import { LogoComponent } from './logo/logo.component';
|
||||
import { MenuComponent } from './menu/menu.component';
|
||||
import { LocalAuthconfigFactory} from './localAuthconfigFactory';
|
||||
import { AuthConfig } from 'angular-oauth2-oidc';
|
||||
|
||||
export const BOOTSTRAP_EFFECTS = new InjectionToken('Bootstrap Effects');
|
||||
|
||||
export function bootstrapEffects(effects: Type<any>[], sources: EffectSources) {
|
||||
return () => {
|
||||
effects.forEach(effect => sources.addEffects(effect));
|
||||
};
|
||||
}
|
||||
|
||||
export function createInstances(...instances: any[]) {
|
||||
return instances;
|
||||
}
|
||||
|
||||
export function provideBootstrapEffects(effects: Type<any>[]) {
|
||||
return [
|
||||
effects,
|
||||
{provide: BOOTSTRAP_EFFECTS, deps: effects, useFactory: createInstances},
|
||||
{
|
||||
provide: APP_BOOTSTRAP_LISTENER,
|
||||
multi: true,
|
||||
useFactory: bootstrapEffects,
|
||||
deps: [[new Inject(BOOTSTRAP_EFFECTS)], EffectSources],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppRootComponent,
|
||||
LogoComponent,
|
||||
MenuComponent
|
||||
],
|
||||
imports: [
|
||||
AppRoutingModule,
|
||||
AppCommonModule,
|
||||
AppCommonServiceModule.forRoot(),
|
||||
AppCommonMapModule.forRoot(),
|
||||
BrowserModule,
|
||||
StoreModule.forRoot({}),
|
||||
EffectsModule.forRoot([])
|
||||
],
|
||||
providers: [
|
||||
AuthConfigFactory
|
||||
// {
|
||||
// provide:AuthConfigFactory,
|
||||
// useClass:LocalAuthconfigFactory
|
||||
// }
|
||||
],
|
||||
bootstrap: [AppRootComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
22
src/app/localAuthconfigFactory.ts
Normal file
22
src/app/localAuthconfigFactory.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import {IAuthconfigFactory,AppConfig} from '@farmmaps/common';
|
||||
import {AuthConfig} from 'angular-oauth2-oidc';
|
||||
|
||||
export class LocalAuthconfigFactory implements IAuthconfigFactory {
|
||||
getAuthConfig(appConfig:AppConfig): AuthConfig {
|
||||
let authConfig: AuthConfig = new AuthConfig();
|
||||
authConfig.issuer = appConfig.getConfig("issuer");
|
||||
authConfig.redirectUri = window.location.origin + "/cb";
|
||||
authConfig.silentRefreshRedirectUri = window.location.origin + "/silent-refresh.html";
|
||||
authConfig.clientId = appConfig.getConfig("clientId");
|
||||
authConfig.customQueryParams = { audience: appConfig.getConfig("audience") };
|
||||
authConfig.scope = "openid profile email";
|
||||
authConfig.oidc = true;
|
||||
authConfig.disableAtHashCheck = true;
|
||||
authConfig.openUri = uri => {
|
||||
window.alert("OK "+uri);
|
||||
}
|
||||
authConfig.requireHttps = appConfig.getConfig("requireHttps");
|
||||
return authConfig;
|
||||
}
|
||||
|
||||
}
|
@@ -43,7 +43,7 @@
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
|
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"test.ts",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
|
@@ -1,18 +1,18 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"test.ts",
|
||||
"polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
|
@@ -2,15 +2,16 @@
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"downlevelIteration": true,
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"module": "es2015",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"target": "es5",
|
||||
"target": "es2015",
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
|
150
tslint.json
150
tslint.json
@@ -1,75 +1,75 @@
|
||||
{
|
||||
"extends": "tslint:recommended",
|
||||
"rulesDirectory": [
|
||||
"codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"array-type": false,
|
||||
"arrow-parens": false,
|
||||
"deprecation": {
|
||||
"severity": "warn"
|
||||
},
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"interface-name": false,
|
||||
"max-classes-per-file": false,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-empty": false,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-requires": false,
|
||||
"object-literal-key-quotes": [
|
||||
true,
|
||||
"as-needed"
|
||||
],
|
||||
"object-literal-sort-keys": false,
|
||||
"ordered-imports": false,
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"trailing-comma": false,
|
||||
"no-output-on-prefix": true,
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true
|
||||
}
|
||||
}
|
||||
{
|
||||
"extends": "tslint:recommended",
|
||||
"rulesDirectory": [
|
||||
"codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"array-type": false,
|
||||
"arrow-parens": false,
|
||||
"deprecation": {
|
||||
"severity": "warn"
|
||||
},
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs/Rx"
|
||||
],
|
||||
"interface-name": false,
|
||||
"max-classes-per-file": false,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"static-field",
|
||||
"instance-field",
|
||||
"static-method",
|
||||
"instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-consecutive-blank-lines": false,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-empty": false,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-non-null-assertion": true,
|
||||
"no-redundant-jsdoc": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-requires": false,
|
||||
"object-literal-key-quotes": [
|
||||
true,
|
||||
"as-needed"
|
||||
],
|
||||
"object-literal-sort-keys": false,
|
||||
"ordered-imports": false,
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"trailing-comma": false,
|
||||
"no-output-on-prefix": true,
|
||||
"no-inputs-metadata-property": true,
|
||||
"no-outputs-metadata-property": true,
|
||||
"no-host-metadata-property": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-lifecycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user