snipe-it/resources/views/hardware/import.blade.php
2016-12-15 16:41:36 -08:00

223 lines
10 KiB
PHP

@extends('layouts/default')
{{-- Page title --}}
@section('title')
{{ trans('general.import') }}
@parent
@stop
{{-- Page content --}}
@section('content')
{{-- Modal import dialog --}}
@if (session()->has('import_errors'))
<div class="box">
<div class="box-body">
<div class="alert alert-warning">
<strong>Warning</strong> {{trans('admin/hardware/message.import.errorDetail')}}
</div>
<div class="errors-table">
<table class="table table-striped table-bordered" id="errors-table">
<thead>
<th>Asset</th>
<th>Errors</th>
</thead>
<tbody>
@foreach (session('import_errors') as $asset => $itemErrors)
<tr>
<td> {{ $asset }}</td>
<td>
@foreach ($itemErrors as $field => $values )
<b>{{ $field }}:</b>
@foreach( $values as $errorString)
<span>{{$errorString[0]}} </span>
@endforeach
<br />
@endforeach
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
@endif
<div class="modal fade" id="importModal">
<form id="import-modal-form" class="form-horizontal" method="post" action="{{ route('assets/import/process-file') }}" autocomplete="off" role="form">
{{ csrf_field()}}
<input type="hidden" id="modal-filename" name="filename" value="">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Import File:</h4>
</div>
<div class="modal-body">
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12">
<label for="import-type">Import Type:</label>
</div>
<div class="col-md-8 col-xs-12">
{{ Form::select('import-type', array('asset' => 'Assets', 'accessory' => "Accessories", 'consumable' => "Consumables") , 'asset', array('class'=>'select2 parent', 'style'=>'width:100%','id' =>'import-type')) }}
</div>
</div>
<div class="dynamic-form-row">
<div class="col-md-4 col-xs-12">
<label for="import-update">Update Existing Values?:</label>
</div>
<div class="col-md-8 col-xs-12">
{{ Form::checkbox('import-update') }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ trans('button.cancel') }}</button>
<!-- <button type="button" class="btn btn-primary" id="modal-save">{{ trans('general.save') }}</button> -->
{{Form::submit(trans('general.save'), ['class' => 'btn btn-primary'])}}
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-body">
<div class="col-md-3">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-info fileinput-button">
<i class="fa fa-plus icon-white"></i>
<span>Select Import File...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" data-url="{{ url('/') }}/api/hardware/import" accept="text/csv">
</span>
</div>
<div class="col-md-9" id="progress-container" style="visibility: hidden; padding-bottom: 20px;">
<!-- The global progress bar -->
<div class="col-md-11">
<div id="progress" class="progress progress-striped active" style="margin-top: 8px;">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span id="progress-bar-text">0% Complete</span>
</div>
</div>
</div>
<div class="col-md-1">
<div class="pull-right progress-checkmark" style="display: none;">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped" id="upload-table">
<thead>
<th>File</th>
<th>Created</th>
<th>Size</th>
<th></th>
</thead>
<tbody>
@foreach ($files as $file)
<tr>
<td>{{ $file['filename'] }}</td>
<td>{{ date("M d, Y g:i A", $file['modified']) }} </td>
<td>{{ $file['filesize'] }}</td>
<td>
<a href="#" data-toggle="modal" data-target="#importModal" data-filename={{$file['filename']}} class="btn btn-sm btn-info"><i class="fa fa-spinner process"></i> Process</a>
<a class="btn btn-danger btn-sm" href="import/delete/{{ $file['filename'] }}"><i class="fa fa-trash icon-white"></i></a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@section('moar_scripts')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/lib/jquery.fileupload.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/lib/jquery.fileupload-ui.css') }}">
<script>
$(function () {
//binds to onchange event of your input field
var uploadedFileSize = 0;
$('#fileupload').bind('change', function() {
uploadedFileSize = this.files[0].size;
$('#progress-container').css('visibility', 'visible');
});
$('.process').bind('click', function() {
$('.process').addClass('fa-spin');
});
$('#fileupload').fileupload({
//maxChunkSize: 100000,
dataType: 'json',
formData: {_token: '{{ csrf_token() }}'},
progress: function (e, data) {
//var overallProgress = $('#fileupload').fileupload('progress');
//var activeUploads = $('#fileupload').fileupload('active');
var progress = parseInt((data.loaded / uploadedFileSize) * 100, 10);
$('.progress-bar').addClass('progress-bar-warning').css('width',progress + '%');
$('#progress-bar-text').html(progress + '%');
//console.dir(overallProgress);
},
done: function (e, data) {
console.dir(data);
// We use this instead of the fail option, since our API
// returns a 200 OK status which always shows as "success"
if (data && data.jqXHR.responseJSON && data.jqXHR.responseJSON.error) {
$('#progress-bar-text').html(data.jqXHR.responseJSON.error);
$('.progress-bar').removeClass('progress-bar-warning').addClass('progress-bar-danger').css('width','100%');
$('.progress-checkmark').fadeIn('fast').html('<i class="fa fa-times fa-3x icon-white" style="color: #d9534f"></i>');
//console.log(data.jqXHR.responseJSON.error);
} else {
$('.progress-bar').removeClass('progress-bar-warning').removeClass('progress-bar-danger').addClass('progress-bar-success').css('width','100%');
$('.progress-checkmark').fadeIn('fast');
$('#progress-container').delay(950).css('visibility', 'visible');
$('.progress-bar-text').html('Finished!');
$('.progress-checkmark').fadeIn('fast').html('<i class="fa fa-check fa-3x icon-white" style="color: green"></i>');
$.each(data.result.files, function (index, file) {
$('<tr><td>' + file.name + '</td><td>Just now</td><td>' + file.filesize + '</td><td><a class="btn btn-info btn-sm" href="#" data-toggle="modal" data-target="#importModal" data-filename='+ file.name + '><i class="fa fa-spinner process"></i> Process</a> <a class="btn btn-danger btn-sm" href="import/delete/' +file.name + '"><i class="fa fa-trash icon-white"></i></a></td></tr>').prependTo("#upload-table > tbody");
});
}
$('#progress').removeClass('active');
}
});
});
// Modal Import options handling
$('#importModal').on("show.bs.modal", function(event) {
var link = $(event.relatedTarget);
var filename = link.data('filename');
$(this).find('.modal-title').text("Import File: " + filename );
$("#modal-filename").val(filename);
});
</script>
@stop
@stop