T157 static content and table generated. Added css to table
This commit is contained in:
		| @@ -0,0 +1,45 @@ | ||||
| function getData(uuid){ | ||||
|     $.getJSON('http://localhost:8097/mock/json', function(json) { | ||||
|        fillStaticFields(json[0].clientUUID | ||||
|                         , json[0].mockedResponseId | ||||
|                         , json[0].mediaType | ||||
|                         , json[0].messageBody | ||||
|                         , json[0].httpStatus); | ||||
|        fillHeaderTable(json[0].httpHeaders); | ||||
|  | ||||
|     }); | ||||
| } | ||||
|  | ||||
| function fillStaticFields(uuid, id, mediaType, body, httpStatus){ | ||||
|     $('#messageLink').html(createLink(uuid,id)); | ||||
|     $('#typeSelector').val(mediaType); | ||||
|     $('#bodyEditor').html(body); | ||||
|  | ||||
|     //TODO: HttpStatus | ||||
| } | ||||
|  | ||||
| function createLink(uuid, id){ | ||||
|     var link = 'http://localhost:8097/klaus/v1/'+uuid+'/'+id; | ||||
|     return link; | ||||
| } | ||||
|  | ||||
| function fillHeaderTable(headers){ | ||||
|     var innerHTML = $('#headerTable').html(); | ||||
|     innerHTML += generateHeaderTable(headers); | ||||
|     $('#headerTable').html(innerHTML); | ||||
| } | ||||
|  | ||||
| function generateHeaderTable(headers){ | ||||
|     var innerHTML = ''; | ||||
|     var keys = Object.keys(headers); | ||||
|     for(var h in headers){ | ||||
|         innerHTML += | ||||
|             '<tr>' + | ||||
|                 '<td class="headerName">' + keys[h] + '</td>' + | ||||
|                 '<td class="headerField">' + headers[h] + '</td>' + | ||||
|             '</tr>' | ||||
|     } | ||||
|     return innerHTML; | ||||
| } | ||||
|  | ||||
| $(document).ready(getData()); | ||||
| @@ -27,24 +27,3 @@ function createMessageTab() { | ||||
|  | ||||
| $("#optional").click(changeAdvancedVisibility); | ||||
| $(".menuFactory").click(createMessageTab); | ||||
|  | ||||
| // var key = $("#headerKey"); | ||||
| // var value = $("#headerValue"); | ||||
| // function addHeaderTableRow(){ | ||||
| //     var headerTable = document.getElementById("headerTable"); | ||||
| //     headerTable.innerHTML += | ||||
| //         '<tr>' + | ||||
| //             '<td>' + | ||||
| //                 '<input type="text" name="value" class="headerName" value="' + key.val() + '"\n disabled="disabled"/>' + | ||||
| //             '</td>' + | ||||
| //             '<td>' + | ||||
| //                 '<input type="text" name="httpHeaders[' + key.val() + ']" class="headerField" id="httpHeaders' + key.val() + '" value="' + value.val() +'"/>' + | ||||
| //             '</td>' + | ||||
| //         '</tr>'; | ||||
| //     key.html(""); | ||||
| //     value.html(""); | ||||
| //     // alert("key: " + key.val() + | ||||
| //     // "\n" + "value: " + value.val()); | ||||
| // } | ||||
|  | ||||
| // key.keypress(function(e){ if(e.key == 'Enter') addHeaderTableRow()}); | ||||
|   | ||||
| @@ -1,13 +1,14 @@ | ||||
| <!DOCTYPE HTML> | ||||
| <html xmlns:th="http://thymeleaf.org"> | ||||
| <html> | ||||
| <head> | ||||
|     <title>R11 MockedServices</title> | ||||
|     <meta charset="utf-8"> | ||||
|     <link rel="stylesheet" th:href="@{/css/main.css}" type="text/css"> | ||||
|     <link rel="stylesheet" th:href="@{/Dependency/fontello-plus/css/fontello.css}" type="text/css"/> | ||||
|     <link rel="stylesheet" href="/css/main.css" type="text/css"> | ||||
|     <link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.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 type="text/javascript" src="/js/datatransfer.js"></script> | ||||
| </head> | ||||
| <body> | ||||
|     <div id="container"> | ||||
| @@ -23,19 +24,17 @@ | ||||
|  | ||||
|         </div> | ||||
|         <div id="itemData"> | ||||
|             <form action="#" th:action="@{/mock/__${mockedMessageDto.clientUUID}__}" | ||||
|                   th:object="${mockedMessageDto}" method="post"> | ||||
|                 <div id="basicItemData" class="articleHead">Your message</div> | ||||
|                 <div id="advancedItemData" class="articleHead" style="display: none;">Message id: [[*{mockedResponseId}]]</div> | ||||
|                 <div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div> | ||||
|                 <div id="link"> | ||||
|                     <p class="label">Your link</p> | ||||
|                     <div id="messageLink" class="borderStyle">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/[[${mockedMessageDto.mockedResponseId}]]</div> | ||||
|                     <div id="messageLink" class="borderStyle">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/<span id="clientUuid">acc39106-f351-46bb-b81b-31b860af3e56</span>/<span id="mockedMessageResponse2">1</div> | ||||
|                 </div> | ||||
|                 <div id="msgBody"> | ||||
|                     <div id="typeSelection"> | ||||
|  | ||||
|                         <p class="label">Content Type</p> | ||||
|                         <select id="typeSelector" th:field="*{mediaType}" class="fieldDefault borderStyle"> | ||||
|                         <select id="typeSelector" class="fieldDefault borderStyle"> | ||||
|                             <option value="application/xml">application/xml</option> | ||||
|                             <option value="application/json">application/json</option> | ||||
|                             <option value="text/xml">text/xml</option> | ||||
| @@ -43,7 +42,7 @@ | ||||
|                     </div> | ||||
|                     <div id="bodyEdition"> | ||||
|                         <p class="label">Body:</p> | ||||
|                         <textarea type="text" id="bodyEditor" th:field="*{messageBody}" class="fieldText borderStyle"></textarea> | ||||
|                         <textarea type="text" id="bodyEditor" class="fieldText borderStyle"></textarea> | ||||
|                     </div> | ||||
|  | ||||
|                 </div> | ||||
| @@ -59,16 +58,6 @@ | ||||
|                                <td>Name</td> | ||||
|                                 <td>Value</td> | ||||
|                             </tr> | ||||
|                             <tr th:each="entry, stats : *{httpHeaders}"> | ||||
|                                 <td><input type="text" name="value" class="headerName" th:value="${entry.key}" | ||||
|                                                              disabled="disabled"/></td> | ||||
|                                 <td> | ||||
|                                     <input type="text" name="value" class="headerField" th:field="*{httpHeaders[__${entry.key}__]}"/> | ||||
|                                     <button type="submit" name="removeHeader" th:value="${entry.key}"> | ||||
|                                         <img src="/img/icons8-cancel-64.png" style="width: 20px;"/> | ||||
|                                     </button> | ||||
|                                 </td> | ||||
|                             </tr> | ||||
|                         </table> | ||||
|                         <table id="nextHeaderTable"> | ||||
|                             <tr> | ||||
| @@ -88,12 +77,11 @@ | ||||
|                     <button type="submit" class="functionBarButton">Save</button> | ||||
|                     <div style="clear: both;"></div> | ||||
|                 </div> | ||||
|             </form> | ||||
|         </div> | ||||
|         <div style="clear:both;"></div> | ||||
|  | ||||
|  | ||||
|     </div> | ||||
|     <script type="text/javascript" th:src="@{/js/uianimation.js}"></script> | ||||
|     <script type="text/javascript" src="/js/uianimation.js"></script> | ||||
| </body> | ||||
| </html> | ||||
		Reference in New Issue
	
	Block a user