New site frontend updates, search, and general bug fixes

This commit is contained in:
2025-07-27 12:43:07 -06:00
parent c6a3ebbff3
commit 8fd5d798e1
239 changed files with 7586 additions and 5163 deletions

View File

@@ -111,7 +111,7 @@
<div data-md-component="skip">
<a href="#map-manual" class="md-skip">
<a href="#map-viewer-manual" class="md-skip">
Skip to content
</a>
@@ -1288,9 +1288,192 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#how-to-add-new-location-video" class="md-nav__link">
<a href="#1-logging-in" class="md-nav__link">
<span class="md-ellipsis">
How to add new location - Video
1. Logging In
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-viewing-the-map" class="md-nav__link">
<span class="md-ellipsis">
2. Viewing the Map
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-adding-a-new-location" class="md-nav__link">
<span class="md-ellipsis">
3. Adding a New Location
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-editing-or-deleting-a-location" class="md-nav__link">
<span class="md-ellipsis">
4. Editing or Deleting a Location
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#5-auto-refresh" class="md-nav__link">
<span class="md-ellipsis">
5. Auto-Refresh
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#6-map-start-location-boundaries" class="md-nav__link">
<span class="md-ellipsis">
6. Map Start Location &amp; Boundaries
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#7-walk-sheet-generator" class="md-nav__link">
<span class="md-ellipsis">
7. Walk Sheet Generator
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#8-qr-code-integration" class="md-nav__link">
<span class="md-ellipsis">
8. QR Code Integration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#9-volunteer-shift-management" class="md-nav__link">
<span class="md-ellipsis">
9. Volunteer Shift Management
</span>
</a>
<nav class="md-nav" aria-label="9. Volunteer Shift Management">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#for-all-users" class="md-nav__link">
<span class="md-ellipsis">
For All Users
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cancel-a-signup" class="md-nav__link">
<span class="md-ellipsis">
Cancel a Signup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#calendar-color-codes" class="md-nav__link">
<span class="md-ellipsis">
Calendar Color Codes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#10-admin-features" class="md-nav__link">
<span class="md-ellipsis">
10. Admin Features
</span>
</a>
<nav class="md-nav" aria-label="10. Admin Features">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#shift-management" class="md-nav__link">
<span class="md-ellipsis">
Shift Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#user-management" class="md-nav__link">
<span class="md-ellipsis">
User Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#map-start-location" class="md-nav__link">
<span class="md-ellipsis">
Map Start Location
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#walk-sheet-config" class="md-nav__link">
<span class="md-ellipsis">
Walk Sheet Config
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#11-troubleshooting" class="md-nav__link">
<span class="md-ellipsis">
11. Troubleshooting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#12-security-privacy" class="md-nav__link">
<span class="md-ellipsis">
12. Security &amp; Privacy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#13-support" class="md-nav__link">
<span class="md-ellipsis">
13. Support
</span>
</a>
@@ -1528,9 +1711,192 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#how-to-add-new-location-video" class="md-nav__link">
<a href="#1-logging-in" class="md-nav__link">
<span class="md-ellipsis">
How to add new location - Video
1. Logging In
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-viewing-the-map" class="md-nav__link">
<span class="md-ellipsis">
2. Viewing the Map
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-adding-a-new-location" class="md-nav__link">
<span class="md-ellipsis">
3. Adding a New Location
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-editing-or-deleting-a-location" class="md-nav__link">
<span class="md-ellipsis">
4. Editing or Deleting a Location
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#5-auto-refresh" class="md-nav__link">
<span class="md-ellipsis">
5. Auto-Refresh
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#6-map-start-location-boundaries" class="md-nav__link">
<span class="md-ellipsis">
6. Map Start Location &amp; Boundaries
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#7-walk-sheet-generator" class="md-nav__link">
<span class="md-ellipsis">
7. Walk Sheet Generator
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#8-qr-code-integration" class="md-nav__link">
<span class="md-ellipsis">
8. QR Code Integration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#9-volunteer-shift-management" class="md-nav__link">
<span class="md-ellipsis">
9. Volunteer Shift Management
</span>
</a>
<nav class="md-nav" aria-label="9. Volunteer Shift Management">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#for-all-users" class="md-nav__link">
<span class="md-ellipsis">
For All Users
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#cancel-a-signup" class="md-nav__link">
<span class="md-ellipsis">
Cancel a Signup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#calendar-color-codes" class="md-nav__link">
<span class="md-ellipsis">
Calendar Color Codes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#10-admin-features" class="md-nav__link">
<span class="md-ellipsis">
10. Admin Features
</span>
</a>
<nav class="md-nav" aria-label="10. Admin Features">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#shift-management" class="md-nav__link">
<span class="md-ellipsis">
Shift Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#user-management" class="md-nav__link">
<span class="md-ellipsis">
User Management
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#map-start-location" class="md-nav__link">
<span class="md-ellipsis">
Map Start Location
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#walk-sheet-config" class="md-nav__link">
<span class="md-ellipsis">
Walk Sheet Config
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#11-troubleshooting" class="md-nav__link">
<span class="md-ellipsis">
11. Troubleshooting
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#12-security-privacy" class="md-nav__link">
<span class="md-ellipsis">
12. Security &amp; Privacy
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#13-support" class="md-nav__link">
<span class="md-ellipsis">
13. Support
</span>
</a>
@@ -1552,22 +1918,129 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
<h1 id="map-manual">Map Manual<a class="headerlink" href="#map-manual" title="Permanent link">&para;</a></h1>
<p>Quick Tips: </p>
<h1 id="map-viewer-manual">Map Viewer Manual<a class="headerlink" href="#map-viewer-manual" title="Permanent link">&para;</a></h1>
<p>This manual provides step-by-step instructions for using the NocoDB Map Viewer web application. Each section covers a major feature with direct instructions. <em>(Insert screenshot - feature overview)</em></p>
<hr />
<h2 id="1-logging-in">1. Logging In<a class="headerlink" href="#1-logging-in" title="Permanent link">&para;</a></h2>
<ol>
<li>Go to the map site URL (e.g., http://localhost:3000).</li>
<li>Enter your email and password on the login page.</li>
<li>Click <strong>Login</strong>.</li>
<li>If you forget your password, contact an admin. <em>(Insert screenshot - login page)</em></li>
</ol>
<hr />
<h2 id="2-viewing-the-map">2. Viewing the Map<a class="headerlink" href="#2-viewing-the-map" title="Permanent link">&para;</a></h2>
<ol>
<li>After login, you will see the interactive map.</li>
<li>Use your mouse or touch to pan and zoom.</li>
<li>Your current location may be shown as a blue dot. <em>(Insert screenshot - main map view)</em></li>
</ol>
<hr />
<h2 id="3-adding-a-new-location">3. Adding a New Location<a class="headerlink" href="#3-adding-a-new-location" title="Permanent link">&para;</a></h2>
<ol>
<li>Click the <strong>Add Location</strong> button (usually a plus icon on the map).</li>
<li>Click on the map where you want to add the new location.</li>
<li>Fill out the form:</li>
<li>First Name, Last Name, Email, Phone, Unit Number, Support Level, Address, Sign, Sign Size, Notes.</li>
<li>Click <strong>Save</strong>.</li>
<li>The new location will appear as a marker on the map. <em>(Insert screenshot - add location form)</em></li>
</ol>
<hr />
<h2 id="4-editing-or-deleting-a-location">4. Editing or Deleting a Location<a class="headerlink" href="#4-editing-or-deleting-a-location" title="Permanent link">&para;</a></h2>
<ol>
<li>Click on a location marker.</li>
<li>In the popup, click <strong>Edit</strong> to update details, or <strong>Delete</strong> to remove the location.</li>
<li>Confirm your changes. <em>(Insert screenshot - location popup with edit/delete)</em></li>
</ol>
<hr />
<h2 id="5-auto-refresh">5. Auto-Refresh<a class="headerlink" href="#5-auto-refresh" title="Permanent link">&para;</a></h2>
<p>The map automatically refreshes every 30 seconds to show the latest data. <em>(Insert screenshot - refresh indicator)</em></p>
<hr />
<h2 id="6-map-start-location-boundaries">6. Map Start Location &amp; Boundaries<a class="headerlink" href="#6-map-start-location-boundaries" title="Permanent link">&para;</a></h2>
<ol>
<li>The map opens to the default start location (Edmonton, Canada, unless changed by admin).</li>
<li>Admins can set boundaries to restrict where points can be added. <em>(Insert screenshot - map boundaries)</em></li>
</ol>
<hr />
<h2 id="7-walk-sheet-generator">7. Walk Sheet Generator<a class="headerlink" href="#7-walk-sheet-generator" title="Permanent link">&para;</a></h2>
<ol>
<li>Go to the <strong>Walk Sheet</strong> section (usually in the admin panel).</li>
<li>Enter the title, subtitle, footer, and QR code info.</li>
<li>Click <strong>Generate</strong> to create a printable walk sheet.</li>
<li>Download or print the sheet. <em>(Insert screenshot - walk sheet generator)</em></li>
</ol>
<hr />
<h2 id="8-qr-code-integration">8. QR Code Integration<a class="headerlink" href="#8-qr-code-integration" title="Permanent link">&para;</a></h2>
<ol>
<li>QR codes can be added to walk sheets for quick access to digital resources.</li>
<li>Enter the URL and label for each QR code in the settings.</li>
<li>QR codes will appear on the generated walk sheet. <em>(Insert screenshot - QR code on walk sheet)</em></li>
</ol>
<hr />
<h2 id="9-volunteer-shift-management">9. Volunteer Shift Management<a class="headerlink" href="#9-volunteer-shift-management" title="Permanent link">&para;</a></h2>
<h3 id="for-all-users">For All Users<a class="headerlink" href="#for-all-users" title="Permanent link">&para;</a></h3>
<ol>
<li>Go to <strong>Shifts</strong> (http://localhost:3000/shifts.html).</li>
<li>View shifts in <strong>Grid</strong> or <strong>Calendar</strong> view.</li>
<li>Click a shift to see details.</li>
<li>Click <strong>Sign Up</strong> to join a shift.</li>
<li>Your signed-up shifts are shown at the top. <em>(Insert screenshot - shifts grid and calendar)</em></li>
</ol>
<h3 id="cancel-a-signup">Cancel a Signup<a class="headerlink" href="#cancel-a-signup" title="Permanent link">&para;</a></h3>
<ol>
<li>Click <strong>Cancel</strong> next to a shift you signed up for.</li>
<li>Confirm cancellation. <em>(Insert screenshot - cancel signup)</em></li>
</ol>
<h3 id="calendar-color-codes">Calendar Color Codes<a class="headerlink" href="#calendar-color-codes" title="Permanent link">&para;</a></h3>
<ul>
<li><strong>Data:</strong> Map works best when you clear your cookies, cache, and other data before use! This is because it is a web-app that pushes information to your phone. By clearing that data, you will always load the most recent version of the app to your browser. </li>
<li><strong>Browser:</strong> Map will work on nearly any browser however the developers test on Firefox, Brave, &amp; Chromium. Firefox is what the bnkops team uses to access Map and is generally the most stable. </li>
<li><strong>Green</strong>: Shifts you signed up for</li>
<li><strong>Blue</strong>: Available shifts</li>
<li><strong>Gray</strong>: Full shifts</li>
</ul>
<h2 id="how-to-add-new-location-video">How to add new location - Video<a class="headerlink" href="#how-to-add-new-location-video" title="Permanent link">&para;</a></h2>
<div style="position: relative; padding-top: 56.25%;">
<iframe
src="https://customer-1ebw5tv06sxrrq32.cloudflarestream.com/7e2477efc19c3e3182c76516cac573c6/iframe?poster=https%3A%2F%2Fcustomer-1ebw5tv06sxrrq32.cloudflarestream.com%2F7e2477efc19c3e3182c76516cac573c6%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600&title=Maps+Demo+1&logo=https%3A%2F%2Fbnkops.com%2Fimg%2Fbnkops-logo-purple.png&share-link=https%3A%2F%2Fcmlite.org%2F&channel-link=https%3A%2F%2Fcmlite.org%2F"
loading="lazy"
style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
</div>
<hr />
<h2 id="10-admin-features">10. Admin Features<a class="headerlink" href="#10-admin-features" title="Permanent link">&para;</a></h2>
<h3 id="shift-management">Shift Management<a class="headerlink" href="#shift-management" title="Permanent link">&para;</a></h3>
<ol>
<li>Go to <strong>Admin Panel</strong> (http://localhost:3000/admin.html).</li>
<li>Create, edit, or cancel shifts.</li>
<li>View all signups and manage volunteers. <em>(Insert screenshot - admin shift management)</em></li>
</ol>
<h3 id="user-management">User Management<a class="headerlink" href="#user-management" title="Permanent link">&para;</a></h3>
<ol>
<li>In the admin panel, go to <strong>User Management</strong>.</li>
<li>Add new users with email, password, and role (admin/user).</li>
<li>Delete users as needed. <em>(Insert screenshot - user management panel)</em></li>
</ol>
<h3 id="map-start-location">Map Start Location<a class="headerlink" href="#map-start-location" title="Permanent link">&para;</a></h3>
<ol>
<li>In the admin panel, go to <strong>Start Location</strong>.</li>
<li>Select coordinates and zoom level.</li>
<li>Save changes to update the map default. <em>(Insert screenshot - start location config)</em></li>
</ol>
<h3 id="walk-sheet-config">Walk Sheet Config<a class="headerlink" href="#walk-sheet-config" title="Permanent link">&para;</a></h3>
<ol>
<li>In the admin panel, go to <strong>Walk Sheet Config</strong>.</li>
<li>Edit walk sheet fields and QR codes.</li>
<li>Save to persist changes. <em>(Insert screenshot - walk sheet config panel)</em></li>
</ol>
<hr />
<h2 id="11-troubleshooting">11. Troubleshooting<a class="headerlink" href="#11-troubleshooting" title="Permanent link">&para;</a></h2>
<ul>
<li><strong>Locations not showing:</strong> Check that location data includes latitude/longitude and your API token has read permissions.</li>
<li><strong>Cannot add locations:</strong> Ensure your API token has write permissions and coordinates are valid.</li>
<li><strong>Connection errors:</strong> Verify NocoDB is accessible and API URL is correct.</li>
<li><strong>Build script issues:</strong> Make sure your NocoDB database is clean and API token has admin permissions.</li>
</ul>
<hr />
<h2 id="12-security-privacy">12. Security &amp; Privacy<a class="headerlink" href="#12-security-privacy" title="Permanent link">&para;</a></h2>
<ul>
<li>All API tokens are kept server-side only.</li>
<li>CORS and rate limiting are enabled.</li>
<li>Input validation and security headers are enforced.</li>
</ul>
<hr />
<h2 id="13-support">13. Support<a class="headerlink" href="#13-support" title="Permanent link">&para;</a></h2>
<p>For help, check the troubleshooting section, review NocoDB docs, or contact your admin. <em>(Insert screenshot - help section)</em></p>
@@ -1682,12 +2155,10 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
<div class="md-dialog__inner md-typeset"></div>
</div>
<div class="md-progress" data-md-component="progress" role="progressbar"></div>
<script id="__config" type="application/json">{"base": "../..", "features": ["announce.dismiss", "content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tooltips", "navigation.expand", "navigation.footer", "navigation.indexes", "navigation.instant", "navigation.instant.prefetch", "navigation.instant.progress", "navigation.path", "navigation.prune", "navigation.sections", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script id="__config" type="application/json">{"base": "../..", "features": ["announce.dismiss", "content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tooltips", "navigation.expand", "navigation.footer", "navigation.indexes", "navigation.path", "navigation.prune", "navigation.sections", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../assets/javascripts/bundle.56ea9cef.min.js"></script>