From 887e049f2c79c93c85e0dc1eea397023d1509542 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Sun, 26 Jul 2020 19:13:52 +0200 Subject: [PATCH] Add phone number validation and auto-formatting to the correct international format --- Customizations/TagRendering.ts | 20 ++++++++++----- Logic/FilteredLayer.ts | 19 +++++++++++--- package-lock.json | 47 ++++++++++++++++++++++++++++++++++ package.json | 13 ++++++++++ 4 files changed, 90 insertions(+), 9 deletions(-) diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts index 193e24e..34ed407 100644 --- a/Customizations/TagRendering.ts +++ b/Customizations/TagRendering.ts @@ -16,7 +16,9 @@ import {RadioButton} from "../UI/Input/RadioButton"; import Translations from "../UI/i18n/Translations"; import Locale from "../UI/i18n/Locale"; import * as EmailValidator from 'email-validator'; -import { parsePhoneNumberFromString } from 'libphonenumber-js' +import {parsePhoneNumberFromString} from 'libphonenumber-js' + + export class TagRenderingOptions implements TagDependantUIElementConstructor { @@ -27,11 +29,16 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor { "nat": (str) => str.indexOf(".") < 0 && !isNaN(Number(str)) && Number(str) > 0, "float": (str) => !isNaN(Number(str)), "email": (str) => EmailValidator.validate(str), - "phone": (str) => parsePhoneNumberFromString(str).isValid() + "phone": (str, country) => { + return parsePhoneNumberFromString(str, country.toUpperCase())?.isValid() ?? false; + } } public static formatting = { - "phone": (str) => parsePhoneNumberFromString(str).formatInternational() + "phone": (str, country) => { + console.log("country formatting", country) + return parsePhoneNumberFromString(str, country.toUpperCase()).formatInternational() + } } /** @@ -352,8 +359,9 @@ class TagRendering extends UIElement implements TagDependantUIElement { const prepost = Translations.W(freeform.template).InnerRender().split("$"); const type = prepost[1]; + let isValid = TagRenderingOptions.inputValidation[type]; - if(isValid === undefined){ + if (isValid === undefined) { console.log("Invalid type for field type", type) isValid = (str) => true; } @@ -364,10 +372,10 @@ class TagRendering extends UIElement implements TagDependantUIElement { if (string === "" || string === undefined) { return undefined; } - if (!isValid(string)) { + if (!isValid(string, this._source.data._country)) { return undefined; } - const tag = new Tag(freeform.key, formatter(string)); + const tag = new Tag(freeform.key, formatter(string, this._source.data._country)); if (freeform.extraTags === undefined) { return tag; diff --git a/Logic/FilteredLayer.ts b/Logic/FilteredLayer.ts index 15fddf7..14fc849 100644 --- a/Logic/FilteredLayer.ts +++ b/Logic/FilteredLayer.ts @@ -8,7 +8,7 @@ import {GeoOperations} from "./GeoOperations"; import {UIElement} from "../UI/UIElement"; import {LayerDefinition} from "../Customizations/LayerDefinition"; import {UserDetails} from "./OsmConnection"; - +import codegrid from "codegrid-js"; /*** * A filtered layer is a layer which offers a 'set-data' function * It is initialized with a tagfilter. @@ -45,6 +45,8 @@ export class FilteredLayer { private _selectedElement: UIEventSource<{ feature: any }>; private _showOnPopup: (tags: UIEventSource, feature: any) => UIElement; + private static readonly grid = codegrid.CodeGrid(); + constructor( layerDef: LayerDefinition, map: Basemap, storage: ElementStorage, @@ -106,12 +108,23 @@ export class FilteredLayer { // feature.properties contains all the properties var tags = TagUtils.proprtiesToKV(feature.properties); if (this.filters.matches(tags)) { + const centerPoint = GeoOperations.centerpoint(feature); feature.properties["_surface"] = GeoOperations.surfaceAreaInSqMeters(feature); + const lat = centerPoint.geometry.coordinates[1]; + const lon = centerPoint.geometry.coordinates[0] + feature.properties["_lon"] = lat; + feature.properties["_lat"] = lon; + FilteredLayer.grid.getCode(lat, lon, (error, code) => { + if (error === null) { + feature.properties["_country"] = code; + } + }) + if (feature.geometry.type !== "Point") { if (this._wayHandling === LayerDefinition.WAYHANDLING_CENTER_AND_WAY) { - selfFeatures.push(GeoOperations.centerpoint(feature)); + selfFeatures.push(centerPoint); } else if (this._wayHandling === LayerDefinition.WAYHANDLING_CENTER_ONLY) { - feature = GeoOperations.centerpoint(feature); + feature = centerPoint; } } selfFeatures.push(feature); diff --git a/package-lock.json b/package-lock.json index da89ba4..c2fb663 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1939,6 +1939,10 @@ "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, + "codegrid-js": { + "version": "git://github.com/hlaw/codegrid-js.git#38decfe10dced9006c6b722cc403d7c1217abe98", + "from": "git://github.com/hlaw/codegrid-js.git" + }, "collection-visit": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", @@ -4188,6 +4192,12 @@ "object-visit": "^1.0.0" } }, + "marked": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/marked/-/marked-1.1.1.tgz", + "integrity": "sha512-mJzT8D2yPxoPh7h0UXkB+dBj4FykPJ2OIfxAWeIHrvoHDkFxukV/29QxoFQoPM6RLEwhIFdJpmKBlqVM3s2ZIw==", + "dev": true + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -5075,6 +5085,16 @@ "ws": "^5.1.1" } }, + "parcel-plugin-static-files-copy": { + "version": "2.4.3", + "resolved": "https://registry.npmjs.org/parcel-plugin-static-files-copy/-/parcel-plugin-static-files-copy-2.4.3.tgz", + "integrity": "sha512-tUZn54XsZIZ9hhhNQkyaWaHLvjOj2wra8pp4yPjp1b5p1frQ+YEwG6eaNtaQVyA+UvORsZg+Wni7n9gIOBE8eA==", + "dev": true, + "requires": { + "minimatch": "3.0.4", + "path": "0.12.7" + } + }, "parse-asn1": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz", @@ -5112,6 +5132,33 @@ "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=" }, + "path": { + "version": "0.12.7", + "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", + "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=", + "dev": true, + "requires": { + "process": "^0.11.1", + "util": "^0.10.3" + }, + "dependencies": { + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "util": { + "version": "0.10.4", + "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", + "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", + "dev": true, + "requires": { + "inherits": "2.0.3" + } + } + } + }, "path-browserify": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz", diff --git a/package.json b/package.json index 474f320..3d163c7 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,19 @@ "version": "0.0.1", "description": "A small website to edit OSM easily", "main": "index.js", + "staticFiles": { + "staticPath": [ + { + "staticPath": "tiles", + "staticOutDir": "tiles/" + } + ] + }, "scripts": { "start": "parcel *.html UI/** Logic/** assets/**/* vendor/* vendor/*/*", + "generate": "ts-node createLayouts.ts", "build": "rm -rf dist/ && parcel build --public-url ./ *.html assets/* assets/*/* vendor/* vendor/*/*", + "clean": "./clean.sh", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ @@ -15,6 +25,7 @@ "author": "pietervdvn", "license": "MIT", "dependencies": { + "codegrid-js": "git://github.com/hlaw/codegrid-js.git", "email-validator": "^2.0.4", "jquery": "latest", "leaflet": "^1.6.0", @@ -29,6 +40,8 @@ "@babel/polyfill": "^7.10.4", "@types/node": "^7.0.5", "fs": "0.0.1-security", + "marked": "^1.1.1", + "parcel-plugin-static-files-copy": "^2.4.3", "promise-svg2img": "^0.2.0", "read-file": "^0.2.0", "typescript": "^3.9.7",