Merge branch 'feat_lights'

* feat_lights: style: disable dash and transparent, stronger line when lights off style: Show boundary and line together, combine geoData(only when not combine yet) feat: Lights on and off fix: yihong0618#566 fix a bug in track.py. (yihong0618#559) perf: split `activities.json` from index (yihong0618#552) # Conflicts: # src/components/RunMap/index.tsx
ben-29 · Dec 10, 2023 · 3fa6bc9 · 3fa6bc9
2 parents c0d8cc6 + a68eced
commit 3fa6bc9
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 22 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -24,8 +24,7 @@ RUN npm config set registry https://registry.npm.taobao.org \
 FROM develop-py AS data
 ARG app
 ARG nike_refresh_token
-ARG email
-ARG password
+ARG secret_string
 ARG client_id
 ARG client_secret
 ARG refresh_token
@@ -39,9 +38,9 @@ RUN DUMMY=${DUMMY}; \
   if [ "$app" = "NRC" ] ; then \
   python3 run_page/nike_sync.py ${nike_refresh_token}; \
   elif [ "$app" = "Garmin" ] ; then \
-  python3 run_page/garmin_sync.py ${email} ${password}; \
+  python3 run_page/garmin_sync.py ${secret_string} ; \
   elif [ "$app" = "Garmin-CN" ] ; then \
-  python3 run_page/garmin_sync.py ${email} ${password}  --is-cn ; \
+  python3 run_page/garmin_sync.py ${secret_string} --is-cn ; \
   elif [ "$app" = "Strava" ] ; then \
   python3 run_page/strava_sync.py ${client_id} ${client_secret} ${refresh_token};\
   elif [ "$app" = "Nike_to_Strava" ] ; then \

diff --git a/run_page/gpxtrackposter/track.py b/run_page/gpxtrackposter/track.py
@@ -111,8 +111,10 @@ def load_from_db(self, activity):
         self.start_time_local = start_time
         self.end_time = start_time + activity.elapsed_time
         self.length = float(activity.distance)
-        if not IGNORE_BEFORE_SAVING:
+        if IGNORE_BEFORE_SAVING:
             summary_polyline = filter_out(activity.summary_polyline)
+        else:
+            summary_polyline = activity.summary_polyline
         polyline_data = polyline.decode(summary_polyline) if summary_polyline else []
         self.polylines = [[s2.LatLng.from_degrees(p[0], p[1]) for p in polyline_data]]
         self.run_id = activity.run_id

