Subversion Repositories SmartDukaan

Rev

Rev 30254 | Rev 32956 | 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">
58 
            <form class="form-horizontal">
59 
                <label class="control-label col-sm-2" for="excelfile">CSV File:</label>
60 
                <div class="col-lg-3">
61 
                    <div class="input-group">
62 
                        <input class="form-control" type="file" id="entityupload" name="uploadfile"
63 
                               value="Upload Images">
64 
                        <span class="input-group-btn">
25380 amit.gupta 65 
				    		<button class="btn btn-default entityfileupload">
66 
							    Uplaod
67 
							</button>
68 
						</span>
30254 amit.gupta 69 
                    </div>
70 
                </div>
71 
                <div class="col-lg-2">
72 
                    <a class="btn btn-default" href="${rc.contextPath}/content/template.csv">
73 
                        Download Tempate
74 
                    </a>
75 
                </div>
76 
            </form>
77 
        </div>
78 
    </div>
79 
    <div id="wrapper" style="margin-top: 20px;" class="row">
80 
        <form class="form-horizontal" id="mediaForm" method="POST" action="content/media/upload"
81 
              enctype="multipart/form-data">
82 
            <div class="row container">
83 
                <div class="col-lg-4">
84 
                    <div class="input-group">
85 
                        <input type="text" class="form-control typeahead" id="entityData"
86 
                               placeholder="Search for Entity">
87 
                        <span class="input-group-btn">
25380 amit.gupta 88 
			        <button id="loadImages" class="btn btn-default" type="button">Load Images</button>
89 
			      </span>
30254 amit.gupta 90 
                    </div><!-- /input-group -->
91 
                </div><!-- /.col-lg-6 -->
92 
                <div class="col-lg-3">
93 
                    <div>
94 
                        <input id="fileUpload" multiple="multiple" type="file" class="form-control"/>
95 
                    </div>
96 
                </div>
97 
                <div class="col-lg-2">
98 
                    <input type="submit" class="btn btn-default" value="Upload Images">
99 
                </div>
100 
                <div class="col-lg-2">
101 
                    <button id="btnDelete" class="btn btn-default">Delete Selected</button>
102 
                </div>
103 
            </div>
104 
            <div id="image-holder">
105 
            </div>
106 
        </form>
107 
    </div>
25380 amit.gupta 108 
</section>
109 
<script type="text/javascript">
30254 amit.gupta 110 
    $(document).ready(function () {
111 
        $('button.entityfileupload').on('click', function () {
112 
            var fileSelector = $('#entityupload')[0];
113 
            if (fileSelector != undefined && fileSelector.files[0] != undefined) {
114 
                if (confirm("Confirm Upload?")) {
115 
                    doAjaxUploadRequestHandler("${rc.contextPath}/content/upload", "POST", fileSelector.files[0], function (response) {
116 
                        if (response) {
117 
                            alert("Content updated successfully");
118 
                        }
119 
                    });
120 
                }
121 
            } else {
122 
                alert("Please upload file!");
123 
            }
124 
            return false;
125 
        });
126 
    });
