| 25380 |
amit.gupta |
1 |
<style>
|
|
|
2 |
.table-striped > tbody > tr:nth-child(odd) > td{
|
|
|
3 |
background: white;
|
|
|
4 |
background-color: white;
|
|
|
5 |
}
|
|
|
6 |
.table-striped > tbody > tr:nth-child(even) > td{
|
|
|
7 |
background: white;
|
|
|
8 |
background-color:white;
|
|
|
9 |
}
|
|
|
10 |
.table-striped > tbody > tr:hover > td,
|
|
|
11 |
.table-striped > tbody > tr:hover {
|
|
|
12 |
background-color: #e98c8f;
|
|
|
13 |
color:white;
|
|
|
14 |
}
|
|
|
15 |
.btn:hover{
|
|
|
16 |
color: grey;
|
|
|
17 |
text-decoration: none;
|
|
|
18 |
}
|
|
|
19 |
.btn-primary:hover{
|
|
|
20 |
color: grey;
|
|
|
21 |
text-decoration: none;
|
|
|
22 |
}
|
|
|
23 |
.thumb-image-container{
|
|
|
24 |
float:left;position:relative;padding:5px;
|
|
|
25 |
}
|
|
|
26 |
.thumb-image{
|
|
|
27 |
float:left;width:250px;position:relative;padding:5px;
|
|
|
28 |
}
|
|
|
29 |
.selectedItem{border:2px solid blue;}
|
|
|
30 |
</style>
|
|
|
31 |
|
|
|
32 |
<section class="wrapper">
|
|
|
33 |
<div class="row">
|
|
|
34 |
<div class="col-lg-12">
|
|
|
35 |
<h3 class="page-header"><i class="icon_document_alt"></i>CONTENT</h3>
|
|
|
36 |
<ol class="breadcrumb">
|
|
|
37 |
<li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
|
|
|
38 |
<li><i class="icon_document_alt"></i>CONTENT</li>
|
|
|
39 |
</ol>
|
|
|
40 |
</div>
|
|
|
41 |
</div>
|
|
|
42 |
<div id="upload-table">
|
|
|
43 |
<div class="row">
|
|
|
44 |
<form class="form-horizontal">
|
|
|
45 |
<label class="control-label col-sm-2" for="excelfile">CSV File:</label>
|
|
|
46 |
<div class="col-lg-3">
|
|
|
47 |
<div class="input-group">
|
|
|
48 |
<input class="form-control" type="file" id="entityupload" name="uploadfile" value="Upload Images">
|
|
|
49 |
<span class="input-group-btn">
|
|
|
50 |
<button class="btn btn-default entityfileupload">
|
|
|
51 |
Uplaod
|
|
|
52 |
</button>
|
|
|
53 |
</span>
|
|
|
54 |
</div>
|
|
|
55 |
</div>
|
|
|
56 |
<div class="col-lg-2">
|
|
|
57 |
<a class="btn btn-default" href="${rc.contextPath}/content/template.csv">
|
|
|
58 |
Download Tempate
|
|
|
59 |
</a>
|
|
|
60 |
</div>
|
|
|
61 |
</form>
|
|
|
62 |
</div>
|
|
|
63 |
</div>
|
|
|
64 |
<div id="wrapper" style="margin-top: 20px;" class="row">
|
|
|
65 |
<form class="form-horizontal" id="mediaForm" method="POST" action="content/media/upload" enctype="multipart/form-data">
|
|
|
66 |
<div class="row container">
|
|
|
67 |
<div class="col-lg-4">
|
|
|
68 |
<div class="input-group">
|
|
|
69 |
<input type="text" class="form-control typeahead" id="entityData" placeholder="Search for Entity">
|
|
|
70 |
<span class="input-group-btn">
|
|
|
71 |
<button id="loadImages" class="btn btn-default" type="button">Load Images</button>
|
|
|
72 |
</span>
|
|
|
73 |
</div><!-- /input-group -->
|
|
|
74 |
</div><!-- /.col-lg-6 -->
|
|
|
75 |
<div class="col-lg-3">
|
|
|
76 |
<div>
|
|
|
77 |
<input id="fileUpload" multiple="multiple" type="file" class="form-control"/>
|
|
|
78 |
</div>
|
|
|
79 |
</div>
|
|
|
80 |
<div class="col-lg-2">
|
|
|
81 |
<input type="submit" class="btn btn-default" value="Upload Images">
|
|
|
82 |
</div>
|
|
|
83 |
<div class="col-lg-2">
|
|
|
84 |
<button id="btnDelete" class="btn btn-default">Delete Selected</button>
|
|
|
85 |
</div>
|
|
|
86 |
</div>
|
|
|
87 |
<div id="image-holder">
|
|
|
88 |
</div>
|
|
|
89 |
</form>
|
|
|
90 |
</div>
|
|
|
91 |
</section>
|
|
|
92 |
<script type="text/javascript">
|
|
|
93 |
$(document).ready(function(){
|
|
|
94 |
$('button.entityfileupload').on('click', function() {
|
|
|
95 |
var fileSelector = $('#entityupload')[0];
|
|
|
96 |
if(fileSelector != undefined && fileSelector.files[0] != undefined) {
|
|
|
97 |
if(confirm("Confirm Upload?")) {
|
|
|
98 |
doAjaxUploadRequestHandler("${rc.contextPath}/content/upload", "POST", fileSelector.files[0], function(response){
|
|
|
99 |
if(response) {
|
|
|
100 |
alert("Content updated successfully");
|
|
|
101 |
}
|
|
|
102 |
});
|
|
|
103 |
}
|
|
|
104 |
} else {
|
|
|
105 |
alert("Please upload file!");
|
|
|
106 |
}
|
|
|
107 |
return false;
|
|
|
108 |
});
|
|
|
109 |
});
|
|
|
110 |
$(document).ready(function() {
|
|
|
111 |
$("#image-holder").on('click','.thumb-image',function(){
|
|
|
112 |
$(this).closest('.thumb-image-container').toggleClass("selectedItem");
|
|
|
113 |
});
|
|
|
114 |
$("#btnDelete").on("click",function(){
|
|
|
115 |
$(".selectedItem").remove();
|
|
|
116 |
return false;
|
|
|
117 |
});
|
|
|
118 |
$("#loadImages").on('click', function() {
|
|
|
119 |
doGetAjaxRequestHandler(context + "/content/media?entityId=" + entityId, function(response) {
|
|
|
120 |
debugger;
|
|
|
121 |
if(JSON.parse(response)){
|
|
|
122 |
debugger;
|
|
|
123 |
}
|
|
|
124 |
});
|
|
|
125 |
});
|
|
|
126 |
$("#mediaForm").on("submit",function(){
|
|
|
127 |
debugger;
|
|
|
128 |
returnedValue="";
|
|
|
129 |
if(!$("input:radio[name='optionsRadios']").is(":checked")){
|
|
|
130 |
alert("Please check default image!");
|
|
|
131 |
} else if(confirm("Are you sure?")) {
|
|
|
132 |
var jsonObject = {};
|
|
|
133 |
jsonObject.entityId = entityId;
|
|
|
134 |
jsonObject.mediaPojos = [];
|
|
|
135 |
$('#image-holder .thumb-image-container').each(function(index, ele){
|
|
|
136 |
var title = $(ele).find("input:text").val().trim();
|
|
|
137 |
if(title.length == 0) {
|
|
|
138 |
alert("Descriptions are required!");
|
|
|
139 |
} else {
|
|
|
140 |
var mediaPojo={};
|
|
|
141 |
mediaPojo.title = title;
|
|
|
142 |
mediaPojo.imageData = $(ele).find("img").attr("src");
|
|
|
143 |
debugger;
|
|
|
144 |
jsonObject.mediaPojos.push(mediaPojo);
|
|
|
145 |
if($(ele).find("input:radio:checked").length>0) {
|
|
|
146 |
jsonObject.defaultImageIndex = index;
|
|
|
147 |
}
|
|
|
148 |
}
|
|
|
149 |
});
|
|
|
150 |
doPostAjaxRequestWithJsonHandler("/content/media/upload", JSON.stringify(jsonObject), function(response){
|
|
|
151 |
bootbox.alert("Images uploaded successfully");
|
|
|
152 |
});
|
|
|
153 |
|
|
|
154 |
}
|
|
|
155 |
$(".selectedItem");
|
|
|
156 |
return false;
|
|
|
157 |
});
|
|
|
158 |
|
|
|
159 |
$("#fileUpload").on('change', function() {
|
|
|
160 |
//Get count of selected files
|
|
|
161 |
var countFiles = this.files.length;
|
|
|
162 |
var imgPath = this.value;
|
|
|
163 |
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
|
|
|
164 |
var image_holder = $("#image-holder");
|
|
|
165 |
image_holder.remove(".new");
|
|
|
166 |
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
|
|
|
167 |
if (typeof(FileReader) != "undefined") {
|
|
|
168 |
//loop for each file selected for uploaded.
|
|
|
169 |
for (var i = 0; i < countFiles; i++)
|
|
|
170 |
{
|
|
|
171 |
var reader = new FileReader();
|
|
|
172 |
var filename = this.files[i].name
|
|
|
173 |
reader.description = filename.substring(0, filename.lastIndexOf('.'));
|
|
|
174 |
reader.onload = function(e) {
|
|
|
175 |
var divObj =
|
|
|
176 |
$(`<div class="thumb-image-container new">
|
|
|
177 |
<div class="radio">
|
|
|
178 |
<label>
|
|
|
179 |
<input type="radio" name="optionsRadios">
|
|
|
180 |
Set as default
|
|
|
181 |
</label>
|
|
|
182 |
</div>
|
|
|
183 |
<div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
|
|
|
184 |
</div>`).appendTo(image_holder);
|
|
|
185 |
$("<img />", {
|
|
|
186 |
"src": e.target.result,
|
|
|
187 |
"class": "thumb-image"
|
|
|
188 |
}).appendTo(divObj);
|
|
|
189 |
divObj.find('input[type=text]').val(this.description);
|
|
|
190 |
}
|
|
|
191 |
reader.readAsDataURL(this.files[i]);
|
|
|
192 |
}
|
|
|
193 |
} else {
|
|
|
194 |
alert("This browser does not support FileReader.");
|
|
|
195 |
}
|
|
|
196 |
}
|
|
|
197 |
else {
|
|
|
198 |
alert("Pls select only images");
|
|
|
199 |
}
|
|
|
200 |
});
|
|
|
201 |
getEntityAheadOptions($("#entityData"), function(selectedEntity){
|
|
|
202 |
entityId = selectedEntity.catalogId_i;
|
|
|
203 |
});
|
|
|
204 |
});
|
|
|
205 |
</script>
|
|
|
206 |
|