Moved frontend of REST Mock to frontend container (solves #168)
Co-authored-by: Adam Bem <adam.bem@zoho.eu> Reviewed-on: #186 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
@@ -1,27 +0,0 @@
|
||||
package com.r11.tools.controller;
|
||||
|
||||
import lombok.SneakyThrows;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.servlet.ModelAndView;
|
||||
|
||||
/**
|
||||
* Class responsible for returning homepage html
|
||||
* @author Gabriel Modzelewski
|
||||
*/
|
||||
@Controller
|
||||
@RequestMapping("/")
|
||||
public class MainController {
|
||||
/**
|
||||
* Default path to get the homepage
|
||||
* @return the view of homepage
|
||||
*/
|
||||
@SneakyThrows
|
||||
@GetMapping
|
||||
public ModelAndView showHome(){
|
||||
ModelAndView mov = new ModelAndView();
|
||||
mov.setViewName("html/mock");
|
||||
return mov;
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="fontello" horiz-adv-x="1000" >
|
||||
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="plus" unicode="" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
|
||||
|
||||
<glyph glyph-name="cancel" unicode="" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,59 +0,0 @@
|
||||
@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'; } /* '' */
|
||||
@@ -1,4 +0,0 @@
|
||||
.overflowedTableContent {
|
||||
max-height: 750px;
|
||||
overflow: scroll;
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,325 +0,0 @@
|
||||
@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%;
|
||||
} */
|
||||
@@ -1,76 +0,0 @@
|
||||
.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%);
|
||||
} */
|
||||
@@ -1,326 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>R11 MockedServices</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../css/fontello.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/main.css" type="text/css">
|
||||
<!-- <link rel="stylesheet" href="css/common.css" type="text/css"> -->
|
||||
<link rel="stylesheet" href="../css/common.css" type="text/css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- <script src="../js/dyn_host.js"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="tool extended">
|
||||
<div class="tool-context">
|
||||
<div>
|
||||
<h1>MockedServices</h1>
|
||||
</div>
|
||||
<div>
|
||||
<label for="uuid-input" class="block-display">UUID</label>
|
||||
<div id="uuid-edit">
|
||||
<div id="uuid-edit-field" class="bordered-field disabled">
|
||||
<input id="uuid-input" disabled onfocusout="changeUUID(this);" value="UUID" />
|
||||
<button onclick="copyUUIDToClipboard();" class="uuid-inputField-icon modification-button flex-item btn-copy action-button">
|
||||
<span class="material-icons uuid-inputField-icon-span ">content_copy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="editableBlock">
|
||||
<input type="checkbox" onchange="changeEditionOfUUID(this)" name="editable" id="editable" value="false"/>
|
||||
<label for="editable">Editable</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hiddable" id="uuid-validation-strategy">
|
||||
<label><b>UUID generation strategy:</b></label>
|
||||
|
||||
<input type="radio" checked name="uuid-validation-type" value="new" id="generateNew"/>
|
||||
<label for="generateNew">Generate new UUID</label>
|
||||
|
||||
<input type="radio" name="uuid-validation-type" value="restore" id="restore"/>
|
||||
<label for="restore">Restore previous UUID</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<!-- h2 -->
|
||||
<div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
|
||||
<div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
|
||||
|
||||
<!-- link -->
|
||||
<div>
|
||||
<label for="messageLink" class="block-display">Link</label>
|
||||
<div id="messageLink" class="bordered-field max-width with-padding disabled-background"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div>
|
||||
<!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> -->
|
||||
</div>
|
||||
<div class="display-space-between max-width">
|
||||
<!-- status and type -->
|
||||
<div class="medium-input block-display small-vertical-margin">
|
||||
<!-- status -->
|
||||
<div class="max-width small-vertical-margin">
|
||||
<label for="httpStatus">Http Status</label>
|
||||
<input id="httpStatus" type="number" class="bordered-field max-width data-field" value="200" list="httpStatusSuggestion"/>
|
||||
<datalist id="httpStatusSuggestion">
|
||||
<option value="200">
|
||||
<option value="300">
|
||||
<option value="400">
|
||||
<option value="403">
|
||||
<option value="404">
|
||||
<option value="500">
|
||||
</datalist>
|
||||
|
||||
</div>
|
||||
<!-- content type -->
|
||||
<div class="max-width small-vertical-margin">
|
||||
<label for="typeSelector">Content Type</label>
|
||||
<input id="typeSelector" class="bordered-field max-width data-field" type="text" value="application/xml" list="contentTypes">
|
||||
<datalist id="contentTypes">
|
||||
<option value="application/xml">
|
||||
<option value="application/json">
|
||||
<option value="text/xml">
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div id="btnSave" class="small-margins half-width with-padding action-button" style="background-color: white; border: 0px;">
|
||||
<button id="btn-save" class="small-margins half-width with-padding action-button" style="width: 100%; height: 100%;">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- body -->
|
||||
<div class="small-vertical-margin">
|
||||
<label for="bodyEditor">Body</label>
|
||||
<textarea id="bodyEditor" class="data-field bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
|
||||
</div>
|
||||
<!-- show/hide -->
|
||||
<button id="optional" class="clickable-text highlight switch"><span class="toggleIndicator"></span> show/hide advanced settings</button>
|
||||
<!-- advanced -->
|
||||
<div id="advanced" class="max-width with-padding hiddable">
|
||||
<!-- tab menu -->
|
||||
<div class="tabmenu medium-vertical-margin">
|
||||
<button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
|
||||
<button id="historyTab" class="tabitem clickable-text big-font">History</button>
|
||||
</div>
|
||||
<!-- container -->
|
||||
<div class="medium-vertical-margin">
|
||||
<!-- headers -->
|
||||
<div id="headers" class="medium-vertical-margin tabcontent active">
|
||||
<table class="table-map">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Value</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="headerMapTable">
|
||||
<tr>
|
||||
<td><input class="key" value="basic value"></td>
|
||||
<td><input value="basic value"></td>
|
||||
<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr>
|
||||
<td><input id="headerKeyInput" placeholder="name"></td>
|
||||
<td><input id="headerValueInput" placeholder="value"></td>
|
||||
<td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- history -->
|
||||
<div id="history" class="medium-vertical-margin tabcontent">
|
||||
<div class="block-display max-width">
|
||||
<button id="btn-history-filter" class="clickable-text highlight switch"><span class="toggleIndicator"></span> filter</button>
|
||||
<div id ="history-filter" class="display-space-between max-width small-vertical-margin hiddable">
|
||||
<div class="three-fourth-width display-space-evenly">
|
||||
<div class="block-display half-width with-padding">
|
||||
<label for="historyFrom" class="block-label">From</label>
|
||||
<input id="historyFrom" type="date" class="bordered-field max-width with-padding">
|
||||
<input id="historyTimeFrom" type="time" class="small-vertical-margin bordered-field max-width with-padding">
|
||||
</div>
|
||||
<div class="block-display half-width with-padding">
|
||||
<label for="historyTo" class="block-label">To</label>
|
||||
<input id="historyTo" type="date" class="bordered-field max-width with-padding">
|
||||
<input id="historyTimeTo" type="time" class="small-vertical-margin bordered-field max-width with-padding">
|
||||
</div>
|
||||
</div>
|
||||
<button id="btn-searchHistory" class="quater-width action-button active small-margins">Search</button>
|
||||
</div>
|
||||
|
||||
<div class="max-width centered-content large-vertical-margin overflowedTableContent">
|
||||
<table id="historyTable" class="table-default">
|
||||
<thead>
|
||||
<tr class="bottom-border">
|
||||
<th>Timestamp</th>
|
||||
<th>Type</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- <tr class="even">
|
||||
<td>2021-01-01T10:57:26</td>
|
||||
<td>Client request</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2021-01-01T10:57:26</td>
|
||||
<td>Client request</td>
|
||||
</tr> -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="selectMenuContent" class="tool-extention">
|
||||
<!-- header -->
|
||||
<div>
|
||||
<h2>Message List</h2>
|
||||
</div>
|
||||
<!-- tile list -->
|
||||
<div id="listItems">
|
||||
<!-- <div class="tile">
|
||||
<div class="content">
|
||||
<div class="display-space-between">
|
||||
<div class="centered-vertically">
|
||||
<p>Id: 2</p>
|
||||
<p>Status: 200</p>
|
||||
</div>
|
||||
<div>
|
||||
<button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="new-tile" class="max-width centered-content small-vertical-margin">
|
||||
<button id="btn-newtile" class="modification-button btn-addtile"><i class="icon-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip-window lite">
|
||||
<div>
|
||||
<h2>What's this?</h2>
|
||||
<p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
|
||||
<h2>Help</h2>
|
||||
<p>When cursor hovers over an item. It's description is displayed below.</p>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="messageLinkTip" class="tip">
|
||||
<h3>Link</h3>
|
||||
<p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="btnSaveTip" class="tip">
|
||||
<h3>Save button!</h3>
|
||||
<p>To save message, the message must be changed!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="btn-newTileTip" class="tip">
|
||||
<h3>Add new message</h3>
|
||||
<p>This button adds new message.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="UUIDFieldTip" class="tip">
|
||||
<h3>UUID</h3>
|
||||
<p>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</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="UUIDValidationStrategyTip" class="tip">
|
||||
<h3>UUID Checking Strategy</h3>
|
||||
<p>When you provide invalid UUID you can choose what do with it. You can generate new UUID or restore previous.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="UUIDEditionTip" class="tip">
|
||||
<h3>UUID Edition</h3>
|
||||
<p>Unlocks you ability to edit UUID</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="large-vertical-margin">
|
||||
<div id="messagesTip" class="tip">
|
||||
<h3>Message</h3>
|
||||
<p>This is saved messages, with unique id.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="httpStatusTip" class="tip">
|
||||
<h3>Http Status</h3>
|
||||
<p>Value of the field is corresponding to status value that server will return.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="typeSelectorTip" class="tip">
|
||||
<h3>Content Type</h3>
|
||||
<p>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"</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="bodyEditorTip" class="tip">
|
||||
<h3>Body</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="headersTabTip" class="tip">
|
||||
<h3>Headers</h3>
|
||||
<p>Content of this tab allows to set and modify headers that will be included in the response.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="historyTabTip" class="tip">
|
||||
<h3>History</h3>
|
||||
<p>Content of this tab displays the history of requests or responses received/sent to the endpoint</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-vertical-margin">
|
||||
<div id="newHeaderTip" class="tip">
|
||||
<h3>New header</h3>
|
||||
<p>Insert value in the field and press the plus icon to add a new header to the message.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlay"></div>
|
||||
<div id="modal-uuidChanged" class="modal">
|
||||
<div class="header">
|
||||
<div>Change UUID info<i class="r-exclamation"></i></div>
|
||||
<button onclick="window.location.reload();">×</button>
|
||||
</div>
|
||||
<div id="changeUUIDSuccess" class="body hiddable uuid-modal-body">Your message UUID has been changed successfully.</div>
|
||||
<div id="newUUID" class="body hiddable uuid-modal-body">You provided wrong UUID! <br> New UUID has been generated!</div>
|
||||
<div id="restoredUUID" class="body hiddable uuid-modal-body">You provided wrong UUID! <br> Old UUID has been restored!</div>
|
||||
<div id="noChgUUID" class="body hiddable uuid-modal-body">You doesn't provide any change to UUID!</div>
|
||||
</div>
|
||||
<div id="modal-confirm" class="modal">
|
||||
<div class="header">
|
||||
<div>Message saved<i class="r-exclamation"></i></div>
|
||||
<button>×</button>
|
||||
</div>
|
||||
<div class="body">Your message has been successfuly saved.<br>You might view it under the link.</div>
|
||||
</div>
|
||||
<div id="modal-query" class="modal">
|
||||
<div class="header">
|
||||
<div>Unsaved data<i class="r-exclamation"></i></div>
|
||||
<button>×</button>
|
||||
</div>
|
||||
<div class="body">You haven't saved your message!<br> Do you want to save it?</div>
|
||||
<div class="function">
|
||||
|
||||
<button type = "button" onclick = "updateData()" value = "Display">Save</button>
|
||||
|
||||
<button>No</button>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="../js/modal.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/historyloader.js"></script>
|
||||
<script type="text/javascript" src="../js/fiddle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,541 +0,0 @@
|
||||
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<json.length; i++){
|
||||
if(json[i].mockedResponseId == lastId){
|
||||
return lastId;
|
||||
}
|
||||
}
|
||||
if(jsonIndex <= json.length && jsonIndex > 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 <ca.length; i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function callMethodByName(methodObject){
|
||||
let name = methodObject.name;
|
||||
let id = methodObject.id;
|
||||
switch(name){
|
||||
case addMessageName:
|
||||
addMessage();
|
||||
break;
|
||||
case loadMessageName:
|
||||
loadMessage(id);
|
||||
break;
|
||||
case removeMessageName:
|
||||
removeMessage(id);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateData(){
|
||||
var updatedJson = generateJson();
|
||||
const dataSaved = function () {
|
||||
setDataOrigin();
|
||||
refreshData();
|
||||
savedModalDisplay();
|
||||
}
|
||||
$.ajax({
|
||||
url: host + '/api/mock',
|
||||
type: 'PUT',
|
||||
data: JSON.stringify(updatedJson, null, 2),
|
||||
contentType: "application/json",
|
||||
}).done(dataSaved);
|
||||
}
|
||||
|
||||
function callAddMessage(){
|
||||
if(dataModified){
|
||||
setMethodToCall(addMessageName, null);
|
||||
dataLossModalDisplay();
|
||||
}
|
||||
else {
|
||||
addMessage();
|
||||
}
|
||||
}
|
||||
|
||||
function addMessage(){
|
||||
$.ajax({
|
||||
url: host + '/api/mock/'+clientUUID,
|
||||
type: 'POST',
|
||||
}).done(dataRefresh);
|
||||
}
|
||||
|
||||
function callRemoveMessage(id){
|
||||
if(dataModified){
|
||||
setMethodToCall(removeMessageName, id);
|
||||
dataLossModalDisplay();
|
||||
}
|
||||
else {
|
||||
removeMessage(id);
|
||||
}
|
||||
}
|
||||
|
||||
function removeMessage(id){
|
||||
var jsonObject = findJsonById(id);
|
||||
$.ajax({
|
||||
url: host + '/api/mock/'+clientUUID + '/' + id,
|
||||
type: 'DELETE',
|
||||
}).done(dataRefresh);
|
||||
}
|
||||
|
||||
|
||||
function clearMock(){
|
||||
fillStaticFields('','','','');
|
||||
htable_row = 0;
|
||||
$('#httpStatusValues').html('');
|
||||
}
|
||||
|
||||
function initializeMock(index){
|
||||
clearMock();
|
||||
fillStaticFields(json[index].clientUUID
|
||||
, json[index].mockedResponseId
|
||||
, json[index].mediaType
|
||||
, json[index].messageBody
|
||||
, json[index].httpStatus);
|
||||
fillHeaderTable(json[index].httpHeaders);
|
||||
}
|
||||
|
||||
function fillStaticFields(uuid, id, mediaType, body, httpStatus){
|
||||
let link = createLink(uuid,id);
|
||||
let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
|
||||
$('#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 '' +
|
||||
'<tr>' +
|
||||
'<td><input class="key data-field" value="' + key + '" readonly></td>' +
|
||||
'<td><input class="data-field" value="' + value + '"></td>' +
|
||||
'</tr>';
|
||||
}
|
||||
return '' +
|
||||
'<tr>' +
|
||||
'<td><input class="key data-field" value="' + key + '"></td>' +
|
||||
'<td><input class="data-field" value="' + value + '"></td>' +
|
||||
'<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' +
|
||||
'</tr>';
|
||||
}
|
||||
|
||||
|
||||
function fillMessageList(){
|
||||
$("#listItems").html('');
|
||||
var innerHTML = '';
|
||||
for(let i=0; i<json.length; i++){
|
||||
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
|
||||
}
|
||||
$("#listItems").append(innerHTML);
|
||||
$('.tile').click(function(e) {
|
||||
var element = $(this);
|
||||
var button = element.find('.btn-tile').children().get(0);
|
||||
|
||||
if(!(button == e.target)){
|
||||
|
||||
callLoadMessage(parseInt($(this).attr('tileid')));
|
||||
}
|
||||
});
|
||||
$('.btn-tile').click(function(){
|
||||
//
|
||||
callRemoveMessage($(this).closest('.tile').attr('tileId'));
|
||||
})
|
||||
}
|
||||
|
||||
function findJsonById(id){
|
||||
return json[findJsonIndexById(id)];
|
||||
}
|
||||
|
||||
function findJsonIndexById(id){
|
||||
for(let i=0; i<json.length; i++)
|
||||
if(id == json[i].mockedResponseId) return i;
|
||||
}
|
||||
|
||||
function callLoadMessage(id){
|
||||
if(dataModified) {
|
||||
setMethodToCall(loadMessageName, id);
|
||||
dataLossModalDisplay();
|
||||
}
|
||||
else {
|
||||
loadMessage(id);
|
||||
}
|
||||
}
|
||||
|
||||
function loadMessage(id){
|
||||
if(id == null || id == undefined){
|
||||
|
||||
return;
|
||||
}
|
||||
lastId = id;
|
||||
setCookie();
|
||||
setDataOrigin();
|
||||
for(let i=0; i<json.length; i++){
|
||||
|
||||
if(id == json[i].mockedResponseId){
|
||||
jsonIndex = i;
|
||||
|
||||
initializeMock(jsonIndex);
|
||||
|
||||
selectMessage(id);
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function selectMessage(id){
|
||||
const tiles = $('.tile');
|
||||
|
||||
tiles.removeClass("active");
|
||||
|
||||
$('.tile[tileid="'+id+'"]').addClass("active");
|
||||
|
||||
initializeHistory();
|
||||
refreshHeaderTable(innerHTML);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function generateMessageTileHtml(id, httpStatus, mediaType){
|
||||
var innerHTML = '' +
|
||||
'<div tileid="' + id + '" class="tile">' +
|
||||
'<div class="content">' +
|
||||
'<div class="display-space-between">' +
|
||||
'<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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
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<rows.length; i++){
|
||||
key = rows.eq(i).children().eq(0).children().eq(0).val();
|
||||
obj[key] = rows.eq(i).children().eq(1).children().eq(0).val();
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
const deleteParent = function(){
|
||||
$(this).closest('div.tile').remove();
|
||||
}
|
||||
|
||||
$('#test1').click(deleteParent);
|
||||
@@ -1,58 +0,0 @@
|
||||
var historyJson = {};
|
||||
const maxIterations = 200;
|
||||
|
||||
function filterHistory(){
|
||||
var dateFrom = new Date($('#historyFrom').val() + 'T' + $('#historyTimeFrom').val());
|
||||
|
||||
var dateTo = new Date($('#historyTo').val() + 'T' + $('#historyTimeTo').val());
|
||||
|
||||
loadHistory(dateFrom, dateTo);
|
||||
}
|
||||
|
||||
const startSearch = function(){
|
||||
filterHistory();
|
||||
}
|
||||
$('#btn-searchHistory').click(startSearch);
|
||||
|
||||
function loadHistory(dateFrom, dateTo){
|
||||
|
||||
var eventRequest = {
|
||||
clientUUID : json[jsonIndex].clientUUID,
|
||||
localDateTimeFrom : dateFrom,
|
||||
localDateTimeTo : dateTo,
|
||||
mockedResponseId : json[jsonIndex].mockedResponseId
|
||||
};
|
||||
$.ajax({
|
||||
url: host + '/api/event',
|
||||
type: 'POST',
|
||||
data: JSON.stringify(eventRequest, null, 2),
|
||||
contentType: "application/json"
|
||||
}).done(function(data){
|
||||
historyJson = data;
|
||||
displayHistory();
|
||||
});
|
||||
}
|
||||
|
||||
function getLast24hHistoryData(){
|
||||
$.getJSON(host + '/api/event/' + clientUUID + '/' + lastId, function(data){
|
||||
historyJson = data;
|
||||
displayHistory();
|
||||
});
|
||||
}
|
||||
|
||||
function historyToHtml(){
|
||||
var innerHTML = '';
|
||||
var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
|
||||
for(let i=0; i<iterations; i++){
|
||||
let style = i%2==0 ? ' class="even"' : '';
|
||||
innerHTML += '<tr' + style + '>' +
|
||||
'<td>' + historyJson[i].dateTimeStamp + '</td>' +
|
||||
'<td>' + historyJson[i].interfaceName + '</td>' +
|
||||
'</tr>';
|
||||
}
|
||||
return innerHTML;
|
||||
}
|
||||
|
||||
function displayHistory(){
|
||||
$('#historyTable tbody').html(historyToHtml());
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
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);
|
||||
|
||||
@@ -1,141 +0,0 @@
|
||||
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') });
|
||||
Reference in New Issue
Block a user