\n Status:{' '}\n {state === 'error'\n ? `${state} - will try sync again at a later point.`\n : state}\n
\n \n )}\n\n\n \n \n \n {segments.map((segment, i) => (\n \n ))}\n \n {!loaded && (\n
\n \n
\n )}\n \n \n
\n\n {state === 'completed' ? (\n <>\n \n
\n \n {/* Create a segment */}\n \n ) : null}\n\n {state === 'processing' || (state === 'error' && Blue dots: Activity coordinates
\n\n Green dots: Calculated coordinates (added to the activity when\n analyzed if device was using \"Smart\" recording)\n
\nRed dots: Segment coordinates
\n\n\n To measure between points: Click the ruler on the right to\n corner (in the map). You can then click where you want, and\n click another point to see the distance. Double 'escape' stops\n the measurement.\n
\n\n
\n } */}\n \n );\n }\n}\nexport default ActivityShow;\n","import React from 'react';\nimport apiFetch from '../../src/js/fetch';\nimport ContentContainer from '../ContentContainer';\nimport editIcon from '../../images/icons/ic-edit.svg';\nimport BarLoader from 'react-spinners/BarLoader';\n\nclass EditActivity extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // form\n name: props.name || '',\n defaultName: props.default_name || '',\n id: props.id,\n\n loading: false,\n };\n }\n\n componentDidMount() {}\n\n handleChange = (event) => {\n this.setState({\n [event.target.name]: event.target.value,\n error: null,\n });\n };\n\n handleSubmit = async (event) => {\n event.preventDefault();\n\n const { name, id } = this.state;\n if (!name) {\n console.log('Missing data:', { name });\n this.setState({\n loading: false,\n error: 'You need to fill in a name.',\n });\n return;\n }\n\n this.setState({ loading: true });\n\n console.log('Submit form');\n const data = {\n activity: {\n name: name,\n },\n };\n\n try {\n const updated = await apiFetch('/api/activities/' + id, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(data),\n });\n\n window.location.href = updated.url;\n } catch (e) {\n console.log({ e });\n const err = await e.json();\n console.log({ err });\n this.setState({\n loading: false,\n error:\n err.error_message || 'Something went wrong. Please try again later.',\n });\n }\n };\n\n render() {\n const { loading, name, defaultName, error } = this.state;\n\n return (\n Segment efforts
\n- \n {activity.segment_efforts.map(s => {\n return (\n
- {s.name}: {s.duration_in_seconds} seconds. View segment \n )\n })}\n
\n Status:{' '}\n {state === 'error'\n ? `${state} - will try sync again at a later point.`\n : state}\n
\n \n )}\n\n {state === 'completed' ? (\n <>\n \n {/* Create a segment */}\n \n ) : null}\n\n {state === 'processing' || (state === 'error' &&\n
\n } */}\n \n );\n }\n}\nexport default ActivityShow;\n","import React, { useState, useEffect } from 'react';\nimport apiFetch from '../../src/js/fetch';\nimport BarLoader from 'react-spinners/BarLoader';\n\nfunction BusinessForm() {\n const [formState, setFormState] = useState({\n email: '',\n company: '',\n phone: '',\n });\n const [show, setShow] = useState(false);\n const [error, setError] = useState(null);\n const [processing, setProcessing] = useState(false);\n const [feedback, setFeedback] = useState(null);\n useEffect(() => {\n setShow(true); // Wait for component to mount before showing form (mitigating spam bots).\n }, []);\n\n useEffect(() => {\n if (error) {\n setError(null);\n }\n }, [formState]);\n\n const handleChange = (e) => {\n const value = e.target.value;\n setFormState({\n ...formState,\n [e.target.name]: value,\n });\n };\n\n const onSubmit = async (e) => {\n e.preventDefault();\n\n if (!formState.email || !formState.phone || !formState.company) {\n setError('Please fill out all fields.');\n return;\n }\n\n setError(null);\n setFeedback(null);\n setProcessing(true);\n\n // send message to backend\n try {\n const sent = await apiFetch('/api/contact', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n contact: {\n email: formState.email,\n message:\n 'Company: ' + formState.company + ', phone: ' + formState.phone,\n },\n }),\n });\n\n console.log('sent', sent);\n setFeedback('Thanks, your message has been sent!');\n\n setFormState({\n email: '',\n company: '',\n phone: '',\n });\n } catch (error) {\n console.log('Error sending message:', error);\n const err = await error.json();\n\n setError(err.error_message);\n }\n\n setProcessing(false);\n };\n\n if (!show) return null;\n\n return (\n \n );\n}\n\nexport default BusinessForm;\n","import React, { useState, useEffect } from 'react';\nimport apiFetch from '../../src/js/fetch';\nimport BarLoader from 'react-spinners/BarLoader';\n\nconst brandsToChoose = [\n // 'Polar',\n // 'Suunto',\n 'Bryton',\n 'Fitbit',\n 'Coros',\n // 'Wahoo',\n // 'Apple',\n];\n\nfunction CompatibilityNotification({ style = 'green' }) {\n const [show, setShow] = useState(false);\n const [email, setEmail] = useState('');\n const [brands, setBrands] = useState(\n brandsToChoose.map((brand) => ({ name: brand, selected: false }))\n );\n const [error, setError] = useState(null);\n const [processing, setProcessing] = useState(false);\n const [feedback, setFeedback] = useState(null);\n useEffect(() => {\n setShow(true); // Wait for component to mount before showing form (mitigating spam bots).\n }, []);\n\n useEffect(() => {\n if (email) {\n // Don't reset if email is empty\n setError(null);\n setFeedback(null);\n }\n }, [email]);\n\n const onSubmit = async (e) => {\n e.preventDefault();\n\n if (!email || !brands.some((brand) => brand.selected)) {\n setError('Please fill in your email and select at least one brand.');\n return;\n }\n\n setError(null);\n setFeedback(null);\n setProcessing(true);\n\n // send message to backend\n try {\n const sent = await apiFetch('/api/compatibility-notification', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n compatibility_notification: {\n email: email,\n brands: brands\n .filter((brand) => brand.selected)\n .map((brand) => brand.name),\n },\n }),\n });\n\n console.log('sent', sent);\n\n await setEmail('');\n\n setFeedback(\"Thanks, we'll let you know when we're ready!\");\n } catch (error) {\n console.log('Error sending message:', error);\n const err = await error.json();\n\n setError(err.error_message);\n }\n\n setProcessing(false);\n };\n\n if (!show) return null;\n\n return (\n \n );\n}\n\nexport default CompatibilityNotification;\n","import React, { useState, useEffect } from 'react';\nimport apiFetch from '../../src/js/fetch';\nimport BarLoader from 'react-spinners/BarLoader';\n\nfunction ContactForm() {\n const [show, setShow] = useState(false);\n const [formState, setFormState] = useState({\n email: '',\n message: '',\n });\n const [error, setError] = useState(null);\n const [processing, setProcessing] = useState(false);\n const [feedback, setFeedback] = useState(null);\n useEffect(() => {\n setShow(true); // Wait for component to mount before showing form (mitigating spam bots).\n }, []);\n\n useEffect(() => {\n if (error) {\n setError(null);\n }\n }, [formState]);\n\n const handleChange = (e) => {\n const value = e.target.value;\n setFormState({\n ...formState,\n [e.target.name]: value,\n });\n };\n\n const onSubmit = async (e) => {\n e.preventDefault();\n\n if (!formState.email || !formState.message) {\n setError('Please fill out all fields.');\n return;\n }\n\n setError(null);\n setFeedback(null);\n setProcessing(true);\n\n // send message to backend\n try {\n const sent = await apiFetch('/api/contact', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n contact: {\n email: formState.email,\n message: formState.message,\n },\n }),\n });\n\n console.log('sent', sent);\n setFeedback('Thanks, your message has been sent!');\n\n setFormState({\n email: '',\n message: '',\n });\n } catch (error) {\n console.log('Error sending message:', error);\n const err = await error.json();\n\n setError(err.error_message);\n }\n\n setProcessing(false);\n };\n\n if (!show) return null;\n\n return (\n \n );\n}\n\nexport default ContactForm;\n","import React, { useState } from 'react';\nimport SuperPopup from '../SuperPopup';\n\nconst Install = () => {\n const [open, setOpen] = useState(false);\n const [tab, setTab] = useState('iOS');\n\n const onClose = () => {\n setOpen(false);\n };\n const onClick = () => {\n setOpen(true);\n };\n const setIos = () => {\n setTab('iOS');\n };\n const setAndroid = () => {\n setTab('android');\n };\n\n return (\n <>\n \n Segment efforts
\n- \n {activity.segment_efforts.map(s => {\n return (\n
- {s.name}: {s.duration_in_seconds} seconds. View segment \n )\n })}\n
\n \n iOS\n \n \n Android\n \n
\n {tab === 'iOS' ? (\n <>\n \n 1. Tap the \"Share\" icon (the square with an upward arrow): This is\n located at the bottom center of the screen.\n
\n
\n 2. Select \"Add to Home Screen\" from the options: Scroll down until\n you see the \"Add to Home Screen\" option and tap it.\n
\n
\n 3. Name the app: You can rename the App if you prefer a different\n title. By default, it will use HurryUp.\n
\n
\n 4. Tap \"Add\": The App icon will now appear on your home screen.\n
\n
\n 5. Open the App from your home screen: Just tap the icon to launch\n the PWA. It will run like a native app, without the Safari browser\n bar.\n
\n 1. Look for the installation prompt: In Chrome: When you load the\n HurryUp, you may see a banner at the bottom of the screen saying,\n \"Add to Home Screen.\" Tap this. If no banner appears, use the\n browser menu: Click the three vertical dots (menu) in the\n upper-right corner, then select \"Add to Home screen.\"\n
\n
\n 2. Confirm installation: You'll be asked to confirm. Tap \"Add\" to\n place the App icon on your home screen.\n
\n
\n 3. Open the App from your home screen: The App will now appear on\n your home screen like any other app. You can open it by tapping\n the icon, and it will launch in its own window without the browser\n interface.\n
\n Having trouble? Read more in our{' '}\n \n FAQ section\n \n .\n
\n \n \n );\n};\n\nexport default Install;\n","import React from 'react';\n\nfunction AccessItem({ access, text }) {\n return (\n\n
\n );\n}\n\nexport default Pricing;\n","import React from 'react';\nimport SuperPopup from '../../SuperPopup';\nimport icWarning from '../../../images/icons/ic-warning.svg';\nimport apiFetch from '../../../src/js/fetch';\n\nclass CancelSubscription extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n processing: false,\n error: null,\n };\n }\n\n componentDidMount() {\n const cancelSubscriptionTrigger = document.querySelector(\n '#cancel-subscription'\n );\n this.openTriggerClickListener = cancelSubscriptionTrigger.addEventListener(\n 'click',\n this.openModal\n );\n }\n\n componentWillUnmount() {\n if (this.openTriggerClickListener) {\n this.openTriggerClickListener.removeEventListener(\n 'click',\n this.openModal\n );\n }\n }\n\n openModal = (e) => {\n this.setState({\n open: true,\n });\n };\n\n closeModal = () => {\n if (this.state.processing) return;\n this.setState({ open: false });\n };\n\n cancelSubscription = async () => {\n this.setState({ processing: true });\n\n try {\n const deleted = await apiFetch('/api/paddle/cancel-subscription', {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n\n window.location.href = '/profile/settings';\n } catch (error) {\n console.log('Error canceling subscription:', error);\n this.setState({ error: 'Something went wrong. Please try again later.' });\n }\n this.setState({ processing: false });\n };\n\n render() {\n const { open, processing, error } = this.state;\n return (\n \n
\n \n
\n Free
\nFree
\nYou get access to
\n\n- \n
\n
\n \n 30 days free trial. No credit card required for sign up.\n
\n \n Get started\n \n\n
\n \n
\n Full access
\n\n \n {recurrence == 'monthly' ? monthlyPrice : yearlyPrice}\n {' '}\n / {recurrence == 'monthly' ? 'month' : 'year'}\n {/* {recurrence == 'yearly' && ` (${yearlySaveText})`} */}\n
\n\n \n Monthly\n \n \n \n Yearly{' '}\n \n ({yearlySaveText})\n \n \n
\n You get access to
\n- \n
\n
\n \n 30 days free trial. No credit card required for sign up.\n
\n \n Get started\n \n\n frameInitialHeight: 450, // `450` or above\n frameStyle:\n 'width:100%; min-width:312px; background-color: transparent; border: none;', // `min-width` must be set to `286px` or above with checkout padding off; `312px` with checkout padding on.\n },\n items: [\n {\n priceId: this.prices[recurrence],\n quantity: 1,\n },\n ],\n discountId: result.promo_code\n ? recurrence === 'month'\n ? result.promo_code.paddle_discount_monthly_id\n : result.promo_code.paddle_discount_yearly_id\n : null,\n customer: {\n id: result.customer_id,\n address: {\n countryCode: result.customer_country_code,\n },\n },\n });\n } catch (error) {\n console.log('Error opening the checkout:', error);\n this.setState({\n error: `Something went wrong opening the checkout. ${error.message}`,\n });\n }\n }\n };\n\n onChange = (e) => {\n const target = e.target;\n const value = target.type === 'checkbox' ? target.checked : target.value;\n const name = target.name;\n\n window.Paddle.Checkout.close();\n\n this.setState(\n {\n [name]: value,\n showPaymentForm: false,\n },\n () => {\n this.openCheckout();\n }\n );\n };\n\n render() {\n const {\n recurrence,\n discount,\n error,\n polling,\n paddleMonthlyDiscount,\n paddleYearlyDiscount,\n promoCode,\n paddleMonthlyPrice,\n paddleYearlyPrice,\n paddleYearlySavedText,\n } = this.state;\n return (\n \n {avatar ? (\n 
\n ) : (\n \n {avatar_text}\n \n )}\n
\n );\n}\n\nexport default ProfilePicture;\n","import React from 'react';\nimport SuperPopup from '../SuperPopup';\nimport icWarning from '../../images/icons/ic-warning.svg';\nimport apiFetch from '../../src/js/fetch';\n\nclass SuuntoDeauthorize extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n processing: false,\n error: null,\n };\n }\n\n openModal = (e) => {\n this.setState({\n open: true,\n });\n };\n\n closeModal = () => {\n if (this.state.processing) return;\n this.setState({ open: false });\n };\n\n deauthorize = async () => {\n this.setState({ processing: true });\n\n try {\n const deleted = await apiFetch('/api/services/suunto-deauthorize', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n\n location.reload();\n } catch (error) {\n console.log('Error deauthorize:', error);\n this.setState({ error: 'Something went wrong. Please try again later.' });\n }\n this.setState({ processing: false });\n };\n\n render() {\n const { open, processing, error } = this.state;\n return (\n <>\n \n\n \n {discount ? (\n
\n );\n }\n}\n\nexport default Subscribe;\n","import React from 'react';\nimport SuperPopup from '../SuperPopup';\nimport icWarning from '../../images/icons/ic-warning.svg';\nimport apiFetch from '../../src/js/fetch';\n\nclass DeleteAccount extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n processing: false,\n error: null,\n title: 'Are you sure you want to delete your account?',\n text: 'Deleting your HurryUp account will also delete all your data and unsign you from all challenges (you’ll also be removed from all leaderboards). This action can’t be reverted.',\n success: false,\n };\n }\n\n componentDidMount() {\n const deleteAccountTrigger = document.querySelector('#delete-account');\n this.openTriggerClickListener = deleteAccountTrigger.addEventListener(\n 'click',\n this.openModal\n );\n }\n\n componentWillUnmount() {\n if (this.openTriggerClickListener) {\n this.openTriggerClickListener.removeEventListener(\n 'click',\n this.openModal\n );\n }\n }\n\n openModal = (e) => {\n this.setState({\n open: true,\n });\n };\n\n closeModal = () => {\n if (this.state.processing) return;\n this.setState({ open: false });\n };\n\n deleteAccount = async () => {\n this.setState({ processing: true });\n\n try {\n const deleted = await apiFetch('/api/delete-user', {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n\n // window.location.href = deleted.redirect_url;\n this.setState({\n success: true,\n title: \"We're sad to see you go..\",\n text: \"Your account deletion has been scheduled, and we will notify you once it has been completed. You will be logged out when the account and it's data is deleted.\",\n });\n } catch (error) {\n console.log('Error deleting user:', error);\n const err = await error.json();\n this.setState({\n error:\n err.error_message || 'Something went wrong. Please try again later.',\n });\n }\n this.setState({ processing: false });\n };\n\n render() {\n const { open, processing, error, title, text, success } = this.state;\n return (\n \n Promo code: {promoCode.code}\n
\n ) : null}\n\n \n \n \n \n
\n\n {error ? (\n \n {error}\n
\n ) : null}\n {polling ? (\n\n
\n ) : (\n \n )}\n Almost there!
\n\n We have emailed you details of your order. You'll be redirected\n when we've completed the necessary steps. Thank you!\n
\n\n \n
\n {challenge.podium != null && (\n \n
\n \n {challenge.challenge_type === 'segment' ? (\n challenge.segments.map((s) => {\n if (segment_types.includes(s.segment_type_id)) return null;\n segment_types.push(s.segment_type_id);\n return (\n
\n \n {challenge.display_admin_label ||\n challenge.created_by_current_user ? (\n
\n \n {challenge.display_admin_label\n ? 'Created by Admin'\n : 'Created by you'}\n
\n ) : null}\n\n
\n \n {challenge.name}\n
\n\n
\n \n {challenge.to}\n
\n {challenge.challenge_type === 'segment' ? (\n <>\n {cities.size > 0 && (\n\n
\n Distance challenge\n
\n )}\n\n {challenge.podium.map((c) => (\n \n \n \n {c.position}.\n \n \n {c.athletename}\n \n \n \n {challenge.challenge_type === 'segment'\n ? `${c.points}pts`\n : `${formatNumber(c.total_distance_in_meters)} km`}\n \n
\n ))}\n {[...Array(3 - challenge.podium.length)].map((_, i) => (\n \n \n \n {challenge.joined_position\n ? `${challenge.joined_position}.`\n : '-'}\n \n \n {challenge.joined_athletename}\n \n \n \n {challenge.challenge_type === 'segment'\n ? challenge.joined_points\n ? `${challenge.joined_points}pts`\n : '/'\n : challenge.joined_total_distance\n ? `${formatNumber(challenge.joined_total_distance)} km`\n : '/'}\n \n
\n ) : null}\n \n )}\n\n \n Joined\n
\n ) : null}\n\n See more\n
\n \n \n \n
\n {loading ? (\n \n Sport:\n
\n\n \n \n All\n \n \n {s.name}\n \n
\n \n Country:\n
\n \n \n \n {countries.map((c) => (\n \n ))}\n \n
\n \n Order by:\n
\n \n \n {geoSupport && (\n \n )}\n \n \n \n
\n \n {error ? (\n \n \n )}\n
\n )}\n \n {challenges.map((challenge, i) => (\n
\n ) : (\n \n \n Create challenge\n \n
\n\n 
\n \n Cancel\n \n
\n \n \n {/* INPUT TITLE */}\n
\n \n {/* SELECT CHALLENGE TYPE END */}\n\n {/* PUBLIC OR PRIVATE */}\n Create Challenge
\n\n
\n {/* INPUT TITLE END */}\n\n {/* CHOOSE DATE */}\n \n Name of challenge\n
\n\n
\n {/* CHOOSE DATE END */}\n\n {/* SELECT CHALLENGE TYPE */}\n Challenge date
\n\n
\n \n \n From\n \n
\n \n \n To\n \n
\n \n If the start date has passed, your activities since then will\n be added to the leaderboards..\n
\n\n \n \n Distance challenge\n \n
\n Select type
\n\n {edit && (\n\n You can't change type in an existing challenge.\n
\n )}\n\n \n \n Segment challenge\n \n
\n \n
\n {/* PUBLIC OR PRIVATE END */}\n\n {challengeType == 'distance' && (\n Access
\n\n {challengeType == 'segment' && (\n
\n \n \n Public (Everyone can join)\n \n
\n )}\n \n \n Private (People with the link can join)\n \n
\n \n \n {distanceChallengeTypes.map((type) => (\n \n ))}\n \n
\n )}\n\n {/* CHOOSE SEGMENTS */}\n {challengeType == 'segment' && (\n Select sport
\n\n \n
\n ))}\n\n \n Select segments ({segments.length})\n
\n\n {segments.map((segment, i) => (\n\n
\n \n this.onAddSegment(segment)}\n />\n
\n \n
\n \n \n {segment.name}\n \n {segment.created_by_you && (\n \n (Created by you)\n \n )}\n
\n \">\n 
\n \n \n {(segment.distance_in_meters / 1000).toFixed(2)}\n \n km\n |\n \n 
\n \n \n {segment.elevation\n ? parseFloat(segment.elevation).toFixed(0)\n : '00'}\n \n m\n
\n \n
\n ) : null}\n {/* CHOOSE SEGMENTS END*/}\n\n {/* DESCRIPTION */}\n \n \n
\n {/* DESCRIPTION END */}\n\n {/* SUBMIT */}\n \n Challenge description\n
\n\n \n Cancel\n \n \n
\n {error && (\n {error}
\n )}\n {/* SUBMIT END */}\n \n\n {/* SEGMENT FINDER */}\n {showSegmentFinder && (\n\n \n Close\n 
\n \n
\n Browse segments
\nLeaderboard
\n\n \n \n
\n\n {this.state.loading ?
\n | # | \nContestant | \nTotal km | \n {contestMonths.map((month, i) => {\n const mnth = `${month[1]}-${('0' + month[0]).slice(-2)}-01`;\n return (\n\n {contestant.filtered\n ? contestant.period_total_distance_in_meters > 0 || // if filtered by period, we have the period_total_distance_in_meters field.\n contestant.new_total_distance_in_meters > 0 // if filtered not by period, we have the new_total_distance_in_meters field.\n ? `${i + 1}.`\n : '-'\n : contestant?.position && contestant.position > 0\n ? `${contestant.position}.`\n : '-'}\n | \n\n | \n \n {contestant.total_distance_in_meters\n ? formatNumber(\n (contestant.total_distance_in_meters / 1000).toFixed(\n 0\n )\n )\n : '0'}{' '}\n km\n | \n {contestMonths.map((month, i) => {\n const mnth = `${month[1]}-${('0' + month[0]).slice(-2)}-01`;\n const activityMonth = activitiesGroupedMonthly.find(\n (m) => m.month === mnth\n );\n const distance = activityMonth?.users?.find(\n (u) => u.id === contestant.user_id\n )?.total_distance_in_meters;\n\n return (\n
|---|
\n
\n \n );\n }\n}\nexport default ExpandedContest;\n","import React from 'react';\nimport ContestSegmentsMap from '../../src/js/contests/segments';\n\nclass FrontpageFeaturedMap extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n ...props,\n };\n }\n\n componentDidMount() {\n this.mapHandler = new ContestSegmentsMap({\n mapSelector: 'frontpage-featured-map-' + this.state.slug,\n });\n this.mapHandler.addSegmentsToMap(this.state.segments);\n }\n\n componentWillUnmount() {\n if (this.mapHandler) {\n this.mapHandler.unmount();\n }\n }\n\n render() {\n return (\n \n {segments.map((segment, index) => {\n return
\n\n \n {complete ? (\n
\n )}\n \n );\n }\n}\nexport default InviteFriends;\n","import React from 'react';\nimport { formatDuration } from '../../src/js/lib/duration';\nimport { formatNumber } from '../../src/js/lib/number';\nimport { addTippys } from '../../src/js/tooltips';\nimport BarLoader from 'react-spinners/BarLoader';\nimport Pagination from '../Pagination';\nimport apiFetch from '../../src/js/fetch';\nimport moment from 'moment/moment';\nimport ProfilePicture from '../Athletes/ProfilePicture';\n\nclass ContestShow extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n segments: props.segments,\n contestId: props.contest_id,\n userId: props.user_id,\n contestants: [],\n loading: true,\n\n numPages: 1,\n currentPage: 1,\n perPage: null,\n };\n\n this.currentPositionButton = document.querySelector(\n '[data-current_position]'\n );\n }\n\n componentDidMount() {\n addTippys(); // Initialize tooltips\n\n // Fetch the leaderboard\n this.fetchContestants(this.state.currentPage);\n\n // Add a global function to reload the leaderboard\n window.reloadLeaderboard = this.reloadLeaderboard;\n\n // Listen for clicks on the current position button that will take the user to the page where the user is\n this.currentPositionButton.addEventListener('click', this.goToPositionPage);\n }\n\n reloadLeaderboard = () => {\n this.setState({ currentPage: 1, contestants: [], loading: true }, () => {\n this.fetchContestants(this.state.currentPage);\n });\n };\n\n componentWillUnmount() {\n window.reloadLeaderboard = null;\n\n this.currentPositionButton.removeEventListener(\n 'click',\n this.goToPositionPage\n );\n }\n\n goToPositionPage = (e) => {\n const position = this.currentPositionButton.getAttribute(\n 'data-current_position'\n );\n\n window.scrollTo({\n top:\n document.querySelector('.leaderboard').getBoundingClientRect().top +\n window.scrollY -\n 100,\n behavior: 'smooth',\n });\n\n if (position && this.state.perPage) {\n // Calculate the page based on the position\n const page = Math.ceil(parseInt(position) / this.state.perPage);\n\n console.log({ page, perPage: this.state.perPage, position });\n this.onPaginate(page);\n }\n };\n\n onPaginate = (page) => {\n if (page !== this.state.currentPage) {\n this.setState({ currentPage: page }, () => {\n this.fetchContestants(page);\n });\n }\n };\n\n fetchContestants = async (page) => {\n this.setState({ loading: true });\n\n const { contestId } = this.state;\n try {\n const data = await apiFetch(`/api/challenges/leaderboard`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n contest_id: contestId,\n page: page,\n }),\n });\n\n // console.log({ data });\n\n this.setState(\n {\n contestants: data.contestants,\n numPages: data.total_pages,\n perPage: data.per_page,\n },\n () => {\n addTippys();\n }\n );\n } catch (e) {\n console.log({ e });\n const err = e.json ? await e.json() : null;\n console.log({ err });\n\n this.setState({\n loading: false,\n error:\n (err && err.error_message) ||\n 'Something went wrong. Please try again later.',\n });\n }\n this.setState({ loading: false });\n };\n\n render() {\n const { segments, contestants, numPages, currentPage, userId } = this.state;\n\n return (\n \n
\n ) : processing ? (\n \n 
\n
\n {modal ? null : (\n \n )}\n \n
\n ) : (\n \n \n \n Add to list\n \n \n
\n \n {emails.length > 0 ? (\n emails.map((email, index) => (\n \n
\n ))\n ) : (\n \n
\n \n {email}
\nNo email addresses added yet
\n )}\n {this.state.error && (\n \n {this.state.error}\n
\n )}\n \n \n 
\n {this.state.copied ? 'Copied' : 'Copy link'}\n \n
\n \n\t\t\t \n Skip for now\n \n \n\t\t
\n \n
\n );\n }\n}\nexport default ContestShow;\n","import React from 'react';\nimport Modal from '../../Modal';\nimport icInfo from '../../../images/icons/ic-info.svg';\n\nclass PointsScale extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n ...props,\n open: false,\n points: props.points_arr,\n defaultPoint: props.points_for_completing_segment_outside_points,\n };\n\n this.openModal = this.openModal.bind(this);\n this.closeModal = this.closeModal.bind(this);\n\n this.firstColLength = Math.round(props.points_arr.length / 2);\n this.firstCol = props.points_arr.slice(0, this.firstColLength);\n this.secondCol = props.points_arr.slice(\n this.firstColLength,\n props.points_arr.length\n );\n }\n\n openModal(e) {\n this.setState({\n open: true,\n });\n }\n\n closeModal() {\n this.setState({\n open: false,\n });\n }\n\n render() {\n const { open, points, defaultPoint } = this.state;\n\n return (\n <>\n Leaderboard
\n\n \n \n
\n\n {this.state.loading ?
\n | # | \nContestant | \n {segments.map((segment, i) => (\n\n \n S{i + 1}{' '}\n | \n ))}\n Points | \n\n {contestant?.position && contestant.position > 0\n ? `${contestant.position}.`\n : '-'}\n | \n\n | \n {segments.map((segment, j) => {\n const effort = contestant.contest_segment_efforts.find(\n (cse) => cse.segment_id === segment.id\n );\n const pos = effort?.position;\n // console.log({effort, contestant});\n let tippyContent = '';\n if (effort) {\n tippyContent = `\n | \n );\n })}\n {formatNumber(contestant.points)}pts | \n \n ))}\n
|---|
\n
\n \n \n );\n }\n}\nexport default PointsScale;\n\n/* \n How we calculate points\n
\n\n Points are awarded on each segment, and count towards the overall\n leaderboard. If users tie in points, the one with the fastest\n total time on all segments will rank first.\n
\n\n \n \n {this.secondCol.map((val, i) => (\n
\n
\n \n \n \n {this.firstCol.map((val, i) => (\n
\n
\n | #{i + 1} | \n\n \n {val}\n {val === 1 ? 'pt' : 'pts'}\n \n | \n
| \n #{i + this.secondCol.length + 1}\n | \n\n \n {val}\n {val === 1 ? 'pt' : 'pts'}\n \n | \n
| \n #{points.length + 1}+\n | \n\n \n {defaultPoint}\n {defaultPoint === 1 ? 'pt' : 'pts'}\n \n | \n
\n\t\t\t\t<% first_column_length = (points_arr.length / 2).round() %>\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t<% (points_arr.length - first_column_length).times do |i| %>\n\t\t\t\t\t\t\t<% adjusted_index = first_column_length + i %>\n\t\t\t\t\t\t\t
\n\t\t\t
*/\n","import React from 'react';\nimport ContestSegmentsMap from '../../src/js/contests/segments';\n\nclass ContestPopularMap extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n ...props,\n };\n }\n\n componentDidMount() {\n this.mapHandler = new ContestSegmentsMap({\n mapSelector: 'contest-popular-map',\n });\n this.mapHandler.addSegmentsToMap(this.state.segments);\n }\n\n componentWillUnmount() {\n if (this.mapHandler) {\n this.mapHandler.unmount();\n }\n }\n\n render() {\n return (\n \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t<% first_column_length.times do |i| %>\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t| #<%= i + 1 %> | \n\t\t\t\t\t\t\t\t\t<%= points_arr[i] %><%= points_arr[i] == 1 ? 'pt' : 'pts' %> | \n\t\t\t\t\t\t\t\t
| #<%= adjusted_index + 1 %> | \n\t\t\t\t\t\t\t\t<%= points_arr[adjusted_index] %><%= points_arr[adjusted_index] == 1 ? 'pt' : 'pts' %> | \n\t\t\t\t\t\t\t
| #<%= points_arr.length + 1 %>+ | \n\t\t\t\t\t\t\t\t<%= points_for_completing_segment_outside_points %><%= points_for_completing_segment_outside_points == 1 ? 'pt' : 'pts' %> | \n\t\t\t\t\t\t\t
\n Map\n
\n );\n }\n}\nexport default ContestPopularMap;\n","import React from 'react';\nimport location from '../../../images/icons/ic-location-dark.svg';\nimport coordinates from '../../../images/icons/ic-coordinates.svg';\nimport elevation from '../../../images/icons/ic-elevation.svg';\nimport SegmentType from '../../SegmentType';\nimport { formatDuration } from '../../../src/js/lib/duration';\nimport { formatPosition } from '../../../src/js/lib/position';\n\nconst Item = ({ segment, index }) => (\n \n
\n\n \n
\n \n \n S{index + 1}\n \n
\n \n {segment.name}\n
\n\n
\n \n
\n \n #{' '}\n \n {formatPosition(segment.current_user_segment_effort?.position)}\n \n
\n {segment.current_user_segment_effort?.duration ? (\n\n \n {formatDuration(segment.current_user_segment_effort.duration)}\n \n
\n ) : null}\n\n
\n \n);\n\nexport default Item;\n","export const formatPosition = (position) => {\n if (!position) return '-';\n\n let postFix = 'th';\n if (position === 1) postFix = 'st';\n if (position === 2) postFix = 'nd';\n if (position === 3) postFix = 'rd';\n\n return `${position}${postFix}`;\n};\n","import React from 'react';\nimport Table from 'rc-table';\nimport { formatDuration } from '../../../src/js/lib/duration';\nimport { formatNumber } from '../../../src/js/lib/number';\n// import { addTippys } from '../../src/js/tooltips';\nimport BarLoader from 'react-spinners/BarLoader';\nimport Pagination from '../../Pagination';\nimport apiFetch from '../../../src/js/fetch';\nimport icExpand from '../../../images/icons/ic-chevron-down.svg';\nimport ProfilePicture from '../../Athletes/ProfilePicture';\n\nclass SegmentLeaderboard extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n contestId: props.contest_id,\n segmentId: props.segment_id,\n userId: props.user_id,\n displayPace: false,\n contestSegmentEfforts: [], //props.contest_segment_efforts,\n loading: true,\n\n numPages: 1,\n currentPage: 1,\n perPage: null,\n data: [],\n };\n\n this.currentPositionButton = document.querySelector(\n '[data-current_position]'\n );\n }\n\n componentDidMount() {\n // console.log({state: this.state});\n this.fetchEfforts(this.state.currentPage);\n\n // Listen for clicks on the current position button that will take the user to the page where the user is\n this.currentPositionButton.addEventListener('click', this.goToPositionPage);\n }\n\n componentWillUnmount() {\n this.currentPositionButton.removeEventListener(\n 'click',\n this.goToPositionPage\n );\n }\n\n goToPositionPage = (e) => {\n const position = this.currentPositionButton.getAttribute(\n 'data-current_position'\n );\n\n window.scrollTo({\n top:\n document.querySelector('.leaderboard').getBoundingClientRect().top +\n window.scrollY -\n 100,\n behavior: 'smooth',\n });\n\n if (position && this.state.perPage) {\n // Calculate the page based on the position\n const page = Math.ceil(parseInt(position) / this.state.perPage);\n\n console.log({ page, perPage: this.state.perPage, position });\n this.onPaginate(page);\n }\n };\n\n onPaginate = (page) => {\n if (page !== this.state.currentPage) {\n this.setState({ currentPage: page }, () => {\n this.fetchEfforts(page);\n });\n }\n };\n\n fetchHistory = async (expanded, record) => {\n // console.log({ expanded, record });\n if (\n !record.children ||\n !expanded ||\n !(record.children.length == 1 && record.children[0].loading)\n ) {\n // We only want to fetch the history once, and only when the row is expanded\n return;\n }\n\n const { segmentId, contestId, data } = this.state;\n const { token } = this.props;\n const { contestantId } = record;\n\n try {\n const history = await apiFetch(\n `/api/challenges/segments/${segmentId}/leaderboard-history`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n contest_id: contestId,\n contestant_id: contestantId,\n token: token,\n }),\n }\n );\n\n // console.log({ history });\n\n const efforts = [...data]; // copy the data\n const index = efforts.findIndex(\n (effort) => effort.contestantId === contestantId\n );\n\n // console.log({ efforts, index, contestantId });\n\n if (index >= 0) {\n if (history.efforts.length > 0) {\n efforts[index].children = history.efforts.map((effort, i) => ({\n speed: (\n \n {effort.speed} km/h\n \n ),\n pace: (\n \n {formatDuration(effort.pace)} /km\n \n ),\n watt: (\n \n {effort.avg_power_watts\n ? effort.avg_power_watts.toFixed(0)\n : '-'}\n \n ),\n w_kg: (\n \n {effort.power_watt_per_kg && effort.power_watt_per_kg.toFixed\n ? effort.power_watt_per_kg.toFixed(1)\n : '-'}\n \n ),\n time: (\n \n {formatDuration(effort.duration)}\n \n ),\n className: 'bg-accent',\n history: (\n \n ({effort.date})\n \n ),\n }));\n } else {\n efforts[index].children = [\n {\n loading: false,\n history: (\n \n No history available\n \n ),\n },\n ];\n }\n }\n\n this.setState({\n data: efforts,\n });\n } catch (e) {\n console.log({ e });\n const err = e.json ? await e.json() : null;\n console.log({ err });\n\n this.setState({\n loading: false,\n error:\n (err && err.error_message) ||\n 'Something went wrong. Please try again later.',\n });\n }\n };\n\n fetchEfforts = async (page) => {\n this.setState({ loading: true });\n\n const { contestId, segmentId } = this.state;\n try {\n const data = await apiFetch(\n `/api/challenges/segments/${segmentId}/leaderboard`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n contest_id: contestId,\n page: page,\n }),\n }\n );\n\n // console.log({ data });\n let displayPace = false;\n const efforts = data.efforts.map((effort, i) => {\n if (effort.pace) displayPace = true;\n\n return {\n position: effort.position + '.',\n challenger: (\n \n 
\n {segment.city}\n
\n \n \n {(segment.distance_in_meters / 1000).toFixed(2)} km\n
\n \n \n \n {segment.elevation ? parseFloat(segment.elevation).toFixed(0) : '00'}m\n \n
\n \n
\n ),\n speed: `${effort.speed} km/h`,\n pace: effort.pace ? `${formatDuration(effort.pace)} /km` : '-',\n watt: effort.avg_power_watts\n ? effort.avg_power_watts.toFixed(0)\n : '-',\n w_kg:\n effort.power_watt_per_kg && effort.power_watt_per_kg.toFixed\n ? effort.power_watt_per_kg.toFixed(1)\n : '-',\n time: formatDuration(effort.duration),\n points: formatNumber(effort.points),\n className: 'bg-accent',\n userId: effort.user_id,\n contestantId: effort.contestant_id,\n history: (\n \n {effort.date}\n \n
\n );\n }\n}\nexport default SegmentLeaderboard;\n","import React from 'react';\nimport BarLoader from 'react-spinners/BarLoader';\nimport apiFetch from '../../../src/js/fetch';\nimport Segment from '../../../src/js/segments/show';\n\nclass SegmentMap extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n sample_file: props.sample_file,\n };\n }\n\n componentDidMount() {\n this.initMap();\n }\n\n async initMap() {\n const { sample_file } = this.state;\n\n let coords = null;\n if (sample_file) {\n // Fetch the coordinates.\n const d = await apiFetch(sample_file);\n if (d && d.coordinates) {\n coords = d.coordinates.map((c) => L.latLng(c.lat, c.lng, c.alt));\n }\n }\n\n if (coords) {\n // init map\n this.mapHandler = new Segment({\n coordinates: coords,\n mapSelector: 'contest-map',\n seeCurrentLocation: true,\n mapProvider: 'mapbox',\n });\n }\n }\n\n componentWillUnmount() {\n // stop polling\n console.log('unmounting');\n\n if (this.mapHandler) {\n this.mapHandler.unmount();\n }\n }\n\n render() {\n const { state, activity } = this.state;\n console.log(activity);\n return (\n Segment leaderboard
\n\n \n {loading ? (\n
\n\n \n
\n )}\n\n {expandMap && (\n \n
\n\n {segmentView === 'list' && (\n Segments
\n\n \n List View\n \n \n \n Map View\n \n
\n \n {segments.map((segment, index) => {\n return
\n )}\n\n {segmentView === 'map' && (\n \n
\n \n )}\n \n );\n }\n}\nexport default ContestShow;\n","import React from 'react';\nimport icShare from '../../images/icons/ic-share-challenge.svg';\nimport { event as plausibleEvent } from '../../src/js/lib/plausible';\n\nfunction ShareContest({ title, url, contestants, segments }) {\n const segmentPlural = segments > 1 ? 'segments' : 'segment';\n const contestantPlural =\n contestants > 1 ? 'other participants' : 'other participant';\n const shareData = {\n title: `Join '${title}'`,\n text: `Connect your device, complete the ${segments} ${segmentPlural} and collect points for the overall leaderboard! Join ${contestants} ${contestantPlural} here: `,\n url: `${url}`,\n };\n\n const handleClick = async (e) => {\n try {\n await navigator.share(shareData);\n plausibleEvent('Challenge - Share');\n } catch (err) {\n console.log('Canceled share');\n }\n };\n\n return (\n \n );\n}\n\nexport default ShareContest;\n","import React from 'react';\nimport SuperPopup from '../SuperPopup';\nimport icon from '../../images/icons/ic-sports.svg';\nimport apiFetch from '../../src/js/fetch';\nimport { event } from '../../src/js/lib/plausible';\n\nclass SignUp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n open: false,\n contestId: props.contest_id,\n };\n }\n\n componentDidMount() {\n const signUpTrigger = document.querySelector('#join');\n this.openTriggerClickListener = signUpTrigger.addEventListener(\n 'click',\n this.join\n );\n }\n\n join = async (e) => {\n const { contestId, processing } = this.state;\n\n if (processing) return;\n e.target.disabled = true;\n\n this.setState({ processing: true });\n\n try {\n await apiFetch('/api/join-contest', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ contestId: contestId }),\n });\n\n // Track plausible event.\n event('Challenge - joined', {\n challenge: this.props.challenge,\n });\n\n // Open the modal.\n this.openModal();\n } catch (error) {\n console.log('Error joining:', error);\n alert('Something went wrong. Please try again later.');\n }\n this.setState({ processing: false });\n\n e.target.disabled = false;\n };\n\n openModal = (e) => {\n this.setState({\n open: true,\n });\n };\n\n closeModal = () => {\n this.setState({ open: false });\n\n // Global function to reload the leaderboard.\n if (window.reloadLeaderboard) {\n window.reloadLeaderboard();\n }\n\n // Remove the join button and show the joined result element.\n this.joinTrigger = document.querySelector('#join');\n this.joinResultElement = document.querySelector('#joined-result');\n if (this.joinTrigger) {\n this.joinTrigger.remove();\n }\n if (this.joinResultElement) {\n this.joinResultElement.classList.remove('hidden');\n }\n };\n\n inviteFriends = () => {\n // Close the modal.\n this.closeModal();\n\n // Open the invite friends modal.\n this.openInviteTrigger = document.querySelector('#open-invite');\n if (this.openInviteTrigger) {\n this.setState({ open: false }, () => {\n // This page has a button that the user can click to open the invite modal. Trigger a click on it.\n\n this.openInviteTrigger.click();\n });\n }\n };\n\n render() {\n const { open } = this.state;\n return (\n \n \n
\n \n \n Close\n \n \n
\n Segments & Locations
\n\n
\n );\n }\n}\n\nexport default CookieBanner;\n","import React, { useEffect, useRef } from 'react';\nimport icClose from '../images/icons/ic-exit.svg';\nimport focusLock from 'dom-focus-lock';\nimport { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';\n\nfunction Modal({\n children,\n title,\n open,\n onClose,\n contentContainerClasses = 'w-full',\n modalWidth = 'max-w-md w-full',\n zIndex = 'z-50 md:z-[1000] xl:z-50',\n}) {\n const modalRef = useRef(null);\n useEffect(() => {\n if (open) {\n // Disabling and enabling scroll on body on modal open and close. Also, locking focus inside modal.\n disableBodyScroll(modalRef.current);\n focusLock.on(modalRef.current);\n }\n }, [open]);\n\n useEffect(() => {\n // Switch off scroll lock when component unmounts\n return () => {\n if (modalRef.current) {\n enableBodyScroll(modalRef.current);\n focusLock.off(modalRef.current);\n }\n };\n }, []);\n\n if (!open) return null;\n\n const onModalClick = (e) => {\n if (e.target.classList.contains('report-modal')) {\n handleClose();\n }\n };\n\n const handleClose = () => {\n enableBodyScroll(modalRef.current);\n focusLock.off(modalRef.current);\n\n onClose();\n };\n\n return (\n \n \n 
\n */}\n
\n \n We use cookies to improve your experience on our site, for ads and\n analytics. Read more in our{' '}\n
\n \n \n
\n \n \n Close\n \n \n
\n \n {title ? (\n
\n \n {title}\n
\n ) : null}\n{children}
\n \n \n );\n}\n\nexport default Modal;\n","import React from 'react';\nimport ReactPaginate from 'react-paginate';\n\nfunction Pagination({\n numPages,\n currentPage,\n onPaginate,\n loading = false,\n initialPage = 0,\n}) {\n if (numPages < 2) return null;\n\n const handlePageClick = (data) => {\n onPaginate(data.selected + 1);\n };\n const handleClick = () => {\n if (loading) return false; // Prevent click if loading\n };\n\n return (\n \n
\n ) : (\n Thank you! We will have a look.
\n{error}
: null}\n \n )}\n\n 
\n
\n );\n};\n\nexport default SegmentType;\n","const chunk = (arr, size) =>\n Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>\n arr.slice(i * size, i * size + size)\n );\n\nexport default chunk;\n","import L from 'leaflet';\nimport MapHandler from '../mapHandler';\nimport 'leaflet-routing-machine';\nimport 'leaflet-draw';\nimport 'leaflet-draw/dist/leaflet.draw.css';\nimport 'leaflet-routing-machine/dist/leaflet.routing.icons.png';\nimport 'leaflet-routing-machine/dist/leaflet-routing-machine.css';\nimport chunk from '../lib/chunk';\nimport lineChunk from '@turf/line-chunk';\n\nexport default class CreateSegments extends MapHandler {\n constructor(options = {}) {\n super(options);\n\n console.log('CreateSegments', options);\n\n this.customSegmentCallback = options.customSegmentCallback;\n\n this.setup = this.setup.bind(this);\n this.setupRouting = this.setupRouting.bind(this);\n\n this.createButton = this.createButton.bind(this);\n this.populateAltitude = this.populateAltitude.bind(this);\n this.getRoutingSelection = this.getRoutingSelection.bind(this);\n this.drawFinished = this.drawFinished.bind(this);\n }\n\n /*\n * =========================================================\n * Getters and setters\n */\n\n getRoutingSelection() {\n return this.routingSelection;\n }\n\n /*\n * =========================================================\n * Routing\n */\n setup() {\n // Adds tile to map\n L.tileLayer(\n 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}@2x?access_token={accessToken}',\n {\n maxZoom: 19,\n attribution:\n '© Mapbox © OpenStreetMap',\n id: 'hurryupchallenges/cm4hjoaia013o01r19dl40o43',\n tileSize: 512,\n zoomOffset: -1,\n accessToken:\n 'pk.eyJ1IjoiaHVycnl1cGNoYWxsZW5nZXMiLCJhIjoiY2xydjU3cG00MG5oejJqbXI1amx6bmMwMSJ9.93VmTVhQQsXXFq_7SN1aFw',\n }\n ).addTo(this.map);\n\n console.log('setup admin!', this.map);\n\n this.setupRouting();\n }\n\n setupRouting() {\n const self = this;\n\n console.log('drawType', this.drawType);\n if (this.drawType === 'direction-api') {\n this.routingControl = L.Routing.control({\n // waypoints: [L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949)],\n router: L.Routing.mapbox(\n 'pk.eyJ1IjoiaHVycnl1cGNoYWxsZW5nZXMiLCJhIjoiY2xydjU3cG00MG5oejJqbXI1amx6bmMwMSJ9.93VmTVhQQsXXFq_7SN1aFw'\n ),\n // your other options go here\n routeWhileDragging: false,\n show: false,\n })\n .on('routeselected', function (e) {\n var route = e.route;\n console.log({ e, route });\n\n let geoJson = {\n type: 'Feature',\n properties: {},\n geometry: {\n type: 'LineString',\n coordinates: route.coordinates.map((c) => [c.lng, c.lat]),\n },\n };\n\n // make sure a line is not more than 10 meters. Linechunk will chop it up if it is\n geoJson = lineChunk(geoJson, 0.01, {\n units: 'kilometers',\n }); // Chops each feature into points max 10 meters apart if originaly longer distance\n\n // Get all coordinates from the geoJson\n const coordinates = geoJson.features\n .map((obj) => L.GeoJSON.coordsToLatLngs(obj.geometry.coordinates))\n .flat(1);\n\n self.populateAltitude(coordinates);\n })\n .addTo(this.map);\n\n this.map.on('click', function (e) {\n self.container = L.DomUtil.create('div');\n self.startBtn = self.createButton(\n 'Start from this location',\n self.container\n );\n self.destBtn = self.createButton('Go to this location', self.container);\n\n L.popup()\n .setContent(self.container)\n .setLatLng(e.latlng)\n .openOn(self.map);\n\n L.DomEvent.on(self.startBtn, 'click', function () {\n self.routingControl.spliceWaypoints(0, 1, e.latlng);\n self.map.closePopup();\n });\n\n L.DomEvent.on(self.destBtn, 'click', function () {\n self.routingControl.spliceWaypoints(\n self.routingControl.getWaypoints().length - 1,\n 1,\n e.latlng\n );\n self.map.closePopup();\n });\n });\n } else {\n // Draw polyline manually\n this.editableLayers = new L.FeatureGroup();\n this.map.addLayer(this.editableLayers);\n\n L.drawLocal.draw.toolbar.buttons.polyline = 'Draw';\n var options = {\n position: 'topright',\n draw: {\n polyline: {\n shapeOptions: {\n color: '#f357a1',\n weight: 10,\n },\n },\n polygon: false,\n circle: false,\n rectangle: false,\n marker: false,\n circlemarker: false,\n },\n edit: {\n featureGroup: this.editableLayers, //REQUIRED!!\n remove: false,\n },\n };\n\n var drawControl = new L.Control.Draw(options);\n this.map.addControl(drawControl);\n\n this.map.on(L.Draw.Event.CREATED, this.drawFinished, this);\n this.map.on(L.Draw.Event.EDITED, this.drawFinished, this);\n }\n }\n\n drawFinished(e) {\n const self = this;\n\n console.log('draw event', e, this, this.editableLayers);\n\n const layer = e.type === 'draw:created' ? e.layer : e.layers.getLayers()[0];\n\n console.log('layer', layer);\n\n if (e.type === 'draw:created') {\n this.editableLayers.addLayer(layer);\n }\n\n console.log('getLatLngs');\n const coords = layer.getLatLngs();\n console.log({ coords });\n\n let geoJson = {\n type: 'Feature',\n properties: {},\n geometry: {\n type: 'LineString',\n coordinates: coords.map((c) => [c.lng, c.lat]),\n },\n };\n\n // make sure a line is not more than 10 meters. Linechunk will chop it up if it is\n geoJson = lineChunk(geoJson, 0.01, {\n units: 'kilometers',\n }); // Chops each feature into points max 10 meters apart if originaly longer distance\n\n // Get all coordinates from the geoJson\n const coordinates = geoJson.features\n .map((obj) => L.GeoJSON.coordsToLatLngs(obj.geometry.coordinates))\n .flat(1);\n\n self.populateAltitude(coordinates);\n }\n\n async populateAltitude(coordinates) {\n try {\n const chunks = chunk(coordinates, 300); // Google API limit is 512, but it failed a lot when using 512, so setting it to 300.\n const chunked = [];\n for (const ch of chunks) {\n chunked.push(\n encodeURIComponent(ch.map((c) => `${c.lat},${c.lng}`).join('|'))\n );\n }\n console.log({ chunked });\n\n const response = await fetch(`/api/segments/elevation`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n chunks: chunked,\n }),\n });\n const json = await response.json();\n console.log({ json });\n\n const coords = json.coordinates\n .flat(1)\n .map((c, i) => L.latLng(c.location.lat, c.location.lng, c.elevation));\n console.log({ coords });\n\n this.routingSelection = {\n startPoint: coords[0],\n stopPoint: coords[coords.length - 1],\n distance: parseInt(L.GeometryUtil.length(coords).toFixed(0)),\n coordinates: coords,\n };\n\n this.customSegmentCallback(this.routingSelection);\n } catch (error) {\n alert('Error fetching altitude data');\n }\n }\n\n /*\n * =========================================================\n * Map UI\n */\n createButton(label, container) {\n var btn = L.DomUtil.create('button', '', container);\n btn.setAttribute('type', 'button');\n btn.classList.add('block', 'w-full', 'border', 'p-2', 'm-2', 'rounded');\n btn.innerHTML = label;\n return btn;\n }\n}\n","import React from 'react';\nimport apiFetch from '../../src/js/fetch';\nimport AdminCreateSegmentHandler from '../../src/js/segments/new-admin';\nimport ContentContainer from '../ContentContainer';\nimport editIcon from '../../images/icons/ic-edit.svg';\nimport Chart from 'chart.js/auto';\n\nimport Slider from 'rc-slider';\nimport 'rc-slider/assets/index.css';\n\nimport BarLoader from 'react-spinners/BarLoader';\n\nclass AdminCreateSegment extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // form\n name: '',\n description: '',\n errors: {},\n segmentTypeId: '',\n\n loading: true,\n\n // selection\n selectionDistance: null,\n coordinates: [],\n\n // drawType\n drawType: 'direction-api',\n };\n\n this.mapHandler = null;\n\n this.handleSelection = this.handleSelection.bind(this);\n }\n\n componentDidMount() {\n this.mapHandler = new AdminCreateSegmentHandler({\n customSegmentCallback: this.handleSelection,\n drawType: this.state.drawType,\n });\n }\n\n componentWillUnmount() {\n // Remove the map\n console.log('unmounting');\n if (this.mapHandler) {\n this.mapHandler.unmount();\n }\n }\n\n handleSelection = (selection) => {\n console.log({ selection });\n\n // Update the selection data, and set new range of the slider\n this.setState({\n selectionDistance: selection?.distance,\n coordinates: selection?.coordinates,\n error: null,\n });\n\n if (selection?.coordinates) {\n const ctx = document.querySelector('.elevation-chart').getContext('2d');\n console.log({ ctx });\n\n if (this.chart) {\n this.chart.destroy();\n }\n const chartData = {\n labels: selection?.coordinates.map((c) => ''),\n datasets: [\n {\n label: 'Elevations',\n data: selection?.coordinates.map((c) => c.alt),\n },\n ],\n };\n console.log({ chartData });\n const config = {\n type: 'line',\n data: chartData,\n };\n console.log({ config });\n\n this.chart = new Chart(ctx, config);\n }\n };\n\n handleChange = (event) => {\n this.setState({\n [event.target.name]: event.target.value,\n error: null,\n });\n };\n\n handleSubmit = async (event) => {\n event.preventDefault();\n\n const { name, description, segmentTypeId } = this.state;\n const selection = this.mapHandler && this.mapHandler.getRoutingSelection();\n\n if (!selection || !selection.startPoint || !selection.stopPoint || !name) {\n console.log('Missing data:', { name, selection });\n this.setState({\n loading: false,\n error:\n 'You need to fill in all fields, and select a course by dragging the start and stop along your activity.',\n });\n return;\n }\n\n this.setState({ loading: true });\n\n console.log('Submit form');\n const data = {\n segment: {\n name: name,\n description: description,\n distance_in_meters: selection.distance,\n coordinates: selection.coordinates,\n start_lat: selection.startPoint.lat,\n start_lng: selection.startPoint.lng,\n stop_lat: selection.stopPoint.lat,\n stop_lng: selection.stopPoint.lng,\n segment_type_id: parseInt(segmentTypeId),\n },\n };\n console.log({ data });\n\n try {\n const created = await apiFetch('/api/segments/admin-create', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(data),\n });\n console.log({ created });\n\n window.location.href = created.url; // \"/segments/\" + created.id;\n } catch (e) {\n console.log({ e });\n const err = await e.json();\n console.log({ err });\n this.setState({\n loading: false,\n error:\n err.error_message || 'Something went wrong. Please try again later.',\n });\n }\n };\n\n handleChangeDrawType = (event) => {\n this.mapHandler.unmount();\n\n this.setState({\n drawType: event.target.value,\n });\n\n this.mapHandler = new AdminCreateSegmentHandler({\n customSegmentCallback: this.handleSelection,\n drawType: event.target.value,\n });\n };\n\n render() {\n const {\n name,\n description,\n selectionDistance,\n coordinates,\n error,\n segmentTypeId,\n } = this.state;\n\n return (\n \n
\n\n \n
\n \n\n {error && \n \n \n \n {this.props.segment_types.map((type) => (\n \n ))}\n \n\n
\n\n \n \n \n \n \n \n \n \n
\n Segment type
\n\n\n
How to draw segment?
\n\n
\n Adjust your segment
\n \n\n Additional information (optional)\n
\nElevation
\n \n{error}
}\n \n\n {svgWidth ? (\n \n {/* The background (fill). Add a point before and after the polylinePoints as the y-coordinate has to be lowest point in the curve at start and end of graph to fill everything below the polyline. */}\n \n \n \n \n \n \n\n {/* The background (fill). Add a point before and after the polylinePoints as the y-coordinate has to be lowest point in the curve at start and end of graph to fill everything below the polyline. */}\n
\n );\n};\n\nexport default Altitude;\n","import MapHandler from '../mapHandler';\nimport apiFetch from '../fetch';\nimport segmentStartIcon from '../../../images/icons/ic-segment-start.svg';\nimport segmentEndIcon from '../../../images/icons/ic-segment-end.svg';\nexport default class BrowseSegments extends MapHandler {\n constructor(options = {}) {\n super(options);\n\n this.segmentLayers = [];\n\n this.onBoundsChange = options.onBoundsChange;\n\n // Bindings\n this.setupBoundsListener = this.setupBoundsListener.bind(this);\n this.boundsListenerCallback = this.boundsListenerCallback.bind(this);\n this.highlightSegment = this.highlightSegment.bind(this);\n this.unHighlightSegment = this.unHighlightSegment.bind(this);\n\n this.setupBoundsListener();\n }\n\n /**\n * =========================================================\n * Bounds\n */\n setupBoundsListener() {\n this.boundsListenerCallback(); // Call once to set initial bounds\n\n // Then listen for changes\n this.map.on('moveend', this.boundsListenerCallback);\n }\n\n boundsListenerCallback(e) {\n const bounds = this.map.getBounds();\n const currentZoom = this.map.getZoom();\n\n this.onBoundsChange(bounds, currentZoom);\n }\n\n /**\n * =========================================================\n * Segments\n */\n addSegmentsToMap(segments) {\n // Remove previous segments\n // this.removeSegmentLayers();\n\n console.log('Adding segments to map', segments);\n\n const remove = [];\n const onlyShowDots = this.map.getZoom() < 12;\n this.segmentLayers.forEach((layer, index) => {\n // console.log(layer.segmentId);\n const exists = segments.find(\n (s) => s.id === layer.segmentId && layer.dotView == onlyShowDots\n );\n if (!exists) {\n // console.log('Removing layer', layer);\n if (layer.layer) this.map.removeLayer(layer.layer);\n this.map.removeLayer(layer.tooltip);\n this.map.removeLayer(layer.startIconLayer);\n if (layer.stopIconLayer) this.map.removeLayer(layer.stopIconLayer);\n remove.push(layer.segmentId);\n }\n });\n remove.forEach((sId) =>\n this.segmentLayers.splice(\n this.segmentLayers.findIndex((s) => s.segmentId == sId),\n 1\n )\n );\n\n // console.log({ segmentLayers: this.segmentLayers });\n\n // Add new segments\n segments.forEach(async (segment, index) => {\n const existingLayer = this.segmentLayers.findIndex(\n (layer) => layer.segmentId === segment.id\n );\n if (existingLayer > -1) {\n // console.log({ existingLayer: this.segmentLayers[existingLayer] });\n // Segment already exists\n\n // Update tooltip text\n // console.log(this.segmentLayers[existingLayer].tooltip);\n this.segmentLayers[existingLayer].tooltip.setContent(`S${index + 1}`);\n\n // Don't add it again\n return;\n }\n\n // console.log({ segment });\n\n let coords = null;\n if (segment.sample_file) {\n // Fetch the coordinates.\n const d = await apiFetch(segment.sample_file);\n if (d && d.coordinates) {\n coords = d.coordinates.map((c) => L.latLng(c.lat, c.lng, c.alt));\n }\n }\n\n if (coords) {\n // Add the segment to the map\n const startIcon = L.icon({\n iconUrl: segmentStartIcon,\n iconSize: [20, 24],\n iconAnchor: [10, 24],\n });\n const layers = onlyShowDots\n ? L.marker(coords[0], { icon: startIcon }).addTo(this.map)\n : this.drawPolyline(coords, false);\n\n const tooltip = L.tooltip({ permanent: true })\n .setLatLng([segment.start_lat, segment.start_lng])\n .setContent(`S${index + 1}`)\n .addTo(this.map);\n\n this.segmentLayers.push({\n layer: onlyShowDots ? null : layers.polyline,\n tooltip: tooltip,\n segmentId: segment.id,\n latLng: [segment.start_lat, segment.start_lng],\n stopIconLayer: onlyShowDots ? null : layers.stopIcon,\n startIconLayer: onlyShowDots ? layers : layers.startIcon,\n dotView: onlyShowDots,\n });\n }\n });\n }\n\n removeSegmentLayers() {\n this.segmentLayers.forEach((layer) => {\n // console.log('Removing layer', layer);\n if (layer.layer) this.map.removeLayer(layer.layer);\n // this.map.removeLayer(layer.layer);\n });\n this.segmentLayers = [];\n }\n\n highlightSegment(segmentId) {\n // console.log('Highlighting segment', segmentId);\n const layer = this.segmentLayers.find(\n (layer) => layer.segmentId === parseInt(segmentId)\n );\n if (layer && layer.layer) {\n // this.map.fitBounds(layer.layer.getBounds());\n layer.layer.setStyle({ weight: 5 });\n }\n if (layer && layer.startIconLayer) {\n layer.startIconLayer.setIcon(\n L.icon({\n iconUrl: segmentStartIcon,\n iconSize: [30, 36],\n iconAnchor: [15, 36],\n })\n );\n }\n }\n unHighlightSegment(segmentId) {\n console.log('Unhighlighting segment', segmentId);\n const layer = this.segmentLayers.find(\n (layer) => layer.segmentId === parseInt(segmentId)\n );\n if (layer && layer.layer) {\n layer.layer.setStyle({ weight: 3 });\n }\n if (layer && layer.startIconLayer) {\n layer.startIconLayer.setIcon(\n L.icon({\n iconUrl: segmentStartIcon,\n iconSize: [20, 24],\n iconAnchor: [10, 24],\n })\n );\n }\n }\n}\n","const debounce = (func, delay) => {\n let debounceTimer;\n return function () {\n const context = this;\n const args = arguments;\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => func.apply(context, args), delay);\n };\n};\n\nexport default debounce;\n","import React from 'react';\nimport apiFetch from '../../src/js/fetch';\n\nimport BarLoader from 'react-spinners/BarLoader';\nimport Spinner from 'react-spinners/PuffLoader';\nimport BrowseSegmentsMap from '../../src/js/segments/browse';\nimport { map } from 'jquery';\nimport elevation from '../../images/icons/ic-elevation.svg';\nimport SegmentType from '../SegmentType';\nimport coordinates from '../../images/icons/ic-coordinates.svg';\nimport arrow from '../../images/icons/ic-arrow.svg';\nimport openInTab from '../../images/icons/ic-open-in-tab.svg';\nimport debounce from '../../src/js/lib/debounce';\n\nclass Browse extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n segments: [],\n loaded: false,\n initialPosition: null,\n mapSpinner: true,\n\n search: '',\n\n hovering: null,\n minZoom: false,\n createdBy: 'all',\n };\n\n this.addSegmentsToContest = props.addSegmentsToContest || false;\n this.refreshWindow = this.refreshWindow.bind(this);\n this.onBoundsChange = this.onBoundsChange.bind(this);\n\n this.mounted = true;\n }\n\n componentDidMount() {\n console.log('Browse mounted');\n\n const mapOptions = {\n mapSelector: 'browse-map',\n onBoundsChange: this.onBoundsChange,\n seeCurrentLocation: true,\n };\n\n let coords = null;\n if (!navigator.geolocation) {\n // Geolocation is not supported by this browser\n console.log('Geolocation is not supported by this browser.');\n this.setState({ mapSpinner: false });\n\n this.mapHandler = new BrowseSegmentsMap(mapOptions);\n } else {\n // Geolocation is supported by this browser\n console.log('Geolocation is supported by this browser.');\n navigator.geolocation.getCurrentPosition(\n (position) => {\n // We have the user's position\n if (this.mounted) {\n console.log({ position });\n\n coords = [position.coords.latitude, position.coords.longitude];\n this.setState({ initialPosition: coords, mapSpinner: false });\n\n mapOptions.startLocation = coords;\n this.mapHandler = new BrowseSegmentsMap(mapOptions);\n }\n },\n (error) => {\n console.log({ error });\n // We did not get the user's position\n if (this.mounted) {\n if (error.code === error.PERMISSION_DENIED) {\n // User denied the request for Geolocation\n console.log('User denied the request for Geolocation.');\n } else {\n // Geolocation is supported, and the user has not denied the request.\n console.log(\n 'Geolocation is supported, and the user has not denied the request.'\n );\n }\n\n this.mapHandler = new BrowseSegmentsMap(mapOptions);\n this.setState({ mapSpinner: false });\n }\n }\n );\n }\n\n this.windowFocusListener = true;\n window.addEventListener('focus', this.refreshWindow);\n }\n\n refreshWindow() {\n console.log('refreshing');\n if (this.mapHandler) {\n console.log('refreshing map');\n this.onBoundsChange();\n }\n }\n\n componentWillUnmount() {\n // Remove the map\n console.log('unmounting Browse');\n if (this.mapHandler) {\n this.mapHandler.unmount();\n this.mapHandler = null;\n }\n\n if (this.windowFocusListener) {\n window.removeEventListener('focus', this.refreshWindow);\n }\n\n this.mounted = false;\n }\n\n onSearchChange = (e) => {\n const search = e.target.value;\n this.setState({ search, searching: true });\n\n // fetch segments by search\n\n if (!search) {\n this.setState({ segments: [] });\n this.fetchByBounds(this.mapHandler.getBounds());\n }\n\n console.log('onSearchChange');\n this.submitDebounced();\n };\n\n submitDebounced = debounce(() => {\n console.log('debounced');\n this.onSubmit();\n }, 600);\n\n onSubmit = () => {\n const { search } = this.state;\n\n if (search) {\n // We should then update the map with the new segments and center the map on the first matching segment (if any)\n this.setState({ segments: [] });\n this.fetchBySearch(search);\n }\n };\n\n onBoundsChange = (bounds, currentZoom) => {\n const { hovering, searching } = this.state;\n if (hovering) {\n // We are hovering over a segment, so we should not fetch by bounds\n return;\n }\n\n console.log({ searching });\n\n if (!bounds) {\n bounds = this.mapHandler.getBounds();\n console.log({ bounds });\n }\n if (!currentZoom) {\n currentZoom = this.mapHandler.getZoom();\n console.log({ currentZoom });\n }\n\n if (searching) {\n console.log('searching');\n // We just searched, so we should clear the search and don't fetch by bounds this time.\n this.setState({ searching: false });\n } else {\n // fetch segments by bounds\n if (currentZoom >= 7) {\n this.setState({ segments: [], minZoom: false });\n this.fetchByBounds(bounds);\n } else {\n console.log(`min zoom reached: ${currentZoom}`);\n this.setState({ segments: [], minZoom: true });\n this.mapHandler.addSegmentsToMap([]);\n }\n }\n };\n\n fetchBySearch = async (search) => {\n console.log('fetching by search');\n\n if (!this.mapHandler) {\n console.log('mapHandler not ready');\n return;\n }\n\n this.setState({ loaded: false });\n try {\n const segments = await apiFetch(\n `/api/segments/search?search=${search}&created_by=${this.state.createdBy}`\n );\n if (this.mapHandler) {\n this.setState({ segments });\n\n if (segments.length) {\n this.mapHandler.addSegmentsToMap(segments);\n this.mapHandler.flyTo([segments[0].stop_lat, segments[0].stop_lng]);\n this.setState({ minZoom: false });\n }\n }\n } catch (error) {\n console.log({ error });\n }\n this.setState({ loaded: true });\n };\n\n fetchByBounds = async (bounds) => {\n console.log('fetching by bounds');\n\n this.setState({ loaded: false, search: '' });\n try {\n const segments = await apiFetch(`/api/segments/bounds`, {\n method: 'POST',\n body: JSON.stringify({ bounds, created_by: this.state.createdBy }),\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n if (this.mapHandler && !this.state.minZoom) {\n this.mapHandler.addSegmentsToMap(segments);\n this.setState({ segments: segments });\n }\n } catch (error) {\n console.log({ error });\n }\n this.setState({ loaded: true });\n };\n\n hoverSegment = (e) => {\n const { hovering } = this.state;\n\n // console.log({ hovering, segmentId });\n const cont = e.currentTarget; //;.closest('[data-segment-id]');\n const segmentId = cont.dataset.segmentId;\n if (hovering !== segmentId) {\n console.log({ highlight: segmentId });\n\n this.setState({ hovering: segmentId }, () => {\n this.mapHandler.highlightSegment(segmentId);\n });\n }\n };\n hoverSegmentDebounced = debounce(this.hoverSegment, 100);\n\n endHoverSegment = (e) => {\n const cont = e.currentTarget; //.closest('[data-segment-id]');\n const segmentId = cont.dataset.segmentId;\n console.log({ unhighlight: segmentId });\n\n this.setState({ hovering: null });\n\n if (this.mapHandler) {\n this.mapHandler.unHighlightSegment(segmentId);\n }\n };\n ednHoverSegmentDebounced = debounce(this.endHoverSegment, 100);\n\n onChangeCreatedBy = (e) => {\n this.setState({ createdBy: e.target.value }, () => {\n this.onBoundsChange();\n });\n };\n\n render() {\n const { loaded, search, segments, mapSpinner, minZoom } = this.state;\n const {\n onAddSegment,\n newSegments,\n existingSegments,\n sectionSize = 'h-full',\n } = this.props;\n\n return (\n \n
\n 0km
\n{(segmentDistance / 1000).toFixed(1)}km
\n\n
\n {this.addSegmentsToContest && (\n \n \n Create segment\n \n )}\n
\n \n \n \n
\n {minZoom ? (\n \n Navigate to where you want to see the segments, and zoom in.\n
\n ) : null}\n \n {loaded ? (\n segments.length ? (\n segments.map((segment, index) => {\n // Combine the existing segments and the new segments (from the challenge creation segment list) when checking if a segment is already selected.\n const checkSegments = this.addSegmentsToContest\n ? [...existingSegments, ...newSegments]\n : null;\n\n // Check if segment is already selected (either from the existing segments or from the new segments list)\n const existingSegment =\n checkSegments &&\n checkSegments.find((s) => s.id === segment.id);\n\n // If segment is already in the list, disable it (must be removed from the challenge creation segment list).\n const disabled =\n this.addSegmentsToContest &&\n existingSegments.find((s) => s.id === segment.id);\n\n const Elem = this.addSegmentsToContest ? 'div' : 'a';\n return (\n \n {\n if (!disabled) onAddSegment(segment);\n }\n : undefined\n }\n data-segment-id={segment.id}\n onMouseEnter={this.hoverSegment}\n onMouseLeave={this.endHoverSegment}\n className={`block border transition-colors ${\n existingSegment\n ? 'border-border-quaternary'\n : 'hover:border-border border-transparent'\n } flex-1 bg-background-quinary p-3 pl-4 rounded cursor-pointer flex items-center`}\n >\n {this.addSegmentsToContest && (\n \n 
\n \n )}\n
\n );\n })\n ) : minZoom ? null : (\n \n onAddSegment(segment)}\n />\n
\n )}\n \n
\n \n {this.addSegmentsToContest && (\n \n
\n \n \n {segment.name}\n \n
\n S{index + 1}\n \n 
\n )}\n
\n \n
\n {!this.addSegmentsToContest && (\n No segments found
\n )\n ) : (\n \n \n Add to the challenge and close ({newSegments.length})\n \n
\n )}\n \n \n {mapSpinner ? (\n
\n \n );\n }\n}\nexport default Browse;\n","import MapHandler from '../mapHandler';\n\nexport default class CreateSegments extends MapHandler {\n constructor(options = {}) {\n super(options);\n }\n}\n","import React from 'react';\nimport apiFetch from '../../src/js/fetch';\nimport CreateSegmentHandler from '../../src/js/segments/new';\nimport ContentContainer from '../ContentContainer';\nimport editIcon from '../../images/icons/ic-edit.svg';\nimport toolTip from '../../images/icons/ic-info.svg';\nimport lineChunk from '@turf/line-chunk';\nimport { uploadFile } from '../../src/js/lib/directUpload';\n\nimport Slider from 'rc-slider';\nimport 'rc-slider/assets/index.css';\n\nimport BarLoader from 'react-spinners/BarLoader';\nimport Altitude from './Altitude';\n\nclass CreateSegment extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n // form\n name: '',\n description: '',\n errors: {},\n segmentTypeId: '',\n\n // activity\n activityId: this.props.activity_id,\n activity: null,\n\n loading: true,\n\n // selection\n selectionDistance: null,\n selectionRange: [0, 100],\n validLength: true,\n };\n\n this.mapHandler = null;\n\n this.openedFromCreateChallenge =\n new URLSearchParams(document.location.search).get('source') ===\n 'create-challenge';\n\n this.fetchCoordinates = this.fetchCoordinates.bind(this);\n this.fetchActivities = this.fetchActivities.bind(this);\n this.handleActivityChange = this.handleActivityChange.bind(this);\n this.handleSelection = this.handleSelection.bind(this);\n }\n\n componentDidMount() {\n if (this.state.activityId) {\n // A activity_id is passed, so we can fetch the coordinates\n this.fetchCoordinates(this.state.activityId);\n } else {\n this.fetchActivities();\n }\n }\n componentWillUnmount() {\n // Remove the map\n console.log('unmounting');\n if (this.mapHandler) {\n this.mapHandler.unmount();\n }\n }\n fetchActivities = async () => {\n console.log('fetchActivities');\n try {\n const data = await apiFetch(`/api/activities`, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n });\n console.log({ data });\n\n this.setState({ activities: data, loading: false });\n } catch (error) {\n console.log({ error });\n this.setState({ loading: false });\n }\n };\n fetchCoordinates = async (activityId) => {\n console.log('fetchCoordinates');\n try {\n const data = await apiFetch(\n `/api/activities/coordinates?id=${activityId}`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n }\n );\n console.log({ data });\n\n this.setState({ activity: data.activity, loading: false }, async () => {\n // Download json file if sample_file is present\n let coords = null;\n if (data.sample_file) {\n const d = await apiFetch(data.sample_file);\n if (d && d.samples) {\n coords = d.samples;\n }\n console.log({ coords: coords });\n }\n\n if (coords && coords.length) {\n // Create the map\n this.setState({ coordinates: coords });\n\n this.mapHandler = new CreateSegmentHandler({\n coordinates: coords,\n selectControlEnabled: true,\n selectionCallback: this.handleSelection,\n });\n } else {\n alert('No coordinates found for this activity.');\n this.setState({ loading: false, activity: null });\n }\n });\n } catch (error) {\n console.log({ error });\n this.setState({ loading: false });\n }\n };\n\n handleSelection = (selection) => {\n console.log({ selection });\n\n const validLength =\n selection?.distance >= 150 && selection?.distance < 50000; // Max 50km\n\n // Update the selection data, and set new range of the slider\n this.setState({\n selectionDistance: selection?.distance,\n selectionRange: selection.range,\n error: null,\n validLength: validLength,\n });\n };\n\n onChangeSelectionSlider = (value) => {\n console.log({ value });\n this.setState({ selectionRange: value });\n\n // Update the selection in the map.\n if (this.mapHandler) {\n this.mapHandler.setSelection(value);\n }\n };\n\n handleChange = (event) => {\n this.setState({\n [event.target.name]: event.target.value,\n error: null,\n });\n };\n\n handleSubmit = async (event) => {\n event.preventDefault();\n\n const { name, description, validLength, selectionDistance } = this.state;\n const selection = this.mapHandler && this.mapHandler.getSelection();\n let coordinates = [];\n\n if (!selection || !selection.startPoint || !selection.stopPoint || !name) {\n this.setState({\n loading: false,\n error:\n 'You need to fill in all fields, and select a course by dragging the start and stop along your activity.',\n });\n return;\n }\n\n if (!validLength) {\n // The segment length is too long/short. The maximum length is 50km, minimum 150 meters.\n this.setState({\n loading: false,\n error:\n selectionDistance < 150\n ? 'The segment is too short. The minimum is 150m.'\n : 'The segment is too long. The maximum distance is 50km.',\n });\n return;\n } else {\n // Distance is valid, but we need to prepare the coordinates, to make sure they are not too spread out (too long distance between the points (max 10 meters)).\n this.setState({ error: null, loading: true });\n\n console.log({ Selection: selection, time: new Date().getTime() });\n // make sure a line is not more than 10 meters. Linechunk will chop it up if it is\n // Chops each feature into points max 10 meters apart if originaly longer distance\n const geoJson = lineChunk(this.mapHandler.getSelectionGeoJson(), 0.01, {\n units: 'kilometers',\n });\n console.log({ geoJson, time: new Date().getTime() });\n\n // Get all coordinates from the geoJson\n coordinates = geoJson.features\n .map((obj) => L.GeoJSON.coordsToLatLngs(obj.geometry.coordinates))\n .flat(1);\n\n console.log({ coordinates, time: new Date().getTime() });\n }\n\n this.setState({ loading: true });\n\n // Upload the coordinates directly\n const body = JSON.stringify(coordinates);\n const blob = new Blob([body], {\n type: 'application/json',\n });\n\n // Create a file from the compressed blob\n const coordinatesJsonFile = new File([blob], 'coordinates.json', {\n type: blob.type,\n });\n\n // console.log({\n // bodyLength: body.length,\n // compressedLength: blob.length,\n // body,\n // blob,\n // coordinatesJsonFile,\n // });\n\n const uploaded = await uploadFile(coordinatesJsonFile);\n // console.log({ uploaded });\n\n const signedId = uploaded.signed_id;\n\n // Send the data and signed id to the server\n const data = {\n segment: {\n name: name,\n description: description,\n distance_in_meters: selection.distance,\n coordinates: coordinates,\n start_lat: selection.startPoint.lat,\n start_lng: selection.startPoint.lng,\n stop_lat: selection.stopPoint.lat,\n stop_lng: selection.stopPoint.lng,\n activity_id: this.state.activityId,\n temp_coordinates_file: signedId,\n },\n };\n\n try {\n const created = await apiFetch('/api/segments', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n credentials: 'include',\n body: JSON.stringify(data),\n });\n\n if (this.openedFromCreateChallenge) {\n // Close the tab, instead of redirecting. The user was directed here in a new tab while creating a challenge.\n window.close();\n return;\n }\n\n window.location.href = created.url; // \"/segments/\" + created.id;\n } catch (e) {\n console.log({ e });\n const err = await e.json();\n console.log({ err });\n this.setState({\n loading: false,\n error:\n err.error_message || 'Something went wrong. Please try again later.',\n });\n }\n };\n\n handleActivityChange = (event) => {\n this.setState({\n activityId: event.target.value,\n loading: true,\n error: null,\n });\n this.fetchCoordinates(event.target.value);\n };\n render() {\n const {\n activities = [],\n activity,\n activityId,\n loading,\n name,\n description,\n selectionDistance,\n error,\n selectionRange,\n validLength,\n coordinates,\n } = this.state;\n\n console.log({ activity, coordinates });\n\n return (\n \n
\n ) : null}\n \n
\n \n Any segment has to be created from an activity of yours.\n
\n\n\n {activity ? (\n
\n \n {this.openedFromCreateChallenge ? (\n \n \n \n \n \n \n
\n ) : activityId ? null : (\n \n Adjust your segment\n
\n \n\n {!validLength && (\n
\n\n {coordinates && coordinates.length > 0 ? (\n \n
\n )}\n \n {selectionDistance < 150\n ? 'The segment is too short. The minimum is 150m.'\n : 'The segment is too long. The maximum distance is 50km.'}\n
\n\n
\n \n
\n \n Adjust start-point\n
\n\n \n this.mapHandler.nudgeSelection(\n 'start',\n 'backward-big'\n )\n }\n >\n -10\n \n \n this.mapHandler.nudgeSelection(\n 'start',\n 'backward'\n )\n }\n >\n -1\n \n \n this.mapHandler.nudgeSelection('start', 'forward')\n }\n >\n +1\n \n \n this.mapHandler.nudgeSelection(\n 'start',\n 'forward-big'\n )\n }\n >\n +10\n \n
\n \n
\n \n
\n \n Adjust end-point\n
\n\n \n this.mapHandler.nudgeSelection(\n 'end',\n 'backward-big'\n )\n }\n >\n -10\n \n \n this.mapHandler.nudgeSelection('end', 'backward')\n }\n >\n -1\n \n \n this.mapHandler.nudgeSelection('end', 'forward')\n }\n >\n +1\n \n \n this.mapHandler.nudgeSelection(\n 'end',\n 'forward-big'\n )\n }\n >\n +10\n \n
\n \n 
\n \n How to create good segments\n \n
\n \n Distance:{' '}\n \n {selectionDistance\n ? (selectionDistance / 1000).toFixed(2) + 'km'\n : 'Drag the slider, or set a start and end-point in the map.'}\n \n
\n\n
\n ) : null}\n \n Additional information (optional)\n
\n\n \n \n \n {activities.map((activity) => (\n \n {activity.name}\n \n ))}\n \n \n Import manual activity\n \n \n
\n )}\n {loading ? (\n Activity
\n\n
\n ) : null}\n \n The tab will be closed when you click confirm, so you can continue\n creating your challenge.\n
\n ) : null}\n {error &&{error}
}\n \n\n {title ?
\n );\n};\n\nexport default Splash;\n","import React from 'react';\nimport Modal from './Modal';\nimport BarLoader from 'react-spinners/BarLoader';\n\nconst SuperPopup = ({\n open,\n modalTitle,\n title,\n text,\n icon,\n onClose,\n buttons = [],\n processing = false,\n error,\n children,\n zIndex,\n py = 'py-12',\n}) => {\n const handleClose = () => {\n if (processing) return;\n onClose();\n };\n\n return (\n {title}
: null}\n {text ?{text}
: null}\n\n {children}\n\n {title}\n
\n )}\n\n {!!text &&{text}
}\n\n {buttons && buttons.length > 0 && (\n\n {buttons.map((button, index) => (\n \n {button.text}\n \n ))}\n
\n )}\n {processing && (\n \n
\n )}\n {error && (\n {error}
\n )}\n\n {!!children && {children}
}\n \n );\n};\n\nexport default SuperPopup;\n","import React from 'react';\n\nfunction IcFilter() {\n return (\n 
\";\n return div;\n };\n logo.addTo(this.map);\n } else {\n L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n maxZoom: 19,\n attribution: '© OpenStreetMap',\n }).addTo(this.map);\n }\n\n // Draws coordinates immediately if coordinates are set\n if (this.coordinates) {\n console.log('Drawing coordinates');\n\n this.drawPolyline(\n this.coordinates.map((c) => L.latLng(c.lat, c.lng, c.altitude))\n );\n }\n\n if (this.expandMapEnabled && this.expandMapCallback) {\n // Create the expand map button\n const self = this; // We need to use self as \"this\" is not available in the onAdd function\n L.Control.Button = L.Control.extend({\n options: {\n position: 'topright',\n },\n onAdd: function (map) {\n var container = L.DomUtil.create(\n 'div',\n 'leaflet-bar leaflet-control'\n );\n var button = L.DomUtil.create(\n 'a',\n 'leaflet-control-expand',\n container\n );\n L.DomEvent.on(button, 'click', function () {\n self.expandMapCallback();\n });\n\n container.title = 'Expand map control';\n\n return container;\n },\n onRemove: function (map) {},\n });\n // Add the expand map control to the map\n this.expandMapControl = new L.Control.Button();\n this.expandMapControl.addTo(this.map);\n }\n\n if (this.seeCurrentLocation) {\n /*\n * Show my position control\n */\n const self = this; // We need to use self as \"this\" is not available in the onAdd function\n const customControl = L.Control.extend({\n options: {\n position: 'topleft',\n },\n\n onAdd: function (map) {\n const container = L.DomUtil.create('div');\n container.classList.add('flex');\n\n const positionControl = L.DomUtil.create('button');\n const positionSpanControl = L.DomUtil.create('span');\n positionSpanControl.innerHTML = 'Show my position';\n positionControl.appendChild(positionSpanControl);\n\n positionControl.classList.add('show-position-control');\n positionControl.onclick = function () {\n positionSpanControl.innerHTML = 'Locating';\n self.positionControl = positionSpanControl;\n console.log('Locating');\n self.getPosition();\n };\n\n container.appendChild(positionControl);\n\n return container;\n },\n });\n this.map.addControl(new customControl());\n }\n\n // Add zoom control\n L.control\n .zoom({\n position: 'topleft',\n })\n .addTo(this.map);\n }\n\n // Draws the polyline on the map\n drawPolyline(coords, flyTo = true) {\n // Creates the polyline and adds it to the map\n const ride = L.polyline(\n coords,\n this.polylineOptions || {\n color: '#2C3232',\n opacity: this.selectControlEnabled ? 0.6 : 1,\n weight: 3,\n }\n ).addTo(this.map);\n\n // Adds the start and end icons\n let startIconLayer = null;\n let stopIconLayer = null;\n\n // Only add start and end icons if selectControl is disabled\n if (!this.selectControlEnabled) {\n const startIcon = L.icon({\n iconUrl: segmentStartIcon,\n iconSize: [20, 24],\n iconAnchor: [10, 24],\n });\n startIconLayer = L.marker(coords[0], { icon: startIcon }).addTo(this.map);\n\n const endIcon = L.icon({\n iconUrl: segmentEndIcon,\n iconSize: [20, 20],\n });\n\n stopIconLayer = L.marker(coords[coords.length - 1], {\n icon: endIcon,\n }).addTo(this.map);\n }\n\n // Adds the selection control if enabled\n if (this.selectControlEnabled) {\n // Adds and enables LineStringSelect\n this.map.addControl(this.selectControl);\n this.selectControl.enable({\n feature: ride.feature,\n layer: ride,\n });\n this.selectControl.on('selection', this.selectionListener);\n\n // Set the selection to 25% to 75% of the total distance\n this.startMarker = L.marker(coords[0], {\n icon: this.startMarkerIcon,\n interactive: false,\n }).addTo(this.map);\n\n this.selectControl.selectMeters(\n this.coordinatesDistance * 0.25,\n this.coordinatesDistance * 0.75\n );\n\n // Fit map to the selection\n this.map.fitBounds(this.selectControl._selection.getBounds());\n }\n\n // Fly to the start point if specified\n if (flyTo && !this.selectControlEnabled) {\n // Fly the focus to the start-point\n this.flyTo([this.coordinates[0].lat, this.coordinates[0].lng]);\n }\n\n // Return the polyline and the start and end icon references.\n return {\n polyline: ride,\n stopIcon: stopIconLayer,\n startIcon: startIconLayer,\n };\n }\n\n /*\n * =========================================================\n * Geolocation methods\n */\n async getPosition() {\n if ('geolocation' in navigator) {\n /* geolocation is available */\n console.log('Getting position');\n navigator.geolocation.getCurrentPosition(\n this.getPositionSuccess,\n this.getPositionError\n );\n if (!this.positionWatcher) {\n this.positionWatcher = navigator.geolocation.watchPosition(\n this.getPositionSuccess,\n this.getPositionErrorWatch\n );\n }\n } else {\n alert(\n 'Your browser does not support geolocation. Please use another browser to use your position.'\n );\n }\n\n // get the orientation of the device\n if (\n typeof DeviceOrientationEvent !== 'undefined' &&\n typeof DeviceOrientationEvent.requestPermission === 'function'\n ) {\n try {\n const permissionState =\n await DeviceOrientationEvent.requestPermission();\n\n if (permissionState === 'granted') {\n this.orientationListener = window.addEventListener(\n 'deviceorientation',\n this.handleOrientation,\n true\n );\n }\n } catch (error) {\n console.error('Error:', error);\n }\n } else {\n // handle regular non iOS 13+ devices\n console.log('Regular device');\n this.orientationListener = window.addEventListener(\n 'deviceorientation',\n this.handleOrientation,\n true\n );\n }\n }\n\n handleOrientation(event) {\n console.log({ event });\n\n if (this.positionMarker) {\n this.positionMarker._icon.classList.add('has-orientation');\n this.orientationElement.style.transform = `rotate(-${event.alpha}deg)`;\n } else {\n // save the initial orientation, so we can rotate the marker when it's added to the map.\n this.initialOrientation = event.alpha;\n }\n }\n\n async getPositionSuccess(position) {\n console.log('Found position');\n\n this.positionControl.innerHTML = 'Show my position';\n\n if (this.positionMarker) {\n // Move the marker to the new position\n this.positionMarker.setLatLng([\n position.coords.latitude,\n position.coords.longitude,\n ]);\n } else {\n // Create a new marker\n this.positionMarker = new L.Marker(\n [position.coords.latitude, position.coords.longitude],\n {\n icon: new L.DivIcon({\n className: 'map-position-marker',\n html: '',\n }),\n }\n ).addTo(this.map);\n\n // Save the orientation element\n this.orientationElement = this.positionMarker._icon.querySelector(\n '.map-position-orientation'\n );\n\n // Fly to the position\n this.flyTo([position.coords.latitude, position.coords.longitude]);\n\n // Rotate the marker if we have an initial orientation\n if (this.initialOrientation) {\n this.positionMarker._icon.classList.add('has-orientation');\n this.orientationElement.style.transform = `rotate(-${this.initialOrientation}deg)`;\n this.initialOrientation = null;\n }\n }\n }\n\n getPositionError(e) {\n console.error({ e });\n\n this.positionControl.innerHTML = 'Show my position';\n\n alert(\n 'Unable to retrieve your location. Please allow your browser to use your position.'\n );\n }\n getPositionErrorWatch(e) {\n console.log({ e });\n }\n\n /*\n * =========================================================\n * Fit file methods\n */\n // This is called as a callback when the fit file is loaded and parsed\n loadedFileData(coordinates) {\n this.coordinates = coordinates;\n\n // Draw the activity on the map\n this.drawPolyline(this.coordinates);\n }\n\n /*\n * =========================================================\n * Helpers\n */\n // Calculate distance through all provided coordinates\n calculateDistance(coordinates) {\n return coordinatesDistance(coordinates);\n // let d = 0;\n // for (let i = 0; i < coordinates.length - 2; i++) {\n // const pointA = point([coordinates[i].lng, coordinates[i].lat]);\n // const pointB = point([coordinates[i + 1].lng, coordinates[i + 1].lat]);\n\n // // Add the distance between the two points to the total distance (is returned in kilometers, so we multiply by 1000 to get meters)\n // d += distance(pointA, pointB) * 1000;\n // }\n // return d;\n }\n\n // Fly to a specific latLng\n flyTo(latLng) {\n this.map.setView(latLng, 14);\n }\n\n /*\n * =========================================================\n * Selection control methods\n */\n\n /**\n * Fired when \"selection\"-event is fired, when range is changed (range slider), and when we nudge the start or end marker.\n *\n * We then check if the start or end marker is nudged or selection changed, as it requires different calculations.\n */\n async selectionListener() {\n const coordinates = this.selectControl.getSelection();\n console.log({\n control: this.selectControl,\n coords: this.selectControl.getSelection(),\n });\n\n // Calculate distance through all selected coordinates\n const distance = parseInt(L.GeometryUtil.length(coordinates).toFixed(0));\n\n // Get the percentage of the start and end markers distance from start\n let startMarkerDistanceFromStartPercentage =\n (this.startMarkerDistanceFromStart / this.coordinatesDistance) * 100;\n let endMarkerDistanceFromStartPercentage =\n (this.endMarkerDistanceFromStart / this.coordinatesDistance) * 100;\n let range = [];\n\n // The selection was changed by using the nudge buttons, or the range slider\n if (this.nudged || this.rangeUpdated) {\n // Reset the nudge/rangeUpdated flag\n this.nudged = false;\n this.rangeUpdated = false;\n\n // Use existing start and end marker values\n // Get the percentage of the start and end markers distance from start\n startMarkerDistanceFromStartPercentage =\n (this.startMarkerDistanceFromStart / this.coordinatesDistance) * 100;\n endMarkerDistanceFromStartPercentage =\n (this.endMarkerDistanceFromStart / this.coordinatesDistance) * 100;\n\n // Range slider values\n range = [\n startMarkerDistanceFromStartPercentage,\n endMarkerDistanceFromStartPercentage,\n ];\n } else {\n // The selection was changed by dragging the start or end marker on the map\n\n // Calculate the selection points distance from start of activity (layer).\n // Get first part of the coordinates array up to the start marker\n let firstPart = this.coordinates.slice(\n 0,\n this.selectControl._startMarker.start\n );\n firstPart = firstPart.map((c, i) => L.latLng(c.lat, c.lng)); // Get only latlngs\n\n // Get distance from start\n this.startMarkerDistanceFromStart = L.GeometryUtil.length(firstPart);\n // As the start marker is not included in the coordinates array (it can be between to coordinates in the array), we need to add the distance from the start marker to the previous coordinate in the array (this.selectControl._startMarker.start)\n this.startMarkerDistanceFromStart += this.selectControl._startMarker\n .getLatLng()\n .distanceTo(\n L.latLng(\n this.coordinates[this.selectControl._startMarker.start].lat,\n this.coordinates[this.selectControl._startMarker.start].lng\n )\n ); // Get distance from startMarker to the index in the initial coordinates array\n\n // Get the distance from start of activity to end marker.\n this.endMarkerDistanceFromStart =\n this.startMarkerDistanceFromStart + distance;\n\n // Get the percentage of the start and end markers distance from start\n startMarkerDistanceFromStartPercentage =\n (this.startMarkerDistanceFromStart / this.coordinatesDistance) * 100;\n endMarkerDistanceFromStartPercentage =\n (this.endMarkerDistanceFromStart / this.coordinatesDistance) * 100;\n\n // Range slider values\n range = [\n startMarkerDistanceFromStartPercentage,\n endMarkerDistanceFromStartPercentage,\n ];\n }\n\n // Update the view\n this.updateView({ coordinates });\n\n // Set meta data and call callback function\n this.setMetaData(coordinates, distance, range);\n }\n\n // Update the view with new data\n updateView({ coordinates }) {\n // Set markers\n this.startMarker.setLatLng(coordinates[0]);\n if (this.endMarker) {\n this.endMarker.setLatLng(coordinates[coordinates.length - 1]);\n } else {\n this.endMarker = L.marker(coordinates[coordinates.length - 1], {\n icon: this.endMarkerIcon,\n interactive: false,\n }).addTo(this.map);\n }\n }\n\n // Set segment meta data to be used when saving segment\n setMetaData(coordinates, distance, range) {\n this.selectionData = {\n startPoint: coordinates[0],\n stopPoint: coordinates[coordinates.length - 1],\n distance: distance,\n coordinates: coordinates,\n range,\n };\n\n // Call the callback function if it is set\n if (this.selectionCallback) {\n this.selectionCallback(this.selectionData);\n }\n }\n\n // We can set the selection by providing percentages of the total distance\n setSelection(percentagesArray) {\n console.log('setSelection:', percentagesArray);\n // percentagesArray is an array of two numbers between 0 and 100.\n // We calculate the distance from start for both the two percentages and set the selection to that distance.\n this.startMarkerDistanceFromStart =\n (this.coordinatesDistance / 100) * percentagesArray[0];\n this.endMarkerDistanceFromStart =\n (this.coordinatesDistance / 100) * percentagesArray[1];\n\n console.log({\n start: this.startMarkerDistanceFromStart,\n end: this.endMarkerDistanceFromStart,\n });\n\n // Set the selection\n this.selectControl.selectMeters(\n this.startMarkerDistanceFromStart,\n this.endMarkerDistanceFromStart\n );\n\n // Fly to the selection\n this.map.flyToBounds(this.selectControl._selection.getBounds());\n\n this.rangeUpdated = true;\n }\n\n // Nudge the selection back and forth in small steps\n nudgeSelection(marker, direction) {\n console.log({\n start: this.startMarkerDistanceFromStart,\n end: this.endMarkerDistanceFromStart,\n });\n if (marker === 'start') {\n // Start marker\n if (direction === 'forward' || direction == 'forward-big') {\n const distanceToNudge = direction === 'forward-big' ? 30 : 3;\n if (\n this.startMarkerDistanceFromStart <\n this.endMarkerDistanceFromStart - distanceToNudge &&\n this.startMarkerDistanceFromStart <\n this.coordinatesDistance - distanceToNudge\n ) {\n // Nudge forward\n this.startMarkerDistanceFromStart =\n this.startMarkerDistanceFromStart + distanceToNudge;\n\n this.nudged = true;\n } else {\n // Don't nudge if start marker is closer than 2 meters to end marker.\n }\n } else {\n // back\n const distanceToNudge = direction === 'backward-big' ? 30 : 3;\n if (this.startMarkerDistanceFromStart > distanceToNudge) {\n this.startMarkerDistanceFromStart =\n this.startMarkerDistanceFromStart - distanceToNudge;\n this.nudged = true;\n } else if (this.startMarkerDistanceFromStart > 0) {\n this.startMarkerDistanceFromStart = 0;\n this.nudged = true;\n } else {\n // Don't nudge\n }\n }\n } else {\n // End marker\n\n if (direction === 'forward' || direction == 'forward-big') {\n const distanceToNudge = direction === 'forward-big' ? 30 : 3;\n if (\n this.endMarkerDistanceFromStart <\n this.coordinatesDistance - distanceToNudge\n ) {\n // Nudge forward\n this.endMarkerDistanceFromStart =\n this.endMarkerDistanceFromStart + distanceToNudge;\n this.nudged = true;\n } else if (this.endMarkerDistanceFromStart < this.coordinatesDistance) {\n this.endMarkerDistanceFromStart = this.coordinatesDistance;\n this.nudged = true;\n } else {\n // Don't nudge\n }\n } else {\n // back\n const distanceToNudge = direction === 'backward-big' ? 30 : 3;\n if (\n this.endMarkerDistanceFromStart >\n this.startMarkerDistanceFromStart + distanceToNudge &&\n this.endMarkerDistanceFromStart > distanceToNudge\n ) {\n this.endMarkerDistanceFromStart =\n this.endMarkerDistanceFromStart - distanceToNudge;\n this.nudged = true;\n } else {\n // Don't nudge\n }\n }\n }\n\n console.log({\n start: this.startMarkerDistanceFromStart,\n end: this.endMarkerDistanceFromStart,\n });\n\n // Set the selection\n this.selectControl.selectMeters(\n this.startMarkerDistanceFromStart,\n this.endMarkerDistanceFromStart\n );\n\n // Fly to the selection\n // this.map.flyToBounds(this.selectControl._selection.getBounds());\n }\n\n /*\n * =========================================================\n * Other methods\n */\n // We should unmout the map when we are done with it.\n unmount() {\n this.map.remove();\n if (this.orientationListener) {\n window.removeEventListener('deviceorientation', this.handleOrientation);\n }\n if (this.positionWatcher) {\n navigator.geolocation.clearWatch(this.positionWatcher);\n }\n }\n}\n","import MapHandler from '../mapHandler';\n\nexport default class Segment extends MapHandler {\n constructor(options = {}) {\n super(options);\n }\n}\n","import tippy from 'tippy.js';\nimport 'tippy.js/dist/tippy.css';\nimport Swal from 'sweetalert2';\n\ndocument.addEventListener('turbo:load', function () {\n addTippys();\n});\n\nexport const addTippys = () => {\n const tippyInstances = document.querySelectorAll(\n '[data-tippy-content]:not([data-tippy-set])'\n );\n tippyInstances.forEach(function (el) {\n el.setAttribute('data-tippy-set', 'true');\n let elem = el;\n const placement = el.dataset.tippyPlacement || 'top';\n const options = {\n content: el.dataset.tippyContent,\n allowHTML: true,\n theme: 'hurryup',\n placement: placement,\n interactive: true,\n };\n\n if (el.closest('.challenge-leaderboard')) {\n // Is in a challenge leaderboard table\n options.onShow = function () {\n if (window.matchMedia('(max-width: 639px)').matches) {\n // Show popup on mobile\n\n setTimeout(() => {\n Swal.fire({\n html: el.dataset.tippyContent,\n animation: false,\n confirmButtonText: 'Close',\n });\n }, 50);\n\n return false;\n }\n };\n }\n\n tippy(elem, options);\n });\n};\n","var map = {\n\t\"./af\": 2786,\n\t\"./af.js\": 2786,\n\t\"./ar\": 867,\n\t\"./ar-dz\": 4130,\n\t\"./ar-dz.js\": 4130,\n\t\"./ar-kw\": 6135,\n\t\"./ar-kw.js\": 6135,\n\t\"./ar-ly\": 6440,\n\t\"./ar-ly.js\": 6440,\n\t\"./ar-ma\": 7702,\n\t\"./ar-ma.js\": 7702,\n\t\"./ar-sa\": 6040,\n\t\"./ar-sa.js\": 6040,\n\t\"./ar-tn\": 7100,\n\t\"./ar-tn.js\": 7100,\n\t\"./ar.js\": 867,\n\t\"./az\": 1083,\n\t\"./az.js\": 1083,\n\t\"./be\": 9808,\n\t\"./be.js\": 9808,\n\t\"./bg\": 8338,\n\t\"./bg.js\": 8338,\n\t\"./bm\": 7438,\n\t\"./bm.js\": 7438,\n\t\"./bn\": 8905,\n\t\"./bn-bd\": 6225,\n\t\"./bn-bd.js\": 6225,\n\t\"./bn.js\": 8905,\n\t\"./bo\": 1560,\n\t\"./bo.js\": 1560,\n\t\"./br\": 1278,\n\t\"./br.js\": 1278,\n\t\"./bs\": 622,\n\t\"./bs.js\": 622,\n\t\"./ca\": 2468,\n\t\"./ca.js\": 2468,\n\t\"./cs\": 5822,\n\t\"./cs.js\": 5822,\n\t\"./cv\": 877,\n\t\"./cv.js\": 877,\n\t\"./cy\": 7373,\n\t\"./cy.js\": 7373,\n\t\"./da\": 4780,\n\t\"./da.js\": 4780,\n\t\"./de\": 9740,\n\t\"./de-at\": 217,\n\t\"./de-at.js\": 217,\n\t\"./de-ch\": 894,\n\t\"./de-ch.js\": 894,\n\t\"./de.js\": 9740,\n\t\"./dv\": 5300,\n\t\"./dv.js\": 5300,\n\t\"./el\": 837,\n\t\"./el.js\": 837,\n\t\"./en-au\": 8348,\n\t\"./en-au.js\": 8348,\n\t\"./en-ca\": 7925,\n\t\"./en-ca.js\": 7925,\n\t\"./en-gb\": 2243,\n\t\"./en-gb.js\": 2243,\n\t\"./en-ie\": 6436,\n\t\"./en-ie.js\": 6436,\n\t\"./en-il\": 7207,\n\t\"./en-il.js\": 7207,\n\t\"./en-in\": 2127,\n\t\"./en-in.js\": 2127,\n\t\"./en-nz\": 6319,\n\t\"./en-nz.js\": 6319,\n\t\"./en-sg\": 1662,\n\t\"./en-sg.js\": 1662,\n\t\"./eo\": 2915,\n\t\"./eo.js\": 2915,\n\t\"./es\": 5655,\n\t\"./es-do\": 5251,\n\t\"./es-do.js\": 5251,\n\t\"./es-mx\": 6112,\n\t\"./es-mx.js\": 6112,\n\t\"./es-us\": 1146,\n\t\"./es-us.js\": 1146,\n\t\"./es.js\": 5655,\n\t\"./et\": 5603,\n\t\"./et.js\": 5603,\n\t\"./eu\": 7763,\n\t\"./eu.js\": 7763,\n\t\"./fa\": 6959,\n\t\"./fa.js\": 6959,\n\t\"./fi\": 1897,\n\t\"./fi.js\": 1897,\n\t\"./fil\": 2549,\n\t\"./fil.js\": 2549,\n\t\"./fo\": 4694,\n\t\"./fo.js\": 4694,\n\t\"./fr\": 4470,\n\t\"./fr-ca\": 3049,\n\t\"./fr-ca.js\": 3049,\n\t\"./fr-ch\": 2330,\n\t\"./fr-ch.js\": 2330,\n\t\"./fr.js\": 4470,\n\t\"./fy\": 5044,\n\t\"./fy.js\": 5044,\n\t\"./ga\": 9295,\n\t\"./ga.js\": 9295,\n\t\"./gd\": 2101,\n\t\"./gd.js\": 2101,\n\t\"./gl\": 8794,\n\t\"./gl.js\": 8794,\n\t\"./gom-deva\": 7884,\n\t\"./gom-deva.js\": 7884,\n\t\"./gom-latn\": 3168,\n\t\"./gom-latn.js\": 3168,\n\t\"./gu\": 5349,\n\t\"./gu.js\": 5349,\n\t\"./he\": 4206,\n\t\"./he.js\": 4206,\n\t\"./hi\": 94,\n\t\"./hi.js\": 94,\n\t\"./hr\": 316,\n\t\"./hr.js\": 316,\n\t\"./hu\": 2138,\n\t\"./hu.js\": 2138,\n\t\"./hy-am\": 1423,\n\t\"./hy-am.js\": 1423,\n\t\"./id\": 9218,\n\t\"./id.js\": 9218,\n\t\"./is\": 135,\n\t\"./is.js\": 135,\n\t\"./it\": 626,\n\t\"./it-ch\": 150,\n\t\"./it-ch.js\": 150,\n\t\"./it.js\": 626,\n\t\"./ja\": 9183,\n\t\"./ja.js\": 9183,\n\t\"./jv\": 4286,\n\t\"./jv.js\": 4286,\n\t\"./ka\": 2105,\n\t\"./ka.js\": 2105,\n\t\"./kk\": 7772,\n\t\"./kk.js\": 7772,\n\t\"./km\": 8758,\n\t\"./km.js\": 8758,\n\t\"./kn\": 3926,\n\t\"./kn.js\": 3926,\n\t\"./ko\": 3730,\n\t\"./ko.js\": 3730,\n\t\"./ku\": 1408,\n\t\"./ku.js\": 1408,\n\t\"./ky\": 3291,\n\t\"./ky.js\": 3291,\n\t\"./lb\": 6841,\n\t\"./lb.js\": 6841,\n\t\"./lo\": 5466,\n\t\"./lo.js\": 5466,\n\t\"./lt\": 7010,\n\t\"./lt.js\": 7010,\n\t\"./lv\": 7595,\n\t\"./lv.js\": 7595,\n\t\"./me\": 9861,\n\t\"./me.js\": 9861,\n\t\"./mi\": 5493,\n\t\"./mi.js\": 5493,\n\t\"./mk\": 5966,\n\t\"./mk.js\": 5966,\n\t\"./ml\": 7341,\n\t\"./ml.js\": 7341,\n\t\"./mn\": 5115,\n\t\"./mn.js\": 5115,\n\t\"./mr\": 370,\n\t\"./mr.js\": 370,\n\t\"./ms\": 9847,\n\t\"./ms-my\": 1237,\n\t\"./ms-my.js\": 1237,\n\t\"./ms.js\": 9847,\n\t\"./mt\": 2126,\n\t\"./mt.js\": 2126,\n\t\"./my\": 6165,\n\t\"./my.js\": 6165,\n\t\"./nb\": 4924,\n\t\"./nb.js\": 4924,\n\t\"./ne\": 6744,\n\t\"./ne.js\": 6744,\n\t\"./nl\": 3901,\n\t\"./nl-be\": 6666,\n\t\"./nl-be.js\": 6666,\n\t\"./nl.js\": 3901,\n\t\"./nn\": 3877,\n\t\"./nn.js\": 3877,\n\t\"./oc-lnc\": 2135,\n\t\"./oc-lnc.js\": 2135,\n\t\"./pa-in\": 5858,\n\t\"./pa-in.js\": 5858,\n\t\"./pl\": 4495,\n\t\"./pl.js\": 4495,\n\t\"./pt\": 9520,\n\t\"./pt-br\": 7446,\n\t\"./pt-br.js\": 7446,\n\t\"./pt.js\": 9520,\n\t\"./ro\": 6459,\n\t\"./ro.js\": 6459,\n\t\"./ru\": 1793,\n\t\"./ru.js\": 1793,\n\t\"./sd\": 950,\n\t\"./sd.js\": 950,\n\t\"./se\": 490,\n\t\"./se.js\": 490,\n\t\"./si\": 124,\n\t\"./si.js\": 124,\n\t\"./sk\": 4249,\n\t\"./sk.js\": 4249,\n\t\"./sl\": 4985,\n\t\"./sl.js\": 4985,\n\t\"./sq\": 1104,\n\t\"./sq.js\": 1104,\n\t\"./sr\": 9131,\n\t\"./sr-cyrl\": 9915,\n\t\"./sr-cyrl.js\": 9915,\n\t\"./sr.js\": 9131,\n\t\"./ss\": 5893,\n\t\"./ss.js\": 5893,\n\t\"./sv\": 8760,\n\t\"./sv.js\": 8760,\n\t\"./sw\": 4449,\n\t\"./sw.js\": 4449,\n\t\"./ta\": 7333,\n\t\"./ta.js\": 7333,\n\t\"./te\": 3110,\n\t\"./te.js\": 3110,\n\t\"./tet\": 2095,\n\t\"./tet.js\": 2095,\n\t\"./tg\": 7321,\n\t\"./tg.js\": 7321,\n\t\"./th\": 9041,\n\t\"./th.js\": 9041,\n\t\"./tk\": 9005,\n\t\"./tk.js\": 9005,\n\t\"./tl-ph\": 5768,\n\t\"./tl-ph.js\": 5768,\n\t\"./tlh\": 9444,\n\t\"./tlh.js\": 9444,\n\t\"./tr\": 2397,\n\t\"./tr.js\": 2397,\n\t\"./tzl\": 8254,\n\t\"./tzl.js\": 8254,\n\t\"./tzm\": 1106,\n\t\"./tzm-latn\": 699,\n\t\"./tzm-latn.js\": 699,\n\t\"./tzm.js\": 1106,\n\t\"./ug-cn\": 9288,\n\t\"./ug-cn.js\": 9288,\n\t\"./uk\": 7691,\n\t\"./uk.js\": 7691,\n\t\"./ur\": 3795,\n\t\"./ur.js\": 3795,\n\t\"./uz\": 6791,\n\t\"./uz-latn\": 588,\n\t\"./uz-latn.js\": 588,\n\t\"./uz.js\": 6791,\n\t\"./vi\": 5666,\n\t\"./vi.js\": 5666,\n\t\"./x-pseudo\": 4903,\n\t\"./x-pseudo.js\": 4903,\n\t\"./yo\": 5805,\n\t\"./yo.js\": 5805,\n\t\"./zh-cn\": 3839,\n\t\"./zh-cn.js\": 3839,\n\t\"./zh-hk\": 5726,\n\t\"./zh-hk.js\": 5726,\n\t\"./zh-mo\": 9807,\n\t\"./zh-mo.js\": 9807,\n\t\"./zh-tw\": 4152,\n\t\"./zh-tw.js\": 4152\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 6700;"],"names":["map","webpackContext","req","id","webpackContextResolve","__webpack_require__","o","e","Error","code","keys","Object","resolve","module","exports","_regeneratorRuntime","Op","prototype","hasOwn","hasOwnProperty","defineProperty","obj","key","desc","value","$Symbol","Symbol","iteratorSymbol","iterator","asyncIteratorSymbol","asyncIterator","toStringTagSymbol","toStringTag","define","enumerable","configurable","writable","err","wrap","innerFn","outerFn","self","tryLocsList","protoGenerator","Generator","generator","create","context","Context","makeInvokeMethod","tryCatch","fn","arg","type","call","ContinueSentinel","GeneratorFunction","GeneratorFunctionPrototype","IteratorPrototype","getProto","getPrototypeOf","NativeIteratorPrototype","values","Gp","defineIteratorMethods","forEach","method","_invoke","AsyncIterator","PromiseImpl","invoke","reject","record","result","__await","then","unwrapped","error","previousPromise","callInvokeWithMethodAndArg","state","doneResult","delegate","delegateResult","maybeInvokeDelegate","sent","_sent","dispatchException","abrupt","done","methodName","undefined","TypeError","info","resultName","next","nextLoc","pushTryEntry","locs","entry","tryLoc","catchLoc","finallyLoc","afterLoc","tryEntries","push","resetTryEntry","completion","reset","iterable","iteratorMethod","isNaN","length","i","displayName","isGeneratorFunction","genFun","ctor","constructor","name","mark","setPrototypeOf","__proto__","awrap","async","Promise","iter","val","object","reverse","pop","skipTempReset","prev","charAt","slice","stop","rootRecord","rval","exception","handle","loc","caught","hasCatch","hasFinally","finallyEntry","complete","finish","thrown","delegateYield","asyncGeneratorStep","gen","_next","_throw","_defineProperties","target","props","descriptor","input","hint","prim","toPrimitive","res","String","Number","_toPrimitive","_setPrototypeOf","p","bind","_createSuper","Derived","hasNativeReflectConstruct","Reflect","construct","sham","Proxy","Boolean","valueOf","_isNativeReflectConstruct","Super","_getPrototypeOf","NewTarget","arguments","apply","_assertThisInitialized","_possibleConstructorReturn","ReferenceError","DebugActivity","_MapHandler","subClass","superClass","_inherits","Constructor","protoProps","staticProps","_super","_this","options","instance","_classCallCheck","segmentLayers","addDebugMarkersToMap","L","control","ruler","position","lengthUnit","factor","display","decimal","addTo","samples","_this2","details","_ref","_callee","sample","index","markerPopup","_context","popup","setContent","concat","time_in_seconds","elapsed_time","lat","lng","altitude","speed","power","distance_in_meters","manual","heart_rate","addMarker","latLng","color","args","_x","_x2","circleMarker","bindPopup","this","MapHandler","_asyncToGenerator","_toPropertyKey","_defineProperty","ActivityShow","_React$Component","_initMap","_e$target","setState","searchSegments","addSegmentToMap","segments","console","log","loaded","apiFetch","t0","_ref2","_callee2","segmentId","segment","coords","d","_context2","find","s","parseInt","sample_file","coordinates","mapHandler","_this$state","parseFloat","flyTo","activity","segmentSearch","initMap","_this$state2","alert","_callee3","_context3","activitySamples","Activity","maxZoom","polylineOptions","weight","_x3","_this$state3","React","className","onChange","placeholder","BarLoader","onClick","addToMap","EditActivity","event","_this$setState","data","updated","preventDefault","loading","headers","body","JSON","stringify","window","location","href","url","json","error_message","defaultName","default_name","onSubmit","handleSubmit","autoFocus","required","handleChange","disabled","src","editIcon","_poll","poll","pollTimeout","setTimeout","reload","clearTimeout","ownKeys","enumerableOnly","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","_objectSpread","source","getOwnPropertyDescriptors","defineProperties","_slicedToArray","arr","Array","isArray","_arrayWithHoles","_i","_s","_e","_r","_arr","_n","_d","_iterableToArrayLimit","minLen","_arrayLikeToArray","n","toString","from","test","_unsupportedIterableToArray","_nonIterableRest","len","arr2","_useState2","useState","email","company","phone","formState","setFormState","_useState4","show","setShow","_useState6","setError","_useState8","processing","setProcessing","_useState10","feedback","setFeedback","useEffect","contact","message","htmlFor","brandsToChoose","_ref$style","style","setEmail","brand","selected","brands","setBrands","_useState12","some","compatibility_notification","checked","newBrands","_toConsumableArray","open","setOpen","tab","setTab","SuperPopup","modalTitle","onClose","py","access","text","monthlyPrice","monthly_price","yearlyPrice","yearly_price","yearlySaveText","yearly_save_text","signUpLink","sign_up_link","recurrence","setRecurrence","toggleRecurrence","AccessItem","lightswitch","CancelSubscription","cancelSubscriptionTrigger","document","querySelector","openTriggerClickListener","addEventListener","openModal","removeEventListener","closeModal","icon","icWarning","title","buttons","cancelSubscription","Celebration","URL","searchParams","Turbo","visit","action","Checkout","_componentDidMount","detail","replace","eventCallback","Paddle","close","types","trial_ended","subscribe","alwaysOpen","redirectTo","allowClose","setAllowClose","paddleTransaction","URLSearchParams","search","get","cookie","Cookies","trigger","expire","Date","getTime","set","expires","zIndex","TrialEnded","UndoCancelSubscription","undoCancellation","UpdatePaymentMethod","Subscribe","_document$head$queryS","_document$head$queryS2","paddleTransactionId","transaction_id","checkoutCompleted","recurringSubtotal","recurring_totals","subtotal","recurringTotal","total","recurringTax","tax","discount","totals","todayTotal","todaySubtotal","todayTax","currencyCode","currency_code","showPaymentForm","openCheckout","transactionId","polling","completed","checkoutPollTimeout","paddleMonthlyPrice","paddle_monthly_price","paddleYearlyPrice","paddle_yearly_price","paddleYearlySavedText","paddle_yearly_saved_text","paddleMonthlyDiscount","paddle_monthly_discount","paddleYearlyDiscount","paddle_yearly_discount","promoCode","promo_code","t1","settings","displayMode","theme","locale","frameTarget","frameInitialHeight","frameStyle","items","priceId","prices","quantity","discountId","paddle_discount_monthly_id","paddle_discount_yearly_id","customer","customer_id","address","countryCode","customer_country_code","month","head","content","year","goToPaymentInformation","amount","toFixed","recur","moment","add","maximum_recurring_intervals","format","DeleteAccount","success","deleteAccountTrigger","deleteAccount","GarminDeauthorize","deauthorize","PolarDeauthorize","avatar","avatar_text","avatar_theme","SuuntoDeauthorize","WahooDeauthorize","children","classes","challenge","segment_types","cities","Set","city","ContentContainer","challenge_type","includes","segment_type_id","SegmentType","typeIconUrl","segment_type_icon_url","distance_challenge_type_icon_url","distance_to_closest_challenge_segment_in_km","Math","floor","display_admin_label","created_by_current_user","podium","icContestants","contestants_count","to","size","icLocation","c","current_user","athletename","points","formatNumber","total_distance_in_meters","_","joined","joined_position","joined_athletename","joined_points","joined_total_distance","icArrow","Browse","page","currentPage","country","order","sport","locationLat","locationLng","allowLocation","history","replaceState","errorTitle","slim","matchMedia","matches","numPages","total_pages","challenges","list","scrollTo","top","getBoundingClientRect","scrollY","behavior","geoSupport","navigator","geolocation","countries","segmentTypes","locationLoading","getCurrentPosition","latitude","longitude","_this3","Splash","Item","Pagination","initialPage","onPaginate","_arrayWithoutHoles","_iterableToArray","_nonIterableSpread","CreateContest","description","challengeType","_this$props","edit","contest_id","contest","public","distance_challenge_type_id","distanceChallengeType","contest_segments_attributes","segment_id","destroySegments","_destroy","credentials","redirect_to","minToDate","isAfter","isSame","addNewSegments","_step","_iterator","_createForOfIteratorHelper","_loop","f","showSegmentFinder","clearAllBodyScrollLocks","exists","confirm","contest_segment_id","disableBodyScroll","segmentFinderRef","current","focusLock","on","focusLockRef","distanceChallengeTypes","distance_challenge_types","minFromDate","subtract","addTippys","off","icBack","min","onAddSegment","created_by_you","sport_icon_url","elevation","toggleSegmentFinder","role","ref","closeIcon","BrowseSegments","sectionSize","addSegmentsToContest","onAddSegmentToAddList","onAddSegmentsToList","newSegments","existingSegments","DistanceLeaderboard","contestants","fetchContestants","currentPositionButton","getAttribute","perPage","ceil","contestId","filterCountry","filterMonth","filterGender","initialFetched","gender","activitiesGroupedMonthly","monthly_grouped_activities","per_page","updatePodium","filtered","userId","podiumContestants","period_total_distance_in_meters","new_total_distance_in_meters","podiumPositionLabel","classList","remove","contestant","podiumPosition","pointsLabel","avatarImg","innerHTML","user","contains","img","createElement","appendChild","textElem","unfilledPodiumItems","IcDefaultAvatar","openFilter","closest","distance_challenge_type","user_id","contestMonths","contest_months","contestantCountries","contestant_countries","orderBy","countryFilter","monthFilter","genderFilter","reloadLeaderboard","handleClickOutsideFilter","goToPositionPage","Container","mnth","ProfilePicture","_activityMonth$users","_activityMonth$users$","activityMonth","m","distance","users","u","ExpandedContest","ContestSegmentsMap","mapSelector","seeCurrentLocation","mapProvider","addSegmentsToMap","unmount","Segment","FrontpageFeaturedMap","slug","InviteFriendsModal","openTrigger","Modal","InviteFriends","modal","emails","emailField","emailFieldRef","focus","outsideSkipButton","all","inviteEmail","challenge_id","stopPropagation","currentTarget","dataset","_ref3","clipboard","writeText","copied","icCompleted","onSubmitEmail","icProfile","removeEmail","icClose","copyToClipboard","icLink","class","inviteFriends","ContestShow","j","effort","contest_segment_efforts","cse","pos","tippyContent","formatDuration","duration","avg_power_watts","pace","power_watt_per_kg","completed_at","segment_effort_id","PointsScale","points_arr","defaultPoint","points_for_completing_segment_outside_points","firstColLength","round","firstCol","secondCol","icInfo","modalWidth","contentContainerClasses","ContestPopularMap","_segment$current_user","_segment$current_user2","postFix","formatPosition","current_user_segment_effort","SegmentLeaderboard","fetchEfforts","expanded","token","contestantId","efforts","contestant_id","findIndex","watt","w_kg","time","date","displayPace","challenger","icExpand","contestSegmentEfforts","columns","dataIndex","width","Table","expandable","expandRowByClick","onExpand","fetchHistory","emptyText","onRow","row","SegmentMap","alt","view","segmentView","expandMap","expandedMapRef","prevProps","prevState","expandMapEnabled","expandMapCallback","toggleView","closeMap","segmentPlural","contestantPlural","shareData","handleClick","share","plausibleEvent","icShare","SignUp","joinTrigger","joinResultElement","openInviteTrigger","click","signUpTrigger","join","Withdraw","withdraw","CookieBanner","setFullYear","getFullYear","fbq","triggerListener","deny","accept","_ref$contentContainer","_ref$modalWidth","_ref$zIndex","modalRef","useRef","enableBodyScroll","handleClose","_ref$loading","_ref$initialPage","ReactPaginate","breakLabel","nextLabel","onPageChange","forcePage","pageRangeDisplayed","pageCount","breakClassName","pageClassName","activeClassName","nextLinkClassName","previousLinkClassName","nextClassName","previousClassName","containerClassName","marginPagesDisplayed","previousLabel","Reports","_submitListener","reportableType","reportableId","submitListener","openReportModal","textarea","buttonListeners","bodyClickListener","submitting","reportable","reportable_type","reportable_id","v","allowArrayLike","it","F","normalCompletion","didErr","step","_e2","CreateSegments","_populateAltitude","customSegmentCallback","setup","setupRouting","createButton","populateAltitude","getRoutingSelection","drawFinished","routingSelection","attribution","tileSize","zoomOffset","accessToken","drawType","routingControl","router","mapbox","routeWhileDragging","route","geoJson","properties","geometry","lineChunk","units","features","coordsToLatLngs","flat","container","startBtn","destBtn","setLatLng","latlng","openOn","spliceWaypoints","closePopup","getWaypoints","editableLayers","addLayer","draw","toolbar","polyline","shapeOptions","polygon","circle","rectangle","marker","circlemarker","featureGroup","drawControl","Draw","addControl","Event","CREATED","EDITED","layer","layers","getLayers","getLatLngs","chunks","chunked","ch","response","chunk","encodeURIComponent","fetch","startPoint","stopPoint","label","btn","setAttribute","AdminCreateSegment","selection","selectionDistance","ctx","getContext","chart","destroy","chartData","labels","datasets","config","Chart","segmentTypeId","created","start_lat","start_lng","stop_lat","stop_lng","AdminCreateSegmentHandler","handleSelection","errors","handleChangeDrawType","segmentDistance","_ref$editor","editor","range","height","bottomOffset","svgWidth","setSvgWidth","setXFactor","setYFactor","polylinePoints","setPolylinePoints","maxX","setMaxX","maxY","setMaxY","_useState14","minY","setMinY","containerRef","useCallback","node","createPolyline","filterCoordinates","altitudes","totalPolylineDistance","coordinatesDistance","max","xFactor","yFactor","yOffset","currentDistanceCovered","polyPoints","y","pointA","point","pointB","distanceBetweenThisAndPrevious","x","viewBox","offset","stopColor","fill","stroke","onBoundsChange","setupBoundsListener","boundsListenerCallback","highlightSegment","unHighlightSegment","bounds","getBounds","currentZoom","getZoom","onlyShowDots","dotView","removeLayer","tooltip","startIconLayer","stopIconLayer","sId","splice","existingLayer","startIcon","iconUrl","segmentStartIcon","iconSize","iconAnchor","drawPolyline","permanent","stopIcon","setStyle","setIcon","func","delay","debounceTimer","searching","fetchByBounds","submitDebounced","debounce","fetchBySearch","hovering","minZoom","createdBy","created_by","highlight","hoverSegment","unhighlight","endHoverSegment","initialPosition","mapSpinner","refreshWindow","mounted","mapOptions","startLocation","BrowseSegmentsMap","PERMISSION_DENIED","windowFocusListener","_this$props$sectionSi","onSearchChange","onChangeCreatedBy","checkSegments","existingSegment","Elem","onMouseEnter","onMouseLeave","arrow","openInTab","Spinner","CreateSegment","activities","activityId","CreateSegmentHandler","selectControlEnabled","selectionCallback","validLength","selectionRange","setSelection","_ref4","_callee4","blob","coordinatesJsonFile","uploaded","signedId","_context4","getSelection","Selection","getSelectionGeoJson","GeoJSON","Blob","File","uploadFile","signed_id","activity_id","temp_coordinates_file","openedFromCreateChallenge","fetchCoordinates","fetchActivities","handleActivityChange","_this$state2$activiti","nudgeSelection","Slider","allowCross","onChangeSelectionSlider","railStyle","backgroundColor","trackStyle","handleStyle","border","toolTip","Altitude","SegmentShow","_ref$buttons","_ref$processing","_ref$py","button","xmlns","_asyncIterator","sync","retry","AsyncFromSyncIterator","AsyncFromSyncIteratorContinuation","r","ret","thr","ContestSegments","_addSegmentsToMap","removeSegmentLayers","_iteratorAbruptCompletion","_didIteratorError","_iteratorError","lBounds","_northEast","_southWest","latLngBounds","fitBounds","parsed","ok","arrayBuffer","Uint8Array","parse","pako","FitRead","file","callback","read","loadedFileData","reader","FileReader","readAsArrayBuffer","buffer","FitParser","force","speedUnit","temperatureUnit","elapsedRecordField","mode","fit","records","rec","position_lat","position_long","missingData","DirectUpload","durationInSeconds","durationInMilliseconds","FormatDuration","parts","split","plausible","addInitHook","GestureHandling","_ref$startLocation","_ref$startZoom","startZoom","_ref$maxZoom","_ref$mapSelector","_ref$selectControlEna","_ref$selectionCallbac","_ref$polylineOptions","_ref$expandMapEnabled","_ref$expandMapCallbac","_ref$seeCurrentLocati","_ref$drawType","_ref$mapProvider","gestureHandling","zoomControl","setView","attributionControl","setPrefix","selectControl","LineStringSelect","movingMarkerStyle","opacity","endpointStyle","selectionStyle","selectionData","startMarker","endMarker","startMarkerIcon","keyboard","endMarkerIcon","segmentEndIcon","calculateDistance","segmentInfoDistance","selectionListener","setFitFile","getPositionSuccess","getPositionError","getPositionErrorWatch","getPosition","handleOrientation","_selectionListener","_getPositionSuccess","_getPosition","toGeoJSON","logo","onAdd","div","Button","extend","onRemove","expandMapControl","customControl","positionControl","positionSpanControl","onclick","zoom","ride","endIcon","enable","feature","interactive","selectMeters","_selection","positionWatcher","watchPosition","DeviceOrientationEvent","requestPermission","orientationListener","positionMarker","_icon","orientationElement","transform","alpha","initialOrientation","html","startMarkerDistanceFromStartPercentage","endMarkerDistanceFromStartPercentage","firstPart","startMarkerDistanceFromStart","endMarkerDistanceFromStart","nudged","rangeUpdated","_startMarker","start","getLatLng","distanceTo","updateView","setMetaData","percentagesArray","end","flyToBounds","direction","distanceToNudge","clearWatch","querySelectorAll","el","elem","placement","tippyPlacement","allowHTML","onShow","Swal","animation","confirmButtonText","tippy"],"sourceRoot":""}