Initial commit
This commit is contained in:
Artem Mamonov
238
static/script.js
Normal file
238
static/script.js
Normal file
@@ -0,0 +1,238 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const projectList = document.getElementById('project-list');
|
||||
const loginForm = document.getElementById('login-form');
|
||||
const albumTable = document.getElementById('album-table');
|
||||
const albumView = document.getElementById('album-view');
|
||||
const albumName = document.getElementById('album-name');
|
||||
const imageGallery = document.getElementById('image-gallery');
|
||||
const uploadButton = document.getElementById('upload-button');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const uploadProgress = document.getElementById('upload-progress');
|
||||
|
||||
let currentAlbumId = null;
|
||||
let currentIndex = 0;
|
||||
|
||||
const checkLoginStatus = async () => {
|
||||
try {
|
||||
const response = await fetch('/albums', { credentials: 'include' });
|
||||
if (response.ok) {
|
||||
loginForm.style.display = 'none';
|
||||
loadProjects();
|
||||
} else {
|
||||
loginForm.style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking login status:', error);
|
||||
loginForm.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
const loadProjects = async () => {
|
||||
try {
|
||||
const response = await fetch('/albums', { credentials: 'include' });
|
||||
const data = await response.json();
|
||||
projectList.innerHTML = '';
|
||||
if (data !== undefined && data.albums !== null) {
|
||||
data.albums.forEach(album => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${album.name}</td>
|
||||
<td>${album.created_at}</td>
|
||||
<td>${album.expire_at}</td>
|
||||
<td>${album.likes}</td>
|
||||
<td><a href="#" data-id="${album.id}" class="view-album">View Album</a></td>
|
||||
`;
|
||||
projectList.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
albumTable.style.display = 'block';
|
||||
} catch (error) {
|
||||
console.error('Error loading projects:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async (event) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(loginForm);
|
||||
try {
|
||||
const response = await fetch('/login', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
if (response.ok) {
|
||||
loginForm.style.display = 'none';
|
||||
loadProjects();
|
||||
} else {
|
||||
alert('Login failed');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error logging in:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadAlbum = async (albumId) => {
|
||||
currentAlbumId = albumId;
|
||||
albumTable.style.display = 'none'; // Hide the album table when viewing an album
|
||||
try {
|
||||
const response = await fetch(`/albums/${albumId}/list`);
|
||||
const data = await response.json();
|
||||
albumView.style.display = 'block';
|
||||
albumName.textContent = data.name;
|
||||
imageGallery.innerHTML = '';
|
||||
data.images.forEach((image, index) => {
|
||||
const fileType = image.split('.').pop();
|
||||
const item = document.createElement('div');
|
||||
item.className = 'gallery-item';
|
||||
item.dataset.index = index;
|
||||
if (fileType === 'mp4') {
|
||||
item.innerHTML = `
|
||||
<video src="${image}" class="gallery-thumb" data-id="${image}"></video>
|
||||
`;
|
||||
} else {
|
||||
item.innerHTML = `
|
||||
<img src="${image}" class="gallery-thumb" data-id="${image}">
|
||||
`;
|
||||
}
|
||||
imageGallery.appendChild(item);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading album:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = async (formData, albumId) => {
|
||||
progressBar.style.display = 'block';
|
||||
try {
|
||||
await fetch(`/album/${albumId}/upload`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
credentials: 'include',
|
||||
onUploadProgress: (progressEvent) => {
|
||||
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
||||
uploadProgress.style.width = `${percentCompleted}%`;
|
||||
uploadProgress.textContent = `${percentCompleted}%`;
|
||||
}
|
||||
});
|
||||
progressBar.style.display = 'none';
|
||||
loadAlbum(albumId);
|
||||
} catch (error) {
|
||||
console.error('Error uploading images:', error);
|
||||
progressBar.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
const handleFiles = (files) => {
|
||||
const formData = new FormData();
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
formData.append('files[]', files[i]);
|
||||
}
|
||||
handleUpload(formData, currentAlbumId);
|
||||
};
|
||||
|
||||
const openModal = (index) => {
|
||||
const items = document.querySelectorAll('.gallery-thumb');
|
||||
currentIndex = index;
|
||||
const item = items[currentIndex];
|
||||
if (item.tagName === 'VIDEO') {
|
||||
document.getElementById('modal-content').innerHTML = `
|
||||
<video controls autoplay>
|
||||
<source src="${item.dataset.id}" type="video/mp4">
|
||||
</video>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById('modal-content').innerHTML = `
|
||||
<img src="${item.dataset.id}">
|
||||
`;
|
||||
}
|
||||
document.getElementById('modal').style.display = 'flex';
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
document.getElementById('modal').style.display = 'none';
|
||||
const video = document.querySelector('#modal-content video');
|
||||
if (video) {
|
||||
video.pause();
|
||||
}
|
||||
};
|
||||
|
||||
const nextModal = () => {
|
||||
const items = document.querySelectorAll('.gallery-thumb');
|
||||
currentIndex = (currentIndex + 1) % items.length;
|
||||
openModal(currentIndex);
|
||||
};
|
||||
|
||||
const prevModal = () => {
|
||||
const items = document.querySelectorAll('.gallery-thumb');
|
||||
currentIndex = (currentIndex - 1 + items.length) % items.length;
|
||||
openModal(currentIndex);
|
||||
};
|
||||
|
||||
const openAddProjectModal = () => {
|
||||
document.getElementById('add-project-modal').style.display = 'flex';
|
||||
};
|
||||
|
||||
const closeAddProjectModal = () => {
|
||||
document.getElementById('add-project-modal').style.display = 'none';
|
||||
};
|
||||
|
||||
const handleAddProject = async (event) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.target);
|
||||
try {
|
||||
const response = await fetch('/albums/new', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
credentials: 'include'
|
||||
});
|
||||
if (response.ok) {
|
||||
closeAddProjectModal();
|
||||
loadProjects();
|
||||
} else {
|
||||
alert('Failed to create project');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating project:', error);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.classList.contains('view-album')) {
|
||||
const albumId = event.target.dataset.id;
|
||||
loadAlbum(albumId);
|
||||
}
|
||||
if (event.target.classList.contains('gallery-thumb')) {
|
||||
openModal(parseInt(event.target.parentElement.dataset.index));
|
||||
}
|
||||
if (event.target.id === 'close-modal') {
|
||||
closeModal();
|
||||
}
|
||||
if (event.target.id === 'modal-next') {
|
||||
nextModal();
|
||||
}
|
||||
if (event.target.id === 'modal-prev') {
|
||||
prevModal();
|
||||
}
|
||||
if (event.target.id === 'add-project') {
|
||||
openAddProjectModal();
|
||||
}
|
||||
if (event.target.id === 'close-add-project-modal') {
|
||||
closeAddProjectModal();
|
||||
}
|
||||
});
|
||||
|
||||
loginForm.addEventListener('submit', handleLogin);
|
||||
|
||||
document.getElementById('add-project-form').addEventListener('submit', handleAddProject);
|
||||
|
||||
uploadButton.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', () => {
|
||||
handleFiles(fileInput.files);
|
||||
});
|
||||
|
||||
checkLoginStatus(); // Check if the user is logged in on page load
|
||||
});
|
||||
Reference in New Issue
Block a user