attempt to prettify stages page

main.js

@@ -117,7 +117,11 @@
       desc = desc ? "<div class='desc-icon-container' title='" + desc + "'>" + 
         "<img class='desc-icon' src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8c3ZnIGlkPSJzdmcyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAwIiB3aWR0aD0iMjAwIiB2ZXJzaW9uPSIxLjAiPgogPHBhdGggaWQ9InBhdGgyMzgyIiBkPSJtMTY1LjMzIDExMy40NGExMDMuNjEgMTAzLjYxIDAgMSAxIC0yMDcuMjIgMCAxMDMuNjEgMTAzLjYxIDAgMSAxIDIwNy4yMiAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjkzNzM5IDAgMCAuOTM3MzkgNDIuMTQzIC02LjMzOTIpIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNmZmYiLz4KIDxnIGlkPSJsYXllcjEiPgogIDxwYXRoIGlkPSJwYXRoMjQxMyIgZD0ibTEwMCAwYy01NS4yIDAtMTAwIDQ0LjgtMTAwIDEwMC01LjA0OTVlLTE1IDU1LjIgNDQuOCAxMDAgMTAwIDEwMHMxMDAtNDQuOCAxMDAtMTAwLTQ0LjgtMTAwLTEwMC0xMDB6bTAgMTIuODEyYzQ4LjEzIDAgODcuMTkgMzkuMDU4IDg3LjE5IDg3LjE4OHMtMzkuMDYgODcuMTktODcuMTkgODcuMTktODcuMTg4LTM5LjA2LTg3LjE4OC04Ny4xOSAzOS4wNTgtODcuMTg4IDg3LjE4OC04Ny4xODh6bTEuNDcgMjEuMjVjLTUuNDUgMC4wMy0xMC42NTMgMC43MzctMTUuMjgyIDIuMDYzLTQuNjk5IDEuMzQ2LTkuMTI2IDMuNDg0LTEyLjg3NiA2LjIxOS0zLjIzOCAyLjM2Mi02LjMzMyA1LjM5MS04LjY4NyA4LjUzMS00LjE1OSA1LjU0OS02LjQ2MSAxMS42NTEtNy4wNjMgMTguNjg3LTAuMDQgMC40NjgtMC4wNyAwLjg2OC0wLjA2MiAwLjg3NiAwLjAxNiAwLjAxNiAyMS43MDIgMi42ODcgMjEuODEyIDIuNjg3IDAuMDUzIDAgMC4xMTMtMC4yMzQgMC4yODItMC45MzcgMS45NDEtOC4wODUgNS40ODYtMTMuNTIxIDEwLjk2OC0xNi44MTMgNC4zMi0yLjU5NCA5LjgwOC0zLjYxMiAxNS43NzgtMi45NjkgMi43NCAwLjI5NSA1LjIxIDAuOTYgNy4zOCAyIDIuNzEgMS4zMDEgNS4xOCAzLjM2MSA2Ljk0IDUuODEzIDEuNTQgMi4xNTYgMi40NiA0LjU4NCAyLjc1IDcuMzEyIDAuMDggMC43NTkgMC4wNSAyLjQ4LTAuMDMgMy4yMTktMC4yMyAxLjgyNi0wLjcgMy4zNzgtMS41IDQuOTY5LTAuODEgMS41OTctMS40OCAyLjUxNC0yLjc2IDMuODEyLTIuMDMgMi4wNzctNS4xOCA0LjgyOS0xMC43OCA5LjQwNy0zLjYgMi45NDQtNi4wNCA1LjE1Ni04LjEyIDcuMzQzLTQuOTQzIDUuMTc5LTcuMTkxIDkuMDY5LTguNTY0IDE0LjcxOS0wLjkwNSAzLjcyLTEuMjU2IDcuNTUtMS4xNTYgMTMuMTkgMC4wMjUgMS40IDAuMDYyIDIuNzMgMC4wNjIgMi45N3YwLjQzaDIxLjU5OGwwLjAzLTIuNGMwLjAzLTMuMjcgMC4yMS01LjM3IDAuNTYtNy40MSAwLjU3LTMuMjcgMS40My01IDMuOTQtNy44MSAxLjYtMS44IDMuNy0zLjc2IDYuOTMtNi40NyA0Ljc3LTMuOTkxIDguMTEtNi45OSAxMS4yNi0xMC4xMjUgNC45MS00LjkwNyA3LjQ2LTguMjYgOS4yOC0xMi4xODcgMS40My0zLjA5MiAyLjIyLTYuMTY2IDIuNDYtOS41MzIgMC4wNi0wLjgxNiAwLjA3LTMuMDMgMC0zLjk2OC0wLjQ1LTcuMDQzLTMuMS0xMy4yNTMtOC4xNS0xOS4wMzItMC44LTAuOTA5LTIuNzgtMi44ODctMy43Mi0zLjcxOC00Ljk2LTQuMzk0LTEwLjY5LTcuMzUzLTE3LjU2LTkuMDk0LTQuMTktMS4wNjItOC4yMy0xLjYtMTMuMzUtMS43NS0wLjc4LTAuMDIzLTEuNTktMC4wMzYtMi4zNy0wLjAzMnptLTEwLjkwOCAxMDMuNnYyMmgyMS45OTh2LTIyaC0yMS45OTh6Ii8+CiA8L2c+Cjwvc3ZnPgo='/>" +
         "</div>" : ""
-      div.innerHTML = "<label for=''>" + (altName ?? this.name ?? "") + "</label>" + "<div>" + (this.content ?? "") + "</div>" +
+      let name = altName ?? this.name ?? ""
+      if (name !== "")
+        name = `<label for=''>${name}</label>`
+
+      div.innerHTML = name + "<div>" + (this.content ?? "") + "</div>" +
         desc
       return div
     }
