diff --git a/Frontend/assets/css/mock/common.css b/Frontend/assets/css/mock/common.css new file mode 100644 index 0000000..350f678 --- /dev/null +++ b/Frontend/assets/css/mock/common.css @@ -0,0 +1,32 @@ +@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css'); +/* @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); */ +@import url('r11addons.css'); +@import url('r11tables.css'); +@import url('r11tool.css'); +@import url('r11tooltip.css'); +@import url('r11modal.css'); +@import url('r11flexbox.css'); + +@font-face { + font-family: 'Material Icons'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); +} + +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -moz-font-feature-settings: 'liga'; + -moz-osx-font-smoothing: grayscale; +} + \ No newline at end of file diff --git a/Frontend/assets/css/mock/font/Material-Icons.woff2 b/Frontend/assets/css/mock/font/Material-Icons.woff2 new file mode 100644 index 0000000..5492a6e Binary files /dev/null and b/Frontend/assets/css/mock/font/Material-Icons.woff2 differ diff --git a/Frontend/assets/css/mock/font/Nunito-VariableFont_wght.ttf b/Frontend/assets/css/mock/font/Nunito-VariableFont_wght.ttf new file mode 100644 index 0000000..87c50a8 Binary files /dev/null and b/Frontend/assets/css/mock/font/Nunito-VariableFont_wght.ttf differ diff --git a/Frontend/assets/css/mock/font/fontello.eot b/Frontend/assets/css/mock/font/fontello.eot new file mode 100644 index 0000000..8eb8762 Binary files /dev/null and b/Frontend/assets/css/mock/font/fontello.eot differ diff --git a/Frontend/assets/css/mock/font/fontello.svg b/Frontend/assets/css/mock/font/fontello.svg new file mode 100644 index 0000000..66886e8 --- /dev/null +++ b/Frontend/assets/css/mock/font/fontello.svg @@ -0,0 +1,14 @@ + + + +Copyright (C) 2021 by original authors @ fontello.com + + + + + + + + + + \ No newline at end of file diff --git a/Frontend/assets/css/mock/font/fontello.ttf b/Frontend/assets/css/mock/font/fontello.ttf new file mode 100644 index 0000000..a6a2ea2 Binary files /dev/null and b/Frontend/assets/css/mock/font/fontello.ttf differ diff --git a/Frontend/assets/css/mock/font/fontello.woff b/Frontend/assets/css/mock/font/fontello.woff new file mode 100644 index 0000000..8e3c9e6 Binary files /dev/null and b/Frontend/assets/css/mock/font/fontello.woff differ diff --git a/Frontend/assets/css/mock/font/fontello.woff2 b/Frontend/assets/css/mock/font/fontello.woff2 new file mode 100644 index 0000000..b1c349b Binary files /dev/null and b/Frontend/assets/css/mock/font/fontello.woff2 differ diff --git a/Frontend/assets/css/mock/fontello.css b/Frontend/assets/css/mock/fontello.css new file mode 100644 index 0000000..28bc34a --- /dev/null +++ b/Frontend/assets/css/mock/fontello.css @@ -0,0 +1,59 @@ +@font-face { + font-family: 'fontello'; + src: url('font/fontello.eot?49304387'); + src: url('font/fontello.eot?49304387#iefix') format('embedded-opentype'), + url('font/fontello.woff2?49304387') format('woff2'), + url('font/fontello.woff?49304387') format('woff'), + url('font/fontello.ttf?49304387') format('truetype'), + url('font/fontello.svg?49304387#fontello') format('svg'); + font-weight: normal; + font-style: normal; + } + /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ + /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ + /* + @media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'fontello'; + src: url('../font/fontello.svg?49304387#fontello') format('svg'); + } + } + */ + + [class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: never; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ + } + + .icon-plus:before { content: '\e801'; } /* '' */ + .icon-cancel:before { content: '\e802'; } /* '' */ \ No newline at end of file diff --git a/Frontend/assets/css/mock/main.css b/Frontend/assets/css/mock/main.css new file mode 100644 index 0000000..2f8c9ff --- /dev/null +++ b/Frontend/assets/css/mock/main.css @@ -0,0 +1,4 @@ +.overflowedTableContent { + max-height: 750px; + overflow: scroll; +} \ No newline at end of file diff --git a/Frontend/assets/css/mock/r11addons.css b/Frontend/assets/css/mock/r11addons.css new file mode 100644 index 0000000..94db8ae --- /dev/null +++ b/Frontend/assets/css/mock/r11addons.css @@ -0,0 +1,72 @@ +.modification-button.btn-tile:hover { + color: #ca1111; +} + +.modification-button.btn-tile { + width: 10%; + margin: 20% 0 0 0; + font-size: 14px; + color: #00000020 +} + +.modification-button.btn-addtile { + font-size: 38px; + color: #00000030; +} + +.modification-button.btn-copy { + width: 24px; + height: 24px; + align-content: center; + display: grid; + justify-content: center; +} + +.modification-button.btn-copy img { + width: 100%; + height: 100%; +} + +.modification-button.btn-addtile:hover { + color: #58ac43; +} + +.tile { + width: 100%; + padding-top: 40%; + border-radius: 5px; + position: relative; + background: #D5D7E6; + margin-bottom: 10px; + cursor: default; + border-bottom: 1px solid darkgray; +} + +.tile:hover { + filter: brightness(110%); +} + +.tile.active { + background: #2A93B0; + color: white; + filter: none; +} + +.tile.active .btn-tile { + opacity: 0; +} + +.tile .content { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + padding: 0 2% 0 7%; + display: flex; +} + +.content p { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/Frontend/assets/css/mock/r11flexbox.css b/Frontend/assets/css/mock/r11flexbox.css new file mode 100644 index 0000000..972ddc6 --- /dev/null +++ b/Frontend/assets/css/mock/r11flexbox.css @@ -0,0 +1,57 @@ +#editable-block { + flex-grow: 0; + flex-shrink: 0; +} + +#uuid-edit { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +#uuid-edit-field { + display: flex; + width: fit-content; + align-items: center; + width: 70%; + margin-right: 10px; + +} + +#uuid-edit-field .uuid-inputField-icon{ + background: none; + color: black; + border: 0; +} + +#uuid-edit-field .uuid-inputField-icon:hover{ + color: #2A93B0; +} + +#uuid-input { + border: none; + width: 100% +} + +#uuid-input:focus { + outline: none; + +} + +#uuid-validation-strategy input { + margin-left: 10px; +} + +.disabled { + background-color: #CCD1CF; + +} + +.disabled #uuid-input { + background-color: #CCD1CF; + +} + +.uuid-inputField-icon-span { + font-size: x-large; +} \ No newline at end of file diff --git a/Frontend/assets/css/mock/r11modal.css b/Frontend/assets/css/mock/r11modal.css new file mode 100644 index 0000000..7848a43 --- /dev/null +++ b/Frontend/assets/css/mock/r11modal.css @@ -0,0 +1,104 @@ +#overlay { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + opacity: 0; + background: rgba(0, 0 , 0, 0.5); + pointer-events: none; +} + +#overlay.active { + pointer-events: all; + opacity: 1; +} + +.modal { + display: none; + width: 390px; + min-height: 71px; + max-height: 700px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: white; + padding: 5px; + border: 1px solid #f0f0f0; +} + +.modal.active { + display: block; +} + +.modal div.header { + width: 384px; + height: 24px; + background: #2e3133; + color: white; + font-size: 24px; + font-weight: 700; + padding: 3px; + margin-bottom: 5px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal div.header button { + font-size: 100%; + font-family: inherit; + border: 0; + padding: 0; + background: 0; + color: inherit; + cursor: pointer; +} + +.modal div.header button:hover { + color: white; + font-weight: 700; +} + +.modal div.body { + width: 370px; + padding: 10px; + background: #f0f0f0; + color: #2e3133; + min-height: 16px; + text-align: justify; + font-size: 16px; +} + +.modal div.function { + width: 385px; + min-height: 30px; + padding-top: 5px; + display: flex; + justify-content: space-evenly; + background: inherit; +} + +.modal div.function button { + min-height: 22px; + min-width: 34px; + max-width: 74px; + padding: 3px 20px; + outline: none; + border: 1px solid #f0f0f0; + background: rgba(205,205,205,1); + font-size: 16px; + text-align: center; + cursor: pointer; +} + +.modal div.function button:hover { + filter: brightness(110%); +} + +.r-exclamation:before { + content: '!'; + color: #3bc4f1; + font-style: normal; +} diff --git a/Frontend/assets/css/mock/r11tables.css b/Frontend/assets/css/mock/r11tables.css new file mode 100644 index 0000000..0a680ab --- /dev/null +++ b/Frontend/assets/css/mock/r11tables.css @@ -0,0 +1,71 @@ +.table-map { + width: 60%; +} + +.table-map input{ + font-size: 16px; + padding: 7px; + border: 1px solid rgba(145, 146, 146, 0.849); + border-radius: 5px; +} + +.table-map input.key { + background: #f0f0f0; +} + +.modification-button.btn-add { + font-size: 16px; + color: #00000030; + margin: auto 0 auto 0; +} + +.modification-button.btn-add:hover { + color:#58ac43; +} + +.modification-button.btn-hashmap { + font-size: 16px; + color: #00000030; + margin: auto 0 auto 0; +} + +.modification-button.btn-hashmap:hover { + color: #ca1111; +} + +.table-default { + width: 80%; + border-collapse: collapse; + border-spacing: 0; +} + +.table-default tr { + background: #f0f0f02d; +} + +.table-default tr.bottom-border { + border-bottom: 1px solid black; +} + +.table-default th { + background: #ffffff; +} + +.table-default tr.even { + background: #f0f0f0; +} + +.table-doc td, .table-doc th{ + border-spacing: 0px; + padding: 0px 10px; +} + +.table-doc td { + background-color: rgba(155, 165, 160, 0.342); +} + +.table-doc th { + background-color: #3bc4f1; + text-align: left; + color: white; +} \ No newline at end of file diff --git a/Frontend/assets/css/mock/r11tool.css b/Frontend/assets/css/mock/r11tool.css new file mode 100644 index 0000000..9368b0b --- /dev/null +++ b/Frontend/assets/css/mock/r11tool.css @@ -0,0 +1,325 @@ +@font-face { + font-family: "Nunito"; + src: url('font/Nunito-VariableFont_wght.ttf') format('truetype'); +} + +input { + box-sizing: border-box; +} + +.hyperlink, .hyperlink:visited, .hyperlink:active { + color: rgb(47, 125, 146); + cursor: pointer; +} + +.hyperlink:hover { + filter: brightness(120%); +} + +.bordered-field { + background-color: #FFFFFF; + border: 2px solid rgba(93, 99, 96, 0.705); + border-radius: 5px; + padding: 8px; + +} + +.bordered-field:focus { + outline: none; + box-shadow: 0 0 5px rgba(81, 203, 238); + border: 2px solid #00000070; +} + +.bordered-field:disabled { + background: #eeeeeed2; +} + +.vertically-resizeable { + resize: vertical; +} + +body { + font-family: 'Nunito', sans-serif; +} + +.container { + display: flex; + justify-content: left; + width: 100%; +} + +.tool { + width: 55%; + display: flex; + justify-content: space-evenly; +} + +.tool.extended { + width: 65%; +} + +.tool .tool-context { + width: 90%; +} + +.tool.extended .tool-context { + width: 75%; +} + +.tool.extended .tool-extention { + width: 20%; + padding-top: 2%; + display: block; +} + +.tool .tool-extention { + display: none; +} + +.tool-extention { + opacity: 0; + pointer-events: none; +} + +.tool-extention.active { + opacity: 100%; + pointer-events: all; +} + +.clickable-text { + padding: 0; + outline: none; + background: none; + border: none; + font-weight: 300; + cursor: pointer; +} + +.clickable-text.highlight:hover { + color: #3bc4f1; +} + +.clickable-text.switch { + font-size: 18px; + font-weight: 300; +} + +.clickable-text.switch span.toggleIndicator:before { + content: '>'; +} + +.clickable-text.switch span.toggleIndicator.active:before { + content: 'v'; +} + +.modification-button { + padding: 0; + outline: none; + background: none; + border: none; + font-weight: 300; +} + +.text-aligned-to-right { + text-align: right; +} + +.centered-vertically { + margin-top: auto; + margin-bottom: auto; +} + +.display-space-between { + width: 100%; + display: flex; + justify-content: space-between; +} + +.display-space-evenly { + display: flex; + justify-content: space-evenly; +} + +.float-left { + display: flex; + justify-content: left; + width: 100%; +} + +.version-span { + font-size: 13px; + font-weight: 400; + color: rgba(85,85,85,0.555); +} + +.block-display { + display: block; +} + +.block-label { + display: block; + margin: 0 0 0 5px; +} + +.tabmenu { + display: flex; + flex-direction: row; + text-align: center; + border-bottom: 1px solid rgba(185, 185, 185, 0.5); +} + +.tabitem { + flex-grow: 1; + cursor: pointer; + padding: 5px 0; +} + +.tabitem:hover { + font-weight: 700; +} + +.tabitem.active { + background: rgba(33, 34, 34, 0.705); + color: white; + font-weight: 700; + cursor:default; + flex-grow: 1; +} + +.big-font { + font-size: 20px; +} + +.action-button.active { + background: #2A93B0; + border: 1px solid #7ed0eb; + cursor: pointer; + +} + +.action-button.active:hover { + filter: brightness(110%); +} + +.action-button { + background: #CCD1CF; + border:1px solid rgba(186, 197, 191, 0.507); + border-radius: 5px; + color: white; + padding: 10px 20px; + font-weight: 700; + margin: 3px 0; +} + +.quater-width { + width: 25%; +} + +.half-width { + width: 50%; +} + +.tree-fourth-width { + width: 75%; +} + +.half-width.with-padding { + width: 45%; +} + +.max-width { + width: 100%; +} + +.max-width.with-padding { + width: 94%; +} + +.max-height { + height: 100%; +} + +.height-300 { + height: 300px; +} + +.max-height.with-padding { + height: 90%; +} + +.small-margins { + margin: 3%; +} + +.small-vertical-margin { + margin-top: 10px; + margin-bottom: 10px; +} + +.medium-vertical-margin { + margin-top: 30px; + margin-bottom: 30px; +} + +.large-vertical-margin { + margin-top: 50px; + margin-bottom: 50px; +} + +.textarea-300 { + height: 300px; +} + +.centered-content { + display: flex; + justify-content: center; +} + + +.tabcontent { + display: none; +} + +.tabcontent.active { + display: flex; + justify-content: center; +} + +.hiddable { + display: none; +} + +.hiddable.active { + display: inherit; +} + +/* In case of collision with classes that use 'active' */ +.hidden { + display: none; +} + +h1 { + font-weight: 400; +} + +h2 { + font-weight: 400; +} + +h3 { + font-weight: 400; +} + + + +/* TODO: Add proper class */ +/* textarea { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} */ + +/* TODO: Add proper class */ +/* code{ + line-height: 150%; +} */ \ No newline at end of file diff --git a/Frontend/assets/css/mock/r11tooltip.css b/Frontend/assets/css/mock/r11tooltip.css new file mode 100644 index 0000000..63e70f6 --- /dev/null +++ b/Frontend/assets/css/mock/r11tooltip.css @@ -0,0 +1,76 @@ +.tooltip-window { + position: fixed; + right: 0; + background: #FFFFFF; + padding: 15px 30px; + font-family: 'Nunito', sans-serif; + width: 40%; + height: 100%; + overflow: scroll; +} + +.tooltip-window.lite { + width: 30%; +} + +.tip { + display: none; +} + +.tip.active { + display: block; +} + +/* TODO: Remove !important. It's bad practice and it can cause errors in future */ +.section-button { + width: 100%; + padding: 15px 0; + font-size: 18px; + background: #b4b4b4c5; + cursor: pointer; + border-bottom: darkgray 2px solid !important; +} + +.section-button:hover { + backdrop-filter: brightness(110%); +} + +.section-button .active { + background: #00000030; +} + +.List .collapsibleContent { + border-left: #bdc5c9 2px solid; + overflow: hidden; + background: #ffffff50; +} + +/* TODO: .section class is to generic. It should be renamed */ +.section{ + padding: 10px 0px 20px 0px ; +} + +/* TODO: content subclass already in use. Creating content class overrides the subclass. +Make .content a subclass of .content */ +/* .content { + padding: 0px 15px 0px 15px ; + text-align: justify; + overflow: hidden; + transition: max-height .2s ease-out; + max-height: 0px; + border-left: #c0c2c3 2px solid; + +} */ + +.collapsibleMini::before{ + content: "►"; +} + +.collapsibleMini.active::before{ + content: "▼"; +} + +/* TODO: Add proper class */ +/* button:hover{ + filter: brightness(110%); +} */ \ No newline at end of file diff --git a/Frontend/assets/scripts/mock/datatransfer.js b/Frontend/assets/scripts/mock/datatransfer.js new file mode 100644 index 0000000..ba21743 --- /dev/null +++ b/Frontend/assets/scripts/mock/datatransfer.js @@ -0,0 +1,541 @@ +var clientUUID = ''; +var advancedDisplayed = false; +var json = {}; +var jsonIndex = 0; +var lastId = 1; +var htable_row = 0; +var host = getDomain(); +var dataModified = false; +const addMessageName = 'addMessage'; +const loadMessageName = 'changeMessage'; +const removeMessageName = 'removeMessage'; + +const C_UUID = 'mock-uuid'; +const C_ID = 'last-displayed-id'; +const C_ADV = 'advanced-mode'; + +const color_red = "#ff8f8f"; +const color_grey = "#6b6b6b"; + +const setModified = function(){ + setDataModified(); +} +const setOrigin = function(){ + setDataOrigin(); +} + +const getUpdate = function(){ + updateData(); +} +const dataRefresh = function(){ + getData(); +} +$('#btn-newtile').click(function(){callAddMessage()}); +// $('#btn-addRow').click(function(){addRow()}); +// $('#btn-save').click(getUpdate); + +function getData(){ + $.getJSON(host + '/api/mock/'+clientUUID, function(data) { + json = data; + checkUuid(); + + + refreshData(); + }); +} + + +function checkUuid(){ + if(clientUUID == null || clientUUID == undefined || clientUUID == ''){ + clientUUID = json[0].clientUUID; + setCookie(); + } +} + +function getDomain(){ + var url = window.location.href; + var arr = url.split("/"); + var result = arr[0] + "//" + arr[2]; + return result; +} + +function httpStatusInvalid(){ + value = $('#httpStatus').val(); + return value == ''; +} + +function setDataModified(){ + if(httpStatusInvalid()){ + $('#btn-save').removeClass('active'); + $('#btn-save').off(); + document.getElementById("httpStatus").style.backgroundColor = color_red; + return; + } + dataModified = true; + $('#btn-save').addClass('active'); + $('#btn-save').click(getUpdate); + document.getElementById("httpStatus").style.backgroundColor = null; +} + +//Adding change listener to fields +$('.data-field').change(setModified); + +function setDataOrigin(){ + dataModified = false; + $('#btn-save').removeClass('active'); + $('#btn-save').off(); +} + +const idToDisplay = function(){ + let defaultId = json[0].mockedResponseId; + if(lastId == undefined || lastId == null) return defaultId; + for(let i=0; i 0){ + jsonIndex -= 1; + return json[jsonIndex].mockedResponseId; + } + return defaultId; +} + +function refreshData(){ + $("#uuid-input").val(clientUUID); + fillMessageList(); + + let id = idToDisplay(); + + loadMessage(id); + +} + +function setCookie(){ + document.cookie = C_UUID + '=' +clientUUID; + document.cookie = C_ID + '=' + lastId; + document.cookie = C_ADV + '=' + advancedVisibility; +} + +function loadCookies(){ + clientUUID = getCookie(C_UUID); + lastId = getCookie(C_ID); + advancedDisplayed = getCookie(C_ADV) == 'true'; +} + +function getCookie(cname) { + var name = cname + '='; + var decodedCookie = decodeURIComponent(document.cookie); + var ca = decodedCookie.split(';'); + for(var i = 0; i '+link+''; + $('#messageLink').html(linkHtml); + $('#httpStatus').val(httpStatus); + $('#uuid-input').val(uuid); + $('#typeSelector').val(mediaType); + $('#bodyEditor').val(body); + $('#mockedMessageId').html(id); + +} + +function changeEditionOfUUID(element){ + + var inputFieldId= "#uuid-input" + var inputFieldDiv = "#uuid-edit-field" + if(element.checked){ + $(inputFieldId).removeAttr('disabled'); + $(inputFieldDiv).removeClass('disabled'); + } else{ + $(inputFieldId).attr('disabled', true); + $(inputFieldDiv).addClass('disabled'); + } +} + +function copyUUIDToClipboard(){ + navigator.clipboard.writeText( document.getElementById('uuid-input').value ); +} + + +async function fetchUUIDCheck(givenUUID , strategy){ + var newUUID = "UUID" ; + url = host + "/api/mock/check/"; + + switch(strategy){ + case "new":{ + await fetch(url + givenUUID+ "/", { method : "GET" }) + .then ( response => response.text() ) + .then ( data => { + newUUID = data; + + } ) + break; + } + case "restore":{ + await fetch(url + givenUUID + "/" + clientUUID + "/" , { method: "GET" }) + .then (response => response.text() ) + .then (data => { + newUUID = data; + + } ) + break; + } + } + return newUUID ; +} + +function checkUUIDChars(uuid) { + uuid.replace(/ /g,'') + const regex = new RegExp("^[A-z0-9-]+$"); + + if(regex.test(uuid) && uuid != ""){ + return uuid ; + } + return "invalid"; + } + +function changeUUID(element){ + + const uuidStrategy = $('input[name="uuid-validation-type"]:checked').val(); + const givenUUID = checkUUIDChars(element.value); + + if( givenUUID == clientUUID ){ + $("#uuid-input").attr("disabled", true); + uuidChangeModalDisplay("noChg"); + return; + } + + var newUUID = fetchUUIDCheck(givenUUID , uuidStrategy); + var changeMessage = uuidStrategy; + newUUID + .then( data => { + if (givenUUID == data) { + changeMessage = "success"; + } + clientUUID = data; + $("#editable").attr("checked", false); + + uuidChangeModalDisplay(changeMessage); + document.cookie = C_UUID + '=' + data ; + } ) + loadCookies(); + refreshData(); +} + + +function createLink(uuid, id){ + var link = host + '/api/mock/r/'+uuid+'/'+id; + return link; +} + +function fillHeaderTable(headers){ + var innerHTML = buildHeaderMapHtml(headers); + refreshHeaderTable(innerHTML); +} + +function refreshHeaderTable(html){ + $('#headerMapTable').html(html); + $('.table-map').change(function(){setDataModified()}); + $('.btn-hashmap').click(function(){ + $(this).closest('tr').remove(); + setDataModified(); + }) +} + +function buildHeaderMapHtml(headers){ + var innerHTML = ''; + for(var key in headers){ + innerHTML += buildRowHtml(key, headers[key]); + } + return innerHTML; +} + +function addRow(key, value){ + var headerMap = $('#headerMapTable'); + var headersMapHtml = headerMap.html(); + headersMapHtml += buildRowHtml(key, value); + refreshHeaderTable(headersMapHtml); +} + +const newRowInput = function(){ + const hName = $('#headerKeyInput'); + const hValue = $('#headerValueInput'); + if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){ + addRow(hName.val(), hValue.val()); + hName.val(null); + hValue.val(null); + setDataModified(); + } +} + +$('#btn-newRow').click(newRowInput); + +function checkIfInputValid(input){ + return !(input == '' || input == null || input == undefined); +} + +function checkIfHeaderEssential(key){ + + if( key == "Connection" || key == "Keep-Alive" || key == "Date" ){ + return true; + } + return false; + +} + +function buildRowHtml(key, value){ + + if(checkIfHeaderEssential(key)){ + return '' + + '' + + '' + + '' + + ''; + } + return '' + + '' + + '' + + '' + + '' + + ''; +} + + +function fillMessageList(){ + $("#listItems").html(''); + var innerHTML = ''; + for(let i=0; i' + + '
' + + '
' + + '
' + + '

