From 2b32b746ac8f23810326e4563c3d08bb212a598c Mon Sep 17 00:00:00 2001 From: Zhora Shalyapin Date: Tue, 18 Mar 2025 09:23:55 +0000 Subject: [PATCH] attempt to prettify stages page --- main.js | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 132 insertions(+), 7 deletions(-) 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 {