235 lines
11 KiB
JavaScript
235 lines
11 KiB
JavaScript
const { ipcRenderer } = require('electron');
|
|
const axios = require('axios');
|
|
const apiUrl = "https://ms.bbrunson.com"; // Ensure this is correct
|
|
|
|
// Load profile information
|
|
async function loadProfile(user, isOwn) { // Make async to use await
|
|
if (!user) {
|
|
console.log("No user specified for profile load.");
|
|
// Clear fields if necessary (handled in HTML generation now)
|
|
return;
|
|
}
|
|
|
|
console.log(`Loading profile for ${user}, isOwn: ${isOwn}`);
|
|
|
|
// Fetch Banner/Background
|
|
axios.get(`${apiUrl}/backgroundPick/${user}`)
|
|
.then(res => {
|
|
const pick = res.data.pick;
|
|
const bannerArea = document.getElementById('bannerArea');
|
|
if (!bannerArea) return; // Element not found
|
|
|
|
let bannerHTML = "";
|
|
if (pick && pick !== "None" && pick.match(/\.mp4$/i)) {
|
|
// Use video - ensure paths are correct and server serves video
|
|
bannerHTML = `<video autoplay muted loop style="width:100%; height:100%; object-fit:cover;">
|
|
<source src="${apiUrl}/backgroundpick/${pick}" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>`;
|
|
} else {
|
|
// Use image banner (even if pick is None, try loading default banner)
|
|
bannerHTML = `<img src="${apiUrl}/banner/${user}" alt="Banner" style="width:100%; height:100%; object-fit:cover;" onerror="this.style.display='none'; this.parentElement.style.backgroundColor='#444';">`; // Default background color on error
|
|
}
|
|
|
|
// Keep existing PFP container HTML structure from getProfilePageHTML
|
|
const pfpContainerHTML = bannerArea.querySelector('.pfp-container')?.outerHTML || `
|
|
<div class="pfp-container" id="profilePicContainer">
|
|
<img id="profilePic" src="${apiUrl}/pfp/${user}" alt="Profile Picture" onerror="this.style.display='none'; this.parentElement.style.background='#555';">
|
|
</div>`; // Re-add PFP container logic
|
|
|
|
bannerArea.innerHTML = bannerHTML + pfpContainerHTML; // Combine banner and PFP
|
|
})
|
|
.catch(err => {
|
|
console.error("Error loading banner:", err);
|
|
const bannerArea = document.getElementById('bannerArea');
|
|
if (bannerArea) bannerArea.style.backgroundColor = '#444'; // Fallback background
|
|
// Ensure PFP container still exists even on banner error
|
|
if (bannerArea && !bannerArea.querySelector('.pfp-container')) {
|
|
bannerArea.innerHTML += `
|
|
<div class="pfp-container" id="profilePicContainer">
|
|
<img id="profilePic" src="${apiUrl}/pfp/${user}" alt="Profile Picture" onerror="this.style.display='none'; this.parentElement.style.background='#555';">
|
|
</div>`;
|
|
}
|
|
});
|
|
|
|
// Fetch Bio
|
|
axios.get(`${apiUrl}/profileBio/${user}`)
|
|
.then(res => {
|
|
const bioElement = document.getElementById('profileBio');
|
|
if (bioElement) bioElement.innerText = "Bio: " + (res.data.pick || "Not set");
|
|
if (isOwn) {
|
|
const bioInput = document.getElementById('bioInput');
|
|
if (bioInput) bioInput.value = res.data.pick || ""; // Pre-fill own bio input
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error("Error loading bio:", err);
|
|
const bioElement = document.getElementById('profileBio');
|
|
if (bioElement) bioElement.innerText = "Bio: Error loading";
|
|
});
|
|
|
|
// Fetch Profile Song
|
|
axios.get(`${apiUrl}/profileSong/${user}`)
|
|
.then(res => {
|
|
const songElement = document.getElementById('profileSong');
|
|
if (songElement) songElement.innerText = "Profile Song: " + (res.data.pick || "Not set");
|
|
if (isOwn) {
|
|
const songInput = document.getElementById('songInput');
|
|
if (songInput) songInput.value = res.data.pick || ""; // Pre-fill own song input
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error("Error loading profile song:", err);
|
|
const songElement = document.getElementById('profileSong');
|
|
if (songElement) songElement.innerText = "Profile Song: Error loading";
|
|
});
|
|
|
|
// Fetch Accent Color
|
|
axios.get(`${apiUrl}/pfpColor/${user}`)
|
|
.then(res => {
|
|
const color = res.data.colorHexData || '#ffffff'; // Default to white if not set
|
|
document.body.style.borderTop = `10px solid ${color}`;
|
|
if (isOwn) {
|
|
const colorInput = document.getElementById('pfpColorInput');
|
|
if (colorInput) colorInput.value = color; // Pre-fill own color input
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error("Error loading accent color:", err);
|
|
document.body.style.borderTop = '10px solid #ffffff'; // Default on error
|
|
});
|
|
}
|
|
|
|
// Setup event listeners
|
|
function setupEventListeners(user, isOwn, currentOtherUsername) { // Added currentOtherUsername parameter
|
|
const backBtn = document.getElementById('backBtn');
|
|
if (backBtn) {
|
|
backBtn.addEventListener('click', () => {
|
|
ipcRenderer.send('back-to-main');
|
|
});
|
|
} else {
|
|
console.error("Back button not found");
|
|
}
|
|
|
|
|
|
if (isOwn) {
|
|
// --- Listeners for OWN profile editing ---
|
|
const saveBioBtn = document.getElementById('saveBio');
|
|
if (saveBioBtn) {
|
|
saveBioBtn.addEventListener('click', () => {
|
|
const bio = document.getElementById('bioInput')?.value;
|
|
if (typeof bio === 'string') { // Check if value was retrieved
|
|
axios.post(apiUrl, { action: "profileBio", user: user, bio: bio })
|
|
.then(() => { alert("Bio updated"); loadProfile(user, isOwn); }) // Reload profile on success
|
|
.catch(err => { console.error("Error updating bio:", err); alert("Failed to update bio."); });
|
|
}
|
|
});
|
|
}
|
|
|
|
const saveSongBtn = document.getElementById('saveSong');
|
|
if (saveSongBtn) {
|
|
saveSongBtn.addEventListener('click', () => {
|
|
const song = document.getElementById('songInput')?.value;
|
|
if (typeof song === 'string') {
|
|
axios.post(apiUrl, { action: "songPick", user: user, imageData: song }) // Assuming 'imageData' is the correct field name
|
|
.then(() => { alert("Profile song updated"); loadProfile(user, isOwn); })
|
|
.catch(err => { console.error("Error updating profile song:", err); alert("Failed to update profile song."); });
|
|
}
|
|
});
|
|
}
|
|
|
|
const saveColorBtn = document.getElementById('savePfpColor');
|
|
if (saveColorBtn) {
|
|
saveColorBtn.addEventListener('click', () => {
|
|
const color = document.getElementById('pfpColorInput')?.value;
|
|
if (color) {
|
|
axios.post(apiUrl, { action: "pfpColor", user: user, imageData: color }) // Assuming 'imageData' is the correct field name
|
|
.then(() => { alert("Accent color updated"); loadProfile(user, isOwn); })
|
|
.catch(err => { console.error("Error updating accent color:", err); alert("Failed to update accent color."); });
|
|
}
|
|
});
|
|
}
|
|
|
|
// Placeholder listeners for file uploads (require more complex implementation)
|
|
const uploadPfpBtn = document.getElementById('uploadPfp');
|
|
if (uploadPfpBtn) {
|
|
uploadPfpBtn.addEventListener('click', () => {
|
|
alert("PFP upload not fully implemented in this example.");
|
|
// Implementation would involve:
|
|
// 1. Getting the file from 'pfpInput'.
|
|
// 2. Creating FormData.
|
|
// 3. Sending a POST request with the file to a specific endpoint on your server.
|
|
});
|
|
}
|
|
|
|
const uploadBannerBtn = document.getElementById('uploadBanner');
|
|
if (uploadBannerBtn) {
|
|
uploadBannerBtn.addEventListener('click', () => {
|
|
alert("Banner upload not fully implemented in this example.");
|
|
// Similar implementation to PFP upload.
|
|
});
|
|
}
|
|
|
|
const saveUsernameBtn = document.getElementById('saveUsername');
|
|
if (saveUsernameBtn) {
|
|
saveUsernameBtn.addEventListener('click', () => {
|
|
const newUsername = document.getElementById('usernameInput')?.value;
|
|
if (newUsername && newUsername.trim()) {
|
|
ipcRenderer.send('set-username', newUsername.trim());
|
|
} else {
|
|
alert("Username cannot be empty.");
|
|
}
|
|
});
|
|
}
|
|
|
|
ipcRenderer.on('username-set-confirm', (event, result) => {
|
|
if (result.success) {
|
|
alert(`Username updated to '${result.newUsername}'`);
|
|
document.getElementById('usernameDisplay').textContent = result.newUsername;
|
|
} else {
|
|
alert(`Failed to update username: ${result.message}`);
|
|
}
|
|
});
|
|
|
|
|
|
} else {
|
|
// --- Listener for OTHER user profile (setting the tracked user) ---
|
|
const saveOtherUserBtn = document.getElementById('saveOtherUsername');
|
|
const otherUsernameInput = document.getElementById('otherUsernameInput');
|
|
const statusElement = document.getElementById('saveStatus');
|
|
|
|
if (saveOtherUserBtn && otherUsernameInput && statusElement) {
|
|
// Pre-fill input with the current tracked username
|
|
otherUsernameInput.value = currentOtherUsername || '';
|
|
|
|
saveOtherUserBtn.addEventListener('click', () => {
|
|
const newOtherUser = otherUsernameInput.value.trim();
|
|
statusElement.textContent = 'Saving...';
|
|
// Send the updated username to the main process
|
|
ipcRenderer.send('set-other-user', newOtherUser);
|
|
});
|
|
|
|
// Listen for confirmation from the main process
|
|
ipcRenderer.once('other-user-set-confirm', (event, result) => {
|
|
if (result.success) {
|
|
statusElement.textContent = `Saved! Tracking '${result.newUser}'. Changes reflected on main page.`;
|
|
// Update the displayed username on this page immediately
|
|
const usernameDisplay = document.getElementById('usernameDisplay');
|
|
if(usernameDisplay) usernameDisplay.textContent = result.newUser || 'Not Set';
|
|
// Potentially reload profile data for the new user if needed, or just go back.
|
|
// For simplicity, we just show saved message. User can go back manually.
|
|
} else {
|
|
statusElement.textContent = 'Failed to save.';
|
|
}
|
|
});
|
|
|
|
} else {
|
|
if (!saveOtherUserBtn) console.error("Save Other User button not found");
|
|
if (!otherUsernameInput) console.error("Other Username input not found");
|
|
if (!statusElement) console.error("Status element not found");
|
|
}
|
|
}
|
|
}
|
|
|
|
// Export functions for use in getProfilePageHTML's script tag
|
|
module.exports = { loadProfile, setupEventListeners }; |