updateweb

website/admin/js/homepage.js

@@ -0,0 +1,196 @@
+// Homepage Editor JavaScript
+
+let homepageData = {};
+
+document.addEventListener("DOMContentLoaded", function () {
+  checkAuth().then((authenticated) => {
+    if (authenticated) {
+      loadHomepageSettings();
+    }
+  });
+});
+
+async function loadHomepageSettings() {
+  try {
+    const response = await fetch("/api/admin/homepage/settings", {
+      credentials: "include",
+    });
+    const data = await response.json();
+    if (data.success) {
+      homepageData = data.settings || {};
+      populateFields();
+    }
+  } catch (error) {
+    console.error("Failed to load homepage settings:", error);
+  }
+}
+
+function populateFields() {
+  // Hero Section
+  if (homepageData.hero) {
+    document.getElementById("heroEnabled").checked =
+      homepageData.hero.enabled !== false;
+    document.getElementById("heroHeadline").value =
+      homepageData.hero.headline || "";
+    document.getElementById("heroSubheading").value =
+      homepageData.hero.subheading || "";
+    document.getElementById("heroDescription").value =
+      homepageData.hero.description || "";
+    document.getElementById("heroCtaText").value =
+      homepageData.hero.ctaText || "";
+    document.getElementById("heroCtaLink").value =
+      homepageData.hero.ctaLink || "";
+    toggleSection("hero");
+  }
+
+  // Promotion Section
+  if (homepageData.promotion) {
+    document.getElementById("promotionEnabled").checked =
+      homepageData.promotion.enabled !== false;
+    document.getElementById("promotionTitle").value =
+      homepageData.promotion.title || "";
+    document.getElementById("promotionDescription").value =
+      homepageData.promotion.description || "";
+    toggleSection("promotion");
+  }
+
+  // Portfolio Section
+  if (homepageData.portfolio) {
+    document.getElementById("portfolioEnabled").checked =
+      homepageData.portfolio.enabled !== false;
+    document.getElementById("portfolioTitle").value =
+      homepageData.portfolio.title || "";
+    document.getElementById("portfolioDescription").value =
+      homepageData.portfolio.description || "";
+    document.getElementById("portfolioCount").value =
+      homepageData.portfolio.count || 6;
+    toggleSection("portfolio");
+  }
+}
+
+function toggleSection(sectionName) {
+  const enabled = document.getElementById(`${sectionName}Enabled`).checked;
+  const section = document.getElementById(`${sectionName}Section`);
+  const content = section.querySelector(".section-content");
+
+  if (enabled) {
+    section.classList.remove("disabled");
+    content
+      .querySelectorAll("input, textarea, button, select")
+      .forEach((el) => {
+        el.disabled = false;
+      });
+  } else {
+    section.classList.add("disabled");
+    content
+      .querySelectorAll("input, textarea, button, select")
+      .forEach((el) => {
+        el.disabled = true;
+      });
+  }
+}
+
+function previewImage(sectionName) {
+  const fileInput =
+    document.getElementById(`${sectionName}Background`) ||
+    document.getElementById(`${sectionName}Image`);
+  const preview = document.getElementById(`${sectionName}Preview`);
+
+  if (fileInput.files && fileInput.files[0]) {
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      preview.classList.remove("empty");
+      preview.innerHTML = `<img src="${e.target.result}" alt="Preview" />`;
+    };
+    reader.readAsDataURL(fileInput.files[0]);
+  }
+}
+
+function setLayout(sectionName, layout) {
+  const buttons = document.querySelectorAll(
+    `#${sectionName}Section .alignment-btn`
+  );
+  buttons.forEach((btn) => btn.classList.remove("active"));
+  event.target.closest(".alignment-btn").classList.add("active");
+}
+
+function setImagePosition(sectionName, position) {
+  const buttons = event.target
+    .closest(".alignment-selector")
+    .querySelectorAll(".alignment-btn");
+  buttons.forEach((btn) => btn.classList.remove("active"));
+  event.target.closest(".alignment-btn").classList.add("active");
+}
+
+function setTextAlignment(sectionName, alignment) {
+  const buttons = event.target
+    .closest(".alignment-selector")
+    .querySelectorAll(".alignment-btn");
+  buttons.forEach((btn) => btn.classList.remove("active"));
+  event.target.closest(".alignment-btn").classList.add("active");
+}
+
+async function saveHomepage() {
+  const settings = {
+    hero: {
+      enabled: document.getElementById("heroEnabled").checked,
+      headline: document.getElementById("heroHeadline").value,
+      subheading: document.getElementById("heroSubheading").value,
+      description: document.getElementById("heroDescription").value,
+      ctaText: document.getElementById("heroCtaText").value,
+      ctaLink: document.getElementById("heroCtaLink").value,
+    },
+    promotion: {
+      enabled: document.getElementById("promotionEnabled").checked,
+      title: document.getElementById("promotionTitle").value,
+      description: document.getElementById("promotionDescription").value,
+    },
+    portfolio: {
+      enabled: document.getElementById("portfolioEnabled").checked,
+      title: document.getElementById("portfolioTitle").value,
+      description: document.getElementById("portfolioDescription").value,
+      count: parseInt(document.getElementById("portfolioCount").value) || 6,
+    },
+  };
+
+  try {
+    const response = await fetch("/api/admin/homepage/settings", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify(settings),
+    });
+
+    const data = await response.json();
+    if (data.success) {
+      showSuccess(
+        "Homepage settings saved successfully! Changes are now live."
+      );
+    } else {
+      showError(data.message || "Failed to save homepage settings");
+    }
+  } catch (error) {
+    console.error("Failed to save homepage:", error);
+    showError("Failed to save homepage settings");
+  }
+}
+
+async function logout() {
+  try {
+    const response = await fetch("/api/admin/logout", {
+      method: "POST",
+      credentials: "include",
+    });
+    if (response.ok) window.location.href = "/admin/login.html";
+  } catch (error) {
+    console.error("Logout failed:", error);
+  }
+}
+
+function showSuccess(message) {
+  alert(message);
+}
+
+function showError(message) {
+  alert("Error: " + message);
+}