dev-chiefworks
433 lines
14 KiB
PHP
433 lines
14 KiB
PHP
<link rel="stylesheet" type="text/css" href="/assets/json-view/jsonview.css">
|
|
<script type="text/javascript" src="/assets/json-view/jsonview.js"></script>
|
|
|
|
<!-- Dashboard content -->
|
|
<div id="overlay" style="display:none;">
|
|
<div class="spinner"></div>
|
|
<br />
|
|
Importing...
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div>
|
|
<div>
|
|
<form method="GET" id="search-form" action="/advice/advicelist">
|
|
<div class="form-group">
|
|
<div class="travel_date">
|
|
<label for="travel_date">Travel date</label>
|
|
<input type="text" class="form-control" name="travel_date" value="<?= set_value('travel_date') ?>" readonly>
|
|
</div>
|
|
<div class="duration">
|
|
<label for="">Duration</label>
|
|
<div class="search-by-range">
|
|
<input type="text" class="form-control" name="duration_from" value="<?= set_value('duration_from') ?>">
|
|
|
|
<input type="text" class="form-control" name="duration_to" value="<?= set_value('duration_to') ?>">
|
|
</div>
|
|
</div>
|
|
<div class="distance">
|
|
<label for="">Distance</label>
|
|
<div class="search-by-range">
|
|
<input type="text" class="form-control" name="distance_from" value="<?= set_value('distance_from') ?>">
|
|
|
|
<input type="text" class="form-control" name="distance_to" value="<?= set_value('distance_to') ?>">
|
|
</div>
|
|
</div>
|
|
<div class="location">
|
|
<label for="">Location</label>
|
|
<div class="search-by-range">
|
|
<select name="location_start_id" id="location_start_id">
|
|
<?php if (!empty(set_value('location_start_id'))) {
|
|
echo '<option selected value="' . set_value('location_start_id') . '">' . set_value('location_start_name') . '</option>';
|
|
} ?>
|
|
</select>
|
|
|
|
<select name="location_end_id" id="location_end_id">
|
|
<?php if (!empty(set_value('location_end_id'))) {
|
|
echo '<option selected value="' . set_value('location_end_id') . '">' . set_value('location_end_name') . '</option>';
|
|
} ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" id="search" data-action="/advice/advicelist" class="btn btn-primary btn-sm">Search</button>
|
|
<button type="button" id="export-csv" data-action="/advice/exportcsv" class="btn btn-warning btn-sm">Export</button>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="location_start_name" value="<?= set_value('location_start_name') ?>">
|
|
<input type="hidden" name="location_end_name" value="<?= set_value('location_end_name') ?>">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="container">
|
|
<div class="import-group">
|
|
<form id="form-upload">
|
|
<div class="member">
|
|
<label>Member ID</label>
|
|
<input type="text" class="form-control" name="member_id" maxlength=10>
|
|
</div>
|
|
<div class="file-upload">
|
|
<span id="pickfiles">[Choose files]</span>
|
|
<input type="button" id="btn-upload" class="btn btn-warning btn-sm" value="Upload">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="filelist"></div>
|
|
<div id="import-message"></div>
|
|
</div>
|
|
<div class="error">
|
|
<div class="invalid-feedback text-danger">
|
|
<?php echo form_error('duration_from') ? form_error('duration_from') : '' ?>
|
|
</div>
|
|
<div class="invalid-feedback text-danger">
|
|
<?php echo form_error('duration_to') ? form_error('duration_to') : '' ?>
|
|
</div>
|
|
<div class="invalid-feedback text-danger">
|
|
<?php echo form_error('distance_from') ? form_error('distance_from') : '' ?>
|
|
</div>
|
|
<div class="invalid-feedback text-danger">
|
|
<?php echo form_error('distance_to') ? form_error('distance_to') : '' ?>
|
|
</div>
|
|
</div>
|
|
<!-- Display status message -->
|
|
<?php if (!empty($this->session->flashdata('success'))) { ?>
|
|
<div class="col-xs-12">
|
|
<div class="alert alert-success"><?php echo $this->session->flashdata('success'); ?></div>
|
|
</div>
|
|
<?php } ?>
|
|
<?php if (!empty($this->session->flashdata('error'))) { ?>
|
|
<div class="col-xs-12">
|
|
<div class="alert alert-danger"><?php echo $this->session->flashdata('error'); ?></div>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
<div class="m-y-sm"><?= $pagination_link ?: '' ?></div>
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="panel panel-flat">
|
|
<div class="table-responsive">
|
|
<?= $advice_list ?: '' ?>
|
|
</div>
|
|
</div>
|
|
<div class="m-y-sm"><?= $pagination_link ?: '' ?></div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="panel panel-flat" style="height: 100%;">
|
|
<div id="transp_detail">
|
|
<div class="panel-heading">
|
|
<h6 class="panel-title">View</h6>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive" style="height:100%;">
|
|
<div id="json" class="root"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /dashboard content -->
|
|
|
|
<script src="/assets/js/plugins/forms/selects/select2.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
/** date range picker */
|
|
let datepickerOptions = {
|
|
autoUpdateInput: false,
|
|
locale: {
|
|
format: 'YYYY-MM-DD',
|
|
cancelLabel: 'Clear'
|
|
}
|
|
};
|
|
|
|
let travelDateEl = $('input[name="travel_date"]');
|
|
const travelDateVal = travelDateEl.val();
|
|
if (travelDateVal == '') {
|
|
datepickerOptions.startDate = moment().subtract(7, 'days').format('YYYY-MM-DD');
|
|
datepickerOptions.endDate = moment().format('YYYY-MM-DD');
|
|
}
|
|
travelDateEl.daterangepicker(datepickerOptions);
|
|
|
|
travelDateEl.on('apply.daterangepicker', function(ev, picker) {
|
|
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
|
|
});
|
|
|
|
travelDateEl.on('cancel.daterangepicker', function(ev, picker) {
|
|
travelDateEl.val('');
|
|
});
|
|
|
|
let start_address = generateSelect2('#location_start_id');
|
|
let end_address = generateSelect2('#location_end_id');
|
|
|
|
|
|
$('#location_start_id').on('select2:select', function(e) {
|
|
var data = e.params.data;
|
|
$('input[name="location_start_name"]').val(data.text);
|
|
});
|
|
|
|
$('#location_end_id').on('select2:select', function(e) {
|
|
var data = e.params.data;
|
|
$('input[name="location_end_name"]').val(data.text);
|
|
});
|
|
|
|
$('#search-form button').on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const action = $(this).data('action');
|
|
|
|
$(this)
|
|
.closest('form')
|
|
.attr('action', action)
|
|
.submit();
|
|
})
|
|
});
|
|
|
|
function generateSelect2(ele) {
|
|
return $(ele).select2({
|
|
placeholder: "Search by Address",
|
|
width: '18rem',
|
|
maximumSelectionSize: 1,
|
|
minimumInputLength: 3,
|
|
ajax: {
|
|
url: "/addresses/getAddressesAjax",
|
|
type: "GET",
|
|
dataType: "json",
|
|
delay: 250,
|
|
data: function(params) {
|
|
const query = {
|
|
name: params.term,
|
|
page: params.page || 1,
|
|
per_page: 20,
|
|
};
|
|
return query;
|
|
},
|
|
processResults: function(res, params) {
|
|
const {
|
|
data,
|
|
total
|
|
} = res;
|
|
params.page = params.page || 1;
|
|
return {
|
|
results: data.map(item => ({
|
|
id: item.id,
|
|
text: item.address
|
|
})),
|
|
pagination: {
|
|
more: params.page * 20 < +total
|
|
}
|
|
};
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function viewAdvice(id) {
|
|
$('.root').html('');
|
|
|
|
fetch('/advice/advicejson?id=' + id)
|
|
.then((res) => {
|
|
return res.text();
|
|
})
|
|
.then((data) => {
|
|
jsonView.format(data, '.root');
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<!-- upload and import file -->
|
|
<script src="/assets/js/plupload.full.min.js"></script>
|
|
<script>
|
|
window.addEventListener("load", function() {
|
|
let uploader = new plupload.Uploader({
|
|
runtimes: 'html5',
|
|
browse_button: 'pickfiles',
|
|
container: document.getElementById('container'),
|
|
url: '/advice/upload',
|
|
chunk_size: '200kb',
|
|
max_retries: 2,
|
|
filters: {
|
|
max_file_size: '50mb',
|
|
mime_types: [{
|
|
title: "CSV files",
|
|
extensions: "csv"
|
|
}]
|
|
},
|
|
init: {
|
|
PostInit: function() {
|
|
document.getElementById('filelist').innerHTML = '';
|
|
},
|
|
FilesAdded: function(up, files) {
|
|
$("#import-message").text('');
|
|
plupload.each(files, function(file) {
|
|
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
|
|
});
|
|
},
|
|
UploadProgress: function(up, file) {
|
|
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
|
|
},
|
|
Error: function(up, err) {
|
|
// DO YOUR ERROR HANDLING!
|
|
console.log(err);
|
|
}
|
|
}
|
|
})
|
|
|
|
uploader.bind('FileUploaded', function() {
|
|
// After file uploaded , send signal to insert all records
|
|
removeFile();
|
|
$('#overlay').fadeIn();
|
|
$.ajax({
|
|
url: '/advice/importCSV',
|
|
method: 'POST',
|
|
dataType: 'JSON',
|
|
data: {
|
|
'member_id' : $('input[name="member_id"]').val()
|
|
},
|
|
success: function(data) {
|
|
$("#import-message").text(data.message);
|
|
},
|
|
error: function(err) {
|
|
$("#import-message").text('Something went wrong !!!');
|
|
},
|
|
complete: function() {
|
|
$('#overlay').fadeOut();
|
|
}
|
|
})
|
|
})
|
|
|
|
uploader.init()
|
|
|
|
function removeFile() {
|
|
$.each(uploader.files, function (i, file) {
|
|
if (file) {
|
|
uploader.removeFile(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
// validate upload form
|
|
$("#form-upload").validate({
|
|
rules: {
|
|
member_id: {
|
|
required: true,
|
|
number: true
|
|
}
|
|
},
|
|
messages: {
|
|
member_id: {
|
|
required: 'Please input Member ID',
|
|
number: 'Please input number'
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#btn-upload').on('click', function(e) {
|
|
$('#import-message').text('');
|
|
|
|
if (uploader.files.length === 0) {
|
|
$('#import-message').text('Please choose a file !!!');
|
|
return;
|
|
}
|
|
|
|
if ( ! uploader.files[0].size) {
|
|
$('#import-message').text('File is empty');
|
|
removeFile();
|
|
return;
|
|
}
|
|
|
|
if ( ! $("#form-upload").valid()) {
|
|
return;
|
|
}
|
|
|
|
uploader.start();
|
|
})
|
|
|
|
});
|
|
</script>
|
|
<!-- upload and import file -->
|
|
<style>
|
|
#import-form .form-group {
|
|
display: flex;
|
|
}
|
|
|
|
#search-form .form-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.search-by-range,
|
|
.form-group,
|
|
#wrap {
|
|
display: flex;
|
|
}
|
|
|
|
.duration,
|
|
.distance {
|
|
flex-basis: 15%;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.form-control-file {
|
|
padding-top: 0.7rem;
|
|
}
|
|
|
|
#overlay {
|
|
background: #ffffff;
|
|
color: #666666;
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 5000;
|
|
top: 0;
|
|
left: 0;
|
|
float: left;
|
|
text-align: center;
|
|
padding-top: 25%;
|
|
opacity: .80;
|
|
}
|
|
|
|
.spinner {
|
|
margin: 0 auto;
|
|
height: 64px;
|
|
width: 64px;
|
|
animation: rotate 0.8s infinite linear;
|
|
border: 5px solid firebrick;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
#form-upload {
|
|
justify-content: space-between;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-bottom: 1rem;
|
|
width: 33rem;
|
|
position: relative;
|
|
}
|
|
|
|
input[name='member_id'] {
|
|
width: 16rem;
|
|
}
|
|
|
|
.file-upload {
|
|
position: absolute;
|
|
left: 17rem;
|
|
top: 3.2rem;
|
|
}
|
|
</style>
|