T198 T136 T191 save disabled, onclick removed, confirm. placeholder

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

@@ -240,3 +240,9 @@ input:focus {
 }
 
 
+/*TODO add to commons*/
+.btn-inactive {
+    color: #f1f1f1 !important;
+    background: #999999 !important;
+    cursor: default !important;
+}

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

@@ -1,10 +1,17 @@
 //TODO: Add delete buttons for messages
-var clientUUID;
+var clientUUID = '';
-var json;
+var json = {};
 var jsonIndex = 0;
 var htable_row = 0;
 var host = getDomain();
+var dataModified = false;
 const C_UUID = 'mock-uuid';
+
+$('#iconPlus').click(function(){addMessage()});
+$('#btn-addRow').click(function(){addRow()});
+//TODO remove later save onclick init
+$('#btn-save').click(function(){updateData()});
+
 function getData(){
     loadCookies();
     $.getJSON(host + '/mock/json/'+clientUUID, function(data) {
@@ -14,6 +21,7 @@ function getData(){
         console.log(JSON.stringify(json));
         console.log("Json received");
         refreshData();
+        setDataOrigin();
     });
 }
 
@@ -24,6 +32,28 @@ function getDomain(){
     return result;
 }
 
+function setDataModified(){
+    if(dataModified) return;
+    dataModified = true;
+    $('#btn-save').removeClass('btn-inactive');
+    $('#btn-save').addClass('btn-action');
+    $('#btn-save').click(function(){updateData()});
+}
+
+//Adding change listener to fields
+$('.field').change(function(){setDataModified()});
+
+function setDataOrigin(){
+    dataModified = false;
+    $('#btn-save').addClass('btn-inactive');
+    $('#btn-save').removeClass('btn-action');
+    $('#btn-save').off('click');
+}
+
+function displayDataLossWarn(){
+    if(dataModified) alert('Data modification lost');
+}
+
 function refreshData(){
     fillMessageList();
     console.log("List initiated");
@@ -55,6 +85,10 @@ function getCookie(cname) {
     return '';
 }
 
+function displaySaveConfirmation(){
+    alert('message has been saved');
+}
+
 function updateData(){
     var updatedJson = generateJson();
     var request = $.ajax({
@@ -66,11 +100,12 @@ function updateData(){
     });
     request.done(function () {
         getData();
+        displaySaveConfirmation();
     });
 }
 
 function addMessage(){
-
+    displayDataLossWarn();
     var request = $.ajax({
         url: host + '/mock/json/'+clientUUID,
         type: 'POST',
@@ -81,6 +116,7 @@ function addMessage(){
 }
 
 function removeTile(id){
+    displayDataLossWarn();
     var jsonObject = findJsonById(id);
     var request = $.ajax({
         url: host + '/mock/json/'+clientUUID + '/' + id,
@@ -126,6 +162,7 @@ function fillHeaderTable(headers){
     var innerHTML = $('#httpStatusValues').html();
     innerHTML += generateHeaderTable(headers);
     $('#httpStatusValues').html(innerHTML);
+    $('.tableField').change(function(){setDataModified()});
 }
 //TODO: Add addRow() to generate new rows and populate them with data
 function generateHeaderTable(headers){
@@ -161,6 +198,7 @@ function generateHeaderTable(headers){
 
 function removeRow(row){
     $('#hrow' + row).remove();
+    setDataModified();
 }
 
 function addRow(){
@@ -181,6 +219,7 @@ function addRow(){
     table.append(innerHtml);
     hkey.val('');
     hval.val('');
+    setDataModified();
 }
 
 function fillMessageList(){
@@ -204,6 +243,7 @@ function findJsonIndexById(id){
 }
 
 function loadMessage(id){
+    displayDataLossWarn();
     for(let i=0; i<json.length; i++){
         if(id == json[i].mockedResponseId){
             jsonIndex = i;

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

@@ -82,5 +82,3 @@ $('#headerKeyInput').mouseleave(function(){$('#newHeaderTip').css('display', 'no
 
 $('#headerValueInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();});
 $('#headerValueInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();});
-
-

src/main/resources/templates/mock.html

@@ -10,8 +10,6 @@
     <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>
-<!--    <script type="text/javascript" src="historyloader.js"></script>-->
 </head>
 <body>
     <div id="container">
@@ -20,7 +18,7 @@
             <div id="selectMenuContent" style="display: none;">
                 <div id="selectMenuHead" class="articleHead">List</div>
                 <div id="listItems"></div>
-                <div id="iconPlus" class="menuItem" onclick="addMessage()"><i class="icon-plus"></i></div>
+                <div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
             </div>
 
         </div>
@@ -28,7 +26,7 @@
                 <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">Your link</label>
+                    <label for="messageLink">Link</label>
                     <input id="messageLink" type="text" class="field"/>
                 </div>
                 <div id="msgBody">
@@ -78,7 +76,7 @@
                                 <tr>
                                     <td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
                                     <td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
-                                    <td id="btn-addRow" onclick="addRow()" class="btn-function-table btn-table-add">+</td>
+                                    <td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
                                 </tr>
                             </tfoot>
                         </table>
@@ -97,16 +95,14 @@
                                             <td></td>
                                         </tr>
                                     </thead>
-                                    <tbody>
+                                    <tbody></tbody>
-
-                                    </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div id="functionBar">
-                    <button id="btn-save" type="submit" class="functionBarButton btn-action" onclick="updateData()">Save</button>
+                    <button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button>
                     <div style="clear: both;"></div>
                 </div>
         </div>
@@ -118,44 +114,42 @@
                 <br>
                 <h2>Help:</h2>
             </div>
-<!--            <div id="toolTipContent" style="display: none;">-->
+
-<!--                <div>-->
+            <div id="messageLinkTip" class="collapsible" style="display: none;">
-                    <div id="messageLinkTip" class="collapsible" style="display: none;">
+                <!--style="display: none;"-->
-                        <!--style="display: none;"-->
+                <h4>The link</h4>
-                        <h4>The link</h4>
+                <p>It's url where you need send your request</p>
-                        <p>It's url where you need send your request</p>
+            </div>
-                    </div>
+            <div id="httpStatusTip" class="collapsible" style="display: none;">
-                    <div id="httpStatusTip" class="collapsible" style="display: none;">
+                <h4>Http status</h4>
-                        <h4>Http status</h4>
+                <p>Set http status for server response. 200 OK is default.</p>
-                        <p>Set http status for server response. 200 OK is default.</p>
+            </div>
-                    </div>
+            <div id="typeSelectorTip" class="collapsible" style="display: none;">
-                    <div id="typeSelectorTip" class="collapsible" style="display: none;">
+                <h4>Content type</h4>
-                        <h4>Content type</h4>
+                <p>Select content type of body. Set plain text if data has no format.</p>
-                        <p>Select content type of body. Set plain text if data has no format.</p>
+            </div>
-                    </div>
+            <div id="bodyEditorTip" class="collapsible" style="display: none;">
-                    <div id="bodyEditorTip" class="collapsible" style="display: none;">
+                <h4>Body</h4>
-                        <h4>Body</h4>
+                <p>Text placed in this field will be displayed as response body</p>
-                        <p>Text placed in this field will be displayed as response body</p>
+            </div>
-                    </div>
+            <div id="headersTabTip" class="collapsible" style="display: none;">
-                    <div id="headersTabTip" class="collapsible" style="display: none;">
+                <h4>Headers</h4>
-                        <h4>Headers</h4>
+                <p>Set headers for your messages.</p>
-                        <p>Set headers for your messages.</p>
+            </div>
-                    </div>
+            <div id="historyTabTip" class="collapsible" style="display: none;">
-                    <div id="historyTabTip" class="collapsible" style="display: none;">
+                <h4>History</h4>
-                        <h4>History</h4>
+                <p>Check history of this message</p>
-                        <p>Check history of this message</p>
+            </div>
-                    </div>
+            <div id="newHeaderTip" class="collapsible" style="display: none;">
-                    <div id="newHeaderTip" class="collapsible" style="display: none;">
+                <h4>Next header value</h4>
-                        <h4>Next header value</h4>
+                <p>Type values and press enter to add new header.</p>
-                        <p>Type values and press enter to add new header.</p>
+            </div>
-                    </div>
-<!--                </div>-->
-<!--            </div>-->
         </div>
         <div style="clear:both;"></div>
 
 
     </div>
     <script type="text/javascript" src="/js/uianimation.js"></script>
+    <script type="text/javascript" src="/js/datatransfer.js"></script>
 </body>
 </html>