332 lines
14 KiB
PHP
332 lines
14 KiB
PHP
<style>
|
|
/*///////////////////////////////////////////////////
|
|
// Presentational Styles (Not Needed) \\
|
|
///////////////////////////////////////////////////*/
|
|
html {
|
|
background:#0677c0;
|
|
}
|
|
.contentContainer {
|
|
background:#efefef;
|
|
padding:20px;
|
|
max-width:350px;
|
|
min-width:150px;
|
|
margin:15vh auto;
|
|
border-radius:10px;
|
|
border:solid 5px #dbdbdb;
|
|
}
|
|
|
|
/*///////////////////////////////////////////////////
|
|
// Skill Bars \\
|
|
///////////////////////////////////////////////////*/
|
|
.skillBar {
|
|
margin-bottom:26px;
|
|
margin-bottom: 1.66em;
|
|
h4 {
|
|
font-size:21px;
|
|
font-size: 1.33em;
|
|
text-transform: none;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
margin-bottom:7px;
|
|
margin-bottom: .33em;
|
|
}
|
|
}
|
|
.skillBarContainer {
|
|
width: 100%;
|
|
max-width: 350px;
|
|
height:26px;
|
|
height: 1.66em;
|
|
background: #e6eae3;
|
|
background: rgb(8,102,220);
|
|
background: rgba(8,102,220,.2);
|
|
overflow: hidden;
|
|
border-radius:5px;
|
|
}
|
|
.skillBarValue {
|
|
height: 1.66em;
|
|
float: left;
|
|
background:#0866dc;
|
|
background: rgb(8,102,220);
|
|
background: rgba(8,102,220,.75);
|
|
text-align: center;
|
|
}
|
|
|
|
/*///////////////////////////////////////////////////
|
|
// Animation \\
|
|
///////////////////////////////////////////////////*/
|
|
/*@-webkit-keyframes slideIn {
|
|
0% { width: 0; }
|
|
25% { width:100%; }
|
|
100% { width: normal; }
|
|
}
|
|
@-moz-keyframes slideIn {
|
|
0% { width: 0; }
|
|
25% { width:100%; }
|
|
100% { width: normal; }
|
|
}
|
|
@-ms-keyframes slideIn {
|
|
0% { width: 0; }
|
|
25% { width:100%; }
|
|
100% { width: normal; }
|
|
}
|
|
@-o-keyframes slideIn {
|
|
0% { width: 0; }
|
|
25% { width:100%; }
|
|
100% { width: normal; }
|
|
}
|
|
@keyframes slideIn {
|
|
0% { width: 0; }
|
|
25% { width:100%; }
|
|
100% { width: normal; }
|
|
}
|
|
.skillBarValue {
|
|
-webkit-animation: slideIn 2s;
|
|
-moz-animation: slideIn 2s;
|
|
-o-animation: slideIn 2s;
|
|
animation: slideIn 2s;
|
|
}*/
|
|
</style>
|
|
<div class="card-toolbar">
|
|
<!--begin::Toolbar-->
|
|
<div class="d-flex justify-content-start" data-kt-filemanager-table-toolbar="base">
|
|
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#kt_modal_upload">
|
|
<span class="svg-icon svg-icon-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="black" />
|
|
<path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM16 11.6L12.7 8.29999C12.3 7.89999 11.7 7.89999 11.3 8.29999L8 11.6H11V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H16Z" fill="black" />
|
|
<path opacity="0.3" d="M11 11.6V17C11 17.6 11.4 18 12 18C12.6 18 13 17.6 13 17V11.6H11Z" fill="black" />
|
|
</svg>
|
|
</span>Upload Files
|
|
</button>
|
|
</div>
|
|
<div class="d-flex justify-content-end align-items-center d-none" data-kt-filemanager-table-toolbar="selected">
|
|
<div class="fw-bolder me-5">
|
|
<span class="me-2" data-kt-filemanager-table-select="selected_count"></span>Selected</div>
|
|
<button type="button" class="btn btn-danger" data-kt-filemanager-table-select="delete_selected">Delete Selected</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="kt_modal_upload" tabindex="-1" aria-hidden="true">
|
|
<!--begin::Modal dialog-->
|
|
<div class="modal-dialog modal-dialog-centered mw-650px">
|
|
<!--begin::Modal content-->
|
|
<div class="modal-content">
|
|
<!--begin::Form-->
|
|
<form action="/proj/thisjob" method='POST' enctype="multipart/form-data">
|
|
<input type='hidden' name='uploadForm' value='1'>
|
|
<input type='hidden' name='jobID' value='<?php echo $jobID; ?>'>
|
|
<input type='hidden' name='contractId' value='<?php echo $contract_id; ?>'>
|
|
|
|
<!--begin::Modal header-->
|
|
<div class="modal-header">
|
|
<!--begin::Modal title-->
|
|
<h2 class="fw-bolder">Upload files</h2>
|
|
<!--end::Modal title-->
|
|
<!--begin::Close-->
|
|
<div class="btn btn-icon btn-sm btn-active-icon-primary" data-bs-dismiss="modal">
|
|
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
|
|
<span class="svg-icon svg-icon-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
|
|
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="black" />
|
|
</svg>
|
|
</span>
|
|
<!--end::Svg Icon-->
|
|
</div>
|
|
<!--end::Close-->
|
|
</div>
|
|
<!--end::Modal header-->
|
|
<!--begin::Modal body-->
|
|
<div class="modal-body pt-10 pb-15 px-lg-17">
|
|
<!--begin::Input group-->
|
|
<div class="form-group">
|
|
<!--begin::Dropzone-->
|
|
<div class="dropzone dropzone-queue mb-2" id="kt_modal_upload_dropzone">
|
|
<!--begin::Controls-->
|
|
<div class="dropzone-panel mb-4">
|
|
<!-- a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a -->
|
|
<input class="dropzone-select btn btn-sm btn-primary me-2" type='file' name='fileToUpload[]' multiple="" id="fileToUpload" onchange="fileToUploadChanged(this)">
|
|
<!-- a class="dropzone-upload btn btn-sm btn-light-primary me-2">Upload All</a>
|
|
<a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a -->
|
|
<br><div id="fileToUploadList"></div>
|
|
<br><input class="dropzone-select btn btn-sm btn-primary me-2" type='button' value='Upload' name='upload' onclick="fileToUploadRun(); return false;" />
|
|
</div>
|
|
<!--end::Controls-->
|
|
<!--begin::Items-->
|
|
<div class="dropzone-items wm-200px">
|
|
<div class="dropzone-item p-5" style="display:none">
|
|
<!--begin::File-->
|
|
<div class="dropzone-file">
|
|
<div class="dropzone-filename text-dark" title="some_image_file_name.jpg">
|
|
<span data-dz-name="">some_image_file_name.jpg</span>
|
|
<strong>(
|
|
<span data-dz-size="">340kb</span>)</strong>
|
|
</div>
|
|
<div class="dropzone-error mt-0" data-dz-errormessage=""></div>
|
|
</div>
|
|
<!--end::File-->
|
|
<!--begin::Progress-->
|
|
<div class="dropzone-progress">
|
|
<div class="progress bg-light-primary">
|
|
<div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress=""></div>
|
|
</div>
|
|
</div>
|
|
<!--end::Progress-->
|
|
<!--begin::Toolbar-->
|
|
<div class="dropzone-toolbar">
|
|
<span class="dropzone-start">
|
|
<i class="bi bi-play-fill fs-3"></i>
|
|
</span>
|
|
<span class="dropzone-cancel" data-dz-remove="" style="display: none;">
|
|
<i class="bi bi-x fs-3"></i>
|
|
</span>
|
|
<span class="dropzone-delete" data-dz-remove="">
|
|
<i class="bi bi-x fs-1"></i>
|
|
</span>
|
|
</div>
|
|
<!--end::Toolbar-->
|
|
</div>
|
|
</div>
|
|
<!--end::Items-->
|
|
</div>
|
|
<!--end::Dropzone-->
|
|
<!--begin::Hint-->
|
|
<span class="form-text fs-6 text-muted">There is a file size limit [<?php echo UPLOAD_FILE_SIZE; ?> MB]. Split large files into smaller size</span>
|
|
|
|
<!--end::Hint-->
|
|
</div>
|
|
<!--end::Input group-->
|
|
</div>
|
|
<!--end::Modal body-->
|
|
</form>
|
|
<!--end::Form-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--end::Modal - Upload File-->
|
|
|
|
<script type="text/javascript">
|
|
<!--
|
|
const sizeLimit = <?php echo (isset($sizeLimit) && $sizeLimit > 0) ? $sizeLimit : '100000'; ?>;
|
|
function fileToUploadChanged(e) {
|
|
var fileList = $('#fileToUpload').prop("files"); // e.files;
|
|
$('#fileToUploadList').html('');
|
|
fileToUploadList.innerHTML = '';
|
|
var i;
|
|
for ( i = 0; i < fileList.length; i++) {
|
|
if (fileList[i].size > sizeLimit) {
|
|
$('#fileToUploadList').append('<br>Size limit exceeded: <span style="color:red;"><b>' + fileList[i].name + '</b> - ' + humanFileSize(fileList[i].size) + ' (' + fileList[i].type + ')</span>');
|
|
} else {
|
|
$('#fileToUploadList').append('<br><b>' + fileList[i].name + '</b> - ' + humanFileSize(fileList[i].size) + ' (' + fileList[i].type + ') <span class="loading-prep" id="prog'+i+'"></span>');
|
|
$('#fileToUploadList').append('<div id="file-progress-bar-container-'+i+'" class="skillBarContainer"><div id="file-progress-bar-'+i+'" class="skillBarValue value-0"></div></div>');
|
|
}
|
|
}
|
|
}
|
|
|
|
function fileToUploadRun() {
|
|
var fileList = $('#fileToUpload').prop("files");
|
|
var i, n = -1;
|
|
console.log('length='+fileList.length);
|
|
for ( i = 0; i < fileList.length; i++) {
|
|
if (fileList[i].size <= sizeLimit) {
|
|
n = i;
|
|
} else {
|
|
console.log('file "'+fileList[i].name+'" exceeds size limit '+fileList[i].size+' > '+sizeLimit);
|
|
}
|
|
}
|
|
if (n < 0) {
|
|
alert('No files for upload!');
|
|
return;
|
|
}
|
|
console.log('Max upload index is ' + n);
|
|
for ( i = 0; i <= n; i++) {
|
|
if (fileList[i].size <= sizeLimit) {
|
|
console.log('Uploading file ' + i + ' of ' + n + ' => ' + fileList[i].name);
|
|
uploadajax(n, i, function() {
|
|
alert('Done');
|
|
$('#kt_modal_upload').toggle();
|
|
$('#message').find("input[type=text], textarea").val("");
|
|
$('#message').submit();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function uploadajax(ttl,cl,refreshCallback) {
|
|
var fileList = $('#fileToUpload').prop("files");
|
|
$('#prog'+cl).removeClass('loading-prep').addClass('upload-image');
|
|
|
|
var form_data = "";
|
|
|
|
form_data = new FormData();
|
|
form_data.append("fileToUpload", fileList[cl]);
|
|
form_data.append("jobID",'<?php echo $jobID; ?>');
|
|
form_data.append("contractId",'<?php echo $contract_id; ?>');
|
|
|
|
var request = $.ajax({
|
|
url: "/proj/upload",
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
async: true,
|
|
data: form_data,
|
|
type: 'POST',
|
|
xhr: function() {
|
|
var xhr = $.ajaxSettings.xhr();
|
|
if(xhr.upload){
|
|
xhr.upload.addEventListener('progress', function(event){
|
|
var percent = 0;
|
|
if (event.lengthComputable) {
|
|
percent = Math.ceil(event.loaded / event.total * 100);
|
|
}
|
|
$('#prog'+cl).text(percent+'%')
|
|
$("#file-progress-bar-"+cl).width(percent + '%');
|
|
$("#file-progress-bar-"+cl).html(percent+'%');
|
|
}, false);
|
|
}
|
|
return xhr;
|
|
},
|
|
success: function (res, status) {
|
|
if (status == 'success') {
|
|
percent = 0;
|
|
$('#prog' + cl).text('');
|
|
$('#prog' + cl).text('--Success: ');
|
|
if (cl < ttl) {
|
|
uploadajax(ttl, cl + 1);
|
|
} else {
|
|
$('#fileToUpload').val(null);
|
|
$('#fileToUploadList').html('');
|
|
refreshCallback();
|
|
}
|
|
}
|
|
},
|
|
fail: function (res) {
|
|
alert('Failed');
|
|
}
|
|
});
|
|
}
|
|
|
|
function humanFileSize(bytes, si=false, dp=1) {
|
|
const thresh = si ? 1000 : 1024;
|
|
|
|
if (Math.abs(bytes) < thresh) {
|
|
return bytes + ' B';
|
|
}
|
|
|
|
const units = si
|
|
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
|
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
|
let u = -1;
|
|
const r = 10**dp;
|
|
|
|
do {
|
|
bytes /= thresh;
|
|
++u;
|
|
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
|
|
|
|
|
return bytes.toFixed(dp) + ' ' + units[u];
|
|
}
|
|
|
|
// -->
|
|
</script>
|