Merge branch 'modzeleg' into developer

src/main/resources/static/css/commons/font/fontello.svg

@@ -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="&#xe801;" 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="&#xe802;" 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>

src/main/resources/static/css/commons/fontello.css

@@ -0,0 +1,59 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('font/fontello.eot?49304387');
+    src: url('font/fontello.eot?49304387#iefix') format('embedded-opentype'),
+         url('font/fontello.woff2?49304387') format('woff2'),
+         url('font/fontello.woff?49304387') format('woff'),
+         url('font/fontello.ttf?49304387') format('truetype'),
+         url('font/fontello.svg?49304387#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'fontello';
+      src: url('../font/fontello.svg?49304387#fontello') format('svg');
+    }
+  }
+  */
+   
+   [class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: never;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+   
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    margin-left: .2em;
+   
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+   
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  }
+   
+  .icon-plus:before { content: '\e801'; } /* '' */
+  .icon-cancel:before { content: '\e802'; } /* '' */

src/main/resources/static/css/commons/r11form.css

@@ -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;
+}
+

src/main/resources/static/css/form.css

@@ -0,0 +1,7 @@
+.r11-form {
+    display: block;
+}
+
+.r11-form input, textarea {
+    border: 
+}

src/main/resources/static/html/mock.html

@@ -3,33 +3,38 @@
 <head>
     <title>R11 MockedServices</title>
     <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/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>
 </head>
 <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 id="basicItemData" class="articleHead">Your message</div>
-                <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 id="msgBody">
-                    <div id="messageFields">
-                        <div class="fieldFloater">
                 <div>
+                    <h1>MockedServices <span class="version-span">v1.0.0</span></h1>
+                </div>
+                <div>
+                    <!-- h2 -->
+                    <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
+                    <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
+                    <!-- 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>
-                                <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">
                                     <option value="200">
                                     <option value="300">
@@ -39,9 +44,10 @@
                                     <option value="500">
                                 </datalist>
                             </div>
-                            <div id="typeSelection">
+                            <!-- content type -->
+                            <div class="max-width  small-vertical-margin">
                                 <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">
                                     <option value="application/xml">
                                     <option value="application/json">
@@ -49,127 +55,171 @@
                                 </datalist>
                             </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><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
-                            <div class="buttonSpacer"></div>
-                            <div style="clear: both;"></div>
                     </div>
-                        <div style="clear: both;"></div>
+                    <!-- body -->
+                    <div class="small-vertical-margin">
+                        <label for="bodyEditor">Body</label>
+                        <textarea id="bodyEditor" class="data-field bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
                     </div>
-
+                    <!-- show/hide -->
-                    <div id="bodyEdition">
+                    <div id="optional" class="clickable-text highlight">
-                        <label for="bodyEditor">Body:</label>
+                        <h3>&gt; show/hide advanced settings</h3>
-                        <textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
                     </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 id="optional">&gt; show/hide advanced settings</div>
+                        <!-- container -->
-                <div id="advanced" style="display: none;">
+                        <div class="medium-vertical-margin">
-                    <div id="advancedMenu">
+                            <!-- headers -->
-                        <div id="headersTab" class="advancedMenuTabSelected">Headers</div>
+                            <div id="headers" class="medium-vertical-margin tabcontent active">
-                        <div id="historyTab" class="advancedMenuTab">History</div>
+                                <table class="table-map">
-                    </div>
-                    <div id="headers">
-                        <table id="headerTable">
                                     <thead>
                                         <tr>
-                                    <td>Header</td>
+                                            <th>Name</th>
-                                    <td>Value</td>
+                                            <th>Value</th>
-                                    <td></td>
+                                            <th></th>
                                         </tr>
                                     </thead>
-                            <tbody id="httpStatusValues">
+                                    <tbody id="headerMapTable">
-                            </tbody>
-                            <tfoot>
                                         <tr>