@@ -1163,6 +1167,25 @@
     ])
   }
 
+  function makeLangSwitch(from, to, switchContainer) {
+    const LEGEND_LABELS = {
+      ru: "Русский",
+      en: "Английский"
+    }
+    
+    let legendLang = document.createElement("div")
+    legendLang.classList.add("legend-desc__lang")
+    legendLang.textContent = LEGEND_LABELS[from.lang]
+
+    switchContainer.addEventListener("click", event => {
+      hide(from.elements)
+      show(to.elements)
+      legendLang.textContent = LEGEND_LABELS[to.lang]
+    })
+
+    return legendLang
+  }
+
   function makeLegend(rows) {
     let legendContainer = document.createElement("div")
     legendContainer.classList.add("legend-container")
@@ -1478,16 +1501,118 @@
     document.querySelector(`#content table table tr:nth-child(2) `).remove()
   }
 
+  function _moveInputValues(form, was, became) {
+    let inputValues = saveInputValues(was)
+    console.log(was)
+    was.remove()
+    form.appendChild(became)
+    became.outerHTML = became.outerHTML.replace("table>", "div>")
+    setInputValues(became, inputValues)
+    createSendButtons()
+  }
+
   function prettifyRouteStagesPage() {
     let styles = `
-      #content > table tr:nth-child(n + 5):not(:nth-child(7)) {
+      .stage-container {
-        display: block;
+        display: flex;
-        width: 0;
+        gap: 10px;
-        height: 0;
+        border: 1px solid black;
-        overflow: hidden;
+      }
+              
+      .lang-switch-icon {
+        width: 18px;
+        height: 12px;
       }
     `
 
+    let rows = [...document.querySelectorAll(`#content tbody tr`)]
+    let topButtons = createFrom(rows, "top-buttons", [
+      { index: 0 }
+    ])
+    let stageListContainer = document.createElement("div")
+    stageListContainer.classList.add("stage-list-container")
+
+    stageListContainer.appendChild(topButtons)
+
+    for (let i = 3; i < rows.length; i = i + 8) {
+      let stageContainer = document.createElement("div")
+      stageContainer.classList.add("stage-container")
+
+      let stageLeftContainer = document.createElement("div")
+      stageLeftContainer.classList.add("stage-left-container")
+
+      let stageTopContainer = createFrom(rows, "stage-top-container options", [
+        { index: i }, 
+        { index: i + 1 },
+        { index: i + 2 }
+      ])
+      stageLeftContainer.appendChild(stageTopContainer)
+
+      let stageMainContainer = createFrom(rows, "stage-main-container", [
+        { index: i + 3 },
+        { index: i + 4 }
+      ])
+      stageLeftContainer.appendChild(stageMainContainer)
+
+      stageContainer.appendChild(stageLeftContainer)
+
+      let stageTextsContainer = createFrom(rows, "stage-texts-container", [
+        { index: i + 6, name: "" },
+        { index: i + 7, name: "" }
+      ])
+
+      let switchContainer = document.createElement("div")
+      let stageEnSwitchContainer = document.createElement("img")
+      stageEnSwitchContainer.classList.add("lang-switch-icon")
+      stageEnSwitchContainer.src = "/i/flags/gb.png"
+      
+      let stageRuSwitchContainer = document.createElement("img")
+      stageRuSwitchContainer.classList.add("lang-switch-icon")
+      stageRuSwitchContainer.src = "/i/flags/ru.png"
+
+      if (!rows[i + 7]) continue
+
+      switchContainer.appendChild(stageEnSwitchContainer)
+      switchContainer.appendChild(stageRuSwitchContainer)
+
+      let stageRuTextContainer = stageTextsContainer.querySelector("div:first-child")
+      let stageEnTextContainer = stageTextsContainer.querySelector("div:nth-child(2)")
+
+      hide([stageEnTextContainer, stageRuSwitchContainer])
+      stageTextsContainer.querySelector("div:nth-child(2) > div > div").style.display = ""
+      makeLangSwitch(
+        { lang: "ru", elements: [stageRuTextContainer, stageEnSwitchContainer] },
+        { lang: "en", elements: [stageEnTextContainer, stageRuSwitchContainer] },
+        stageEnSwitchContainer
+      )
+      makeLangSwitch(
+        { lang: "en", elements: [stageEnTextContainer, stageRuSwitchContainer] },
+        { lang: "ru", elements: [stageRuTextContainer, stageEnSwitchContainer] },
+        stageRuSwitchContainer
+      )
+
+      stageTextsContainer.prepend(switchContainer)
+
+      stageContainer.appendChild(stageTextsContainer)
+
+      stageTextsContainer.querySelectorAll(`input[name^="stage_name_"]`).forEach(el => el.after(document.createElement("br")))
+
+      stageListContainer.appendChild(stageContainer)
+    }
+
+    let contentWrapper = document.createElement("div")
+    contentWrapper.id = "content-wrapper"
+    contentWrapper.appendChild(stageListContainer)
+
+    console.log(document.querySelector("#content > table > form"))
+    console.log(document.querySelector("#content > table tbody"))
+    console.log(contentWrapper)
+
+    _moveInputValues(
+      document.querySelector("#content > table > form"),
+      document.querySelector("#content > table tbody"),
+      contentWrapper
+    )
     addStylesToHead(styles)
   }
 
@@ -1712,7 +1837,7 @@
       }
 
       .collapsed, .hidden {
-        display: none;
+        display: none !important;
       }
 
       .collapse-button::after {