accent-dialect-map/app.js

'use strict';

let currentPage = 2;
const tabs = document.getElementsByClassName('page');
const validField = (formId, fieldId, customFieldId) => {
  const form = document.getElementById(formId);
  const element = form.querySelector(`#${fieldId}`);
  if (element.value === '') {
    form.classList.add('was-validated');
    console.log("invalid", fieldId)
    return false;
  } else {
    if (customFieldId && element.value === 'other') {
      const customField = form.querySelector(`#${customFieldId}`);
      if (customField.value === '') {
        customField.classList.add('is-invalid');
        console.log("invalidcustom", customFieldId)
        return false
      } else {
        console.log("valid custom", customFieldId)
        return true
      }
    }
    console.log("custom with response", fieldId, customFieldId)
    return true;
  }
}

const conditions = {
  agreement: [
    () => {
      const agreementCheckbox = document.getElementById('agreement');
      if (agreementCheckbox.checked) {
        return true;
      } else {
        const form = document.getElementById('terms-and-conditions-form');
        form.classList.add('was-validated');
        return false;
      }
    }
  ],
  personalInformation: [
    () => validField('personal-information-form', 'age-range'),
    () => validField('personal-information-form', 'gender', 'gender-custom'),
    () => validField('personal-information-form', 'ethnicity', 'ethnicity-custom'),
    () => validField('personal-information-form', 'town-birth'),
    () => validField('personal-information-form', 'postal-code'),
  ]
}


const showCustomInput = (customElementId, element) => {
  if (element.value === 'other') {
    const customInput = document.getElementById(customElementId);
    customInput.style.display = 'block'
  } 
}

const showPage = (page) => {
  tabs[page].style.display = 'block';  
}

const isValid = condition => condition();

const changePage = (page, condition) => {
  if (condition && !conditions[condition].map(isValid).every(result => result)) {
    console.log("not all conditions passed");
    return;
  }
  tabs[currentPage].style.display = 'none';
  showPage(page);
  currentPage = page;
}

showPage(2);







mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
const bounds = [
  [-2.460270, 53.370427],
  [-2.062598, 53.552900]
]

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
  center: [-2.884808, 53.495743],
  zoom: 9.5,
});

const Draw = new MapboxDraw({
  displayControlsDefault: false,
  controls: {
    polygon: true,
    trash: true
  }
  });

console.log("turf", turf);

const AddPopup = (map) => (area) => {
  let polygon = turf.polygon(area);
  let center = turf.centroid(polygon);
  console.log(center, polygon)

  return new mapboxgl.Popup({closeOnClick: false})
    .setLngLat(center.geometry.coordinates)
    .setHTML(`
      <h3>form</h3>
      <label for="data">some data</label>
      <input type="text" class="form-control" id="data" placeholder="" required>
      <button type="button">save</button>
    `)
    .addTo(map)
}


map.addControl(Draw, 'top-right');

map.on('load', function() {
  let drawnData = {};
  map.on('draw.create', createArea);
  map.on('draw.delete', deleteArea);
  map.on('draw.update', updateArea);

  function createArea(polygon) {
    let area = polygon.features[0].geometry;
    drawnData = {
      ...drawnData,
      [polygon.features[0].id]: area
    };

    console.log("create", area);
    const popup = AddPopup(map)(area.coordinates);

  }

  function deleteArea(polygon) {
    console.log('delete', polygon);
  }

  function updateArea(polygon) {
    console.log('update', polygon)
  }
});