8842627401

Committed 26 Apr 2024 03:20AM UTC coverage: 39.836% (-0.4%) from 40.225%

Build # 8842627401

Build Type

push

github

Committed by

web-flow

Commit Message

Ah.more translations (#350)

* legend translations

* working: need to do add sites forms

* more translations

* locations message

* upload image tweaks

Run Details

232 of 876 branches covered (26.48%)

Branch coverage included in aggregate %.

3 of 23 new or added lines in 13 files covered. (13.04%)

16 existing lines in 6 files now uncovered.

1079 of 2415 relevant lines covered (44.68%)

11.21 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

2.13

/src/components/mapComponents/logic/init.ts

import {
  createNeighborhoodMarker,
  setBlocksStyle,
  setNeighborhoodsStyle,
  setPrivateStreetsStyle,
  setSitesStyle,
} from './style';
import {
  BlockGeoData,
  MapLayersAndListeners,
  MapViews,
  NeighborhoodGeoData,
  SiteGeoData,
} from '../ducks/types';
import {
  addHandleMapTypeChange,
  addHandleZoomChange,
  addTreePopupOnClick,
  addZoomToClickedNeighborhood,
  getImageSize,
} from './event';
import { BasicTreeInfo } from '../../treePopup';
import { message } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import { InitMapData } from '../ducks/types';
import { ALL_SITES_VISIBLE_COMBINED } from '../constants';
import { MapTypes, SetStateType } from '../../../context/types';
import { getActiveLanguage } from '../../../i18n/i18n';

// Logic for creating and setting up data layers/markers

/**
 * Creates the private streets layer and sets its initial style, returns the layer.
 * @param map the map to add the layer to
 * @param visible whether to initiate the layer as visible
 */
export function initPrivateStreets(
  map: google.maps.Map,
  visible: boolean,
): google.maps.Data {
  const privateStreetsLayer = new google.maps.Data({ map });
  // Loads the objects into the layer
  privateStreetsLayer.loadGeoJson(
    'https://raw.githubusercontent.com/florisdobber/SFTT-map-test/master/private_streets.json',
  );
  // Initially hide streets while the neighborhoods are shown
  setPrivateStreetsStyle(privateStreetsLayer, visible);
  return privateStreetsLayer;
}

/**
 * Creates the neighborhoods layer, adds the event listener for when a neighborhood is clicked, and
 * sets its initial style, returns the layer.
 * @param neighborhoods the neighborhood geo data
 * @param markersArray the array of markers to put the neighborhood name markers in
 * @param view the map view
 * @param map the map to add the layer to
 *  @param visible whether to initiate the layer as visible
 */
export function initNeighborhoods(
  neighborhoods: NeighborhoodGeoData,
  markersArray: google.maps.Marker[],
  view: MapViews,
  map: google.maps.Map,
  visible: boolean,
  mapTypeId: MapTypes,
): google.maps.Data {
  const neighborhoodsLayer = new google.maps.Data({ map });
  // Loads the objects into the layer
  neighborhoodsLayer.addGeoJson(neighborhoods);
  // Add a name marker to each neighborhood after the GeoJson loads
  neighborhoodsLayer.forEach((feature) => {
    const marker = createNeighborhoodMarker(feature, map, mapTypeId);
    markersArray.push(marker);
    marker.setMap(map);
  });
  // Sets the style of the layer, initially the neighborhoods are shown by themselves
  setNeighborhoodsStyle(neighborhoodsLayer, markersArray, visible, mapTypeId);
  // Adds the event listener
  addZoomToClickedNeighborhood(neighborhoodsLayer, view, map);
  return neighborhoodsLayer;
}

/**
 * Creates the blocks layer and sets its initial style, returns the layer.
 * @param blocks the blocks geo data
 * @param map the map to add the layer to
 *  @param visible whether to initiate the layer as visible
 */
export function initBlocks(
  blocks: BlockGeoData,
  map: google.maps.Map,
  visible: boolean,
): google.maps.Data {
  const blocksLayer = new google.maps.Data({ map });
  // Loads the objects into the layer
  blocksLayer.addGeoJson(blocks);
  // Sets the style of the layer, initially hidden while neighborhoods are shown
  setBlocksStyle(blocksLayer, visible);
  // todo add show reservation modal event listener
  return blocksLayer;
}

/**
 * Creates the sites layer, sets its initial style, and adds the event listener for when a site is clicked,
 * returns the layer.
 * @param sites the site geo data
 * @param visibleSites which sites are visible
 * @param setActiveTreeInfo the callback function to update the active tree info
 * @param popPopup the callback function to pop the popup at the location
 * @param map the map to add the layer to
 * @param zoomLevel the zoom level between 16 and 22 where zooming in increases zoom level
 * @param visible whether to initiate the layer as visible
 */
export function initSites(
  sites: SiteGeoData,
  visibleSites: CheckboxValueType[],
  setActiveTreeInfo: (value: BasicTreeInfo) => void,
  popPopup: (latLng: google.maps.LatLng) => void,
  map: google.maps.Map,
  zoomLevel: number,
  visible: boolean,
  mapTypeId: MapTypes,
): google.maps.Data {
  const sitesLayer = new google.maps.Data({ map });
  // Loads the objects into the layer
  sitesLayer.addGeoJson(sites);
  // Adds listener so tree popup appears when site clicked
  addTreePopupOnClick(sitesLayer, setActiveTreeInfo, popPopup);
  // Initially hidden while the neighborhoods are shown
  setSitesStyle(sitesLayer, visibleSites, zoomLevel, visible, mapTypeId);
  return sitesLayer;
}

const userLocationMessages: { [key: string]: string } = {
  en: 'Enable access to your location to display where you are on the map.',
  es: 'Enable access to your location to display where you are on the map.',
};

/**
 * Displays the user's location on the map, if the user has given permission.
 * @param map the map to show the location on
 */
export function initUserLocation(map: google.maps.Map): void {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const me = new google.maps.LatLng(
          pos.coords.latitude,
          pos.coords.longitude,
        );
        const userLocation = new google.maps.Marker({
          position: me,
          clickable: false,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 5,
            fillColor: 'blue',
            fillOpacity: 1,
            strokeWeight: 0,
          },
        });
        userLocation.setMap(map);
      },
      () => {
        message.info(userLocationMessages[getActiveLanguage()], 5).then();
      },
    );
  }
}

