script.js

class Workout{
  date = new Date();
  id = (Date.now() + '').slice(-10);
  clicks = 0;

  constructor(coords, distance, duration){
    //this.date = ...
    //this.id = ...
    this.coords = coords;
    this.distance = distance; // in km
    this.duration = duration; // in min
  }
  _setDescription(){
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    this.description = `${this.type[0].toUpperCase()}${this.type.slice(1)} on ${months[this.date.getMonth()]} 
    ${this.date.getDate()}`
  }
  click(){
    this.clicks++;
  }
}

class Running extends Workout{
  type = 'running';
  constructor(coords, distance, duration, cadence){
    super(coords, distance, duration);
    this.cadence = cadence;
    this.calcPace();
    this._setDescription();
  }

  calcPace (){
    this.pace = this.duration/this.distance;
    return this.pace;
  }
}

class Cycling extends Workout{
  type = 'cycling';
  constructor(coords, distance, duration, elevationGain){
    super(coords, distance, duration);
    this.elevationGain = elevationGain;
    this.calcSpeed();
    this._setDescription();
  }
  calcSpeed(){
    this.speed = this.distance/ (this.duration/60);
    return this.speed;
  }
}


// const run1 = new Running([39, -12], 5.2, 24, 178);
// const cycling1 = new Cycling([39, -12], 27, 95, 523);
// console.log(run1, cycling1);

const form = document.querySelector('.form');
const containerWorkouts = document.querySelector('.workouts');
const inputType = document.querySelector('.form__input--type');
const inputDistance = document.querySelector('.form__input--distance');
const inputDuration = document.querySelector('.form__input--duration');
const inputCadence = document.querySelector('.form__input--cadence');
const inputElevation = document.querySelector('.form__input--elevation');


class App{
  #map;
  #mapZoomLevel = 13;
  #mapEvent;
  #workouts = [];

  constructor(){
    //Get User's Position
    this._getPosition();

    //get data from local storage
    this._getLocalStorage();

    //Attach event handler
    form.addEventListener('submit', this._newWorkout.bind(this));
    inputType.addEventListener('change', this._toggleElevationField);
    containerWorkouts.addEventListener('click', this._moveToPopup.bind(this));
}

  _getPosition(){
     if (navigator.geolocation)
      navigator.geolocation.getCurrentPosition(this._loadMap.bind(this), function () {
        alert('Could not get your position');
      });
  }
 

