GPX
dataTCX
dataFIT
data
@@ -24,74 +35,82 @@ English | [简体中文](https://github.com/yihong0618/running_page/blob/master/
Running page runners
-| Runner | page | App |
-| ------------------------------------------------- | ---------------------------------------------- | --------- |
-| [zhubao315](https://github.com/zhubao315) |
+| Runner | page | App |
+| ------------------------------------------------- | ---------------------------------------------- | ----------- |
+| [zhubao315](https://github.com/zhubao315) |
> Note: If you don't want to make the data public, you can choose strava's fuzzy processing, or private repositories.
## Support
@@ -103,6 +122,7 @@ English | [简体中文](https://github.com/yihong0618/running_page/blob/master/
- **[GPX](#gpx)**
- **[TCX](#tcx)**
- **[FIT](#fit)**
+- **[Garmin-CN_to_Garmin(Sync Garmin-CN activities to Garmin Global)](#garmin-cn-to-garmin)**
- **[Nike_to_Strava(Using NRC Run, Strava backup data)](#nike_to_strava)**
- **[Tcx_to_Strava(upload all tcx data to strava)](#tcx_to_strava)**
- **[Gpx_to_Strava(upload all gpx data to strava)](#gpx_to_strava)**
@@ -113,60 +133,64 @@ English | [简体中文](https://github.com/yihong0618/running_page/blob/master/
Clone or fork the repo.
-```
+```bash
git clone https://github.com/yihong0618/running_page.git --depth=1
```
-## Installation and testing (node >= 12 and <= 14 python >= 3.7)
+## Installation and testing (node >= 16 python >= 3.8)
-```
+```bash
pip3 install -r requirements.txt
-yarn install
-yarn develop
+npm install -g corepack && corepack enable && pnpm install
+pnpm develop
```
-Open your browser and visit
+> If you use English please change `IS_CHINESE = false` in `src/utils/const.ts`
> Suggested changes to your own [Mapbox token](https://www.mapbox.com/)
-```javascript
+```typescript
const MAPBOX_TOKEN =
'pk.eyJ1IjoieWlob25nMDYxOCIsImEiOiJja2J3M28xbG4wYzl0MzJxZm0ya2Fua2p2In0.PNKfkeQwYuyGOTT_x9BJ4Q';
```
## Custom your page
-- Find `gatsby-config.js` in the repository directory, find the following content, and change it to what you want.
+- Find `src/static/site-metadata.ts` in the repository directory, find the following content, and change it to what you want.
-```javascript
+```typescript
siteMetadata: {
siteTitle: 'Running Page', #website title
siteUrl: 'https://yihong.run', #website url
@@ -185,43 +209,61 @@ siteMetadata: {
},
```
-- Modifying styling in `src/utils/const.js`
+- Modifying styling in `src/utils/const.ts`
-```javascript
+```typescript
// styling: set to `false` if you want to disable dash-line route
const USE_DASH_LINE = true;
// styling: route line opacity: [0, 1]
const LINE_OPACITY = 0.4;
+// styling: set to `true` if you want to display only the routes without showing the map
+// Note: This config only affects the page display; please refer to "privacy protection" below for data protection
+const PRIVACY_MODE = false;
+// styling: set to `false` if you want to make light off as default, only effect when `PRIVACY_MODE` = false
+const LIGHTS_ON = true;
```
-- privacy protection
+- To use Google Analytics, you need to modify the configuration in the `src/utils/const.ts` file.
-setting flowing env:
-```shell
-IGNORE_START_END_RANGE = 200 # ignore distance for each polyline start and end.
+```typescript
+const USE_GOOGLE_ANALYTICS = false;
+const GOOGLE_ANALYTICS_TRACKING_ID = '';
+```
+
+> privacy protection,setting flowing env:
+
+```bash
+# ignore distance for each polyline start and end.
+IGNORE_START_END_RANGE = 200
+
+# ignore meters for each point in below polyline.
+IGNORE_RANGE = 200
-IGNORE_RANGE = 200 # ignore meters for each point in below polyline.
-IGNORE_POLYLINE = ktjrFoemeU~IorGq}DeB # a polyline include point you want to ignore.
+# a polyline include point you want to ignore.
+IGNORE_POLYLINE = ktjrFoemeU~IorGq}DeB
# Do filter before saving to database, you will lose some data, but you can protect your privacy, when you using public repo. enable for set 1, disable via unset.
-IGNORE_BEFORE_SAVING =
+IGNORE_BEFORE_SAVING =
```
-You can using [this](https://developers.google.com/maps/documentation/utilities/polylineutility), to making your `IGNORE_POLYLINE`.
+You can using `Google map` [Interactive Polyline Encoder Utility
+](https://developers.google.com/maps/documentation/utilities/polylineutility), to making your `IGNORE_POLYLINE`.
+## Download your running data
-## Download your running data and do not forget to [generate svg in `total` page](#total-data-analysis)
+> Download your running data and do not forget to [generate svg in `total` page](#total-data-analysis)
### GPX
Make your
+
GPX
data
Copy all your gpx files to GPX_OUT or new gpx files
-```python
-python3(python) scripts/gpx_sync.py
+```bash
+python3(python) run_page/gpx_sync.py
```
Make your
+
TCX
data
Copy all your tcx files to TCX_OUT or new tcx files
-```python
-python3(python) scripts/tcx_sync.py
+```bash
+python3(python) run_page/tcx_sync.py
```
Make your
+
FIT
data
Copy all your tcx files to FIT_OUT or new fit files
-```python
-python3(python) scripts/fit_sync.py
+```bash
+python3(python) run_page/fit_sync.py
```
Get your
+
Garmin
data
-If you only want to sync `type running` add args --only-run
-If you only want `tcx` files add args --tcx
+- If you only want to sync `type running` add args --only-run
+- If you only want `tcx` files add args --tcx
+- If you only want `fit` files add args --fit
+- If you are using Garmin as a data source, it is recommended that you pull the code to your local environment to run and obtain the Garmin secret.
+ **The Python version must be >=3.8**
+
+#### Get Garmin Secret
-If you only want `fit` files add args --fit
+Enter the following command in the terminal
-```python
-python3(python) scripts/garmin_sync.py ${your email} ${your password}
+```bash
+# to get secret_string
+python3(python) run_page/get_garmin_secret.py ${your email} ${your password}
+```
+
+#### Execute Garmin Sync Script
+
+Copy the Secret output in the terminal,If you are using Github, please configure **GARMIN_SECRET_STRING** in `Github Action`.
+
+```bash
+# use this secret_string
+python3(python) run_page/garmin_sync.py ${secret_string}
```
example:
-```python
-python3(python) scripts/garmin_sync.py example@gmail.com example
+```bash
+python3(python) run_page/get_garmin_secret.py xxxxxxxxxxx
```
only-run:
-```python
-python3(python) scripts/garmin_sync.py example@gmail.com example --only-run
+```bash
+python3(python) run_page/garmin_sync.py xxxxxxxxxxxxxx(secret_string) --only-run
```
Get your
+
Garmin-CN
data
-If you only want to sync `type running` add args --only-run
-If you only want `tcx` files add args --tcx
+- If you only want to sync `type running` add args --only-run
+- If you only want `tcx` files add args --tcx
+- If you only want `fit` files add args --fit
+- If you are using Garmin as a data source, it is recommended that you pull the code to your local environment to run and obtain the Garmin secret.
+ **The Python version must be >=3.10**
-If you only want `fit` files add args --fit
+#### Get Garmin CN Secret
-```python
-python3(python) scripts/garmin_sync.py ${your email} ${your password} --is-cn
+Enter the following command in the terminal
+
+```bash
+# to get secret_string
+python3(python) run_page/get_garmin_secret.py ${your email} ${your password} --is-cn
```
+
+
+#### Execute Garmin CN Sync Script
+
+Copy the Secret output in the terminal,If you are using Github, please configure **GARMIN_SECRET_STRING_CN** in Github Action.
+
+
example:
-```python
-python3(python) scripts/garmin_sync.py example@gmail.com example --is-cn
+```bash
+python3(python) run_page/garmin_sync.py xxxxxxxxx(secret_string) --is-cn
+```
+
+only-run:
+
+```bash
+python3(python) run_page/garmin_sync.py xxxxxxxxxxxxxx(secret_string) --is-cn --only-run
+```
+
+ Sync your
+
+Garmin-CN
data to Garmin
+
+- If you only want to sync `type running` add args --only-run
+**The Python version must be >=3.10**
+
+#### Get Garmin CN Secret
+
+Enter the following command in the terminal
+
+```bash
+# to get secret_string
+python3(python) run_page/get_garmin_secret.py ${your email} ${your password} --is-cn
+```
+
+#### Get Garmin Secret
+
+Enter the following command in the terminal
+
+```bash
+# to get secret_string
+python3(python) run_page/get_garmin_secret.py ${your email} ${your password}
+```
+
+#### Sync Garmin CN to Garmin
+
+Enter the following command in the terminal
+
+```bash
+# to sync garmin-cn to garmin-global
+python3(python) run_page/garmin_sync_cn_global.py ${garmin_cn_secret_string} ${garmin_secret_string}
```
+
-
+1. Login from this [website](https://unite.nike.com/s3/unite/mobile.html?androidSDKVersion=3.1.0&corsoverride=https%3A%2F%2Funite.nike.com&uxid=com.nike.sport.running.droid.3.8&backendEnvironment=identity&view=login&clientId=VhAeafEGJ6G8e9DxRUz8iE50CZ9MiJMG), open F12 -> XHR -> get the `refresh_token` from login api.
+
+2. copy this `refresh_token` and use it in GitHub Secrets or in command line
3. Execute in the root directory:
-```python
-python3(python) scripts/nike_sync.py ${nike refresh_token}
+```bash
+python3(python) run_page/nike_sync.py ${nike refresh_token}
```
example:
-```python
-python3(python) scripts/nike_sync.py eyJhbGciThiMTItNGIw******
+```bash
+python3(python) run_page/nike_sync.py eyJhbGciThiMTItNGIw******
```

@@ -344,11 +464,11 @@ python3(python) scripts/nike_sync.py eyJhbGciThiMTItNGIw******
Get your
+
Strava
data
1. Sign in/Sign up [Strava](https://www.strava.com/) account
2. Open after successful Signin [Strava Developers](http://developers.strava.com) -> [Create & Manage Your App](https://strava.com/settings/api)
-
3. Create `My API Application`: Enter the following information
@@ -367,6 +487,12 @@ Created successfully:
https://www.strava.com/oauth/authorize?client_id=${your_id}&response_type=code&redirect_uri=http://localhost/exchange_token&approval_prompt=force&scope=read_all,profile:read_all,activity:read_all,profile:write,activity:write
```
+Example:
+
+```
+https://www.strava.com/oauth/authorize?client_id=115321&response_type=code&redirect_uri=http://localhost/exchange_token&approval_prompt=force&scope=read_all,profile:read_all,activity:read_all,profile:write,activity:write
+```
+

5. Get the `code` value in the link
@@ -375,13 +501,13 @@ https://www.strava.com/oauth/authorize?client_id=${your_id}&response_type=code&r
example:
-```
+```bash
http://localhost/exchange_token?state=&code=1dab37edd9970971fb502c9efdd087f4f3471e6e&scope=read,activity:write,activity:read_all,profile:write,profile:read_all,read_all
```
`code` value:
-```
+```bash
1dab37edd9970971fb502c9efdd087f4f3471e6
```
@@ -389,7 +515,7 @@ http://localhost/exchange_token?state=&code=1dab37edd9970971fb502c9efdd087f4f347
6. Use `Client_id`、`Client_secret`、`Code` get `refresh_token`: Execute in `Terminal/iTerm`
-```
+```bash
curl -X POST https://www.strava.com/oauth/token \
-F client_id=${Your Client ID} \
-F client_secret=${Your Client Secret} \
@@ -399,7 +525,7 @@ curl -X POST https://www.strava.com/oauth/token \
example:
-```
+```bash
curl -X POST https://www.strava.com/oauth/token \
-F client_id=12345 \
-F client_secret=b21******d0bfb377998ed1ac3b0 \
@@ -412,10 +538,10 @@ curl -X POST https://www.strava.com/oauth/token \
7. Sync `Strava` data
> The first time you synchronize Strava data you need to change line 12 of the code False to True in strava_sync.py, and then change it to False after it finishes running.
-If you only want to sync `type running` add args --only-run
+> If you only want to sync `type running` add args --only-run
-```python
-python3(python) scripts/strava_sync.py ${client_id} ${client_secret} ${refresh_token}
+```bash
+python3(python) run_page/strava_sync.py ${client_id} ${client_secret} ${refresh_token}
```
References:
@@ -437,16 +563,16 @@ References:
2. copy all your tcx files to TCX_OUT
3. Execute in the root directory:
-```python
-python3(python) scripts/tcx_to_strava_sync.py ${client_id} ${client_secret} ${strava_refresh_token}
+```bash
+python3(python) run_page/tcx_to_strava_sync.py ${client_id} ${client_secret} ${strava_refresh_token}
```
example:
-```python
-python3(python) scripts/tcx_to_strava_sync.py xxx xxx xxx
+```bash
+python3(python) run_page/tcx_to_strava_sync.py xxx xxx xxx
or
-python3(python) scripts/tcx_to_strava_sync.py xxx xxx xxx --all
+python3(python) run_page/tcx_to_strava_sync.py xxx xxx xxx --all
```
4. if you want to all files add args `--all`
@@ -464,16 +590,16 @@ python3(python) scripts/tcx_to_strava_sync.py xxx xxx xxx --all
2. copy all your gpx files to GPX_OUT
3. Execute in the root directory:
-```python
-python3(python) scripts/gpx_to_strava_sync.py ${client_id} ${client_secret} ${strava_refresh_token}
+```bash
+python3(python) run_page/gpx_to_strava_sync.py ${client_id} ${client_secret} ${strava_refresh_token}
```
example:
-```python
-python3(python) scripts/gpx_to_strava_sync.py xxx xxx xxx
+```bash
+python3(python) run_page/gpx_to_strava_sync.py xxx xxx xxx
or
-python3(python) scripts/tcx_to_strava_sync.py xxx xxx xxx --all
+python3(python) run_page/tcx_to_strava_sync.py xxx xxx xxx --all
```
4. if you want to all files add args `--all`
@@ -490,14 +616,14 @@ python3(python) scripts/tcx_to_strava_sync.py xxx xxx xxx --all
1. follow the nike and strava steps
2. Execute in the root directory:
-```python
-python3(python) scripts/nike_to_strava_sync.py ${nike_refresh_token} ${client_id} ${client_secret} ${strava_refresh_token}
+```bash
+python3(python) run_page/nike_to_strava_sync.py ${nike_refresh_token} ${client_id} ${client_secret} ${strava_refresh_token}
```
example:
-```python
-python3(python) scripts/nike_to_strava_sync.py eyJhbGciThiMTItNGIw****** xxx xxx xxx
+```bash
+python3(python) run_page/nike_to_strava_sync.py eyJhbGciThiMTItNGIw****** xxx xxx xxx
```
-1. finish garmin and strava setps
+1. finish garmin and strava setup
2. Execute in the root directory:
-```python
-python3(python) scripts/garmin_to_strava_sync.py ${client_id} ${client_secret} ${strava_refresh_token} ${garmin_email} ${garmin_password} --is-cn
+```bash
+python3(python) run_page/garmin_to_strava_sync.py ${client_id} ${client_secret} ${strava_refresh_token} ${garmin_secret_string} --is-cn
```
e.g.
-```python
-python3(python) scripts/garmin_to_strava_sync.py xxx xxx xxx xx xxx
+```bash
+python3(python) run_page/garmin_to_strava_sync.py xxx xxx xxx xx
```
Vercel
to deploy Cloudflare
to deploy GitHub Actions
iOS Shortcuts
{CHINESE_LOCATION_INFO_MESSAGE_FIRST} diff --git a/src/components/RunMap/LightsControl.tsx b/src/components/RunMap/LightsControl.tsx new file mode 100644 index 00000000000..b37360664cb --- /dev/null +++ b/src/components/RunMap/LightsControl.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import styles from './style.module.scss'; + +interface ILightsProps { + setLights: (_lights: boolean) => void; + lights: boolean; +} + +const LightsControl = ({ setLights, lights }: ILightsProps) => { + + return ( +