Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CLDR-16844 Preliminary refactoring for Dashboard #3874

Merged
merged 1 commit into from
Jul 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 121 additions & 0 deletions tools/cldr-apps/js/src/esm/cldrDashContext.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/*
* cldrDashContext: encapsulate code that determines how the Dashboard is combined with
* other Survey Tool GUI components.
*/

import * as cldrDrag from "./cldrDrag.mjs";
import * as cldrNotify from "./cldrNotify.mjs";
import * as cldrVue from "./cldrVue.mjs";

import DashboardWidget from "../views/DashboardWidget.vue";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a new structure for the esm dir..


// Caution: these strings also occur literally in other files (.mjs/.vue/.css)
const OPEN_DASH_BUTTON_CLASS = "open-dash";
const DASH_SECTION_ID = "DashboardSection";
const NEIGHBOR_SECTION_ID = "VotingEtcSection";

/**
* The application instance for the DashboardWidget component when it has been mounted
*/
let wrapper = null;

/**
* Is the Info Panel currently displayed?
*/
let visible = false;

function isVisible() {
return visible; // boolean
}

function wireUpOpenButtons() {
const els = document.getElementsByClassName(OPEN_DASH_BUTTON_CLASS);
for (let i = 0; i < els.length; i++) {
els[i].onclick = () => insert();
}
}

/**
* Create or reopen the DashboardWidget Vue component
*/
function insert() {
if (visible) {
return; // already inserted and visible
}
try {
if (wrapper) {
// already created/inserted but invisible
wrapper.reopen();
} else {
const el = document.getElementById(DASH_SECTION_ID);
wrapper = cldrVue.mountReplace(DashboardWidget, el);
}
show();
} catch (e) {
cldrNotify.exception(e, "loading Dashboard");
console.error("Error mounting dashboard vue " + e.message + " / " + e.name);
}
}

/**
* Show the Dashboard
*/
function show() {
if (visible) {
return;
}
const vote = document.getElementById(NEIGHBOR_SECTION_ID);
const dash = document.getElementById(DASH_SECTION_ID);
if (vote && dash) {
vote.style.height = "50%";
dash.style.height = "50%";
dash.style.display = "flex";
const els = document.getElementsByClassName(OPEN_DASH_BUTTON_CLASS);
for (let i = 0; i < els.length; i++) {
els[i].style.display = "none";
}
visible = true;
cldrDrag.enable(vote, dash, true /* up/down */);
}
}

/**
* Hide the Dashboard
*/
function hide() {
if (!visible) {
return;
}
const vote = document.getElementById(NEIGHBOR_SECTION_ID);
const dash = document.getElementById(DASH_SECTION_ID);
if (vote && dash) {
vote.style.height = "100%";
dash.style.display = "none";
const els = document.getElementsByClassName(OPEN_DASH_BUTTON_CLASS);
for (let i = 0; i < els.length; i++) {
els[i].style.display = "inline";
}
visible = false;
}
}

function updateRow(json) {
if (visible) {
wrapper?.updatePath(json);
}
}

function updateWithCoverage(newLevel) {
if (visible) {
wrapper?.handleCoverageChanged(newLevel);
}
}