  _loadMap(position){
    const { latitude } = position.coords;
    const { longitude } = position.coords;
    console.log(`https://www.google.pt/maps/@${latitude},${longitude}`);
    this.#map = L.map('map').setView([51.505, -0.09], this.#mapZoomLevel);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.#map);
    
    this.#map.on('click', this._showForm.bind(this));

     this.#workouts.forEach(work => {
          this._renderWorkoutMarker(work);
          
        })
  }


  _showForm(mapE){
      this.#mapEvent = mapE;
      form.classList.remove('hidden');
      inputDistance.focus();
  }
  _hideForm(){
    //empty the input fields
     inputDistance.value = inputDuration.value = inputCadence.value = inputElevation.value ='';
     form.style.display = 'none';
     form.classList.add('hidden');
     setTimeout(() => (form.style.display = 'grid'), 1000);
  }


  _toggleElevationField(){
    inputElevation.closest('.form__row').classList.toggle('form__row--hidden');
    inputCadence.closest('.form__row').classList.toggle('form__row--hidden')
  }

  
  _newWorkout(e){
    const validInputs = (...inputs) =>
      inputs.every(inp => Number.isFinite(inp));
    const allPositive = (...inputs) =>
      inputs.every(inp => inp>0);  


    e.preventDefault();
    //get data from the form
    const type = inputType.value;
    const distance = +inputDistance.value;
    const duration = +inputDuration.value;
    const {lat, lng} = this.#mapEvent.latlng;
    let workout;
    

    //if workout is running - create running object
    if(type === 'running'){
      const cadence = +inputCadence.value;
        //check the data is valid
        if (
          !validInputs(distance, duration, cadence) || 
          !allPositive(distance, duration, cadence)
          // !Number.isFinite(distance) ||
          // !Number.isFinite(duration) ||
          // !Number.isFinite(cadence)
          )
        return alert('Inputs have to be positive number');
        workout = new Running([lat, lng], distance, duration, cadence);
        
    }

    // If workout cycling, create cycling object
    if(type === 'cycling'){
      const elevation = +inputElevation.value;
      if (!validInputs(distance, duration, elevation) ||
          !allPositive(distance, duration)
          )
        return alert('Inputs have to be positive number');
        workout = new Cycling([lat, lng], distance, duration, elevation);
    }

    // add the new object to workout array
    this.#workouts.push(workout);

    //Render workout on map as maker
    this._renderWorkoutMarker(workout);
    
    //Render the workout on list 
    this._renderWorkout(workout);

    //Hide the form - clear the input field
    //clearing all the input fields
    this._hideForm();

    //Set the local storage to all workouts
    this._setLocalStorage();
  }


    _renderWorkoutMarker(workout){
      L.marker(workout.coords)
      .addTo(this.#map)
      .bindPopup(
        L.popup({
          maxWidth: 250,
          minWidth: 100,
          autoClose: false,
          closeOnClick: false,
          className: `${workout.type}-popup`, 
      })
      )
      .setPopupContent(`
      ${workout.type === 'running' ?'🏃‍♂️' : '🚴‍♀️' } ${workout.description}
      `)
      .openPopup();
  }
  _renderWorkout(workout){
    let html =`
    <li class="workout workout--${workout.type}" data-id="${workout.id}">
      <h2 class="workout__title">${workout.description}</h2>
      <div class="workout__details">
        <span class="workout__icon">${
          workout.type === 'running' ?'🏃‍♂️' : '🚴‍♀️' 
        } </span>
        <span class="workout__value">${workout.distance}</span>
        <span class="workout__unit">km</span>
      </div>
      <div class="workout__details">
        <span class="workout__icon">⏱</span>
        <span class="workout__value">${workout.duration}</span>
        <span class="workout__unit">min</span>
      </div>
      `; 
      
      if (workout.type === 'running')
      html += `
        <div class="workout__details">
          <span class="workout__icon">⚡️</span>
          <span class="workout__value">${workout.pace.toFixed(1)}</span>
          <span class="workout__unit">min/km</span>
         </div>
      <div class="workout__details">
        <span class="workout__icon">🦶🏼</span>
        <span class="workout__value">${workout.cadence}</span>
        <span class="workout__unit">spm</span>
      </div>
      </li>
      `;


       if (workout.type === 'cycling')
      html += `
        <div class="workout__details">
            <span class="workout__icon">⚡️</span>
            <span class="workout__value">${workout.speed.toFixed(1)}</span>
            <span class="workout__unit">km/h</span>
          </div>
          <div class="workout__details">
            <span class="workout__icon">⛰</span>
            <span class="workout__value">${workout.elevationGain}</span>
            <span class="workout__unit">m</span>
          </div>
        </li>
      `;

      form.insertAdjacentHTML('afterend', html);
      }
      _moveToPopup(e){
        const workoutEl = e.target.closest('.workout');
        //console.log(workoutEl);

        if (!workoutEl) return;

        const workout = this.#workouts.find(work => work.id === workoutEl.dataset.id);
        //console.log(workout);

        this.#map.setView(workout.coords, this.#mapZoomLevel, {
          animate: true,
          pan: {
            duration: 1,
          },
        } )

        //workout.click();
      }
      _setLocalStorage(){
        localStorage.setItem('workouts', JSON.stringify(this.#workouts));
      }

      _getLocalStorage(){
        const data = JSON.parse(localStorage.getItem('workouts'));
       // console.log(data);

        if (!data) return;
        this.#workouts = data;
        this.#workouts.forEach(work => {
          this._renderWorkout(work);

        })
      }
      reset(){
        //localstorage has the method to remove the  items by using id
        localStorage.removeItem('workouts');
        //one of the big objects that has one of the ability to reload the page
        location.reload();
      }
  }

const app = new App();