Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/upload/cardimages.php
+297
View File
@@ -0,0 +1,297 @@
<div class="row">
<div class="col-lg-4">
<div class="panel panel-flat" style="background-color:lightblue;">
<form class="form-horizontal" action="?" method="POST" enctype="multipart/form-data">
<fieldset class="content-group"><?= $message ?>
<legend class="text-bold">Basic inputs</legend>
<div class="form-group">
<label class="col-lg-4 control-label text-semibold"> Select File:</label>
<div class="col-lg-8">
<input type="file" name="cardimg[]" class="file-input" multiple>
<span class="help-block">Upload images for card systems </code>.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Category</label>
<div class="col-lg-8">
<?= $catid ?>
</div>
</div>
<input type="submit" value="Upload">
</fieldset>
</form>
</div>
<div class="jumbotron" style="background-color:#F3DFE5; padding:10px;">
<h3>Card Image Standard</h3>
<p>The app is optimized for image 400X600px jpg files only. The image must be optimized for web use, the smaller the size the better</p>
</div>
</div>
<div class="col-lg-8">
<!-- Media library -->
<div class="panel panel-white">
<div class="panel-heading">
<h6 class="panel-title text-semibold">Card Images</h6>
</div>
<div class="table-responsive">
<div class="col-lg-12">
<form id="category_filter_form" class="search-block" name="category_filter_form" method="get" action="?" autocomplete="off">
<div class="form-group">
<label for="unique_id">Unique ID</label>
<input type="search" class="form-control" id="unique_id" name="unique_id" value='<?= isset($unique_id) ? $unique_id : '' ?>'>
</div>
<div class="form-group">
<?= $card_category ?>
</div>
<div class="form-group">
<label for="from_date">Date</label>
<div class="search-by-date">
<input type="search" class="form-control" id="from_date" name="from_date" value='<?= isset($from_date) ? $from_date : '' ?>'>
&nbsp;&nbsp;
<input type="search" class="form-control" id="to_date" name="to_date" value='<?= isset($to_date) ? $to_date : '' ?>'>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-search" type="submit">Search</button>
</div>
</form>
</div>
<div class="col-lg-8" style="float: right">
<div class="table-responsive" style="float: right"> <?= $link ?> </div>
</div>
<div class="col-lg-4" style="float: left">
<div class="table-responsive">
<button type="button" class="btn btn-primary" id="download-images">Download</button>
</div>
</div>
<table class="table table-striped media-library table-lg col-lg-12 ">
<thead>
<tr>
<th><input type="checkbox" id="check-all" class="styled"></th>
<th style="width:60px;">Preview</th>
<th>Category/Full Path</th>
<th style="width:150px;">File info</th>
<th class="text-center" style="width:40px;">Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($images as $image) { ?>
<tr>
<td><input type="checkbox" class="styled checkbox-selected"></td>
<td style="padding:0px;">
<a href="<?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?>" data-popup="lightbox">
<img src="<?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?>?size=80x80" alt="" class="img-rounded img-preview">
</a>
</td>
<td>
<b>Category:</b> <?= $image['category_name'] ?> <br>
<a href="<?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?>"><?= $storage ?>cards/<?= $image['uniqueid'] ?>.<?= $image['format'] ?></a><br>
<b>Unique ID:</b> <?= $image['uniqueid'] ?> <br>
<b>Date Added:</b> <?= $image['created'] ?> <br>
</td>
<td width="150px;">
<ul class="list-condensed list-unstyled no-margin">
<li><span class="text-semibold">Size: <?= $image['file_size'] ?></span></li>
<li><span class="text-semibold">Format: <?= $image['format'] ?></span></li>
<li><span class="text-semibold">Dim: <?= $image['dimensions'] ?>px</span></li>
</ul>
</td>
<td class="text-center">
</td>
</tr>
<?php } ?>
<!-- tr>
<td><input type="checkbox" class="styled"></td>checkbox-selected
<a href="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed3.jpg" data-popup="lightbox">
<img src="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed3.jpg" alt="" class="img-rounded img-preview">
</a>
</td>
<td>Category: General <br> <a href="#">https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed3.jpg</a></td>
<td><a href="#">UQ0003</a></td>
<td>Jun 10, 2015</td>
<td>
<ul class="list-condensed list-unstyled no-margin">
<li><span class="text-semibold">Size:</span> 215 Kb</li>
<li><span class="text-semibold">Format:</span> .jpg</li>
<li><span class="text-semibold">Dim:</span> 300x500px</li>
</ul>
</td>
<td class="text-center">
</td>
</tr>
<tr>
<td><input type="checkbox" class="styled"></td>
<td>
<a href="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed2.jpg" data-popup="lightbox">
<img src="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed2.jpg" alt="" class="img-rounded img-preview">
</a>
</td>
<td>Category: Data Collection <br> <a href="#">https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed2.jpg</a></td>
<td><a href="#">UQ0002</a></td>
<td>Jun 10, 2015</td>
<td>
<ul class="list-condensed list-unstyled no-margin">
<li><span class="text-semibold">Size:</span> 215 Kb</li>
<li><span class="text-semibold">Format:</span> .jpg</li>
<li><span class="text-semibold">Dim:</span> 300x500px</li>
</ul>
</td>
<td class="text-center">
</td>
</tr>
<tr>
<td><input type="checkbox" class="styled"></td>
<td>
<a href="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed4.jpg" data-popup="lightbox">
<img src="https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed4.jpg" alt="" class="img-rounded img-preview">
</a>
</td>
<td>Category: Offers <br> <a href="#">https://adminsavvy.sworks.chiefsoft.net/SAVVY/img/feed4.jpg</a></td>
<td><a href="#">UQ0004</a></td>
<td>Jun 10, 2015</td>
<td>
<ul class="list-condensed list-unstyled no-margin">
<li><span class="text-semibold">Size:</span> 215 Kb</li>
<li><span class="text-semibold">Format:</span> .jpg</li>
<li><span class="text-semibold">Dim:</span> 300x500px</li>
</ul>
</td>
<td class="text-center">
</td>
</tr -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="/assets/js/plugins/pickers/datepicker.js"></script>
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select[name="category_filter"]').on('change', (function(e) {
e.preventDefault();
$('#category_filter_form').attr('action', window.origin + '/uploads/cardimages').submit();
}));
$('#download-images').on('click', function() {
let images = [];
$.each($(".checkbox-selected:checked"), function() {
images.push($(this).closest('tr').find('td:eq(2)').find('a').attr('href'));
});
if (!images) {
return;
}
$(this).button('loading');
Promise.all(images.map(image => {
return get(image);
})).then(values => {
$('#download-images').button('reset');
});
});
function get(image) {
return new Promise(function(resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.onerror = function() {
reject(Error("Network Error"));
};
xhr.open('GET', image);
xhr.onload = function() {
if (xhr.status == 200) {
let img = document.getElementById('img');
let a = document.createElement('a');
let url = window.URL.createObjectURL(this.response);
let file_name = image.split('/')[4];
a.href = url;
a.download = file_name;
document.body.append(a);
a.click();
a.remove();
window.URL.revokeObjectURL(image);
resolve(xhr.response);
} else {
reject(Error(xhr.statusText));
}
};
xhr.responseType = 'blob';
xhr.send();
});
}
$("#check-all").click(function() {
$('.checkbox-selected').prop('checked', this.checked);
});
$(".checkbox-selected").change(function() {
if ($('.checkbox-selected:checked').length == $('.checkbox-selected').length) {
$("#check-all").prop('checked', true);
} else {
$("#check-all").prop('checked', false);
}
});
});
$(document).ready(function() {
// add library datepicker
addDatePicker('#from_date, #to_date');
})
</script>
<style>
.search-block {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-end;
}
.search-by-date {
display: flex;
flex-direction: row;
}
.search-by-date input {
width: 95px;
}
</style>