| 25380 |
amit.gupta |
1 |
<style>
|
| 30254 |
amit.gupta |
2 |
.table-striped > tbody > tr:nth-child(odd) > td {
|
|
|
3 |
background: white;
|
|
|
4 |
background-color: white;
|
|
|
5 |
}
|
|
|
6 |
|
|
|
7 |
.table-striped > tbody > tr:nth-child(even) > td {
|
|
|
8 |
background: white;
|
|
|
9 |
background-color: white;
|
|
|
10 |
}
|
|
|
11 |
|
|
|
12 |
.table-striped > tbody > tr:hover > td,
|
|
|
13 |
.table-striped > tbody > tr:hover {
|
|
|
14 |
background-color: #e98c8f;
|
|
|
15 |
color: white;
|
|
|
16 |
}
|
|
|
17 |
|
|
|
18 |
.btn:hover {
|
|
|
19 |
color: grey;
|
|
|
20 |
text-decoration: none;
|
|
|
21 |
}
|
|
|
22 |
|
|
|
23 |
.btn-primary:hover {
|
|
|
24 |
color: grey;
|
|
|
25 |
text-decoration: none;
|
|
|
26 |
}
|
|
|
27 |
|
|
|
28 |
.thumb-image-container {
|
|
|
29 |
float: left;
|
|
|
30 |
position: relative;
|
|
|
31 |
padding: 5px;
|
|
|
32 |
}
|
|
|
33 |
|
|
|
34 |
.thumb-image {
|
|
|
35 |
float: left;
|
|
|
36 |
width: 250px;
|
|
|
37 |
position: relative;
|
|
|
38 |
padding: 5px;
|
|
|
39 |
}
|
|
|
40 |
|
|
|
41 |
.selectedItem {
|
|
|
42 |
border: 2px solid blue;
|
|
|
43 |
}
|
| 25380 |
amit.gupta |
44 |
</style>
|
|
|
45 |
|
|
|
46 |
<section class="wrapper">
|
| 30254 |
amit.gupta |
47 |
<div class="row">
|
|
|
48 |
<div class="col-lg-12">
|
|
|
49 |
<h3 class="page-header"><i class="icon_document_alt"></i>CONTENT</h3>
|
|
|
50 |
<ol class="breadcrumb">
|
|
|
51 |
<li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
|
|
|
52 |
<li><i class="icon_document_alt"></i>CONTENT</li>
|
|
|
53 |
</ol>
|
|
|
54 |
</div>
|
|
|
55 |
</div>
|
|
|
56 |
<div id="upload-table">
|
|
|
57 |
<div class="row">
|
| 32956 |
amit.gupta |
58 |
<div class="col-lg-12">
|
|
|
59 |
<form class="form-horizontal">
|
|
|
60 |
<label class="control-label col-sm-2" for="excelfile">Add Content CSV File:</label>
|
|
|
61 |
<div class="col-lg-3">
|
|
|
62 |
<div class="input-group">
|
|
|
63 |
<input class="form-control" type="file" id="entityupload" name="uploadfile"
|
|
|
64 |
value="Upload Images">
|
|
|
65 |
<span class="input-group-btn">
|
| 25380 |
amit.gupta |
66 |
<button class="btn btn-default entityfileupload">
|
| 32956 |
amit.gupta |
67 |
Upload
|
| 25380 |
amit.gupta |
68 |
</button>
|
|
|
69 |
</span>
|
| 32956 |
amit.gupta |
70 |
</div>
|
| 30254 |
amit.gupta |
71 |
</div>
|
| 32956 |
amit.gupta |
72 |
<div class="col-lg-2">
|
|
|
73 |
<a class="btn btn-default" href="${rc.contextPath}/content/template.csv">
|
| 33973 |
tejus.loha |
74 |
Download Template
|
| 32956 |
amit.gupta |
75 |
</a>
|
|
|
76 |
</div>
|
|
|
77 |
</form>
|
|
|
78 |
</div>
|
| 30254 |
amit.gupta |
79 |
</div>
|
| 32956 |
amit.gupta |
80 |
<div class="row">
|
|
|
81 |
<div class="col-lg-12">
|
|
|
82 |
<form class="form-horizontal">
|
|
|
83 |
<label class="control-label col-sm-2" for="excelfile">Add Catalog CSV File:</label>
|
|
|
84 |
<div class="col-lg-3">
|
|
|
85 |
<div class="input-group">
|
|
|
86 |
<input class="form-control" type="file" id="skupload" name="skuploadfile"
|
|
|
87 |
value="Upload Images">
|
|
|
88 |
<span class="input-group-btn">
|
|
|
89 |
<button class="btn btn-default catalogfileupload">
|
|
|
90 |
Upload
|
|
|
91 |
</button>
|
|
|
92 |
</span>
|
|
|
93 |
</div>
|
|
|
94 |
</div>
|
|
|
95 |
<div class="col-lg-2">
|
|
|
96 |
<a class="btn btn-default" href="${rc.contextPath}/download/catalog-template.xls">
|
|
|
97 |
Download Template
|
|
|
98 |
</a>
|
|
|
99 |
</div>
|
|
|
100 |
</form>
|
|
|
101 |
</div>
|
|
|
102 |
</div>
|
| 30254 |
amit.gupta |
103 |
</div>
|
|
|
104 |
<div id="wrapper" style="margin-top: 20px;" class="row">
|
|
|
105 |
<form class="form-horizontal" id="mediaForm" method="POST" action="content/media/upload"
|
|
|
106 |
enctype="multipart/form-data">
|
|
|
107 |
<div class="row container">
|
|
|
108 |
<div class="col-lg-4">
|
|
|
109 |
<div class="input-group">
|
|
|
110 |
<input type="text" class="form-control typeahead" id="entityData"
|
|
|
111 |
placeholder="Search for Entity">
|
|
|
112 |
<span class="input-group-btn">
|
| 25380 |
amit.gupta |
113 |
<button id="loadImages" class="btn btn-default" type="button">Load Images</button>
|
|
|
114 |
</span>
|
| 30254 |
amit.gupta |
115 |
</div><!-- /input-group -->
|
|
|
116 |
</div><!-- /.col-lg-6 -->
|
|
|
117 |
<div class="col-lg-3">
|
|
|
118 |
<div>
|
|
|
119 |
<input id="fileUpload" multiple="multiple" type="file" class="form-control"/>
|
|
|
120 |
</div>
|
|
|
121 |
</div>
|
|
|
122 |
<div class="col-lg-2">
|
|
|
123 |
<input type="submit" class="btn btn-default" value="Upload Images">
|
|
|
124 |
</div>
|
|
|
125 |
<div class="col-lg-2">
|
|
|
126 |
<button id="btnDelete" class="btn btn-default">Delete Selected</button>
|
|
|
127 |
</div>
|
|
|
128 |
</div>
|
|
|
129 |
<div id="image-holder">
|
|
|
130 |
</div>
|
|
|
131 |
</form>
|
|
|
132 |
</div>
|
| 25380 |
amit.gupta |
133 |
</section>
|
|
|
134 |
<script type="text/javascript">
|
| 30254 |
amit.gupta |
135 |
$(document).ready(function () {
|
|
|
136 |
$('button.entityfileupload').on('click', function () {
|
|
|
137 |
var fileSelector = $('#entityupload')[0];
|
|
|
138 |
if (fileSelector != undefined && fileSelector.files[0] != undefined) {
|
|
|
139 |
if (confirm("Confirm Upload?")) {
|
|
|
140 |
doAjaxUploadRequestHandler("${rc.contextPath}/content/upload", "POST", fileSelector.files[0], function (response) {
|
|
|
141 |
if (response) {
|
|
|
142 |
alert("Content updated successfully");
|
|
|
143 |
}
|
|
|
144 |
});
|
|
|
145 |
}
|
|
|
146 |
} else {
|
|
|
147 |
alert("Please upload file!");
|
|
|
148 |
}
|
|
|
149 |
return false;
|
|
|
150 |
});
|
| 32956 |
amit.gupta |
151 |
$('button.catalogfileupload').on('click', function () {
|
|
|
152 |
var fileSelector = $('#skupload')[0];
|
|
|
153 |
if (fileSelector != undefined && fileSelector.files[0] != undefined) {
|
|
|
154 |
if (confirm("Confirm Upload?")) {
|
|
|
155 |
doAjaxUploadRequestHandler("${rc.contextPath}/catalog/upload", "POST", fileSelector.files[0], function (response) {
|
|
|
156 |
if (response) {
|
|
|
157 |
alert("Items Added Successfully");
|
|
|
158 |
}
|
|
|
159 |
});
|
|
|
160 |
}
|
|
|
161 |
} else {
|
|
|
162 |
alert("Please upload file!");
|
|
|
163 |
}
|
|
|
164 |
return false;
|
|
|
165 |
});
|
| 30254 |
amit.gupta |
166 |
});
|
|
|
167 |
$(document).ready(function () {
|
|
|
168 |
$("#image-holder").on('click', '.thumb-image', function () {
|
|
|
169 |
$(this).closest('.thumb-image-container').toggleClass("selectedItem");
|
|
|
170 |
});
|
|
|
171 |
$("#btnDelete").on("click", function () {
|
|
|
172 |
$(".selectedItem").remove();
|
|
|
173 |
return false;
|
|
|
174 |
});
|
|
|
175 |
$("#loadImages").on('click', function () {
|
|
|
176 |
doGetAjaxRequestHandler(context + "/content/media?entityId=" + entityId, function (response) {
|
|
|
177 |
debugger;
|
|
|
178 |
if (response) {
|
|
|
179 |
response = JSON.parse(response);
|
|
|
180 |
var image_holder = $("#image-holder");
|
|
|
181 |
response.mediaPojos.forEach(function (value, index) {
|
|
|
182 |
var checked = index == response.defaultImageIndex;
|
|
|
183 |
var divObj =
|
|
|
184 |
$(`<div class="thumb-image-container">
|
| 25420 |
amit.gupta |
185 |
<div class="radio">
|
|
|
186 |
<label>
|
|
|
187 |
<input type="radio" name="optionsRadios">
|
|
|
188 |
Set as default
|
|
|
189 |
</label>
|
|
|
190 |
</div>
|
|
|
191 |
<div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
|
|
|
192 |
</div>`).appendTo(image_holder);
|
| 30254 |
amit.gupta |
193 |
var imgObject = $("<img />", {
|
|
|
194 |
"class": "thumb-image"
|
|
|
195 |
}).appendTo(divObj);
|
|
|
196 |
divObj.find('input[type=text]').val(value.title);
|
|
|
197 |
divObj.find('input:radio').prop("checked", checked);
|
|
|
198 |
url = new URL(value.url);
|
|
|
199 |
url.protocol = "https:";
|
|
|
200 |
|
| 33973 |
tejus.loha |
201 |
fetch(url.toString(), {mode: 'no-cors'}).then(function (response) {
|
|
|
202 |
response.blob().then(function (blob) {
|
|
|
203 |
imgObject.src = URL.createObjectURL(blob);
|
|
|
204 |
});
|
|
|
205 |
});
|
| 30254 |
amit.gupta |
206 |
});
|
|
|
207 |
}
|
|
|
208 |
});
|
|
|
209 |
});
|
|
|
210 |
$("#mediaForm").on("submit", function () {
|
|
|
211 |
debugger;
|
|
|
212 |
returnedValue = "";
|
|
|
213 |
if (!$("input:radio[name='optionsRadios']").is(":checked")) {
|
|
|
214 |
alert("Please check default image!");
|
|
|
215 |
} else if (confirm("Are you sure?")) {
|
|
|
216 |
var jsonObject = {};
|
|
|
217 |
jsonObject.entityId = entityId;
|
|
|
218 |
jsonObject.mediaPojos = [];
|
|
|
219 |
$('#image-holder .thumb-image-container').each(function (index, ele) {
|
|
|
220 |
var title = $(ele).find("input:text").val().trim();
|
|
|
221 |
if (title.length == 0) {
|
|
|
222 |
alert("Descriptions are required!");
|
|
|
223 |
} else {
|
|
|
224 |
var mediaPojo = {};
|
|
|
225 |
mediaPojo.title = title;
|
|
|
226 |
mediaPojo.imageData = $(ele).find("img").attr("src");
|
|
|
227 |
debugger;
|
|
|
228 |
jsonObject.mediaPojos.push(mediaPojo);
|
|
|
229 |
if ($(ele).find("input:radio:checked").length > 0) {
|
|
|
230 |
jsonObject.defaultImageIndex = index;
|
|
|
231 |
}
|
|
|
232 |
}
|
|
|
233 |
});
|
|
|
234 |
doPostAjaxRequestWithJsonHandler("/content/media/upload", JSON.stringify(jsonObject), function (response) {
|
|
|
235 |
bootbox.alert("Images uploaded successfully");
|
|
|
236 |
});
|
|
|
237 |
|
|
|
238 |
}
|
|
|
239 |
$(".selectedItem");
|
|
|
240 |
return false;
|
|
|
241 |
});
|
|
|
242 |
|
|
|
243 |
$("#fileUpload").on('change', function () {
|
|
|
244 |
//Get count of selected files
|
|
|
245 |
var countFiles = this.files.length;
|
|
|
246 |
var imgPath = this.value;
|
|
|
247 |
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
|
|
|
248 |
var image_holder = $("#image-holder");
|
|
|
249 |
image_holder.remove(".new");
|
| 30264 |
amit.gupta |
250 |
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg" || extn == 'webp') {
|
| 30254 |
amit.gupta |
251 |
if (typeof (FileReader) != "undefined") {
|
|
|
252 |
//loop for each file selected for uploaded.
|
|
|
253 |
for (var i = 0; i < countFiles; i++) {
|
|
|
254 |
var reader = new FileReader();
|
|
|
255 |
var filename = this.files[i].name
|
|
|
256 |
reader.description = filename.substring(0, filename.lastIndexOf('.'));
|
|
|
257 |
reader.onload = function (e) {
|
|
|
258 |
var divObj =
|
|
|
259 |
$(`<div class="thumb-image-container new">
|
| 25380 |
amit.gupta |
260 |
<div class="radio">
|
|
|
261 |
<label>
|
|
|
262 |
<input type="radio" name="optionsRadios">
|
|
|
263 |
Set as default
|
|
|
264 |
</label>
|
|
|
265 |
</div>
|
|
|
266 |
<div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
|
|
|
267 |
</div>`).appendTo(image_holder);
|
| 30254 |
amit.gupta |
268 |
$("<img />", {
|
|
|
269 |
"src": e.target.result,
|
|
|
270 |
"class": "thumb-image"
|
|
|
271 |
}).appendTo(divObj);
|
|
|
272 |
divObj.find('input[type=text]').val(this.description);
|
|
|
273 |
}
|
|
|
274 |
reader.readAsDataURL(this.files[i]);
|
|
|
275 |
}
|
|
|
276 |
} else {
|
|
|
277 |
alert("This browser does not support FileReader.");
|
|
|
278 |
}
|
|
|
279 |
} else {
|
|
|
280 |
alert("Pls select only images");
|
|
|
281 |
}
|
|
|
282 |
});
|
|
|
283 |
getEntityAheadOptions($("#entityData"), function (selectedEntity) {
|
|
|
284 |
entityId = selectedEntity.catalogId_i;
|
|
|
285 |
});
|
| 25439 |
amit.gupta |
286 |
});
|
| 30254 |
amit.gupta |
287 |
$(function () {
|
|
|
288 |
$("#image-holder").sortable({
|
|
|
289 |
tolerance: 'pointer',
|
|
|
290 |
revert: 'invalid',
|
|
|
291 |
placeholder: 'thumb-image-container',
|
|
|
292 |
forceHelperSize: true
|
|
|
293 |
});
|
|
|
294 |
});
|
| 25439 |
amit.gupta |
295 |
|
| 25380 |
amit.gupta |
296 |
</script>
|