Id: ' + id + '

' + + '

Status: ' + httpStatus + '

' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + ''; + return innerHTML; +} + + + +const onbuild = function(){ + loadCookies(); + getData(); + if(advancedDisplayed) { + changeAdvancedVisibility(); + } +} + +$(document).ready(onbuild); + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + + + +function generateJson(){ + var newJson = + { + clientUUID: json[jsonIndex].clientUUID, + mockedResponseId: json[jsonIndex].mockedResponseId, + mediaType: $('#typeSelector').val(), + messageBody: $('#bodyEditor').val(), + httpStatus: $('#httpStatus').val(), + httpHeaders: {}, + }; + newJson['httpHeaders'] = convertTableToJson(); + + json[jsonIndex] = newJson; + return newJson; +} + + +function convertTableToJson(){ + const rows = $('#headerMapTable').children(); + + var obj = {}; + var key; + for(let i=0; i' + + '' + historyJson[i].dateTimeStamp + '' + + '' + historyJson[i].interfaceName + '' + + ''; + } + return innerHTML; +} + +function displayHistory(){ + $('#historyTable tbody').html(historyToHtml()); +} diff --git a/Frontend/assets/scripts/mock/modal.js b/Frontend/assets/scripts/mock/modal.js new file mode 100644 index 0000000..3061752 --- /dev/null +++ b/Frontend/assets/scripts/mock/modal.js @@ -0,0 +1,89 @@ +var modalDisplayed = false; +var methodToCall = { + name: null, + id: null +}; + +const overlay = $('#overlay'); +const savedModal = $('#modal-confirm'); +const dataLossModal = $('#modal-query'); +const uuidChangeModal = $('#modal-uuidChanged') +const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0); +const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1); +const allModals = $('.modal'); +const btnModalClose = $('.modal button'); +const closeModals = function() { + hideModal(allModals); +} +const savedModalDisplay = function() { + + showModal(savedModal); + setTimeout(closeModals, 2000); +} +const dataLossModalDisplay = function(){ + showModal(dataLossModal); +} + +const uuidChangeModalDisplay = function(addidionalMessage){ + + switch(addidionalMessage){ + case "success":{ + + $(".uuid-modal-body").removeClass("active"); + $("#changeUUIDSuccess").addClass("active"); + break; + } + case "new":{ + + $(".uuid-modal-body").removeClass("active"); + $("#newUUID").addClass("active"); + break; + } + case "restore":{ + + $(".uuid-modal-body").removeClass("active"); + $("#restoredUUID").addClass("active"); + break; + } + case "noChg":{ + + $(".uuid-modal-body").removeClass("active"); + $("#noChgUUID").addClass("active"); + break; + } + } + showModal(uuidChangeModal); +} + +function setMethodToCall(name, id){ + methodToCall.name = name; + methodToCall.id = id; +} + +const dropChangesAndClose = function(){ + callMethodByName(methodToCall) + hideModal(dataLossModal); +} + +function showModal(jmodal){ + if(modalDisplayed) return; + overlay.addClass('active'); + jmodal.addClass('active'); + modalDisplayed = true; +} + +function hideModal(jmodal){ + if(!modalDisplayed) return; + if ($(uuidChangeModal).hasClass('active')) window.location.reload(); + overlay.removeClass('active'); + jmodal.removeClass('active'); + modalDisplayed = false; +} + +btnModalClose.click(closeModals); + +overlay.click(closeModals); + +dataLossModalNo.click(closeModals); +dataLossModalYes.click(dropChangesAndClose); + diff --git a/Frontend/assets/scripts/mock/uianimation.js b/Frontend/assets/scripts/mock/uianimation.js new file mode 100644 index 0000000..46dfb20 --- /dev/null +++ b/Frontend/assets/scripts/mock/uianimation.js @@ -0,0 +1,141 @@ +var advancedVisibility = false; +var selectMenu = $("#selectMenuContent"); +var advancedTab = $("#advanced"); +var basicID = $("#basicItemData") +var advancedID = $("#advancedItemData"); +var advancedUUIDOptions = $("#uuid-validation-strategy"); +var focusedField = false; +function changeAdvancedVisibility(){ + if(advancedVisibility){ + selectMenu.removeClass('active'); + advancedTab.removeClass('active'); + advancedID.removeClass('active'); + advancedUUIDOptions.removeClass('active'); + basicID.addClass('active'); + advancedVisibility = false; + } + else { + selectMenu.addClass('active'); + advancedTab.addClass('active'); + advancedID.addClass('active'); + advancedUUIDOptions.addClass('active'); + basicID.removeClass('active'); + advancedVisibility = true; + } + setCookie(); +} + +const historyFilter = $('#history-filter'); +const historyFilterSwitch = function(){ + historyFilter.toggleClass('active'); +} + +$("#optional").click(changeAdvancedVisibility); +$('#historyTab').click(showHistory); +$('#btn-history-filter').click(historyFilterSwitch); + + + +const tabitem = $('.tabitem'); +function showHistory(){ + $('#headersTab').click(showHeaders); + tabitem.removeClass('active'); + $('.tabcontent').removeClass('active'); + $('#history').addClass('active'); + $('#historyTab').addClass('active'); + $('#historyTab').off('click'); + initializeHistory(); +} + +function initializeHistory(){ + historyFilter.removeClass('active'); + getLast24hHistoryData(); +} + + + +function showHeaders(){ + $('#historyTab').click(showHistory); + tabitem.removeClass('active'); + $('.tabcontent').removeClass('active'); + $('#headers').addClass('active'); + $('#headersTab').addClass('active'); + $('#headersTab').off('click'); +} + +function focusInTip(element){ + showTip(element); + focusedField = true; +} + +function focusOutTip(element){ + focusedField = false; + hidTip(element); +} + +function hidTip(element){ + if(focusedField) return; + $('#'+element).removeClass('active'); +} + +function showTip(element){ + if(focusedField) return; + $('.tip').removeClass('active'); + $('#'+element).addClass('active'); +} + +$('#messageLink').mouseover(function(){showTip('messageLinkTip')}); +$('#messageLink').mouseleave(function(){hidTip('messageLinkTip')}); + +$('#httpStatus').mouseover(function(){showTip('httpStatusTip')}); +$('#httpStatus').focusin(function(){focusInTip('httpStatusTip')}); +$('#httpStatus').mouseleave(function(){hidTip('httpStatusTip')}); +$('#httpStatus').focusout(function(){focusOutTip('httpStatusTip')}); + +$('#typeSelector').mouseover(function(){showTip('typeSelectorTip')}); +$('#typeSelector').focusin(function(){focusInTip('typeSelectorTip')}); +$('#typeSelector').mouseleave(function(){hidTip('typeSelectorTip')}); +$('#typeSelector').focusout(function(){focusOutTip('typeSelectorTip')}); + +$('#bodyEditor').mouseover(function(){showTip('bodyEditorTip')}); +$('#bodyEditor').focusin(function(){focusInTip('bodyEditorTip')}); +$('#bodyEditor').mouseleave(function(){hidTip('bodyEditorTip')}); +$('#bodyEditor').focusout(function(){focusOutTip('bodyEditorTip')}); + +$('#headersTab').mouseover(function(){showTip('headersTabTip')}); +$('#headersTab').mouseleave(function(){hidTip('headersTabTip')}); + +$('#historyTab').mouseover(function(){showTip('historyTabTip')}); +$('#historyTab').mouseleave(function(){hidTip('historyTabTip')}); + +$('#headerKeyInput').mouseover(function(){showTip('newHeaderTip')}); +$('#headerKeyInput').focusin(function(){focusInTip('newHeaderTip')}); +$('#headerKeyInput').mouseleave(function(){hidTip('newHeaderTip')}); +$('#headerKeyInput').focusout(function(){focusOutTip('newHeaderTip')}); + +$('#headerValueInput').mouseover(function(){showTip('newHeaderTip')}); +$('#headerValueInput').focusin(function(){focusInTip('newHeaderTip')}); +$('#headerValueInput').mouseleave(function(){hidTip('newHeaderTip')}); +$('#headerValueInput').focusout(function(){focusOutTip('newHeaderTip')}); + +$('#btnSave').mouseover(function(){showTip('btnSaveTip');}); +$('#btnSave').focusin(function(){focusInTip('btnSaveTip')}); +$('#btnSave').mouseleave(function(){hidTip('btnSaveTip')}); +$('#btnSave').focusout(function(){focusOutTip('btnSaveTip')}); + +$('#new-tile').mouseover(function(){showTip('btn-newTileTip');}); +$('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')}); +$('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')}); + +$('#listItems').mouseover(function(){showTip('messagesTip');}); +$('#listItems').mouseleave(function(){hidTip('messagesTip')}); + + +$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') }); +$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') }); + +$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') }); +$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') }); + +$('#editableBlock').mouseover( function(){ showTip('UUIDEditionTip') } ); +$('#editableBlock').mouseleave(function(){ hidTip('UUIDEditionTip') }); \ No newline at end of file diff --git a/Frontend/tools/mock-service/js/datatransfer.js b/Frontend/tools/mock-service/js/datatransfer.js new file mode 100644 index 0000000..ba21743 --- /dev/null +++ b/Frontend/tools/mock-service/js/datatransfer.js @@ -0,0 +1,541 @@ +var clientUUID = ''; +var advancedDisplayed = false; +var json = {}; +var jsonIndex = 0; +var lastId = 1; +var htable_row = 0; +var host = getDomain(); +var dataModified = false; +const addMessageName = 'addMessage'; +const loadMessageName = 'changeMessage'; +const removeMessageName = 'removeMessage'; + +const C_UUID = 'mock-uuid'; +const C_ID = 'last-displayed-id'; +const C_ADV = 'advanced-mode'; + +const color_red = "#ff8f8f"; +const color_grey = "#6b6b6b"; + +const setModified = function(){ + setDataModified(); +} +const setOrigin = function(){ + setDataOrigin(); +} + +const getUpdate = function(){ + updateData(); +} +const dataRefresh = function(){ + getData(); +} +$('#btn-newtile').click(function(){callAddMessage()}); +// $('#btn-addRow').click(function(){addRow()}); +// $('#btn-save').click(getUpdate); + +function getData(){ + $.getJSON(host + '/api/mock/'+clientUUID, function(data) { + json = data; + checkUuid(); + + + refreshData(); + }); +} + + +function checkUuid(){ + if(clientUUID == null || clientUUID == undefined || clientUUID == ''){ + clientUUID = json[0].clientUUID; + setCookie(); + } +} + +function getDomain(){ + var url = window.location.href; + var arr = url.split("/"); + var result = arr[0] + "//" + arr[2]; + return result; +} + +function httpStatusInvalid(){ + value = $('#httpStatus').val(); + return value == ''; +} + +function setDataModified(){ + if(httpStatusInvalid()){ + $('#btn-save').removeClass('active'); + $('#btn-save').off(); + document.getElementById("httpStatus").style.backgroundColor = color_red; + return; + } + dataModified = true; + $('#btn-save').addClass('active'); + $('#btn-save').click(getUpdate); + document.getElementById("httpStatus").style.backgroundColor = null; +} + +//Adding change listener to fields +$('.data-field').change(setModified); + +function setDataOrigin(){ + dataModified = false; + $('#btn-save').removeClass('active'); + $('#btn-save').off(); +} + +const idToDisplay = function(){ + let defaultId = json[0].mockedResponseId; + if(lastId == undefined || lastId == null) return defaultId; + for(let i=0; i 0){ + jsonIndex -= 1; + return json[jsonIndex].mockedResponseId; + } + return defaultId; +} + +function refreshData(){ + $("#uuid-input").val(clientUUID); + fillMessageList(); + + let id = idToDisplay(); + + loadMessage(id); + +} + +function setCookie(){ + document.cookie = C_UUID + '=' +clientUUID; + document.cookie = C_ID + '=' + lastId; + document.cookie = C_ADV + '=' + advancedVisibility; +} + +function loadCookies(){ + clientUUID = getCookie(C_UUID); + lastId = getCookie(C_ID); + advancedDisplayed = getCookie(C_ADV) == 'true'; +} + +function getCookie(cname) { + var name = cname + '='; + var decodedCookie = decodeURIComponent(document.cookie); + var ca = decodedCookie.split(';'); + for(var i = 0; i '+link+''; + $('#messageLink').html(linkHtml); + $('#httpStatus').val(httpStatus); + $('#uuid-input').val(uuid); + $('#typeSelector').val(mediaType); + $('#bodyEditor').val(body); + $('#mockedMessageId').html(id); + +} + +function changeEditionOfUUID(element){ + + var inputFieldId= "#uuid-input" + var inputFieldDiv = "#uuid-edit-field" + if(element.checked){ + $(inputFieldId).removeAttr('disabled'); + $(inputFieldDiv).removeClass('disabled'); + } else{ + $(inputFieldId).attr('disabled', true); + $(inputFieldDiv).addClass('disabled'); + } +} + +function copyUUIDToClipboard(){ + navigator.clipboard.writeText( document.getElementById('uuid-input').value ); +} + + +async function fetchUUIDCheck(givenUUID , strategy){ + var newUUID = "UUID" ; + url = host + "/api/mock/check/"; + + switch(strategy){ + case "new":{ + await fetch(url + givenUUID+ "/", { method : "GET" }) + .then ( response => response.text() ) + .then ( data => { + newUUID = data; + + } ) + break; + } + case "restore":{ + await fetch(url + givenUUID + "/" + clientUUID + "/" , { method: "GET" }) + .then (response => response.text() ) + .then (data => { + newUUID = data; + + } ) + break; + } + } + return newUUID ; +} + +function checkUUIDChars(uuid) { + uuid.replace(/ /g,'') + const regex = new RegExp("^[A-z0-9-]+$"); + + if(regex.test(uuid) && uuid != ""){ + return uuid ; + } + return "invalid"; + } + +function changeUUID(element){ + + const uuidStrategy = $('input[name="uuid-validation-type"]:checked').val(); + const givenUUID = checkUUIDChars(element.value); + + if( givenUUID == clientUUID ){ + $("#uuid-input").attr("disabled", true); + uuidChangeModalDisplay("noChg"); + return; + } + + var newUUID = fetchUUIDCheck(givenUUID , uuidStrategy); + var changeMessage = uuidStrategy; + newUUID + .then( data => { + if (givenUUID == data) { + changeMessage = "success"; + } + clientUUID = data; + $("#editable").attr("checked", false); + + uuidChangeModalDisplay(changeMessage); + document.cookie = C_UUID + '=' + data ; + } ) + loadCookies(); + refreshData(); +} + + +function createLink(uuid, id){ + var link = host + '/api/mock/r/'+uuid+'/'+id; + return link; +} + +function fillHeaderTable(headers){ + var innerHTML = buildHeaderMapHtml(headers); + refreshHeaderTable(innerHTML); +} + +function refreshHeaderTable(html){ + $('#headerMapTable').html(html); + $('.table-map').change(function(){setDataModified()}); + $('.btn-hashmap').click(function(){ + $(this).closest('tr').remove(); + setDataModified(); + }) +} + +function buildHeaderMapHtml(headers){ + var innerHTML = ''; + for(var key in headers){ + innerHTML += buildRowHtml(key, headers[key]); + } + return innerHTML; +} + +function addRow(key, value){ + var headerMap = $('#headerMapTable'); + var headersMapHtml = headerMap.html(); + headersMapHtml += buildRowHtml(key, value); + refreshHeaderTable(headersMapHtml); +} + +const newRowInput = function(){ + const hName = $('#headerKeyInput'); + const hValue = $('#headerValueInput'); + if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){ + addRow(hName.val(), hValue.val()); + hName.val(null); + hValue.val(null); + setDataModified(); + } +} + +$('#btn-newRow').click(newRowInput); + +function checkIfInputValid(input){ + return !(input == '' || input == null || input == undefined); +} + +function checkIfHeaderEssential(key){ + + if( key == "Connection" || key == "Keep-Alive" || key == "Date" ){ + return true; + } + return false; + +} + +function buildRowHtml(key, value){ + + if(checkIfHeaderEssential(key)){ + return '' + + '' + + '' + + '' + + ''; + } + return '' + + '' + + '' + + '' + + '' + + ''; +} + + +function fillMessageList(){ + $("#listItems").html(''); + var innerHTML = ''; + for(let i=0; i' + + '
' + + '
' + + '
' + + '

