Subversion Repositories SmartDukaan

Rev

Rev 35519 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

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