127 
    $(document).ready(function () {
128 
        $("#image-holder").on('click', '.thumb-image', function () {
129 
            $(this).closest('.thumb-image-container').toggleClass("selectedItem");
130 
        });
131 
        $("#btnDelete").on("click", function () {
132 
            $(".selectedItem").remove();
133 
            return false;
134 
        });
135 
        $("#loadImages").on('click', function () {
136 
            doGetAjaxRequestHandler(context + "/content/media?entityId=" + entityId, function (response) {
137 
                debugger;
138 
                if (response) {
139 
                    response = JSON.parse(response);
140 
                    var image_holder = $("#image-holder");
141 
                    response.mediaPojos.forEach(function (value, index) {
142 
                        var checked = index == response.defaultImageIndex;
143 
                        var divObj =
144 
                                $(`<div class="thumb-image-container">
25420 amit.gupta 145 
						<div class="radio">
146 
					  		<label>
147 
					    		<input type="radio" name="optionsRadios">
148 
					    		Set as default
149 
						  	</label>
150 
						</div>
151 
						<div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
152 
					</div>`).appendTo(image_holder);
30254 amit.gupta 153 
                        var imgObject = $("<img />", {
154 
                            "class": "thumb-image"
155 
                        }).appendTo(divObj);
156 
                        divObj.find('input[type=text]').val(value.title);
157 
                        divObj.find('input:radio').prop("checked", checked);
158 
                        url = new URL(value.url);
159 
                        url.protocol = "https:";
160 
 
161 
                        fetch(url.toString(), {mode: 'no-cors'})
162 
                                .then(function (response) {
163 
                                    response.blob().then(function (blob) {
164 
                                        imgObject.src = URL.createObjectURL(blob);
165 
                                    });
166 
                                });
167 
                    });
168 
                }
169 
            });
170 
        });
171 
        $("#mediaForm").on("submit", function () {
172 
            debugger;
173 
            returnedValue = "";
174 
            if (!$("input:radio[name='optionsRadios']").is(":checked")) {
175 
                alert("Please check default image!");
176 
            } else if (confirm("Are you sure?")) {
177 
                var jsonObject = {};
178 
                jsonObject.entityId = entityId;
179 
                jsonObject.mediaPojos = [];
180 
                $('#image-holder .thumb-image-container').each(function (index, ele) {
181 
                    var title = $(ele).find("input:text").val().trim();
182 
                    if (title.length == 0) {
183 
                        alert("Descriptions are required!");
184 
                    } else {
185 
                        var mediaPojo = {};
186 
                        mediaPojo.title = title;
187 
                        mediaPojo.imageData = $(ele).find("img").attr("src");
188 
                        debugger;
189 
                        jsonObject.mediaPojos.push(mediaPojo);
190 
                        if ($(ele).find("input:radio:checked").length > 0) {
191 
                            jsonObject.defaultImageIndex = index;
192 
                        }
193 
                    }
194 
                });
195 
                doPostAjaxRequestWithJsonHandler("/content/media/upload", JSON.stringify(jsonObject), function (response) {
196 
                    bootbox.alert("Images uploaded successfully");
197 
                });
198 
 
199 
            }
200 
            $(".selectedItem");
201 
            return false;
202 
        });
203 
 
204 
        $("#fileUpload").on('change', function () {
205 
            //Get count of selected files
206 
            var countFiles = this.files.length;
207 
            var imgPath = this.value;
208 
            var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
209 
            var image_holder = $("#image-holder");
210 
            image_holder.remove(".new");
30264 amit.gupta 211 
            if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg" || extn == 'webp') {
30254 amit.gupta 212 
                if (typeof (FileReader) != "undefined") {
213 
                    //loop for each file selected for uploaded.
214 
                    for (var i = 0; i < countFiles; i++) {
215 
                        var reader = new FileReader();
216 
                        var filename = this.files[i].name
217 
                        reader.description = filename.substring(0, filename.lastIndexOf('.'));
218 
                        reader.onload = function (e) {
219 
                            var divObj =
220 
                                    $(`<div class="thumb-image-container new">
25380 amit.gupta 221 
					<div class="radio">
222 
				  		<label>
223 
				    		<input type="radio" name="optionsRadios">
224 
				    		Set as default
225 
					  	</label>
226 
					</div>
227 
					<div><input type="text" name="descriptions[]" placeholder="Image Description"/></div>
228 
				</div>`).appendTo(image_holder);
30254 amit.gupta 229 
                            $("<img />", {
230 
                                "src": e.target.result,
231 
                                "class": "thumb-image"
232 
                            }).appendTo(divObj);
233 
                            divObj.find('input[type=text]').val(this.description);
234 
                        }
235 
                        reader.readAsDataURL(this.files[i]);
236 
                    }
237 
                } else {
238 
                    alert("This browser does not support FileReader.");
239 
                }
240 
            } else {
241 
                alert("Pls select only images");
242 
            }
243 
        });
244 
        getEntityAheadOptions($("#entityData"), function (selectedEntity) {
245 
            entityId = selectedEntity.catalogId_i;
246 
        });
25439 amit.gupta 247 
    });
30254 amit.gupta 248 
    $(function () {
249 
        $("#image-holder").sortable({
250 
            tolerance: 'pointer',
251 
            revert: 'invalid',
252 
            placeholder: 'thumb-image-container',
253 
            forceHelperSize: true
254 
        });
255 
    });
25439 amit.gupta 256 
 
25380 amit.gupta 257 
</script>
258