-                                    <td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
+                                            <td><input class="key" value="basic value"></td>
-                                    <td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
+                                            <td><input value="basic value"></td>
-                                    <td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
+                                            <td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>
+                                        </tr>
+                                    </tbody>
+                                    <tr>
+                                        <td><input id="headerKeyInput" placeholder="name"></td>
+                                        <td><input id="headerValueInput" placeholder="value"></td>
+                                        <td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
                                     </tr>
-                            </tfoot>
                                 </table>
                             </div>
-                    <div id="history" style="display:none;">
+                            <!-- history -->
-                        <div id="historyFunction">
+                            <div id="history" class="medium-vertical-margin tabcontent">
-                            <div>
+                                <div class="block-display max-width">
-                                <label for="historyFrom">From</label>
+                                    <div class="display-space-between max-width small-vertical-margin">
-                                <input type="date" name="dateFrom" id="historyFrom"/>
+                                        <div class="three-fourth-width display-space-evenly">
-                                <input type="time" name="timeFrom" id="historyTimeFrom"/>
+                                            <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>
+                                            <div class="block-display half-width with-padding">
-                                <label for="historyTo">To</label>
+                                                <label for="historyTo" class="block-label">To</label>
-                                <input type="date" name="dateTo" id="historyTo"/>
+                                                <input id="historyTo" type="date" class="bordered-field max-width with-padding">
-                                <input type="time" name="dateTo" id="historyTimeTo"/>
+                                                <input id="historyTimeTo" type="time" class="small-vertical-margin bordered-field max-width with-padding">
                                             </div>
-                            <button id="btn-searchHistory">Search</button>
                                         </div>
-                        <div style="clear:both;"></div>
+                                        <button id="btn-searchHistory" class="quater-width action-button active small-margins">Search</button>
-                        <div id="historyDisplay">
+                                    </div>
-                            <table id="historyTable" class="simpleTable">
+                                
+                                    <div class="max-width centered-content large-vertical-margin">
+                                        <table id="historyTable" class="table-default">
                                             <thead>
-                                    <tr class="head">
+                                                <tr class="bottom-border">
                                                     <th>Timestamp</th>
-                                        <th>Status</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 id="selectMenu">
-            <div id="selectMenuContent" style="display: none;">
-                <div id="selectMenuHead" class="articleHead">List</div>
-                <div id="listItems"></div>
-                <div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
                         </div>
                     </div>
-        <div id="tooltip" class="fixed tooltip">
-            <div id="mockIntroTip">
-                <h2>What's mock service?</h2>
-                <p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
-                <p>Hover over an item to see description!</p>
-                <br>
-                <h2>Help:</h2>
-            </div>
-
-            <div id="messageLinkTip" class="collapsible" style="display: none;">
-                <!--style="display: none;"-->
-                <h4>The link</h4>
-                <p>It's url where you need send your request</p>
-            </div>
-            <div id="httpStatusTip" class="collapsible" style="display: none;">
-                <h4>Http status</h4>
-                <p>Set http status for server response. 200 OK is default.</p>
-            </div>
-            <div id="typeSelectorTip" class="collapsible" style="display: none;">
-                <h4>Content type</h4>
-                <p>Select content type of body. Set plain text if data has no format.</p>
-            </div>
-            <div id="bodyEditorTip" class="collapsible" style="display: none;">
-                <h4>Body</h4>
-                <p>Text placed in this field will be displayed as response body</p>
-            </div>
-            <div id="headersTabTip" class="collapsible" style="display: none;">
-                <h4>Headers</h4>
-                <p>Set headers for your messages.</p>
-            </div>
-            <div id="historyTabTip" class="collapsible" style="display: none;">
-                <h4>History</h4>
-                <p>Check history of this message</p>
-            </div>
-            <div id="newHeaderTip" class="collapsible" style="display: none;">
-                <h4>Next header value</h4>
-                <p>Type values and press enter to add new header.</p>
                 </div>
             </div>
