feat: Add comprehensive help system with welcome guide, tooltips, and documentation
- Add interactive welcome guide modal with 4 informative cards - Implement cookie-based dismissal lasting 30 days - Create tooltips system for major sections across custom pages - Add comprehensive documentation page with FAQs and step-by-step guides - Include Font Awesome icons for visual enhancement - Add Help buttons to navigation across all pages - Enhance user onboarding and platform understanding 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
bengizmo
parent
f17234ba3b
commit
803993d5e9
6 changed files with 1337 additions and 13 deletions
|
|
@ -0,0 +1,568 @@
|
|||
/**
|
||||
* HVAC Help System Styles
|
||||
* Styles for welcome guide, tooltips, and documentation
|
||||
*/
|
||||
|
||||
/* Welcome Modal Styles */
|
||||
.hvac-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
animation: hvacFadeIn 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.hvac-modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
transform: scale(0.9);
|
||||
animation: hvacSlideUp 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
.hvac-modal-header {
|
||||
background: linear-gradient(135deg, #2c5aa0 0%, #1e4080 100%);
|
||||
color: white;
|
||||
padding: 24px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hvac-modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hvac-modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Welcome Cards */
|
||||
.hvac-welcome-cards {
|
||||
position: relative;
|
||||
height: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hvac-welcome-card {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 40px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hvac-welcome-card.active {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hvac-welcome-card.hidden {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hvac-card-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 8px 16px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.hvac-card-icon i {
|
||||
font-size: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hvac-card-content h3 {
|
||||
color: #2c5aa0;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.hvac-card-content p {
|
||||
color: #555;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* Modal Navigation */
|
||||
.hvac-modal-navigation {
|
||||
padding: 24px 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.hvac-nav-btn {
|
||||
background: #2c5aa0;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-nav-btn:hover:not(:disabled) {
|
||||
background: #1e4080;
|
||||
}
|
||||
|
||||
.hvac-nav-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.hvac-card-indicators {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hvac-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-indicator.active {
|
||||
background: #2c5aa0;
|
||||
}
|
||||
|
||||
.hvac-indicator:hover {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
/* Modal Footer */
|
||||
.hvac-modal-footer {
|
||||
padding: 24px 32px;
|
||||
background: #f9f9f9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hvac-dismiss-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hvac-primary-btn {
|
||||
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.hvac-primary-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
/* Tooltip Styles */
|
||||
.hvac-tooltip-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper:hover::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
animation: hvacTooltipShow 0.2s ease-out 0.3s forwards;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper:hover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 5px solid transparent;
|
||||
z-index: 1001;
|
||||
opacity: 0;
|
||||
animation: hvacTooltipShow 0.2s ease-out 0.3s forwards;
|
||||
}
|
||||
|
||||
/* Tooltip positions */
|
||||
.hvac-tooltip-wrapper[data-position="top"]:hover::after {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper[data-position="top"]:hover::before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 3px;
|
||||
border-top-color: #333;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper[data-position="bottom"]:hover::after {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper[data-position="bottom"]:hover::before {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 3px;
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper[data-position="left"]:hover::after {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper[data-position="left"]:hover::before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-right: 3px;
|
||||
border-left-color: #333;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper[data-position="right"]:hover::after {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.hvac-tooltip-wrapper[data-position="right"]:hover::before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 3px;
|
||||
border-right-color: #333;
|
||||
}
|
||||
|
||||
/* Documentation Page Styles */
|
||||
.hvac-documentation {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.hvac-doc-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.hvac-doc-header h1 {
|
||||
color: #2c5aa0;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.hvac-doc-subtitle {
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hvac-doc-navigation {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hvac-doc-nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.hvac-doc-link {
|
||||
color: #2c5aa0;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-doc-link:hover {
|
||||
background: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hvac-doc-section {
|
||||
margin-bottom: 48px;
|
||||
padding: 32px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hvac-doc-section h2 {
|
||||
color: #2c5aa0;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 24px 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 3px solid #4CAF50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.hvac-doc-section h2 i {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.hvac-doc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hvac-doc-card {
|
||||
background: #f8f9fa;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #4CAF50;
|
||||
}
|
||||
|
||||
.hvac-doc-card h3 {
|
||||
color: #2c5aa0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.hvac-doc-card p {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.hvac-doc-btn {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.hvac-doc-btn:hover {
|
||||
background: #45a049;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hvac-feature-list {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hvac-feature {
|
||||
background: #f8f9fa;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #2c5aa0;
|
||||
}
|
||||
|
||||
.hvac-feature h3 {
|
||||
color: #2c5aa0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.hvac-feature p, .hvac-feature ul, .hvac-feature ol {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hvac-feature ul li, .hvac-feature ol li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hvac-faq-list {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hvac-faq-item {
|
||||
background: #f8f9fa;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #4CAF50;
|
||||
}
|
||||
|
||||
.hvac-faq-item h3 {
|
||||
color: #2c5aa0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.hvac-faq-item p {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes hvacFadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes hvacSlideUp {
|
||||
from {
|
||||
transform: scale(0.9) translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hvacTooltipShow {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hvac-modal-content {
|
||||
width: 95%;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.hvac-modal-header,
|
||||
.hvac-modal-navigation,
|
||||
.hvac-modal-footer {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.hvac-welcome-card {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.hvac-modal-header h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.hvac-card-content h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.hvac-card-content p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.hvac-modal-footer {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hvac-primary-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hvac-doc-nav {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hvac-doc-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hvac-documentation {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.hvac-doc-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hvac-doc-header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
/**
|
||||
* HVAC Help System JavaScript
|
||||
* Handles welcome guide interactions, tooltips, and documentation navigation
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
let currentCard = 0;
|
||||
let totalCards = 0;
|
||||
|
||||
$(document).ready(function() {
|
||||
initializeWelcomeGuide();
|
||||
initializeTooltips();
|
||||
initializeDocumentationNavigation();
|
||||
});
|
||||
|
||||
/**
|
||||
* Initialize welcome guide functionality
|
||||
*/
|
||||
function initializeWelcomeGuide() {
|
||||
const $modal = $('#hvac-welcome-modal');
|
||||
if ($modal.length === 0) return;
|
||||
|
||||
totalCards = $('.hvac-welcome-card').length;
|
||||
|
||||
// Close button
|
||||
$('.hvac-modal-close').on('click', function() {
|
||||
closeWelcomeGuide(false);
|
||||
});
|
||||
|
||||
// Navigation buttons
|
||||
$('#hvac-prev-card').on('click', function() {
|
||||
navigateCard(-1);
|
||||
});
|
||||
|
||||
$('#hvac-next-card').on('click', function() {
|
||||
navigateCard(1);
|
||||
});
|
||||
|
||||
// Indicator dots
|
||||
$('.hvac-indicator').on('click', function() {
|
||||
const targetCard = parseInt($(this).data('card'));
|
||||
goToCard(targetCard);
|
||||
});
|
||||
|
||||
// Get started button
|
||||
$('#hvac-get-started').on('click', function() {
|
||||
const dontShowAgain = $('#hvac-dont-show-again').is(':checked');
|
||||
closeWelcomeGuide(dontShowAgain);
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
$(document).on('keydown', function(e) {
|
||||
if ($modal.is(':visible')) {
|
||||
switch(e.key) {
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault();
|
||||
navigateCard(-1);
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
navigateCard(1);
|
||||
break;
|
||||
case 'Escape':
|
||||
e.preventDefault();
|
||||
closeWelcomeGuide(false);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Click outside to close
|
||||
$modal.on('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeWelcomeGuide(false);
|
||||
}
|
||||
});
|
||||
|
||||
updateNavigationState();
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to previous or next card
|
||||
*/
|
||||
function navigateCard(direction) {
|
||||
const newCard = currentCard + direction;
|
||||
if (newCard >= 0 && newCard < totalCards) {
|
||||
goToCard(newCard);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to specific card
|
||||
*/
|
||||
function goToCard(cardIndex) {
|
||||
if (cardIndex < 0 || cardIndex >= totalCards) return;
|
||||
|
||||
// Hide current card
|
||||
$('.hvac-welcome-card').removeClass('active').addClass('hidden');
|
||||
$('.hvac-indicator').removeClass('active');
|
||||
|
||||
// Show target card with animation delay
|
||||
setTimeout(function() {
|
||||
$('.hvac-welcome-card').eq(cardIndex).removeClass('hidden').addClass('active');
|
||||
$('.hvac-indicator').eq(cardIndex).addClass('active');
|
||||
currentCard = cardIndex;
|
||||
updateNavigationState();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update navigation button states
|
||||
*/
|
||||
function updateNavigationState() {
|
||||
$('#hvac-prev-card').prop('disabled', currentCard === 0);
|
||||
$('#hvac-next-card').prop('disabled', currentCard === totalCards - 1);
|
||||
|
||||
// Update button text on last card
|
||||
if (currentCard === totalCards - 1) {
|
||||
$('#hvac-next-card').text('Finish');
|
||||
} else {
|
||||
$('#hvac-next-card').text('Next');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close welcome guide
|
||||
*/
|
||||
function closeWelcomeGuide(dismissPermanently) {
|
||||
const $modal = $('#hvac-welcome-modal');
|
||||
|
||||
if (dismissPermanently) {
|
||||
// Send AJAX request to set dismissal cookie
|
||||
$.ajax({
|
||||
url: hvacHelp.ajaxUrl,
|
||||
type: 'POST',
|
||||
data: {
|
||||
action: 'hvac_dismiss_welcome',
|
||||
nonce: hvacHelp.nonce
|
||||
},
|
||||
success: function(response) {
|
||||
console.log('Welcome guide dismissed permanently');
|
||||
},
|
||||
error: function() {
|
||||
console.warn('Failed to save welcome guide dismissal');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Animate out
|
||||
$modal.css('opacity', '0');
|
||||
$modal.find('.hvac-modal-content').css({
|
||||
'transform': 'scale(0.9) translateY(20px)',
|
||||
'opacity': '0'
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
$modal.remove();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize tooltip functionality
|
||||
*/
|
||||
function initializeTooltips() {
|
||||
// Enhanced tooltip handling with better positioning
|
||||
$('.hvac-tooltip-wrapper').each(function() {
|
||||
const $wrapper = $(this);
|
||||
let timeoutId;
|
||||
|
||||
$wrapper.on('mouseenter', function() {
|
||||
timeoutId = setTimeout(function() {
|
||||
// Add a class to show tooltip
|
||||
$wrapper.addClass('hvac-tooltip-visible');
|
||||
}, 500); // 500ms delay
|
||||
});
|
||||
|
||||
$wrapper.on('mouseleave', function() {
|
||||
clearTimeout(timeoutId);
|
||||
$wrapper.removeClass('hvac-tooltip-visible');
|
||||
});
|
||||
});
|
||||
|
||||
// Add tooltip classes for enhanced styling
|
||||
$('.hvac-tooltip-wrapper[data-tooltip]').addClass('hvac-has-tooltip');
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize documentation page navigation
|
||||
*/
|
||||
function initializeDocumentationNavigation() {
|
||||
// Smooth scrolling for documentation links
|
||||
$('.hvac-doc-link').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
const targetId = $(this).attr('href');
|
||||
const $target = $(targetId);
|
||||
|
||||
if ($target.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: $target.offset().top - 80
|
||||
}, 600);
|
||||
|
||||
// Update active state
|
||||
$('.hvac-doc-link').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Highlight current section on scroll
|
||||
$(window).on('scroll', function() {
|
||||
const scrollTop = $(window).scrollTop();
|
||||
const windowHeight = $(window).height();
|
||||
|
||||
$('.hvac-doc-section').each(function() {
|
||||
const $section = $(this);
|
||||
const sectionTop = $section.offset().top;
|
||||
const sectionBottom = sectionTop + $section.outerHeight();
|
||||
|
||||
if (scrollTop + 120 >= sectionTop && scrollTop + 120 < sectionBottom) {
|
||||
const sectionId = $section.attr('id');
|
||||
$('.hvac-doc-link').removeClass('active');
|
||||
$('.hvac-doc-link[href="#' + sectionId + '"]').addClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add fade-in animation for FAQ items
|
||||
$('.hvac-faq-item').each(function(index) {
|
||||
$(this).css({
|
||||
'opacity': '0',
|
||||
'transform': 'translateY(20px)'
|
||||
});
|
||||
|
||||
$(this).delay(index * 100).animate({
|
||||
'opacity': '1'
|
||||
}, 400).css('transform', 'translateY(0)');
|
||||
});
|
||||
|
||||
// Collapsible FAQ items (optional enhancement)
|
||||
$('.hvac-faq-item h3').on('click', function() {
|
||||
const $content = $(this).next('p');
|
||||
const $item = $(this).parent();
|
||||
|
||||
if ($item.hasClass('hvac-faq-collapsed')) {
|
||||
$content.slideDown(300);
|
||||
$item.removeClass('hvac-faq-collapsed');
|
||||
} else {
|
||||
$content.slideUp(300);
|
||||
$item.addClass('hvac-faq-collapsed');
|
||||
}
|
||||
}).css('cursor', 'pointer').attr('title', 'Click to expand/collapse');
|
||||
}
|
||||
|
||||
/**
|
||||
* Add help button to navigation areas
|
||||
*/
|
||||
function addHelpButtons() {
|
||||
// Add help button to main navigation if it doesn't exist
|
||||
if ($('.hvac-help-button').length === 0) {
|
||||
const helpButton = $('<a href="/hvac-documentation" class="hvac-help-button hvac-tooltip-wrapper" data-tooltip="View documentation and help guides" data-position="bottom"><i class="fas fa-question-circle"></i> Help</a>');
|
||||
|
||||
// Try to add to existing navigation
|
||||
if ($('.hvac-dashboard-nav').length) {
|
||||
$('.hvac-dashboard-nav').append(helpButton);
|
||||
} else if ($('.hvac-nav-buttons').length) {
|
||||
$('.hvac-nav-buttons').append(helpButton);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize contextual help
|
||||
*/
|
||||
function initializeContextualHelp() {
|
||||
// Add help icon to page titles
|
||||
const pageSpecificHelp = {
|
||||
'hvac-dashboard': 'Your central hub for managing events, tracking revenue, and viewing performance metrics.',
|
||||
'trainer-profile': 'Update your professional information, credentials, and training specialties.',
|
||||
'event-summary': 'View detailed information about your event including attendees and sales data.',
|
||||
'certificate-reports': 'Generate and manage professional certificates for your training attendees.',
|
||||
'email-attendees': 'Communicate with your event attendees using our built-in email system.'
|
||||
};
|
||||
|
||||
const currentPage = $('body').attr('class').match(/page-id-\d+|page-[\w-]+/);
|
||||
if (currentPage) {
|
||||
const pageName = currentPage[0].replace('page-', '').replace('page-id-', '');
|
||||
|
||||
Object.keys(pageSpecificHelp).forEach(function(page) {
|
||||
if (pageName.includes(page) || $('body').hasClass('page-' + page)) {
|
||||
const helpText = pageSpecificHelp[page];
|
||||
const $pageTitle = $('h1').first();
|
||||
|
||||
if ($pageTitle.length && !$pageTitle.find('.hvac-page-help').length) {
|
||||
$pageTitle.append(' <span class="hvac-page-help hvac-tooltip-wrapper" data-tooltip="' + helpText + '" data-position="right"><i class="fas fa-info-circle"></i></span>');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize additional features
|
||||
$(document).ready(function() {
|
||||
addHelpButtons();
|
||||
initializeContextualHelp();
|
||||
});
|
||||
|
||||
// Public API for other scripts
|
||||
window.HVACHelp = {
|
||||
addTooltip: function(element, text, position) {
|
||||
$(element).addClass('hvac-tooltip-wrapper')
|
||||
.attr('data-tooltip', text)
|
||||
.attr('data-position', position || 'top');
|
||||
},
|
||||
|
||||
showWelcomeGuide: function() {
|
||||
if ($('#hvac-welcome-modal').length === 0) {
|
||||
location.reload(); // Reload to show guide
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -79,6 +79,10 @@ function hvac_ce_create_required_pages() {
|
|||
'title' => 'Certificate System Diagnostics',
|
||||
'content' => '<!-- wp:shortcode -->[hvac_certificate_fix]<!-- /wp:shortcode -->',
|
||||
],
|
||||
'hvac-documentation' => [ // Add documentation page
|
||||
'title' => 'Trainer Documentation',
|
||||
'content' => '<!-- wp:shortcode -->[hvac_documentation]<!-- /wp:shortcode -->',
|
||||
],
|
||||
// REMOVED: 'submit-event' page creation. Will link to default TEC CE page.
|
||||
// 'submit-event' => [
|
||||
// 'title' => 'Submit Event',
|
||||
|
|
@ -373,6 +377,9 @@ function hvac_ce_enqueue_admin_assets($hook) {
|
|||
// Include the main plugin class
|
||||
require_once HVAC_CE_PLUGIN_DIR . 'includes/class-hvac-community-events.php';
|
||||
|
||||
// Include the help system
|
||||
require_once HVAC_CE_PLUGIN_DIR . 'includes/class-hvac-help-system.php';
|
||||
|
||||
// Initialize the plugin
|
||||
function hvac_community_events_init() {
|
||||
HVAC_Logger::info('Initializing HVAC Community Events plugin', 'Core');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,383 @@
|
|||
<?php
|
||||
/**
|
||||
* HVAC Help System
|
||||
*
|
||||
* Manages welcome guide, tooltips, and documentation for the HVAC Community Events plugin
|
||||
*/
|
||||
|
||||
class HVAC_Help_System {
|
||||
|
||||
private static $instance = null;
|
||||
|
||||
public static function instance() {
|
||||
if (null === self::$instance) {
|
||||
self::$instance = new self();
|
||||
}
|
||||
return self::$instance;
|
||||
}
|
||||
|
||||
private function __construct() {
|
||||
add_action('wp_enqueue_scripts', array($this, 'enqueue_help_assets'));
|
||||
add_action('wp_footer', array($this, 'render_welcome_guide'));
|
||||
add_shortcode('hvac_documentation', array($this, 'render_documentation_page'));
|
||||
add_action('wp_ajax_hvac_dismiss_welcome', array($this, 'handle_welcome_dismissal'));
|
||||
add_action('wp_ajax_nopriv_hvac_dismiss_welcome', array($this, 'handle_welcome_dismissal'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue help system assets
|
||||
*/
|
||||
public function enqueue_help_assets() {
|
||||
// Only load on HVAC pages for authenticated trainers
|
||||
if (!$this->is_hvac_page() || !$this->is_trainer_logged_in()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Enqueue Font Awesome for icons
|
||||
wp_enqueue_style(
|
||||
'font-awesome',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css',
|
||||
array(),
|
||||
'6.0.0'
|
||||
);
|
||||
|
||||
wp_enqueue_style(
|
||||
'hvac-help-system',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/css/hvac-help-system.css',
|
||||
array('hvac-common-style', 'font-awesome'),
|
||||
HVAC_CE_VERSION
|
||||
);
|
||||
|
||||
wp_enqueue_script(
|
||||
'hvac-help-system',
|
||||
HVAC_CE_PLUGIN_URL . 'assets/js/hvac-help-system.js',
|
||||
array('jquery'),
|
||||
HVAC_CE_VERSION,
|
||||
true
|
||||
);
|
||||
|
||||
wp_localize_script('hvac-help-system', 'hvacHelp', array(
|
||||
'ajaxUrl' => admin_url('admin-ajax.php'),
|
||||
'nonce' => wp_create_nonce('hvac_help_nonce'),
|
||||
'showWelcome' => $this->should_show_welcome_guide()
|
||||
));
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current page is an HVAC custom page
|
||||
*/
|
||||
private function is_hvac_page() {
|
||||
$hvac_pages = array(
|
||||
'hvac-dashboard', 'trainer-registration', 'community-login',
|
||||
'trainer-profile', 'event-summary', 'email-attendees',
|
||||
'certificate-reports', 'generate-certificates', 'hvac-documentation'
|
||||
);
|
||||
|
||||
foreach ($hvac_pages as $page) {
|
||||
if (is_page($page)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if current user is a logged-in trainer
|
||||
*/
|
||||
private function is_trainer_logged_in() {
|
||||
return is_user_logged_in() && (current_user_can('hvac_trainer') || current_user_can('administrator'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if welcome guide should be shown
|
||||
*/
|
||||
private function should_show_welcome_guide() {
|
||||
if (!$this->is_trainer_logged_in()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check cookie for dismissal
|
||||
if (isset($_COOKIE['hvac_welcome_dismissed'])) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Only show on dashboard page
|
||||
return is_page('hvac-dashboard');
|
||||
}
|
||||
|
||||
/**
|
||||
* Render welcome guide modal
|
||||
*/
|
||||
public function render_welcome_guide() {
|
||||
if (!$this->should_show_welcome_guide()) {
|
||||
return;
|
||||
}
|
||||
|
||||
$cards = $this->get_welcome_cards();
|
||||
?>
|
||||
<div id="hvac-welcome-modal" class="hvac-modal-overlay">
|
||||
<div class="hvac-modal-content">
|
||||
<div class="hvac-modal-header">
|
||||
<h2>Welcome to Upskill HVAC Training Network!</h2>
|
||||
<button class="hvac-modal-close" aria-label="Close welcome guide">×</button>
|
||||
</div>
|
||||
|
||||
<div class="hvac-welcome-cards">
|
||||
<?php foreach ($cards as $index => $card): ?>
|
||||
<div class="hvac-welcome-card <?php echo $index === 0 ? 'active' : 'hidden'; ?>" data-card="<?php echo $index; ?>">
|
||||
<div class="hvac-card-icon">
|
||||
<i class="<?php echo esc_attr($card['icon']); ?>"></i>
|
||||
</div>
|
||||
<div class="hvac-card-content">
|
||||
<h3><?php echo esc_html($card['title']); ?></h3>
|
||||
<p><?php echo esc_html($card['description']); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="hvac-modal-navigation">
|
||||
<button id="hvac-prev-card" class="hvac-nav-btn" disabled>Previous</button>
|
||||
<div class="hvac-card-indicators">
|
||||
<?php for ($i = 0; $i < count($cards); $i++): ?>
|
||||
<span class="hvac-indicator <?php echo $i === 0 ? 'active' : ''; ?>" data-card="<?php echo $i; ?>"></span>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<button id="hvac-next-card" class="hvac-nav-btn">Next</button>
|
||||
</div>
|
||||
|
||||
<div class="hvac-modal-footer">
|
||||
<label class="hvac-dismiss-checkbox">
|
||||
<input type="checkbox" id="hvac-dont-show-again"> Don't show this again
|
||||
</label>
|
||||
<button id="hvac-get-started" class="hvac-primary-btn">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Get welcome guide cards data
|
||||
*/
|
||||
private function get_welcome_cards() {
|
||||
return array(
|
||||
array(
|
||||
'icon' => 'fas fa-chalkboard-teacher',
|
||||
'title' => 'Verified Expert Platform',
|
||||
'description' => 'You\'re part of our vetted community of HVAC training experts. Our screening process ensures only qualified professionals can host events on the platform.'
|
||||
),
|
||||
array(
|
||||
'icon' => 'fas fa-calendar-plus',
|
||||
'title' => 'Create & Manage Events',
|
||||
'description' => 'Easily create training events, set pricing, and manage registrations. All events are reviewed by our in-house trainers before publishing to ensure quality.'
|
||||
),
|
||||
array(
|
||||
'icon' => 'fas fa-dollar-sign',
|
||||
'title' => 'Keep 100% Revenue',
|
||||
'description' => 'You keep 100% of your ticket sales (minus standard Stripe processing fees). Track your earnings and progress toward your revenue goals right from your dashboard.'
|
||||
),
|
||||
array(
|
||||
'icon' => 'fas fa-certificate',
|
||||
'title' => 'Professional Certificates',
|
||||
'description' => 'Generate and send professional certificates of completion to your attendees. Build your reputation and provide value that keeps trainees coming back.'
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle AJAX request to dismiss welcome guide
|
||||
*/
|
||||
public function handle_welcome_dismissal() {
|
||||
if (!wp_verify_nonce($_POST['nonce'], 'hvac_help_nonce')) {
|
||||
wp_die('Invalid nonce');
|
||||
}
|
||||
|
||||
if (!$this->is_trainer_logged_in()) {
|
||||
wp_die('Unauthorized');
|
||||
}
|
||||
|
||||
// Set cookie to expire in 30 days
|
||||
setcookie('hvac_welcome_dismissed', '1', time() + (30 * 24 * 60 * 60), COOKIEPATH, COOKIE_DOMAIN);
|
||||
|
||||
wp_send_json_success();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render documentation page content
|
||||
*/
|
||||
public function render_documentation_page($atts) {
|
||||
if (!$this->is_trainer_logged_in()) {
|
||||
return '<p>Please log in to access the documentation.</p>';
|
||||
}
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div class="hvac-documentation">
|
||||
<div class="hvac-doc-header">
|
||||
<h1>Trainer Documentation</h1>
|
||||
<p class="hvac-doc-subtitle">Everything you need to know about managing your training events</p>
|
||||
</div>
|
||||
|
||||
<div class="hvac-doc-navigation">
|
||||
<ul class="hvac-doc-nav">
|
||||
<li><a href="#getting-started" class="hvac-doc-link">Getting Started</a></li>
|
||||
<li><a href="#managing-events" class="hvac-doc-link">Managing Events</a></li>
|
||||
<li><a href="#attendee-management" class="hvac-doc-link">Attendee Management</a></li>
|
||||
<li><a href="#certificates" class="hvac-doc-link">Certificates</a></li>
|
||||
<li><a href="#faq" class="hvac-doc-link">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hvac-doc-content">
|
||||
<?php echo $this->get_documentation_content(); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get main documentation content
|
||||
*/
|
||||
private function get_documentation_content() {
|
||||
return '
|
||||
<section id="getting-started" class="hvac-doc-section">
|
||||
<h2><i class="fas fa-play-circle"></i> Getting Started</h2>
|
||||
<div class="hvac-doc-grid">
|
||||
<div class="hvac-doc-card">
|
||||
<h3>1. Complete Your Profile</h3>
|
||||
<p>Update your trainer profile with your credentials, business information, and training specialties. This helps trainees find and trust your expertise.</p>
|
||||
<a href="/trainer-profile" class="hvac-doc-btn">Edit Profile</a>
|
||||
</div>
|
||||
<div class="hvac-doc-card">
|
||||
<h3>2. Create Your First Event</h3>
|
||||
<p>Use our event creation form to set up your training. Include detailed descriptions, pricing, and capacity limits.</p>
|
||||
<a href="/manage-event" class="hvac-doc-btn">Create Event</a>
|
||||
</div>
|
||||
<div class="hvac-doc-card">
|
||||
<h3>3. Monitor Your Dashboard</h3>
|
||||
<p>Track your events, revenue, and performance metrics from your centralized dashboard.</p>
|
||||
<a href="/hvac-dashboard" class="hvac-doc-btn">View Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="managing-events" class="hvac-doc-section">
|
||||
<h2><i class="fas fa-calendar-alt"></i> Managing Events</h2>
|
||||
<div class="hvac-feature-list">
|
||||
<div class="hvac-feature">
|
||||
<h3>Event Creation Process</h3>
|
||||
<ol>
|
||||
<li><strong>Draft:</strong> Create your event with all details</li>
|
||||
<li><strong>Review:</strong> Our team reviews for quality and compliance</li>
|
||||
<li><strong>Published:</strong> Event goes live for registration</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="hvac-feature">
|
||||
<h3>Key Event Features</h3>
|
||||
<ul>
|
||||
<li>Multiple ticket types and pricing tiers</li>
|
||||
<li>Capacity management and waitlists</li>
|
||||
<li>Custom registration fields</li>
|
||||
<li>Automated confirmation emails</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hvac-feature">
|
||||
<h3>Event Summary Page</h3>
|
||||
<p>Access detailed event information including attendee lists, sales data, and check-in capabilities. Each event has its own summary page accessible from your dashboard.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="attendee-management" class="hvac-doc-section">
|
||||
<h2><i class="fas fa-users"></i> Attendee Management</h2>
|
||||
<div class="hvac-feature-list">
|
||||
<div class="hvac-feature">
|
||||
<h3>Registration Tracking</h3>
|
||||
<p>View all registrations, payment status, and attendee information from your event summary page. Export attendee lists for your records.</p>
|
||||
</div>
|
||||
<div class="hvac-feature">
|
||||
<h3>Communication Tools</h3>
|
||||
<p>Send emails to all attendees or specific groups. Use our email templates or create custom messages for updates and reminders.</p>
|
||||
</div>
|
||||
<div class="hvac-feature">
|
||||
<h3>Check-in System</h3>
|
||||
<p>Mark attendees as present during your event. This data is used for certificate generation and completion tracking.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="certificates" class="hvac-doc-section">
|
||||
<h2><i class="fas fa-certificate"></i> Professional Certificates</h2>
|
||||
<div class="hvac-feature-list">
|
||||
<div class="hvac-feature">
|
||||
<h3>Certificate Generation</h3>
|
||||
<p>Create professional certificates for attendees who completed your training. Certificates include event details, your signature, and completion date.</p>
|
||||
</div>
|
||||
<div class="hvac-feature">
|
||||
<h3>Distribution Options</h3>
|
||||
<ul>
|
||||
<li>Email directly to attendees</li>
|
||||
<li>Download PDF files for printing</li>
|
||||
<li>Bulk generation for multiple attendees</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hvac-feature">
|
||||
<h3>Certificate Management</h3>
|
||||
<p>Track which certificates have been issued and manage your certificate templates from the Certificate Reports page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="hvac-doc-section">
|
||||
<h2><i class="fas fa-question-circle"></i> Frequently Asked Questions</h2>
|
||||
<div class="hvac-faq-list">
|
||||
<div class="hvac-faq-item">
|
||||
<h3>How do I get paid for my events?</h3>
|
||||
<p>Payments are processed through Stripe and deposited directly to your account. You keep 100% of ticket sales minus standard Stripe processing fees (typically 2.9% + 30¢ per transaction).</p>
|
||||
</div>
|
||||
<div class="hvac-faq-item">
|
||||
<h3>How long does event review take?</h3>
|
||||
<p>Our review process typically takes 1-2 business days. We check for content quality, appropriate pricing, and compliance with industry standards.</p>
|
||||
</div>
|
||||
<div class="hvac-faq-item">
|
||||
<h3>Can I modify events after they\'re published?</h3>
|
||||
<p>Yes, you can edit event details, but significant changes may require re-review. We recommend finalizing details before initial submission.</p>
|
||||
</div>
|
||||
<div class="hvac-faq-item">
|
||||
<h3>What if I need to cancel an event?</h3>
|
||||
<p>Contact our support team immediately. We\'ll help you manage refunds and communicate with registered attendees.</p>
|
||||
</div>
|
||||
<div class="hvac-faq-item">
|
||||
<h3>How do I improve my event visibility?</h3>
|
||||
<p>Complete your profile thoroughly, use detailed event descriptions, competitive pricing, and maintain high attendance rates. Quality events get featured prominently.</p>
|
||||
</div>
|
||||
<div class="hvac-faq-item">
|
||||
<h3>Can I offer different types of training?</h3>
|
||||
<p>Yes! You can offer in-person, virtual, hybrid, and on-demand training formats. Set your preferred training locations and formats in your profile.</p>
|
||||
</div>
|
||||
<div class="hvac-faq-item">
|
||||
<h3>What support is available?</h3>
|
||||
<p>Access this documentation anytime, use the help tooltips throughout the platform, or contact our support team for personalized assistance.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Add tooltip data attribute to elements
|
||||
*/
|
||||
public static function add_tooltip($content, $tooltip_text, $position = 'top') {
|
||||
return sprintf(
|
||||
'<span class="hvac-tooltip-wrapper" data-tooltip="%s" data-position="%s">%s</span>',
|
||||
esc_attr($tooltip_text),
|
||||
esc_attr($position),
|
||||
$content
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the help system
|
||||
HVAC_Help_System::instance();
|
||||
|
|
@ -53,25 +53,48 @@ get_header(); // Use theme's header
|
|||
<h1 class="entry-title">Trainer Dashboard</h1> <!-- Standard WP title class -->
|
||||
<div class="hvac-dashboard-nav">
|
||||
<?php // Link to the new page containing the TEC CE submission form shortcode ?>
|
||||
<a href="<?php echo esc_url( home_url( '/manage-event/' ) ); ?>" class="ast-button ast-button-primary">Create Event</a> <!-- Use Astra button class -->
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<a href="' . esc_url( home_url( '/manage-event/' ) ) . '" class="ast-button ast-button-primary">Create Event</a>',
|
||||
'Create a new training event with custom pricing and registration options'
|
||||
); ?>
|
||||
<?php // Link to the new page containing the TEC CE my_events shortcode ?>
|
||||
<a href="<?php echo esc_url( home_url( '/my-events/' ) ); ?>" class="ast-button ast-button-primary">My Events</a> <!-- Use Astra button class -->
|
||||
<a href="<?php echo esc_url( home_url( '/generate-certificates/' ) ); ?>" class="ast-button ast-button-primary">Generate Certificates</a>
|
||||
<a href="<?php echo esc_url( home_url( '/certificate-reports/' ) ); ?>" class="ast-button ast-button-primary">Certificate Reports</a>
|
||||
<a href="<?php echo esc_url( home_url( '/trainer-profile/' ) ); ?>" class="ast-button ast-button-secondary">View Profile</a> <?php // TODO: Implement trainer profile page ?>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<a href="' . esc_url( home_url( '/my-events/' ) ) . '" class="ast-button ast-button-primary">My Events</a>',
|
||||
'View and manage all your existing events in one place'
|
||||
); ?>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<a href="' . esc_url( home_url( '/generate-certificates/' ) ) . '" class="ast-button ast-button-primary">Generate Certificates</a>',
|
||||
'Create professional certificates for attendees who completed your training'
|
||||
); ?>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<a href="' . esc_url( home_url( '/certificate-reports/' ) ) . '" class="ast-button ast-button-primary">Certificate Reports</a>',
|
||||
'View and manage all certificates you\'ve issued to attendees'
|
||||
); ?>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<a href="' . esc_url( home_url( '/trainer-profile/' ) ) . '" class="ast-button ast-button-secondary">View Profile</a>',
|
||||
'Update your professional credentials, business information, and training specialties'
|
||||
); ?>
|
||||
<a href="<?php echo esc_url( home_url( '/hvac-documentation/' ) ); ?>" class="ast-button ast-button-secondary">Help</a>
|
||||
<a href="<?php echo esc_url( wp_logout_url( home_url( '/community-login/' ) ) ); ?>" class="ast-button ast-button-secondary">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Section -->
|
||||
<section class="hvac-dashboard-stats">
|
||||
<h2>Your Stats</h2>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<h2>Your Stats</h2>',
|
||||
'Overview of your event performance and revenue metrics',
|
||||
'bottom'
|
||||
); ?>
|
||||
<div class="hvac-stats-row"> <!-- Use flexbox row layout -->
|
||||
|
||||
<!-- Stat Card: Total Events -->
|
||||
<div class="hvac-stat-col"> <!-- Equal width flexbox column -->
|
||||
<div class="hvac-stat-card">
|
||||
<h3>Total Events</h3>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<h3>Total Events</h3>',
|
||||
'All events you\'ve created, including drafts and published events'
|
||||
); ?>
|
||||
<p><?php echo esc_html( $total_events ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +102,10 @@ get_header(); // Use theme's header
|
|||
<!-- Stat Card: Upcoming Events -->
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<h3>Upcoming Events</h3>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<h3>Upcoming Events</h3>',
|
||||
'Published events scheduled for future dates'
|
||||
); ?>
|
||||
<p><?php echo esc_html( $upcoming_events ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,7 +113,10 @@ get_header(); // Use theme's header
|
|||
<!-- Stat Card: Past Events -->
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<h3>Past Events</h3>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<h3>Past Events</h3>',
|
||||
'Completed events where you can generate certificates'
|
||||
); ?>
|
||||
<p><?php echo esc_html( $past_events ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,7 +124,10 @@ get_header(); // Use theme's header
|
|||
<!-- Stat Card: Total Tickets Sold -->
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<h3>Tickets Sold</h3>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<h3>Tickets Sold</h3>',
|
||||
'Total number of tickets sold across all your events'
|
||||
); ?>
|
||||
<p><?php echo esc_html( $total_sold ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,7 +135,10 @@ get_header(); // Use theme's header
|
|||
<!-- Stat Card: Total Revenue -->
|
||||
<div class="hvac-stat-col">
|
||||
<div class="hvac-stat-card">
|
||||
<h3>Total Revenue</h3>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<h3>Total Revenue</h3>',
|
||||
'Total earnings from all ticket sales (before Stripe fees)'
|
||||
); ?>
|
||||
<p>$<?php echo esc_html( number_format( $total_revenue, 2 ) ); ?></p>
|
||||
<?php if ( $revenue_target ) : ?>
|
||||
<small>Target: $<?php echo esc_html( number_format( $revenue_target, 2 ) ); ?></small>
|
||||
|
|
@ -116,7 +151,11 @@ get_header(); // Use theme's header
|
|||
|
||||
<!-- Events Table Section -->
|
||||
<section class="hvac-dashboard-events">
|
||||
<h2>Your Events</h2>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<h2>Your Events</h2>',
|
||||
'Detailed view of all your events with performance metrics and management options',
|
||||
'bottom'
|
||||
); ?>
|
||||
|
||||
<!-- Tab Filters -->
|
||||
<?php
|
||||
|
|
@ -125,7 +164,10 @@ get_header(); // Use theme's header
|
|||
$filter_statuses = ['all', 'publish', 'draft', 'pending', 'private']; // Added private based on requirements/query
|
||||
?>
|
||||
<div class="hvac-event-filters">
|
||||
<span>Filter: </span>
|
||||
<?php echo HVAC_Help_System::add_tooltip(
|
||||
'<span>Filter: </span>',
|
||||
'Filter events by their publication status'
|
||||
); ?>
|
||||
<?php foreach ($filter_statuses as $status) :
|
||||
$url = add_query_arg( 'event_status', $status, $dashboard_url );
|
||||
$class = 'ast-button ast-button-secondary hvac-filter';
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@ get_header(); // Use theme's header
|
|||
<a href="<?php echo esc_url(home_url('/hvac-dashboard/')); ?>" class="ast-button ast-button-primary">Dashboard</a>
|
||||
<a href="<?php echo esc_url(home_url('/manage-event/')); ?>" class="ast-button ast-button-primary">Create Event</a>
|
||||
<a href="<?php echo esc_url(home_url('/my-events/')); ?>" class="ast-button ast-button-primary">My Events</a>
|
||||
<a href="<?php echo esc_url(home_url('/hvac-documentation/')); ?>" class="ast-button ast-button-secondary">Help</a>
|
||||
<a href="<?php echo esc_url(wp_logout_url(home_url('/community-login/'))); ?>" class="ast-button ast-button-secondary">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue