add prettify buttons

main.js

@@ -69,7 +69,13 @@
     LATTITUDE: "lattitude",
     LONGITUDE: "longitude",
     ALWAYS_PRETTIFY: "always",
-    REDIRECT_EXIT: "redirectExit"
+    REDIRECT_EXIT: "redirectExit",
+    ENABLED_PAGES: "enabledPages"
+  }
+
+  const prettifyTypes = {
+    ALWAYS: "always",
+    ONCE: "once"
   }
 
   const ZOOM = 17
@@ -1144,7 +1150,7 @@
     ;[topButtonsContainer, bottomButtonsContainer].forEach((el, index) => {
       let unglifyButton = document.createElement("button")
       unglifyButton.type = "button"
-      unglifyButton.textContent = "Сделать некрасиво"
+      unglifyButton.textContent = "Сделать как было"
       unglifyButton.addEventListener("click", () => {
         uglify(form, container, oldTable)
       })
@@ -1891,23 +1897,174 @@
     `)
   }
 
+  function getEnabledPages() {
+    return JSON.parse(localStorage.getItem(localStorageItems.ENABLED_PAGES) ?? "{}")
+  }
+
+  function saveEnabledPages(enabledPages) {
+    localStorage.setItem(localStorageItems.ENABLED_PAGES, JSON.stringify(enabledPages))
+  }
+
+  function isPageEnabled() {
+    let enabledPages = getEnabledPages()
+    let pageType = getPageType()
+
+    return enabledPages[pageType]?.[getAction()]
+  }
+
+  function addEnabledPage(prettifyType) {
+    let enabledPages = getEnabledPages()
+    let pageType = getPageType()
+    if (!(pageType in enabledPages)) {
+      enabledPages[pageType] = {}
+    }
+    enabledPages[pageType][getAction()] = prettifyType
+
+    saveEnabledPages(enabledPages)
+  }
+
+  function removeEnabledPage() {
+    let enabledPages = getEnabledPages()
+    let pageType = getPageType()
+    if (!(pageType in enabledPages)) {
+      return
+    }
+    delete enabledPages[pageType][getAction()]
+
+    saveEnabledPages(enabledPages)
+  }
+
+  function addEnableButtons() {
+    let enableButton = document.createElement("button")
+    enableButton.type = "button"
+    enableButton.id = "enable-button"
+    enableButton.textContent = "Сделать красиво"
+    if (isPageEnabled()) {
+      hide([enableButton])
+    }
+    enableButton.addEventListener("click", () => {
+      if (pretty) return
+
+      hide([enableButton])
+      let alwaysEnable = document.querySelector("#always-enable")?.checked
+      addEnabledPage(alwaysEnable ? prettifyTypes.ALWAYS : prettifyTypes.ONCE)
+      prettifyIfEnabled()
+    })
+
+    let header = document.querySelector("#header")
+    header.insertBefore(enableButton, header.querySelector("#globalmenu"))
+    header.insertBefore(createAlwaysEnable(), header.querySelector("#globalmenu"))
+
+    addStylesToHead(`
+      #always-enable-container {
+        display: inline-block;
+      }
+
+      .hidden {
+        display: none;
+      }
+    `)
+  }
+
+  function addDisableButton() {
+    let disableButton = document.createElement("button")
+    disableButton.id = "disable-button"
+    disableButton.type = "button"
+    disableButton.textContent = "Сделать как было"
+    disableButton.addEventListener("click", () => {
+      if (!pretty) return
+
+      if (!confirm("Это действие отключит скрипт на этой странице и удалит все несохраненные данные")) return
+
+      removeEnabledPage()
+      location.reload()
+      pretty = false
+    })
+    
+    header.querySelector("#enable-button").after(disableButton)
+  }
+
+  function createAlwaysEnable() {
+    let alwaysEnableContainer = document.createElement("div")
+    alwaysEnableContainer.id = "always-enable-container"
+
+    let alwaysEnableLabel = document.createElement("label")
+    alwaysEnableLabel.setAttribute("for", "always-enable")
+    alwaysEnableLabel.textContent = "Всегда красиво"
+    alwaysEnableContainer.appendChild(alwaysEnableLabel)
+
+    let alwaysEnableCheckbox = document.createElement("input")
+    alwaysEnableCheckbox.type = "checkbox"
+    alwaysEnableCheckbox.id = "always-enable"
+    alwaysEnableCheckbox.name = "always-enable"
+    alwaysEnableCheckbox.addEventListener("change", function() {
+      if (this.checked)
+        addEnabledPage(prettifyTypes.ALWAYS)
+      else
+        removeEnabledPage()
+    })
+
+    if (isPageEnabled() == prettifyTypes.ALWAYS) {
+      alwaysEnableCheckbox.checked = true
+    }
+
+    alwaysEnableContainer.appendChild(alwaysEnableCheckbox)
+
+    return alwaysEnableContainer
+  }
+
+  function prettifyIfEnabled() {
+    let pageEnabled = isPageEnabled()
+    if (pretty || !pageEnabled) return
+    
+    if (pageEnabled == prettifyTypes.ONCE) {
+      removeEnabledPage()
+    }
+
+    pretty = true
+
+    addDisableButton()
+
+    addCommonStyles()
+
+    /* SWITCH FOR DIFFERENT PAGES */
+  
+    addStickyMenu()
+  
+    if (isCpEditPage()) {
+      prettifyEditCpPage()
+    }
+  
+    if (isRouteListPage()) {
+      addStageLink()
+    }
+  
+    if (isRouteBuildPage()) {
+      prettifyRouteBuildPage()
+    }
+  
+    if (isRouteStagesPage()) {
+      prettifyRouteStagesPage()
+    }
+  }
+
   /* REDIRECTS */
 
   redirectAfterNewCpIfNeeded()
 
-  /* HEAD */
+  let pretty = false
 
-  addCommonStyles()
-
-  /* SWITCH FOR DIFFERENT PAGES */
+  addEnableButtons()
 
   if (isCpDeletePage()) {
     bindDeleteButton()
     return
   }
+  
+  prettifyIfEnabled() 
 
   addClearBoth()
-
+  
   if (hasMap()) {
     initMapbox()
     addFullscreenButton()
@@ -1916,22 +2073,4 @@
       centerMap()
     }
   }
-
-  addStickyMenu()
-
-  if (isCpEditPage()) {
-    prettifyEditCpPage()
-  }
-
-  if (isRouteListPage()) {
-    addStageLink()
-  }
-
-  if (isRouteBuildPage()) {
-    prettifyRouteBuildPage()
-  }
-
-  if (isRouteStagesPage()) {
-    prettifyRouteStagesPage()
-  }
 })();