-        <div style="clear:both;"></div>
+            <div id="selectMenuContent" class="tool-extention">
-
+                <!-- header -->
-
+                <div>
+                    <h2>Message List</h2>
+                </div>
+                <!-- tile list -->
+                <div id="listItems">
+                    <!-- <div class="tile">
+                        <div class="content">
+                            <div class="display-space-between">
+                                <div class="centered-vertically">
+                                    <p>Id: 2</p>
+                                    <p>Status: 200</p>
+                                </div>
+                                <div>
+                                    <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="max-width centered-content small-vertical-margin">
+                    <button id="btn-newtile" class="modification-button btn-addtile"><i class="icon-plus"></i></button>
+                </div>
+            </div>
+        </div>
+        <div class="tooltip-window lite">
+            <div>
+                <h2>What's this?</h2>
+                <p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
+                <h2>Help</h2>
+                <p>When cursor hovers over an item. It's description is displayed below.</p>
+                <div class="large-vertical-margin">
+                    <div id="messageLinkTip" class="tip">
+                        <h3>Link</h3>
+                        <p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="httpStatusTip" class="tip">
+                        <h3>Http Status</h3>
+                        <p>Value of the field is corresponding to status value that server will return.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="typeSelectorTip" class="tip">
+                        <h3>Content Type</h3>
+                        <p>Value of the field describes content of body payload contained in the response. For example if content is in xml format the value should be "application/xml" or "text/xml"</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="bodyEditorTip" class="tip">
+                        <h3>Body</h3>
+                        <p>Value of the field describes content of response body. It's basicly the message we want server to return. If it's simple response like 200 OK or 404 not found then field might be left empty.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="headersTabTip" class="tip">
+                        <h3>Headers</h3>
+                        <p>Content of this tab allows to set and modify headers that will be included in the response.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="historyTabTip" class="tip">
+                        <h3>History</h3>
+                        <p>Content of this tab displays the history of requests or responses received/sent to the endpoint</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="newHeaderTip" class="tip">
+                        <h3>New header</h3>
+                        <p>Insert value in the field and press the plus icon to add a new header to the message.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <div id="overlay"></div>
     <div id="modal-confirm" class="modal">
@@ -194,5 +244,6 @@
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
     <script type="text/javascript" src="/js/historyloader.js"></script>
+    <script type="text/javascript" src="/js/fiddle.js"></script>
 </body>
 </html>

src/main/resources/static/js/datatransfer.js

@@ -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 advancedDisplayed = false;
 var json = {};
@@ -10,11 +6,9 @@ var lastId = 1;
 var htable_row = 0;
 var host = getDomain();
 var dataModified = false;
-// TODO: Remove discard changes
 const addMessageName = 'addMessage';
 const loadMessageName = 'changeMessage';
 const removeMessageName = 'removeMessage';
-// TODO: Add last given command
 
 const C_UUID = 'mock-uuid';
 const C_ID = 'last-displayed-id';
