@@ -2,135 +2,56 @@ require('../scss/form-ticket-add.scss')
22
33const $ = require ( 'jquery' )
44require ( 'jquery-validation' )
5- require ( 'jquery-ui/ui/widgets/autocomplete ' )
5+ const proj4 = require ( 'proj4' ) . default || require ( 'proj4 ')
66
7- // @see https://stackoverflow.com/a/11845718
8- $ . ui . autocomplete . prototype . _resizeMenu = function ( ) {
9- const ul = this . menu . element
10- ul . outerWidth ( this . element . outerWidth ( ) )
11- }
7+ // Define the UTM zone 32N projection used by the adressevaelger API.
8+ proj4 . defs ( 'EPSG:25832' , '+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs' )
129
1310$ ( ( ) => {
14- const config = {
15- fields : {
16- postalCodeAndCity : 'edit-postal-code-and-city' ,
17- streetAndNumber : 'edit-street-and-number'
18- }
19- }
20-
21- const postalCodeAndCity = $ ( '[data-drupal-selector="' + config . fields . postalCodeAndCity + '"]' )
22- const streetAndNumber = $ ( '[data-drupal-selector="' + config . fields . streetAndNumber + '"]' )
23-
24- if ( postalCodeAndCity && streetAndNumber ) {
25- // @see https://codepen.io/mi2oon/pen/zpNMoL
26- const API = 'https://dawa.aws.dk'
27-
28- const getData = ( path , query = { } ) => {
29- const url = `${ API } ${ path } + Object . entries ( query )
30- . filter ( e => e [ 1 ] !== null )
31- . map ( e => encodeURIComponent ( e [ 0 ] ) + '=' + encodeURIComponent ( e [ 1 ] ) ) . join ( '&' )
32-
33- return $ . ajax ( {
34- url
35- } )
36- }
37-
38- const address = {
39- postnr : null ,
40- vejnavn : null ,
41- husnr : null
42- }
43-
44- // Autocomplete postal code
45- getData ( 'postnumre' )
46- . then ( data => {
47- const autocompleteData = data . map ( postnr => ( {
48- label : `${ postnr . nr } ${ postnr . navn } ,
49- dataValue : postnr . nr
50- } ) )
51-
52- postalCodeAndCity . autocomplete ( {
53- source : autocompleteData ,
54- autoFocus : true ,
55- minLength : 1 ,
56- select : ( e , ui ) => {
57- address . postnr = ui . item . dataValue
58- address . vejnavn = null
59- address . husnr = null
60- }
61- } )
62- } )
63-
64- const autocompleteStreetNumber = function ( ) {
65- getData ( 'adresser' , address )
66- . then ( ( data ) => {
67- const autocompleteData = data
68- . map ( adresse => adresse . adgangsadresse )
69- . map ( adgangsadresse => ( {
70- label : `${ adgangsadresse . vejstykke . navn } ${ adgangsadresse . husnr } ,
71- dataValue : adgangsadresse . husnr
72- } ) )
73-
74- $ ( this ) . autocomplete ( {
75- source : autocompleteData ,
76- autoFocus : true ,
77- minLength : 1 ,
78- select : ( e , ui ) => { address . husnr = ui . item . dataValue }
79- } )
80- } )
81- }
82-
83- const autocompleteStreet = function ( ) {
84- if ( address . postalCode === null ) {
85- return
86- }
87-
88- getData ( 'vejnavne' , address )
89- . then ( ( data ) => {
90- const autocompleteData = data . map ( vej => ( {
91- label : vej . navn ,
92- dataValue : vej . navn
93- } ) )
94-
95- $ ( this ) . autocomplete ( {
96- source : autocompleteData ,
97- autoFocus : true ,
98- minLength : 1 ,
99- select : ( e , ui ) => {
100- address . vejnavn = ui . item . dataValue
101- address . husnr = null
102-
103- autocompleteStreetNumber . apply ( this )
104- }
105- } )
106- } )
107- }
11+ const addressLookup = document . getElementById ( 'address-lookup' )
12+ const postalCodeAndCity = document . querySelector ( '[data-drupal-selector="edit-postal-code-and-city"]' )
13+ const streetAndNumber = document . querySelector ( '[data-drupal-selector="edit-street-and-number"]' )
14+ const geolocation = document . querySelector ( '[data-drupal-selector="edit-geolocation"]' )
15+ const postalCode = document . querySelector ( '[data-drupal-selector="edit-postal-code"]' )
16+
17+ if ( addressLookup && postalCodeAndCity && streetAndNumber && geolocation ) {
18+ const wrapper = document . createElement ( 'div' )
19+ wrapper . setAttribute ( 'class' , 'autocomplete-container' )
20+ addressLookup . parentNode . replaceChild ( wrapper , addressLookup )
21+ wrapper . appendChild ( addressLookup )
22+
23+ // Initialize adressevaelger on the address lookup field.
24+ // When an address is selected, populate hidden form fields with the
25+ // address components and geolocation for server-side processing.
26+ // `adressevaelger` is a global provided at runtime:
27+ // - adressevaelger: set by adressevaelger.iife.js, loaded via the
28+ // hoeringsportal_forms/adressevaelger-support-text-field library dependency.
29+ // eslint-disable-next-line no-undef
30+ adressevaelger . adressevaelger ( addressLookup , {
31+ // eslint-disable-next-line no-undef
32+ token : drupalSettings . adressevaelger . token ,
33+ select : function ( selected ) {
34+ // The selected object nests address data under adresse.husnummer.
35+ const husnummer = ( selected . adresse && selected . adresse . husnummer ) || { }
36+ const postnr = husnummer . postnummer || { }
37+ postalCodeAndCity . value = ( postnr . postnr || '' ) + ' ' + ( postnr . navn || '' )
38+ if ( postalCode ) {
39+ postalCode . value = postnr . postnr || ''
40+ }
10841
109- streetAndNumber
110- . on ( 'focus' , autocompleteStreet )
111- . on ( 'keyup' , function ( event ) {
112- switch ( event . key ) {
113- // Ignore keys used to navigate autocomplete suggestions.
114- case 'ArrowUp' :
115- case 'ArrowDown' :
116- case 'Tab' :
117- case 'Enter' :
118- break
42+ streetAndNumber . value = ( ( husnummer . vejnavn || '' ) + ' ' + ( husnummer . husnummertekst || '' ) ) . trim ( )
11943
120- default :
121- // Decide if we're completing street or street number.
122- if ( address . vejnavn !== null ) {
123- const value = $ ( this ) . val ( )
124- // If a street has been selected and the current value if a prefix of the selected value, we autocomplete (a new) street.
125- if ( value === '' || address . vejnavn . indexOf ( value ) > - 1 ) {
126- autocompleteStreet . apply ( this )
127- } else {
128- autocompleteStreetNumber . apply ( this )
129- }
130- }
131- break
44+ // The adressevaelger API returns coordinates in EPSG:25832 (UTM zone 32N).
45+ // Convert to EPSG:4326 (WGS84 longitude, latitude) for Deskpro.
46+ // proj4 returns [longitude, latitude].
47+ const coords = husnummer . adgangspunkt && husnummer . adgangspunkt . koordinater
48+ if ( coords && coords . x && coords . y ) {
49+ const wgs84 = proj4 ( 'EPSG:25832' , 'EPSG:4326' , [ coords . x , coords . y ] )
50+ // Format to 8 decimal places to match the precision of the old DAWA API output.
51+ geolocation . value = wgs84 [ 0 ] . toFixed ( 8 ) + ', ' + wgs84 [ 1 ] . toFixed ( 8 )
13252 }
133- } )
53+ }
54+ } )
13455 }
13556
13657 document . querySelector ( 'form#hearing-ticket-add-form' ) . addEventListener ( 'submit' , function ( ) {
0 commit comments