/**
 * Initializes map with view MapView.TREES.
 * @param mapData the map data to update
 * @param neighborhoods the neighborhood geo data
 * @param sites the site geo data
 */
export function initSiteView(
  mapData: InitMapData,
  neighborhoods: NeighborhoodGeoData,
  sites: SiteGeoData,
  setMapTypeId: SetStateType<MapTypes>,
): MapLayersAndListeners {
  const zoomedIn = mapData.zoom >= MapViews.TREES;

  const privateStreetsLayer = initPrivateStreets(mapData.map, false);
  const neighborhoodsLayer = initNeighborhoods(
    neighborhoods,
    mapData.markersArray,
    MapViews.TREES,
    mapData.map,
    !zoomedIn,
    mapData.mapTypeId,
  );
  const sitesLayer = initSites(
    sites,
    ALL_SITES_VISIBLE_COMBINED,
    mapData.setActiveTreeInfo,
    mapData.popPopup,
    mapData.map,
    getImageSize(mapData.zoom),
    zoomedIn,
    mapData.mapTypeId,
  );

  initUserLocation(mapData.map);

  const zoomListener = addHandleZoomChange(
    neighborhoodsLayer,
    mapData.markersArray,
    privateStreetsLayer,
    sitesLayer,
    sitesLayer,
    ALL_SITES_VISIBLE_COMBINED,
    MapViews.TREES,
    mapData.map,
  );

  const mapTypeListener = addHandleMapTypeChange(
    neighborhoodsLayer,
    mapData.markersArray,
    sitesLayer,
    ALL_SITES_VISIBLE_COMBINED,
    MapViews.TREES,
    mapData.map,
    setMapTypeId,
  );

  return {
    privateStreetsLayer,
    neighborhoodsLayer,
    sitesLayer,
    zoomListener,
    mapTypeListener,
  };
}

