yarn encore dev broke on TypeScript content in signup.js.

Author: thisismeonmounteverest

assets/js/signup.js

@@ -1,25 +1,27 @@
-import VanillaCalendar, { Options, FormatDateString } from 'vanilla-calendar-pro';
+import VanillaCalendar from 'vanilla-calendar-pro';
 import 'vanilla-calendar-pro/build/vanilla-calendar.min.css';
 import * as dayjs from 'dayjs'
 
+import 'leaflet';
+import 'leaflet/dist/leaflet.css';
 import {initializeSingleAutoComplete} from './suggest/locations';
-import * as L from 'leaflet';
-
 import 'leaflet.fullscreen';
 import 'leaflet.fullscreen/Control.FullScreen.css';
+import { default as rangeslider } from 'rangeslider-pure';
 
 const htmlTag = document.getElementsByTagName('html')[0];
 const lang = htmlTag.attributes['lang'].value;
 
 const minimumAge = dayjs().subtract(18, 'year');
 const maximumAge = minimumAge.subtract(122, 'year');
 
-const options: Options = {
+const options = {
     input: true,
     type: 'default',
     date: {
-        max: <FormatDateString>minimumAge.format('YYYY-MM-DD'),
-        min: <FormatDateString>maximumAge.format('YYYY-MM-DD')
+        max: minimumAge.format('YYYY-MM-DD'),
+        min: maximumAge.format('YYYY-MM-DD'),
+        today: minimumAge.toDate(),
     },
     actions: {
         changeToInput(e, calendar, self) {
@@ -34,74 +36,83 @@ const options: Options = {
     },
     settings: {
         lang: lang,
+        range: {
+            max: minimumAge.format('YYYY-MM-DD'),
+            min: maximumAge.format('YYYY-MM-DD'),
+        },
         visibility: {
             positionToInput: 'center',
             theme: 'light',
             disabled: false,
-        },
+            weekend: false,
+            today: false,        },
     },
 };
 
 const birthDate = document.getElementById('signup_form_finalize_birthdate');
 const calendar = new VanillaCalendar(birthDate, options);
 calendar.init();
 
-const labelText = document.getElementById('marker_label_text').value;
-const locationGeonameId = document.getElementById('set_location_geoname_id');
-const locationLatitude = document.getElementById('set_location_latitude');
-const locationLongitude = document.getElementById('set_location_longitude');
-const originalLatitude = document.getElementById('original_latitude');
-const originalLongitude = document.getElementById('original_longitude');
+const labelText = 'marker-label'; // document.getElementById('marker_label_text').value;
+const locationGeonameId = document.getElementById('signup_form_finalize_location_geoname_id');
+const locationLatitude = document.getElementById('signup_form_finalize_location_latitude');
+const locationLongitude = document.getElementById('signup_form_finalize_location_longitude');
 
 const myIcon = L.icon({
     iconUrl: 'images/icons/marker_drop.png',
     iconSize: [29, 24],
     iconAnchor: [9, 21],
     popupAnchor: [0, -14]
 });
-let marker = L.marker([locationLatitude.value, locationLongitude.value], {
-    icon: myIcon,
-    draggable: true
-});
-marker.bindPopup(labelText);
-marker.on('dragend', dragend);
-const map = L.map('map');
-marker.addTo(map);
-map.setView([locationLatitude.value, locationLongitude.value], 12);
 
 // callback when a selection is done from the list of possible results
-const addMarkerAndMoveToNewLocation = function(element, result) {
+const storeLocation = function(element, result) {
     locationGeonameId.value = result.id;
     locationLatitude.value = result.latitude;
     locationLongitude.value = result.longitude;
-    originalLatitude.value = result.latitude;
-    originalLongitude.value = result.longitude;
+};
 
-    map.removeLayer(marker);
+initializeSingleAutoComplete("/suggest/locations/places/exact", 'js-location-picker', storeLocation);
 
-    marker = L.marker([locationLatitude.value, locationLongitude.value], {
-        icon: myIcon,
-        draggable: true
-    });
-    marker.bindPopup(labelText);
-    marker.on('dragend', dragend);
-    marker.addTo(map);
-    map.setView(new L.LatLng(locationLatitude.value, locationLongitude.value), 12, {animate: true});
-};
+const slider = document.querySelectorAll('input[type="range"]');
 
-// Dragging the marker around on the map changes the stored lat, long
-function dragend(e) {
-    const originalLatLng = L.latLng(originalLatitude.value, originalLongitude.value);
-    locationLatitude.value = e.target._latlng.lat;
-    locationLongitude.value = e.target._latlng.lng;
+function updateValueOutput(value) {
+    const valueOutput = document.getElementsByClassName('rangeSlider__value-output');
+    if (valueOutput.length) {
+        valueOutput[0].innerHTML = markers[value];
+    }
 }
 
-initializeSingleAutoComplete("/suggest/locations/places/exact", 'js-location-picker', addMarkerAndMoveToNewLocation);
+const initializeSlider = () => {
+    return rangeslider.create(slider, {
+        onInit: function() {
+            updateValueOutput(0);
+        },
+        onSlide: function(value, percent, position) {
+            updateValueOutput(value);
+        }
+    });
+};
 
-L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
-    subdomains: ['a', 'b', 'c']
-}).addTo(map);
+initializeSlider();
+
+const accommodationRadiobuttons = document.querySelectorAll(".btn-light");
+const hostingInterest = document.getElementById('hosting_interest');
+const radioHandler = (event) => {
+    if (event.target.type === 'radio') {
+        console.log("Clicked: ", event.target.type, event.target.checked, event.target.value);
+        if (event.target.value === 'no') {
+            hostingInterest.classList.remove('u-block');
+            hostingInterest.classList.add('u-hidden');
+        } else {
+            hostingInterest.classList.remove('u-hidden');
+            hostingInterest.classList.add('u-block');
+        }
+    }
+}
 
-L.control.scale().addTo(map);
+for (let radio of accommodationRadiobuttons) {
+    radio.addEventListener("click", radioHandler)
+}
 
+console.log(accommodationRadiobuttons)