https://www.kitepharma.com/Areas/Kite/Content/mapbox/assets/mapbox/js/list.js

1/**
2 * @file Get the closest centers to a geographic center and adds them to the centers list
3 */
4
5import { getDirections, getTravelTimes } from './mapbox.js';
6import { createElement, updateTemplate, getDistance } from './utilities.js';
7
8import { sortCenters } from './centers.js';
9
10export const statesByPostalCode = {
11	AL: 'Alabama',
12	AK: 'Alaska',
13	AZ: 'Arizona',
14	AR: 'Arkansas',
15	CA: 'California',
16	CO: 'Colorado',
17	CT: 'Connecticut',
18	DC: 'District of Columbia',
19	DE: 'Delaware',
20	FL: 'Florida',
21	GA: 'Georgia',
22	HI: 'Hawaii',
23	ID: 'Idaho',
24	IL: 'Illinois',
25	IN: 'Indiana',
26	IA: 'Iowa',
27	KS: 'Kansas',
28	KY: 'Kentucky',
29	LA: 'Louisiana',
30	ME: 'Maine',
31	MD: 'Maryland',
32	MA: 'Massachusetts',
33	MI: 'Michigan',
34	MN: 'Minnesota',
35	MS: 'Mississippi',
36	MO: 'Missouri',
37	MT: 'Montana',
38	NE: 'Nebraska',
39	NV: 'Nevada',
40	NH: 'New Hampshire',
41	NJ: 'New Jersey',
42	NM: 'New Mexico',
43	NY: 'New York',
44	NC: 'North Carolina',
45	ND: 'North Dakota',
46	OH: 'Ohio',
47	OK: 'Oklahoma',
48	OR: 'Oregon',
49	PA: 'Pennsylvania',
50	PR: 'Puerto Rico',
51	RI: 'Rhode Island',
52	SC: 'South Carolina',
53	SD: 'South Dakota',
54	TN: 'Tennessee',
55	TX: 'Texas',
56	UT: 'Utah',
57	VT: 'Vermont',
58	VA: 'Virginia',
59	WA: 'Washington',
60	WV: 'West Virginia',
61	WI: 'Wisconsin',
62	WY: 'Wyoming'
63};
64
65/**
66 *
67 * @param {Element} elementId	- ID of the element to add the centers to
68 * @param {Array} centers - Centers to add
69 * @param {Array} geographicCenter - Geographic center to sort the centers by
70 * @param {Function} onSelect - Function to call when a center is selected
71 */
72export async function updateCentersList(elementId, centers, geographicCenter, onSelect = () => {}) {
73	const sortedCenters = sortCenters(centers, geographicCenter);
74
75	centers = sortedCenters;
76
77	const container = document.getElementById('locator-list');
78	const navigation = document.getElementById('locator-list-navigation');
79
80	container.innerHTML = '';
81	navigation.innerHTML = '';
82
83	// Add distances to first results
84
85	let centersByState = {};
86	let lettersKey = {};
87
88	centers
89		.sort((a, b) => {
90			return a.name > b.name ? 1 : -1;
91		})
92		.forEach((center) => {
93			let key = statesByPostalCode[center.state];
94
95			if (!centersByState[key]) {
96				centersByState[key] = [];
97			}
98
99			let letter = key.charAt(0).toUpperCase();
100
101			if (!lettersKey[letter]) {
102				lettersKey[letter] = key;
103			}
104
105			centersByState[key].push(center);
106		});
107
108	// Add centers to the list
109	Object.entries(centersByState)
110		.sort((a, b) => {
111			return a[0] > b[0] ? 1 : -1;
112		})
113		.forEach(([state, centersInState]) => {
114			centersInState.sort((a, b) => {
115				return a.name > b.name ? 1 : -1;
116			});
117
118			let stateSlug = toSlug(state);
119
120			let stateName = `<h2 id='list-state-${stateSlug}'>${state}</h2>`;
121			let stateNameElement = createElement(stateName);
122
123			container.append(stateNameElement);
124
125			centersInState.forEach((center, index) => {
126				const template = updateTemplate(listCenterTemplate, {
127					...center
128				});
129
130				const element = createElement(template);
131
132				element.addEventListener('click', (e) => {
133					//Pass user flow
134					onSelect(center, 'centerName');
135				});
136
137				container.append(element);
138			});
139		});
140
141	// Add letter navigation
142	lettersKey = Object.entries(lettersKey)
143		.map(([letter, state]) => {
144			return {
145				letter,
146				state
147			};
148		})
149		.sort((a, b) => {
150			return a.letter > b.letter ? 1 : -1;
151		})
152		.forEach(({ letter, state }) => {
153			let stateSlug = toSlug(state);
154
155			const template = `<div class="locator__list__navigation__item">${letter}</div>`;
156
157			const element = createElement(template);
158
159			element.addEventListener('click', (e) => {
160				const stateElement = document.getElementById(`list-state-${stateSlug}`);
161
162				if (stateElement) {
163					stateElement.scrollIntoView({ behavior: 'smooth' });
164				}
165			});
166
167			navigation.append(element);
168		});
169}
170
171function toSlug(text) {
172	return text.toLowerCase().replace(/\s/g, '-');
173}