new restylt

This commit is contained in:
2026-08-02 13:53:56 +02:00
parent c8ab259217
commit 9ccdc34d4a
391 changed files with 2760 additions and 83108 deletions
+155 -58
View File
@@ -70,6 +70,64 @@ $certname->execute(); ?>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
const uploadLang = "<?php echo $_SESSION['langselect'] ?? 'it'; ?>";
const uploadMessages = {
it: {
invalidImageType: "Seleziona solo immagini JPG, JPEG o PNG.",
imageTooLarge: "L'immagine è troppo grande. Dimensione massima consentita: ",
uploadFailed: "Caricamento file fallito, riprova.",
uploadSuccess: "File caricato correttamente.",
imageUploadFailed: "Caricamento immagine fallito, riprova.",
imageUploadSuccess: "Immagine caricata correttamente.",
noFileChosen: "<?php echo $nofilechoosen; ?>"
},
en: {
invalidImageType: "Please select only JPG, JPEG or PNG images.",
imageTooLarge: "The image is too large. Maximum allowed size is ",
uploadFailed: "File upload failed, please try again.",
uploadSuccess: "File uploaded successfully.",
imageUploadFailed: "Image upload failed, please try again.",
imageUploadSuccess: "Image uploaded successfully.",
noFileChosen: "<?php echo $nofilechoosen; ?>"
}
};
const msg = uploadMessages[uploadLang] || uploadMessages.it;
const maxImageSizeMB = 8;
const maxImageSizeBytes = maxImageSizeMB * 1024 * 1024;
const allowedImageTypes = [
"image/jpeg",
"image/jpg",
"image/png"
];
function validateImageFileInput(inputElement) {
const fileLength = inputElement.files.length;
for (let i = 0; i < fileLength; i++) {
const file = inputElement.files[i];
const fileType = file.type.toLowerCase();
if (!allowedImageTypes.includes(fileType)) {
alert(msg.invalidImageType);
inputElement.value = "";
return false;
}
if (file.size > maxImageSizeBytes) {
alert(msg.imageTooLarge + maxImageSizeMB + " MB.");
inputElement.value = "";
return false;
}
}
return true;
}
</script>
<style>
/* Add this CSS to your styles */
.custom-file-upload {
@@ -180,7 +238,10 @@ $certname->execute(); ?>
</h4>
<p class="text-muted mb-3"><?php echo $allowedkind; ?></p>
<p class="text-muted mb-3">
<?php echo $allowedkind; ?>
<?php echo ($_SESSION['langselect'] ?? 'it') === 'en' ? 'Allowed formats: JPG, JPEG, PNG. Max upload size: 8 MB.' : 'Formati ammessi: JPG, JPEG, PNG. Dimensione massima: 8 MB.'; ?>
</p>
<table id="photoaded">
@@ -189,6 +250,11 @@ $certname->execute(); ?>
$photoshoesside = "";
$photoshoessole = "";
$lang = $_SESSION['langselect'] ?? 'it';
$photo1 = "";
$photo2 = "";
if ($trfnumberfinal->getColumnVal("idarticletype") == '1') {
$photo1 = $photoshoesside;
$photo2 = $photoshoessole;
@@ -199,8 +265,11 @@ $certname->execute(); ?>
$photo1 = $photomasksidea;
$photo2 = $photomasksideb;
} elseif ($trfnumberfinal->getColumnVal("idarticletype") == '4') {
$photo1 = "Foto fronte";
$photo2 = "Foto retro";
$photo1 = ($lang === 'en') ? 'Front photo' : 'Foto fronte';
$photo2 = ($lang === 'en') ? 'Back photo' : 'Foto retro';
} elseif ($trfnumberfinal->getColumnVal("idarticletype") == '5') {
$photo1 = ($lang === 'en') ? 'Photo 1' : 'Foto 1';
$photo2 = ($lang === 'en') ? 'Photo 2' : 'Foto 2';
} ?>
<th><?php echo $photo1; ?></th>
<th></th>
@@ -213,7 +282,13 @@ $certname->execute(); ?>
<form id="uploadFormphoto" enctype="multipart/form-data">
<label for="fileInput1" class="custom-file-upload"><?php echo $browsebotton; ?></label>
<div class="file-name-display" onclick="document.getElementById('fileInput1').click();"><?php echo $nofilechoosen; ?></div>
<input type="file" name="docphotoone[]" id="fileInput1" style="display: none;" onchange="updateFileName(1)">
<input
type="file"
name="docphotoone[]"
id="fileInput1"
accept=".jpg,.jpeg,.png,image/jpeg,image/png"
style="display: none;"
onchange="updateFileName(1)">
<input type="hidden" name="idtrf" id="idtrf" value="<?php echo $trfnumberfinal->getColumnVal("idtrfdetails"); ?>">
<input type="submit" name="submit" value="UPLOAD" />
</form>
@@ -228,7 +303,13 @@ $certname->execute(); ?>
<form id="uploadFormphototwo" enctype="multipart/form-data">
<label for="fileInput2" class="custom-file-upload"><?php echo $browsebotton; ?></label>
<div class="file-name-display" onclick="document.getElementById('fileInput2').click();"><?php echo $nofilechoosen; ?></div>
<input type="file" name="docphototwo[]" id="fileInput2" style="display: none;" onchange="updateFileName(2)">
<input
type="file"
name="docphototwo[]"
id="fileInput2"
accept=".jpg,.jpeg,.png,image/jpeg,image/png"
style="display: none;"
onchange="updateFileName(2)">
<input type="hidden" name="idtrf" id="idtrf" value="<?php echo $trfnumberfinal->getColumnVal("idtrfdetails"); ?>">
<input type="submit" name="submit" value="UPLOAD" />
</form>
@@ -236,11 +317,21 @@ $certname->execute(); ?>
<div id="uploadStatus2"></div>
</div>
<script>
// Add this script to handle the filename display
function updateFileName(index) {
var input = document.getElementById('fileInput' + index);
var fileNameDisplay = document.querySelector('.upload-div #uploadStatus' + index);
fileNameDisplay.textContent = input.files[0].name || 'No file chosen';
if (!validateImageFileInput(input)) {
return false;
}
var form = input.closest('form');
var fileNameDisplay = form.querySelector('.file-name-display');
if (input.files && input.files.length > 0) {
fileNameDisplay.textContent = input.files[0].name;
} else {
fileNameDisplay.textContent = msg.noFileChosen;
}
}
</script>
@@ -434,6 +525,9 @@ $certname->execute(); ?>
<div class="card-body">
<h4 class="mt-0 header-title"><?php echo $addphotos; ?></h4>
<p class="text-muted mb-3"><?php echo $addphotossuggestion; ?></p>
<p class="text-muted mb-3">
<?php echo ($_SESSION['langselect'] ?? 'it') === 'en' ? 'Allowed formats: JPG, JPEG, PNG. Max upload size: 8 MB per image.' : 'Formati ammessi: JPG, JPEG, PNG. Dimensione massima: 8 MB per immagine.'; ?>
</p>
<!-- Upload area -->
<div class="upload-area" id="uploadfile">
@@ -441,7 +535,12 @@ $certname->execute(); ?>
<i class="fas fa-cloud-upload-alt"></i>
</div>
<p><?php echo $addphotosup; ?></p>
<input type="file" id="fileupload" multiple accept="image/*" style="display:none;">
<input
type="file"
id="fileupload"
multiple
accept=".jpg,.jpeg,.png,image/jpeg,image/png"
style="display:none;">
</div>
<div id="thumbnail-container"></div>
@@ -556,19 +655,24 @@ $certname->execute(); ?>
function handleFiles(files) {
const thumbnailContainer = document.getElementById('thumbnail-container');
thumbnailContainer.innerHTML = ''; // Clear previous thumbnails
thumbnailContainer.innerHTML = '';
for (let i = 0; i < files.length; i++) {
const file = files[i];
const fileType = file.type.toLowerCase();
const validImageTypes = ["image/jpeg", "image/png", "image/jpg"];
if (!validImageTypes.includes(fileType)) {
alert('Only JPG, JPEG, and PNG files are allowed.');
if (!allowedImageTypes.includes(fileType)) {
alert(msg.invalidImageType);
continue;
}
if (file.size > maxImageSizeBytes) {
alert(msg.imageTooLarge + maxImageSizeMB + " MB.");
continue;
}
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
@@ -576,14 +680,17 @@ $certname->execute(); ?>
thumbnailContainer.appendChild(img);
setTimeout(() => {
thumbnailContainer.removeChild(img);
if (thumbnailContainer.contains(img)) {
thumbnailContainer.removeChild(img);
}
}, 3000);
};
reader.readAsDataURL(file);
const formData = new FormData();
formData.append('file', file);
formData.append('idtrf', '<?php echo $idtrf; ?>'); // Pass idtrf from PHP to JS
formData.append('idtrf', '<?php echo $idtrf; ?>');
fetch('uploadaddphotos.php', {
method: 'POST',
@@ -592,16 +699,20 @@ $certname->execute(); ?>
.then(response => response.json())
.then(data => {
if (data.success) {
console.log('File uploaded successfully');
console.log(msg.imageUploadSuccess);
updatePhotoTable();
} else {
alert(data.message ? data.message : msg.imageUploadFailed);
console.error('File upload failed: ', data.message);
}
})
.catch(error => {
alert(msg.imageUploadFailed);
console.error('Error:', error);
});
}
document.getElementById('fileupload').value = '';
}
function updatePhotoTable() {
@@ -622,13 +733,17 @@ $certname->execute(); ?>
let html = '';
jsonData.forEach(photo => {
html += `<tr>
<td><img src="uploadimages/${photo.filename}" class="thumbnail"></td>
<td>${photo.description}</td>
<td><a href="deleteaddephotos.php?idtrf=<?php echo $idtrf; ?>&idadditionalphotos=${photo.id}">
<i class="fas fa-trash-alt text-danger font-16"></i>
</a>
</td>
</tr>`;
<td>
<a href="uploadimages/${photo.filename}" target="_blank">
<img src="uploadimages/${photo.filename}" class="thumbnail">
</a>
</td>
<td>
<a href="deleteaddephotos.php?idtrf=<?php echo $idtrf; ?>&idadditionalphotos=${photo.id}">
<i class="fas fa-trash-alt text-danger font-16"></i>
</a>
</td>
</tr>`;
});
document.getElementById('cont_file_photo').innerHTML = html;
} catch (e) {
@@ -662,6 +777,7 @@ $certname->execute(); ?>
<!-- end page content -->
</div>
<!-- end page-wrapper -->
<script>
var match = [
"application/pdf",
@@ -691,12 +807,13 @@ $certname->execute(); ?>
beforeSend: function() {
$('#uploadStatus').html('<img src="../images/uploading.gif"/>');
},
error: function() {
$('#uploadStatus').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
error: function(xhr) {
let message = xhr.responseText ? xhr.responseText : msg.uploadFailed;
$('#uploadStatus').html('<span style="color:#EA4335;">' + message + '</span>');
},
success: function(data) {
$('#uploadForm')[0].reset();
$('#uploadStatus').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
$('#uploadStatus').html('<span style="color:#28A74B;">' + msg.uploadSuccess + '</span>');
// $('.gallery').html(data);
// $("#docadded").load(location.href + " #docadded");
// SHOW UPLOADED FILE
@@ -742,12 +859,13 @@ $certname->execute(); ?>
beforeSend: function() {
$('#uploadStatus1').html('<img src="../images/uploading.gif"/>');
},
error: function() {
$('#uploadStatus1').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
error: function(xhr) {
let message = xhr.responseText ? xhr.responseText : msg.imageUploadFailed;
$('#uploadStatus1').html('<span style="color:#EA4335;">' + message + '</span>');
},
success: function(data) {
$('#uploadFormphoto')[0].reset();
$('#uploadStatus1').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
$('#uploadStatus1').html('<span style="color:#28A74B;">' + msg.imageUploadSuccess + '</span>');
// $('.gallery').html(data);
// $("#photoaded").load(location.href + " #photoaded");
@@ -760,20 +878,9 @@ $certname->execute(); ?>
});
});
// File type validation
// File type and size validation - Photo 1
$("#fileInput1").change(function() {
var fileLength = this.files.length;
// var match= ["application/pdf","application/msword","image/jpg","image/gif","application/xls","application/xlsx", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
var i;
for (i = 0; i < fileLength; i++) {
var file = this.files[i];
var imagefile = file.type.toLowerCase();
if (!((imagefile == match[2]) || (imagefile == match[3]) || (imagefile == match[4]) || (imagefile == match[9]) || (imagefile == match[10]))) {
alert('Please select a valid file (jpg, jpeg, png, bmp).');
$("#fileInput1").val('');
return false;
}
}
validateImageFileInput(this);
});
});
</script>
@@ -793,12 +900,13 @@ $certname->execute(); ?>
beforeSend: function() {
$('#uploadStatus2').html('<img src="../images/uploading.gif"/>');
},
error: function() {
$('#uploadStatus2').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
error: function(xhr) {
let message = xhr.responseText ? xhr.responseText : msg.imageUploadFailed;
$('#uploadStatus2').html('<span style="color:#EA4335;">' + message + '</span>');
},
success: function(data) {
$('#uploadFormphototwo')[0].reset();
$('#uploadStatus2').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
$('#uploadStatus2').html('<span style="color:#28A74B;">' + msg.imageUploadSuccess + '</span>');
// $('.gallery').html(data);
// $("#photoaded").load(location.href + " #photoaded");
// SHOW PHOTO 2
@@ -810,20 +918,9 @@ $certname->execute(); ?>
});
});
// File type validation
// File type and size validation - Photo 2
$("#fileInput2").change(function() {
var fileLength = this.files.length;
// var match= ["application/pdf","application/msword","image/jpg","image/gif","application/xls","application/xlsx", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
var i;
for (i = 0; i < fileLength; i++) {
var file = this.files[i];
var imagefile = file.type.toLowerCase();
if (!((imagefile == match[2]) || (imagefile == match[3]) || (imagefile == match[4]) || (imagefile == match[9]) || (imagefile == match[10]))) {
alert('Please select a valid file (jpg, jpeg, png, bmp).');
$("#fileInput2").val('');
return false;
}
}
validateImageFileInput(this);
});
});
</script>