script.js

'use strict';




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 Workout{
	date = new Date();
	id = (Date.now()+ '').slice(-10);

	constructor(coords, distance, duration){
		//this.date = ...
		//this.id = ...
		this.coords = coords; //{lat, lng}
		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()	}`
	}
}

class Running extends Workout {
	type = 'running';
	constructor(coords, distance, duration,  cadence){
		super(coords, distance, duration);
		this.cadence = cadence;
		this.calPace();
		this._setDescription();
	}
	calPace(){
		//min/km
		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.calSpeed();
		this._setDescription();
	}
	calSpeed(){
		//min/km
		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);

class App {
	#map;
	#mapEvent;
	#workouts = [];
	constructor(){
		//get user's position
		this._getPosition();

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

		//attach event handlers
		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;
			const coords = [latitude, longitude];
			console.log(`https://www.google.co.in/maps/@${latitude}.${longitude}`);
			this.#map = L.map('map').setView(coords, 14);
			
			L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(this.#map);

			//handling clicks on map
			this.#map.on('click',this._showForm.bind(this));

			//render markup from local storage
			this.#workouts.forEach(work => {
			this._renderWorkoutMarker(work);
		}); 
	}

	_showForm(mapE) {
		this.#mapEvent = mapE;
				form.classList.remove('hidden');
				inputDistance.focus();
	}

	_hideForm(){
		//empty inputs
		inputDistance.value = inputDuration.value = inputElevation.value = inputCadence.value = '';
		form.classList.add('hidden');
	}

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

	_newWorkout(e) {
	const validInputs = (...inputs) => ///... means random input, it return array
		inputs.every(inp => Number.isFinite(inp)); //if every element satifies , return true else false
	
	 const allPositive = (...inputs) => inputs.every(inp =>inp>0);

	 e.preventDefault();
	
	//get data from form
	const type = inputType.value;
	const distance = +inputDistance.value; //+ is used to convert into number
	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 if data is valid
		if(
			// !Number.isFinite(distance) ||
			// !Number.isFinite(duration) ||
			// !Number.isFinite(cadence) ||
			!validInputs(distance, duration, cadence)|| !allPositive(distance, duration, cadence)
			)
			return alert('Inputs have to be positive numbers!');
		workout = new Running([lat,lng],distance,duration, cadence);
	}
	 
	
	//if workout is cycling, create cycling object
	if(type === 'cycling'){
		const elevation = +inputElevation.value;
		//check if data is valid
		if(
			!validInputs(distance, duration, elevation)|| !allPositive(distance, duration)
			)
			return alert('Inputs have to be positive numbers!');
		 workout = new Cycling([lat,lng],distance,duration, elevation);
	
	}
	//add new object to workout array
	this.#workouts.push(workout);
	//console.log(workout);
	//render workout on map as marker
	this._renderWorkoutMarker(workout);

	//render workout on list
	this._renderWorkoutList(workout);

	//hide form + clear input fields
	this._hideForm();

	//set 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();
	
	}
	_renderWorkoutList(workout){
		var 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
		);
		this.#map.setView(workout.coords, 14, {
			animate: true,
			pan: {
				duration: 1
			}
		});
	}
	_setLocalStorage(){
		localStorage.setItem('workouts',JSON.stringify(this.#workouts));
	}

	_getLocalStorage(){
		const data = JSON.parse(localStorage.getItem('workouts'));
		if(!data)
			return;
		this.#workouts = data;
		this.#workouts.forEach(work => {
			this._renderWorkoutList(work);
		});
	}

	reset(){
		localStorage.removeItem('workouts');
		location.reload();
	}
}



const app = new App();
//app._getPosition();