{"mappings":"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","sources":["script.js"],"sourcesContent":["'use strict';\n\n// prettier-ignore\nconst months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\nclass Workout {\n  date = new Date();\n  id = (Date.now() + '').slice(-10);\n  clicks = 0;\n\n  constructor(coords, distance, duration) {\n    this.coords = coords; // [lat, lng]\n    this.distance = distance; // km\n    this.duration = duration; // min\n  }\n\n  _setDescription() {\n    // prettier-ignore\n    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\n    this.description = `${this.type[0].toUpperCase()}${this.type.slice(1)} on ${\n      months[this.date.getMonth()]\n    } ${this.date.getDate()}`;\n  }\n\n  click() {\n    this.clicks++;\n  }\n}\n\nclass Running extends Workout {\n  type = 'running';\n  constructor(coords, distance, duration, cadence) {\n    super(coords, distance, duration);\n    this.cadence = cadence;\n    this.caclPace();\n    this._setDescription();\n  }\n\n  caclPace() {\n    // min/km\n    this.pace = this.duration / this.distance;\n    return this.pace;\n  }\n}\n\nclass Cycling extends Workout {\n  type = 'cycling';\n  constructor(coords, distance, duration, elevationGain) {\n    super(coords, distance, duration);\n    this.elevationGain = elevationGain;\n    this.calcSpeed();\n    this._setDescription();\n  }\n\n  calcSpeed() {\n    // km/h\n    this.speed = this.distance / (this.duration / 60);\n    return this.speed;\n  }\n}\n\n// const run1 = new Running([39, -12], 5.2, 24, 178);\n// const cycling1 = new Cycling([39, -12], 27, 95, 523);\n// console.log(run1, cycling1);\n\n//////////////////////////////////////////////////////////\n// Application Architecture\n\nconst form = document.querySelector('.form');\nconst containerWorkouts = document.querySelector('.workouts');\nconst inputType = document.querySelector('.form__input--type');\nconst inputDistance = document.querySelector('.form__input--distance');\nconst inputDuration = document.querySelector('.form__input--duration');\nconst inputCadence = document.querySelector('.form__input--cadence');\nconst inputElevation = document.querySelector('.form__input--elevation');\n\nclass App {\n  #map;\n  #mapZoomLevel = 13;\n  #mapEvent;\n  #workouts = [];\n  constructor() {\n    // Get User's Position\n    this._getPosition();\n\n    // Get Data from Local Storage\n    this._getLocalStorage();\n\n    // Attach Event Handlers\n    form.addEventListener('submit', this._newWorkout.bind(this));\n    inputType.addEventListener('change', this._toggleEleveationField);\n    containerWorkouts.addEventListener('click', this._moveToPopup.bind(this));\n  }\n  _getPosition() {\n    if (navigator.geolocation)\n      navigator.geolocation.getCurrentPosition(\n        this._loadMap.bind(this),\n        function () {\n          alert('Could not get your position.');\n        }\n      );\n  }\n  _loadMap(position) {\n    const { latitude } = position.coords;\n    const { longitude } = position.coords;\n    console.log(`https://www.google.com/maps/@${latitude},${longitude}`);\n\n    const coords = [latitude, longitude];\n\n    this.#map = L.map('map').setView(coords, this.#mapZoomLevel);\n\n    L.tileLayer('https://{s}.tile.openstreetmap.fr/hot//{z}/{x}/{y}.png', {\n      attribution:\n        '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors',\n    }).addTo(this.#map);\n\n    // Handling Clicks on Map\n    this.#map.on('click', this._showForm.bind(this));\n\n    this.#workouts.forEach(work => {\n      this._renderWorkoutMarker(work);\n    });\n  }\n  _showForm(mapE) {\n    this.#mapEvent = mapE;\n    form.classList.remove('hidden');\n    inputDistance.focus();\n  }\n\n  _hideForm() {\n    // Empty inputs\n    inputDistance.value =\n      inputDuration.value =\n      inputElevation.value =\n      inputCadence.value =\n        '';\n    form.style.display = 'none';\n    form.classList.add('hidden');\n    setTimeout(() => (form.style.display = 'grid'), 1000);\n  }\n\n  _toggleEleveationField() {\n    inputElevation.closest('.form__row').classList.toggle('form__row--hidden');\n    inputCadence.closest('.form__row').classList.toggle('form__row--hidden');\n  }\n  _newWorkout(e) {\n    const validInputs = (...inputs) =>\n      inputs.every(inp => Number.isFinite(inp));\n    const allPositive = (...inputs) => inputs.every(inp => inp > 0);\n    e.preventDefault();\n\n    // Get Data from Form\n    const type = inputType.value;\n    const distance = +inputDistance.value;\n    const duration = +inputDuration.value;\n    const { lat, lng } = this.#mapEvent.latlng;\n    let workout;\n    // Check if Data is Valid\n\n    // If workout is running, create running object\n    if (type === 'running') {\n      const cadence = +inputCadence.value;\n      // Check if data is valid\n      if (\n        // !Number.isFinite(distance) ||\n        // !Number.isFinite(duration) ||\n        // !Number.isFinite(cadence)\n        !validInputs(distance, duration, cadence) ||\n        !allPositive(distance, duration, cadence)\n      )\n        return alert('Inputs have to be positive numbers!');\n\n      workout = new Running([lat, lng], distance, duration, cadence);\n    }\n    // If workout is cycling, create cycling object\n    if (type === 'cycling') {\n      const elevation = +inputElevation.value;\n      // Check if data is valid\n      if (\n        !validInputs(distance, duration, elevation) ||\n        !allPositive(distance, duration)\n      )\n        return alert('Inputs have to be positive numbers!');\n      workout = new Cycling([lat, lng], distance, duration, elevation);\n    }\n    // Add new object to workout array\n    this.#workouts.push(workout);\n\n    // Render workout on map as a marker\n    this._renderWorkoutMarker(workout);\n\n    // Render workout on list\n    this._renderWorkout(workout);\n\n    // Hide Form + Clear Input Fields\n    this._hideForm();\n\n    // Set Local Storage to All Workouts\n    this._setLocalStorage();\n  }\n  _renderWorkoutMarker(workout) {\n    L.marker(workout.coords)\n      .addTo(this.#map)\n      .bindPopup(\n        L.popup({\n          maxWidth: 250,\n          minWidth: 100,\n          autoClose: false,\n          closeOnClick: false,\n          className: `${workout.type}-popup`,\n        })\n      )\n      .setPopupContent(\n        `${workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'} ${workout.description}`\n      )\n      .openPopup();\n  }\n\n  _renderWorkout(workout) {\n    let html = `\n      <li class=\"workout workout--${workout.type}\" data-id=\"${workout.id}\">\n          <h2 class=\"workout__title\">${workout.description}</h2>\n          <div class=\"workout__details\">\n            <span class=\"workout__icon\">${\n              workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'\n            }</span>\n            <span class=\"workout__value\">${workout.distance}</span>\n            <span class=\"workout__unit\">km</span>\n          </div>\n          <div class=\"workout__details\">\n            <span class=\"workout__icon\">⏱</span>\n            <span class=\"workout__value\">${workout.duration}</span>\n            <span class=\"workout__unit\">min</span>\n          </div>\n          `;\n    if (workout.type === 'running')\n      html += `\n          <div class=\"workout__details\">\n            <span class=\"workout__icon\">⚡️</span>\n            <span class=\"workout__value\">${workout.pace.toFixed(1)}</span>\n            <span class=\"workout__unit\">min/km</span>\n          </div>\n          <div class=\"workout__details\">\n            <span class=\"workout__icon\">🦶🏼</span>\n            <span class=\"workout__value\">${workout.cadence}</span>\n            <span class=\"workout__unit\">spm</span>\n          </div>\n        </li>\n        `;\n\n    if (workout.type === 'cycling')\n      html += `\n        <div class=\"workout__details\">\n            <span class=\"workout__icon\">⚡️</span>\n            <span class=\"workout__value\">${workout.speed.toFixed(1)}</span>\n            <span class=\"workout__unit\">km/h</span>\n          </div>\n          <div class=\"workout__details\">\n            <span class=\"workout__icon\">⛰</span>\n            <span class=\"workout__value\">${workout.elevationGain}</span>\n            <span class=\"workout__unit\">m</span>\n          </div>\n        </li>\n        `;\n\n    form.insertAdjacentHTML('afterend', html);\n  }\n  _moveToPopup(e) {\n    const workoutEl = e.target.closest('.workout');\n    console.log(workoutEl);\n\n    if (!workoutEl) return;\n\n    const workout = this.#workouts.find(\n      work => work.id === workoutEl.dataset.id\n    );\n\n    this.#map.setView(workout.coords, this.#mapZoomLevel, {\n      animate: true,\n      pan: {\n        duration: 1,\n      },\n    });\n\n    // Using the public interface\n    // workout.click();\n  }\n\n  _setLocalStorage() {\n    localStorage.setItem('workouts', JSON.stringify(this.#workouts));\n  }\n\n  _getLocalStorage() {\n    const data = JSON.parse(localStorage.getItem('workouts'));\n\n    if (!data) return;\n\n    this.#workouts = data;\n\n    this.#workouts.forEach(work => {\n      this._renderWorkout(work);\n    });\n  }\n\n  reset() {\n    localStorage.removeItem('workouts');\n    location.reload();\n  }\n}\n\nconst app = new App();\n"],"names":["months","Workout","date","Date","id","now","slice","clicks","constructor","coords","distance","duration","this","_setDescription","description","type","toUpperCase","getMonth","getDate","click","Running","cadence","super","caclPace","pace","Cycling","elevationGain","calcSpeed","speed","form","document","querySelector","containerWorkouts","inputType","inputDistance","inputDuration","inputCadence","inputElevation","App","map","mapZoomLevel","mapEvent","workouts","_getPosition","_getLocalStorage","addEventListener","_newWorkout","bind","_toggleEleveationField","_moveToPopup","navigator","geolocation","getCurrentPosition","_loadMap","alert","position","latitude","longitude","console","log","L","setView","tileLayer","attribution","addTo","on","_showForm","forEach","work","_renderWorkoutMarker","mapE","classList","remove","focus","_hideForm","value","style","display","add","setTimeout","closest","toggle","e","validInputs","inputs","every","inp","Number","isFinite","allPositive","preventDefault","lat","lng","latlng","workout","elevation","push","_renderWorkout","_setLocalStorage","marker","bindPopup","popup","maxWidth","minWidth","autoClose","closeOnClick","className","setPopupContent","openPopup","html","toFixed","insertAdjacentHTML","workoutEl","target","find","dataset","animate","pan","localStorage","setItem","JSON","stringify","data","parse","getItem","reset","removeItem","location","reload","app"],"version":3,"file":"index.03ca2d12.js.map"}