export {
hide,
insert,
isVisible,
updateRow,
updateWithCoverage,
wireUpOpenButtons,
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* cldrDash: encapsulate dashboard data.
* cldrDashData: encapsulate dashboard data.
*/
import * as cldrAjax from "./cldrAjax.mjs";
import * as cldrClient from "./cldrClient.mjs";
Expand Down
4 changes: 2 additions & 2 deletions tools/cldr-apps/js/src/esm/cldrEvent.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* into smaller more specific modules)
*/
import * as cldrForum from "./cldrForum.mjs";
import * as cldrGui from "./cldrGui.mjs";
import * as cldrDashContext from "./cldrDashContext.mjs";
import * as cldrLoad from "./cldrLoad.mjs";
import * as cldrStatus from "./cldrStatus.mjs";
import * as cldrText from "./cldrText.mjs";
Expand Down Expand Up @@ -445,7 +445,7 @@ function unpackMenuSideBar(json) {
// Note: setCurrentSpecial("general") is dubious here; it doesn't cause
// the "general" page to be loaded; it doesn't hide whatever else was displayed.
cldrStatus.setCurrentSpecial("general");
cldrGui.insertDashboard();
cldrDashContext.insert();
} else {
$("#OtherSection").hide(); // Don't hide the other section when showing the dashboard.
cldrStatus.setCurrentSpecial(url);
Expand Down
94 changes: 3 additions & 91 deletions tools/cldr-apps/js/src/esm/cldrGui.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* cldrGui: encapsulate GUI functions for Survey Tool
*/
import * as cldrAjax from "./cldrAjax.mjs";
import * as cldrDrag from "./cldrDrag.mjs";
import * as cldrDashContext from "./cldrDashContext.mjs";
import * as cldrEvent from "./cldrEvent.mjs";
import * as cldrForum from "./cldrForum.mjs";
import * as cldrInfo from "./cldrInfo.mjs";
Expand All @@ -14,17 +14,13 @@ import * as cldrStatus from "./cldrStatus.mjs";
import * as cldrSurvey from "./cldrSurvey.mjs";
import * as cldrVue from "./cldrVue.mjs";

import DashboardWidget from "../views/DashboardWidget.vue";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, not new!

import MainHeader from "../views/MainHeader.vue";

const GUI_DEBUG = true;

const runGuiId = "st-run-gui";

let mainHeaderWrapper = null;
let dashboardWidgetWrapper = null;

let dashboardVisible = false;

/**
* Set up the DOM and start executing Survey Tool as a single page app
Expand Down Expand Up @@ -162,10 +158,7 @@ function setOnClicks() {
if (el) {
el.onclick = () => cldrForum.reload();
}
let els = document.getElementsByClassName("open-dash");
for (let i = 0; i < els.length; i++) {
els[i].onclick = () => insertDashboard();
}
cldrDashContext.wireUpOpenButtons();
}

const leftSidebar =
Expand Down Expand Up @@ -411,86 +404,10 @@ function updateWithStatus() {
* add more widgets/components that depend on coverage level.
*/
function updateWidgetsWithCoverage(newLevel) {
if (dashboardVisible) {
dashboardWidgetWrapper?.handleCoverageChanged(newLevel);
}
cldrDashContext.updateWithCoverage(newLevel);
cldrProgress.updateWidgetsWithCoverage();
}

/**
* Create or reopen the DashboardWidget Vue component
*/
function insertDashboard() {
if (dashboardVisible) {
return; // already inserted and visible
}
try {
if (dashboardWidgetWrapper) {
// already created/inserted but invisible
dashboardWidgetWrapper.reopen();
} else {
const el = document.getElementById("DashboardSection");
dashboardWidgetWrapper = cldrVue.mountReplace(DashboardWidget, el);
}
showDashboard();
} catch (e) {
cldrNotify.exception(e, "loading Dashboard");
console.error("Error mounting dashboard vue " + e.message + " / " + e.name);
}
}

/**
* Show the dashboard
*/
function showDashboard() {
if (dashboardVisible) {
return;
}
const vote = document.getElementById("VotingEtcSection");
const dash = document.getElementById("DashboardSection");
if (vote && dash) {
vote.style.height = "50%";
dash.style.height = "50%";
dash.style.display = "flex";
let els = document.getElementsByClassName("open-dash");
for (let i = 0; i < els.length; i++) {
els[i].style.display = "none";
}
dashboardVisible = true;
cldrDrag.enable(vote, dash, true /* up/down */);
}
}

/**
* Hide the dashboard
*/
function hideDashboard() {
if (!dashboardVisible) {
return;
}
const vote = document.getElementById("VotingEtcSection");
const dash = document.getElementById("DashboardSection");
if (vote && dash) {
vote.style.height = "100%";
dash.style.display = "none";
let els = document.getElementsByClassName("open-dash");
for (let i = 0; i < els.length; i++) {
els[i].style.display = "inline";
}
dashboardVisible = false;
}
}

function dashboardIsVisible() {
return dashboardVisible; // boolean
}

function updateDashboardRow(json) {
if (dashboardVisible) {
dashboardWidgetWrapper?.updatePath(json);
}
}

function setToptitleVisibility(visible) {
const topTitle = document.getElementById("toptitle");
if (topTitle) {
Expand All @@ -513,14 +430,9 @@ function refreshCounterVetting() {
}

export {
dashboardIsVisible,
hideDashboard,
insertDashboard,
refreshCounterVetting,
run,
setToptitleVisibility,
showDashboard,
updateDashboardRow,
updateWidgetsWithCoverage,
updateWithStatus,
/*
Expand Down
5 changes: 3 additions & 2 deletions tools/cldr-apps/js/src/esm/cldrLoad.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import * as cldrAjax from "./cldrAjax.mjs";
import * as cldrBulkClosePosts from "./cldrBulkClosePosts.mjs";
import * as cldrCoverage from "./cldrCoverage.mjs";
import * as cldrCreateLogin from "./cldrCreateLogin.mjs";
import * as cldrDashContext from "./cldrDashContext.mjs";
import * as cldrDom from "./cldrDom.mjs";
import * as cldrErrorSubtypes from "./cldrErrorSubtypes.mjs";
import * as cldrEvent from "./cldrEvent.mjs";
Expand Down Expand Up @@ -109,7 +110,7 @@ function doHashChange(event) {
const changedSpecial = oldSpecial != curSpecial;
const changedPage = oldPage != trimNull(cldrStatus.getCurrentPage());
if (changedLocale || (changedSpecial && curSpecial)) {
cldrGui.hideDashboard();
cldrDashContext.hide();
}
if (changedLocale || changedSpecial || changedPage) {
console.log("# hash changed, (loc, etc) reloadingV..");
Expand Down Expand Up @@ -610,7 +611,7 @@ function specialLoad(itemLoadInfo, curSpecial, theDiv) {
if (special && special.load) {
cldrEvent.hideOverlayAndSidebar();
if (curSpecial !== "general") {
cldrGui.hideDashboard();
cldrDashContext.hide();
}
cldrInfo.closePanel(false /* userWantsHidden */);
// Most special.load() functions do not use a parameter; an exception is
Expand Down
4 changes: 2 additions & 2 deletions tools/cldr-apps/js/src/esm/cldrProgress.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
import * as cldrAjax from "./cldrAjax.mjs";
import * as cldrCoverage from "./cldrCoverage.mjs";
import * as cldrGui from "./cldrGui.mjs";
import * as cldrDashContext from "./cldrDashContext.mjs";
import * as cldrNotify from "./cldrNotify.mjs";
import * as cldrSchedule from "./cldrSchedule.mjs";
import * as cldrStatus from "./cldrStatus.mjs";
Expand Down Expand Up @@ -172,7 +172,7 @@ function refreshPageMeter() {

function refreshVoterMeter() {
if (voterProgressStats) {
if (!cldrGui.dashboardIsVisible()) {
if (!cldrDashContext.isVisible()) {
voterProgressStats = null;
progressWrapper?.updateVoterMeter(new MeterData());
} else {
Expand Down
9 changes: 5 additions & 4 deletions tools/cldr-apps/js/src/esm/cldrTable.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
import * as cldrAddAlt from "./cldrAddAlt.mjs";
import * as cldrAjax from "./cldrAjax.mjs";
import * as cldrCoverage from "./cldrCoverage.mjs";
import * as cldrDashContext from "./cldrDashContext.mjs";
import * as cldrDom from "./cldrDom.mjs";
import * as cldrEvent from "./cldrEvent.mjs";
import * as cldrGui from "./cldrGui.mjs";
Expand Down Expand Up @@ -304,7 +305,7 @@ function refreshSingleRow(tr, theRow, onSuccess, onFailure) {
cldrSurvey.showLoader(cldrText.get("loadingOneRow"));

const xhrArgs = {
url: getSingleRowUrl(tr, theRow),
url: getSingleRowUrl(theRow),
handleAs: "json",
load: closureLoadHandler,
error: closureErrHandler,
Expand Down Expand Up @@ -342,7 +343,7 @@ function singleRowLoadHandler(json, tr, theRow, onSuccess, onFailure) {
"singleRowLoadHandler after onSuccess time = " + Date.now()
);
}
cldrGui.updateDashboardRow(json);
cldrDashContext.updateRow(json);
cldrInfo.showRowObjFunc(tr, tr.proposedcell, tr.proposedcell.showFn);
if (CLDR_TABLE_DEBUG) {
console.log(
Expand Down Expand Up @@ -385,11 +386,11 @@ function singleRowErrHandler(err, tr, onFailure) {
onFailure("err", err);
}

function getSingleRowUrl(tr, theRow) {
function getSingleRowUrl(theRow) {
const loc = cldrStatus.getCurrentLocale();
const api = "voting/" + loc + "/row/" + theRow.xpstrid;
let p = null;
if (cldrGui.dashboardIsVisible()) {
if (cldrDashContext.isVisible()) {
p = new URLSearchParams();
p.append("dashboard", "true");
}
Expand Down
Loading
Loading