448 lines
19 KiB
Plaintext
448 lines
19 KiB
Plaintext
|
@model SkyArtShop.Models.Page
|
||
|
|
@{
|
||
|
|
Layout = "~/Views/Shared/_AdminLayout.cshtml";
|
||
|
|
ViewData["Title"] = "Edit Page";
|
||
|
|
}
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<form method="post" enctype="multipart/form-data" id="pageEditForm">
|
||
|
|
<div asp-validation-summary="All" class="text-danger mb-3"></div>
|
||
|
|
|
||
|
|
<ul class="nav nav-tabs mb-4" role="tablist">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link active" data-bs-toggle="tab" href="#basic-tab">Basic Info</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" data-bs-toggle="tab" href="#gallery-tab">Image Gallery</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" data-bs-toggle="tab" href="#team-tab">Team Members</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<div class="tab-content">
|
||
|
|
<!-- Basic Info Tab -->
|
||
|
|
<div class="tab-pane fade show active" id="basic-tab">
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Page Name</label>
|
||
|
|
<input class="form-control" asp-for="PageName" required />
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Title</label>
|
||
|
|
<input class="form-control" asp-for="Title" />
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Subtitle</label>
|
||
|
|
<input class="form-control" asp-for="Subtitle" />
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Content</label>
|
||
|
|
<textarea class="form-control" asp-for="Content" id="pageContent" rows="15"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="form-check mb-3">
|
||
|
|
<input asp-for="IsActive" class="form-check-input" type="checkbox" />
|
||
|
|
<label class="form-check-label">Active</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Image Gallery Tab -->
|
||
|
|
<div class="tab-pane fade" id="gallery-tab">
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Image Gallery (Right Sidebar)</label>
|
||
|
|
<p class="text-muted small">These images will appear on the right side of the About page</p>
|
||
|
|
<div class="input-group mb-2">
|
||
|
|
<input type="file" class="form-control" id="galleryImageUpload" accept="image/*" multiple />
|
||
|
|
<button type="button" class="btn btn-primary" onclick="uploadGalleryImages()">
|
||
|
|
<i class="bi bi-cloud-upload"></i> Upload Images
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<small class="text-muted">You can select multiple images at once</small>
|
||
|
|
</div>
|
||
|
|
<div id="galleryImagesContainer" class="row g-3">
|
||
|
|
@if (Model.ImageGallery != null && Model.ImageGallery.Any())
|
||
|
|
{
|
||
|
|
for (int i = 0; i < Model.ImageGallery.Count; i++)
|
||
|
|
{
|
||
|
|
<div class="col-md-4 gallery-image-item">
|
||
|
|
<div class="card">
|
||
|
|
<img src="@Model.ImageGallery[i]" class="card-img-top" style="height: 150px; object-fit: cover;" />
|
||
|
|
<div class="card-body p-2">
|
||
|
|
<input type="hidden" name="ImageGallery[@i]" value="@Model.ImageGallery[i]" />
|
||
|
|
<button type="button" class="btn btn-sm btn-danger w-100" onclick="removeGalleryImage(this)">Remove</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Team Members Tab -->
|
||
|
|
<div class="tab-pane fade" id="team-tab">
|
||
|
|
<div class="mb-3">
|
||
|
|
<button type="button" class="btn btn-primary" onclick="addTeamMember()">
|
||
|
|
<i class="bi bi-plus-circle"></i> Add Team Member
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div id="teamMembersContainer">
|
||
|
|
@if (Model.TeamMembers != null && Model.TeamMembers.Any())
|
||
|
|
{
|
||
|
|
for (int i = 0; i < Model.TeamMembers.Count; i++)
|
||
|
|
{
|
||
|
|
<div class="card mb-3 team-member-card">
|
||
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||
|
|
<h6 class="mb-0">Team Member #@(i + 1)</h6>
|
||
|
|
<button type="button" class="btn btn-sm btn-danger" onclick="removeTeamMember(this)">Remove</button>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 text-center">
|
||
|
|
<img src="@(!string.IsNullOrEmpty(Model.TeamMembers[i].PhotoUrl) ? Model.TeamMembers[i].PhotoUrl : "/assets/images/placeholder.jpg")"
|
||
|
|
class="team-member-preview rounded-circle mb-2"
|
||
|
|
style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #6B4E9B;" />
|
||
|
|
<input type="file" class="form-control form-control-sm" accept="image/*" onchange="previewTeamPhoto(this)" />
|
||
|
|
<input type="hidden" name="TeamMembers[@i].PhotoUrl" value="@Model.TeamMembers[i].PhotoUrl" class="team-photo-url" />
|
||
|
|
</div>
|
||
|
|
<div class="col-md-9">
|
||
|
|
<div class="mb-2">
|
||
|
|
<label class="form-label">Name</label>
|
||
|
|
<input type="text" class="form-control" name="TeamMembers[@i].Name" value="@Model.TeamMembers[i].Name" required />
|
||
|
|
</div>
|
||
|
|
<div class="mb-2">
|
||
|
|
<label class="form-label">Role/Position</label>
|
||
|
|
<input type="text" class="form-control" name="TeamMembers[@i].Role" value="@Model.TeamMembers[i].Role" />
|
||
|
|
</div>
|
||
|
|
<div class="mb-2">
|
||
|
|
<label class="form-label">Bio</label>
|
||
|
|
<textarea class="form-control" name="TeamMembers[@i].Bio" rows="3">@Model.TeamMembers[i].Bio</textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<button class="btn btn-primary" type="submit">Save Changes</button>
|
||
|
|
<a class="btn btn-secondary" href="/admin/pages">Cancel</a>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@section Scripts {
|
||
|
|
<script src="https://cdn.ckeditor.com/ckeditor5/40.1.0/classic/ckeditor.js"></script>
|
||
|
|
<script>
|
||
|
|
ClassicEditor
|
||
|
|
.create(document.querySelector('#pageContent'), {
|
||
|
|
toolbar: {
|
||
|
|
items: [
|
||
|
|
'heading', '|',
|
||
|
|
'bold', 'italic', 'underline', 'strikethrough', '|',
|
||
|
|
'link', 'blockQuote', '|',
|
||
|
|
'bulletedList', 'numberedList', '|',
|
||
|
|
'outdent', 'indent', '|',
|
||
|
|
'alignment', '|',
|
||
|
|
'insertTable', '|',
|
||
|
|
'fontSize', 'fontColor', 'fontBackgroundColor', '|',
|
||
|
|
'removeFormat', '|',
|
||
|
|
'undo', 'redo', '|',
|
||
|
|
'sourceEditing'
|
||
|
|
],
|
||
|
|
shouldNotGroupWhenFull: true
|
||
|
|
},
|
||
|
|
heading: {
|
||
|
|
options: [
|
||
|
|
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
|
||
|
|
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
|
||
|
|
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
|
||
|
|
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
|
||
|
|
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
options: [
|
||
|
|
'small',
|
||
|
|
'default',
|
||
|
|
'big'
|
||
|
|
]
|
||
|
|
},
|
||
|
|
table: {
|
||
|
|
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
|
||
|
|
},
|
||
|
|
htmlSupport: {
|
||
|
|
allow: [
|
||
|
|
{
|
||
|
|
name: /.*/,
|
||
|
|
attributes: true,
|
||
|
|
classes: true,
|
||
|
|
styles: true
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error(error);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Gallery Image Upload (Multiple)
|
||
|
|
function uploadGalleryImages() {
|
||
|
|
const fileInput = document.getElementById('galleryImageUpload');
|
||
|
|
const files = fileInput.files;
|
||
|
|
|
||
|
|
if (files.length === 0) {
|
||
|
|
alert('Please select at least one image');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show uploading indicator
|
||
|
|
const button = event.target;
|
||
|
|
const originalText = button.innerHTML;
|
||
|
|
button.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Uploading...';
|
||
|
|
button.disabled = true;
|
||
|
|
|
||
|
|
let uploadedCount = 0;
|
||
|
|
let failedCount = 0;
|
||
|
|
|
||
|
|
// Upload each file
|
||
|
|
Array.from(files).forEach((file, index) => {
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('image', file);
|
||
|
|
|
||
|
|
fetch('/api/upload/image', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
addGalleryImageToList(data.imageUrl);
|
||
|
|
uploadedCount++;
|
||
|
|
} else {
|
||
|
|
console.error('Upload failed:', data.message);
|
||
|
|
failedCount++;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check if all uploads are complete
|
||
|
|
if (uploadedCount + failedCount === files.length) {
|
||
|
|
button.innerHTML = originalText;
|
||
|
|
button.disabled = false;
|
||
|
|
fileInput.value = '';
|
||
|
|
|
||
|
|
if (uploadedCount > 0) {
|
||
|
|
alert(`Successfully uploaded ${uploadedCount} image(s)${failedCount > 0 ? `, ${failedCount} failed` : ''}`);
|
||
|
|
} else {
|
||
|
|
alert('All uploads failed. Please try again.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('Upload error:', error);
|
||
|
|
failedCount++;
|
||
|
|
|
||
|
|
if (uploadedCount + failedCount === files.length) {
|
||
|
|
button.innerHTML = originalText;
|
||
|
|
button.disabled = false;
|
||
|
|
fileInput.value = '';
|
||
|
|
alert(`Upload completed. ${uploadedCount} succeeded, ${failedCount} failed.`);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function addGalleryImageToList(imageUrl) {
|
||
|
|
const container = document.getElementById('galleryImagesContainer');
|
||
|
|
const count = container.querySelectorAll('.gallery-image-item').length;
|
||
|
|
|
||
|
|
const html = `
|
||
|
|
<div class="col-md-4 gallery-image-item">
|
||
|
|
<div class="card">
|
||
|
|
<img src="${imageUrl}" class="card-img-top" style="height: 150px; object-fit: cover;" />
|
||
|
|
<div class="card-body p-2">
|
||
|
|
<input type="hidden" name="ImageGallery[${count}]" value="${imageUrl}" />
|
||
|
|
<button type="button" class="btn btn-sm btn-danger w-100" onclick="removeGalleryImage(this)">Remove</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
container.insertAdjacentHTML('beforeend', html);
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeGalleryImage(button) {
|
||
|
|
const item = button.closest('.gallery-image-item');
|
||
|
|
item.remove();
|
||
|
|
reindexGalleryImages();
|
||
|
|
}
|
||
|
|
|
||
|
|
function reindexGalleryImages() {
|
||
|
|
const items = document.querySelectorAll('.gallery-image-item');
|
||
|
|
items.forEach((item, index) => {
|
||
|
|
const input = item.querySelector('input[type="hidden"]');
|
||
|
|
input.name = `ImageGallery[${index}]`;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Team Member Management
|
||
|
|
let teamMemberIndex = document.querySelectorAll('.team-member-card').length;
|
||
|
|
|
||
|
|
function addTeamMember() {
|
||
|
|
const container = document.getElementById('teamMembersContainer');
|
||
|
|
const html = `
|
||
|
|
<div class="card mb-3 team-member-card">
|
||
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||
|
|
<h6 class="mb-0">Team Member #${teamMemberIndex + 1}</h6>
|
||
|
|
<button type="button" class="btn btn-sm btn-danger" onclick="removeTeamMember(this)">Remove</button>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3 text-center">
|
||
|
|
<img src="/assets/images/placeholder.jpg"
|
||
|
|
class="team-member-preview rounded-circle mb-2"
|
||
|
|
style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #6B4E9B;" />
|
||
|
|
<input type="file" class="form-control form-control-sm" accept="image/*" onchange="previewTeamPhoto(this)" />
|
||
|
|
<input type="hidden" name="TeamMembers[${teamMemberIndex}].PhotoUrl" value="" class="team-photo-url" />
|
||
|
|
</div>
|
||
|
|
<div class="col-md-9">
|
||
|
|
<div class="mb-2">
|
||
|
|
<label class="form-label">Name</label>
|
||
|
|
<input type="text" class="form-control" name="TeamMembers[${teamMemberIndex}].Name" required />
|
||
|
|
</div>
|
||
|
|
<div class="mb-2">
|
||
|
|
<label class="form-label">Role/Position</label>
|
||
|
|
<input type="text" class="form-control" name="TeamMembers[${teamMemberIndex}].Role" />
|
||
|
|
</div>
|
||
|
|
<div class="mb-2">
|
||
|
|
<label class="form-label">Bio</label>
|
||
|
|
<textarea class="form-control" name="TeamMembers[${teamMemberIndex}].Bio" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
container.insertAdjacentHTML('beforeend', html);
|
||
|
|
teamMemberIndex++;
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeTeamMember(button) {
|
||
|
|
const card = button.closest('.team-member-card');
|
||
|
|
card.remove();
|
||
|
|
reindexTeamMembers();
|
||
|
|
}
|
||
|
|
|
||
|
|
function reindexTeamMembers() {
|
||
|
|
const cards = document.querySelectorAll('.team-member-card');
|
||
|
|
cards.forEach((card, index) => {
|
||
|
|
card.querySelector('h6').textContent = `Team Member #${index + 1}`;
|
||
|
|
card.querySelectorAll('input, textarea').forEach(input => {
|
||
|
|
const name = input.getAttribute('name');
|
||
|
|
if (name && name.startsWith('TeamMembers[')) {
|
||
|
|
const newName = name.replace(/TeamMembers\[\d+\]/, `TeamMembers[${index}]`);
|
||
|
|
input.setAttribute('name', newName);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
teamMemberIndex = cards.length;
|
||
|
|
}
|
||
|
|
|
||
|
|
function previewTeamPhoto(input) {
|
||
|
|
const file = input.files[0];
|
||
|
|
if (!file) return;
|
||
|
|
|
||
|
|
const card = input.closest('.team-member-card');
|
||
|
|
const preview = card.querySelector('.team-member-preview');
|
||
|
|
const hiddenInput = card.querySelector('.team-photo-url');
|
||
|
|
|
||
|
|
// Validate file type
|
||
|
|
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
|
||
|
|
if (!allowedTypes.includes(file.type)) {
|
||
|
|
alert('Please select a valid image file (JPG, PNG, GIF, or WebP)');
|
||
|
|
input.value = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Validate file size (max 5MB)
|
||
|
|
if (file.size > 5 * 1024 * 1024) {
|
||
|
|
alert('Image file is too large. Please select an image smaller than 5MB.');
|
||
|
|
input.value = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add loading border to preview
|
||
|
|
preview.style.opacity = '0.5';
|
||
|
|
preview.style.border = '3px solid #ffc107';
|
||
|
|
|
||
|
|
// Show preview immediately
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = function(e) {
|
||
|
|
preview.src = e.target.result;
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
|
||
|
|
// Upload to server
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('image', file);
|
||
|
|
|
||
|
|
console.log('Uploading team member photo...');
|
||
|
|
|
||
|
|
fetch('/api/upload/image', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData,
|
||
|
|
headers: {
|
||
|
|
'X-Requested-With': 'XMLHttpRequest'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
console.log('Response status:', response.status);
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
console.log('Upload response:', data);
|
||
|
|
|
||
|
|
preview.style.opacity = '1';
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
hiddenInput.value = data.imageUrl;
|
||
|
|
preview.style.border = '3px solid #28a745';
|
||
|
|
|
||
|
|
// Reset border color after 2 seconds
|
||
|
|
setTimeout(() => {
|
||
|
|
preview.style.border = '3px solid #6B4E9B';
|
||
|
|
}, 2000);
|
||
|
|
|
||
|
|
console.log('Photo uploaded successfully:', data.imageUrl);
|
||
|
|
} else {
|
||
|
|
alert('Upload failed: ' + (data.message || 'Unknown error'));
|
||
|
|
preview.style.border = '3px solid #dc3545';
|
||
|
|
input.value = '';
|
||
|
|
|
||
|
|
// Reset to placeholder after error
|
||
|
|
setTimeout(() => {
|
||
|
|
preview.src = '/assets/images/placeholder.jpg';
|
||
|
|
preview.style.border = '3px solid #6B4E9B';
|
||
|
|
}, 2000);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('Upload error:', error);
|
||
|
|
alert('Upload failed. Please check console for details.');
|
||
|
|
preview.style.opacity = '1';
|
||
|
|
preview.style.border = '3px solid #dc3545';
|
||
|
|
input.value = '';
|
||
|
|
|
||
|
|
// Reset to placeholder after error
|
||
|
|
setTimeout(() => {
|
||
|
|
preview.src = '/assets/images/placeholder.jpg';
|
||
|
|
preview.style.border = '3px solid #6B4E9B';
|
||
|
|
}, 2000);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
}
|