Id: ' + id + '

' + + '

Status: ' + httpStatus + '

' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + ''; + return innerHTML; +} + + + +const onbuild = function(){ + loadCookies(); + getData(); + if(advancedDisplayed) { + changeAdvancedVisibility(); + } +} + +$(document).ready(onbuild); + +function sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + + + +function generateJson(){ + var newJson = + { + clientUUID: json[jsonIndex].clientUUID, + mockedResponseId: json[jsonIndex].mockedResponseId, + mediaType: $('#typeSelector').val(), + messageBody: $('#bodyEditor').val(), + httpStatus: $('#httpStatus').val(), + httpHeaders: {}, + }; + newJson['httpHeaders'] = convertTableToJson(); + + json[jsonIndex] = newJson; + return newJson; +} + + +function convertTableToJson(){ + const rows = $('#headerMapTable').children(); + + var obj = {}; + var key; + for(let i=0; i' + + '' + historyJson[i].dateTimeStamp + '' + + '' + historyJson[i].interfaceName + '' + + ''; + } + return innerHTML; +} + +function displayHistory(){ + $('#historyTable tbody').html(historyToHtml()); +} diff --git a/Frontend/tools/mock-service/js/modal.js b/Frontend/tools/mock-service/js/modal.js new file mode 100644 index 0000000..3061752 --- /dev/null +++ b/Frontend/tools/mock-service/js/modal.js @@ -0,0 +1,89 @@ +var modalDisplayed = false; +var methodToCall = { + name: null, + id: null +}; + +const overlay = $('#overlay'); +const savedModal = $('#modal-confirm'); +const dataLossModal = $('#modal-query'); +const uuidChangeModal = $('#modal-uuidChanged') +const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0); +const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1); +const allModals = $('.modal'); +const btnModalClose = $('.modal button'); +const closeModals = function() { + hideModal(allModals); +} +const savedModalDisplay = function() { + + showModal(savedModal); + setTimeout(closeModals, 2000); +} +const dataLossModalDisplay = function(){ + showModal(dataLossModal); +} + +const uuidChangeModalDisplay = function(addidionalMessage){ + + switch(addidionalMessage){ + case "success":{ + + $(".uuid-modal-body").removeClass("active"); + $("#changeUUIDSuccess").addClass("active"); + break; + } + case "new":{ + + $(".uuid-modal-body").removeClass("active"); + $("#newUUID").addClass("active"); + break; + } + case "restore":{ + + $(".uuid-modal-body").removeClass("active"); + $("#restoredUUID").addClass("active"); + break; + } + case "noChg":{ + + $(".uuid-modal-body").removeClass("active"); + $("#noChgUUID").addClass("active"); + break; + } + } + showModal(uuidChangeModal); +} + +function setMethodToCall(name, id){ + methodToCall.name = name; + methodToCall.id = id; +} + +const dropChangesAndClose = function(){ + callMethodByName(methodToCall) + hideModal(dataLossModal); +} + +function showModal(jmodal){ + if(modalDisplayed) return; + overlay.addClass('active'); + jmodal.addClass('active'); + modalDisplayed = true; +} + +function hideModal(jmodal){ + if(!modalDisplayed) return; + if ($(uuidChangeModal).hasClass('active')) window.location.reload(); + overlay.removeClass('active'); + jmodal.removeClass('active'); + modalDisplayed = false; +} + +btnModalClose.click(closeModals); + +overlay.click(closeModals); + +dataLossModalNo.click(closeModals); +dataLossModalYes.click(dropChangesAndClose); + diff --git a/Frontend/tools/mock-service/js/uianimation.js b/Frontend/tools/mock-service/js/uianimation.js new file mode 100644 index 0000000..46dfb20 --- /dev/null +++ b/Frontend/tools/mock-service/js/uianimation.js @@ -0,0 +1,141 @@ +var advancedVisibility = false; +var selectMenu = $("#selectMenuContent"); +var advancedTab = $("#advanced"); +var basicID = $("#basicItemData") +var advancedID = $("#advancedItemData"); +var advancedUUIDOptions = $("#uuid-validation-strategy"); +var focusedField = false; +function changeAdvancedVisibility(){ + if(advancedVisibility){ + selectMenu.removeClass('active'); + advancedTab.removeClass('active'); + advancedID.removeClass('active'); + advancedUUIDOptions.removeClass('active'); + basicID.addClass('active'); + advancedVisibility = false; + } + else { + selectMenu.addClass('active'); + advancedTab.addClass('active'); + advancedID.addClass('active'); + advancedUUIDOptions.addClass('active'); + basicID.removeClass('active'); + advancedVisibility = true; + } + setCookie(); +} + +const historyFilter = $('#history-filter'); +const historyFilterSwitch = function(){ + historyFilter.toggleClass('active'); +} + +$("#optional").click(changeAdvancedVisibility); +$('#historyTab').click(showHistory); +$('#btn-history-filter').click(historyFilterSwitch); + + + +const tabitem = $('.tabitem'); +function showHistory(){ + $('#headersTab').click(showHeaders); + tabitem.removeClass('active'); + $('.tabcontent').removeClass('active'); + $('#history').addClass('active'); + $('#historyTab').addClass('active'); + $('#historyTab').off('click'); + initializeHistory(); +} + +function initializeHistory(){ + historyFilter.removeClass('active'); + getLast24hHistoryData(); +} + + + +function showHeaders(){ + $('#historyTab').click(showHistory); + tabitem.removeClass('active'); + $('.tabcontent').removeClass('active'); + $('#headers').addClass('active'); + $('#headersTab').addClass('active'); + $('#headersTab').off('click'); +} + +function focusInTip(element){ + showTip(element); + focusedField = true; +} + +function focusOutTip(element){ + focusedField = false; + hidTip(element); +} + +function hidTip(element){ + if(focusedField) return; + $('#'+element).removeClass('active'); +} + +function showTip(element){ + if(focusedField) return; + $('.tip').removeClass('active'); + $('#'+element).addClass('active'); +} + +$('#messageLink').mouseover(function(){showTip('messageLinkTip')}); +$('#messageLink').mouseleave(function(){hidTip('messageLinkTip')}); + +$('#httpStatus').mouseover(function(){showTip('httpStatusTip')}); +$('#httpStatus').focusin(function(){focusInTip('httpStatusTip')}); +$('#httpStatus').mouseleave(function(){hidTip('httpStatusTip')}); +$('#httpStatus').focusout(function(){focusOutTip('httpStatusTip')}); + +$('#typeSelector').mouseover(function(){showTip('typeSelectorTip')}); +$('#typeSelector').focusin(function(){focusInTip('typeSelectorTip')}); +$('#typeSelector').mouseleave(function(){hidTip('typeSelectorTip')}); +$('#typeSelector').focusout(function(){focusOutTip('typeSelectorTip')}); + +$('#bodyEditor').mouseover(function(){showTip('bodyEditorTip')}); +$('#bodyEditor').focusin(function(){focusInTip('bodyEditorTip')}); +$('#bodyEditor').mouseleave(function(){hidTip('bodyEditorTip')}); +$('#bodyEditor').focusout(function(){focusOutTip('bodyEditorTip')}); + +$('#headersTab').mouseover(function(){showTip('headersTabTip')}); +$('#headersTab').mouseleave(function(){hidTip('headersTabTip')}); + +$('#historyTab').mouseover(function(){showTip('historyTabTip')}); +$('#historyTab').mouseleave(function(){hidTip('historyTabTip')}); + +$('#headerKeyInput').mouseover(function(){showTip('newHeaderTip')}); +$('#headerKeyInput').focusin(function(){focusInTip('newHeaderTip')}); +$('#headerKeyInput').mouseleave(function(){hidTip('newHeaderTip')}); +$('#headerKeyInput').focusout(function(){focusOutTip('newHeaderTip')}); + +$('#headerValueInput').mouseover(function(){showTip('newHeaderTip')}); +$('#headerValueInput').focusin(function(){focusInTip('newHeaderTip')}); +$('#headerValueInput').mouseleave(function(){hidTip('newHeaderTip')}); +$('#headerValueInput').focusout(function(){focusOutTip('newHeaderTip')}); + +$('#btnSave').mouseover(function(){showTip('btnSaveTip');}); +$('#btnSave').focusin(function(){focusInTip('btnSaveTip')}); +$('#btnSave').mouseleave(function(){hidTip('btnSaveTip')}); +$('#btnSave').focusout(function(){focusOutTip('btnSaveTip')}); + +$('#new-tile').mouseover(function(){showTip('btn-newTileTip');}); +$('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')}); +$('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')}); + +$('#listItems').mouseover(function(){showTip('messagesTip');}); +$('#listItems').mouseleave(function(){hidTip('messagesTip')}); + + +$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') }); +$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') }); + +$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') }); +$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') }); + +$('#editableBlock').mouseover( function(){ showTip('UUIDEditionTip') } ); +$('#editableBlock').mouseleave(function(){ hidTip('UUIDEditionTip') }); \ No newline at end of file diff --git a/Frontend/tools/mock.html b/Frontend/tools/mock.html new file mode 100644 index 0000000..d3ff264 --- /dev/null +++ b/Frontend/tools/mock.html @@ -0,0 +1,326 @@ + + + + R11 MockedServices + + + + + + + + + +
+
+
+
+

