ben
ada676e735
- Fixed incorrect form selector (hvac_event_form vs hvac-event-form) - Updated Clear button to target .hvac-event-form class selectors - Clear button now properly resets all form fields while preserving autosave - Added console logging for debugging confirmation - Improved field targeting with class-scoped selectors - Enhanced focus handling for better UX after clearing 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1350 lines
32 KiB
PHP
1350 lines
32 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: HVAC Create Event
|
|
* Description: Native HVAC event creation using HVAC_Event_Form_Builder
|
|
*/
|
|
|
|
// Define constant to indicate we are in a page template
|
|
define('HVAC_IN_PAGE_TEMPLATE', true);
|
|
|
|
// Check if user is logged in and has trainer capabilities
|
|
if (!is_user_logged_in()) {
|
|
wp_redirect(home_url('/training-login/'));
|
|
exit;
|
|
}
|
|
|
|
$user = wp_get_current_user();
|
|
if (!array_intersect(['hvac_trainer', 'hvac_master_trainer'], $user->roles) && !current_user_can('manage_options')) {
|
|
wp_die(__('Access denied. Trainer role required.', 'hvac-community-events'));
|
|
}
|
|
|
|
get_header();
|
|
|
|
// Initialize HVAC Event Form Builder without template selector (we'll use modal instead)
|
|
if (class_exists('HVAC_Event_Form_Builder')) {
|
|
$form_builder = new HVAC_Event_Form_Builder('hvac_event_form', true);
|
|
$form_builder->create_event_form([
|
|
'include_template_selector' => false, // Removed - will use modal instead
|
|
'include_venue_fields' => true,
|
|
'include_organizer_fields' => true,
|
|
'include_cost_fields' => true,
|
|
'include_capacity_fields' => true,
|
|
'include_datetime_fields' => true,
|
|
'template_categories' => ['general', 'training', 'workshop', 'certification']
|
|
]);
|
|
}
|
|
?>
|
|
|
|
<style>
|
|
.hvac-create-event-wrapper {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.hvac-page-header {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hvac-page-header h1 {
|
|
color: #1a1a1a;
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.hvac-page-description {
|
|
color: #666;
|
|
font-size: 16px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Quick action buttons */
|
|
.hvac-quick-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hvac-quick-actions .button {
|
|
padding: 10px 20px;
|
|
background: #f7f7f7;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
color: #333;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hvac-quick-actions .button:hover {
|
|
background: #0073aa;
|
|
color: white;
|
|
border-color: #0073aa;
|
|
}
|
|
|
|
.hvac-quick-actions .button.active {
|
|
background: #0073aa;
|
|
color: white;
|
|
border-color: #0073aa;
|
|
}
|
|
|
|
/* Native HVAC form styling */
|
|
.hvac-event-form {
|
|
background: #fff;
|
|
padding: 40px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-event-form .form-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hvac-event-form .form-section h3 {
|
|
color: #0073aa;
|
|
font-size: 18px;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid #0073aa;
|
|
}
|
|
|
|
.hvac-event-form .form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-event-form .form-group label {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.hvac-event-form .form-group label .required {
|
|
color: #dc3232;
|
|
}
|
|
|
|
.hvac-event-form input[type="text"],
|
|
.hvac-event-form input[type="email"],
|
|
.hvac-event-form input[type="url"],
|
|
.hvac-event-form input[type="tel"],
|
|
.hvac-event-form input[type="number"],
|
|
.hvac-event-form input[type="datetime-local"],
|
|
.hvac-event-form textarea,
|
|
.hvac-event-form select {
|
|
width: 100%;
|
|
padding: 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.3s;
|
|
}
|
|
|
|
.hvac-event-form input:focus,
|
|
.hvac-event-form textarea:focus,
|
|
.hvac-event-form select:focus {
|
|
outline: none;
|
|
border-color: #0073aa;
|
|
box-shadow: 0 0 0 2px rgba(0,115,170,0.1);
|
|
}
|
|
|
|
.hvac-event-form textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.hvac-event-form .form-submit {
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.hvac-event-form input[type="submit"] {
|
|
background: #0073aa;
|
|
color: white;
|
|
padding: 15px 40px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.hvac-event-form input[type="submit"]:hover {
|
|
background: #005a87;
|
|
}
|
|
|
|
/* Accordion-style template selector */
|
|
.hvac-template-selector {
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
margin-bottom: 25px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hvac-template-selector-header {
|
|
background: #f8f9fa;
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid #ddd;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.hvac-template-selector-header:hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.hvac-template-selector-header h4 {
|
|
margin: 0;
|
|
color: #495057;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hvac-template-selector-toggle {
|
|
font-size: 18px;
|
|
color: #666;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.hvac-template-selector.expanded .hvac-template-selector-toggle {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.hvac-template-selector-content {
|
|
padding: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
|
|
}
|
|
|
|
.hvac-template-selector.expanded .hvac-template-selector-content {
|
|
padding: 20px;
|
|
max-height: 500px;
|
|
}
|
|
|
|
.enhanced-selector select {
|
|
position: relative;
|
|
}
|
|
|
|
.enhanced-selector .template-info-icon {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.enhanced-selector .template-info-icon:hover {
|
|
color: #0073aa;
|
|
}
|
|
|
|
/* Template preview modal styling */
|
|
.hvac-template-preview {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
|
z-index: 10000;
|
|
min-width: 500px;
|
|
max-width: 90vw;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hvac-template-preview .preview-header {
|
|
background: #0073aa;
|
|
color: white;
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.hvac-template-preview .preview-header h4 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hvac-template-preview .preview-close {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.hvac-template-preview .preview-close:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.hvac-template-preview .preview-content {
|
|
padding: 20px;
|
|
max-height: calc(80vh - 120px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.hvac-template-preview .preview-info {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-template-preview .template-name strong {
|
|
font-size: 18px;
|
|
color: #333;
|
|
}
|
|
|
|
.hvac-template-preview .template-description {
|
|
color: #666;
|
|
margin: 8px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hvac-template-preview .template-category span {
|
|
background: #e8f5e8;
|
|
color: #2e7d2e;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hvac-template-preview .preview-fields {
|
|
border-top: 1px solid #eee;
|
|
padding-top: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-template-preview .field-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.hvac-template-preview .field-list li {
|
|
background: #f9f9f9;
|
|
margin: 5px 0;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #0073aa;
|
|
}
|
|
|
|
.hvac-template-preview .preview-actions {
|
|
border-top: 1px solid #eee;
|
|
padding-top: 15px;
|
|
text-align: right;
|
|
}
|
|
|
|
.hvac-template-preview .preview-actions .button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Overlay backdrop */
|
|
.hvac-template-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 9999;
|
|
display: none;
|
|
}
|
|
|
|
/* Save template dialog styling */
|
|
.hvac-save-template-dialog {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
|
z-index: 10001;
|
|
min-width: 450px;
|
|
max-width: 90vw;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hvac-save-template-dialog .dialog-header {
|
|
background: #0073aa;
|
|
color: white;
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.hvac-save-template-dialog .dialog-header h4 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hvac-save-template-dialog .dialog-close {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.hvac-save-template-dialog .dialog-close:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.hvac-save-template-dialog .dialog-content {
|
|
padding: 25px;
|
|
max-height: calc(80vh - 120px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.hvac-save-template-dialog .form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-save-template-dialog .form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hvac-save-template-dialog .template-input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hvac-save-template-dialog .template-input:focus {
|
|
outline: none;
|
|
border-color: #0073aa;
|
|
box-shadow: 0 0 0 2px rgba(0,115,170,0.1);
|
|
}
|
|
|
|
.hvac-save-template-dialog .checkbox-group {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hvac-save-template-dialog .checkbox-group label {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hvac-save-template-dialog .checkbox-group input[type="checkbox"] {
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.hvac-save-template-dialog .description {
|
|
color: #666;
|
|
font-size: 12px;
|
|
display: block;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.hvac-save-template-dialog .dialog-actions {
|
|
border-top: 1px solid #eee;
|
|
padding: 15px 25px;
|
|
text-align: right;
|
|
}
|
|
|
|
.hvac-save-template-dialog .dialog-actions .button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Progressive disclosure styling */
|
|
.hvac-advanced-options-toggle {
|
|
text-align: center;
|
|
margin: 30px 0;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
border: 1px dashed #ddd;
|
|
}
|
|
|
|
.hvac-advanced-options-toggle .toggle-advanced-options {
|
|
background: none;
|
|
border: none;
|
|
color: #0073aa;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
width: auto;
|
|
margin: 0 auto 5px;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hvac-advanced-options-toggle .toggle-advanced-options:hover {
|
|
background: rgba(0,115,170,0.1);
|
|
color: #005a87;
|
|
}
|
|
|
|
.hvac-advanced-options-toggle .toggle-icon {
|
|
transition: transform 0.3s;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.hvac-advanced-options-toggle.expanded .toggle-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.hvac-advanced-options-toggle .toggle-description {
|
|
color: #666;
|
|
font-size: 13px;
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Advanced fields styling */
|
|
.advanced-field {
|
|
display: none;
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.advanced-field.show {
|
|
display: block;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.advanced-fields-section {
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 2px solid #e8f5e8;
|
|
position: relative;
|
|
}
|
|
|
|
.advanced-fields-section::before {
|
|
content: "Advanced Options";
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 20px;
|
|
background: #fff;
|
|
color: #0073aa;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
/* Animation for advanced fields reveal */
|
|
@keyframes slideInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.advanced-field.animate-in {
|
|
animation: slideInDown 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* Auto-save indicator styling */
|
|
.hvac-autosave-indicator {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9998;
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
display: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hvac-autosave-indicator .dashicons {
|
|
font-size: 16px;
|
|
vertical-align: text-top;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.hvac-autosave-indicator.status-saving {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeaa7;
|
|
}
|
|
|
|
.hvac-autosave-indicator.status-saved {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.hvac-autosave-indicator.status-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.hvac-autosave-indicator.status-draft-loaded {
|
|
background: #cce5ff;
|
|
color: #004085;
|
|
border: 1px solid #99ccff;
|
|
}
|
|
|
|
/* Saving animation */
|
|
.hvac-autosave-indicator.status-saving .dashicons {
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
.hvac-autosave-indicator {
|
|
top: 10px;
|
|
right: 10px;
|
|
left: 10px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* Success message styling */
|
|
.hvac-success-message {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
color: #155724;
|
|
}
|
|
|
|
/* Error message styling */
|
|
.hvac-error-message {
|
|
background: #f8d7da;
|
|
border: 1px solid #f5c6cb;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
color: #721c24;
|
|
}
|
|
|
|
/* Phase 2 Integration Notice */
|
|
.hvac-phase2-notice {
|
|
background: #e8f5e8;
|
|
border: 2px solid #4CAF50;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hvac-phase2-notice strong {
|
|
color: #2e7d2e;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.hvac-phase2-notice p {
|
|
margin: 8px 0 0 0;
|
|
color: #2e7d2e;
|
|
}
|
|
|
|
/* Hide mystery textboxes and conditional fields */
|
|
.hvac-hidden-field,
|
|
.venue-creation-field,
|
|
.organizer-creation-field,
|
|
input[name="accordion_template_selector"],
|
|
input[name="template_preview"],
|
|
input[name="advanced_options_toggle"],
|
|
input[name="save_template_dialog"] {
|
|
display: none !important;
|
|
}
|
|
|
|
.venue-creation-field.show,
|
|
.organizer-creation-field.show {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Advanced Options section styling */
|
|
.hvac-event-form > text,
|
|
.hvac-event-form text:contains('Advanced Options') {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin: 25px 0 15px 0;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid #e9ecef;
|
|
}
|
|
|
|
/* Form section improvements */
|
|
.hvac-form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hvac-form-group:last-of-type {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Button container styling */
|
|
.hvac-form-actions {
|
|
margin-top: 30px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #e9ecef;
|
|
}
|
|
|
|
/* Hide Clear Template button */
|
|
button[type="button"]:contains("Clear Template"),
|
|
.hvac-clear-template-btn,
|
|
input[value="Clear Template"] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* New Autosave Status Bar */
|
|
.hvac-autosave-status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 6px;
|
|
padding: 12px 16px;
|
|
margin: 15px 0 25px 0;
|
|
font-size: 14px;
|
|
color: #495057;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.autosave-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.autosave-label {
|
|
font-weight: 600;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.autosave-time {
|
|
color: #28a745;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.autosave-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid #dee2e6;
|
|
background: white;
|
|
color: #495057;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.action-btn:hover:not(:disabled) {
|
|
background: #e9ecef;
|
|
border-color: #adb5bd;
|
|
}
|
|
|
|
.action-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.action-btn.placeholder-btn {
|
|
background: #f8f9fa;
|
|
color: #adb5bd;
|
|
border-style: dashed;
|
|
}
|
|
|
|
/* Template Modal Styles */
|
|
.hvac-template-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
display: none;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.modal-content {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 90vh;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
color: #2c3e50;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 24px;
|
|
color: #6c757d;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: rgba(108,117,125,0.1);
|
|
}
|
|
|
|
.modal-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.template-categories {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.category-btn {
|
|
padding: 8px 16px;
|
|
border: 1px solid #dee2e6;
|
|
background: white;
|
|
color: #495057;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.category-btn:hover,
|
|
.category-btn.active {
|
|
background: #007cba;
|
|
color: white;
|
|
border-color: #007cba;
|
|
}
|
|
|
|
.templates-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.template-card {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
background: white;
|
|
}
|
|
|
|
.template-card:hover {
|
|
border-color: #007cba;
|
|
box-shadow: 0 2px 8px rgba(0,123,186,0.1);
|
|
}
|
|
|
|
.template-card.selected {
|
|
border-color: #007cba;
|
|
background: #f0f8ff;
|
|
}
|
|
|
|
.template-card h4 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 16px;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.template-card p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #6c757d;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
padding: 20px;
|
|
border-top: 1px solid #e9ecef;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.btn-secondary,
|
|
.btn-primary {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #5a6268;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #007cba;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #0069a3;
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
background: #adb5bd;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.hvac-create-event-wrapper {
|
|
padding: 15px;
|
|
}
|
|
|
|
.hvac-event-form {
|
|
padding: 20px;
|
|
}
|
|
|
|
.hvac-quick-actions {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.hvac-quick-actions .button {
|
|
width: 200px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="hvac-create-event-wrapper">
|
|
<?php
|
|
// Display trainer navigation menu
|
|
if (class_exists('HVAC_Menu_System')) {
|
|
HVAC_Menu_System::instance()->render_trainer_menu();
|
|
}
|
|
|
|
// Display breadcrumbs
|
|
if (class_exists('HVAC_Breadcrumbs')) {
|
|
echo HVAC_Breadcrumbs::instance()->render_breadcrumbs();
|
|
}
|
|
|
|
// Add the new autosave status bar
|
|
?>
|
|
<div class="hvac-autosave-status-bar" id="hvac-autosave-status-bar">
|
|
<span class="autosave-info">
|
|
<span class="autosave-label">Autosave:</span>
|
|
<span class="autosave-time" id="autosave-time">--</span>
|
|
</span>
|
|
<div class="autosave-actions">
|
|
<button type="button" class="action-btn" id="restore-btn" title="Restore last autosave" disabled>Restore</button>
|
|
<button type="button" class="action-btn" id="clear-btn" title="Clear form fields">Clear</button>
|
|
<button type="button" class="action-btn" id="templates-btn" title="Choose from templates">Templates</button>
|
|
<button type="button" class="action-btn placeholder-btn" id="ai-assist-btn" title="AI assistance (coming soon)" disabled>AI Assist</button>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
?>
|
|
|
|
<!-- Removed: page header, phase 2 notice, and navigation buttons per user request -->
|
|
|
|
<div class="hvac-event-form">
|
|
<?php
|
|
// Display any success/error messages
|
|
if (isset($_GET['success'])) {
|
|
echo '<div class="hvac-success-message">Event created successfully!</div>';
|
|
}
|
|
if (isset($_GET['error'])) {
|
|
echo '<div class="hvac-error-message">Error creating event. Please try again.</div>';
|
|
}
|
|
|
|
// Render the native HVAC event creation form
|
|
if (isset($form_builder)) {
|
|
echo $form_builder->render();
|
|
} else {
|
|
echo '<div class="hvac-error-message">';
|
|
echo '<p><strong>Form Builder Not Available</strong></p>';
|
|
echo '<p>The HVAC Event Form Builder is not loaded. Please ensure the plugin is properly activated.</p>';
|
|
echo '<p><a href="' . esc_url(home_url('/trainer/dashboard/')) . '" class="button">Return to Dashboard</a></p>';
|
|
echo '</div>';
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Selection Modal -->
|
|
<div class="hvac-template-modal" id="template-modal" style="display: none;">
|
|
<div class="modal-overlay" id="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Choose Event Template</h3>
|
|
<button type="button" class="modal-close" id="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="template-categories">
|
|
<button type="button" class="category-btn active" data-category="all">All Templates</button>
|
|
<button type="button" class="category-btn" data-category="general">General</button>
|
|
<button type="button" class="category-btn" data-category="training">Training</button>
|
|
<button type="button" class="category-btn" data-category="workshop">Workshop</button>
|
|
<button type="button" class="category-btn" data-category="certification">Certification</button>
|
|
</div>
|
|
<div class="templates-grid" id="templates-grid">
|
|
<!-- Templates will be loaded dynamically -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn-secondary" id="modal-cancel">Cancel</button>
|
|
<button type="button" class="btn-primary" id="apply-template" disabled>Apply Template</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
jQuery(document).ready(function($) {
|
|
// New autosave functionality with status bar
|
|
let autoSaveTimeout;
|
|
let lastAutoSaveTime = null;
|
|
let selectedTemplateId = null;
|
|
let hasUnsavedChanges = false;
|
|
|
|
// Initialize autosave status bar
|
|
function initializeAutosave() {
|
|
// Check for existing draft
|
|
const draftData = localStorage.getItem('hvac_event_draft');
|
|
const draftTime = localStorage.getItem('hvac_event_draft_time');
|
|
|
|
if (draftData && draftTime) {
|
|
lastAutoSaveTime = new Date(parseInt(draftTime));
|
|
updateAutosaveDisplay();
|
|
$('#restore-btn').prop('disabled', false);
|
|
}
|
|
}
|
|
|
|
// Update the autosave display time
|
|
function updateAutosaveDisplay() {
|
|
if (lastAutoSaveTime) {
|
|
const timeStr = lastAutoSaveTime.toLocaleString();
|
|
$('#autosave-time').text(timeStr);
|
|
$('#restore-btn').prop('disabled', false);
|
|
} else {
|
|
$('#autosave-time').text('--');
|
|
$('#restore-btn').prop('disabled', true);
|
|
}
|
|
}
|
|
|
|
// Auto-save form data
|
|
function performAutoSave() {
|
|
if (!hasUnsavedChanges) return;
|
|
|
|
const formData = {};
|
|
$('.hvac-event-form input, .hvac-event-form select, .hvac-event-form textarea').each(function() {
|
|
const $field = $(this);
|
|
const name = $field.attr('name');
|
|
if (name && $field.val()) {
|
|
formData[name] = $field.val();
|
|
}
|
|
});
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem('hvac_event_draft', JSON.stringify(formData));
|
|
localStorage.setItem('hvac_event_draft_time', Date.now().toString());
|
|
|
|
lastAutoSaveTime = new Date();
|
|
updateAutosaveDisplay();
|
|
hasUnsavedChanges = false;
|
|
}
|
|
|
|
// Track form changes for autosave
|
|
$(document).on('input change', '.hvac-event-form input, .hvac-event-form select, .hvac-event-form textarea', function() {
|
|
hasUnsavedChanges = true;
|
|
|
|
// Clear existing timeout and set new one
|
|
clearTimeout(autoSaveTimeout);
|
|
autoSaveTimeout = setTimeout(performAutoSave, 2000); // Auto-save after 2 seconds of inactivity
|
|
});
|
|
|
|
// Status bar button handlers
|
|
$('#restore-btn').on('click', function() {
|
|
const draftData = localStorage.getItem('hvac_event_draft');
|
|
if (draftData) {
|
|
try {
|
|
const formData = JSON.parse(draftData);
|
|
Object.keys(formData).forEach(function(name) {
|
|
const $field = $('[name="' + name + '"]');
|
|
if ($field.length) {
|
|
$field.val(formData[name]);
|
|
}
|
|
});
|
|
alert('Draft restored successfully!');
|
|
} catch (e) {
|
|
alert('Error restoring draft data.');
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#clear-btn').on('click', function() {
|
|
if (confirm('Are you sure you want to clear all form fields? This cannot be undone.')) {
|
|
// Clear all form fields using the correct form selector
|
|
const $form = $('#hvac_event_form, .hvac-event-form form, form.hvac-event-form').first();
|
|
if ($form.length) {
|
|
$form[0].reset();
|
|
}
|
|
|
|
// Clear specific field types that reset() might miss - target within the form area
|
|
$('.hvac-event-form input[type="text"], .hvac-event-form input[type="email"], .hvac-event-form input[type="url"], .hvac-event-form textarea').val('');
|
|
$('.hvac-event-form select').prop('selectedIndex', 0);
|
|
$('.hvac-event-form input[type="checkbox"], .hvac-event-form input[type="radio"]').prop('checked', false);
|
|
|
|
// Clear any date/time pickers
|
|
$('.hvac-event-form input[type="datetime-local"], .hvac-event-form input[type="date"], .hvac-event-form input[type="time"]').val('');
|
|
|
|
// Clear any rich text editors if present
|
|
if (typeof tinyMCE !== 'undefined') {
|
|
tinyMCE.activeEditor && tinyMCE.activeEditor.setContent('');
|
|
}
|
|
|
|
// Focus on the first field after clearing
|
|
$('.hvac-event-form input:visible:first').focus();
|
|
|
|
// Trigger autosave after clearing to save the empty state
|
|
setTimeout(autoSave, 100);
|
|
|
|
console.log('Form fields cleared');
|
|
}
|
|
});
|
|
|
|
// Template modal functionality
|
|
let templateData = [];
|
|
|
|
// Sample template data (in real implementation, this would come from server)
|
|
templateData = [
|
|
{
|
|
id: 1,
|
|
title: 'Basic Training Workshop',
|
|
description: 'Standard HVAC training session with essential components',
|
|
category: 'training'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Certification Exam',
|
|
description: 'Comprehensive certification testing event',
|
|
category: 'certification'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'General Meeting',
|
|
description: 'Regular community meeting template',
|
|
category: 'general'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Hands-on Workshop',
|
|
description: 'Interactive workshop with practical exercises',
|
|
category: 'workshop'
|
|
}
|
|
];
|
|
|
|
$('#templates-btn').on('click', function() {
|
|
loadTemplatesModal();
|
|
$('#template-modal').show();
|
|
});
|
|
|
|
// Modal close handlers
|
|
$('#modal-close, #modal-cancel, #modal-overlay').on('click', function() {
|
|
$('#template-modal').hide();
|
|
selectedTemplateId = null;
|
|
$('#apply-template').prop('disabled', true);
|
|
});
|
|
|
|
// Category filter functionality
|
|
$(document).on('click', '.category-btn', function() {
|
|
$('.category-btn').removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
const category = $(this).data('category');
|
|
filterTemplates(category);
|
|
});
|
|
|
|
// Template card selection
|
|
$(document).on('click', '.template-card', function() {
|
|
$('.template-card').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
|
|
selectedTemplateId = $(this).data('template-id');
|
|
$('#apply-template').prop('disabled', false);
|
|
});
|
|
|
|
// Apply template functionality
|
|
$('#apply-template').on('click', function() {
|
|
if (selectedTemplateId) {
|
|
const template = templateData.find(t => t.id === selectedTemplateId);
|
|
if (template) {
|
|
applyTemplate(template);
|
|
$('#template-modal').hide();
|
|
}
|
|
}
|
|
});
|
|
|
|
function loadTemplatesModal() {
|
|
filterTemplates('all');
|
|
}
|
|
|
|
function filterTemplates(category) {
|
|
const filteredTemplates = category === 'all'
|
|
? templateData
|
|
: templateData.filter(t => t.category === category);
|
|
|
|
const grid = $('#templates-grid');
|
|
grid.empty();
|
|
|
|
filteredTemplates.forEach(function(template) {
|
|
const card = $('<div class="template-card" data-template-id="' + template.id + '">' +
|
|
'<h4>' + template.title + '</h4>' +
|
|
'<p>' + template.description + '</p>' +
|
|
'</div>');
|
|
grid.append(card);
|
|
});
|
|
}
|
|
|
|
function applyTemplate(template) {
|
|
// Apply template data to form fields based on template type
|
|
if (template.category === 'training') {
|
|
$('#event_title').val(template.title);
|
|
$('#event_description').val(template.description + '\n\nThis is a training event focused on practical skills development.');
|
|
} else if (template.category === 'certification') {
|
|
$('#event_title').val(template.title);
|
|
$('#event_description').val(template.description + '\n\nCertification exam with comprehensive testing.');
|
|
} else {
|
|
$('#event_title').val(template.title);
|
|
$('#event_description').val(template.description);
|
|
}
|
|
|
|
hasUnsavedChanges = true;
|
|
performAutoSave();
|
|
}
|
|
|
|
// Hide Clear Template buttons with better selector
|
|
function hideClearTemplateButtons() {
|
|
$('button, input').filter(function() {
|
|
return $(this).text().includes('Clear Template') || $(this).val() === 'Clear Template';
|
|
}).hide();
|
|
}
|
|
|
|
// Initialize everything
|
|
initializeAutosave();
|
|
|
|
// Hide clear template buttons after form loads
|
|
setTimeout(hideClearTemplateButtons, 500);
|
|
|
|
// Also hide on any dynamic content updates
|
|
$(document).on('DOMNodeInserted', hideClearTemplateButtons);
|
|
});
|
|
</script>
|
|
|
|
<?php
|
|
get_footer();
|
|
?>
|