Subversion Repositories SmartDukaan

Rev

Rev 25443 | Rev 30264 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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