R11/release11-tools-mocked-services
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Message loaded and tile selected

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-04-07 16:38:41 +02:00
parent 190e36131e
commit cf13656133
6 changed files with 38 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/resources/static/css/commons/r11form.css
View File

@@ -172,6 +172,7 @@
background: #00000070;
color: white;
filter: none;
pointer-events: none;
}
.tile .content {

28
src/main/resources/static/html/mock.html
View File

@@ -131,18 +131,7 @@
</div>
<!-- tile list -->
<div id="listItems">
<div class="tile active">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
<p>Id: 1</p>
<p>Status: 200</p>
</div>
<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
</div>
</div>
</div>
<div class="tile">
<!-- <div class="tile">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
@@ -154,20 +143,7 @@
</div>
</div>
</div>
</div>
<div class="tile">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
<p>Id: 3</p>
<p>Status: 200</p>
</div>
<div>
<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>

27
src/main/resources/static/js/datatransfer.js
View File

@@ -295,6 +295,7 @@ function addRow(){
setDataModified();
}
function fillMessageList(){
$("#listItems").html('');
var innerHTML = '';
@@ -302,6 +303,11 @@ function fillMessageList(){
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
}
$("#listItems").append(innerHTML);
$('.tile').click(function(e) {
const id = parseInt(e.target.tileId)
loadMessage(id);
});
// $('.btn-tile').click(tileRemoval);
}
@@ -343,27 +349,26 @@ function loadMessage(id){
console.log("Message not found");
}
// TODO: Add click() when generating tiles
const tileOnclick = function (){
}
function selectMessage(id){
const tiles = $('.tile');
console.log("Selecting message...");
$(".menuItemSelected").on("click");
$(".menuItemSelected").addClass("menuItem");
$(".menuItemSelected").removeClass("menuItemSelected");
tiles.removeClass("active");
console.log("Selected message deselected");
let itemId = '#item_'+id;
$(itemId).off("click");
$(itemId).addClass("menuItemSelected");
$(itemId).removeClass("menuItem");
$('.tile[tileid="'+id+'"]').addClass("active");
console.log("Selected message selected");
}
const tileRemoval = function(){
$(this).closest('div.tile').remove();
}
// TODO: Modify html for tiles
function generateMessageTileHtml(id, httpStatus, mediaType){
var innerHTML = '' +
'<div class="tile">' +
'<div tileid="' + id + '" class="tile">' +
'<div class="content">' +
'<div class="display-space-between">' +
'<div class="centered-vertically">' +

1
target/classes/static/css/commons/r11form.css
View File

@@ -172,6 +172,7 @@
background: #00000070;
color: white;
filter: none;
pointer-events: none;
}
.tile .content {

28
target/classes/static/html/mock.html
View File

@@ -131,18 +131,7 @@
</div>
<!-- tile list -->
<div id="listItems">
<div class="tile active">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
<p>Id: 1</p>
<p>Status: 200</p>
</div>
<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
</div>
</div>
</div>
<div class="tile">
<!-- <div class="tile">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
@@ -154,20 +143,7 @@
</div>
</div>
</div>
</div>
<div class="tile">
<div class="content">
<div class="display-space-between">
<div class="centered-vertically">
<p>Id: 3</p>
<p>Status: 200</p>
</div>
<div>
<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>

27
target/classes/static/js/datatransfer.js
View File

@@ -295,6 +295,7 @@ function addRow(){
setDataModified();
}
function fillMessageList(){
$("#listItems").html('');
var innerHTML = '';
@@ -302,6 +303,11 @@ function fillMessageList(){
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
}
$("#listItems").append(innerHTML);
$('.tile').click(function(e) {
const id = parseInt(e.target.tileId)
loadMessage(id);
});
// $('.btn-tile').click(tileRemoval);
}
@@ -343,27 +349,26 @@ function loadMessage(id){
console.log("Message not found");
}
// TODO: Add click() when generating tiles
const tileOnclick = function (){
}
function selectMessage(id){
const tiles = $('.tile');
console.log("Selecting message...");
$(".menuItemSelected").on("click");
$(".menuItemSelected").addClass("menuItem");
$(".menuItemSelected").removeClass("menuItemSelected");
tiles.removeClass("active");
console.log("Selected message deselected");
let itemId = '#item_'+id;
$(itemId).off("click");
$(itemId).addClass("menuItemSelected");
$(itemId).removeClass("menuItem");
$('.tile[tileid="'+id+'"]').addClass("active");
console.log("Selected message selected");
}
const tileRemoval = function(){
$(this).closest('div.tile').remove();
}
// TODO: Modify html for tiles
function generateMessageTileHtml(id, httpStatus, mediaType){
var innerHTML = '' +
'<div class="tile">' +
'<div tileid="' + id + '" class="tile">' +
'<div class="content">' +
'<div class="display-space-between">' +
'<div class="centered-vertically">' +