diff --git a/main.js b/main.js
index e713ae6..6eb77d7 100644
--- a/main.js
+++ b/main.js
@@ -117,7 +117,11 @@
desc = desc ? "
" +
"

" +
"
" : ""
- div.innerHTML = "" + "" + (this.content ?? "") + "
" +
+ let name = altName ?? this.name ?? ""
+ if (name !== "")
+ name = ``
+
+ div.innerHTML = name + "" + (this.content ?? "") + "
" +
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)) {
- display: block;
- width: 0;
- height: 0;
- overflow: hidden;
+ .stage-container {
+ display: flex;
+ gap: 10px;
+ border: 1px solid black;
+ }
+
+ .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 {