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; background: #00000070;
color: white; color: white;
filter: none; filter: none;
pointer-events: none;
} }
.tile .content { .tile .content {

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

@@ -131,18 +131,7 @@
</div> </div>
<!-- tile list --> <!-- tile list -->
<div id="listItems"> <div id="listItems">
<div class="tile active"> <!-- <div class="tile">
<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="content"> <div class="content">
<div class="display-space-between"> <div class="display-space-between">
<div class="centered-vertically"> <div class="centered-vertically">
@@ -154,20 +143,7 @@
</div> </div>
</div> </div>
</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>
</div> </div>

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

@@ -295,6 +295,7 @@ function addRow(){
setDataModified(); setDataModified();
} }
function fillMessageList(){ function fillMessageList(){
$("#listItems").html(''); $("#listItems").html('');
var innerHTML = ''; var innerHTML = '';
@@ -302,6 +303,11 @@ function fillMessageList(){
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType); innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
} }
$("#listItems").append(innerHTML); $("#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"); console.log("Message not found");
} }
// TODO: Add click() when generating tiles
const tileOnclick = function (){
}
function selectMessage(id){ function selectMessage(id){
const tiles = $('.tile');
console.log("Selecting message..."); console.log("Selecting message...");
$(".menuItemSelected").on("click"); tiles.removeClass("active");
$(".menuItemSelected").addClass("menuItem");
$(".menuItemSelected").removeClass("menuItemSelected");
console.log("Selected message deselected"); console.log("Selected message deselected");
let itemId = '#item_'+id; $('.tile[tileid="'+id+'"]').addClass("active");
$(itemId).off("click");
$(itemId).addClass("menuItemSelected");
$(itemId).removeClass("menuItem");
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 = '' + var innerHTML = '' +
'<div class="tile">' + '<div tileid="' + id + '" class="tile">' +
'<div class="content">' + '<div class="content">' +
'<div class="display-space-between">' + '<div class="display-space-between">' +
'<div class="centered-vertically">' + '<div class="centered-vertically">' +

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

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

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

@@ -131,18 +131,7 @@
</div> </div>
<!-- tile list --> <!-- tile list -->
<div id="listItems"> <div id="listItems">
<div class="tile active"> <!-- <div class="tile">
<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="content"> <div class="content">
<div class="display-space-between"> <div class="display-space-between">
<div class="centered-vertically"> <div class="centered-vertically">
@@ -154,20 +143,7 @@
</div> </div>
</div> </div>
</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>
</div> </div>

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

@@ -295,6 +295,7 @@ function addRow(){
setDataModified(); setDataModified();
} }
function fillMessageList(){ function fillMessageList(){
$("#listItems").html(''); $("#listItems").html('');
var innerHTML = ''; var innerHTML = '';
@@ -302,6 +303,11 @@ function fillMessageList(){
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType); innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
} }
$("#listItems").append(innerHTML); $("#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"); console.log("Message not found");
} }
// TODO: Add click() when generating tiles
const tileOnclick = function (){
}
function selectMessage(id){ function selectMessage(id){
const tiles = $('.tile');
console.log("Selecting message..."); console.log("Selecting message...");
$(".menuItemSelected").on("click"); tiles.removeClass("active");
$(".menuItemSelected").addClass("menuItem");
$(".menuItemSelected").removeClass("menuItemSelected");
console.log("Selected message deselected"); console.log("Selected message deselected");
let itemId = '#item_'+id; $('.tile[tileid="'+id+'"]').addClass("active");
$(itemId).off("click");
$(itemId).addClass("menuItemSelected");
$(itemId).removeClass("menuItem");
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 = '' + var innerHTML = '' +
'<div class="tile">' + '<div tileid="' + id + '" class="tile">' +
'<div class="content">' + '<div class="content">' +
'<div class="display-space-between">' + '<div class="display-space-between">' +
'<div class="centered-vertically">' + '<div class="centered-vertically">' +