Scripted advanced tabs and added css animations

src/main/java/com/release11/klaus/controller/EventController.java

@@ -31,6 +31,7 @@ public class EventController {
     private final EtrackService etrackService;
     private final List<Event> eventList = new LinkedList<>();
 
+
     @GetMapping("/etrack/{uuid}")
     public String showEtrack(@Valid EventRequestDto eventRequestDto, @PathVariable UUID uuid, final Model model,
                              BindingResult bindingResult){

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

@@ -199,7 +199,11 @@
     font-size: 24px;
     color: red;
     text-align: center;
+    cursor: pointer;
+}
 
+.btn-del-MenuItem:hover {
+    color: indianred;
 }
 
 #headerTable {
@@ -238,9 +242,20 @@
 
 .btn-table-add {
     color: green;
+    cursor: pointer;
 }
 
+.btn-table-add:hover {
+    color:lightgreen;
+}
+
+
 .btn-table-remove {
     color: red;
+    cursor: pointer;
+}
+
+.btn-table-remove:hover {
+    color:indianred;
 }
 

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

@@ -109,7 +109,7 @@ function fillStaticFields(uuid, id, mediaType, body, httpStatus){
 }
 
 function createLink(uuid, id){
-    var link = 'http://localhost:8097/klaus/v1/'+uuid+'/'+id;
+    var link = 'http://localhost:8097/klaus/v1/get/'+uuid+'/'+id;
     return link;
 }
 

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

@@ -27,5 +27,29 @@ function createMessageTab() {
 
 $("#optional").click(changeAdvancedVisibility);
 $(".menuFactory").click(createMessageTab);
+$('#historyTab').click(showHistory);
+
+function showHistory(){
+    $('#headers').css('display', 'none');
+    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
+    $('.advancedMenuTabSelected').click(showHeaders);
+    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
+    $('#history').css('display', 'block');
+    $('#historyTab').addClass('advancedMenuTabSelected');
+    $('#historyTab').removeClass('advancedMenuTab');
+    $('#historyTab').off('click');
+}
+
+function showHeaders(){
+    $('#history').css('display', 'none');
+    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
+    $('.advancedMenuTabSelected').click(showHistory);
+    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
+    $('#headers').css('display', 'block');
+    $('#headersTab').addClass('advancedMenuTabSelected');
+    $('#headersTab').removeClass('advancedMenuTab');
+    $('#headersTab').off('click');
+}
+
 
 //TODO: Add animation for Headers and History

src/main/resources/templates/mock.html

@@ -50,8 +50,8 @@
                 <div id="optional">&gt; show/hide advanced settings</div>
                 <div id="advanced" style="display: none;">
                     <div id="advancedMenu">
-                        <div class="advancedMenuTabSelected">Headers</div>
-                        <div class="advancedMenuTab">History</div>
+                        <div id="headersTab" class="advancedMenuTabSelected">Headers</div>
+                        <div id="historyTab" class="advancedMenuTab">History</div>
                     </div>
                     <div id="headers">
                         <table id="headerTable">
@@ -71,8 +71,6 @@
                                     <td id="btn-addRow" onclick="addRow()" class="btn-function-table btn-table-add">+</td>
                                 </tr>
                             </tfoot>
-<!--                        <input type="text" name="headerValue" id="headerValue" class="headerField" placeholder="value"/>-->
-<!--                        <input type="image" name="addHeader" src="/img/icons8-plus-48.png" style="width: 20px;"/>-->
                         </table>
                     </div>
                     <div id="history" style="display:none;"></div>