Subversion Repositories SmartDukaan

Rev

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