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

2021-02-19 17:08:40 +01:00
parent 145ae9c492
commit e602a16d1b
4 changed files with 85 additions and 47 deletions
--- a/src/main/resources/static/css/main.css
+++ b/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;
+}
--- a/src/main/resources/static/js/datatransfer.js
+++ b/src/main/resources/static/js/datatransfer.js
@@ -1,10 +1,17 @@
 //TODO: Add delete buttons for messages
-var clientUUID;
-var json;
+var clientUUID = '';
+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;
--- a/src/main/resources/static/js/uianimation.js
+++ b/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();});
-
-
--- a/src/main/resources/templates/mock.html
+++ b/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;">
-                        <!--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>-->
+
+            <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>
    <script type="text/javascript" src="/js/uianimation.js"></script>
+    <script type="text/javascript" src="/js/datatransfer.js"></script>
 </body>
 </html>