Skip to content

Commit dbfe19c

Browse files
ralyodioralyodio
committed
feat: add FAQ page with contact form functionality and routing
1 parent 857ade9 commit dbfe19c

File tree

5 files changed

+353
-8
lines changed

5 files changed

+353
-8
lines changed

‎bin/generator.js‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -928,14 +928,30 @@ function addRouteToRouter(filePath, routePath, kebabCase, initializerName, requi
928928
throw new Error(`Route ${routePath} already exists in ${filePath}`);
929929
}
930930

931-
// Find the last route in the object
932-
const lastRouteIndex = content.lastIndexOf(',', routesEndIndex);
933-
if (lastRouteIndex === -1) {
934-
throw new Error(`Could not find the last route in ${filePath}`);
931+
// Find the proper insertion point by looking for the last complete route definition
932+
// Extract the routes section content
933+
const routesContent = content.substring(createRoutesIndex, routesEndIndex);
934+
935+
// Find all route definitions using a regex that matches the pattern
936+
// '/route-path': { ... } or '/route-path': '/views/...'
937+
const routePattern = /^\s*['"`]([^'"`]+)['"`]\s*:\s*(?:\{[\s\S]*?\}|['"`][^'"`]*['"`])\s*,?\s*$/gm;
938+
let lastRouteMatch = null;
939+
let match;
940+
941+
while ((match = routePattern.exec(routesContent)) !== null) {
942+
lastRouteMatch = match;
935943
}
936944

945+
if (!lastRouteMatch) {
946+
throw new Error(`Could not find any route definitions in ${filePath}`);
947+
}
948+
949+
// Find the end position of the last route in the original content
950+
const lastRouteEnd = createRoutesIndex + lastRouteMatch.index + lastRouteMatch[0].length;
951+
const insertionPoint = lastRouteEnd;
952+
937953
// Create the route definition
938-
let routeDefinition = `\n '${routePath}': {
954+
let routeDefinition = `,\n '${routePath}': {
939955
viewPath: '/views/${kebabCase}.html',
940956
afterRender: ${initializerName}`;
941957

@@ -949,8 +965,8 @@ function addRouteToRouter(filePath, routePath, kebabCase, initializerName, requi
949965

950966
routeDefinition += '\n }';
951967

952-
// Insert the route definition after the last route
953-
const newContent = content.slice(0, lastRouteIndex + 1) + routeDefinition + content.slice(lastRouteIndex + 1);
968+
// Insert the route definition at the proper location
969+
const newContent = content.slice(0, insertionPoint) + routeDefinition + content.slice(insertionPoint);
954970

955971
// Write the updated content back to the file
956972
fs.writeFileSync(filePath, newContent);

‎public/js/page-initializers.js‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -872,6 +872,148 @@ export function initTestFeaturePage() {
872872
}
873873

874874
/**
875+
* Initialize the faqs page
876+
*/
877+
export function initFaqsPage() {
878+
console.log('Initializing faqs page');
879+
880+
// Get the form element
881+
const form = document.getElementById('faqs-form');
882+
if (!form) {
883+
console.error('faqs form not found');
884+
return;
885+
}
886+
887+
// Get the result container
888+
const resultContainer = document.getElementById('form-result');
889+
if (!resultContainer) {
890+
console.error('Form result container not found');
891+
return;
892+
}
893+
894+
// Add submit event listener to the form
895+
form.addEventListener('submit', async (e) => {
896+
e.preventDefault();
897+
898+
// Show loading state
899+
const submitButton = form.querySelector('button[type="submit"]');
900+
const originalButtonText = submitButton.textContent;
901+
submitButton.textContent = 'Processing...';
902+
submitButton.disabled = true;
903+
904+
try {
905+
// Get form data
906+
const formData = new FormData(form);
907+
const formDataObj = Object.fromEntries(formData.entries());
908+
909+
// Process the form data
910+
console.log('Form data:', formDataObj);
911+
912+
// In a real application, you would send this data to a server
913+
// For this example, we'll just simulate a server response
914+
await new Promise(resolve => setTimeout(resolve, 1000));
915+
916+
// Show success message
917+
resultContainer.style.display = 'block';
918+
resultContainer.style.backgroundColor = '#d1fae5'; // Light green
919+
resultContainer.innerHTML = `
920+
<h3>Form Submitted Successfully</h3>
921+
<p>Thank you, ${formDataObj.name}! Your message has been received.</p>
922+
<p>We'll respond to ${formDataObj.email} as soon as possible.</p>
923+
`;
924+
925+
// Reset the form
926+
form.reset();
927+
} catch (error) {
928+
console.error('Error submitting form:', error);
929+
930+
// Show error message
931+
resultContainer.style.display = 'block';
932+
resultContainer.style.backgroundColor = '#fee2e2'; // Light red
933+
resultContainer.innerHTML = `
934+
<h3>Error Submitting Form</h3>
935+
<p>Sorry, there was an error processing your submission.</p>
936+
<p>Error: ${error.message || 'Unknown error'}</p>
937+
`;
938+
} finally {
939+
// Reset button state
940+
submitButton.textContent = originalButtonText;
941+
submitButton.disabled = false;
942+
}
943+
});
944+
}
945+
946+
/**
947+
* Initialize the test-fix page
948+
*/
949+
export function initTestFixPage() {
950+
console.log('Initializing test-fix page');
951+
952+
// Get the form element
953+
const form = document.getElementById('test-fix-form');
954+
if (!form) {
955+
console.error('test-fix form not found');
956+
return;
957+
}
958+
959+
// Get the result container
960+
const resultContainer = document.getElementById('form-result');
961+
if (!resultContainer) {
962+
console.error('Form result container not found');
963+
return;
964+
}
965+
966+
// Add submit event listener to the form
967+
form.addEventListener('submit', async (e) => {
968+
e.preventDefault();
969+
970+
// Show loading state
971+
const submitButton = form.querySelector('button[type="submit"]');
972+
const originalButtonText = submitButton.textContent;
973+
submitButton.textContent = 'Processing...';
974+
submitButton.disabled = true;
975+
976+
try {
977+
// Get form data
978+
const formData = new FormData(form);
979+
const formDataObj = Object.fromEntries(formData.entries());
980+
981+
// Process the form data
982+
console.log('Form data:', formDataObj);
983+
984+
// In a real application, you would send this data to a server
985+
// For this example, we'll just simulate a server response
986+
await new Promise(resolve => setTimeout(resolve, 1000));
987+
988+
// Show success message
989+
resultContainer.style.display = 'block';
990+
resultContainer.style.backgroundColor = '#d1fae5'; // Light green
991+
resultContainer.innerHTML = `
992+
<h3>Form Submitted Successfully</h3>
993+
<p>Thank you, ${formDataObj.name}! Your message has been received.</p>
994+
<p>We'll respond to ${formDataObj.email} as soon as possible.</p>
995+
`;
996+
997+
// Reset the form
998+
form.reset();
999+
} catch (error) {
1000+
console.error('Error submitting form:', error);
1001+
1002+
// Show error message
1003+
resultContainer.style.display = 'block';
1004+
resultContainer.style.backgroundColor = '#fee2e2'; // Light red
1005+
resultContainer.innerHTML = `
1006+
<h3>Error Submitting Form</h3>
1007+
<p>Sorry, there was an error processing your submission.</p>
1008+
<p>Error: ${error.message || 'Unknown error'}</p>
1009+
`;
1010+
} finally {
1011+
// Reset button state
1012+
submitButton.textContent = originalButtonText;
1013+
submitButton.disabled = false;
1014+
}
1015+
});
1016+
}/**
8751017
* Initialize manage subscription page
8761018
*/
8771019
export async function initManageSubscriptionPage() {
@@ -880,6 +1022,77 @@ export async function initManageSubscriptionPage() {
8801022
return initSubscriptionManagement();
8811023
}
8821024

1025+
/**
1026+
* Initialize the test-fix-2 page
1027+
*/
1028+
export function initTestFix-2Page() {
1029+
console.log('Initializing test-fix-2 page');
1030+
1031+
// Get the form element
1032+
const form = document.getElementById('test-fix-2-form');
1033+
if (!form) {
1034+
console.error('test-fix-2 form not found');
1035+
return;
1036+
}
1037+
1038+
// Get the result container
1039+
const resultContainer = document.getElementById('form-result');
1040+
if (!resultContainer) {
1041+
console.error('Form result container not found');
1042+
return;
1043+
}
1044+
1045+
// Add submit event listener to the form
1046+
form.addEventListener('submit', async (e) => {
1047+
e.preventDefault();
1048+
1049+
// Show loading state
1050+
const submitButton = form.querySelector('button[type="submit"]');
1051+
const originalButtonText = submitButton.textContent;
1052+
submitButton.textContent = 'Processing...';
1053+
submitButton.disabled = true;
1054+
1055+
try {
1056+
// Get form data
1057+
const formData = new FormData(form);
1058+
const formDataObj = Object.fromEntries(formData.entries());
1059+
1060+
// Process the form data
1061+
console.log('Form data:', formDataObj);
1062+
1063+
// In a real application, you would send this data to a server
1064+
// For this example, we'll just simulate a server response
1065+
await new Promise(resolve => setTimeout(resolve, 1000));
1066+
1067+
// Show success message
1068+
resultContainer.style.display = 'block';
1069+
resultContainer.style.backgroundColor = '#d1fae5'; // Light green
1070+
resultContainer.innerHTML = `
1071+
<h3>Form Submitted Successfully</h3>
1072+
<p>Thank you, ${formDataObj.name}! Your message has been received.</p>
1073+
<p>We'll respond to ${formDataObj.email} as soon as possible.</p>
1074+
`;
1075+
1076+
// Reset the form
1077+
form.reset();
1078+
} catch (error) {
1079+
console.error('Error submitting form:', error);
1080+
1081+
// Show error message
1082+
resultContainer.style.display = 'block';
1083+
resultContainer.style.backgroundColor = '#fee2e2'; // Light red
1084+
resultContainer.innerHTML = `
1085+
<h3>Error Submitting Form</h3>
1086+
<p>Sorry, there was an error processing your submission.</p>
1087+
<p>Error: ${error.message || 'Unknown error'}</p>
1088+
`;
1089+
} finally {
1090+
// Reset button state
1091+
submitButton.textContent = originalButtonText;
1092+
submitButton.disabled = false;
1093+
}
1094+
});
1095+
}
8831096
/**
8841097
* Initialize reset password page
8851098
*/

‎public/js/router.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import {
1212
initSubscriptionPage,
1313
initResetPasswordPage,
1414
initManageSubscriptionPage,
15-
initTestFeaturePage
15+
initTestFeaturePage,
16+
initFaqsPage
1617
} from './page-initializers.js';
1718

1819
// Create a DOM fragment with the default layout
@@ -451,6 +452,10 @@ export function defineRoutes(router) {
451452
});
452453
}
453454
},
455+
'/faqs': {
456+
viewPath: '/views/faqs.html',
457+
afterRender: initFaqsPage
458+
},
454459
'/test-feature': {
455460
viewPath: '/views/test-feature.html',
456461
afterRender: initTestFeaturePage

‎public/js/views/faqs.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* FAQs page functionality
3+
*/
4+
5+
/**
6+
* Initialize the faqs page
7+
*/
8+
function initFaqsPage() {
9+
console.log('Initializing faqs page');
10+
11+
// Get the form element
12+
const form = document.getElementById('faqs-form');
13+
if (!form) {
14+
console.error('faqs form not found');
15+
return;
16+
}
17+
18+
// Get the result container
19+
const resultContainer = document.getElementById('form-result');
20+
if (!resultContainer) {
21+
console.error('Form result container not found');
22+
return;
23+
}
24+
25+
// Add submit event listener to the form
26+
form.addEventListener('submit', async (e) => {
27+
e.preventDefault();
28+
29+
// Show loading state
30+
const submitButton = form.querySelector('button[type="submit"]');
31+
const originalButtonText = submitButton.textContent;
32+
submitButton.textContent = 'Processing...';
33+
submitButton.disabled = true;
34+
35+
try {
36+
// Get form data
37+
const formData = new FormData(form);
38+
const formDataObj = Object.fromEntries(formData.entries());
39+
40+
// Process the form data
41+
console.log('Form data:', formDataObj);
42+
43+
// In a real application, you would send this data to a server
44+
// For this example, we'll just simulate a server response
45+
await new Promise(resolve => setTimeout(resolve, 1000));
46+
47+
// Show success message
48+
resultContainer.style.display = 'block';
49+
resultContainer.style.backgroundColor = '#d1fae5'; // Light green
50+
resultContainer.innerHTML = `
51+
<h3>Form Submitted Successfully</h3>
52+
<p>Thank you, ${formDataObj.name}! Your message has been received.</p>
53+
<p>We'll respond to ${formDataObj.email} as soon as possible.</p>
54+
`;
55+
56+
// Reset the form
57+
form.reset();
58+
} catch (error) {
59+
console.error('Error submitting form:', error);
60+
61+
// Show error message
62+
resultContainer.style.display = 'block';
63+
resultContainer.style.backgroundColor = '#fee2e2'; // Light red
64+
resultContainer.innerHTML = `
65+
<h3>Error Submitting Form</h3>
66+
<p>Sorry, there was an error processing your submission.</p>
67+
<p>Error: ${error.message || 'Unknown error'}</p>
68+
`;
69+
} finally {
70+
// Reset button state
71+
submitButton.textContent = originalButtonText;
72+
submitButton.disabled = false;
73+
}
74+
});
75+
}
76+
77+
// Initialize the page when the DOM is loaded
78+
initFaqsPage();
79+
80+
// Also initialize on spa-transition-end event for SPA router
81+
document.addEventListener("spa-transition-end", initFaqsPage);

0 commit comments

Comments
 (0)