MockedServices

+
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + +
+ +
+
+ +

Your Message

+

Messaged id: 1

+ + +
+ + + +
+
+ +
+ +
+ + + + + +
+ +
+ + + + +
+
+
+ +
+
+ +
+ + +
+ + + +
+ +
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + +
NameValue
+
+ +
+
+ +
+
+
+ + + +
+
+ + + +
+
+ +
+ +
+ + + + + + + + + + +
TimestampType
+
+
+
+
+
+
+
+
+ +
+

Message List

+
+ +
+ +
+
+ +
+
+
+
+
+

What's this?

+

MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.

+

Help

+

When cursor hovers over an item. It's description is displayed below.

+
+
+

Link

+

Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.

+
+
+
+
+

Save button!

+

To save message, the message must be changed!

+
+
+
+
+

Add new message

+

This button adds new message.

+
+
+
+
+

UUID

+

UUID is an Unique ID that represents you in API. By UUID your messages is saved in database. You can change it to access your previous configuration of mocked messages

+
+
+
+
+

UUID Checking Strategy

+

When you provide invalid UUID you can choose what do with it. You can generate new UUID or restore previous.

+
+
+
+
+

UUID Edition

+

Unlocks you ability to edit UUID

+
+
+ +
+
+

Message

+

This is saved messages, with unique id.

+
+
+
+
+

Http Status

+

Value of the field is corresponding to status value that server will return.

+
+
+
+
+

Content Type

+

Value of the field describes content of body payload contained in the response. For example if content is in xml format the value should be "application/xml" or "text/xml"

+
+
+
+
+

Body

+

Value of the field describes content of response body. It's basicly the message we want server to return. If it's simple response like 200 OK or 404 not found then field might be left empty.

+
+
+
+
+

Headers

+

Content of this tab allows to set and modify headers that will be included in the response.

+
+
+
+
+

History

+

Content of this tab displays the history of requests or responses received/sent to the endpoint

+
+
+
+
+

New header

+

Insert value in the field and press the plus icon to add a new header to the message.

+
+
+
+
+
+
+ + + + + + + + + +