resources/index.html at master · SuffolkLITLab/resources · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MA Resource Directory</title>

	<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="no" />
    <link rel="apple-touch-icon" href="images/icon_300.png"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="MA Resource Directory"/>
	<meta property="og:description" content="Use this directory to find local resources."/>
	<meta property="og:image" content="images/thefuture.png"/>

    <!-- Bootstrap CSS link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Your custom CSS -->
    <style>
        /* Add your custom styles here */
        .container {
            padding-top: 15px;
        }
        .header {
            background:#1d5791;
            color:white;
            padding-bottom: 15px;
            margin-bottom: 0px;
        }
        #tag-list {
            padding: 10px 0 0px 15px;
        }
        .descript {
            font-size: 14px;
            line-height: 1.5;
        }
        .descript.collapse {
            display: block;
            height: 42px !important;
            overflow: hidden;
        }
        .descript.collapse.show {
            display: block;
            height: max-content !important;
            overflow:auto;
        }
        .descript.collapsing {
            height: 42px !important;
        }
        .results {
            color:#7b8690;
        }
        .menu{
            background:#00376e;
            width:100%;
            padding:5px 15px 8px 15px;
            text-align: right;
            color:white;
        }
    </style>
</head>
<body>
        <div class="header">
            <div class="menu">
                <a href="https://docs.google.com/forms/d/e/1FAIpQLSd7nlK-ApcjI3MqtT72lMm_EqS21HKw_pRcvxVLdipo6GTsAg/viewform" target="_blank" style="color:white;">suggest a listing</a>
            </div>
            <div class="container">
                <h1>Massachusetts Resource Directory</h1>
                <p>
                    Use this directory to find local resources. This app was created by Suffolk University Law School's Legal Innovation & Technology Lab, Dismas House of Massachusetts, Inc., the Crime Justice Institute (CJI), and the Criminal Justice Task Force (CJTF) of Northeastern University School of Law, with financial support from The Shaw Foundation.

                    Resources are maintained by Dismas House and CJI. This list of resources is not exhaustive. <b><i>Do not rely on it as your only list of services.</i></b>
                </p>

                <div class="form-group">
                    <label for="region">Filter by region:</label>
                    <div id="container"></div>
                </div>

                <div class="form-group">
                    <a href="#" id="show-tags" class="btn btn-primary">Filter by service type(s)</a>
                    <div id="tag-list" style="display: none;">
                        <!-- List of all possible tags will be displayed here -->
                    </div>
                </div>

                <div class="form-group">
                    <label for="search">Narrow your results with additional filters on organization name or service type:</label>
                    <input type="text" id="search" class="form-control" placeholder="Enter a name or service type..." autocomplete="off">
                </div>

                <div class="form-check">
                    <p>
                        <input type="checkbox" class="form-check-input" id="use-location" autocomplete="off">
                        <label class="form-check-label" for="use-location">Use my location to sort results by distance</label>
                    </p>
                </div>
            </div>
        </div>
        <div class="container">
        <p class="results">
            <span id="sort" style="float:right;">Sort: Alphabetical</span>
            Results: <span id="results_n">?</span>
        </p>
        <div class="row" id="results">
            <!-- Search results will be displayed here -->
        </div>

        <p style="text-align: left;padding-bottom: 20px;"> <span style="float:right;"><a href="https://github.com/SuffolkLITLab/resources/tree/master" target="_blank">GitHub</a></span></p>
    </div>

    <!-- Bootstrap JS and your custom JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        // Load the data from the listings.js file
        function loadListings() {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'listings.js';
                script.onload = resolve;
                script.onerror = reject;
                document.body.appendChild(script);
            });
        }

        async function init() {
            await loadListings();

            function generateSelectWithOptions(itemList) {
                if (!Array.isArray(itemList) || itemList.length === 0) {
                    return null; // Return null if input is not a valid array
                }

                const selectElement = document.createElement("select");
                selectElement.id = 'region';
                selectElement.className = 'form-control';
                const optionElement = document.createElement("option");
                optionElement.value = "";
                optionElement.textContent = "All of Massachusetts";
                selectElement.appendChild(optionElement);

                itemList.forEach(item => {
                    const optionElement = document.createElement("option");
                    optionElement.value = item;
                    optionElement.textContent = item;
                    selectElement.appendChild(optionElement);
                });

                return selectElement;
            }

            const selectElement = generateSelectWithOptions(regions);

            // Assuming you have an element with an id "container" in your HTML
            document.getElementById("container").appendChild(selectElement);

            const searchInput = document.getElementById('search');
            const regionSelect = document.getElementById('region');
            const showTagsLink = document.getElementById('show-tags');
            const tagListContainer = document.getElementById('tag-list');
            const useLocationCheckbox = document.getElementById('use-location');
            const resultsContainer = document.getElementById('results');

            let userLocation = null;

            searchInput.addEventListener('input', updateResults);
            regionSelect.addEventListener('change', updateResults);
            showTagsLink.addEventListener('click', toggleTagList);
            useLocationCheckbox.addEventListener('change', getUserLocation);

            // Initialize tag list with checkboxes
            const tagList = document.createElement('ul');
            tagList.className = 'list-unstyled';
            const listItem = document.createElement('li');
            listItem.innerHTML = `
                <label>
                    <input id="checkAll" type="checkbox" value="ALL" class="tag-checkbox" oninput="$('.tag-checkbox').prop('checked', $(this).prop('checked')); " CHECKED> CHECK / UNCHEK ALL
                </label>
            `;
            tagList.appendChild(listItem);
            tags.forEach(tag => {
                const listItem = document.createElement('li');
                listItem.innerHTML = `
                    <label>
                        <input id="${tag.replace(/[^a-zA-Z0-9-]/g, '-')}" type="checkbox" value="${tag}" class="tag-checkbox" autocomplete="off" checked> ${tag}
                    </label>
                `;
                tagList.appendChild(listItem);
            });
            tagListContainer.appendChild(tagList);

            var allTags = document.getElementById("checkAll");
            allTags.addEventListener('input', updateResults);
            tags.forEach(tag => {
               var listItem = document.getElementById(tag.replace(/[^a-zA-Z0-9-]/g, '-'));
               listItem.addEventListener('input', updateResults);
            });

            function updateResults() {
                const searchText = searchInput.value.trim().toLowerCase();
                const selectedRegion = regionSelect.value;
                const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');

                const selectedTags = Array.from(checkboxes).map(checkbox => checkbox.value);
                var index = selectedTags.indexOf("ALL");
                //if (index !== -1) {
                //    selectedTags.splice(index, 1);
                //}

                const filteredListings = listings.filter(listing => {
                    return (
                        (listing.tags.some(tag => tag.toLowerCase().includes(searchText)) ||
                        listing.Name.toLowerCase().includes(searchText)) &&
                        (selectedRegion === '' || listing.Region === selectedRegion) &&
                        ((selectedTags.some(tag => listing.tags.includes(tag))) | ((listing.tags.length==0) && (selectedTags.includes("ALL"))))
                        //(selectedTags.length === 0 || selectedTags.some(tag => listing.tags.includes(tag)))
                    );
                });

                renderListings(filteredListings);
            }

            function renderListings(listings) {
                resultsContainer.innerHTML = '';
                document.getElementById("results_n").innerHTML = listings.length.toLocaleString("en-US");

                if (listings.length === 0) {
                    resultsContainer.innerHTML = '<p style="text-align:center;padding:05px;margin:0 auto 15px auto;"><b><i>No results found.</i></b></p>';
                }

                const sortedListings = sortListingsByDistance(listings);

                sortedListings.forEach(listing => {
                    const listingDiv = document.createElement('div');
                    listingDiv.className = 'col-md-6';
                    update_suggestion = "https://docs.google.com/forms/d/e/1FAIpQLSd7nlK-ApcjI3MqtT72lMm_EqS21HKw_pRcvxVLdipo6GTsAg/viewform?usp=pp_url&entry.352300017="+encodeURIComponent(listing.Name);

                    html = `
                        <div class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title">${listing.Name}</h5>
                                <p id="listing-${listing.Name.replace(/[^a-zA-Z0-9-]/g, '-')}" class="collapse descript">${listing.Description}</p>`;

                    tmp_distance = listing.distance;
                    if (tmp_distance<3000) {
                        tmp_distance = "~" + listing.distance.toFixed(2) + " miles"
                    } else if (tmp_distance>=3000) {
                        tmp_distance = "<i>unknown distance</i>"
                    } else {
                        tmp_distance = "N/A"
                    }
                    if (tmp_distance!="N/A") {
                    html += `
                                    <p><strong>Distance:</strong> ${tmp_distance} </br><strong>Address:</strong> ${listing.Address} (<a href="https://www.google.com/maps/place/${listing.Address}" target="_blank">map</a>)</p>
                                    `;
                    }
                    html += `
                                <a href="#" class="btn btn-primary expand-card" data-toggle="collapse" data-target="#listing-${listing.Name.replace(/[^a-zA-Z0-9-]/g, '-')}" aria-expanded="false" onClick="this.innerHTML = (this.innerHTML == 'Show More' ? 'Show Less' : 'Show More');">Show More</a>
                                <div id="listing-${listing.Name.replace(/[^a-zA-Z0-9-]/g, '-')}" class="collapse mt-3">`;
                    if (listing["Gender's Served"].length>0) {
                        update_suggestion += "&entry.891230517="+encodeURIComponent(listing["Gender's Served"].join(', '));
                        html += `
                                    <p><strong>Gender's Served:</strong> ${listing["Gender's Served"].join(', ')}</p>`;
                                }
                    if (!isNaN(listing["Minimum Age"]) && (listing["Minimum Age"]>0)) {
                        update_suggestion += "&entry.1808778417="+encodeURIComponent(listing["Minimum Age"]);
                        html += `
                                    <p><strong>Minimum Age:</strong> ${listing["Minimum Age"]}</p>`;
                                }
                    if (!isNaN(listing["Maximunm Age"]) && (listing["Maximunm Age"]<100)) {
                        update_suggestion += "&entry.2114366851="+encodeURIComponent(listing["Maximunm Age"]);
                        html += `
                                    <p><strong>Maximum Age:</strong> ${listing["Maximunm Age"]}</p>`;
                                }
                    if (listing.Region) {
                        html += `
                                    <p><strong>Region:</strong> ${listing.Region}</p>`;
                    }
                    if (listing.Address && tmp_distance=="N/A") {
                        update_suggestion += "&entry.916103888="+encodeURIComponent(listing.Address);
                        html += `
                                        <p><strong>Address:</strong> ${listing.Address} (<a href="https://www.google.com/maps/place/${listing.Address}" target="_blank">map</a>)</p>`;
                    }
                    if (listing.Website) {
                        update_suggestion += "&entry.437348566="+encodeURIComponent(listing.Website);
                        html += `
                                    <p><strong>Website:</strong> <a href="${listing.Website}" target="_blank">${listing.Website}</a></p>`;
                    }
                    if (listing.Email) {
                        update_suggestion += "&entry.743502768="+encodeURIComponent(listing.Email);
                        html += `
                                    <p><strong>Email:</strong> <a href="mailto:${listing.Email}">${listing.Email}</a></p>`;
                    }
                    if (listing.Email) {
                        update_suggestion += "&entry.1974416167="+encodeURIComponent(listing.Phone);
                        html += `
                                    <p><strong>Phone:</strong> ${listing.Phone}</p>`;
                    }
                    if (listing.tags.length>0) {
                        update_suggestion += "&entry.1181487868="+encodeURIComponent(listing.tags.join(', '));
                        html += `
                                    <p><strong>Tags:</strong> ${listing.tags.join(', ')}</p>`;
                    }

                    // Description
                    update_suggestion += "&entry.603641077="+encodeURIComponent(listing.Description);

                    html += `
                    <center>
                        - <a href="${update_suggestion}" target="_blank">Suggest Update</a> -
                    </center>
                                </div>
                            </div>
                        </div>
                    `;
                    listingDiv.innerHTML = html;
                    resultsContainer.appendChild(listingDiv);
                });
            }

            function sortListingsByDistance(listings) {

                if ((!userLocation) | (!document.getElementById('use-location').checked)) {
                    if (document.getElementById('use-location').checked) {
                        document.getElementById("sort").innerHTML = "UNABLE TO SORT BY DISTANCE";
                    } else {
                        document.getElementById("sort").innerHTML = "Sort: Alphabetical";
                    }
                    return listings;
                } else {
                    document.getElementById("sort").innerHTML = "Sorted by Distance";
                }

                return listings.map(listing => {
                    const distance = calculateDistance(userLocation, { latitude: listing.Latitude, longitude: listing.Longitude });
                    return { ...listing, distance };
                }).sort((a, b) => (a.distance || Infinity) - (b.distance || Infinity));

            }

            function calculateDistance(location1, location2) {
                // Simplified formula to calculate distance between two points using latitude and longitude
                const degToRad = (deg) => deg * (Math.PI / 180);
                const earthRadius = 6371; // Earth's radius in kilometers
                const latDiff = degToRad(location2.latitude - location1.latitude);
                const lonDiff = degToRad(location2.longitude - location1.longitude);
                const a =
                    Math.sin(latDiff / 2) * Math.sin(latDiff / 2) +
                    Math.cos(degToRad(location1.latitude)) * Math.cos(degToRad(location2.latitude)) *
                    Math.sin(lonDiff / 2) * Math.sin(lonDiff / 2);
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                const distance = earthRadius * c;
                return distance*0.621371 // convert to miles;
            }

            function getUserLocation() {
                if (useLocationCheckbox.checked) {
                    if ("geolocation" in navigator) {
                        navigator.geolocation.getCurrentPosition(
                            position => {
                                userLocation = {
                                    latitude: position.coords.latitude,
                                    longitude: position.coords.longitude
                                };
                                updateResults();
                            },
                            error => {
                                console.error(error);
                                useLocationCheckbox.checked = false;
                            }
                        );
                    } else {
                        console.log("Geolocation is not available in this browser.");
                        useLocationCheckbox.checked = false;
                    }
                } else {
                    userLocation = null;
                    updateResults();
                }
            }

            // Toggle tag list
            function toggleTagList() {
                if (tagListContainer.style.display === 'none') {
                    tagListContainer.style.display = 'block';
                } else {
                    tagListContainer.style.display = 'none';
                }
            }

            // Initial render with all listings
            renderListings(listings);
        }

        init();
    </script>


<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JTKXPN8331"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-JTKXPN8331');
</script>

</body>
</html>