Jose Pinto / foca-modal-localizar

Download as
Browse Code »

Commit 8937dda11435b8baff14fea69ee20ba894585ea4

Authored by Jose Pinto
1 parent 1beb4124a2
Exists in master

Primera version

Showing 11 changed files with 404 additions and 0 deletions   Show diff stats
File was created 1 /node_modules
2 /dist
3 /tmp
4 package-lock\.json
5 src/etc/develop\.js
6
File was created 1 {
2 /*
3 * ENVIRONMENTS
4 * =================
5 */
6
7 // Define globals exposed by modern browsers.
8 "browser": true,
9
10 // Define globals exposed by jQuery.
11 "jquery": true,
12
13 // Define globals exposed by Node.js.
14 "node": true,
15
16 // Allow ES6.
17 "esversion": 6,
18
19 /*
20 * ENFORCING OPTIONS
21 * =================
22 */
23
24 // Force all variable names to use either camelCase style or UPPER_CASE
25 // with underscores.
26 "camelcase": true,
27
28 // Prohibit use of == and != in favor of === and !==.
29 "eqeqeq": true,
30
31 // Enforce tab width of 2 spaces.
32 "indent": 4,
33
34 // Prohibit use of a variable before it is defined.
35 "latedef": false,
36
37 // Enforce line length to 100 characters
38 "maxlen": 100,
39
40 // Require capitalized names for constructor functions.
41 "newcap": true,
42
43 // Enforce use of single quotation marks for strings.
44 "quotmark": "single",
45
46 // Enforce placing 'use strict' at the top function scope
47 "strict": false,
48
49 // Prohibit use of explicitly undeclared variables.
50 "undef": true,
51
52 // Warn when variables are defined but never used.
53 "unused": true,
54
55 // Para que funcione en angular
56 "predef": ["angular", "alert", "spyOn", "expect", "it", "inject", "beforeEach", "describe"],
57 /*
58 * RELAXING OPTIONS
59 * =================
60 */
61
62 // Suppress warnings about == null comparisons.
63 "eqnull": true
64 }
65
File was created 1 const templateCache = require('gulp-angular-templatecache');
2 const concat = require('gulp-concat');
3 const htmlmin = require('gulp-htmlmin');
4 const rename = require('gulp-rename');
5 const uglify = require('gulp-uglify');
6 const gulp = require('gulp');
7 const pump = require('pump');
8 const jshint = require('gulp-jshint');
9 const replace = require('gulp-replace');
10 const connect = require('gulp-connect');
11 const clean = require('gulp-clean');
12
13 var paths = {
14 srcJS: 'src/js/*.js',
15 srcViews: 'src/views/*.html',
16 tmp: 'tmp',
17 dist: 'dist/'
18 };
19
20 gulp.task('templates', function() {
21 return pump(
22 [
23 gulp.src(paths.srcViews),
24 htmlmin(),
25 templateCache('views.js', {
26 module: 'focaModalLocalizar',
27 root: ''
28 }),
29 gulp.dest(paths.tmp)
30 ]
31 );
32 });
33
34 gulp.task('uglify', ['templates'], function() {
35 return pump(
36 [
37 gulp.src([
38 paths.srcJS,
39 'tmp/views.js'
40 ]),
41 concat('foca-modal-localizar.js'),
42 replace('src/views/', ''),
43 replace("['ui.bootstrap', 'focaDirectivas']", '[]'),
44 gulp.dest(paths.tmp),
45 rename('foca-modal-localizar.min.js'),
46 uglify(),
47 gulp.dest(paths.dist)
48 ]
49 );
50 });
51
52 gulp.task('pre-commit', function() {
53 return pump(
54 [
55 gulp.src(paths.srcJS),
56 jshint('.jshintrc'),
57 jshint.reporter('default'),
58 jshint.reporter('fail')
59 ]
60 );
61
62 gulp.start('uglify');
63 });
64
65 gulp.task('webserver', function() {
66 pump [
67 connect.server({port: 3000})
68 ]
69 });
70
71 gulp.task('clean-post-install', function(){
72 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
73 'index.html'], {read: false})
74 .pipe(clean());
75 });
76
77 gulp.task('default', ['webserver']);
78
79 gulp.task('watch', function() {
80 gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
81 });
82
File was created 1 <html ng-app="focaModalLocalizar">
2 <head>
3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5
6 <!--CSS-->
7 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
8 <link href="node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>
9 <style>
10 osm>div {
11 width: 100%;
12 height: 576px;
13 }
14 </style>
15
16 <!--VENDOR JS-->
17 <script src="node_modules/jquery/dist/jquery.min.js"></script>
18 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
19 <script src="node_modules/angular/angular.min.js"></script>
20 <script src="node_modules/angular-route/angular-route.min.js"></script>
21 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
22 <script src="node_modules/leaflet/dist/leaflet.js"></script>
23
24 <!-- BUILD -->
25 <script src="src/js/app.js"></script>
26 <script src="src/js/controller.js"></script>
27 <script src="src/js/route.js"></script>
28 <script src="src/js/service.js"></script>
29 <script src="src/js/osm-directive.js"></script>
30 <!-- /BUILD -->
31
32 <!-- CONFIG PARA DEVELOP -->
33 <script src="src/etc/develop.js"></script>
34 </head>
35 <body>
36 <div ng-view class="container-fluid"></div>
37 </body>
38 </html>
39
File was created 1 {
2 "name": "foca-modal-localizar",
3 "version": "0.0.1",
4 "description": "Modal para localizar domicilio",
5 "scripts": {
6 "test": "echo \"Error: no test specified\" && exit 1",
7 "gulp-pre-commit": "gulp pre-commit",
8 "compile": "gulp uglify",
9 "postinstall": "npm run compile && gulp clean-post-install",
10 "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+http://git.focasoftware.com/npm/foca-directivas.git"
11 },
12 "pre-commit": [
13 "gulp-pre-commit"
14 ],
15 "repository": {
16 "type": "git",
17 "url": "https://debo.suite.repo/modulos-npm/foca-modal-localizar.git"
18 },
19 "author": "Foca Software",
20 "license": "ISC",
21 "peerDependencies": {
22 "angular": "^1.7.4",
23 "bootstrap": "^4.1.3",
24 "font-awesome": "^4.7.0",
25 "ui-bootstrap4": "^3.0.4",
26 "gulp": "^3.9.1",
27 "gulp-angular-templatecache": "^2.2.1",
28 "gulp-concat": "^2.6.1",
29 "gulp-connect": "^5.6.1",
30 "gulp-htmlmin": "^5.0.1",
31 "gulp-rename": "^1.4.0",
32 "gulp-replace": "^1.0.0",
33 "gulp-uglify": "^3.0.1",
34 "jquery": "^3.3.1",
35 "pump": "^3.0.0",
36 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git"
37 },
38 "devDependencies": {
39 "angular": "^1.7.5",
40 "bootstrap": "^4.1.3",
41 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
42 "font-awesome": "^4.7.0",
43 "gulp": "^3.9.1",
44 "gulp-angular-templatecache": "^2.2.3",
45 "gulp-clean": "^0.4.0",
46 "gulp-concat": "^2.6.1",
47 "gulp-connect": "^5.6.1",
48 "gulp-htmlmin": "^5.0.1",
49 "gulp-jshint": "^2.1.0",
50 "gulp-rename": "^1.4.0",
51 "gulp-replace": "^1.0.0",
52 "gulp-uglify": "^3.0.1",
53 "jasmine-core": "^3.3.0",
54 "jquery": "^3.3.1",
55 "jshint": "^2.9.6",
56 "leaflet": "^1.3.4",
57 "pre-commit": "^1.2.2",
58 "pump": "^3.0.0",
59 "ui-bootstrap4": "^3.0.5"
60 }
61 }
62
src/etc/develop.js.ejemplo
Diff comments   View file @ 8937dda
File was created 1 angular.module('focaModalLocalizar')
2 .constant("API_ENDPOINT", {
3 'URL': '//127.0.0.1:9000'
4 });
5
File was created 1 angular.module('focaModalLocalizar', [
2 'ui.bootstrap',
3 'focaDirectivas',
4 'focaModal'
5 ]);
6
src/js/controller.js
Diff comments   View file @ 8937dda
File was created 1 angular.module('focaModalLocalizar')
2 .controller('focaModalLocalizarController',
3 [
4 '$scope',
5 '$uibModalInstance',
6 'focaModalLocalizarService',
7 'direccion',
8 function($scope, $uibModalInstance,
9 focaModalLocalizarService, direccion) {
10
11 $scope.latitud = -32.89214159952345;
12 $scope.longitud = -68.84572999101856;
13
14 if(direccion) {
15 focaModalLocalizarService
16 .getLatLng({
17 street: direccion.numero + ' ' + direccion.calle,
18 country: 'Argentina',
19 city: direccion.provincia,
20 county: direccion.localidad,
21 format: 'json'
22 })
23 .then(function(res) {
24 $scope.latitud = res.data[0].lat;
25 $scope.longitud = res.data[0].lon;
26 $scope.$broadcast('moveMap', {
27 latitud: $scope.latitud,
28 longitud: $scope.longitud
29 });
30 });
31 }
32
33 $scope.cancel = function() {
34 $uibModalInstance.dismiss();
35 };
36
37 $scope.aceptar = function() {
38 $uibModalInstance.close({
39 latitud: $scope.latitud,
40 longitud: $scope.longitud
41 });
42 };
43 }
44 ]
45 );
46
src/js/osm-directive.js
Diff comments   View file @ 8937dda
File was created 1 angular.module('focaModalLocalizar').directive('osmDireccion', function() {
2 return {
3 restrict: 'E',
4 link: function(scope, el, attrs) {
5 var contenedor = document.createElement('div');
6 contenedor.className = 'w-100 h-50 mt-3';
7 el.append(contenedor);
8 scope.map = L.map(contenedor).setView([-32.89214159952345, -68.84572999101856], attrs.zoom);
9 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scope.map);
10 },
11 controller: ['$scope', '$timeout', function($scope, $timeout) {
12 //resuelve bug mapa gris en modales
13 $timeout(function() {
14 $scope.map.invalidateSize();
15 }, 100);
16
17 $scope.markers = [];
18 $scope.$watchGroup(['latitud', 'longitud'], function() {
19 for(var i in $scope.markers) {
20 $scope.map.removeLayer($scope.markers[i]);
21 }
22 $scope.markers.push(
23 L.marker([$scope.latitud, $scope.longitud], {draggable: true})
24 .addTo($scope.map)
25 .on('dragend', function() {
26 $scope.latitud = this.getLatLng().lat;
27 $scope.longitud = this.getLatLng().lng;
28 $scope.$apply();
29 })
30 );
31 });
32
33 $scope.$on('moveMap', function(evt, data) {
34 $scope.map.panTo(new L.LatLng(data.latitud, data.longitud));
35 });
36 }],
37 scope: {
38 latitud: '=',
39 longitud: '=',
40 zoom: '='
41 }
42 };
43 });
44
File was created 1 angular.module('focaModalLocalizar')
2 .service('focaModalLocalizarService', [
3 '$http',
4 'API_ENDPOINT',
5 function($http, API_ENDPOINT) {
6 return {
7 getLatLng: function(direccion) {
8 return $http.get('https://nominatim.openstreetmap.org/search', {params: direccion});
9 }
10 };
11 }
12 ]);
13
src/views/modal-localizar.html
Diff comments   View file @ 8937dda
File was created 1 <div class="modal-header py-1">
2 <div class="row">
3 <div class="col 12">
4 <h5>Búsqueda de domicilio</h5>
5 </div>
6 </div>
7 </div>
8 <div class="modal-body" id="modal-body">
9 <form>
10 <div class="row">
11 <div class="col-6">
12 <label>Latitud</label>
13 <input
14 type="number"
15 class="form-control"
16 ng-model="latitud"
17 string-to-number>
18 </div>
19 <div class="col-6">
20 <label>Longitud</label>
21 <input
22 type="number"
23 class="form-control"
24 ng-model="longitud"
25 string-to-number>
26 </div>
27 </div>
28 </form>
29 <osm-direccion
30 latitud="latitud"
31 longitud="longitud"
32 zoom="14"
33 />
34 </div>
35 <div class="modal-footer">
36 <button
37 class="btn btn-sm btn-secondary"
38 type="button"
39 ng-click="cancel()"
40 >Cancelar</button>
41 <button
42 class="btn btn-sm btn-primary"
43 type="button"
44 ng-click="aceptar()"
45 >Aceptar</button>
46 </div>
47