webmaster/crewsportswear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

manual item upload

Browse Source
This commit is contained in:
Frank John Begornia
2019-05-17 15:55:38 +08:00
parent c39fb0a2a4
commit 30962d3b4e
26 changed files with 960 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
resources/views/user-layouts/add_item.blade.php Normal file
View File

@@ -0,0 +1,132 @@
@extends('user-layouts.user_template')
@section('content')
<style>
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
</style>
<div class="content-wrapper" style="min-height: 916px;">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Add Store Item
</h1>
<ol class="breadcrumb">
<li><a href="{{ url('user') }}"><i class="fa fa-home"></i> Home</a></li>
<li><a href="{{ url('user/store-items') }}"><i class="fa fa-th"></i> Store Items</a></li>
<li class="active">Add new Item</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<form id="frm-add-item">
<div class="row">
<div class="col-md-7">
<div class="box box-primary">
<div class="box-body custom-box-body">
<div class="row">
<div class="col-md-12" id="main_thumbnail_uploader">
<div style="min-height:500px;">
<input type="file" id="imgupload" name="imgupload[]" style="display:none;" multiple accept="image/*"/>
<a href="#" id="OpenImgUpload" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);" >
<i style="font-size: 125px;" class="fa fa-picture-o"></i>
<div class="text-center"> Add item image(s)</div>
<!-- <div class="gallery"></div> -->
</a>
</div>
</div>
<!-- image preview -->
<div class="col-md-12" id="upload_thumbnail_preview" style="display:none;">
<div class="row">
<div class="col-md-12 text-center">
<img style="height:400px" src="#" id="main-thumbnail">
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="hide-bullets small-preview-thumb">
<!-- <li class="col-sm-3 col-xs-3">
<a href="#" class="text-center thumbnail a_thumbnail" id="OpenImgUpload2">
<i style="font-size: 70px;" class="fa fa-picture-o"></i>
<div class="text-center"> Add more image(s)</div>
</a>
</li> -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">
Item Details
</h3>
</div>
<div class="box-body custom-box-body">
<div class="row">
<div class="col-md-12">
<!-- <input type="hidden" class="form-control" name="item_url" placeholder="Item Name"> -->
<div class="form-group">
<div id="add_item_response_msg"></div>
</div>
<div class="form-group">
<label>Item Name</label>
<input type="text" class="form-control" id="itemName" name="itemName" placeholder="Item Name">
</div>
<div class="form-group">
<label>Item Desription</label>
<textarea class="form-control" name="itemDescription"></textarea>
</div>
<div class="form-group">
<label>Item Price</label>
<input id="item_price" name="itemPrice" class="form-control price_format" type="text" data-error="#err-price" />
</div>
<div class="form-group">
<label>Item Form</label>
<select class="form-control" name="itemForm">
<option value="jersey-and-shorts-form">Jersey and Shorts Form</option>
<option value="tshirt-form">T-Shirt Form</option>
<option value="quantity-form">Quantity Form</option>
<option value="name-and-number-form">Name and Number Form</option>
<option value="name-number-size-form">Name, Number and Size Form</option>
<option value="number-form">Number Only Form</option>
</select>
</div>
<div class="form-group">
<label>Item URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">{{ url() . "/teamstore/" . $store_array[0]->StoreUrl . '/'}}</span>
<input type="text" class="form-control" id="product_url" name="itemUrl" aria-describedby="basic-addon3" data-error="#err-itemUrl" >
</div>
<span id="err-itemUrl"></span>
</div>
<div class="form-group">
<label>Item Privacy</label>
<select class="form-control" name="itemPrivacy">
<option value="private">Private</option>
<option value="public">Public</option>
</select>
</div>
</div>
</div>
</div>
<div class="box-footer">
<!-- <button type="submit" class="btn btn-default">Cancel</button> -->
<button type="submit" id="btn_submit_new_item" class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</div>
</div>
</form>
</section>
<!-- /.content -->
</div>
@endsection

2
resources/views/user-layouts/sell_design.blade.php
View File

@@ -92,7 +92,7 @@
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">
Design Details
Item Details
</h3>
</div>
<form id="frm_sell_design">

18
resources/views/user-layouts/store_items.blade.php
View File

