First tile correctly generated

This commit is contained in:
2021-04-06 18:06:30 +02:00
parent 7601fb73c3
commit 190e36131e
6 changed files with 54 additions and 20 deletions

View File

@@ -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,9 +138,7 @@
<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>
@@ -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>

View File

@@ -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 + ')">&times;</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;
} }

View File

@@ -0,0 +1,5 @@
const deleteParent = function(){
$(this).closest('div.tile').remove();
}
$('#test1').click(deleteParent);

View File

@@ -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,9 +138,7 @@
<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>
@@ -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>

View File

@@ -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 + ')">&times;</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;
} }

View File

@@ -0,0 +1,5 @@
const deleteParent = function(){
$(this).closest('div.tile').remove();
}
$('#test1').click(deleteParent);