54 lines
2.1 KiB
JavaScript
54 lines
2.1 KiB
JavaScript
const connectionCards = document.querySelectorAll(".connection-card");
|
|
const activeConnection = document.getElementById("active-connection");
|
|
const detailTarget = document.getElementById("detail-target");
|
|
const runQueryButton = document.getElementById("run-query");
|
|
const executionBanner = document.getElementById("execution-banner");
|
|
const executionTitle = document.getElementById("execution-title");
|
|
const executionCopy = document.getElementById("execution-copy");
|
|
const durationValue = document.getElementById("duration-value");
|
|
const rowCount = document.getElementById("row-count");
|
|
const bottomTabs = document.querySelectorAll(".bottom-tab");
|
|
const tabContents = document.querySelectorAll(".tab-content");
|
|
|
|
connectionCards.forEach((card) => {
|
|
card.addEventListener("click", () => {
|
|
connectionCards.forEach((item) => item.classList.remove("is-active"));
|
|
card.classList.add("is-active");
|
|
|
|
const target = card.dataset.connection;
|
|
activeConnection.textContent = target;
|
|
detailTarget.textContent = target;
|
|
});
|
|
});
|
|
|
|
runQueryButton.addEventListener("click", () => {
|
|
const isError = executionBanner.classList.contains("is-error");
|
|
|
|
if (isError) {
|
|
executionBanner.classList.remove("is-error");
|
|
executionTitle.textContent = "Last run succeeded";
|
|
executionCopy.textContent = "50 rows returned in 182 ms. Export is available.";
|
|
durationValue.textContent = "182 ms";
|
|
rowCount.textContent = "50";
|
|
return;
|
|
}
|
|
|
|
executionBanner.classList.add("is-error");
|
|
executionTitle.textContent = "Last run failed";
|
|
executionCopy.textContent = "Syntax error near `form`. The error summary should stay visible in the workspace.";
|
|
durationValue.textContent = "21 ms";
|
|
rowCount.textContent = "0";
|
|
});
|
|
|
|
bottomTabs.forEach((tab) => {
|
|
tab.addEventListener("click", () => {
|
|
bottomTabs.forEach((item) => item.classList.remove("is-active"));
|
|
tabContents.forEach((item) => item.classList.remove("is-active"));
|
|
|
|
tab.classList.add("is-active");
|
|
document
|
|
.querySelector(`[data-content="${tab.dataset.tab}"]`)
|
|
.classList.add("is-active");
|
|
});
|
|
});
|