-
-
Accommodation Section
-
-
-
-
-
Features
-
-
-
-
- <% if (data.accommodation?.features && data.accommodation.features.length > 0) { %>
- <% data.accommodation.features.forEach((feature, index)=> { %>
-
-
-
-
- Title
-
-
- Description
-
-
-
-
Image
-
-
-
-
- <% if (feature.icon) { %>
-
- <% } %>
-
-
-
-
-
-
- <% }); %>
- <% } %>
-
+
-
-
-
-
-
-
-
-
-
Events Section
-
-
- Title
-
+
+
+
-
Events
-
- News Articles
+
+
-
- <% if (data.events?.items && data.events.items.length > 0) { %>
- <% data.events.items.forEach((event, index)=> { %>
-
-
-
-
-
Image
-
-
-
-
- <% if (event.imageUrl) { %>
-
- <% } %>
-
-
-
-
- Date
-
-
- Title
-
-
- Description
-
-
-
- Age Group
-
-
-
-
-
-
-
-
- <% }); %>
- <% } %>
-
+
@@ -540,20 +318,15 @@
-
-
@@ -573,25 +346,69 @@
form.addEventListener('submit', async function (e) {
e.preventDefault();
const submitBtn = document.getElementById('submitBtn');
- submitBtn.disabled = true;
- submitBtn.innerHTML = '
Saving...';
-
+ const originalHtml = submitBtn.innerHTML;
+
try {
+ // Collect all data into a single object
updateJsonData();
- this.submit();
+ // No more "Saving..." text or disabling button to keep UI "instant"
+ // submitBtn.disabled = true;
+ // submitBtn.innerHTML = '
Saving...';
+
+ // We'll send the individual section JSONs or construct one big one
+ const aboutData = {
+ hero: JSON.parse(document.getElementById('heroJson').value),
+ intro: JSON.parse(document.getElementById('introJson').value),
+ mission: JSON.parse(document.getElementById('missionJson').value),
+ features: JSON.parse(document.getElementById('featuresJson').value),
+ news: JSON.parse(document.getElementById('newsJson').value)
+ };
+
+ const response = await fetch('/api/about', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ aboutJson: JSON.stringify(aboutData) })
+ });
+
+ if (!response.ok) throw new Error('Update failed');
+
+ const result = await response.json();
+ if (result.success) {
+ showToast('Success', 'About Us updated successfully', 'success');
+
+ // Update the local state with returned data from server
+ // This ensures the UI is in sync with what was actually saved
+ if (result.data) {
+ originalFormData = result.data;
+ updateAllJsonInputs(originalFormData);
+ }
+ } else {
+ throw new Error(result.error || 'Failed to update');
+ }
} catch (error) {
- console.error('Error updating data:', error);
- alert('Failed to process form data. Please try again.');
- submitBtn.disabled = false;
- submitBtn.innerHTML = '
Save Changes';
+ console.error('Error:', error);
+ showToast('Error', error.message, 'error');
}
});
- document.querySelectorAll('.btn-upload-image').forEach(button => {
- button.addEventListener('click', function () {
- const targetInput = this.dataset.targetInput;
- const imageType = this.dataset.imageType;
+ document.body.addEventListener('click', function (e) {
+ const uploadBtn = e.target.closest('.btn-upload-image');
+ if (uploadBtn) {
+ const targetInput = uploadBtn.dataset.targetInput;
+ const imageType = uploadBtn.dataset.imageType;
openImageUploader(targetInput, imageType);
+ }
+ });
+
+ // Tab change listener to keep track of active tab
+ const tabs = document.querySelectorAll('a[data-bs-toggle="tab"]');
+ tabs.forEach(tab => {
+ tab.addEventListener('shown.bs.tab', function (e) {
+ const targetId = e.target.getAttribute('href').replace('#', '');
+ const activeTabInput = document.getElementById('activeTabInput');
+ if (activeTabInput) {
+ activeTabInput.value = targetId;
+ }
});
});
}
@@ -604,12 +421,9 @@
document.body.appendChild(fileInput);
function getPreviewDims(name) {
- if (/hero/i.test(name)) return { h: '300px', w: '100%' };
- if (/introMainImage/i.test(name)) return { h: '120px', w: '100%' };
- if (/newsletter/i.test(name)) return { h: '100px', w: '100%' };
- if (/^eventImage_/i.test(name)) return { h: '150px', w: '100%' };
- if (/^galleryImage_/i.test(name)) return { h: '100px', w: '100%' };
- return { h: '150px', w: '100%' };
+ if (/hero/i.test(name)) return { h: '250px', w: '100%' };
+ if (/intro/i.test(name) || /mission/i.test(name) || /features/i.test(name)) return { h: '150px', w: '100%' };
+ return { h: '120px', w: '100%' };
}
fileInput.onchange = async function (e) {
@@ -620,12 +434,11 @@
const formData = new FormData();
formData.append('image', file);
- // Disable upload button and show loading
+ // Disable upload button during upload
const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
const originalBtnHtml = uploadBtn ? uploadBtn.innerHTML : 'Upload';
if (uploadBtn) {
uploadBtn.disabled = true;
- uploadBtn.innerHTML = '
Uploading...';
}
const response = await fetch(`/admin/upload/image?imageType=${imageType}`, {
@@ -684,24 +497,20 @@
if (parent) parent.appendChild(img);
}
- // Show success message
- showToast('Success', 'Image uploaded successfully', 'success');
-
- // Restore button
+ // Removed toast for silent upload
+
+ // Restore button state
if (uploadBtn) {
uploadBtn.disabled = false;
- uploadBtn.innerHTML = originalBtnHtml;
}
-
} catch (error) {
console.error('Upload error:', error);
showToast('Error', 'Failed to upload image: ' + error.message, 'error');
- // Restore button
+ // Restore button state
const uploadBtn = document.querySelector(`[data-target-input="${targetInput}"]`);
if (uploadBtn) {
uploadBtn.disabled = false;
- uploadBtn.innerHTML = uploadBtn.innerHTML.replace('Uploading...', 'Upload');
}
} finally {
document.body.removeChild(fileInput);
@@ -714,7 +523,7 @@
function resetForm() {
if (confirm('Are you sure you want to reset all changes?')) {
updateAllJsonInputs(originalFormData);
- location.reload();
+ showToast('Reset', 'Form restored to last saved state', 'info');
}
}
@@ -769,64 +578,263 @@
}
function updateAllJsonInputs(data) {
- // Hero
- document.getElementById('heroJson').value = JSON.stringify(data.hero || {});
+ if (!data) return;
+
+ // 1. Hero
+ const hero = data.hero || {};
+ document.getElementById('heroJson').value = JSON.stringify(hero);
+ document.getElementById('heroTitle').value = hero.title || '';
+ document.getElementById('heroBreadcrumb').value = (hero.breadcrumb || []).join(', ');
+ document.getElementById('heroBackgroundImage').value = hero.backgroundImage || '';
+ updateImagePreview('heroBackgroundImage', hero.backgroundImage);
- // Introduction
- document.getElementById('introductionJson').value = JSON.stringify(data.introduction || {});
+ // 2. Intro
+ const intro = data.intro || {};
+ document.getElementById('introJson').value = JSON.stringify(intro);
+ document.getElementById('introSubheading').value = intro.subheading || '';
+ document.getElementById('introHeading').value = intro.heading || '';
+ document.getElementById('introDescription').value = intro.description || '';
+ document.getElementById('introImage').value = intro.image || '';
+ updateImagePreview('introImage', intro.image);
- // Statistics
- document.getElementById('statisticsJson').value = JSON.stringify(data.statistics || {});
+ // 3. Mission
+ const mission = data.mission || {};
+ document.getElementById('missionJson').value = JSON.stringify(mission);
+ document.getElementById('missionSubheading').value = mission.subheading || '';
+ document.getElementById('missionHeading').value = mission.heading || '';
+ document.getElementById('missionDescription').value = mission.description || '';
+ document.getElementById('missionCtaLabel').value = mission.ctaButton?.label || '';
+ document.getElementById('missionCtaHref').value = mission.ctaButton?.href || '';
+
+ ['main', 'secondary', 'bgShape', 'planeShape', 'topShape', 'globeShape'].forEach(k => {
+ const el = document.getElementById('missionImg_' + k);
+ const val = mission.images?.[k] || '';
+ if (el) {
+ el.value = val;
+ updateImagePreview('missionImg_' + k, val);
+ }
+ });
+ populateMissionItems(mission.items || []);
+ populateMissionFeatures(mission.features || []);
- // Accommodation
- document.getElementById('accommodationJson').value = JSON.stringify(data.accommodation || {});
+ // 4. Features
+ const features = data.features || {};
+ document.getElementById('featuresJson').value = JSON.stringify(features);
+ document.getElementById('featuresSubheading').value = features.subheading || '';
+ document.getElementById('featuresHeading').value = features.heading || '';
+ document.getElementById('featuresDescription').value = features.description || '';
+ document.getElementById('featuresBgImage').value = features.backgroundImage || '';
+ document.getElementById('featuresImage').value = features.image || '';
+ document.getElementById('featuresCtaLabel').value = features.ctaButton?.label || '';
+ document.getElementById('featuresCtaHref').value = features.ctaButton?.href || '';
+ updateImagePreview('featuresBgImage', features.backgroundImage);
+ updateImagePreview('featuresImage', features.image);
+ populateFeatureItems(features.items || []);
- // Activities
- document.getElementById('activitiesJson').value = JSON.stringify(data.activities || {});
-
- // Newsletter
- document.getElementById('newsletterJson').value = JSON.stringify(data.newsletter || {});
-
- // Events
- document.getElementById('eventsJson').value = JSON.stringify(data.events || {});
-
- // Populate dynamic content
- populateServicesFromData(data.introduction?.services || []);
- populateFeaturesFromData(data.accommodation?.features || []);
- populateEventsFromData(data.events?.items || []);
- populateGalleryFromData(data.activities?.gallery || []);
- populateStatsFromData(data.statistics?.items || []);
+ // 5. News
+ const news = data.news || {};
+ document.getElementById('newsJson').value = JSON.stringify(news);
+ document.getElementById('newsSubheading').value = news.subheading || '';
+ document.getElementById('newsHeading').value = news.heading || '';
+ document.getElementById('newsCtaLabel').value = news.ctaButton?.label || '';
+ document.getElementById('newsCtaHref').value = news.ctaButton?.href || '';
+ populateNewsItems(news.items || []);
}
- function addStat() {
- const container = document.getElementById('statsContainer');
- const index = container.children.length;
+ function updateImagePreview(inputId, imagePath) {
+ if (!imagePath) return;
+ const input = document.getElementById(inputId);
+ if (!input) return;
+
+ let card = input.closest('.card');
+ let previewImg = card ? card.querySelector('.uploaded-preview') : null;
+
+ if (!previewImg) {
+ const parent = input.closest('.input-group') || input.parentElement;
+ previewImg = parent ? parent.querySelector('.uploaded-preview') : null;
+ }
+
+ if (previewImg) {
+ previewImg.src = imagePath;
+ }
+ }
+
+ // --- Helper dynamic populations ---
+
+ function addMissionItem() {
+ const container = document.getElementById('missionItemsContainer');
+ const idx = container.children.length;
const html = `
-
- `;
+
`;
container.insertAdjacentHTML('beforeend', html);
}
- function removeStat(button) {
- button.closest('.stat-item').remove();
+ function populateMissionItems(items) {
+ const container = document.getElementById('missionItemsContainer');
+ container.innerHTML = '';
+ items.forEach((item, i) => {
+ addMissionItem();
+ const last = container.lastElementChild;
+ last.querySelector(`[name="missionItemIcon_${i}"]`).value = item.icon || '';
+ last.querySelector(`[name="missionItemLabel_${i}"]`).value = item.label || '';
+ last.querySelector(`[name="missionItemDesc_${i}"]`).value = item.description || '';
+ });
}
+ function addMissionFeature() {
+ const container = document.getElementById('missionFeaturesContainer');
+ const html = `
+
+ x
+
`;
+ container.insertAdjacentHTML('beforeend', html);
+ }
+
+ function populateMissionFeatures(features) {
+ const container = document.getElementById('missionFeaturesContainer');
+ container.innerHTML = '';
+ features.forEach(f => {
+ addMissionFeature();
+ container.lastElementChild.querySelector('input').value = f || '';
+ });
+ }
+
+ function addFeatureItem() {
+ const container = document.getElementById('featureItemsContainer');
+ const idx = container.children.length;
+ const html = `
+
`;
+ container.insertAdjacentHTML('beforeend', html);
+ }
+
+ function populateFeatureItems(items) {
+ const container = document.getElementById('featureItemsContainer');
+ container.innerHTML = '';
+ items.forEach((item, i) => {
+ addFeatureItem();
+ const last = container.lastElementChild;
+ last.querySelector(`[name="featureItemIcon_${i}"]`).value = item.icon || '';
+ last.querySelector(`[name="featureItemTitle_${i}"]`).value = item.title || '';
+ last.querySelector(`[name="featureItemDesc_${i}"]`).value = item.description || '';
+ });
+ }
+
+ function addNewsItem() {
+ const container = document.getElementById('newsItemsContainer');
+ const idx = container.children.length;
+ const html = `
+
`;
+ container.insertAdjacentHTML('beforeend', html);
+ }
+
+ function populateNewsItems(items) {
+ const container = document.getElementById('newsItemsContainer');
+ container.innerHTML = '';
+ items.forEach((item, i) => {
+ addNewsItem();
+ const last = container.lastElementChild;
+ last.querySelector(`[name="newsItemTitle_${i}"]`).value = item.title || '';
+ last.querySelector(`[name="newsItemCategory_${i}"]`).value = item.category || '';
+ last.querySelector(`[name="newsItemDate_${i}"]`).value = item.date || '';
+ last.querySelector(`[name="newsItemComments_${i}"]`).value = item.comments || 0;
+ last.querySelector(`[name="newsItemAuthorName_${i}"]`).value = item.author?.name || '';
+ last.querySelector(`[name="newsItemAuthorAvatar_${i}"]`).value = item.author?.avatar || '';
+ last.querySelector(`[name="newsItemLink_${i}"]`).value = item.link || '';
+ last.querySelector(`[name="newsItemThumbnail_${i}"]`).value = item.thumbnail || '';
+ });
+ }
+
+
+
function addService() {
const container = document.getElementById('servicesContainer');
const index = container.children.length;
@@ -852,234 +860,93 @@
container.insertAdjacentHTML('beforeend', html);
}
- function removeService(button) {
- button.closest('.service-item').remove();
- }
- function addFeature() {
- const container = document.getElementById('featuresContainer');
- const index = container.children.length;
- const html = `
-
-
-
-
- Title
-
-
- Description
-
-
-
-
Image
-
-
-
-
-
-
-
-
-
-
- `;
- container.insertAdjacentHTML('beforeend', html);
-
- // Add event listener for new upload button inside the new feature
- const newButton = container.lastElementChild.querySelector('.btn-upload-image');
- if (newButton) {
- newButton.addEventListener('click', function () {
- const targetInput = this.dataset.targetInput;
- const imageType = this.dataset.imageType;
- openImageUploader(targetInput, imageType);
- });
- }
- }
-
- function removeFeature(button) {
- button.closest('.feature-item').remove();
- }
-
- function addEvent() {
- const container = document.getElementById('eventsContainer');
- const index = container.children.length;
- const html = `
-
-
-
-
-
Image
-
-
-
-
-
-
-
-
- Date
-
-
- Title
-
-
- Description
-
-
-
- Age Group
-
-
-
-
-
-
-
-
- `;
- container.insertAdjacentHTML('beforeend', html);
-
- // Add event listener for new upload button
- const newButton = container.lastElementChild.querySelector('.btn-upload-image');
- newButton.addEventListener('click', function () {
- const targetInput = this.dataset.targetInput;
- const imageType = this.dataset.imageType;
- openImageUploader(targetInput, imageType);
- });
- }
-
- function removeEvent(button) {
- button.closest('.event-item').remove();
- }
function updateJsonData() {
try {
// Hero
const heroData = {
- title: (document.getElementById('heroTitle') || {}).value?.trim() || '',
- backgroundImage: (document.getElementById('heroBackgroundImage') || {}).value?.trim() || ''
+ title: document.getElementById('heroTitle').value.trim(),
+ breadcrumb: document.getElementById('heroBreadcrumb').value.split(',').map(s => s.trim()).filter(s => s !== ''),
+ backgroundImage: document.getElementById('heroBackgroundImage').value.trim()
};
document.getElementById('heroJson').value = JSON.stringify(heroData);
- // Introduction
- const servicesData = Array.from(document.querySelectorAll('.service-item'))
- .map((item) => {
- const titleEl = item.querySelector('[name^="serviceTitle_"]') || item.querySelector('input');
- const descEl = item.querySelector('[name^="serviceDescription_"]') || item.querySelector('textarea');
- return {
- title: (titleEl?.value || '').trim(),
- description: (descEl?.value || '').trim()
- };
- })
- .filter(s => s.title !== '' || s.description !== '');
-
- const introductionData = {
- subtitle: (document.getElementById('introSubtitle') || {}).value?.trim() || '',
- title: (document.getElementById('introTitle') || {}).value?.trim() || '',
- description: (document.getElementById('introDescription') || {}).value?.trim() || '',
- mainImage: (document.getElementById('introMainImage') || {}).value?.trim() || '',
- services: servicesData
+ // Intro
+ const introData = {
+ subheading: document.getElementById('introSubheading').value.trim(),
+ heading: document.getElementById('introHeading').value.trim(),
+ description: document.getElementById('introDescription').value.trim(),
+ image: document.getElementById('introImage').value.trim()
};
- document.getElementById('introductionJson').value = JSON.stringify(introductionData);
+ document.getElementById('introJson').value = JSON.stringify(introData);
- // Statistics
- const statsItems = Array.from(document.querySelectorAll('.stat-item'))
- .map((item) => {
- const numEl = item.querySelector('[name^="statNumber_"]') || item.querySelectorAll('input')[0];
- const descEl = item.querySelector('[name^="statDescription_"]') || item.querySelectorAll('input')[1];
- return {
- number: (numEl?.value || '').trim(),
- description: (descEl?.value || '').trim()
- };
- })
- .filter(stat => stat.number !== '' || stat.description !== '');
- const statisticsData = { items: statsItems };
- document.getElementById('statisticsJson').value = JSON.stringify(statisticsData);
-
- // Accommodation
- const featuresItems = Array.from(document.querySelectorAll('.feature-item'))
- .map((item) => {
- const titleEl = item.querySelector('[name^="featureTitle_"]') || item.querySelector('input');
- const descEl = item.querySelector('[name^="featureDescription_"]') || item.querySelector('textarea');
- const iconEl = item.querySelector('[name^="featureIcon_"]') || item.querySelector('input');
- return {
- title: (titleEl?.value || '').trim(),
- description: (descEl?.value || '').trim(),
- icon: (iconEl?.value || '').trim()
- };
- })
- .filter(f => f.title !== '' || f.description !== '');
-
- const accommodationData = {
- subtitle: (document.getElementById('accommodationSubtitle') || {}).value?.trim() || '',
- title: (document.getElementById('accommodationTitle') || {}).value?.trim() || '',
- description: (document.getElementById('accommodationDescription') || {}).value?.trim() || '',
- features: featuresItems
+ // Mission
+ const missionData = {
+ subheading: document.getElementById('missionSubheading').value.trim(),
+ heading: document.getElementById('missionHeading').value.trim(),
+ description: document.getElementById('missionDescription').value.trim(),
+ images: {
+ main: document.getElementById('missionImg_main').value.trim(),
+ secondary: document.getElementById('missionImg_secondary').value.trim(),
+ bgShape: document.getElementById('missionImg_bgShape').value.trim(),
+ planeShape: document.getElementById('missionImg_planeShape').value.trim(),
+ topShape: document.getElementById('missionImg_topShape').value.trim(),
+ globeShape: document.getElementById('missionImg_globeShape').value.trim()
+ },
+ items: Array.from(document.querySelectorAll('.mission-item')).map(item => ({
+ icon: item.querySelector('[name^="missionItemIcon_"]').value.trim(),
+ label: item.querySelector('[name^="missionItemLabel_"]').value.trim(),
+ description: item.querySelector('[name^="missionItemDesc_"]').value.trim()
+ })).filter(i => i.label !== ''),
+ features: Array.from(document.querySelectorAll('.mission-feature-input')).map(input => input.value.trim()).filter(v => v !== ''),
+ ctaButton: {
+ label: document.getElementById('missionCtaLabel').value.trim(),
+ href: document.getElementById('missionCtaHref').value.trim()
+ }
};
- document.getElementById('accommodationJson').value = JSON.stringify(accommodationData);
+ document.getElementById('missionJson').value = JSON.stringify(missionData);
- // Activities
- const galleryItems = Array.from(document.querySelectorAll('.gallery-item'))
- .map((item) => {
- const imageEl = item.querySelector('[name^="galleryImage_"]') || item.querySelector('input');
- const titleEl = item.querySelector('[name^="galleryTitle_"]') || item.querySelectorAll('input')[1];
- const descEl = item.querySelector('[name^="galleryDescription_"]') || item.querySelector('textarea');
- return {
- image: (imageEl?.value || '').trim(),
- title: (titleEl?.value || '').trim(),
- description: (descEl?.value || '').trim()
- };
- })
- .filter(item => item.image !== '' || item.title !== '');
-
- const activitiesData = {
- subtitle: (document.getElementById('activitiesSubtitle') || {}).value?.trim() || '',
- title: (document.getElementById('activitiesTitle') || {}).value?.trim() || '',
- description: (document.getElementById('activitiesDescription') || {}).value?.trim() || '',
- gallery: galleryItems
+ // Features
+ const featuresData = {
+ backgroundImage: document.getElementById('featuresBgImage').value.trim(),
+ subheading: document.getElementById('featuresSubheading').value.trim(),
+ heading: document.getElementById('featuresHeading').value.trim(),
+ description: document.getElementById('featuresDescription').value.trim(),
+ image: document.getElementById('featuresImage').value.trim(),
+ items: Array.from(document.querySelectorAll('.feature-item-row')).map(item => ({
+ icon: item.querySelector('[name^="featureItemIcon_"]').value.trim(),
+ title: item.querySelector('[name^="featureItemTitle_"]').value.trim(),
+ description: item.querySelector('[name^="featureItemDesc_"]').value.trim()
+ })).filter(i => i.title !== ''),
+ ctaButton: {
+ label: document.getElementById('featuresCtaLabel').value.trim(),
+ href: document.getElementById('featuresCtaHref').value.trim()
+ }
};
- document.getElementById('activitiesJson').value = JSON.stringify(activitiesData);
+ document.getElementById('featuresJson').value = JSON.stringify(featuresData);
- // Newsletter
- const newsletterData = {
- imagePath: (document.getElementById('newsletterImagePath') || {}).value?.trim() || '',
- title: (document.getElementById('newsletterTitle') || {}).value?.trim() || '',
- description: (document.getElementById('newsletterDescription') || {}).value?.trim() || '',
- buttonText: (document.getElementById('newsletterButtonText') || {}).value?.trim() || ''
+ // News
+ const newsData = {
+ subheading: document.getElementById('newsSubheading').value.trim(),
+ heading: document.getElementById('newsHeading').value.trim(),
+ ctaButton: {
+ label: document.getElementById('newsCtaLabel').value.trim(),
+ href: document.getElementById('newsCtaHref').value.trim()
+ },
+ items: Array.from(document.querySelectorAll('.news-item-row')).map(item => ({
+ title: item.querySelector('[name^="newsItemTitle_"]').value.trim(),
+ category: item.querySelector('[name^="newsItemCategory_"]').value.trim(),
+ date: item.querySelector('[name^="newsItemDate_"]').value.trim(),
+ comments: parseInt(item.querySelector('[name^="newsItemComments_"]').value) || 0,
+ author: {
+ name: item.querySelector('[name^="newsItemAuthorName_"]').value.trim(),
+ avatar: item.querySelector('[name^="newsItemAuthorAvatar_"]').value.trim()
+ },
+ link: item.querySelector('[name^="newsItemLink_"]').value.trim(),
+ thumbnail: item.querySelector('[name^="newsItemThumbnail_"]').value.trim()
+ })).filter(i => i.title !== '')
};
- document.getElementById('newsletterJson').value = JSON.stringify(newsletterData);
-
- // Events
- const eventsItems = Array.from(document.querySelectorAll('.event-item')).map((item) => {
- const imageEl = item.querySelector('[name^="eventImage_"]') || item.querySelector('input');
- const dateEl = item.querySelector('[name^="eventDate_"]') || item.querySelector('input[type="text"]');
- const titleEl = item.querySelector('[name^="eventTitle_"]') || item.querySelector('input');
- const descEl = item.querySelector('[name^="eventDescription_"]') || item.querySelector('textarea');
- const ageEl = item.querySelector('[name^="eventAge_"]') || item.querySelectorAll('input')[3];
-
- return {
- imageUrl: (imageEl?.value || '').trim(),
- date: (dateEl?.value || '').trim(),
- title: (titleEl?.value || '').trim(),
- description: (descEl?.value || '').trim(),
- age: (ageEl?.value || '').trim()
- };
- }).filter(event => event.title !== '' || event.description !== '');
-
- const eventsData = {
- title: (document.getElementById('eventsTitle') || {}).value?.trim() || '',
- items: eventsItems
- };
- document.getElementById('eventsJson').value = JSON.stringify(eventsData);
+ document.getElementById('newsJson').value = JSON.stringify(newsData);
} catch (error) {
console.error('Error updating JSON data:', error);
@@ -1087,190 +954,5 @@
}
}
- // Helpers to populate DOM lists from data
- function populateStatsFromData(stats) {
- const container = document.getElementById('statsContainer');
- container.innerHTML = '';
- (stats || []).forEach((stat, i) => {
- addStat();
- const el = container.lastElementChild;
- el.querySelector(`[name="statNumber_${i}"]`).value = stat.number || '';
- el.querySelector(`[name="statDescription_${i}"]`).value = stat.description || '';
- });
- }
- function populateServicesFromData(services) {
- const container = document.getElementById('servicesContainer');
- container.innerHTML = '';
- (services || []).forEach((s, i) => {
- addService();
- const el = container.lastElementChild;
- el.querySelector(`[name="serviceTitle_${i}"]`).value = s.title || '';
- el.querySelector(`[name="serviceDescription_${i}"]`).value = s.description || '';
- });
- }
-
- function populateFeaturesFromData(features) {
- const container = document.getElementById('featuresContainer');
- container.innerHTML = '';
- (features || []).forEach((f, i) => {
- addFeature();
- const el = container.lastElementChild;
- el.querySelector(`[name="featureTitle_${i}"]`).value = f.title || '';
- el.querySelector(`[name="featureDescription_${i}"]`).value = f.description || '';
- // populate icon field and preview
- const iconInput = el.querySelector(`[name="featureIcon_${i}"]`);
- if (iconInput) iconInput.value = f.icon || '';
- try {
- let preview = el.querySelector('.uploaded-preview');
- const iconPath = f.icon || '';
- if (iconPath) {
- const previewUrl = (iconPath.startsWith('http://') || iconPath.startsWith('https://')) ? iconPath : (window.location.origin + iconPath);
- if (preview) {
- preview.src = previewUrl;
- preview.style.display = '';
- } else if (iconInput) {
- const parent = iconInput.parentElement || iconInput.closest('.input-group') || iconInput.closest('div');
- if (parent) {
- const img = document.createElement('img');
- img.src = previewUrl;
- img.className = 'img-thumbnail uploaded-preview mt-2';
- img.style.height = '100px';
- img.style.width = '100%';
- img.style.objectFit = 'cover';
- parent.insertAdjacentElement('afterend', img);
- }
- }
- } else if (preview) {
- preview.remove();
- }
- } catch (err) {
- console.error('populateFeaturesFromData preview error', err);
- }
- });
- }
-
- function populateEventsFromData(events) {
- const container = document.getElementById('eventsContainer');
- container.innerHTML = '';
- (events || []).forEach((ev, i) => {
- addEvent();
- const el = container.lastElementChild;
- el.querySelector(`[name="eventImage_${i}"]`).value = ev.imageUrl || '';
- el.querySelector(`[name="eventDate_${i}"]`).value = ev.date || '';
- el.querySelector(`[name="eventTitle_${i}"]`).value = ev.title || '';
- el.querySelector(`[name="eventDescription_${i}"]`).value = ev.description || '';
- el.querySelector(`[name="eventAge_${i}"]`).value = ev.age || '';
- // ensure preview exists or is updated for this event
- try {
- const input = el.querySelector(`[name="eventImage_${i}"]`);
- const parent = input.parentElement || input.closest('.input-group') || input.closest('div');
- let preview = el.querySelector('.uploaded-preview');
- const imagePath = ev.imageUrl || '';
- if (imagePath) {
- const previewUrl = (imagePath.startsWith('http://') || imagePath.startsWith('https://')) ? imagePath : (window.location.origin + imagePath);
- if (preview) {
- preview.src = previewUrl;
- preview.style.display = '';
- } else if (parent) {
- const img = document.createElement('img');
- img.src = previewUrl;
- img.className = 'img-thumbnail uploaded-preview mt-2';
- img.style.height = '150px';
- img.style.width = '100%';
- img.style.objectFit = 'cover';
- parent.insertAdjacentElement('afterend', img);
- }
- } else if (preview) {
- preview.remove();
- }
- } catch (err) {
- console.error('populateEventsFromData preview error', err);
- }
- });
- }
-
- function populateGalleryFromData(gallery) {
- const container = document.getElementById('activitiesGalleryContainer');
- container.innerHTML = '';
- (gallery || []).forEach((item, i) => {
- addGalleryItem();
- const el = container.lastElementChild;
- el.querySelector(`[name="galleryImage_${i}"]`).value = item.image || '';
- el.querySelector(`[name="galleryTitle_${i}"]`).value = item.title || '';
- el.querySelector(`[name="galleryDescription_${i}"]`).value = item.description || '';
- // ensure preview exists or is updated
- try {
- const input = el.querySelector(`[name="galleryImage_${i}"]`);
- const parent = input.parentElement || input.closest('.input-group') || input.closest('div');
- let preview = el.querySelector('.uploaded-preview');
- const imagePath = item.image || '';
- if (imagePath) {
- const previewUrl = (imagePath.startsWith('http://') || imagePath.startsWith('https://')) ? imagePath : (window.location.origin + imagePath);
- if (preview) {
- preview.src = previewUrl;
- preview.style.display = '';
- } else if (parent) {
- const img = document.createElement('img');
- img.src = previewUrl;
- img.className = 'img-thumbnail uploaded-preview mt-2';
- img.style.height = '100px';
- img.style.width = '100%';
- img.style.objectFit = 'cover';
- parent.insertAdjacentElement('afterend', img);
- }
- } else if (preview) {
- preview.remove();
- }
- } catch (err) {
- console.error('populateGalleryFromData preview error', err);
- }
- });
- }
-
- function addGalleryItem() {
- const container = document.getElementById('activitiesGalleryContainer');
- const index = container.children.length;
- const html = `
-
-
-
-
-
Image
-
-
-
-
-
-
- Title
-
-
- Description
-
-
-
-
-
-
-
- `;
- container.insertAdjacentHTML('beforeend', html);
-
- // Add event listener for new upload button
- const newButton = container.lastElementChild.querySelector('.btn-upload-image');
- newButton.addEventListener('click', function () {
- const targetInput = this.dataset.targetInput;
- const imageType = this.dataset.imageType;
- openImageUploader(targetInput, imageType);
- });
- }
-
- function removeGalleryItem(button) {
- button.closest('.gallery-item').remove();
- }
\ No newline at end of file
diff --git a/views/layouts/admin.ejs b/views/layouts/admin.ejs
index b132781..e05bac5 100644
--- a/views/layouts/admin.ejs
+++ b/views/layouts/admin.ejs
@@ -60,9 +60,6 @@
Footer
-
- About
-
About Us