/**
 * Initializes map with view MapView.BLOCKS.
 * @param mapData the map data to update
 * @param neighborhoods the neighborhood geo data
 * @param blocks the blocks geo data
 */
export function initBlockView(
  mapData: InitMapData,
  neighborhoods: NeighborhoodGeoData,
  blocks: BlockGeoData,
  setMapTypeId: SetStateType<MapTypes>,
): MapLayersAndListeners {
  const zoomedIn = mapData.zoom >= MapViews.BLOCKS;

  const privateStreetsLayer = initPrivateStreets(mapData.map, true);
  const neighborhoodsLayer = initNeighborhoods(
    neighborhoods,
    mapData.markersArray,
    MapViews.BLOCKS,
    mapData.map,
    !zoomedIn,
    mapData.mapTypeId,
  );
  const blocksLayer = initBlocks(blocks, mapData.map, true);

  initUserLocation(mapData.map);

  const zoomListener = addHandleZoomChange(
    neighborhoodsLayer,
    mapData.markersArray,
    privateStreetsLayer,
    blocksLayer,
    blocksLayer,
    ALL_SITES_VISIBLE_COMBINED,
    MapViews.BLOCKS,
    mapData.map,
  );

  const mapTypeListener = addHandleMapTypeChange(
    neighborhoodsLayer,
    mapData.markersArray,
    blocksLayer,
    ALL_SITES_VISIBLE_COMBINED,
    MapViews.TREES,
    mapData.map,
    setMapTypeId,
  );

  return {
    privateStreetsLayer,
    neighborhoodsLayer,
    blocksLayer,
    zoomListener,
    mapTypeListener,
  };
}

