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:
32
Frontend/assets/css/tools/mock/common.css
Normal file
32
Frontend/assets/css/tools/mock/common.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
BIN
Frontend/assets/css/tools/mock/font/Material-Icons.woff2
Normal file
BIN
Frontend/assets/css/tools/mock/font/Material-Icons.woff2
Normal file
Binary file not shown.
BIN
Frontend/assets/css/tools/mock/font/Nunito-VariableFont_wght.ttf
Normal file
BIN
Frontend/assets/css/tools/mock/font/Nunito-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
Frontend/assets/css/tools/mock/font/fontello.eot
Normal file
BIN
Frontend/assets/css/tools/mock/font/fontello.eot
Normal file
Binary file not shown.
14
Frontend/assets/css/tools/mock/font/fontello.svg
Normal file
14
Frontend/assets/css/tools/mock/font/fontello.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<?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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Frontend/assets/css/tools/mock/font/fontello.ttf
Normal file
BIN
Frontend/assets/css/tools/mock/font/fontello.ttf
Normal file
Binary file not shown.
BIN
Frontend/assets/css/tools/mock/font/fontello.woff
Normal file
BIN
Frontend/assets/css/tools/mock/font/fontello.woff
Normal file
Binary file not shown.
BIN
Frontend/assets/css/tools/mock/font/fontello.woff2
Normal file
BIN
Frontend/assets/css/tools/mock/font/fontello.woff2
Normal file
Binary file not shown.
59
Frontend/assets/css/tools/mock/fontello.css
vendored
Normal file
59
Frontend/assets/css/tools/mock/fontello.css
vendored
Normal file
@@ -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'; } /* '' */
|
||||
4
Frontend/assets/css/tools/mock/main.css
Normal file
4
Frontend/assets/css/tools/mock/main.css
Normal file
@@ -0,0 +1,4 @@
|
||||
.overflowedTableContent {
|
||||
max-height: 750px;
|
||||
overflow: scroll;
|
||||
}
|
||||
72
Frontend/assets/css/tools/mock/r11addons.css
Normal file
72
Frontend/assets/css/tools/mock/r11addons.css
Normal file
@@ -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;
|
||||
}
|
||||
57
Frontend/assets/css/tools/mock/r11flexbox.css
Normal file
57
Frontend/assets/css/tools/mock/r11flexbox.css
Normal file
@@ -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;
|
||||
}
|
||||
104
Frontend/assets/css/tools/mock/r11modal.css
Normal file
104
Frontend/assets/css/tools/mock/r11modal.css
Normal file
@@ -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;
|
||||
}
|
||||
71
Frontend/assets/css/tools/mock/r11tables.css
Normal file
71
Frontend/assets/css/tools/mock/r11tables.css
Normal file
@@ -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;
|
||||
}
|
||||
325
Frontend/assets/css/tools/mock/r11tool.css
Normal file
325
Frontend/assets/css/tools/mock/r11tool.css
Normal file
@@ -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%;
|
||||
} */
|
||||
76
Frontend/assets/css/tools/mock/r11tooltip.css
Normal file
76
Frontend/assets/css/tools/mock/r11tooltip.css
Normal file
@@ -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%);
|
||||
} */
|
||||
@@ -42,7 +42,7 @@ function init() {
|
||||
tools.set("xslt", "tools/xslt.html");
|
||||
tools.set("xmlform", "tools/xmlFormatter.html");
|
||||
tools.set("jsonform", "tools/jsonFormatter.html");
|
||||
tools.set("mock", getMockHost());
|
||||
tools.set("mock", "tools/mock.html");
|
||||
|
||||
changeActiveTools('XML');
|
||||
loadLastPage();
|
||||
|
||||
541
Frontend/assets/scripts/tools/mock/datatransfer.js
Normal file
541
Frontend/assets/scripts/tools/mock/datatransfer.js
Normal file
@@ -0,0 +1,541 @@
|
||||
var clientUUID = '';
|
||||
var advancedDisplayed = false;
|
||||
var json = {};
|
||||
var jsonIndex = 0;
|
||||
var lastId = 1;
|
||||
var htable_row = 0;
|
||||
var host = window.location.protocol + "//" + window.location.hostname + ":8097";
|
||||
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;
|
||||
}
|
||||
5
Frontend/assets/scripts/tools/mock/fiddle.js
Normal file
5
Frontend/assets/scripts/tools/mock/fiddle.js
Normal file
@@ -0,0 +1,5 @@
|
||||
const deleteParent = function(){
|
||||
$(this).closest('div.tile').remove();
|
||||
}
|
||||
|
||||
$('#test1').click(deleteParent);
|
||||
58
Frontend/assets/scripts/tools/mock/historyloader.js
Normal file
58
Frontend/assets/scripts/tools/mock/historyloader.js
Normal file
@@ -0,0 +1,58 @@
|
||||
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());
|
||||
}
|
||||
89
Frontend/assets/scripts/tools/mock/modal.js
Normal file
89
Frontend/assets/scripts/tools/mock/modal.js
Normal file
@@ -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);
|
||||
|
||||
141
Frontend/assets/scripts/tools/mock/uianimation.js
Normal file
141
Frontend/assets/scripts/tools/mock/uianimation.js
Normal file
@@ -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') });
|
||||
@@ -65,28 +65,6 @@ function clearDataField() {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* The `escapeHTML` function is used to escape special characters in an HTML element's innerHTML property.
|
||||
* This is done to prevent these characters from being interpreted as HTML tags or attributes,
|
||||
* which could potentially cause security vulnerabilities or unintended behavior.
|
||||
*
|
||||
* @function
|
||||
* @name escapeHTML
|
||||
* @kind function
|
||||
* @param {any} element
|
||||
* @returns {void}
|
||||
*/
|
||||
function escapeHTML(elementID) {
|
||||
document.getElementById(elementID).innerHTML = document.getElementById(elementID).innerHTML
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* It fills the XML area with a sample XML.
|
||||
*
|
||||
@@ -111,6 +89,16 @@ function fillDefaultXML(element) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* It fills the XSD area with a sample XSD and XML area with matching XML.
|
||||
*
|
||||
* @function
|
||||
* @name fillDefaultXSD
|
||||
* @kind function
|
||||
* @param {any} element
|
||||
* @returns {void}
|
||||
*/
|
||||
function fillDefaultXSD(){
|
||||
const serverAddress = window.location.protocol + "//" + window.location.hostname + ":8086";
|
||||
fetch(serverAddress + "/assets/samples/sampleXSD.xsd")
|
||||
|
||||
Reference in New Issue
Block a user