362 lines
14 KiB
Plaintext
362 lines
14 KiB
Plaintext
@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.CreateShipmentModel
|
|
@{
|
|
// Layout = "_AdminLayout";
|
|
ViewBag.PageTitle = "Create Shipment";
|
|
NopHtml.SetActiveMenuItemSystemName("Shipments.Create");
|
|
}
|
|
|
|
<form asp-action="Create" method="post" enctype="multipart/form-data">
|
|
<div class="content-header clearfix">
|
|
<h1 class="float-left">
|
|
<i class="fas fa-plus"></i>
|
|
Create New Shipment
|
|
</h1>
|
|
<div class="float-right">
|
|
<button type="submit" name="save" class="btn btn-primary">
|
|
<i class="far fa-save"></i>
|
|
Save
|
|
</button>
|
|
<a asp-action="List" class="btn btn-default">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Back to List
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="form-horizontal">
|
|
<div class="cards-group">
|
|
<!-- Basic Information -->
|
|
<div class="card card-default">
|
|
<div class="card-header">
|
|
<div class="card-title">Shipment Information</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="form-group row">
|
|
<div class="col-md-3">
|
|
<nop-label asp-for="ShipmentName" />
|
|
</div>
|
|
<div class="col-md-9">
|
|
<nop-editor asp-for="ShipmentName" required="true" />
|
|
<span asp-validation-for="ShipmentName"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-3">
|
|
<nop-label asp-for="Description" />
|
|
</div>
|
|
<div class="col-md-9">
|
|
<textarea asp-for="Description" class="form-control" rows="3"></textarea>
|
|
<span asp-validation-for="Description"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-3">
|
|
<nop-label asp-for="ShipmentDate" />
|
|
</div>
|
|
<div class="col-md-9">
|
|
<nop-editor asp-for="ShipmentDate" asp-template="DateTime" required="true" />
|
|
<span asp-validation-for="ShipmentDate"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-3">
|
|
<nop-label asp-for="TrackingNumber" />
|
|
</div>
|
|
<div class="col-md-9">
|
|
<nop-editor asp-for="TrackingNumber" />
|
|
<span asp-validation-for="TrackingNumber"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Upload Section -->
|
|
<div class="card card-default">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<i class="fas fa-file-pdf"></i>
|
|
Upload Documents (PDF only)
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Drag & Drop Zone -->
|
|
<div id="dropZone" class="drop-zone">
|
|
<div class="drop-zone-content">
|
|
<i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
|
|
<h4>Drag & Drop PDF files here</h4>
|
|
<p class="text-muted">or click to select files</p>
|
|
<input type="file" id="fileInput" multiple accept=".pdf" style="display: none;">
|
|
<button type="button" id="selectFilesBtn" class="btn btn-outline-primary">
|
|
<i class="fas fa-folder-open"></i>
|
|
Select Files
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Progress -->
|
|
<div id="uploadProgress" style="display: none;">
|
|
<div class="progress mb-3">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<p id="uploadStatus" class="text-center"></p>
|
|
</div>
|
|
|
|
<!-- Uploaded Files List -->
|
|
<div id="uploadedFiles" class="mt-3">
|
|
<h5>Uploaded Files:</h5>
|
|
<div id="filesList" class="list-group">
|
|
<!-- Uploaded files will appear here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
|
|
<style>
|
|
.drop-zone {
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
background-color: #f8f9fa;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drop-zone:hover,
|
|
.drop-zone.drag-over {
|
|
border-color: #007bff;
|
|
background-color: rgba(0, 123, 255, 0.05);
|
|
}
|
|
|
|
.drop-zone-content {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
margin-bottom: 5px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.file-item .file-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.file-item .file-info i {
|
|
margin-right: 10px;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.file-item .file-actions button {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.upload-error {
|
|
border-color: #dc3545;
|
|
background-color: rgba(220, 53, 69, 0.05);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
let uploadedFiles = [];
|
|
|
|
// File input and drop zone elements
|
|
const dropZone = document.getElementById('dropZone');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const selectFilesBtn = document.getElementById('selectFilesBtn');
|
|
|
|
// Click to select files
|
|
selectFilesBtn.addEventListener('click', () => fileInput.click());
|
|
dropZone.addEventListener('click', (e) => {
|
|
if (e.target === dropZone || e.target.closest('.drop-zone-content')) {
|
|
fileInput.click();
|
|
}
|
|
});
|
|
|
|
// File input change
|
|
fileInput.addEventListener('change', handleFiles);
|
|
|
|
// Drag and drop events
|
|
dropZone.addEventListener('dragover', handleDragOver);
|
|
dropZone.addEventListener('dragenter', handleDragEnter);
|
|
dropZone.addEventListener('dragleave', handleDragLeave);
|
|
dropZone.addEventListener('drop', handleDrop);
|
|
|
|
function handleDragOver(e) {
|
|
e.preventDefault();
|
|
dropZone.classList.add('drag-over');
|
|
}
|
|
|
|
function handleDragEnter(e) {
|
|
e.preventDefault();
|
|
dropZone.classList.add('drag-over');
|
|
}
|
|
|
|
function handleDragLeave(e) {
|
|
e.preventDefault();
|
|
if (!dropZone.contains(e.relatedTarget)) {
|
|
dropZone.classList.remove('drag-over');
|
|
}
|
|
}
|
|
|
|
function handleDrop(e) {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('drag-over');
|
|
|
|
const files = e.dataTransfer.files;
|
|
processFiles(files);
|
|
}
|
|
|
|
function handleFiles(e) {
|
|
const files = e.target.files;
|
|
processFiles(files);
|
|
}
|
|
|
|
function processFiles(files) {
|
|
Array.from(files).forEach(file => {
|
|
if (file.type === 'application/pdf') {
|
|
uploadFile(file);
|
|
} else {
|
|
showError(`"${file.name}" is not a PDF file. Only PDF files are allowed.`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function uploadFile(file) {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
// Show upload progress
|
|
showUploadProgress(`Uploading ${file.name}...`);
|
|
|
|
$.ajax({
|
|
url: '@Url.Action("UploadFile")',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(result) {
|
|
hideUploadProgress();
|
|
|
|
if (result.success) {
|
|
uploadedFiles.push(result);
|
|
addFileToList(result);
|
|
showSuccess(`"${result.fileName}" uploaded successfully`);
|
|
} else {
|
|
showError(`Upload failed: ${result.errorMessage}`);
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
hideUploadProgress();
|
|
showError(`Upload failed: ${error}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
function addFileToList(file) {
|
|
const filesList = document.getElementById('filesList');
|
|
const fileItem = document.createElement('div');
|
|
fileItem.className = 'file-item';
|
|
fileItem.innerHTML = `
|
|
<div class="file-info">
|
|
<i class="fas fa-file-pdf"></i>
|
|
<span>${file.fileName}</span>
|
|
</div>
|
|
<div class="file-actions">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="viewFile('${file.filePath}')">
|
|
<i class="fas fa-eye"></i> View
|
|
</button>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteFile('${file.filePath}', this)">
|
|
<i class="fas fa-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
`;
|
|
filesList.appendChild(fileItem);
|
|
|
|
// Show the uploaded files section
|
|
document.getElementById('uploadedFiles').style.display = 'block';
|
|
}
|
|
|
|
function showUploadProgress(message) {
|
|
const progressDiv = document.getElementById('uploadProgress');
|
|
const statusText = document.getElementById('uploadStatus');
|
|
|
|
statusText.textContent = message;
|
|
progressDiv.style.display = 'block';
|
|
|
|
// Animate progress bar
|
|
const progressBar = progressDiv.querySelector('.progress-bar');
|
|
progressBar.style.width = '100%';
|
|
}
|
|
|
|
function hideUploadProgress() {
|
|
document.getElementById('uploadProgress').style.display = 'none';
|
|
const progressBar = document.querySelector('#uploadProgress .progress-bar');
|
|
progressBar.style.width = '0%';
|
|
}
|
|
|
|
function showError(message) {
|
|
// Use nopCommerce's notification system
|
|
displayBarNotification(message, 'error', 5000);
|
|
}
|
|
|
|
function showSuccess(message) {
|
|
// Use nopCommerce's notification system
|
|
displayBarNotification(message, 'success', 3000);
|
|
}
|
|
|
|
// Global functions for file actions
|
|
window.viewFile = function(filePath) {
|
|
window.open(filePath, '_blank');
|
|
};
|
|
|
|
window.deleteFile = function(filePath, button) {
|
|
if (confirm('Are you sure you want to delete this file?')) {
|
|
$.post('@Url.Action("DeleteUploadedFile")', { filePath: filePath })
|
|
.done(function(result) {
|
|
if (result.success) {
|
|
// Remove from uploaded files array
|
|
uploadedFiles = uploadedFiles.filter(f => f.filePath !== filePath);
|
|
|
|
// Remove from DOM
|
|
const fileItem = button.closest('.file-item');
|
|
fileItem.remove();
|
|
|
|
// Hide uploaded files section if no files remain
|
|
if (uploadedFiles.length === 0) {
|
|
document.getElementById('uploadedFiles').style.display = 'none';
|
|
}
|
|
|
|
showSuccess('File deleted successfully');
|
|
} else {
|
|
showError('Failed to delete file: ' + result.message);
|
|
}
|
|
})
|
|
.fail(function() {
|
|
showError('Failed to delete file');
|
|
});
|
|
}
|
|
};
|
|
});
|
|
</script> |