@@ -32,10 +26,9 @@ const getUpdate = function(){
 const dataRefresh = function(){
     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(){
     $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -64,18 +57,16 @@ function getDomain(){
 function setDataModified(){
     if(dataModified) return;
     dataModified = true;
-    $('#btn-save').removeClass('btn-inactive');
+    $('#btn-save').addClass('active');
-    $('#btn-save').addClass('btn-action');
     $('#btn-save').click(getUpdate);
 }
 
 //Adding change listener to fields
-$('.field').change(setModified);
+$('.data-field').change(setModified);
 
 function setDataOrigin(){
     dataModified = false;
-    $('#btn-save').addClass('btn-inactive');
+    $('#btn-save').removeClass('active');
-    $('#btn-save').removeClass('btn-action');
     $('#btn-save').off();
 }
 
@@ -104,7 +95,7 @@ function refreshData(){
 }
 
 function setCookie(){
-    document.cookie = C_UUID + '=' +clientUUID+';'
+    document.cookie = C_UUID + '=' +clientUUID;
     document.cookie = C_ID + '=' + lastId;
     document.cookie = C_ADV + '=' + advancedVisibility;
 }
@@ -216,7 +207,8 @@ function initializeMock(index){
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     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);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
@@ -230,68 +222,60 @@ function createLink(uuid, id){
 }
 
 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 + ')">&times;</td>' +
+}
-            '</tr>';
+
-        htable_row++;
+function buildHeaderMapHtml(headers){
+    var innerHTML = '';
+    for(var key in headers){
+        innerHTML += buildRowHtml(key, headers[key]);
     }
     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>' +
-        '<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(){
     $("#listItems").html('');
@@ -300,10 +284,21 @@ function fillMessageList(){
         innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
     }
     $("#listItems").append(innerHTML);
+    $('.tile').click(function(e) {
+        var element = $(this);
+        var button = element.find('.btn-tile').children().get(0);
+        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){
     return json[findJsonIndexById(id)];
 }
@@ -324,10 +319,15 @@ function callLoadMessage(id){
 }
 
 function loadMessage(id){
+    if(id == null || id == undefined){
+        console.log('id is null');
+        return;
+    }
     lastId = id;
     setCookie();
     setDataOrigin();
     for(let i=0; i<json.length; i++){
+        console.log('id == ' + id + ' mockedId == ' + json[i].mockedResponseId);
         if(id == json[i].mockedResponseId){
             jsonIndex = i;
             console.log("Message found");
@@ -341,25 +341,33 @@ function loadMessage(id){
     console.log("Message not found");
 }
 
+
 function selectMessage(id){
+    const tiles = $('.tile');
     console.log("Selecting message...");
-    $(".menuItemSelected").on("click");
+    tiles.removeClass("active");
-    $(".menuItemSelected").addClass("menuItem");
-    $(".menuItemSelected").removeClass("menuItemSelected");
     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");
 }
 
+
+
 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 + ')">&times;</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;
 }
 
@@ -399,7 +407,7 @@ function generateJson(){
 
 
 function convertTableToJson(){
-    var rows = $('.httpStatusValue');
+    const rows = $('#headerMapTable').children();
     console.log("Rows: "+rows.length);
     var obj = {};
     var key;

src/main/resources/static/js/fiddle.js

@@ -0,0 +1,5 @@
+const deleteParent = function(){
+    $(this).closest('div.tile').remove();
+}
+
+$('#test1').click(deleteParent);

src/main/resources/static/js/historyloader.js

@@ -56,7 +56,8 @@ function historyToHtml(){
     var innerHTML = '';
     var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
     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].interfaceName + '</td>' +
         '</tr>';

src/main/resources/static/js/modal.js

@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
 const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
 const allModals = $('.modal');
 const btnModalClose = $('.modal button');
-//TODO: Implement in datatransfer
 const closeModals = function() {
     hideModal(allModals);
 }

src/main/resources/static/js/uianimation.js

@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
 var focusedField = false;
 function changeAdvancedVisibility(){
     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;
     }
     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;
     }
     setCookie();
 }
 
-function createMessageTab() {
-    var items = document.getElementById("listItems");
-    items.innerHTML += '<div class="menuItem">Item</div>';
-}
-
 $("#optional").click(changeAdvancedVisibility);
-$(".menuFactory").click(createMessageTab);
 $('#historyTab').click(showHistory);
 
+const tabitem = $('.tabitem');
 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');
 }
 
 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');
 }
 
@@ -65,13 +56,13 @@ function focusOutTip(element){
 
 function hidTip(element){
     if(focusedField) return;
-    $('#'+element).fadeOut(100);
+    $('#'+element).removeClass('active');
 }
 
 function showTip(element){
     if(focusedField) return;
-    $('.collapsible').fadeOut(0);
+    $('.tip').removeClass('active');
-    $('#'+element).fadeIn(100);
+    $('#'+element).addClass('active');
 }
 
 $('#messageLink').mouseover(function(){showTip('messageLinkTip')});

target/classes/static/css/commons/font/fontello.svg

@@ -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="&#xe801;" 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="&#xe802;" 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>

target/classes/static/css/commons/fontello.css

@@ -0,0 +1,59 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('font/fontello.eot?49304387');
+    src: url('font/fontello.eot?49304387#iefix') format('embedded-opentype'),
+         url('font/fontello.woff2?49304387') format('woff2'),
+         url('font/fontello.woff?49304387') format('woff'),
+         url('font/fontello.ttf?49304387') format('truetype'),
+         url('font/fontello.svg?49304387#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'fontello';
+      src: url('../font/fontello.svg?49304387#fontello') format('svg');
+    }
+  }
+  */
+   
+   [class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: never;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+   
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    margin-left: .2em;
+   
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+   
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  }
+   
+  .icon-plus:before { content: '\e801'; } /* '' */
+  .icon-cancel:before { content: '\e802'; } /* '' */

target/classes/static/css/commons/r11form.css

@@ -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;
+}
+

target/classes/static/css/form.css

@@ -0,0 +1,7 @@
+.r11-form {
+    display: block;
+}
+
+.r11-form input, textarea {
+    border: 
+}

target/classes/static/html/mock.html

@@ -3,33 +3,38 @@
 <head>
     <title>R11 MockedServices</title>
     <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/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>
 </head>
 <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 id="basicItemData" class="articleHead">Your message</div>
-                <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 id="msgBody">
-                    <div id="messageFields">
-                        <div class="fieldFloater">
                 <div>
+                    <h1>MockedServices <span class="version-span">v1.0.0</span></h1>
+                </div>
+                <div>
+                    <!-- h2 -->
+                    <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
+                    <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
+                    <!-- 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>
-                                <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">
                                     <option value="200">
                                     <option value="300">
@@ -39,9 +44,10 @@
                                     <option value="500">
                                 </datalist>
                             </div>
-                            <div id="typeSelection">
+                            <!-- content type -->
+                            <div class="max-width  small-vertical-margin">
                                 <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">
                                     <option value="application/xml">
                                     <option value="application/json">
@@ -49,127 +55,171 @@
                                 </datalist>
                             </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><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
-                            <div class="buttonSpacer"></div>
-                            <div style="clear: both;"></div>
                     </div>
-                        <div style="clear: both;"></div>
+                    <!-- body -->
+                    <div class="small-vertical-margin">
+                        <label for="bodyEditor">Body</label>
+                        <textarea id="bodyEditor" class="data-field bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
                     </div>
-
+                    <!-- show/hide -->
-                    <div id="bodyEdition">
+                    <div id="optional" class="clickable-text highlight">
-                        <label for="bodyEditor">Body:</label>
+                        <h3>&gt; show/hide advanced settings</h3>
-                        <textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
                     </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 id="optional">&gt; show/hide advanced settings</div>
+                        <!-- container -->
-                <div id="advanced" style="display: none;">
+                        <div class="medium-vertical-margin">
-                    <div id="advancedMenu">
+                            <!-- headers -->
-                        <div id="headersTab" class="advancedMenuTabSelected">Headers</div>
+                            <div id="headers" class="medium-vertical-margin tabcontent active">
-                        <div id="historyTab" class="advancedMenuTab">History</div>
+                                <table class="table-map">
-                    </div>
-                    <div id="headers">
-                        <table id="headerTable">
                                     <thead>
                                         <tr>
-                                    <td>Header</td>
+                                            <th>Name</th>
-                                    <td>Value</td>
+                                            <th>Value</th>
-                                    <td></td>
+                                            <th></th>
                                         </tr>
                                     </thead>
-                            <tbody id="httpStatusValues">
+                                    <tbody id="headerMapTable">
-                            </tbody>
-                            <tfoot>
                                         <tr>
-                                    <td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
+                                            <td><input class="key" value="basic value"></td>
-                                    <td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
+                                            <td><input value="basic value"></td>
-                                    <td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
+                                            <td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>
+                                        </tr>
+                                    </tbody>
+                                    <tr>
+                                        <td><input id="headerKeyInput" placeholder="name"></td>
+                                        <td><input id="headerValueInput" placeholder="value"></td>
+                                        <td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
                                     </tr>
-                            </tfoot>
                                 </table>
                             </div>
-                    <div id="history" style="display:none;">
+                            <!-- history -->
-                        <div id="historyFunction">
+                            <div id="history" class="medium-vertical-margin tabcontent">
-                            <div>
+                                <div class="block-display max-width">
-                                <label for="historyFrom">From</label>
+                                    <div class="display-space-between max-width small-vertical-margin">
-                                <input type="date" name="dateFrom" id="historyFrom"/>
+                                        <div class="three-fourth-width display-space-evenly">
-                                <input type="time" name="timeFrom" id="historyTimeFrom"/>
+                                            <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>
+                                            <div class="block-display half-width with-padding">
-                                <label for="historyTo">To</label>
+                                                <label for="historyTo" class="block-label">To</label>
-                                <input type="date" name="dateTo" id="historyTo"/>
+                                                <input id="historyTo" type="date" class="bordered-field max-width with-padding">
-                                <input type="time" name="dateTo" id="historyTimeTo"/>
+                                                <input id="historyTimeTo" type="time" class="small-vertical-margin bordered-field max-width with-padding">
                                             </div>
-                            <button id="btn-searchHistory">Search</button>
                                         </div>
-                        <div style="clear:both;"></div>
+                                        <button id="btn-searchHistory" class="quater-width action-button active small-margins">Search</button>
-                        <div id="historyDisplay">
+                                    </div>
-                            <table id="historyTable" class="simpleTable">
+                                
+                                    <div class="max-width centered-content large-vertical-margin">
+                                        <table id="historyTable" class="table-default">
                                             <thead>
-                                    <tr class="head">
+                                                <tr class="bottom-border">
                                                     <th>Timestamp</th>
-                                        <th>Status</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 id="selectMenu">
-            <div id="selectMenuContent" style="display: none;">
-                <div id="selectMenuHead" class="articleHead">List</div>
-                <div id="listItems"></div>
-                <div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
                         </div>
                     </div>
-        <div id="tooltip" class="fixed tooltip">
-            <div id="mockIntroTip">
-                <h2>What's mock service?</h2>
-                <p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
-                <p>Hover over an item to see description!</p>
-                <br>
-                <h2>Help:</h2>
-            </div>
-
-            <div id="messageLinkTip" class="collapsible" style="display: none;">
-                <!--style="display: none;"-->
-                <h4>The link</h4>
-                <p>It's url where you need send your request</p>
-            </div>
-            <div id="httpStatusTip" class="collapsible" style="display: none;">
-                <h4>Http status</h4>
-                <p>Set http status for server response. 200 OK is default.</p>
-            </div>
-            <div id="typeSelectorTip" class="collapsible" style="display: none;">
-                <h4>Content type</h4>
-                <p>Select content type of body. Set plain text if data has no format.</p>
-            </div>
-            <div id="bodyEditorTip" class="collapsible" style="display: none;">
-                <h4>Body</h4>
-                <p>Text placed in this field will be displayed as response body</p>
-            </div>
-            <div id="headersTabTip" class="collapsible" style="display: none;">
-                <h4>Headers</h4>
-                <p>Set headers for your messages.</p>
-            </div>
-            <div id="historyTabTip" class="collapsible" style="display: none;">
-                <h4>History</h4>
-                <p>Check history of this message</p>
-            </div>
-            <div id="newHeaderTip" class="collapsible" style="display: none;">
-                <h4>Next header value</h4>
-                <p>Type values and press enter to add new header.</p>
                 </div>
             </div>
-        <div style="clear:both;"></div>
+            <div id="selectMenuContent" class="tool-extention">
-
+                <!-- header -->
-
+                <div>
+                    <h2>Message List</h2>
+                </div>
+                <!-- tile list -->
+                <div id="listItems">
+                    <!-- <div class="tile">
+                        <div class="content">
+                            <div class="display-space-between">
+                                <div class="centered-vertically">
+                                    <p>Id: 2</p>
+                                    <p>Status: 200</p>
+                                </div>
+                                <div>
+                                    <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="max-width centered-content small-vertical-margin">
+                    <button id="btn-newtile" class="modification-button btn-addtile"><i class="icon-plus"></i></button>
+                </div>
+            </div>
+        </div>
+        <div class="tooltip-window lite">
+            <div>
+                <h2>What's this?</h2>
+                <p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
+                <h2>Help</h2>
+                <p>When cursor hovers over an item. It's description is displayed below.</p>
+                <div class="large-vertical-margin">
+                    <div id="messageLinkTip" class="tip">
+                        <h3>Link</h3>
+                        <p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="httpStatusTip" class="tip">
+                        <h3>Http Status</h3>
+                        <p>Value of the field is corresponding to status value that server will return.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="typeSelectorTip" class="tip">
+                        <h3>Content Type</h3>
+                        <p>Value of the field describes content of body payload contained in the response. For example if content is in xml format the value should be "application/xml" or "text/xml"</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="bodyEditorTip" class="tip">
+                        <h3>Body</h3>
+                        <p>Value of the field describes content of response body. It's basicly the message we want server to return. If it's simple response like 200 OK or 404 not found then field might be left empty.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="headersTabTip" class="tip">
+                        <h3>Headers</h3>
+                        <p>Content of this tab allows to set and modify headers that will be included in the response.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="historyTabTip" class="tip">
+                        <h3>History</h3>
+                        <p>Content of this tab displays the history of requests or responses received/sent to the endpoint</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="newHeaderTip" class="tip">
+                        <h3>New header</h3>
+                        <p>Insert value in the field and press the plus icon to add a new header to the message.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <div id="overlay"></div>
     <div id="modal-confirm" class="modal">
@@ -194,5 +244,6 @@
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
     <script type="text/javascript" src="/js/historyloader.js"></script>
+    <script type="text/javascript" src="/js/fiddle.js"></script>
 </body>
 </html>

target/classes/static/js/datatransfer.js

@@ -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 advancedDisplayed = false;
 var json = {};
@@ -10,11 +6,9 @@ var lastId = 1;
 var htable_row = 0;
 var host = getDomain();
 var dataModified = false;
-// TODO: Remove discard changes
 const addMessageName = 'addMessage';
 const loadMessageName = 'changeMessage';
 const removeMessageName = 'removeMessage';
-// TODO: Add last given command
 
 const C_UUID = 'mock-uuid';
 const C_ID = 'last-displayed-id';
@@ -32,10 +26,9 @@ const getUpdate = function(){
 const dataRefresh = function(){
     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(){
     $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -64,18 +57,16 @@ function getDomain(){
 function setDataModified(){
     if(dataModified) return;
     dataModified = true;
-    $('#btn-save').removeClass('btn-inactive');
+    $('#btn-save').addClass('active');
-    $('#btn-save').addClass('btn-action');
     $('#btn-save').click(getUpdate);
 }
 
 //Adding change listener to fields
-$('.field').change(setModified);
+$('.data-field').change(setModified);
 
 function setDataOrigin(){
     dataModified = false;
-    $('#btn-save').addClass('btn-inactive');
+    $('#btn-save').removeClass('active');
-    $('#btn-save').removeClass('btn-action');
     $('#btn-save').off();
 }
 
@@ -104,7 +95,7 @@ function refreshData(){
 }
 
 function setCookie(){
-    document.cookie = C_UUID + '=' +clientUUID+';'
+    document.cookie = C_UUID + '=' +clientUUID;
     document.cookie = C_ID + '=' + lastId;
     document.cookie = C_ADV + '=' + advancedVisibility;
 }
@@ -216,7 +207,8 @@ function initializeMock(index){
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     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);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
@@ -230,68 +222,60 @@ function createLink(uuid, id){
 }
 
 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 + ')">&times;</td>' +
+}
-            '</tr>';
+
-        htable_row++;
+function buildHeaderMapHtml(headers){
+    var innerHTML = '';
+    for(var key in headers){
+        innerHTML += buildRowHtml(key, headers[key]);
     }
     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>' +
-        '<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(){
     $("#listItems").html('');
@@ -300,10 +284,21 @@ function fillMessageList(){
         innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
     }
     $("#listItems").append(innerHTML);
+    $('.tile').click(function(e) {
+        var element = $(this);
+        var button = element.find('.btn-tile').children().get(0);
+        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){
     return json[findJsonIndexById(id)];
 }
@@ -324,10 +319,15 @@ function callLoadMessage(id){
 }
 
 function loadMessage(id){
+    if(id == null || id == undefined){
+        console.log('id is null');
+        return;
+    }
     lastId = id;
     setCookie();
     setDataOrigin();
     for(let i=0; i<json.length; i++){
+        console.log('id == ' + id + ' mockedId == ' + json[i].mockedResponseId);
         if(id == json[i].mockedResponseId){
             jsonIndex = i;
             console.log("Message found");
@@ -341,25 +341,33 @@ function loadMessage(id){
     console.log("Message not found");
 }
 
+
 function selectMessage(id){
+    const tiles = $('.tile');
     console.log("Selecting message...");
-    $(".menuItemSelected").on("click");
+    tiles.removeClass("active");
-    $(".menuItemSelected").addClass("menuItem");
-    $(".menuItemSelected").removeClass("menuItemSelected");
     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");
 }
 
+
+
 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 + ')">&times;</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;
 }
 
@@ -399,7 +407,7 @@ function generateJson(){
 
 
 function convertTableToJson(){
-    var rows = $('.httpStatusValue');
+    const rows = $('#headerMapTable').children();
     console.log("Rows: "+rows.length);
     var obj = {};
     var key;

target/classes/static/js/fiddle.js

@@ -0,0 +1,5 @@
+const deleteParent = function(){
+    $(this).closest('div.tile').remove();
+}
+
+$('#test1').click(deleteParent);

target/classes/static/js/historyloader.js

@@ -56,7 +56,8 @@ function historyToHtml(){
     var innerHTML = '';
     var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
     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].interfaceName + '</td>' +
         '</tr>';

target/classes/static/js/modal.js

@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
 const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
 const allModals = $('.modal');
 const btnModalClose = $('.modal button');
-//TODO: Implement in datatransfer
 const closeModals = function() {
     hideModal(allModals);
 }

target/classes/static/js/uianimation.js

@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
 var focusedField = false;
 function changeAdvancedVisibility(){
     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;
     }
     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;
     }
     setCookie();
 }
 
-function createMessageTab() {
-    var items = document.getElementById("listItems");
-    items.innerHTML += '<div class="menuItem">Item</div>';
-}
-
 $("#optional").click(changeAdvancedVisibility);
-$(".menuFactory").click(createMessageTab);
 $('#historyTab').click(showHistory);
 
+const tabitem = $('.tabitem');
 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');
 }
 
 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');
 }
 
@@ -65,13 +56,13 @@ function focusOutTip(element){
 
 function hidTip(element){
     if(focusedField) return;
-    $('#'+element).fadeOut(100);
+    $('#'+element).removeClass('active');
 }
 
 function showTip(element){
     if(focusedField) return;
-    $('.collapsible').fadeOut(0);
+    $('.tip').removeClass('active');
-    $('#'+element).fadeIn(100);
+    $('#'+element).addClass('active');
 }
 
 $('#messageLink').mouseover(function(){showTip('messageLinkTip')});