@@ -35,6 +35,24 @@
<h3 class="box-title">
Item List
</h3>
<div class="box-tools pull-right">
<a href="{{ url('user/store-items/add-item') }}" type="button" class="btn btn-primary btn-sm">
<i class="fa fa-plus"></i> Add new Item
</a>
<!-- <div class="btn-group">
<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-wrench"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> -->
</div>
</div>
<!-- <form role="form" id="frm-change-password"> -->
<div class="box-body">

332
resources/views/user-layouts/user_template.blade.php
View File

@@ -357,7 +357,116 @@
.thumbnail>img {
height: 187px;
}
}
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 0 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #777;
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
</style>
</head>
@@ -410,8 +519,112 @@
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<!-- \priceformat -->
<script src="{{asset('/public/designer/js/jquery.priceformat.min.js')}}"></script>
<!-- jquery-ui js -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
$( document ).ready(function() {
var tr_sortable = $('#sortable');
tr_sortable.sortable({
revert: 100,
placeholder: 'placeholder'
});
tr_sortable.disableSelection();
$('#btn_save_thumbnail_sorting').on('click', function(e) {
e.preventDefault();
var sortable_data = tr_sortable.sortable('serialize');
// div_response . text ( 'Save' );
console.log(sortable_data);
$.ajax({
data: sortable_data,
type: 'POST',
url : "{{ url('user/post/save-thumbnail-ordering') }}",
beforeSend:function(xhr){
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
},
success:function(result) {
// div_response.html(result);
console.log(result);
if(result.success){
alert('Thumbnail ordering is succcessfully updated!');
}
}
});
});
$('#myModal').on('hidden.bs.modal', function () {
location.reload();
});
$('#OpenImgUpload').click(function(){
$('#imgupload').trigger('click');
return false;
});
$('#OpenImgUpload2').click(function(){
// $('#imgupload').trigger('click');
var getImages = $('#imgupload').val();
// console.log(getImages);
return false;
});
var imagesPreview = function(input) {
if (input.files) {
var filesAmount = input.files.length;
$('#main_thumbnail_uploader').css({
"display" : "none"
});
$('#upload_thumbnail_preview').css({
"display" : ""
});
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
if(i == 0){
reader.onload = function(event) {
$('#main-thumbnail').attr('src', event.target.result);
$( ".small-preview-thumb" ).prepend('<li class="col-sm-3 col-xs-3"> ' +
'<a class="text-center thumbnail a_thumbnail active"> ' +
'<img class="img img-responsive product-center image-thumbnails" style="height: 90px;" src="'+event.target.result+'"/> ' +
'</a> ' +
'</li>');
}
}else{
reader.onload = function(event) {
$( ".small-preview-thumb" ).prepend('<li class="col-sm-3 col-xs-3"> ' +
'<a class="text-center thumbnail a_thumbnail"> ' +
'<img class="img img-responsive product-center image-thumbnails" style="height: 90px;" src="'+event.target.result+'"/> ' +
'</a> ' +
'</li>');
}
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#imgupload').on('change', function() {
imagesPreview(this);
});
$('.price_format').priceFormat({
prefix: '$ '
});
@@ -682,6 +895,45 @@
submitHandler: submitFormItemDetails
});
$("#frm-add-item").validate({
rules: {
imgupload :{
required: true
},
itemName: {
required: true
},
itemDescription: {
required: true
},
item_price: {
required: true
},
item_url: {
required: true
},
item_privacy: {
required: true
}
},
messages: {},
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
}else {
error.insertAfter(element);
}
},
submitHandler: submitFormAddItem
});
$("#frm_verification_code").validate({
rules: {
verification_code: {
@@ -831,7 +1083,8 @@
});
$('.image-thumbnails').click(function(){
// $('.image-thumbnails').click(function(){
$(document).on('button click', '.image-thumbnails', function(){
// console.log($(this)[0].firstElementChild.geAttribute('class'))
// console.log($(this).attr('src'))
$('#main-thumbnail').attr('src', $(this).attr('src'));
@@ -853,7 +1106,7 @@
url: "http://"+ip+":"+port+"/forceload/"+ $(this).data('dd'),
dataType: "json", //expect html to be returned
beforeSend: function() {
console.log('loading images');
// console.log('loading images');
},
success: function(response){
if(response['status'] == "success"){
@@ -876,8 +1129,36 @@
$('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
$('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
$('input[name="setActive"]').change(function(){
if($(this).prop('checked')){
var product_id = $(this).data('product-id');
var id = $(this).data('id');
$.ajax({
type : 'POST',
url : "{{ url('user/update-active-thumbnail') }}",
data : {
product_id : product_id,
id : id
},
beforeSend:function(xhr){
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
},
success : function(response){
console.log(response);
}
});
return false;
}
});
});
}); //end document ready
// function
function getCities(arr, q){
@@ -1069,7 +1350,46 @@
}
});
return false;
}
}
function submitFormAddItem(){
$.ajax({
type : 'POST',
url : "{{ url('user/store-items/save-new-item') }}",
data : new FormData($('#frm-add-item')[0]),
processData: false,
contentType: false,
beforeSend:function(xhr){
$("#add_item_response_msg").fadeOut();
$("#btn_submit_new_item").html('Saving... &nbsp; <i class="fa fa-spinner fa-spin"></i>');
$("#btn_submit_new_item").prop("disabled", true);
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
},
success : function(response){
if(response.success){
alert('New item is successfully added.');
location.reload();
}else{
// alert("Something went wrong. Please try again!");
$("#add_item_response_msg").html("");
$("#add_item_response_msg").fadeIn(1000, function(){
$("#add_item_response_msg").html(response.message);
$("#btn_submit_new_item").prop("disabled", false);
$("#btn_submit_new_item").html('Submit');
});
}
}
});
return false;
}
function submitFormVerificationCode(){
var data = $("#frm_verification_code").serialize();
@@ -1145,7 +1465,7 @@
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
},
success : function(response){
console.log(response);
// console.log(response);
if(response.success){
alert("Item is successfully added to your store.");
location.reload();

61
resources/views/user-layouts/view-store-item.blade.php
View File

@@ -26,9 +26,9 @@
<div class="row">
<div class="col-md-7">
<div class="box box-primary">
<!-- <div class="box-header with-border">
<a href="" type="button" class="btn btn-default pull-right"><i class="fa fa-trash"></i> Edit Design</a>
</div> -->
<div class="box-header with-border">
<button type="button" class="btn btn-default pull-right" data-toggle="modal" data-target="#myModal"><i class="fa fa-image"></i> Re-arrange thumbnail</button>
</div>
<div class="box-body custom-box-body">
<div class="row">
<div class="col-md-12">
@@ -45,10 +45,17 @@
<div class="col-md-12">
<ul class="hide-bullets">
@foreach($thumbnails_array as $thumbnail)
<li class="col-sm-3 col-xs-3">
<a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}">
<li class="col-sm-3 col-xs-4">
<a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; margin-bottom: -28px;">
<!-- <span class="close">&times;</span> -->
<img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ config('site_config.prod_private_server_ip') }}/images/{{ $thumbnail->Image }}"/>
</a>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" id="{{ 'radio-' .$thumbnail->Id }}" data-product-id="{{ $product_array[0]->Id }}" data-id="{{ $thumbnail->Id }}" name="setActive" @if($thumbnail->ImageClass != null) checked @endif />
<label for="{{ 'radio-' .$thumbnail->Id }}" style="border-top-left-radius: 0px; border-top-right-radius: 0px;">active</label>
</div>
</div>
</li>
@endforeach
</ul>
@@ -122,4 +129,48 @@
</section>
<!-- /.content -->
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th></th>
<th>Image</th>
<th class="col-sm-2 text-center">Action</th>
</tr>
</thead>
<tbody id="sortable">
@foreach($thumbnails_array as $thumbnail)
<tr id="{{ 'item-' . $thumbnail->Id }}">
<td class="text-center" style="width: 50px"><i class="fa fa-bars"></i></td>
<td><img class="img img-responsive product-center" style="height: 59.45px;" src="{{ config('site_config.prod_private_server_ip') }}/images/{{ $thumbnail->Image }}"/></td>
<td class="text-center">
<button class="btn btn-default btn-xs btn-edit-clipart" data-id="#"><i class="fa fa-edit"></i></button>
<button class="btn btn-default btn-xs btn-delete-clipart" data-id="#"><i class="fa fa-trash"></i></button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn_save_thumbnail_sorting">Save Changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endsection