fix(stub): disable save button when already saved

MaximeCG · MaximeCG · commit 8be10a62d2f9 · 2019-09-18T16:21:41.000+02:00
diff --git a/runner/src/main/resources/view/stub.html b/runner/src/main/resources/view/stub.html
@@ -56,10 +56,18 @@
         }
 
         async function save () {
+          document.getElementById("save").disabled = true
           await fetch('/services/stub', {
             body: getStubInput(),
             method: 'PUT'
           })
+          document.getElementById("save").innerText = 'Saved'
+        }
+
+        function handleChangeStubInput () {
+          document.getElementById("save").disabled = false
+          document.getElementById("save").innerText = 'Save'
+          refreshStub()
         }
       </script>
       <style>
@@ -102,7 +110,7 @@
           height: 200px;
         }
 
-        .save {
+        #save {
           display: block;
           width: 300px;
           background-color: #f2bb13;
@@ -114,11 +122,16 @@
           min-height: 42px;
         }
 
-        .save:hover {
+        #save:hover {
           opacity: 0.8;
           transition: 0.2s;
         }
 
+        #save:disabled {
+          opacity: 0.8;
+          cursor: default;
+        }
+
         .edit, .preview {
           margin: 10px;
           background: #252e38;
@@ -146,8 +159,8 @@
 <body onload="load()">
   <div class="edit">
     <div class="edit-title">Edit</div>
-    <textarea id="stubInput" onkeyup="refreshStub()"></textarea>
-    <button class="save" onclick="save()">SAVE</button>
+    <textarea id="stubInput" onkeyup="handleChangeStubInput()"></textarea>
+    <button id="save" onclick="save()" disabled>Saved</button>
   </div>
   <div class="preview">
     <div class="preview-title">Preview</div>
