Merge branch 'modzeleg' into developer
This commit is contained in:
BIN
src/main/resources/static/css/commons/font/fontello.eot
Normal file
BIN
src/main/resources/static/css/commons/font/fontello.eot
Normal file
Binary file not shown.
14
src/main/resources/static/css/commons/font/fontello.svg
Normal file
14
src/main/resources/static/css/commons/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
src/main/resources/static/css/commons/font/fontello.ttf
Normal file
BIN
src/main/resources/static/css/commons/font/fontello.ttf
Normal file
Binary file not shown.
BIN
src/main/resources/static/css/commons/font/fontello.woff
Normal file
BIN
src/main/resources/static/css/commons/font/fontello.woff
Normal file
Binary file not shown.
BIN
src/main/resources/static/css/commons/font/fontello.woff2
Normal file
BIN
src/main/resources/static/css/commons/font/fontello.woff2
Normal file
Binary file not shown.
59
src/main/resources/static/css/commons/fontello.css
vendored
Normal file
59
src/main/resources/static/css/commons/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'; } /* '' */
|
||||||
454
src/main/resources/static/css/commons/r11form.css
Normal file
454
src/main/resources/static/css/commons/r11form.css
Normal file
@@ -0,0 +1,454 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
|
||||||
|
@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
|
||||||
|
@import url('fontello.css');
|
||||||
|
|
||||||
|
|
||||||
|
.hyperlink, .hyperlink:visited, .hyperlink:active {
|
||||||
|
color: rgb(47, 125, 146);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hyperlink:hover {
|
||||||
|
filter: brightness(120%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-window {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
filter: drop-shadow(-2px 0px 2px darkgray);
|
||||||
|
background: #e8f3f7;
|
||||||
|
padding: 15px 30px;
|
||||||
|
font-family: 'Nunito', sans-serif;
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-window.lite {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-window .tip {
|
||||||
|
}
|
||||||
|
|
||||||
|
.bordered-field {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-background {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button {
|
||||||
|
padding: 0;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-add {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #00000030;
|
||||||
|
margin: auto 0 auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-add:hover {
|
||||||
|
color:#58ac43;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-tile:hover {
|
||||||
|
color: #ca1111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-hashmap {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #00000030;
|
||||||
|
margin: auto 0 auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-hashmap: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-addtile:hover {
|
||||||
|
color: #58ac43;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 40%;
|
||||||
|
border: 1px solid gray;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: relative;
|
||||||
|
background: #f0f0f095;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:hover {
|
||||||
|
filter: brightness(110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile.active {
|
||||||
|
background: #00000070;
|
||||||
|
color: white;
|
||||||
|
filter: none;
|
||||||
|
pointer-events: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.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: #3bc4f1;
|
||||||
|
border: 1px solid #7ed0eb;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button.active:hover {
|
||||||
|
filter: brightness(110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
background: rgba(155, 165, 160, 0.507);
|
||||||
|
border:1px solid rgba(186, 197, 191, 0.507);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontent {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontent.active {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible .section-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
background: #00000012;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible .section-button:hover {
|
||||||
|
filter: brightness(110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible.active .section-button {
|
||||||
|
background: #00000030;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible.active .section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible .section {
|
||||||
|
display: none;
|
||||||
|
background: #ffffff50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section .content {
|
||||||
|
padding: 15px 15px 30px 15px ;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddable {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddable.active {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
7
src/main/resources/static/css/form.css
Normal file
7
src/main/resources/static/css/form.css
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
.r11-form {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r11-form input, textarea {
|
||||||
|
border:
|
||||||
|
}
|
||||||
@@ -3,33 +3,38 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>R11 MockedServices</title>
|
<title>R11 MockedServices</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" href="/css/main.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="/css/tooltip.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="http://gordon.zipper.release11.com:8085/common.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/>
|
|
||||||
<link rel="stylesheet" href="/css/modal.css" type="text/css">
|
<link rel="stylesheet" href="/css/modal.css" type="text/css">
|
||||||
<link rel="stylesheet" href="/css/table.css" type="text/css">
|
<link rel="stylesheet" href="/css/commons/r11form.css" type="text/css">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container">
|
||||||
<div id="container">
|
<div class="tool extended">
|
||||||
<div id="toolName">Mocked Service <span id="version">v0.0.1</span></div>
|
<div class="tool-context">
|
||||||
<div id="itemData">
|
<div>
|
||||||
<div id="basicItemData" class="articleHead">Your message</div>
|
<h1>MockedServices <span class="version-span">v1.0.0</span></h1>
|
||||||
<div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
|
|
||||||
<div id="link">
|
|
||||||
<label for="messageLink">Link</label>
|
|
||||||
<div id="messageLink" class="field"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="msgBody">
|
<div>
|
||||||
<div id="messageFields">
|
<!-- h2 -->
|
||||||
<div class="fieldFloater">
|
<div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
|
||||||
<div>
|
<div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
|
||||||
|
<!-- save -->
|
||||||
|
<div>
|
||||||
|
<!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
|
||||||
|
</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>
|
<label for="httpStatus">Http Status</label>
|
||||||
<input type="text" id="httpStatus" class="field fieldDefault" value="200" list="httpStatusSuggestion">
|
<input id="httpStatus" class="bordered-field max-width data-field" type="text" value="200" list="httpStatusSuggestion">
|
||||||
<datalist id="httpStatusSuggestion">
|
<datalist id="httpStatusSuggestion">
|
||||||
<option value="200">
|
<option value="200">
|
||||||
<option value="300">
|
<option value="300">
|
||||||
@@ -39,9 +44,10 @@
|
|||||||
<option value="500">
|
<option value="500">
|
||||||
</datalist>
|
</datalist>
|
||||||
</div>
|
</div>
|
||||||
<div id="typeSelection">
|
<!-- content type -->
|
||||||
|
<div class="max-width small-vertical-margin">
|
||||||
<label for="typeSelector">Content Type</label>
|
<label for="typeSelector">Content Type</label>
|
||||||
<input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/>
|
<input id="typeSelector" class="bordered-field max-width data-field" type="text" value="application/xml" list="contentTypes">
|
||||||
<datalist id="contentTypes">
|
<datalist id="contentTypes">
|
||||||
<option value="application/xml">
|
<option value="application/xml">
|
||||||
<option value="application/json">
|
<option value="application/json">
|
||||||
@@ -49,127 +55,171 @@
|
|||||||
</datalist>
|
</datalist>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fieldFloater" id="functionBar">
|
<button id="btn-save" class="small-margins half-width with-padding action-button">Save</button>
|
||||||
<div class="buttonSpacer"></div>
|
</div>
|
||||||
<div><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
|
<!-- body -->
|
||||||
<div class="buttonSpacer"></div>
|
<div class="small-vertical-margin">
|
||||||
<div style="clear: both;"></div>
|
<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 -->
|
||||||
|
<div id="optional" class="clickable-text highlight">
|
||||||
|
<h3>> show/hide advanced settings</h3>
|
||||||
|
</div>
|
||||||
|
<!-- 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>
|
</div>
|
||||||
<div style="clear: both;"></div>
|
<!-- container -->
|
||||||
</div>
|
<div class="medium-vertical-margin">
|
||||||
|
<!-- headers -->
|
||||||
<div id="bodyEdition">
|
<div id="headers" class="medium-vertical-margin tabcontent active">
|
||||||
<label for="bodyEditor">Body:</label>
|
<table class="table-map">
|
||||||
<textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
|
<thead>
|
||||||
</div>
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
</div>
|
<th>Value</th>
|
||||||
<div id="optional">> show/hide advanced settings</div>
|
<th></th>
|
||||||
<div id="advanced" style="display: none;">
|
</tr>
|
||||||
<div id="advancedMenu">
|
</thead>
|
||||||
<div id="headersTab" class="advancedMenuTabSelected">Headers</div>
|
<tbody id="headerMapTable">
|
||||||
<div id="historyTab" class="advancedMenuTab">History</div>
|
<tr>
|
||||||
</div>
|
<td><input class="key" value="basic value"></td>
|
||||||
<div id="headers">
|
<td><input value="basic value"></td>
|
||||||
<table id="headerTable">
|
<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>
|
||||||
<thead>
|
</tr>
|
||||||
<tr>
|
</tbody>
|
||||||
<td>Header</td>
|
<tr>
|
||||||
<td>Value</td>
|
<td><input id="headerKeyInput" placeholder="name"></td>
|
||||||
<td></td>
|
<td><input id="headerValueInput" placeholder="value"></td>
|
||||||
</tr>
|
<td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
|
||||||
</thead>
|
|
||||||
<tbody id="httpStatusValues">
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
|
|
||||||
<td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
|
|
||||||
<td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div id="history" style="display:none;">
|
|
||||||
<div id="historyFunction">
|
|
||||||
<div>
|
|
||||||
<label for="historyFrom">From</label>
|
|
||||||
<input type="date" name="dateFrom" id="historyFrom"/>
|
|
||||||
<input type="time" name="timeFrom" id="historyTimeFrom"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="historyTo">To</label>
|
|
||||||
<input type="date" name="dateTo" id="historyTo"/>
|
|
||||||
<input type="time" name="dateTo" id="historyTimeTo"/>
|
|
||||||
</div>
|
|
||||||
<button id="btn-searchHistory">Search</button>
|
|
||||||
</div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="historyDisplay">
|
|
||||||
<table id="historyTable" class="simpleTable">
|
|
||||||
<thead>
|
|
||||||
<tr class="head">
|
|
||||||
<th>Timestamp</th>
|
|
||||||
<th>Status</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</table>
|
||||||
<tbody>
|
</div>
|
||||||
</tbody>
|
<!-- history -->
|
||||||
</table>
|
<div id="history" class="medium-vertical-margin tabcontent">
|
||||||
|
<div class="block-display max-width">
|
||||||
|
<div class="display-space-between max-width small-vertical-margin">
|
||||||
|
<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">
|
||||||
|
<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>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
<div id="selectMenuContent" class="tool-extention">
|
||||||
<div id="selectMenu">
|
<!-- header -->
|
||||||
<div id="selectMenuContent" style="display: none;">
|
<div>
|
||||||
<div id="selectMenuHead" class="articleHead">List</div>
|
<h2>Message List</h2>
|
||||||
<div id="listItems"></div>
|
</div>
|
||||||
<div id="iconPlus" class="menuItem"><i class="icon-plus"></i></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 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>
|
</div>
|
||||||
<div id="tooltip" class="fixed tooltip">
|
<div class="tooltip-window lite">
|
||||||
<div id="mockIntroTip">
|
<div>
|
||||||
<h2>What's mock service?</h2>
|
<h2>What's this?</h2>
|
||||||
<p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
|
<p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
|
||||||
<p>Hover over an item to see description!</p>
|
<h2>Help</h2>
|
||||||
<br>
|
<p>When cursor hovers over an item. It's description is displayed below.</p>
|
||||||
<h2>Help:</h2>
|
<div class="large-vertical-margin">
|
||||||
</div>
|
<div id="messageLinkTip" class="tip">
|
||||||
|
<h3>Link</h3>
|
||||||
<div id="messageLinkTip" class="collapsible" style="display: none;">
|
<p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
|
||||||
<!--style="display: none;"-->
|
</div>
|
||||||
<h4>The link</h4>
|
</div>
|
||||||
<p>It's url where you need send your request</p>
|
<div class="large-vertical-margin">
|
||||||
</div>
|
<div id="httpStatusTip" class="tip">
|
||||||
<div id="httpStatusTip" class="collapsible" style="display: none;">
|
<h3>Http Status</h3>
|
||||||
<h4>Http status</h4>
|
<p>Value of the field is corresponding to status value that server will return.</p>
|
||||||
<p>Set http status for server response. 200 OK is default.</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="typeSelectorTip" class="collapsible" style="display: none;">
|
<div class="large-vertical-margin">
|
||||||
<h4>Content type</h4>
|
<div id="typeSelectorTip" class="tip">
|
||||||
<p>Select content type of body. Set plain text if data has no format.</p>
|
<h3>Content Type</h3>
|
||||||
</div>
|
<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 id="bodyEditorTip" class="collapsible" style="display: none;">
|
</div>
|
||||||
<h4>Body</h4>
|
</div>
|
||||||
<p>Text placed in this field will be displayed as response body</p>
|
<div class="large-vertical-margin">
|
||||||
</div>
|
<div id="bodyEditorTip" class="tip">
|
||||||
<div id="headersTabTip" class="collapsible" style="display: none;">
|
<h3>Body</h3>
|
||||||
<h4>Headers</h4>
|
<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>
|
||||||
<p>Set headers for your messages.</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="historyTabTip" class="collapsible" style="display: none;">
|
<div class="large-vertical-margin">
|
||||||
<h4>History</h4>
|
<div id="headersTabTip" class="tip">
|
||||||
<p>Check history of this message</p>
|
<h3>Headers</h3>
|
||||||
</div>
|
<p>Content of this tab allows to set and modify headers that will be included in the response.</p>
|
||||||
<div id="newHeaderTip" class="collapsible" style="display: none;">
|
</div>
|
||||||
<h4>Next header value</h4>
|
</div>
|
||||||
<p>Type values and press enter to add new header.</p>
|
<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>
|
||||||
<div style="clear:both;"></div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="overlay"></div>
|
<div id="overlay"></div>
|
||||||
<div id="modal-confirm" class="modal">
|
<div id="modal-confirm" class="modal">
|
||||||
@@ -194,5 +244,6 @@
|
|||||||
<script type="text/javascript" src="/js/uianimation.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/datatransfer.js"></script>
|
||||||
<script type="text/javascript" src="/js/historyloader.js"></script>
|
<script type="text/javascript" src="/js/historyloader.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/fiddle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,7 +1,3 @@
|
|||||||
//TODO: Add delete buttons for messages
|
|
||||||
//TODO: Save button deactivation after swap, post or delete
|
|
||||||
//TODO: It sends request, gets responds but doesnt run a function!!
|
|
||||||
//TODO: Warning is displayed twice
|
|
||||||
var clientUUID = '';
|
var clientUUID = '';
|
||||||
var advancedDisplayed = false;
|
var advancedDisplayed = false;
|
||||||
var json = {};
|
var json = {};
|
||||||
@@ -10,11 +6,9 @@ var lastId = 1;
|
|||||||
var htable_row = 0;
|
var htable_row = 0;
|
||||||
var host = getDomain();
|
var host = getDomain();
|
||||||
var dataModified = false;
|
var dataModified = false;
|
||||||
// TODO: Remove discard changes
|
|
||||||
const addMessageName = 'addMessage';
|
const addMessageName = 'addMessage';
|
||||||
const loadMessageName = 'changeMessage';
|
const loadMessageName = 'changeMessage';
|
||||||
const removeMessageName = 'removeMessage';
|
const removeMessageName = 'removeMessage';
|
||||||
// TODO: Add last given command
|
|
||||||
|
|
||||||
const C_UUID = 'mock-uuid';
|
const C_UUID = 'mock-uuid';
|
||||||
const C_ID = 'last-displayed-id';
|
const C_ID = 'last-displayed-id';
|
||||||
@@ -32,10 +26,9 @@ const getUpdate = function(){
|
|||||||
const dataRefresh = function(){
|
const dataRefresh = function(){
|
||||||
getData();
|
getData();
|
||||||
}
|
}
|
||||||
$('#iconPlus').click(function(){callAddMessage()});
|
$('#btn-newtile').click(function(){callAddMessage()});
|
||||||
$('#btn-addRow').click(function(){addRow()});
|
// $('#btn-addRow').click(function(){addRow()});
|
||||||
//TODO remove later save onclick init
|
// $('#btn-save').click(getUpdate);
|
||||||
$('#btn-save').click(getUpdate);
|
|
||||||
|
|
||||||
function getData(){
|
function getData(){
|
||||||
$.getJSON(host + '/api/mock/'+clientUUID, function(data) {
|
$.getJSON(host + '/api/mock/'+clientUUID, function(data) {
|
||||||
@@ -64,18 +57,16 @@ function getDomain(){
|
|||||||
function setDataModified(){
|
function setDataModified(){
|
||||||
if(dataModified) return;
|
if(dataModified) return;
|
||||||
dataModified = true;
|
dataModified = true;
|
||||||
$('#btn-save').removeClass('btn-inactive');
|
$('#btn-save').addClass('active');
|
||||||
$('#btn-save').addClass('btn-action');
|
|
||||||
$('#btn-save').click(getUpdate);
|
$('#btn-save').click(getUpdate);
|
||||||
}
|
}
|
||||||
|
|
||||||
//Adding change listener to fields
|
//Adding change listener to fields
|
||||||
$('.field').change(setModified);
|
$('.data-field').change(setModified);
|
||||||
|
|
||||||
function setDataOrigin(){
|
function setDataOrigin(){
|
||||||
dataModified = false;
|
dataModified = false;
|
||||||
$('#btn-save').addClass('btn-inactive');
|
$('#btn-save').removeClass('active');
|
||||||
$('#btn-save').removeClass('btn-action');
|
|
||||||
$('#btn-save').off();
|
$('#btn-save').off();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -104,7 +95,7 @@ function refreshData(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setCookie(){
|
function setCookie(){
|
||||||
document.cookie = C_UUID + '=' +clientUUID+';'
|
document.cookie = C_UUID + '=' +clientUUID;
|
||||||
document.cookie = C_ID + '=' + lastId;
|
document.cookie = C_ID + '=' + lastId;
|
||||||
document.cookie = C_ADV + '=' + advancedVisibility;
|
document.cookie = C_ADV + '=' + advancedVisibility;
|
||||||
}
|
}
|
||||||
@@ -216,7 +207,8 @@ function initializeMock(index){
|
|||||||
|
|
||||||
function fillStaticFields(uuid, id, mediaType, body, httpStatus){
|
function fillStaticFields(uuid, id, mediaType, body, httpStatus){
|
||||||
let link = createLink(uuid,id);
|
let link = createLink(uuid,id);
|
||||||
$('#messageLink').html('<a href="' + link + '" target="_blank">' + link + '</a>');
|
let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
|
||||||
|
$('#messageLink').html(linkHtml);
|
||||||
$('#httpStatus').val(httpStatus);
|
$('#httpStatus').val(httpStatus);
|
||||||
$('#typeSelector').val(mediaType);
|
$('#typeSelector').val(mediaType);
|
||||||
$('#bodyEditor').val(body);
|
$('#bodyEditor').val(body);
|
||||||
@@ -230,69 +222,61 @@ function createLink(uuid, id){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function fillHeaderTable(headers){
|
function fillHeaderTable(headers){
|
||||||
var innerHTML = $('#httpStatusValues').html();
|
var innerHTML = buildHeaderMapHtml(headers);
|
||||||
innerHTML += generateHeaderTable(headers);
|
refreshHeaderTable(innerHTML);
|
||||||
$('#httpStatusValues').html(innerHTML);
|
|
||||||
$('.tableField').change(function(){setDataModified()});
|
|
||||||
}
|
}
|
||||||
//TODO: Add addRow() to generate new rows and populate them with data
|
|
||||||
function generateHeaderTable(headers){
|
|
||||||
let count = 0;
|
|
||||||
let innerHTML = '';
|
|
||||||
for(var item in headers){
|
|
||||||
if( headers.hasOwnProperty(item) ) count++;
|
|
||||||
}
|
|
||||||
var keys = new Array(count);
|
|
||||||
var values = new Array(count);
|
|
||||||
let index = 0;
|
|
||||||
for(var key in Object.keys(headers)){
|
|
||||||
keys[index++]=Object.keys(headers)[key];
|
|
||||||
}
|
|
||||||
index = 0;
|
|
||||||
for(var val in headers){
|
|
||||||
values[index++]=headers[val];
|
|
||||||
}
|
|
||||||
|
|
||||||
for(let i=0; i<count; i++){
|
function refreshHeaderTable(html){
|
||||||
innerHTML+=
|
$('#headerMapTable').html(html);
|
||||||
'<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
|
$('.table-map').change(function(){setDataModified()});
|
||||||
'<td>' +
|
$('.btn-hashmap').click(function(){
|
||||||
'<input type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
|
$(this).closest('tr').remove();
|
||||||
'<td>' +
|
setDataModified();
|
||||||
'<input type="text" name="headerValue" placeholder="value" class="tableField" value="' + values[i] + '"/></td>' +
|
})
|
||||||
'<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">×</td>' +
|
}
|
||||||
'</tr>';
|
|
||||||
htable_row++;
|
function buildHeaderMapHtml(headers){
|
||||||
|
var innerHTML = '';
|
||||||
|
for(var key in headers){
|
||||||
|
innerHTML += buildRowHtml(key, headers[key]);
|
||||||
}
|
}
|
||||||
return innerHTML;
|
return innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeRow(row){
|
function addRow(key, value){
|
||||||
$('#hrow' + row).remove();
|
var headerMap = $('#headerMapTable');
|
||||||
setDataModified();
|
var headersMapHtml = headerMap.html();
|
||||||
|
headersMapHtml += buildRowHtml(key, value);
|
||||||
|
refreshHeaderTable(headersMapHtml);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addRow(){
|
const newRowInput = function(){
|
||||||
var table = $('#httpStatusValues');
|
const hName = $('#headerKeyInput');
|
||||||
var hkey = $('#headerKeyInput');
|
const hValue = $('#headerValueInput');
|
||||||
var hval = $('#headerValueInput');
|
if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){
|
||||||
if(hkey.val() == 'key' || hkey.val() == '' || hval.val() == 'value' || hval.val() == '') return;
|
addRow(hName.val(), hValue.val());
|
||||||
var innerHtml =
|
hName.val(null);
|
||||||
'<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
|
hValue.val(null);
|
||||||
'<td>' +
|
setDataModified();
|
||||||
'<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + hkey.val() +
|
}
|
||||||
'"/></td>' +
|
|
||||||
'<td>' +
|
|
||||||
'<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + hval.val() + '"/></td>' +
|
|
||||||
'<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
|
|
||||||
'</tr>';
|
|
||||||
htable_row++;
|
|
||||||
table.append(innerHtml);
|
|
||||||
hkey.val('');
|
|
||||||
hval.val('');
|
|
||||||
setDataModified();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$('#btn-newRow').click(newRowInput);
|
||||||
|
|
||||||
|
function checkIfInputValid(input){
|
||||||
|
return !(input == '' || input == null || input == undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildRowHtml(key, value){
|
||||||
|
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(){
|
function fillMessageList(){
|
||||||
$("#listItems").html('');
|
$("#listItems").html('');
|
||||||
var innerHTML = '';
|
var innerHTML = '';
|
||||||
@@ -300,10 +284,21 @@ function fillMessageList(){
|
|||||||
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
|
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
|
||||||
}
|
}
|
||||||
$("#listItems").append(innerHTML);
|
$("#listItems").append(innerHTML);
|
||||||
|
$('.tile').click(function(e) {
|
||||||
|
var element = $(this);
|
||||||
|
var button = element.find('.btn-tile').children().get(0);
|
||||||
|
console.log(button == e.target);
|
||||||
|
if(!(button == e.target)){
|
||||||
|
console.log("Button is not a target. Loading message.")
|
||||||
|
callLoadMessage(parseInt($(this).attr('tileid')));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$('.btn-tile').click(function(){
|
||||||
|
// console.log(this);
|
||||||
|
callRemoveMessage($(this).closest('.tile').attr('tileId'));
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//TODO: Implement methods where its possible
|
|
||||||
function findJsonById(id){
|
function findJsonById(id){
|
||||||
return json[findJsonIndexById(id)];
|
return json[findJsonIndexById(id)];
|
||||||
}
|
}
|
||||||
@@ -324,10 +319,15 @@ function callLoadMessage(id){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function loadMessage(id){
|
function loadMessage(id){
|
||||||
|
if(id == null || id == undefined){
|
||||||
|
console.log('id is null');
|
||||||
|
return;
|
||||||
|
}
|
||||||
lastId = id;
|
lastId = id;
|
||||||
setCookie();
|
setCookie();
|
||||||
setDataOrigin();
|
setDataOrigin();
|
||||||
for(let i=0; i<json.length; i++){
|
for(let i=0; i<json.length; i++){
|
||||||
|
console.log('id == ' + id + ' mockedId == ' + json[i].mockedResponseId);
|
||||||
if(id == json[i].mockedResponseId){
|
if(id == json[i].mockedResponseId){
|
||||||
jsonIndex = i;
|
jsonIndex = i;
|
||||||
console.log("Message found");
|
console.log("Message found");
|
||||||
@@ -341,25 +341,33 @@ function loadMessage(id){
|
|||||||
console.log("Message not found");
|
console.log("Message not found");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function selectMessage(id){
|
function selectMessage(id){
|
||||||
|
const tiles = $('.tile');
|
||||||
console.log("Selecting message...");
|
console.log("Selecting message...");
|
||||||
$(".menuItemSelected").on("click");
|
tiles.removeClass("active");
|
||||||
$(".menuItemSelected").addClass("menuItem");
|
|
||||||
$(".menuItemSelected").removeClass("menuItemSelected");
|
|
||||||
console.log("Selected message deselected");
|
console.log("Selected message deselected");
|
||||||
let itemId = '#item_'+id;
|
$('.tile[tileid="'+id+'"]').addClass("active");
|
||||||
$(itemId).off("click");
|
|
||||||
$(itemId).addClass("menuItemSelected");
|
|
||||||
$(itemId).removeClass("menuItem");
|
|
||||||
console.log("Selected message selected");
|
console.log("Selected message selected");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function generateMessageTileHtml(id, httpStatus, mediaType){
|
function generateMessageTileHtml(id, httpStatus, mediaType){
|
||||||
var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' +
|
var innerHTML = '' +
|
||||||
'<table><tr><td>Id: '+ id +'</td></tr>' +
|
'<div tileid="' + id + '" class="tile">' +
|
||||||
'<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
|
'<div class="content">' +
|
||||||
'</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">×</div>' +
|
'<div class="display-space-between">' +
|
||||||
'<div style="clear: both;"></div>';
|
'<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;
|
return innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -399,7 +407,7 @@ function generateJson(){
|
|||||||
|
|
||||||
|
|
||||||
function convertTableToJson(){
|
function convertTableToJson(){
|
||||||
var rows = $('.httpStatusValue');
|
const rows = $('#headerMapTable').children();
|
||||||
console.log("Rows: "+rows.length);
|
console.log("Rows: "+rows.length);
|
||||||
var obj = {};
|
var obj = {};
|
||||||
var key;
|
var key;
|
||||||
|
|||||||
5
src/main/resources/static/js/fiddle.js
Normal file
5
src/main/resources/static/js/fiddle.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
const deleteParent = function(){
|
||||||
|
$(this).closest('div.tile').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#test1').click(deleteParent);
|
||||||
@@ -56,7 +56,8 @@ function historyToHtml(){
|
|||||||
var innerHTML = '';
|
var innerHTML = '';
|
||||||
var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
|
var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
|
||||||
for(let i=0; i<iterations; i++){
|
for(let i=0; i<iterations; i++){
|
||||||
innerHTML += '<tr>' +
|
let style = i%2==0 ? ' class="even"' : '';
|
||||||
|
innerHTML += '<tr' + style + '>' +
|
||||||
'<td>' + historyJson[i].dateTimeStamp + '</td>' +
|
'<td>' + historyJson[i].dateTimeStamp + '</td>' +
|
||||||
'<td>' + historyJson[i].interfaceName + '</td>' +
|
'<td>' + historyJson[i].interfaceName + '</td>' +
|
||||||
'</tr>';
|
'</tr>';
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
|
|||||||
const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
|
const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
|
||||||
const allModals = $('.modal');
|
const allModals = $('.modal');
|
||||||
const btnModalClose = $('.modal button');
|
const btnModalClose = $('.modal button');
|
||||||
//TODO: Implement in datatransfer
|
|
||||||
const closeModals = function() {
|
const closeModals = function() {
|
||||||
hideModal(allModals);
|
hideModal(allModals);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
|
|||||||
var focusedField = false;
|
var focusedField = false;
|
||||||
function changeAdvancedVisibility(){
|
function changeAdvancedVisibility(){
|
||||||
if(advancedVisibility){
|
if(advancedVisibility){
|
||||||
selectMenu.css('display', 'none');
|
selectMenu.removeClass('active');
|
||||||
advancedTab.css('display', 'none');
|
advancedTab.removeClass('active');
|
||||||
advancedID.css('display', 'none');
|
advancedID.removeClass('active');
|
||||||
basicID.css('display', 'block')
|
basicID.addClass('active');
|
||||||
advancedVisibility = false;
|
advancedVisibility = false;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
selectMenu.css('display', 'block');
|
selectMenu.addClass('active');
|
||||||
advancedTab.css('display', 'block');
|
advancedTab.addClass('active');
|
||||||
advancedID.css('display', 'block');
|
advancedID.addClass('active');
|
||||||
basicID.css('display', 'none');
|
basicID.removeClass('active');
|
||||||
advancedVisibility = true;
|
advancedVisibility = true;
|
||||||
}
|
}
|
||||||
setCookie();
|
setCookie();
|
||||||
}
|
}
|
||||||
|
|
||||||
function createMessageTab() {
|
|
||||||
var items = document.getElementById("listItems");
|
|
||||||
items.innerHTML += '<div class="menuItem">Item</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$("#optional").click(changeAdvancedVisibility);
|
$("#optional").click(changeAdvancedVisibility);
|
||||||
$(".menuFactory").click(createMessageTab);
|
|
||||||
$('#historyTab').click(showHistory);
|
$('#historyTab').click(showHistory);
|
||||||
|
|
||||||
|
const tabitem = $('.tabitem');
|
||||||
function showHistory(){
|
function showHistory(){
|
||||||
$('#headers').css('display', 'none');
|
$('#headersTab').click(showHeaders);
|
||||||
$('.advancedMenuTabSelected').addClass('advancedMenuTab');
|
tabitem.removeClass('active');
|
||||||
$('.advancedMenuTabSelected').click(showHeaders);
|
$('.tabcontent').removeClass('active');
|
||||||
$('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
|
$('#history').addClass('active');
|
||||||
$('#history').css('display', 'block');
|
$('#historyTab').addClass('active');
|
||||||
$('#historyTab').addClass('advancedMenuTabSelected');
|
|
||||||
$('#historyTab').removeClass('advancedMenuTab');
|
|
||||||
$('#historyTab').off('click');
|
$('#historyTab').off('click');
|
||||||
}
|
}
|
||||||
|
|
||||||
function showHeaders(){
|
function showHeaders(){
|
||||||
$('#history').css('display', 'none');
|
$('#historyTab').click(showHistory);
|
||||||
$('.advancedMenuTabSelected').addClass('advancedMenuTab');
|
tabitem.removeClass('active');
|
||||||
$('.advancedMenuTabSelected').click(showHistory);
|
$('.tabcontent').removeClass('active');
|
||||||
$('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
|
$('#headers').addClass('active');
|
||||||
$('#headers').css('display', 'block');
|
$('#headersTab').addClass('active');
|
||||||
$('#headersTab').addClass('advancedMenuTabSelected');
|
|
||||||
$('#headersTab').removeClass('advancedMenuTab');
|
|
||||||
$('#headersTab').off('click');
|
$('#headersTab').off('click');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -65,13 +56,13 @@ function focusOutTip(element){
|
|||||||
|
|
||||||
function hidTip(element){
|
function hidTip(element){
|
||||||
if(focusedField) return;
|
if(focusedField) return;
|
||||||
$('#'+element).fadeOut(100);
|
$('#'+element).removeClass('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
function showTip(element){
|
function showTip(element){
|
||||||
if(focusedField) return;
|
if(focusedField) return;
|
||||||
$('.collapsible').fadeOut(0);
|
$('.tip').removeClass('active');
|
||||||
$('#'+element).fadeIn(100);
|
$('#'+element).addClass('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#messageLink').mouseover(function(){showTip('messageLinkTip')});
|
$('#messageLink').mouseover(function(){showTip('messageLinkTip')});
|
||||||
|
|||||||
BIN
target/classes/static/css/commons/font/fontello.eot
Normal file
BIN
target/classes/static/css/commons/font/fontello.eot
Normal file
Binary file not shown.
14
target/classes/static/css/commons/font/fontello.svg
Normal file
14
target/classes/static/css/commons/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
target/classes/static/css/commons/font/fontello.ttf
Normal file
BIN
target/classes/static/css/commons/font/fontello.ttf
Normal file
Binary file not shown.
BIN
target/classes/static/css/commons/font/fontello.woff
Normal file
BIN
target/classes/static/css/commons/font/fontello.woff
Normal file
Binary file not shown.
BIN
target/classes/static/css/commons/font/fontello.woff2
Normal file
BIN
target/classes/static/css/commons/font/fontello.woff2
Normal file
Binary file not shown.
59
target/classes/static/css/commons/fontello.css
vendored
Normal file
59
target/classes/static/css/commons/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'; } /* '' */
|
||||||
454
target/classes/static/css/commons/r11form.css
Normal file
454
target/classes/static/css/commons/r11form.css
Normal file
@@ -0,0 +1,454 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
|
||||||
|
@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
|
||||||
|
@import url('fontello.css');
|
||||||
|
|
||||||
|
|
||||||
|
.hyperlink, .hyperlink:visited, .hyperlink:active {
|
||||||
|
color: rgb(47, 125, 146);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hyperlink:hover {
|
||||||
|
filter: brightness(120%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-window {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
filter: drop-shadow(-2px 0px 2px darkgray);
|
||||||
|
background: #e8f3f7;
|
||||||
|
padding: 15px 30px;
|
||||||
|
font-family: 'Nunito', sans-serif;
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-window.lite {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-window .tip {
|
||||||
|
}
|
||||||
|
|
||||||
|
.bordered-field {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-background {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button {
|
||||||
|
padding: 0;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-add {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #00000030;
|
||||||
|
margin: auto 0 auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-add:hover {
|
||||||
|
color:#58ac43;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-tile:hover {
|
||||||
|
color: #ca1111;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-hashmap {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #00000030;
|
||||||
|
margin: auto 0 auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modification-button.btn-hashmap: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-addtile:hover {
|
||||||
|
color: #58ac43;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 40%;
|
||||||
|
border: 1px solid gray;
|
||||||
|
border-radius: 3px;
|
||||||
|
position: relative;
|
||||||
|
background: #f0f0f095;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile:hover {
|
||||||
|
filter: brightness(110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile.active {
|
||||||
|
background: #00000070;
|
||||||
|
color: white;
|
||||||
|
filter: none;
|
||||||
|
pointer-events: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.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: #3bc4f1;
|
||||||
|
border: 1px solid #7ed0eb;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button.active:hover {
|
||||||
|
filter: brightness(110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
background: rgba(155, 165, 160, 0.507);
|
||||||
|
border:1px solid rgba(186, 197, 191, 0.507);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontent {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontent.active {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible .section-button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
background: #00000012;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible .section-button:hover {
|
||||||
|
filter: brightness(110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible.active .section-button {
|
||||||
|
background: #00000030;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible.active .section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible .section {
|
||||||
|
display: none;
|
||||||
|
background: #ffffff50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section .content {
|
||||||
|
padding: 15px 15px 30px 15px ;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddable {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiddable.active {
|
||||||
|
display: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
7
target/classes/static/css/form.css
Normal file
7
target/classes/static/css/form.css
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
.r11-form {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.r11-form input, textarea {
|
||||||
|
border:
|
||||||
|
}
|
||||||
@@ -3,33 +3,38 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>R11 MockedServices</title>
|
<title>R11 MockedServices</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" href="/css/main.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="/css/tooltip.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="http://gordon.zipper.release11.com:8085/common.css" type="text/css">
|
|
||||||
<link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/>
|
|
||||||
<link rel="stylesheet" href="/css/modal.css" type="text/css">
|
<link rel="stylesheet" href="/css/modal.css" type="text/css">
|
||||||
<link rel="stylesheet" href="/css/table.css" type="text/css">
|
<link rel="stylesheet" href="/css/commons/r11form.css" type="text/css">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container">
|
||||||
<div id="container">
|
<div class="tool extended">
|
||||||
<div id="toolName">Mocked Service <span id="version">v0.0.1</span></div>
|
<div class="tool-context">
|
||||||
<div id="itemData">
|
<div>
|
||||||
<div id="basicItemData" class="articleHead">Your message</div>
|
<h1>MockedServices <span class="version-span">v1.0.0</span></h1>
|
||||||
<div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
|
|
||||||
<div id="link">
|
|
||||||
<label for="messageLink">Link</label>
|
|
||||||
<div id="messageLink" class="field"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="msgBody">
|
<div>
|
||||||
<div id="messageFields">
|
<!-- h2 -->
|
||||||
<div class="fieldFloater">
|
<div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
|
||||||
<div>
|
<div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
|
||||||
|
<!-- save -->
|
||||||
|
<div>
|
||||||
|
<!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
|
||||||
|
</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>
|
<label for="httpStatus">Http Status</label>
|
||||||
<input type="text" id="httpStatus" class="field fieldDefault" value="200" list="httpStatusSuggestion">
|
<input id="httpStatus" class="bordered-field max-width data-field" type="text" value="200" list="httpStatusSuggestion">
|
||||||
<datalist id="httpStatusSuggestion">
|
<datalist id="httpStatusSuggestion">
|
||||||
<option value="200">
|
<option value="200">
|
||||||
<option value="300">
|
<option value="300">
|
||||||
@@ -39,9 +44,10 @@
|
|||||||
<option value="500">
|
<option value="500">
|
||||||
</datalist>
|
</datalist>
|
||||||
</div>
|
</div>
|
||||||
<div id="typeSelection">
|
<!-- content type -->
|
||||||
|
<div class="max-width small-vertical-margin">
|
||||||
<label for="typeSelector">Content Type</label>
|
<label for="typeSelector">Content Type</label>
|
||||||
<input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/>
|
<input id="typeSelector" class="bordered-field max-width data-field" type="text" value="application/xml" list="contentTypes">
|
||||||
<datalist id="contentTypes">
|
<datalist id="contentTypes">
|
||||||
<option value="application/xml">
|
<option value="application/xml">
|
||||||
<option value="application/json">
|
<option value="application/json">
|
||||||
@@ -49,127 +55,171 @@
|
|||||||
</datalist>
|
</datalist>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fieldFloater" id="functionBar">
|
<button id="btn-save" class="small-margins half-width with-padding action-button">Save</button>
|
||||||
<div class="buttonSpacer"></div>
|
</div>
|
||||||
<div><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
|
<!-- body -->
|
||||||
<div class="buttonSpacer"></div>
|
<div class="small-vertical-margin">
|
||||||
<div style="clear: both;"></div>
|
<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 -->
|
||||||
|
<div id="optional" class="clickable-text highlight">
|
||||||
|
<h3>> show/hide advanced settings</h3>
|
||||||
|
</div>
|
||||||
|
<!-- 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>
|
</div>
|
||||||
<div style="clear: both;"></div>
|
<!-- container -->
|
||||||
</div>
|
<div class="medium-vertical-margin">
|
||||||
|
<!-- headers -->
|
||||||
<div id="bodyEdition">
|
<div id="headers" class="medium-vertical-margin tabcontent active">
|
||||||
<label for="bodyEditor">Body:</label>
|
<table class="table-map">
|
||||||
<textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
|
<thead>
|
||||||
</div>
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
</div>
|
<th>Value</th>
|
||||||
<div id="optional">> show/hide advanced settings</div>
|
<th></th>
|
||||||
<div id="advanced" style="display: none;">
|
</tr>
|
||||||
<div id="advancedMenu">
|
</thead>
|
||||||
<div id="headersTab" class="advancedMenuTabSelected">Headers</div>
|
<tbody id="headerMapTable">
|
||||||
<div id="historyTab" class="advancedMenuTab">History</div>
|
<tr>
|
||||||
</div>
|
<td><input class="key" value="basic value"></td>
|
||||||
<div id="headers">
|
<td><input value="basic value"></td>
|
||||||
<table id="headerTable">
|
<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>
|
||||||
<thead>
|
</tr>
|
||||||
<tr>
|
</tbody>
|
||||||
<td>Header</td>
|
<tr>
|
||||||
<td>Value</td>
|
<td><input id="headerKeyInput" placeholder="name"></td>
|
||||||
<td></td>
|
<td><input id="headerValueInput" placeholder="value"></td>
|
||||||
</tr>
|
<td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
|
||||||
</thead>
|
|
||||||
<tbody id="httpStatusValues">
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
|
|
||||||
<td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
|
|
||||||
<td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div id="history" style="display:none;">
|
|
||||||
<div id="historyFunction">
|
|
||||||
<div>
|
|
||||||
<label for="historyFrom">From</label>
|
|
||||||
<input type="date" name="dateFrom" id="historyFrom"/>
|
|
||||||
<input type="time" name="timeFrom" id="historyTimeFrom"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="historyTo">To</label>
|
|
||||||
<input type="date" name="dateTo" id="historyTo"/>
|
|
||||||
<input type="time" name="dateTo" id="historyTimeTo"/>
|
|
||||||
</div>
|
|
||||||
<button id="btn-searchHistory">Search</button>
|
|
||||||
</div>
|
|
||||||
<div style="clear:both;"></div>
|
|
||||||
<div id="historyDisplay">
|
|
||||||
<table id="historyTable" class="simpleTable">
|
|
||||||
<thead>
|
|
||||||
<tr class="head">
|
|
||||||
<th>Timestamp</th>
|
|
||||||
<th>Status</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</table>
|
||||||
<tbody>
|
</div>
|
||||||
</tbody>
|
<!-- history -->
|
||||||
</table>
|
<div id="history" class="medium-vertical-margin tabcontent">
|
||||||
|
<div class="block-display max-width">
|
||||||
|
<div class="display-space-between max-width small-vertical-margin">
|
||||||
|
<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">
|
||||||
|
<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>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
<div id="selectMenuContent" class="tool-extention">
|
||||||
<div id="selectMenu">
|
<!-- header -->
|
||||||
<div id="selectMenuContent" style="display: none;">
|
<div>
|
||||||
<div id="selectMenuHead" class="articleHead">List</div>
|
<h2>Message List</h2>
|
||||||
<div id="listItems"></div>
|
</div>
|
||||||
<div id="iconPlus" class="menuItem"><i class="icon-plus"></i></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 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>
|
</div>
|
||||||
<div id="tooltip" class="fixed tooltip">
|
<div class="tooltip-window lite">
|
||||||
<div id="mockIntroTip">
|
<div>
|
||||||
<h2>What's mock service?</h2>
|
<h2>What's this?</h2>
|
||||||
<p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
|
<p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
|
||||||
<p>Hover over an item to see description!</p>
|
<h2>Help</h2>
|
||||||
<br>
|
<p>When cursor hovers over an item. It's description is displayed below.</p>
|
||||||
<h2>Help:</h2>
|
<div class="large-vertical-margin">
|
||||||
</div>
|
<div id="messageLinkTip" class="tip">
|
||||||
|
<h3>Link</h3>
|
||||||
<div id="messageLinkTip" class="collapsible" style="display: none;">
|
<p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
|
||||||
<!--style="display: none;"-->
|
</div>
|
||||||
<h4>The link</h4>
|
</div>
|
||||||
<p>It's url where you need send your request</p>
|
<div class="large-vertical-margin">
|
||||||
</div>
|
<div id="httpStatusTip" class="tip">
|
||||||
<div id="httpStatusTip" class="collapsible" style="display: none;">
|
<h3>Http Status</h3>
|
||||||
<h4>Http status</h4>
|
<p>Value of the field is corresponding to status value that server will return.</p>
|
||||||
<p>Set http status for server response. 200 OK is default.</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="typeSelectorTip" class="collapsible" style="display: none;">
|
<div class="large-vertical-margin">
|
||||||
<h4>Content type</h4>
|
<div id="typeSelectorTip" class="tip">
|
||||||
<p>Select content type of body. Set plain text if data has no format.</p>
|
<h3>Content Type</h3>
|
||||||
</div>
|
<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 id="bodyEditorTip" class="collapsible" style="display: none;">
|
</div>
|
||||||
<h4>Body</h4>
|
</div>
|
||||||
<p>Text placed in this field will be displayed as response body</p>
|
<div class="large-vertical-margin">
|
||||||
</div>
|
<div id="bodyEditorTip" class="tip">
|
||||||
<div id="headersTabTip" class="collapsible" style="display: none;">
|
<h3>Body</h3>
|
||||||
<h4>Headers</h4>
|
<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>
|
||||||
<p>Set headers for your messages.</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="historyTabTip" class="collapsible" style="display: none;">
|
<div class="large-vertical-margin">
|
||||||
<h4>History</h4>
|
<div id="headersTabTip" class="tip">
|
||||||
<p>Check history of this message</p>
|
<h3>Headers</h3>
|
||||||
</div>
|
<p>Content of this tab allows to set and modify headers that will be included in the response.</p>
|
||||||
<div id="newHeaderTip" class="collapsible" style="display: none;">
|
</div>
|
||||||
<h4>Next header value</h4>
|
</div>
|
||||||
<p>Type values and press enter to add new header.</p>
|
<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>
|
||||||
<div style="clear:both;"></div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="overlay"></div>
|
<div id="overlay"></div>
|
||||||
<div id="modal-confirm" class="modal">
|
<div id="modal-confirm" class="modal">
|
||||||
@@ -194,5 +244,6 @@
|
|||||||
<script type="text/javascript" src="/js/uianimation.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/datatransfer.js"></script>
|
||||||
<script type="text/javascript" src="/js/historyloader.js"></script>
|
<script type="text/javascript" src="/js/historyloader.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/fiddle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,7 +1,3 @@
|
|||||||
//TODO: Add delete buttons for messages
|
|
||||||
//TODO: Save button deactivation after swap, post or delete
|
|
||||||
//TODO: It sends request, gets responds but doesnt run a function!!
|
|
||||||
//TODO: Warning is displayed twice
|
|
||||||
var clientUUID = '';
|
var clientUUID = '';
|
||||||
var advancedDisplayed = false;
|
var advancedDisplayed = false;
|
||||||
var json = {};
|
var json = {};
|
||||||
@@ -10,11 +6,9 @@ var lastId = 1;
|
|||||||
var htable_row = 0;
|
var htable_row = 0;
|
||||||
var host = getDomain();
|
var host = getDomain();
|
||||||
var dataModified = false;
|
var dataModified = false;
|
||||||
// TODO: Remove discard changes
|
|
||||||
const addMessageName = 'addMessage';
|
const addMessageName = 'addMessage';
|
||||||
const loadMessageName = 'changeMessage';
|
const loadMessageName = 'changeMessage';
|
||||||
const removeMessageName = 'removeMessage';
|
const removeMessageName = 'removeMessage';
|
||||||
// TODO: Add last given command
|
|
||||||
|
|
||||||
const C_UUID = 'mock-uuid';
|
const C_UUID = 'mock-uuid';
|
||||||
const C_ID = 'last-displayed-id';
|
const C_ID = 'last-displayed-id';
|
||||||
@@ -32,10 +26,9 @@ const getUpdate = function(){
|
|||||||
const dataRefresh = function(){
|
const dataRefresh = function(){
|
||||||
getData();
|
getData();
|
||||||
}
|
}
|
||||||
$('#iconPlus').click(function(){callAddMessage()});
|
$('#btn-newtile').click(function(){callAddMessage()});
|
||||||
$('#btn-addRow').click(function(){addRow()});
|
// $('#btn-addRow').click(function(){addRow()});
|
||||||
//TODO remove later save onclick init
|
// $('#btn-save').click(getUpdate);
|
||||||
$('#btn-save').click(getUpdate);
|
|
||||||
|
|
||||||
function getData(){
|
function getData(){
|
||||||
$.getJSON(host + '/api/mock/'+clientUUID, function(data) {
|
$.getJSON(host + '/api/mock/'+clientUUID, function(data) {
|
||||||
@@ -64,18 +57,16 @@ function getDomain(){
|
|||||||
function setDataModified(){
|
function setDataModified(){
|
||||||
if(dataModified) return;
|
if(dataModified) return;
|
||||||
dataModified = true;
|
dataModified = true;
|
||||||
$('#btn-save').removeClass('btn-inactive');
|
$('#btn-save').addClass('active');
|
||||||
$('#btn-save').addClass('btn-action');
|
|
||||||
$('#btn-save').click(getUpdate);
|
$('#btn-save').click(getUpdate);
|
||||||
}
|
}
|
||||||
|
|
||||||
//Adding change listener to fields
|
//Adding change listener to fields
|
||||||
$('.field').change(setModified);
|
$('.data-field').change(setModified);
|
||||||
|
|
||||||
function setDataOrigin(){
|
function setDataOrigin(){
|
||||||
dataModified = false;
|
dataModified = false;
|
||||||
$('#btn-save').addClass('btn-inactive');
|
$('#btn-save').removeClass('active');
|
||||||
$('#btn-save').removeClass('btn-action');
|
|
||||||
$('#btn-save').off();
|
$('#btn-save').off();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -104,7 +95,7 @@ function refreshData(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setCookie(){
|
function setCookie(){
|
||||||
document.cookie = C_UUID + '=' +clientUUID+';'
|
document.cookie = C_UUID + '=' +clientUUID;
|
||||||
document.cookie = C_ID + '=' + lastId;
|
document.cookie = C_ID + '=' + lastId;
|
||||||
document.cookie = C_ADV + '=' + advancedVisibility;
|
document.cookie = C_ADV + '=' + advancedVisibility;
|
||||||
}
|
}
|
||||||
@@ -216,7 +207,8 @@ function initializeMock(index){
|
|||||||
|
|
||||||
function fillStaticFields(uuid, id, mediaType, body, httpStatus){
|
function fillStaticFields(uuid, id, mediaType, body, httpStatus){
|
||||||
let link = createLink(uuid,id);
|
let link = createLink(uuid,id);
|
||||||
$('#messageLink').html('<a href="' + link + '" target="_blank">' + link + '</a>');
|
let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
|
||||||
|
$('#messageLink').html(linkHtml);
|
||||||
$('#httpStatus').val(httpStatus);
|
$('#httpStatus').val(httpStatus);
|
||||||
$('#typeSelector').val(mediaType);
|
$('#typeSelector').val(mediaType);
|
||||||
$('#bodyEditor').val(body);
|
$('#bodyEditor').val(body);
|
||||||
@@ -230,69 +222,61 @@ function createLink(uuid, id){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function fillHeaderTable(headers){
|
function fillHeaderTable(headers){
|
||||||
var innerHTML = $('#httpStatusValues').html();
|
var innerHTML = buildHeaderMapHtml(headers);
|
||||||
innerHTML += generateHeaderTable(headers);
|
refreshHeaderTable(innerHTML);
|
||||||
$('#httpStatusValues').html(innerHTML);
|
|
||||||
$('.tableField').change(function(){setDataModified()});
|
|
||||||
}
|
}
|
||||||
//TODO: Add addRow() to generate new rows and populate them with data
|
|
||||||
function generateHeaderTable(headers){
|
|
||||||
let count = 0;
|
|
||||||
let innerHTML = '';
|
|
||||||
for(var item in headers){
|
|
||||||
if( headers.hasOwnProperty(item) ) count++;
|
|
||||||
}
|
|
||||||
var keys = new Array(count);
|
|
||||||
var values = new Array(count);
|
|
||||||
let index = 0;
|
|
||||||
for(var key in Object.keys(headers)){
|
|
||||||
keys[index++]=Object.keys(headers)[key];
|
|
||||||
}
|
|
||||||
index = 0;
|
|
||||||
for(var val in headers){
|
|
||||||
values[index++]=headers[val];
|
|
||||||
}
|
|
||||||
|
|
||||||
for(let i=0; i<count; i++){
|
function refreshHeaderTable(html){
|
||||||
innerHTML+=
|
$('#headerMapTable').html(html);
|
||||||
'<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
|
$('.table-map').change(function(){setDataModified()});
|
||||||
'<td>' +
|
$('.btn-hashmap').click(function(){
|
||||||
'<input type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
|
$(this).closest('tr').remove();
|
||||||
'<td>' +
|
setDataModified();
|
||||||
'<input type="text" name="headerValue" placeholder="value" class="tableField" value="' + values[i] + '"/></td>' +
|
})
|
||||||
'<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">×</td>' +
|
}
|
||||||
'</tr>';
|
|
||||||
htable_row++;
|
function buildHeaderMapHtml(headers){
|
||||||
|
var innerHTML = '';
|
||||||
|
for(var key in headers){
|
||||||
|
innerHTML += buildRowHtml(key, headers[key]);
|
||||||
}
|
}
|
||||||
return innerHTML;
|
return innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeRow(row){
|
function addRow(key, value){
|
||||||
$('#hrow' + row).remove();
|
var headerMap = $('#headerMapTable');
|
||||||
setDataModified();
|
var headersMapHtml = headerMap.html();
|
||||||
|
headersMapHtml += buildRowHtml(key, value);
|
||||||
|
refreshHeaderTable(headersMapHtml);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addRow(){
|
const newRowInput = function(){
|
||||||
var table = $('#httpStatusValues');
|
const hName = $('#headerKeyInput');
|
||||||
var hkey = $('#headerKeyInput');
|
const hValue = $('#headerValueInput');
|
||||||
var hval = $('#headerValueInput');
|
if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){
|
||||||
if(hkey.val() == 'key' || hkey.val() == '' || hval.val() == 'value' || hval.val() == '') return;
|
addRow(hName.val(), hValue.val());
|
||||||
var innerHtml =
|
hName.val(null);
|
||||||
'<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
|
hValue.val(null);
|
||||||
'<td>' +
|
setDataModified();
|
||||||
'<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + hkey.val() +
|
}
|
||||||
'"/></td>' +
|
|
||||||
'<td>' +
|
|
||||||
'<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + hval.val() + '"/></td>' +
|
|
||||||
'<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
|
|
||||||
'</tr>';
|
|
||||||
htable_row++;
|
|
||||||
table.append(innerHtml);
|
|
||||||
hkey.val('');
|
|
||||||
hval.val('');
|
|
||||||
setDataModified();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$('#btn-newRow').click(newRowInput);
|
||||||
|
|
||||||
|
function checkIfInputValid(input){
|
||||||
|
return !(input == '' || input == null || input == undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildRowHtml(key, value){
|
||||||
|
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(){
|
function fillMessageList(){
|
||||||
$("#listItems").html('');
|
$("#listItems").html('');
|
||||||
var innerHTML = '';
|
var innerHTML = '';
|
||||||
@@ -300,10 +284,21 @@ function fillMessageList(){
|
|||||||
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
|
innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
|
||||||
}
|
}
|
||||||
$("#listItems").append(innerHTML);
|
$("#listItems").append(innerHTML);
|
||||||
|
$('.tile').click(function(e) {
|
||||||
|
var element = $(this);
|
||||||
|
var button = element.find('.btn-tile').children().get(0);
|
||||||
|
console.log(button == e.target);
|
||||||
|
if(!(button == e.target)){
|
||||||
|
console.log("Button is not a target. Loading message.")
|
||||||
|
callLoadMessage(parseInt($(this).attr('tileid')));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$('.btn-tile').click(function(){
|
||||||
|
// console.log(this);
|
||||||
|
callRemoveMessage($(this).closest('.tile').attr('tileId'));
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//TODO: Implement methods where its possible
|
|
||||||
function findJsonById(id){
|
function findJsonById(id){
|
||||||
return json[findJsonIndexById(id)];
|
return json[findJsonIndexById(id)];
|
||||||
}
|
}
|
||||||
@@ -324,10 +319,15 @@ function callLoadMessage(id){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function loadMessage(id){
|
function loadMessage(id){
|
||||||
|
if(id == null || id == undefined){
|
||||||
|
console.log('id is null');
|
||||||
|
return;
|
||||||
|
}
|
||||||
lastId = id;
|
lastId = id;
|
||||||
setCookie();
|
setCookie();
|
||||||
setDataOrigin();
|
setDataOrigin();
|
||||||
for(let i=0; i<json.length; i++){
|
for(let i=0; i<json.length; i++){
|
||||||
|
console.log('id == ' + id + ' mockedId == ' + json[i].mockedResponseId);
|
||||||
if(id == json[i].mockedResponseId){
|
if(id == json[i].mockedResponseId){
|
||||||
jsonIndex = i;
|
jsonIndex = i;
|
||||||
console.log("Message found");
|
console.log("Message found");
|
||||||
@@ -341,25 +341,33 @@ function loadMessage(id){
|
|||||||
console.log("Message not found");
|
console.log("Message not found");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function selectMessage(id){
|
function selectMessage(id){
|
||||||
|
const tiles = $('.tile');
|
||||||
console.log("Selecting message...");
|
console.log("Selecting message...");
|
||||||
$(".menuItemSelected").on("click");
|
tiles.removeClass("active");
|
||||||
$(".menuItemSelected").addClass("menuItem");
|
|
||||||
$(".menuItemSelected").removeClass("menuItemSelected");
|
|
||||||
console.log("Selected message deselected");
|
console.log("Selected message deselected");
|
||||||
let itemId = '#item_'+id;
|
$('.tile[tileid="'+id+'"]').addClass("active");
|
||||||
$(itemId).off("click");
|
|
||||||
$(itemId).addClass("menuItemSelected");
|
|
||||||
$(itemId).removeClass("menuItem");
|
|
||||||
console.log("Selected message selected");
|
console.log("Selected message selected");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function generateMessageTileHtml(id, httpStatus, mediaType){
|
function generateMessageTileHtml(id, httpStatus, mediaType){
|
||||||
var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' +
|
var innerHTML = '' +
|
||||||
'<table><tr><td>Id: '+ id +'</td></tr>' +
|
'<div tileid="' + id + '" class="tile">' +
|
||||||
'<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
|
'<div class="content">' +
|
||||||
'</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">×</div>' +
|
'<div class="display-space-between">' +
|
||||||
'<div style="clear: both;"></div>';
|
'<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;
|
return innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -399,7 +407,7 @@ function generateJson(){
|
|||||||
|
|
||||||
|
|
||||||
function convertTableToJson(){
|
function convertTableToJson(){
|
||||||
var rows = $('.httpStatusValue');
|
const rows = $('#headerMapTable').children();
|
||||||
console.log("Rows: "+rows.length);
|
console.log("Rows: "+rows.length);
|
||||||
var obj = {};
|
var obj = {};
|
||||||
var key;
|
var key;
|
||||||
|
|||||||
5
target/classes/static/js/fiddle.js
Normal file
5
target/classes/static/js/fiddle.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
const deleteParent = function(){
|
||||||
|
$(this).closest('div.tile').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#test1').click(deleteParent);
|
||||||
@@ -56,7 +56,8 @@ function historyToHtml(){
|
|||||||
var innerHTML = '';
|
var innerHTML = '';
|
||||||
var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
|
var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
|
||||||
for(let i=0; i<iterations; i++){
|
for(let i=0; i<iterations; i++){
|
||||||
innerHTML += '<tr>' +
|
let style = i%2==0 ? ' class="even"' : '';
|
||||||
|
innerHTML += '<tr' + style + '>' +
|
||||||
'<td>' + historyJson[i].dateTimeStamp + '</td>' +
|
'<td>' + historyJson[i].dateTimeStamp + '</td>' +
|
||||||
'<td>' + historyJson[i].interfaceName + '</td>' +
|
'<td>' + historyJson[i].interfaceName + '</td>' +
|
||||||
'</tr>';
|
'</tr>';
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
|
|||||||
const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
|
const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
|
||||||
const allModals = $('.modal');
|
const allModals = $('.modal');
|
||||||
const btnModalClose = $('.modal button');
|
const btnModalClose = $('.modal button');
|
||||||
//TODO: Implement in datatransfer
|
|
||||||
const closeModals = function() {
|
const closeModals = function() {
|
||||||
hideModal(allModals);
|
hideModal(allModals);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
|
|||||||
var focusedField = false;
|
var focusedField = false;
|
||||||
function changeAdvancedVisibility(){
|
function changeAdvancedVisibility(){
|
||||||
if(advancedVisibility){
|
if(advancedVisibility){
|
||||||
selectMenu.css('display', 'none');
|
selectMenu.removeClass('active');
|
||||||
advancedTab.css('display', 'none');
|
advancedTab.removeClass('active');
|
||||||
advancedID.css('display', 'none');
|
advancedID.removeClass('active');
|
||||||
basicID.css('display', 'block')
|
basicID.addClass('active');
|
||||||
advancedVisibility = false;
|
advancedVisibility = false;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
selectMenu.css('display', 'block');
|
selectMenu.addClass('active');
|
||||||
advancedTab.css('display', 'block');
|
advancedTab.addClass('active');
|
||||||
advancedID.css('display', 'block');
|
advancedID.addClass('active');
|
||||||
basicID.css('display', 'none');
|
basicID.removeClass('active');
|
||||||
advancedVisibility = true;
|
advancedVisibility = true;
|
||||||
}
|
}
|
||||||
setCookie();
|
setCookie();
|
||||||
}
|
}
|
||||||
|
|
||||||
function createMessageTab() {
|
|
||||||
var items = document.getElementById("listItems");
|
|
||||||
items.innerHTML += '<div class="menuItem">Item</div>';
|
|
||||||
}
|
|
||||||
|
|
||||||
$("#optional").click(changeAdvancedVisibility);
|
$("#optional").click(changeAdvancedVisibility);
|
||||||
$(".menuFactory").click(createMessageTab);
|
|
||||||
$('#historyTab').click(showHistory);
|
$('#historyTab').click(showHistory);
|
||||||
|
|
||||||
|
const tabitem = $('.tabitem');
|
||||||
function showHistory(){
|
function showHistory(){
|
||||||
$('#headers').css('display', 'none');
|
$('#headersTab').click(showHeaders);
|
||||||
$('.advancedMenuTabSelected').addClass('advancedMenuTab');
|
tabitem.removeClass('active');
|
||||||
$('.advancedMenuTabSelected').click(showHeaders);
|
$('.tabcontent').removeClass('active');
|
||||||
$('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
|
$('#history').addClass('active');
|
||||||
$('#history').css('display', 'block');
|
$('#historyTab').addClass('active');
|
||||||
$('#historyTab').addClass('advancedMenuTabSelected');
|
|
||||||
$('#historyTab').removeClass('advancedMenuTab');
|
|
||||||
$('#historyTab').off('click');
|
$('#historyTab').off('click');
|
||||||
}
|
}
|
||||||
|
|
||||||
function showHeaders(){
|
function showHeaders(){
|
||||||
$('#history').css('display', 'none');
|
$('#historyTab').click(showHistory);
|
||||||
$('.advancedMenuTabSelected').addClass('advancedMenuTab');
|
tabitem.removeClass('active');
|
||||||
$('.advancedMenuTabSelected').click(showHistory);
|
$('.tabcontent').removeClass('active');
|
||||||
$('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
|
$('#headers').addClass('active');
|
||||||
$('#headers').css('display', 'block');
|
$('#headersTab').addClass('active');
|
||||||
$('#headersTab').addClass('advancedMenuTabSelected');
|
|
||||||
$('#headersTab').removeClass('advancedMenuTab');
|
|
||||||
$('#headersTab').off('click');
|
$('#headersTab').off('click');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -65,13 +56,13 @@ function focusOutTip(element){
|
|||||||
|
|
||||||
function hidTip(element){
|
function hidTip(element){
|
||||||
if(focusedField) return;
|
if(focusedField) return;
|
||||||
$('#'+element).fadeOut(100);
|
$('#'+element).removeClass('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
function showTip(element){
|
function showTip(element){
|
||||||
if(focusedField) return;
|
if(focusedField) return;
|
||||||
$('.collapsible').fadeOut(0);
|
$('.tip').removeClass('active');
|
||||||
$('#'+element).fadeIn(100);
|
$('#'+element).addClass('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
$('#messageLink').mouseover(function(){showTip('messageLinkTip')});
|
$('#messageLink').mouseover(function(){showTip('messageLinkTip')});
|
||||||
|
|||||||
Reference in New Issue
Block a user