diff --git a/src/components/RunMap/LightsControl.tsx 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 (
+        <div className={"mapboxgl-ctrl mapboxgl-ctrl-group  " + styles.lights}>
+          <button className={`${lights? styles.lightsOn : styles.lightsOff}`} onClick={() => setLights(!lights)}>
+            <span className="mapboxgl-ctrl-icon" aria-hidden="true"
+                  title={"Turn " + `${lights ? 'off' : 'on'}` + " the Light"}></span>
+          </button>
+        </div>
+  );
+};
+
+export default LightsControl;
diff --git a/src/components/RunMap/index.tsx b/src/components/RunMap/index.tsx
@@ -1,6 +1,6 @@
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
-import React, { useRef, useCallback } from 'react';
-import Map, { Layer, Source, FullscreenControl, NavigationControl, MapRef } from 'react-map-gl';
+import React, {useRef, useCallback, useState} from 'react';
+import Map, {Layer, Source, FullscreenControl, NavigationControl, MapRef} from 'react-map-gl';
 import useActivities from '@/hooks/useActivities';
 import {
   MAP_LAYER_LIST,
@@ -21,6 +21,7 @@ import styles from './style.module.scss';
 import { FeatureCollection } from 'geojson';
 import { RPGeometry } from '@/static/run_countries';
 import './mapbox.css';
+import LightsControl from "@/components/RunMap/LightsControl";
 
 interface IRunMapProps {
   title: string;
@@ -41,35 +42,59 @@ const RunMap = ({
 }: IRunMapProps) => {
   const { countries, provinces } = useActivities();
   const mapRef = useRef<MapRef>();
+  const [lights, setLights] = useState(true);
   const mapRefCallback = useCallback(
     (ref: MapRef) => {
       if (ref !== null) {
-        mapRef.current = ref;
         const map = ref.getMap();
-        if (map && IS_CHINESE) {
-          map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
-          if (!ROAD_LABEL_DISPLAY) {
-            // todo delete layers
-            map.on('load', () => {
+        if (map) {
+            map.addControl(new MapboxLanguage({defaultLanguage: 'zh-Hans'}));
+          }
+          map.on('load', () => {
+            if (!ROAD_LABEL_DISPLAY) {
+              // todo delete layers
               MAP_LAYER_LIST.forEach((layerId) => {
                 map.removeLayer(layerId);
               });
-            });
-          }
+            }
+            mapRef.current = ref;
+          });
+        }
+      if (mapRef.current) {
+        const map = mapRef.current.getMap();
+        if (map) {
+          const styleJson = map.getStyle();
+          const keepWhenLightsOff = ['runs2']
+          styleJson.layers.forEach(it => {
+              if (!keepWhenLightsOff.includes(it.id)) {
+                if (lights)
+                  map.setLayoutProperty(it.id, 'visibility', 'visible');
+                else
+                  map.setLayoutProperty(it.id, 'visibility', 'none');
+              }
+            }
+          )
         }
       }
     },
-    [mapRef]
+    [mapRef, lights]
   );
   const filterProvinces = provinces.slice();
   const filterCountries = countries.slice();
   // for geojson format
   filterProvinces.unshift('in', 'name');
   filterCountries.unshift('in', 'name');
 
+  const initGeoDataLength = geoData.features.length;
   const isBigMap = (viewState.zoom ?? 0) <= 3;
   if (isBigMap && IS_CHINESE) {
-    geoData = geoJsonForMap();
+    // Show boundary and line together, combine geoData(only when not combine yet)
+    if(geoData.features.length === initGeoDataLength){
+      geoData = {
+          "type": "FeatureCollection",
+          "features": geoData.features.concat(geoJsonForMap().features)
+      };
+    }
   }
 
   const isSingleRun =
@@ -84,7 +109,7 @@ const RunMap = ({
     [startLon, startLat] = points[0];
     [endLon, endLat] = points[points.length - 1];
   }
-  let dash = USE_DASH_LINE && !isSingleRun ? [2, 2] : [2, 0];
+  let dash = USE_DASH_LINE && !isSingleRun && !isBigMap ? [2, 2] : [2, 0];
   const onMove = React.useCallback(({ viewState }: {viewState: IViewState}) => {
     setViewState(viewState);
   }, []);
@@ -133,9 +158,9 @@ const RunMap = ({
           type="line"
           paint={{
             'line-color': ['get', 'color'],
-            'line-width': isBigMap ? 1 : 2,
+            'line-width': isBigMap && lights ? 1 : 2,
             'line-dasharray': dash,
-            'line-opacity': isSingleRun ? 1 : LINE_OPACITY,
+            'line-opacity': isSingleRun || isBigMap || !lights ? 1 : LINE_OPACITY,
             'line-blur': 1,
           }}
           layout={{
@@ -153,8 +178,9 @@ const RunMap = ({
         />
       )}
       <span className={styles.runTitle}>{title}</span>
-      <FullscreenControl style={fullscreenButton} />
-      <NavigationControl showCompass={false} position={'bottom-right'} style={{ opacity: 0.3 }} />
+      <FullscreenControl style={fullscreenButton}/>
+      <LightsControl setLights={setLights} lights={lights}/>
+      <NavigationControl showCompass={false} position={'bottom-right'} style={{opacity: 0.3}}/>
     </Map>
   );
 };

diff --git a/src/components/RunMap/style.module.scss b/src/components/RunMap/style.module.scss
@@ -41,3 +41,31 @@
   font-family: $global-font-family;
   cursor: pointer;
 }
+
+.lights {
+  position: absolute;
+  margin-top: 62px;
+  right: 20px;
+  opacity: 0.3;
+  width: 29px;
+  height: 38px;
+}
+
+
+.lightsOn {
+  height: 38px !important;
+  background-image: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' height='32px' viewBox='0 0 384 512'><style>svg%7Bfill%3A%23000000%7D<%2Fstyle><path d='M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z'/><%2Fsvg>");
+  margin-bottom: auto;
+  background-repeat: no-repeat;
+  background-position: center center;
+  opacity: 1;
+}
+
+.lightsOff {
+  height: 38px !important;
+  background-image: url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' height='32px' viewBox='0 0 384 512'><style>svg%7Bfill%3A%23000000%7D<%2Fstyle><path d='M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z'/><%2Fsvg>");
+  margin-bottom: auto;
+  background-repeat: no-repeat;
+  background-position: center center;
+  opacity: 1;
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -11,5 +11,14 @@ export default defineConfig({
   build: {
     manifest: true,
     outDir: './dist', // for user easy to use, vercel use default dir -> dist
+    rollupOptions: {
+      output: {
+        manualChunks: (id: string) => {
+          if (id.includes('activities')) {
+            return 'activities'
+          }
+        },
+      }
+    },
   },
 });