First tile correctly generated
This commit is contained in:
		| @@ -130,7 +130,7 @@ | |||||||
|                     <h2>Message List</h2> |                     <h2>Message List</h2> | ||||||
|                 </div> |                 </div> | ||||||
|                 <!-- tile list --> |                 <!-- tile list --> | ||||||
|                 <div> |                 <div id="listItems"> | ||||||
|                     <div class="tile active"> |                     <div class="tile active"> | ||||||
|                         <div class="content"> |                         <div class="content"> | ||||||
|                             <div class="display-space-between"> |                             <div class="display-space-between"> | ||||||
| @@ -138,12 +138,10 @@ | |||||||
|                                     <p>Id: 1</p> |                                     <p>Id: 1</p> | ||||||
|                                     <p>Status: 200</p> |                                     <p>Status: 200</p> | ||||||
|                                 </div> |                                 </div> | ||||||
|                                 <div> |  | ||||||
|                                 <button class="modification-button btn-tile"><i class="icon-cancel"></i></button> |                                 <button class="modification-button btn-tile"><i class="icon-cancel"></i></button> | ||||||
|                             </div> |                             </div> | ||||||
|                         </div> |                         </div> | ||||||
|                     </div> |                     </div> | ||||||
|                     </div> |  | ||||||
|                     <div class="tile"> |                     <div class="tile"> | ||||||
|                         <div class="content"> |                         <div class="content"> | ||||||
|                             <div class="display-space-between"> |                             <div class="display-space-between"> | ||||||
| @@ -152,7 +150,7 @@ | |||||||
|                                     <p>Status: 200</p> |                                     <p>Status: 200</p> | ||||||
|                                 </div> |                                 </div> | ||||||
|                                 <div> |                                 <div> | ||||||
|                                     <button class="modification-button btn-tile"><i class="icon-cancel"></i></button> |                                     <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button> | ||||||
|                                 </div> |                                 </div> | ||||||
|                             </div> |                             </div> | ||||||
|                         </div> |                         </div> | ||||||
| @@ -228,5 +226,6 @@ | |||||||
|     <script type="text/javascript" src="/js/uianimation.js"></script> |     <script type="text/javascript" src="/js/uianimation.js"></script> | ||||||
|     <script type="text/javascript" src="/js/datatransfer.js"></script> |     <script type="text/javascript" src="/js/datatransfer.js"></script> | ||||||
|     <script type="text/javascript" src="/js/historyloader.js"></script> |     <script type="text/javascript" src="/js/historyloader.js"></script> | ||||||
|  |     <script type="text/javascript" src="/js/fiddle.js"></script> | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
| @@ -356,13 +356,26 @@ function selectMessage(id){ | |||||||
|     console.log("Selected message selected"); |     console.log("Selected message selected"); | ||||||
| } | } | ||||||
|  |  | ||||||
|  | const tileRemoval = function(){ | ||||||
|  |     $(this).closest('div.tile').remove(); | ||||||
|  | } | ||||||
|  |  | ||||||
| // TODO: Modify html for tiles | // TODO: Modify html for tiles | ||||||
| function generateMessageTileHtml(id, httpStatus, mediaType){ | function generateMessageTileHtml(id, httpStatus, mediaType){ | ||||||
|     var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' + |     var innerHTML = '' + | ||||||
|         '<table><tr><td>Id: '+ id +'</td></tr>' + |     '<div class="tile">' + | ||||||
|         '<tr><td>Http-status: '+ httpStatus +'</td></tr>' + |         '<div class="content">' + | ||||||
|         '</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">×</div>' + |             '<div class="display-space-between">' + | ||||||
|         '<div style="clear: both;"></div>'; |                 '<div class="centered-vertically">' + | ||||||
|  |                     '<p>Id: ' + id + '</p>' + | ||||||
|  |                     '<p>Status: ' + httpStatus + '</p>' + | ||||||
|  |                 '</div>' + | ||||||
|  |                 '<div>' + | ||||||
|  |                     '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' + | ||||||
|  |                 '</div>' + | ||||||
|  |             '</div>' + | ||||||
|  |         '</div>' + | ||||||
|  |     '</div>'; | ||||||
|     return innerHTML; |     return innerHTML; | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
							
								
								
									
										5
									
								
								src/main/resources/static/js/fiddle.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										5
									
								
								src/main/resources/static/js/fiddle.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,5 @@ | |||||||
|  | const deleteParent = function(){ | ||||||
|  |     $(this).closest('div.tile').remove(); | ||||||
|  | } | ||||||
|  |  | ||||||
|  | $('#test1').click(deleteParent); | ||||||
| @@ -130,7 +130,7 @@ | |||||||
|                     <h2>Message List</h2> |                     <h2>Message List</h2> | ||||||
|                 </div> |                 </div> | ||||||
|                 <!-- tile list --> |                 <!-- tile list --> | ||||||
|                 <div> |                 <div id="listItems"> | ||||||
|                     <div class="tile active"> |                     <div class="tile active"> | ||||||
|                         <div class="content"> |                         <div class="content"> | ||||||
|                             <div class="display-space-between"> |                             <div class="display-space-between"> | ||||||
| @@ -138,12 +138,10 @@ | |||||||
|                                     <p>Id: 1</p> |                                     <p>Id: 1</p> | ||||||
|                                     <p>Status: 200</p> |                                     <p>Status: 200</p> | ||||||
|                                 </div> |                                 </div> | ||||||
|                                 <div> |  | ||||||
|                                 <button class="modification-button btn-tile"><i class="icon-cancel"></i></button> |                                 <button class="modification-button btn-tile"><i class="icon-cancel"></i></button> | ||||||
|                             </div> |                             </div> | ||||||
|                         </div> |                         </div> | ||||||
|                     </div> |                     </div> | ||||||
|                     </div> |  | ||||||
|                     <div class="tile"> |                     <div class="tile"> | ||||||
|                         <div class="content"> |                         <div class="content"> | ||||||
|                             <div class="display-space-between"> |                             <div class="display-space-between"> | ||||||
| @@ -152,7 +150,7 @@ | |||||||
|                                     <p>Status: 200</p> |                                     <p>Status: 200</p> | ||||||
|                                 </div> |                                 </div> | ||||||
|                                 <div> |                                 <div> | ||||||
|                                     <button class="modification-button btn-tile"><i class="icon-cancel"></i></button> |                                     <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button> | ||||||
|                                 </div> |                                 </div> | ||||||
|                             </div> |                             </div> | ||||||
|                         </div> |                         </div> | ||||||
| @@ -228,5 +226,6 @@ | |||||||
|     <script type="text/javascript" src="/js/uianimation.js"></script> |     <script type="text/javascript" src="/js/uianimation.js"></script> | ||||||
|     <script type="text/javascript" src="/js/datatransfer.js"></script> |     <script type="text/javascript" src="/js/datatransfer.js"></script> | ||||||
|     <script type="text/javascript" src="/js/historyloader.js"></script> |     <script type="text/javascript" src="/js/historyloader.js"></script> | ||||||
|  |     <script type="text/javascript" src="/js/fiddle.js"></script> | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
| @@ -356,13 +356,26 @@ function selectMessage(id){ | |||||||
|     console.log("Selected message selected"); |     console.log("Selected message selected"); | ||||||
| } | } | ||||||
|  |  | ||||||
|  | const tileRemoval = function(){ | ||||||
|  |     $(this).closest('div.tile').remove(); | ||||||
|  | } | ||||||
|  |  | ||||||
| // TODO: Modify html for tiles | // TODO: Modify html for tiles | ||||||
| function generateMessageTileHtml(id, httpStatus, mediaType){ | function generateMessageTileHtml(id, httpStatus, mediaType){ | ||||||
|     var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' + |     var innerHTML = '' + | ||||||
|         '<table><tr><td>Id: '+ id +'</td></tr>' + |     '<div class="tile">' + | ||||||
|         '<tr><td>Http-status: '+ httpStatus +'</td></tr>' + |         '<div class="content">' + | ||||||
|         '</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">×</div>' + |             '<div class="display-space-between">' + | ||||||
|         '<div style="clear: both;"></div>'; |                 '<div class="centered-vertically">' + | ||||||
|  |                     '<p>Id: ' + id + '</p>' + | ||||||
|  |                     '<p>Status: ' + httpStatus + '</p>' + | ||||||
|  |                 '</div>' + | ||||||
|  |                 '<div>' + | ||||||
|  |                     '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' + | ||||||
|  |                 '</div>' + | ||||||
|  |             '</div>' + | ||||||
|  |         '</div>' + | ||||||
|  |     '</div>'; | ||||||
|     return innerHTML; |     return innerHTML; | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
							
								
								
									
										5
									
								
								target/classes/static/js/fiddle.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										5
									
								
								target/classes/static/js/fiddle.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,5 @@ | |||||||
|  | const deleteParent = function(){ | ||||||
|  |     $(this).closest('div.tile').remove(); | ||||||
|  | } | ||||||
|  |  | ||||||
|  | $('#test1').click(deleteParent); | ||||||
		Reference in New Issue
	
	Block a user