| 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>
|
| 35346 |
ranu |
80 |
|
| 35348 |
ranu |
81 |
<div class="row" style="display: block;">
|
| 35346 |
ranu |
82 |
<div class="col-lg-12">
|
|
|
83 |
<form class="form-horizontal">
|
|
|
84 |
<label class="control-label col-sm-2" for="videocsvfile">Upload Video CSV:</label>
|
|
|
85 |
<div class="col-lg-3">
|
|
|
86 |
<div class="input-group">
|
|
|
87 |
<input class="form-control" type="file" id="videocsv" name="videocsv">
|
|
|
88 |
<span class="input-group-btn">
|
|
|
89 |
<button class="btn btn-default videofileupload">Upload</button>
|
|
|
90 |
</span>
|
|
|
91 |
</div>
|
|
|
92 |
</div>
|
|
|
93 |
<div class="col-lg-2">
|
|
|
94 |
<button onclick="downloadTestCSV()">Download Test CSV</button>
|
|
|
95 |
|
|
|
96 |
</div>
|
|
|
97 |
</form>
|
|
|
98 |
</div>
|
|
|
99 |
</div>
|
|
|
100 |
|
| 32956 |
amit.gupta |
101 |
<div class="row">
|
|
|
102 |
<div class="col-lg-12">
|
|
|
103 |
<form class="form-horizontal">
|
|
|
104 |
<label class="control-label col-sm-2" for="excelfile">Add Catalog CSV File:</label>
|
|
|
105 |
<div class="col-lg-3">
|
|
|
106 |
<div class="input-group">
|
|
|
107 |
<input class="form-control" type="file" id="skupload" name="skuploadfile"
|
|
|
108 |
value="Upload Images">
|
|
|
109 |
<span class="input-group-btn">
|
|
|
110 |
<button class="btn btn-default catalogfileupload">
|
|
|
111 |
Upload
|
|
|
112 |
</button>
|
|
|
113 |
</span>
|
|
|
114 |
</div>
|
|
|
115 |
</div>
|
|
|
116 |
<div class="col-lg-2">
|
|
|
117 |
<a class="btn btn-default" href="${rc.contextPath}/download/catalog-template.xls">
|
|
|
118 |
Download Template
|
|
|
119 |
</a>
|
|
|
120 |
</div>
|
|
|
121 |
</form>
|
|
|
122 |
</div>
|
|
|
123 |
</div>
|
| 30254 |
amit.gupta |
124 |
</div>
|
|
|
125 |
<div id="wrapper" style="margin-top: 20px;" class="row">
|
|
|
126 |
<form class="form-horizontal" id="mediaForm" method="POST" action="content/media/upload"
|
|
|
127 |
enctype="multipart/form-data">
|
|
|
128 |
<div class="row container">
|
|
|
129 |
<div class="col-lg-4">
|
|
|
130 |
<div class="input-group">
|
|
|
131 |
<input type="text" class="form-control typeahead" id="entityData"
|
|
|
132 |
placeholder="Search for Entity">
|
|
|
133 |
<span class="input-group-btn">
|
| 25380 |
amit.gupta |
134 |
<button id="loadImages" class="btn btn-default" type="button">Load Images</button>
|
|
|
135 |
</span>
|
| 30254 |
amit.gupta |
136 |
</div><!-- /input-group -->
|
|
|
137 |
</div><!-- /.col-lg-6 -->
|
|
|
138 |
<div class="col-lg-3">
|
|
|
139 |
<div>
|
|
|
140 |
<input id="fileUpload" multiple="multiple" type="file" class="form-control"/>
|
|
|
141 |
</div>
|
|
|
142 |
</div>
|
|
|
143 |
<div class="col-lg-2">
|
|
|
144 |
<input type="submit" class="btn btn-default" value="Upload Images">
|
|
|
145 |
</div>
|
|
|
146 |
<div class="col-lg-2">
|
|
|
147 |
<button id="btnDelete" class="btn btn-default">Delete Selected</button>
|
|
|
148 |
</div>
|
|
|
149 |
</div>
|
|
|
150 |
<div id="image-holder">
|
|
|
151 |
</div>
|
|
|
152 |
</form>
|
|
|
153 |
</div>
|
| 25380 |
amit.gupta |
154 |
</section>
|
|
|
155 |
<script type="text/javascript">
|
| 30254 |
amit.gupta |
156 |
$(document).ready(function () {
|
|
|
157 |
$('button.entityfileupload').on('click', function () {
|
|
|
158 |
var fileSelector = $('#entityupload')[0];
|
|
|
159 |
if (fileSelector != undefined && fileSelector.files[0] != undefined) {
|
|
|
160 |
if (confirm("Confirm Upload?")) {
|
|
|
161 |
doAjaxUploadRequestHandler("${rc.contextPath}/content/upload", "POST", fileSelector.files[0], function (response) {
|
|
|
162 |
if (response) {
|
|
|
163 |
alert("Content updated successfully");
|
|
|
164 |
}
|
|
|
165 |
});
|
|
|
166 |
}
|
|
|
167 |
} else {
|
|
|
168 |
alert("Please upload file!");
|
|
|
169 |
}
|
|
|
170 |
return false;
|
|
|
171 |
});
|
| 35346 |
ranu |
172 |
|
|
|
173 |
$(document).ready(function () {
|
|
|
174 |
$('button.videofileupload').on('click', function () {
|
|
|
175 |
|
|
|
176 |
var fileSelector = $('#videocsv')[0];
|
|
|
177 |
|
|
|
178 |
if (fileSelector && fileSelector.files[0]) {
|
|
|
179 |
|
|
|
180 |
if (confirm("Confirm Video URL Upload?")) {
|
|
|
181 |
|
|
|
182 |
doAjaxUploadRequestHandler(
|
|
|
183 |
"/content/video/upload", // <-- new endpoint
|
|
|
184 |
"POST",
|
|
|
185 |
fileSelector.files[0],
|
|
|
186 |
function (response) {
|
|
|
187 |
if (response) {
|
|
|
188 |
alert("Video URLs updated successfully!");
|
|
|
189 |
}
|
|
|
190 |
}
|
|
|
191 |
);
|
|
|
192 |
}
|
|
|
193 |
|
|
|
194 |
} else {
|
|
|
195 |
alert("Please upload CSV file!");
|
|
|
196 |
}
|
|
|
197 |
|
|
|
198 |
return false;
|
|
|
199 |
});
|
|
|
200 |
});
|
|
|
201 |
|
|
|
202 |
|
|
|
203 |
|
| 32956 |
amit.gupta |
204 |
$('button.catalogfileupload').on('click', function () {
|
|
|
205 |
var fileSelector = $('#skupload')[0];
|
|
|
206 |
if (fileSelector != undefined && fileSelector.files[0] != undefined) {
|
|
|
207 |
if (confirm("Confirm Upload?")) {
|
|
|
208 |
doAjaxUploadRequestHandler("${rc.contextPath}/catalog/upload", "POST", fileSelector.files[0], function (response) {
|
|
|
209 |
if (response) {
|
|
|
210 |
alert("Items Added Successfully");
|
|
|
211 |
}
|
|
|
212 |
});
|
|
|
213 |
}
|
|
|
214 |
} else {
|
|
|
215 |
alert("Please upload file!");
|
|
|
216 |
}
|
|
|
217 |
return false;
|
|
|
218 |
});
|
| 30254 |
amit.gupta |
219 |
});
|
|
|
220 |
$(document).ready(function () {
|
|
|
221 |
$("#image-holder").on('click', '.thumb-image', function () {
|
|
|
222 |
$(this).closest('.thumb-image-container').toggleClass("selectedItem");
|
|
|
223 |
});
|
|
|
224 |
$("#btnDelete").on("click", function () {
|
|
|
225 |
$(".selectedItem").remove();
|
|
|
226 |
return false;
|
|
|
227 |
});
|
|
|
228 |
$("#loadImages").on('click', function () {
|
|
|
229 |
doGetAjaxRequestHandler(context + "/content/media?entityId=" + entityId, function (response) {
|
|
|
230 |
debugger;
|
|
|
231 |
if (response) {
|
|
|
232 |
response = JSON.parse(response);
|
|
|
233 |
var image_holder = $("#image-holder");
|
|
|
234 |
response.mediaPojos.forEach(function (value, index) {
|
|
|
235 |
var checked = index == response.defaultImageIndex;
|
|
|
236 |
var divObj =
|
|
|
237 |
$(`<div class="thumb-image-container">
|
| 25420 |
amit.gupta |
238 |
<div class="radio">
|
|
|
239 |
<label>
|
|
|
240 |
<input type="radio" name="optionsRadios">
|
|
|
241 |
Set as default
|
|
|
242 |
</label>
|
|
|
243 |
</div>
|
|
|
244 |
<div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
|
|
|
245 |
</div>`).appendTo(image_holder);
|
| 30254 |
amit.gupta |
246 |
var imgObject = $("<img />", {
|
|
|
247 |
"class": "thumb-image"
|
|
|
248 |
}).appendTo(divObj);
|
|
|
249 |
divObj.find('input[type=text]').val(value.title);
|
|
|
250 |
divObj.find('input:radio').prop("checked", checked);
|
|
|
251 |
url = new URL(value.url);
|
|
|
252 |
url.protocol = "https:";
|
|
|
253 |
|
| 33973 |
tejus.loha |
254 |
fetch(url.toString(), {mode: 'no-cors'}).then(function (response) {
|
|
|
255 |
response.blob().then(function (blob) {
|
|
|
256 |
imgObject.src = URL.createObjectURL(blob);
|
|
|
257 |
});
|
|
|
258 |
});
|
| 30254 |
amit.gupta |
259 |
});
|
|
|
260 |
}
|
|
|
261 |
});
|
|
|
262 |
});
|
|
|
263 |
$("#mediaForm").on("submit", function () {
|
|
|
264 |
debugger;
|
|
|
265 |
returnedValue = "";
|
|
|
266 |
if (!$("input:radio[name='optionsRadios']").is(":checked")) {
|
|
|
267 |
alert("Please check default image!");
|
|
|
268 |
} else if (confirm("Are you sure?")) {
|
|
|
269 |
var jsonObject = {};
|
|
|
270 |
jsonObject.entityId = entityId;
|
|
|
271 |
jsonObject.mediaPojos = [];
|
|
|
272 |
$('#image-holder .thumb-image-container').each(function (index, ele) {
|
|
|
273 |
var title = $(ele).find("input:text").val().trim();
|
|
|
274 |
if (title.length == 0) {
|
|
|
275 |
alert("Descriptions are required!");
|
|
|
276 |
} else {
|
|
|
277 |
var mediaPojo = {};
|
|
|
278 |
mediaPojo.title = title;
|
|
|
279 |
mediaPojo.imageData = $(ele).find("img").attr("src");
|
|
|
280 |
debugger;
|
|
|
281 |
jsonObject.mediaPojos.push(mediaPojo);
|
|
|
282 |
if ($(ele).find("input:radio:checked").length > 0) {
|
|
|
283 |
jsonObject.defaultImageIndex = index;
|
|
|
284 |
}
|
|
|
285 |
}
|
|
|
286 |
});
|
|
|
287 |
doPostAjaxRequestWithJsonHandler("/content/media/upload", JSON.stringify(jsonObject), function (response) {
|
|
|
288 |
bootbox.alert("Images uploaded successfully");
|
|
|
289 |
});
|
|
|
290 |
|
|
|
291 |
}
|
|
|
292 |
$(".selectedItem");
|
|
|
293 |
return false;
|
|
|
294 |
});
|
|
|
295 |
|
|
|
296 |
$("#fileUpload").on('change', function () {
|
|
|
297 |
//Get count of selected files
|
|
|
298 |
var countFiles = this.files.length;
|
|
|
299 |
var imgPath = this.value;
|
|
|
300 |
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
|
|
|
301 |
var image_holder = $("#image-holder");
|
|
|
302 |
image_holder.remove(".new");
|
| 30264 |
amit.gupta |
303 |
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg" || extn == 'webp') {
|
| 30254 |
amit.gupta |
304 |
if (typeof (FileReader) != "undefined") {
|
|
|
305 |
//loop for each file selected for uploaded.
|
|
|
306 |
for (var i = 0; i < countFiles; i++) {
|
|
|
307 |
var reader = new FileReader();
|
|
|
308 |
var filename = this.files[i].name
|
|
|
309 |
reader.description = filename.substring(0, filename.lastIndexOf('.'));
|
|
|
310 |
reader.onload = function (e) {
|
|
|
311 |
var divObj =
|
|
|
312 |
$(`<div class="thumb-image-container new">
|
| 25380 |
amit.gupta |
313 |
<div class="radio">
|
|
|
314 |
<label>
|
|
|
315 |
<input type="radio" name="optionsRadios">
|
|
|
316 |
Set as default
|
|
|
317 |
</label>
|
|
|
318 |
</div>
|
|
|
319 |
<div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
|
|
|
320 |
</div>`).appendTo(image_holder);
|
| 30254 |
amit.gupta |
321 |
$("<img />", {
|
|
|
322 |
"src": e.target.result,
|
|
|
323 |
"class": "thumb-image"
|
|
|
324 |
}).appendTo(divObj);
|
|
|
325 |
divObj.find('input[type=text]').val(this.description);
|
|
|
326 |
}
|
|
|
327 |
reader.readAsDataURL(this.files[i]);
|
|
|
328 |
}
|
|
|
329 |
} else {
|
|
|
330 |
alert("This browser does not support FileReader.");
|
|
|
331 |
}
|
|
|
332 |
} else {
|
|
|
333 |
alert("Pls select only images");
|
|
|
334 |
}
|
|
|
335 |
});
|
|
|
336 |
getEntityAheadOptions($("#entityData"), function (selectedEntity) {
|
|
|
337 |
entityId = selectedEntity.catalogId_i;
|
|
|
338 |
});
|
| 25439 |
amit.gupta |
339 |
});
|
| 30254 |
amit.gupta |
340 |
$(function () {
|
|
|
341 |
$("#image-holder").sortable({
|
|
|
342 |
tolerance: 'pointer',
|
|
|
343 |
revert: 'invalid',
|
|
|
344 |
placeholder: 'thumb-image-container',
|
|
|
345 |
forceHelperSize: true
|
|
|
346 |
});
|
|
|
347 |
});
|
| 25439 |
amit.gupta |
348 |
|
| 35346 |
ranu |
349 |
function downloadTestCSV() {
|
|
|
350 |
const csvContent =
|
|
|
351 |
"serialNumber,catalogId,videoUrl\n" +
|
|
|
352 |
"1,12345,https://cdn.example.com/videos/demo-video-1.mp4\n" +
|
|
|
353 |
"2,12345,https://cdn.example.com/videos/demo-video-2.mp4\n" +
|
|
|
354 |
"3,54321,https://cdn.example.com/videos/demo-video-3.mp4";
|
|
|
355 |
|
|
|
356 |
const blob = new Blob([csvContent], {type: "text/csv;charset=utf-8;"});
|
|
|
357 |
|
|
|
358 |
const link = document.createElement("a");
|
|
|
359 |
link.href = URL.createObjectURL(blob);
|
|
|
360 |
link.download = "video_upload_test.csv";
|
|
|
361 |
link.click();
|
|
|
362 |
}
|
|
|
363 |
|
|
|
364 |
|
| 25380 |
amit.gupta |
365 |
</script>
|