From c9744554d47da4199e4844fe29908321a667a83c Mon Sep 17 00:00:00 2001
From: luukas <lukasdoesdev@gmail.com>
Date: Tue, 14 Jun 2022 03:07:26 +0300
Subject: [PATCH] Improve the code for save status

---
 .../templates/panel/server_files.html         | 43 ++++++-------------
 1 file changed, 14 insertions(+), 29 deletions(-)

diff --git a/app/frontend/templates/panel/server_files.html b/app/frontend/templates/panel/server_files.html
index d6cdf220..45e02ced 100644
--- a/app/frontend/templates/panel/server_files.html
+++ b/app/frontend/templates/panel/server_files.html
@@ -386,8 +386,7 @@
     },
   ];
 
-  var filePath = '';
-  let file_loaded = false;
+  let filePath = '', serverFileContent = '';
 
   function clickOnFile(event) {
     filePath = event.target.getAttribute('data-path');
@@ -408,7 +407,7 @@
           $('#fileError').toggle(false)   // hide
           setFileName(event.target.innerText);
           editor.session.setValue(json.content);
-          file_loaded = false;
+          serverFileContent = json.content;
         }
       },
     });
@@ -523,27 +522,14 @@
       timer = null;
     };
   }
-  editor.on('change', function (event) {
-    if (!event.ctrlKey && !event.shiftKey) {
-      if (file_loaded) {
-        document.getElementById('save_status').innerHTML = '<i class="fal fa-file"></i>';
-        document.getElementById('save_status').style.color = 'gray';
-      } else {
-        document.getElementById('save_status').innerHTML = '<i class="fal fa-file-check"></i>';
-        document.getElementById('save_status').style.color = '#2fb689';
-      }
-    }
-  });
-  editor.on('undo', function (event) {
-    document.getElementById('save_status').innerHTML = '<i class="fal fa-file-xmark"></i>';
-    document.getElementById('save_status').style.color = 'gray';
-
-  });
-  editor.on('redo', function (event) {
-    document.getElementById('save_status').innerHTML = '<i class="fal fa-file-xmark"></i>';
-    document.getElementById('save_status').style.color = 'gray';
-
-  });
+  /**
+    * @param {boolean} saved
+  */
+  const setSaveStatus = (saved) => {
+    document.getElementById('save_status').innerHTML = `<i class="fal ${saved ? "fa-file-check" : "fa-file"}"></i>`;
+    document.getElementById('save_status').style.color = saved ? '#2fb689' : 'gray';
+  }
+  ['change', 'undo', 'redo'].forEach(event => editor.on(event, (event) => setSaveStatus(serverFileContent === editor.session.getValue())))
 
 
   setFileName();
@@ -589,11 +575,10 @@
         file_contents: text,
         file_path: filePath
       },
-      success: function (data) {
-        console.log("got response:");
-        document.getElementById("save_status").innerHTML = '<i class="fal fa-file-check"></i>';
-        document.getElementById('save_status').style.color = '#2fb689';
-      },
+      success: (data) => {
+        serverFileContent = text;
+        setSaveStatus(true)
+      }
     });
   }