ben
17dd3c9bdb
Replace single trainer list with a tabbed sidebar interface: - Three tabs with dynamic counts for each category - Venue cards with icon, name, location, and upcoming events count - Event cards with date badge, title, venue, and cost - Visibility toggles moved from map overlay to sidebar header - Context-aware search placeholder based on active tab - Client-side filtering for instant search results - Info button and modal with usage instructions and map legend - Keyboard navigation for tabs (arrow keys) - All lists sync with map viewport on pan/zoom Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
409 lines
20 KiB
PHP
409 lines
20 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: Find Training
|
|
*
|
|
* Google Maps-style full-screen layout with left sidebar panel
|
|
* for trainer directory and compact filter toolbar.
|
|
*
|
|
* @package HVAC_Community_Events
|
|
* @since 2.2.0
|
|
*/
|
|
|
|
defined('ABSPATH') || exit;
|
|
define('HVAC_IN_PAGE_TEMPLATE', true);
|
|
|
|
get_header();
|
|
|
|
// Get page handler instance
|
|
$find_training = HVAC_Find_Training_Page::get_instance();
|
|
$filter_options = $find_training->get_filter_options();
|
|
$api_key_configured = $find_training->is_api_key_configured();
|
|
?>
|
|
|
|
<div class="hvac-find-training-page">
|
|
<!-- Skip link for accessibility -->
|
|
<a href="#hvac-trainer-grid" class="hvac-skip-link">Skip to trainer results</a>
|
|
|
|
<!-- Compact Filter Bar -->
|
|
<div class="hvac-filter-bar" role="search" aria-label="Filter trainers and venues">
|
|
<div class="hvac-filter-bar-inner">
|
|
<!-- Search -->
|
|
<div class="hvac-filter-item hvac-filter-search">
|
|
<span class="dashicons dashicons-search" aria-hidden="true"></span>
|
|
<input type="text" id="hvac-training-search" placeholder="Search trainers..." aria-label="Search trainers">
|
|
</div>
|
|
|
|
<!-- Info Button -->
|
|
<button type="button" id="hvac-info-btn" class="hvac-info-btn" aria-label="How to use this page">
|
|
<span class="dashicons dashicons-info-outline" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<!-- Filter Dropdowns (hidden on mobile, shown in panel) -->
|
|
<div class="hvac-filter-dropdowns">
|
|
<select id="hvac-filter-state" class="hvac-filter-select" aria-label="Filter by state">
|
|
<option value="">All States</option>
|
|
<?php foreach ($filter_options['states'] as $state): ?>
|
|
<option value="<?php echo esc_attr($state); ?>"><?php echo esc_html($state); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
|
|
<select id="hvac-filter-certification" class="hvac-filter-select" aria-label="Filter by certification">
|
|
<option value="">All Certifications</option>
|
|
<?php foreach ($filter_options['certifications'] as $cert): ?>
|
|
<option value="<?php echo esc_attr($cert); ?>"><?php echo esc_html($cert); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
|
|
<select id="hvac-filter-format" class="hvac-filter-select" aria-label="Filter by training format">
|
|
<option value="">All Formats</option>
|
|
<?php foreach ($filter_options['training_formats'] as $format): ?>
|
|
<option value="<?php echo esc_attr($format); ?>"><?php echo esc_html($format); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Near Me Button -->
|
|
<button type="button" id="hvac-near-me-btn" class="hvac-near-me-btn">
|
|
<span class="dashicons dashicons-location-alt" aria-hidden="true"></span>
|
|
<span class="hvac-btn-text">Near Me</span>
|
|
</button>
|
|
|
|
<!-- Include Past Events Checkbox -->
|
|
<label class="hvac-filter-checkbox">
|
|
<input type="checkbox" id="hvac-include-past">
|
|
<span>Include Past</span>
|
|
</label>
|
|
|
|
<!-- Clear Filters -->
|
|
<button type="button" class="hvac-clear-filters" style="display: none;">
|
|
Clear
|
|
</button>
|
|
|
|
<!-- Mobile Filter Toggle -->
|
|
<button type="button"
|
|
class="hvac-mobile-filter-toggle"
|
|
aria-expanded="false"
|
|
aria-controls="hvac-mobile-filter-panel">
|
|
<span class="dashicons dashicons-filter" aria-hidden="true"></span>
|
|
<span class="hvac-btn-text">Filters</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Active Filters Chips -->
|
|
<div class="hvac-active-filters" aria-live="polite"></div>
|
|
|
|
<!-- Mobile Filter Panel (hidden by default) -->
|
|
<div id="hvac-mobile-filter-panel" class="hvac-mobile-filter-panel" hidden>
|
|
<div class="hvac-mobile-filter-group">
|
|
<label for="hvac-filter-state-mobile">State / Province</label>
|
|
<select id="hvac-filter-state-mobile" class="hvac-filter-select" aria-label="Filter by state">
|
|
<option value="">All States</option>
|
|
<?php foreach ($filter_options['states'] as $state): ?>
|
|
<option value="<?php echo esc_attr($state); ?>"><?php echo esc_html($state); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="hvac-mobile-filter-group">
|
|
<label for="hvac-filter-certification-mobile">Certification</label>
|
|
<select id="hvac-filter-certification-mobile" class="hvac-filter-select" aria-label="Filter by certification">
|
|
<option value="">All Certifications</option>
|
|
<?php foreach ($filter_options['certifications'] as $cert): ?>
|
|
<option value="<?php echo esc_attr($cert); ?>"><?php echo esc_html($cert); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="hvac-mobile-filter-group">
|
|
<label for="hvac-filter-format-mobile">Training Format</label>
|
|
<select id="hvac-filter-format-mobile" class="hvac-filter-select" aria-label="Filter by training format">
|
|
<option value="">All Formats</option>
|
|
<?php foreach ($filter_options['training_formats'] as $format): ?>
|
|
<option value="<?php echo esc_attr($format); ?>"><?php echo esc_html($format); ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="hvac-mobile-filter-group">
|
|
<label class="hvac-filter-checkbox">
|
|
<input type="checkbox" id="hvac-include-past-mobile">
|
|
<span>Include Past Events</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content: Sidebar + Map -->
|
|
<div class="hvac-map-layout">
|
|
<!-- Left Sidebar -->
|
|
<aside class="hvac-sidebar" role="region" aria-label="Training directory">
|
|
<div class="hvac-sidebar-header">
|
|
<!-- Tab Navigation -->
|
|
<div class="hvac-sidebar-tabs" role="tablist" aria-label="Browse by category">
|
|
<button role="tab" class="hvac-tab active" data-tab="trainers" aria-selected="true" aria-controls="hvac-panel-trainers">
|
|
Trainers (<span data-count="trainers">0</span>)
|
|
</button>
|
|
<button role="tab" class="hvac-tab" data-tab="venues" aria-selected="false" aria-controls="hvac-panel-venues">
|
|
Venues (<span data-count="venues">0</span>)
|
|
</button>
|
|
<button role="tab" class="hvac-tab" data-tab="events" aria-selected="false" aria-controls="hvac-panel-events">
|
|
Events (<span data-count="events">0</span>)
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Visibility Toggles (moved from map overlay) -->
|
|
<div class="hvac-visibility-toggles">
|
|
<label class="hvac-visibility-toggle" title="Show trainers on map">
|
|
<input type="checkbox" id="hvac-show-trainers" checked>
|
|
<span class="hvac-toggle-dot hvac-toggle-trainer"></span>
|
|
</label>
|
|
<label class="hvac-visibility-toggle" title="Show venues on map">
|
|
<input type="checkbox" id="hvac-show-venues" checked>
|
|
<span class="hvac-toggle-dot hvac-toggle-venue"></span>
|
|
</label>
|
|
<label class="hvac-visibility-toggle" title="Show events on map">
|
|
<input type="checkbox" id="hvac-show-events" checked>
|
|
<span class="hvac-toggle-dot hvac-toggle-event"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Mobile collapse toggle -->
|
|
<button type="button"
|
|
class="hvac-sidebar-toggle"
|
|
aria-expanded="true"
|
|
aria-controls="hvac-sidebar-content"
|
|
aria-label="Toggle directory list">
|
|
<span class="dashicons dashicons-arrow-down-alt2" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="hvac-sidebar-content" class="hvac-sidebar-content">
|
|
<!-- Trainers Panel -->
|
|
<div role="tabpanel" id="hvac-panel-trainers" class="hvac-tab-panel active" aria-labelledby="tab-trainers">
|
|
<div id="hvac-trainer-grid" class="hvac-item-list">
|
|
<div class="hvac-grid-loading">
|
|
<span class="dashicons dashicons-update-alt hvac-spin" aria-hidden="true"></span>
|
|
Loading trainers...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Venues Panel -->
|
|
<div role="tabpanel" id="hvac-panel-venues" class="hvac-tab-panel" aria-labelledby="tab-venues" hidden>
|
|
<div id="hvac-venue-grid" class="hvac-item-list"></div>
|
|
</div>
|
|
|
|
<!-- Events Panel -->
|
|
<div role="tabpanel" id="hvac-panel-events" class="hvac-tab-panel" aria-labelledby="tab-events" hidden>
|
|
<div id="hvac-event-grid" class="hvac-item-list"></div>
|
|
</div>
|
|
|
|
<!-- Load More Button -->
|
|
<div class="hvac-load-more-wrapper" style="display: none;">
|
|
<button type="button" id="hvac-load-more" class="hvac-btn-secondary">
|
|
Load More
|
|
</button>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="hvac-sidebar-cta">
|
|
<p>Want to be listed in our directory?</p>
|
|
<a href="<?php echo esc_url(site_url('/trainer/registration/')); ?>" class="hvac-btn-primary hvac-btn-small">
|
|
Become A Trainer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Map Container -->
|
|
<div class="hvac-map-container" role="region" aria-label="Training locations map">
|
|
<div id="hvac-training-map" class="hvac-google-map">
|
|
<?php if (!$api_key_configured): ?>
|
|
<div class="hvac-map-error">
|
|
<span class="dashicons dashicons-warning" aria-hidden="true"></span>
|
|
<p><strong>Map Configuration Required</strong></p>
|
|
<p>The Google Maps API key is not configured. <?php if (current_user_can('manage_options')): ?>Please configure it in <a href="<?php echo admin_url('admin.php?page=hvac-trainer-profile-settings'); ?>">Trainer Profile Settings</a>.<?php else: ?>Please contact the site administrator.<?php endif; ?></p>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="hvac-map-loading">
|
|
<span class="dashicons dashicons-location" aria-hidden="true"></span>
|
|
<p>Loading map...</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Map Legend Overlay -->
|
|
<div class="hvac-map-legend">
|
|
<div class="hvac-legend-item">
|
|
<span class="hvac-legend-marker hvac-legend-trainer" aria-hidden="true"></span>
|
|
<span>Trainer</span>
|
|
</div>
|
|
<div class="hvac-legend-item">
|
|
<span class="hvac-legend-marker hvac-legend-venue" aria-hidden="true"></span>
|
|
<span>Venue</span>
|
|
</div>
|
|
<div class="hvac-legend-item">
|
|
<span class="hvac-legend-marker hvac-legend-event" aria-hidden="true"></span>
|
|
<span>Event</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trainer Profile Modal -->
|
|
<div id="hvac-trainer-modal" class="hvac-training-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="trainer-modal-title">
|
|
<div class="hvac-modal-overlay"></div>
|
|
<div class="hvac-modal-content">
|
|
<div class="hvac-modal-loading">
|
|
<span class="dashicons dashicons-update-alt hvac-spin" aria-hidden="true"></span>
|
|
Loading...
|
|
</div>
|
|
<div class="hvac-modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Venue Info Modal -->
|
|
<div id="hvac-venue-modal" class="hvac-training-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="venue-modal-title">
|
|
<div class="hvac-modal-overlay"></div>
|
|
<div class="hvac-modal-content hvac-venue-modal-content">
|
|
<div class="hvac-venue-modal-header">
|
|
<h2 id="venue-modal-title"></h2>
|
|
<button class="hvac-modal-close" aria-label="Close modal">×</button>
|
|
</div>
|
|
<div class="hvac-venue-modal-body">
|
|
<p class="hvac-venue-address"></p>
|
|
<p class="hvac-venue-phone"></p>
|
|
<p class="hvac-venue-capacity"></p>
|
|
|
|
<div class="hvac-venue-description"></div>
|
|
|
|
<!-- Equipment Badges -->
|
|
<div class="hvac-venue-equipment" style="display: none;">
|
|
<h4>Equipment</h4>
|
|
<div class="hvac-badge-list hvac-equipment-badges"></div>
|
|
</div>
|
|
|
|
<!-- Amenities Badges -->
|
|
<div class="hvac-venue-amenities" style="display: none;">
|
|
<h4>Amenities</h4>
|
|
<div class="hvac-badge-list hvac-amenities-badges"></div>
|
|
</div>
|
|
|
|
<!-- Upcoming Events -->
|
|
<div class="hvac-venue-events">
|
|
<h4>Upcoming Events</h4>
|
|
<ul class="hvac-venue-events-list"></ul>
|
|
<p class="hvac-venue-no-events" style="display: none;">No upcoming events scheduled.</p>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="hvac-venue-actions">
|
|
<a href="#" class="hvac-venue-directions hvac-btn-secondary" target="_blank" rel="noopener">
|
|
<span class="dashicons dashicons-location" aria-hidden="true"></span>
|
|
Get Directions
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Contact Form -->
|
|
<div class="hvac-venue-contact-section">
|
|
<h4>Contact This Training Lab</h4>
|
|
<form class="hvac-venue-contact-form" data-venue-id="">
|
|
<div class="hvac-form-row">
|
|
<div class="hvac-form-group">
|
|
<label for="venue-contact-first-name">First Name <span class="required">*</span></label>
|
|
<input type="text" id="venue-contact-first-name" name="first_name" required>
|
|
</div>
|
|
<div class="hvac-form-group">
|
|
<label for="venue-contact-last-name">Last Name <span class="required">*</span></label>
|
|
<input type="text" id="venue-contact-last-name" name="last_name" required>
|
|
</div>
|
|
</div>
|
|
<div class="hvac-form-row">
|
|
<div class="hvac-form-group">
|
|
<label for="venue-contact-email">Email <span class="required">*</span></label>
|
|
<input type="email" id="venue-contact-email" name="email" required>
|
|
</div>
|
|
<div class="hvac-form-group">
|
|
<label for="venue-contact-phone">Phone</label>
|
|
<input type="tel" id="venue-contact-phone" name="phone">
|
|
</div>
|
|
</div>
|
|
<div class="hvac-form-group">
|
|
<label for="venue-contact-company">Company</label>
|
|
<input type="text" id="venue-contact-company" name="company">
|
|
</div>
|
|
<div class="hvac-form-group">
|
|
<label for="venue-contact-message">Message</label>
|
|
<textarea id="venue-contact-message" name="message" rows="4" placeholder="Tell us about your training needs..."></textarea>
|
|
</div>
|
|
<button type="submit" class="hvac-btn-primary">Send Message</button>
|
|
</form>
|
|
<div class="hvac-form-success" style="display: none;">
|
|
<span class="dashicons dashicons-yes-alt" aria-hidden="true"></span>
|
|
<p>Your message has been sent! The training lab will be in touch soon.</p>
|
|
</div>
|
|
<div class="hvac-form-error" style="display: none;">
|
|
<span class="dashicons dashicons-warning" aria-hidden="true"></span>
|
|
<p>There was a problem sending your message. Please try again.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Modal -->
|
|
<div id="hvac-info-modal" class="hvac-training-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="info-modal-title">
|
|
<div class="hvac-modal-overlay"></div>
|
|
<div class="hvac-modal-content hvac-info-modal-content">
|
|
<div class="hvac-info-modal-header">
|
|
<h2 id="info-modal-title">Find Training Near You</h2>
|
|
<button class="hvac-modal-close" aria-label="Close modal">×</button>
|
|
</div>
|
|
<div class="hvac-info-modal-body">
|
|
<section class="hvac-info-section">
|
|
<h3>What is Upskill HVAC?</h3>
|
|
<p>Upskill HVAC is a community of certified trainers and training facilities dedicated to advancing skills in the HVAC industry. Our platform connects technicians with professional training opportunities across the country.</p>
|
|
</section>
|
|
|
|
<section class="hvac-info-section">
|
|
<h3>How to Use This Page</h3>
|
|
<ul class="hvac-info-list">
|
|
<li><strong>Browse by Category:</strong> Use the tabs above the list to switch between Trainers, Venues, and Events</li>
|
|
<li><strong>Search:</strong> Type in the search bar to filter results within the current tab</li>
|
|
<li><strong>Filter:</strong> Use the dropdown filters to narrow by state, certification, or format</li>
|
|
<li><strong>Near Me:</strong> Click the "Near Me" button to find training options close to your location</li>
|
|
<li><strong>Map Markers:</strong> Click on any marker to see details, or hover to preview</li>
|
|
<li><strong>Toggle Visibility:</strong> Use the colored dots in the header to show/hide marker types on the map</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="hvac-info-section">
|
|
<h3>Map Legend</h3>
|
|
<div class="hvac-info-legend">
|
|
<div class="hvac-info-legend-item">
|
|
<span class="hvac-legend-marker hvac-legend-trainer"></span>
|
|
<div>
|
|
<strong>Trainer</strong>
|
|
<p>Certified HVAC trainers who conduct training sessions</p>
|
|
</div>
|
|
</div>
|
|
<div class="hvac-info-legend-item">
|
|
<span class="hvac-legend-marker hvac-legend-venue"></span>
|
|
<div>
|
|
<strong>Training Lab</strong>
|
|
<p>measureQuick Approved facilities with professional equipment</p>
|
|
</div>
|
|
</div>
|
|
<div class="hvac-info-legend-item">
|
|
<span class="hvac-legend-marker hvac-legend-event"></span>
|
|
<div>
|
|
<strong>Event</strong>
|
|
<p>Scheduled training sessions you can register for</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php get_footer(); ?>
|