1	import {
2	createNeighborhoodMarker,
3	setBlocksStyle,
4	setNeighborhoodsStyle,
5	setPrivateStreetsStyle,
6	setSitesStyle,
7	} from './style';
8	import {
9	BlockGeoData,
10	MapLayersAndListeners,
11	MapViews,
12	NeighborhoodGeoData,
13	SiteGeoData,
14	} from '../ducks/types';
15	import {
16	addHandleMapTypeChange,
17	addHandleZoomChange,
18	addTreePopupOnClick,
19	addZoomToClickedNeighborhood,
20	getImageSize,
21	} from './event';
22	import { BasicTreeInfo } from '../../treePopup';
23	import { message } from 'antd';
24	import { CheckboxValueType } from 'antd/es/checkbox/Group';
25	import { InitMapData } from '../ducks/types';
26	import { ALL_SITES_VISIBLE_COMBINED } from '../constants';
27	import { MapTypes, SetStateType } from '../../../context/types';
28	import { getActiveLanguage } from '../../../i18n/i18n';
29
30	// Logic for creating and setting up data layers/markers
31
32	/**
33	* Creates the private streets layer and sets its initial style, returns the layer.
34	* @param map the map to add the layer to
35	* @param visible whether to initiate the layer as visible
36	*/
37	export function initPrivateStreets(
38	map: google.maps.Map,
39	visible: boolean,
40	): google.maps.Data {
41	const privateStreetsLayer = new google.maps.Data({ map });	×
42	// Loads the objects into the layer
43	privateStreetsLayer.loadGeoJson(	×
44	'https://raw.githubusercontent.com/florisdobber/SFTT-map-test/master/private_streets.json',
45	);
46	// Initially hide streets while the neighborhoods are shown
47	setPrivateStreetsStyle(privateStreetsLayer, visible);	×
48	return privateStreetsLayer;	×
49	}
50
51	/**
52	* Creates the neighborhoods layer, adds the event listener for when a neighborhood is clicked, and
53	* sets its initial style, returns the layer.
54	* @param neighborhoods the neighborhood geo data
55	* @param markersArray the array of markers to put the neighborhood name markers in
56	* @param view the map view
57	* @param map the map to add the layer to
58	* @param visible whether to initiate the layer as visible
59	*/
60	export function initNeighborhoods(
61	neighborhoods: NeighborhoodGeoData,
62	markersArray: google.maps.Marker[],
63	view: MapViews,
64	map: google.maps.Map,
65	visible: boolean,
66	mapTypeId: MapTypes,
67	): google.maps.Data {
68	const neighborhoodsLayer = new google.maps.Data({ map });	×
69	// Loads the objects into the layer
70	neighborhoodsLayer.addGeoJson(neighborhoods);	×
71	// Add a name marker to each neighborhood after the GeoJson loads
72	neighborhoodsLayer.forEach((feature) => {	×
73	const marker = createNeighborhoodMarker(feature, map, mapTypeId);	×
74	markersArray.push(marker);	×
75	marker.setMap(map);	×
76	});
77	// Sets the style of the layer, initially the neighborhoods are shown by themselves
78	setNeighborhoodsStyle(neighborhoodsLayer, markersArray, visible, mapTypeId);	×
79	// Adds the event listener
80	addZoomToClickedNeighborhood(neighborhoodsLayer, view, map);	×
81	return neighborhoodsLayer;	×
82	}
83
84	/**
85	* Creates the blocks layer and sets its initial style, returns the layer.
86	* @param blocks the blocks geo data
87	* @param map the map to add the layer to
88	* @param visible whether to initiate the layer as visible
89	*/
90	export function initBlocks(
91	blocks: BlockGeoData,
92	map: google.maps.Map,
93	visible: boolean,
94	): google.maps.Data {
95	const blocksLayer = new google.maps.Data({ map });	×
96	// Loads the objects into the layer
97	blocksLayer.addGeoJson(blocks);	×
98	// Sets the style of the layer, initially hidden while neighborhoods are shown
99	setBlocksStyle(blocksLayer, visible);	×
100	// todo add show reservation modal event listener
101	return blocksLayer;	×
102	}
103
104	/**
105	* Creates the sites layer, sets its initial style, and adds the event listener for when a site is clicked,
106	* returns the layer.
107	* @param sites the site geo data
108	* @param visibleSites which sites are visible
109	* @param setActiveTreeInfo the callback function to update the active tree info
110	* @param popPopup the callback function to pop the popup at the location
111	* @param map the map to add the layer to
112	* @param zoomLevel the zoom level between 16 and 22 where zooming in increases zoom level
113	* @param visible whether to initiate the layer as visible
114	*/
115	export function initSites(
116	sites: SiteGeoData,
117	visibleSites: CheckboxValueType[],
118	setActiveTreeInfo: (value: BasicTreeInfo) => void,
119	popPopup: (latLng: google.maps.LatLng) => void,
120	map: google.maps.Map,
121	zoomLevel: number,
122	visible: boolean,
123	mapTypeId: MapTypes,
124	): google.maps.Data {
125	const sitesLayer = new google.maps.Data({ map });	×
126	// Loads the objects into the layer
127	sitesLayer.addGeoJson(sites);	×
128	// Adds listener so tree popup appears when site clicked
129	addTreePopupOnClick(sitesLayer, setActiveTreeInfo, popPopup);	×
130	// Initially hidden while the neighborhoods are shown
131	setSitesStyle(sitesLayer, visibleSites, zoomLevel, visible, mapTypeId);	×
132	return sitesLayer;	×
133	}
134
135	const userLocationMessages: { [key: string]: string } = {	12✔
136	en: 'Enable access to your location to display where you are on the map.',
137	es: 'Enable access to your location to display where you are on the map.',
138	};
139
140	/**
141	* Displays the user's location on the map, if the user has given permission.
142	* @param map the map to show the location on
143	*/
144	export function initUserLocation(map: google.maps.Map): void {
145	if (navigator.geolocation) {	×
146	navigator.geolocation.getCurrentPosition(	×
147	(pos) => {
148	const me = new google.maps.LatLng(	×
149	pos.coords.latitude,
150	pos.coords.longitude,
151	);
152	const userLocation = new google.maps.Marker({	×
153	position: me,
154	clickable: false,
155	icon: {
156	path: google.maps.SymbolPath.CIRCLE,
157	scale: 5,
158	fillColor: 'blue',
159	fillOpacity: 1,
160	strokeWeight: 0,
161	},
162	});
163	userLocation.setMap(map);	×
164	},
165	() => {
NEW 166	message.info(userLocationMessages[getActiveLanguage()], 5).then();	×
167	},
168	);
169	}
170	}
171
172	/**
173	* Initializes map with view MapView.TREES.
174	* @param mapData the map data to update
175	* @param neighborhoods the neighborhood geo data
176	* @param sites the site geo data
177	*/
178	export function initSiteView(
179	mapData: InitMapData,
180	neighborhoods: NeighborhoodGeoData,
181	sites: SiteGeoData,
182	setMapTypeId: SetStateType<MapTypes>,
183	): MapLayersAndListeners {
184	const zoomedIn = mapData.zoom >= MapViews.TREES;	×
185
186	const privateStreetsLayer = initPrivateStreets(mapData.map, false);	×
187	const neighborhoodsLayer = initNeighborhoods(	×
188	neighborhoods,
189	mapData.markersArray,
190	MapViews.TREES,
191	mapData.map,
192	!zoomedIn,
193	mapData.mapTypeId,
194	);
195	const sitesLayer = initSites(	×
196	sites,
197	ALL_SITES_VISIBLE_COMBINED,
198	mapData.setActiveTreeInfo,
199	mapData.popPopup,
200	mapData.map,
201	getImageSize(mapData.zoom),
202	zoomedIn,
203	mapData.mapTypeId,
204	);
205
206	initUserLocation(mapData.map);	×
207
208	const zoomListener = addHandleZoomChange(	×
209	neighborhoodsLayer,
210	mapData.markersArray,
211	privateStreetsLayer,
212	sitesLayer,
213	sitesLayer,
214	ALL_SITES_VISIBLE_COMBINED,
215	MapViews.TREES,
216	mapData.map,
217	);
218
219	const mapTypeListener = addHandleMapTypeChange(	×
220	neighborhoodsLayer,
221	mapData.markersArray,
222	sitesLayer,
223	ALL_SITES_VISIBLE_COMBINED,
224	MapViews.TREES,
225	mapData.map,
226	setMapTypeId,
227	);
228
229	return {	×
230	privateStreetsLayer,
231	neighborhoodsLayer,
232	sitesLayer,
233	zoomListener,
234	mapTypeListener,
235	};
236	}
237
238	/**
239	* Initializes map with view MapView.BLOCKS.
240	* @param mapData the map data to update
241	* @param neighborhoods the neighborhood geo data
242	* @param blocks the blocks geo data
243	*/
244	export function initBlockView(
245	mapData: InitMapData,
246	neighborhoods: NeighborhoodGeoData,
247	blocks: BlockGeoData,
248	setMapTypeId: SetStateType<MapTypes>,
249	): MapLayersAndListeners {
250	const zoomedIn = mapData.zoom >= MapViews.BLOCKS;	×
251
252	const privateStreetsLayer = initPrivateStreets(mapData.map, true);	×
253	const neighborhoodsLayer = initNeighborhoods(	×
254	neighborhoods,
255	mapData.markersArray,
256	MapViews.BLOCKS,
257	mapData.map,
258	!zoomedIn,
259	mapData.mapTypeId,
260	);
261	const blocksLayer = initBlocks(blocks, mapData.map, true);	×
262
263	initUserLocation(mapData.map);	×
264
265	const zoomListener = addHandleZoomChange(	×
266	neighborhoodsLayer,
267	mapData.markersArray,
268	privateStreetsLayer,
269	blocksLayer,
270	blocksLayer,
271	ALL_SITES_VISIBLE_COMBINED,
272	MapViews.BLOCKS,
273	mapData.map,
274	);
275
276	const mapTypeListener = addHandleMapTypeChange(	×
277	neighborhoodsLayer,
278	mapData.markersArray,
279	blocksLayer,
280	ALL_SITES_VISIBLE_COMBINED,
281	MapViews.TREES,
282	mapData.map,
283	setMapTypeId,
284	);
285
286	return {	×
287	privateStreetsLayer,
288	neighborhoodsLayer,
289	blocksLayer,
290	zoomListener,
291	mapTypeListener,
292	};
293	}

Code-4-Community / speak-for-the-trees-frontend / 8842627401

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous