prettyify code
This commit is contained in:
@ -1,80 +1,87 @@
|
||||
import uPlot from 'uplot'
|
||||
import uPlot from "uplot";
|
||||
|
||||
import { RelativeScale } from './scale'
|
||||
import { RelativeScale } from "./scale";
|
||||
|
||||
import { formatNumber, formatTimestampSeconds } from './util'
|
||||
import { uPlotTooltipPlugin } from './plugins'
|
||||
import { uPlotTooltipPlugin } from "./plugins";
|
||||
import { formatNumber, formatTimestampSeconds } from "./util";
|
||||
|
||||
import { FAVORITE_SERVERS_STORAGE_KEY } from './favorites'
|
||||
import { FAVORITE_SERVERS_STORAGE_KEY } from "./favorites";
|
||||
|
||||
const HIDDEN_SERVERS_STORAGE_KEY = 'minetrack_hidden_servers'
|
||||
const SHOW_FAVORITES_STORAGE_KEY = 'minetrack_show_favorites'
|
||||
const HIDDEN_SERVERS_STORAGE_KEY = "minetrack_hidden_servers";
|
||||
const SHOW_FAVORITES_STORAGE_KEY = "minetrack_show_favorites";
|
||||
|
||||
export class GraphDisplayManager {
|
||||
constructor (app) {
|
||||
this._app = app
|
||||
this._graphData = []
|
||||
this._graphTimestamps = []
|
||||
this._hasLoadedSettings = false
|
||||
this._initEventListenersOnce = false
|
||||
this._showOnlyFavorites = false
|
||||
constructor(app) {
|
||||
this._app = app;
|
||||
this._graphData = [];
|
||||
this._graphTimestamps = [];
|
||||
this._hasLoadedSettings = false;
|
||||
this._initEventListenersOnce = false;
|
||||
this._showOnlyFavorites = false;
|
||||
}
|
||||
|
||||
addGraphPoint (timestamp, playerCounts) {
|
||||
addGraphPoint(timestamp, playerCounts) {
|
||||
if (!this._hasLoadedSettings) {
|
||||
// _hasLoadedSettings is controlled by #setGraphData
|
||||
// It will only be true once the context has been loaded and initial payload received
|
||||
// #addGraphPoint should not be called prior to that since it means the data is racing
|
||||
// and the application has received updates prior to the initial state
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate isZoomed before mutating graphData otherwise the indexed values
|
||||
// are out of date and will always fail when compared to plotScaleX.min/max
|
||||
const plotScaleX = this._plotInstance.scales.x
|
||||
const isZoomed = plotScaleX.min > this._graphTimestamps[0] || plotScaleX.max < this._graphTimestamps[this._graphTimestamps.length - 1]
|
||||
const plotScaleX = this._plotInstance.scales.x;
|
||||
const isZoomed =
|
||||
plotScaleX.min > this._graphTimestamps[0] ||
|
||||
plotScaleX.max < this._graphTimestamps[this._graphTimestamps.length - 1];
|
||||
|
||||
this._graphTimestamps.push(timestamp)
|
||||
this._graphTimestamps.push(timestamp);
|
||||
|
||||
for (let i = 0; i < playerCounts.length; i++) {
|
||||
this._graphData[i].push(playerCounts[i])
|
||||
this._graphData[i].push(playerCounts[i]);
|
||||
}
|
||||
|
||||
// Trim all data arrays to only the relevant portion
|
||||
// This keeps it in sync with backend data structures
|
||||
const graphMaxLength = this._app.publicConfig.graphMaxLength
|
||||
const graphMaxLength = this._app.publicConfig.graphMaxLength;
|
||||
|
||||
if (this._graphTimestamps.length > graphMaxLength) {
|
||||
this._graphTimestamps.splice(0, this._graphTimestamps.length - graphMaxLength)
|
||||
this._graphTimestamps.splice(
|
||||
0,
|
||||
this._graphTimestamps.length - graphMaxLength
|
||||
);
|
||||
}
|
||||
|
||||
for (const series of this._graphData) {
|
||||
if (series.length > graphMaxLength) {
|
||||
series.splice(0, series.length - graphMaxLength)
|
||||
series.splice(0, series.length - graphMaxLength);
|
||||
}
|
||||
}
|
||||
|
||||
// Avoid redrawing the plot when zoomed
|
||||
this._plotInstance.setData(this.getGraphData(), !isZoomed)
|
||||
this._plotInstance.setData(this.getGraphData(), !isZoomed);
|
||||
}
|
||||
|
||||
loadLocalStorage () {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const showOnlyFavorites = localStorage.getItem(SHOW_FAVORITES_STORAGE_KEY)
|
||||
loadLocalStorage() {
|
||||
if (typeof localStorage !== "undefined") {
|
||||
const showOnlyFavorites = localStorage.getItem(
|
||||
SHOW_FAVORITES_STORAGE_KEY
|
||||
);
|
||||
if (showOnlyFavorites) {
|
||||
this._showOnlyFavorites = true
|
||||
this._showOnlyFavorites = true;
|
||||
}
|
||||
|
||||
// If only favorites mode is active, use the stored favorite servers data instead
|
||||
let serverNames
|
||||
let serverNames;
|
||||
if (this._showOnlyFavorites) {
|
||||
serverNames = localStorage.getItem(FAVORITE_SERVERS_STORAGE_KEY)
|
||||
serverNames = localStorage.getItem(FAVORITE_SERVERS_STORAGE_KEY);
|
||||
} else {
|
||||
serverNames = localStorage.getItem(HIDDEN_SERVERS_STORAGE_KEY)
|
||||
serverNames = localStorage.getItem(HIDDEN_SERVERS_STORAGE_KEY);
|
||||
}
|
||||
|
||||
if (serverNames) {
|
||||
serverNames = JSON.parse(serverNames)
|
||||
serverNames = JSON.parse(serverNames);
|
||||
|
||||
// Iterate over all active serverRegistrations
|
||||
// This merges saved state with current state to prevent desyncs
|
||||
@ -83,384 +90,429 @@ export class GraphDisplayManager {
|
||||
// OR, if it is NOT contains within HIDDEN_SERVERS_STORAGE_KEY
|
||||
// Checks between FAVORITE/HIDDEN keys are mutually exclusive
|
||||
if (this._showOnlyFavorites) {
|
||||
serverRegistration.isVisible = serverNames.indexOf(serverRegistration.data.name) >= 0
|
||||
serverRegistration.isVisible =
|
||||
serverNames.indexOf(serverRegistration.data.name) >= 0;
|
||||
} else {
|
||||
serverRegistration.isVisible = serverNames.indexOf(serverRegistration.data.name) < 0
|
||||
serverRegistration.isVisible =
|
||||
serverNames.indexOf(serverRegistration.data.name) < 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateLocalStorage () {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
updateLocalStorage() {
|
||||
if (typeof localStorage !== "undefined") {
|
||||
// Mutate the serverIds array into server names for storage use
|
||||
const serverNames = this._app.serverRegistry.getServerRegistrations()
|
||||
.filter(serverRegistration => !serverRegistration.isVisible)
|
||||
.map(serverRegistration => serverRegistration.data.name)
|
||||
const serverNames = this._app.serverRegistry
|
||||
.getServerRegistrations()
|
||||
.filter((serverRegistration) => !serverRegistration.isVisible)
|
||||
.map((serverRegistration) => serverRegistration.data.name);
|
||||
|
||||
// Only store if the array contains data, otherwise clear the item
|
||||
// If showOnlyFavorites is true, do NOT store serverNames since the state will be auto managed instead
|
||||
if (serverNames.length > 0 && !this._showOnlyFavorites) {
|
||||
localStorage.setItem(HIDDEN_SERVERS_STORAGE_KEY, JSON.stringify(serverNames))
|
||||
localStorage.setItem(
|
||||
HIDDEN_SERVERS_STORAGE_KEY,
|
||||
JSON.stringify(serverNames)
|
||||
);
|
||||
} else {
|
||||
localStorage.removeItem(HIDDEN_SERVERS_STORAGE_KEY)
|
||||
localStorage.removeItem(HIDDEN_SERVERS_STORAGE_KEY);
|
||||
}
|
||||
|
||||
// Only store SHOW_FAVORITES_STORAGE_KEY if true
|
||||
if (this._showOnlyFavorites) {
|
||||
localStorage.setItem(SHOW_FAVORITES_STORAGE_KEY, true)
|
||||
localStorage.setItem(SHOW_FAVORITES_STORAGE_KEY, true);
|
||||
} else {
|
||||
localStorage.removeItem(SHOW_FAVORITES_STORAGE_KEY)
|
||||
localStorage.removeItem(SHOW_FAVORITES_STORAGE_KEY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getVisibleGraphData () {
|
||||
return this._app.serverRegistry.getServerRegistrations()
|
||||
.filter(serverRegistration => serverRegistration.isVisible)
|
||||
.map(serverRegistration => this._graphData[serverRegistration.serverId])
|
||||
getVisibleGraphData() {
|
||||
return this._app.serverRegistry
|
||||
.getServerRegistrations()
|
||||
.filter((serverRegistration) => serverRegistration.isVisible)
|
||||
.map(
|
||||
(serverRegistration) => this._graphData[serverRegistration.serverId]
|
||||
);
|
||||
}
|
||||
|
||||
getPlotSize () {
|
||||
getPlotSize() {
|
||||
return {
|
||||
width: Math.max(window.innerWidth, 800) * 0.9,
|
||||
height: 400
|
||||
height: 400,
|
||||
};
|
||||
}
|
||||
|
||||
getGraphData() {
|
||||
return [this._graphTimestamps, ...this._graphData];
|
||||
}
|
||||
|
||||
getGraphDataPoint(serverId, index) {
|
||||
const graphData = this._graphData[serverId];
|
||||
if (
|
||||
graphData &&
|
||||
index < graphData.length &&
|
||||
typeof graphData[index] === "number"
|
||||
) {
|
||||
return graphData[index];
|
||||
}
|
||||
}
|
||||
|
||||
getGraphData () {
|
||||
return [
|
||||
this._graphTimestamps,
|
||||
...this._graphData
|
||||
]
|
||||
}
|
||||
getClosestPlotSeriesIndex(idx) {
|
||||
let closestSeriesIndex = -1;
|
||||
let closestSeriesDist = Number.MAX_VALUE;
|
||||
|
||||
getGraphDataPoint (serverId, index) {
|
||||
const graphData = this._graphData[serverId]
|
||||
if (graphData && index < graphData.length && typeof graphData[index] === 'number') {
|
||||
return graphData[index]
|
||||
}
|
||||
}
|
||||
|
||||
getClosestPlotSeriesIndex (idx) {
|
||||
let closestSeriesIndex = -1
|
||||
let closestSeriesDist = Number.MAX_VALUE
|
||||
|
||||
const plotHeight = this._plotInstance.bbox.height / devicePixelRatio
|
||||
const plotHeight = this._plotInstance.bbox.height / devicePixelRatio;
|
||||
|
||||
for (let i = 1; i < this._plotInstance.series.length; i++) {
|
||||
const series = this._plotInstance.series[i]
|
||||
const series = this._plotInstance.series[i];
|
||||
|
||||
if (!series.show) {
|
||||
continue
|
||||
continue;
|
||||
}
|
||||
|
||||
const point = this._plotInstance.data[i][idx]
|
||||
const point = this._plotInstance.data[i][idx];
|
||||
|
||||
if (typeof point === 'number') {
|
||||
const scale = this._plotInstance.scales[series.scale]
|
||||
const posY = (1 - ((point - scale.min) / (scale.max - scale.min))) * plotHeight
|
||||
if (typeof point === "number") {
|
||||
const scale = this._plotInstance.scales[series.scale];
|
||||
const posY =
|
||||
(1 - (point - scale.min) / (scale.max - scale.min)) * plotHeight;
|
||||
|
||||
const dist = Math.abs(posY - this._plotInstance.cursor.top)
|
||||
const dist = Math.abs(posY - this._plotInstance.cursor.top);
|
||||
|
||||
if (dist < closestSeriesDist) {
|
||||
closestSeriesIndex = i
|
||||
closestSeriesDist = dist
|
||||
closestSeriesIndex = i;
|
||||
closestSeriesDist = dist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return closestSeriesIndex
|
||||
return closestSeriesIndex;
|
||||
}
|
||||
|
||||
buildPlotInstance (timestamps, data) {
|
||||
buildPlotInstance(timestamps, data) {
|
||||
// Lazy load settings from localStorage, if any and if enabled
|
||||
if (!this._hasLoadedSettings) {
|
||||
this._hasLoadedSettings = true
|
||||
this._hasLoadedSettings = true;
|
||||
|
||||
this.loadLocalStorage()
|
||||
this.loadLocalStorage();
|
||||
}
|
||||
|
||||
for (const playerCounts of data) {
|
||||
// Each playerCounts value corresponds to a ServerRegistration
|
||||
// Require each array is the length of timestamps, if not, pad at the start with null values to fit to length
|
||||
// This ensures newer ServerRegistrations do not left align due to a lower length
|
||||
const lengthDiff = timestamps.length - playerCounts.length
|
||||
const lengthDiff = timestamps.length - playerCounts.length;
|
||||
|
||||
if (lengthDiff > 0) {
|
||||
const padding = Array(lengthDiff).fill(null)
|
||||
const padding = Array(lengthDiff).fill(null);
|
||||
|
||||
playerCounts.unshift(...padding)
|
||||
playerCounts.unshift(...padding);
|
||||
}
|
||||
}
|
||||
|
||||
this._graphTimestamps = timestamps
|
||||
this._graphData = data
|
||||
this._graphTimestamps = timestamps;
|
||||
this._graphData = data;
|
||||
|
||||
const series = this._app.serverRegistry.getServerRegistrations().map(serverRegistration => {
|
||||
return {
|
||||
stroke: serverRegistration.data.color,
|
||||
width: 2,
|
||||
value: (_, raw) => `${formatNumber(raw)} Players`,
|
||||
show: serverRegistration.isVisible,
|
||||
spanGaps: true,
|
||||
points: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
})
|
||||
const series = this._app.serverRegistry
|
||||
.getServerRegistrations()
|
||||
.map((serverRegistration) => {
|
||||
return {
|
||||
stroke: serverRegistration.data.color,
|
||||
width: 2,
|
||||
value: (_, raw) => `${formatNumber(raw)} Players`,
|
||||
show: serverRegistration.isVisible,
|
||||
spanGaps: true,
|
||||
points: {
|
||||
show: false,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const tickCount = 10
|
||||
const maxFactor = 4
|
||||
const tickCount = 10;
|
||||
const maxFactor = 4;
|
||||
|
||||
// eslint-disable-next-line new-cap
|
||||
this._plotInstance = new uPlot({
|
||||
plugins: [
|
||||
uPlotTooltipPlugin((pos, idx) => {
|
||||
if (pos) {
|
||||
const closestSeriesIndex = this.getClosestPlotSeriesIndex(idx)
|
||||
this._plotInstance = new uPlot(
|
||||
{
|
||||
plugins: [
|
||||
uPlotTooltipPlugin((pos, idx) => {
|
||||
if (pos) {
|
||||
const closestSeriesIndex = this.getClosestPlotSeriesIndex(idx);
|
||||
|
||||
const text = this._app.serverRegistry.getServerRegistrations()
|
||||
.filter(serverRegistration => serverRegistration.isVisible)
|
||||
.sort((a, b) => {
|
||||
if (a.isFavorite !== b.isFavorite) {
|
||||
return a.isFavorite ? -1 : 1
|
||||
} else {
|
||||
return a.data.name.localeCompare(b.data.name)
|
||||
}
|
||||
})
|
||||
.map(serverRegistration => {
|
||||
const point = this.getGraphDataPoint(serverRegistration.serverId, idx)
|
||||
const text =
|
||||
this._app.serverRegistry
|
||||
.getServerRegistrations()
|
||||
.filter((serverRegistration) => serverRegistration.isVisible)
|
||||
.sort((a, b) => {
|
||||
if (a.isFavorite !== b.isFavorite) {
|
||||
return a.isFavorite ? -1 : 1;
|
||||
} else {
|
||||
return a.data.name.localeCompare(b.data.name);
|
||||
}
|
||||
})
|
||||
.map((serverRegistration) => {
|
||||
const point = this.getGraphDataPoint(
|
||||
serverRegistration.serverId,
|
||||
idx
|
||||
);
|
||||
|
||||
let serverName = serverRegistration.data.name
|
||||
if (closestSeriesIndex === serverRegistration.getGraphDataIndex()) {
|
||||
serverName = `<strong>${serverName}</strong>`
|
||||
}
|
||||
if (serverRegistration.isFavorite) {
|
||||
serverName = `<span class="${this._app.favoritesManager.getIconClass(true)}"></span> ${serverName}`
|
||||
}
|
||||
let serverName = serverRegistration.data.name;
|
||||
if (
|
||||
closestSeriesIndex ===
|
||||
serverRegistration.getGraphDataIndex()
|
||||
) {
|
||||
serverName = `<strong>${serverName}</strong>`;
|
||||
}
|
||||
if (serverRegistration.isFavorite) {
|
||||
serverName = `<span class="${this._app.favoritesManager.getIconClass(
|
||||
true
|
||||
)}"></span> ${serverName}`;
|
||||
}
|
||||
|
||||
return `${serverName}: ${formatNumber(point)}`
|
||||
}).join('<br>') + `<br><br><strong>${formatTimestampSeconds(this._graphTimestamps[idx])}</strong>`
|
||||
return `${serverName}: ${formatNumber(point)}`;
|
||||
})
|
||||
.join("<br>") +
|
||||
`<br><br><strong>${formatTimestampSeconds(
|
||||
this._graphTimestamps[idx]
|
||||
)}</strong>`;
|
||||
|
||||
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
|
||||
} else {
|
||||
this._app.tooltip.hide()
|
||||
}
|
||||
})
|
||||
],
|
||||
...this.getPlotSize(),
|
||||
cursor: {
|
||||
y: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
this._app.tooltip.set(pos.left, pos.top, 10, 10, text);
|
||||
} else {
|
||||
this._app.tooltip.hide();
|
||||
}
|
||||
}),
|
||||
],
|
||||
...this.getPlotSize(),
|
||||
cursor: {
|
||||
y: false,
|
||||
},
|
||||
...series
|
||||
],
|
||||
axes: [
|
||||
{
|
||||
font: '14px "Open Sans", sans-serif',
|
||||
stroke: '#FFF',
|
||||
grid: {
|
||||
show: false
|
||||
series: [{}, ...series],
|
||||
axes: [
|
||||
{
|
||||
font: '14px "Open Sans", sans-serif',
|
||||
stroke: "#FFF",
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
space: 60,
|
||||
},
|
||||
{
|
||||
font: '14px "Open Sans", sans-serif',
|
||||
stroke: "#FFF",
|
||||
size: 65,
|
||||
grid: {
|
||||
stroke: "#333",
|
||||
width: 1,
|
||||
},
|
||||
split: () => {
|
||||
const visibleGraphData = this.getVisibleGraphData();
|
||||
const { scaledMax, scale } = RelativeScale.scaleMatrix(
|
||||
visibleGraphData,
|
||||
tickCount,
|
||||
maxFactor
|
||||
);
|
||||
const ticks = RelativeScale.generateTicks(0, scaledMax, scale);
|
||||
return ticks;
|
||||
},
|
||||
},
|
||||
],
|
||||
scales: {
|
||||
y: {
|
||||
auto: false,
|
||||
range: () => {
|
||||
const visibleGraphData = this.getVisibleGraphData();
|
||||
const { scaledMin, scaledMax } = RelativeScale.scaleMatrix(
|
||||
visibleGraphData,
|
||||
tickCount,
|
||||
maxFactor
|
||||
);
|
||||
return [scaledMin, scaledMax];
|
||||
},
|
||||
},
|
||||
space: 60
|
||||
},
|
||||
{
|
||||
font: '14px "Open Sans", sans-serif',
|
||||
stroke: '#FFF',
|
||||
size: 65,
|
||||
grid: {
|
||||
stroke: '#333',
|
||||
width: 1
|
||||
},
|
||||
split: () => {
|
||||
const visibleGraphData = this.getVisibleGraphData()
|
||||
const { scaledMax, scale } = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
|
||||
const ticks = RelativeScale.generateTicks(0, scaledMax, scale)
|
||||
return ticks
|
||||
}
|
||||
}
|
||||
],
|
||||
scales: {
|
||||
y: {
|
||||
auto: false,
|
||||
range: () => {
|
||||
const visibleGraphData = this.getVisibleGraphData()
|
||||
const { scaledMin, scaledMax } = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
|
||||
return [scaledMin, scaledMax]
|
||||
}
|
||||
}
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}, this.getGraphData(), document.getElementById('big-graph'))
|
||||
this.getGraphData(),
|
||||
document.getElementById("big-graph")
|
||||
);
|
||||
|
||||
// Show the settings-toggle element
|
||||
document.getElementById('settings-toggle').style.display = 'inline-block'
|
||||
document.getElementById("settings-toggle").style.display = "inline-block";
|
||||
}
|
||||
|
||||
redraw = () => {
|
||||
// Use drawing as a hint to update settings
|
||||
// This may cause unnessecary localStorage updates, but its a rare and harmless outcome
|
||||
this.updateLocalStorage()
|
||||
this.updateLocalStorage();
|
||||
|
||||
// Copy application state into the series data used by uPlot
|
||||
for (const serverRegistration of this._app.serverRegistry.getServerRegistrations()) {
|
||||
this._plotInstance.series[serverRegistration.getGraphDataIndex()].show = serverRegistration.isVisible
|
||||
this._plotInstance.series[serverRegistration.getGraphDataIndex()].show =
|
||||
serverRegistration.isVisible;
|
||||
}
|
||||
|
||||
this._plotInstance.redraw()
|
||||
}
|
||||
this._plotInstance.redraw();
|
||||
};
|
||||
|
||||
requestResize () {
|
||||
requestResize() {
|
||||
// Only resize when _plotInstance is defined
|
||||
// Set a timeout to resize after resize events have not been fired for some duration of time
|
||||
// This prevents burning CPU time for multiple, rapid resize events
|
||||
if (this._plotInstance) {
|
||||
if (this._resizeRequestTimeout) {
|
||||
clearTimeout(this._resizeRequestTimeout)
|
||||
clearTimeout(this._resizeRequestTimeout);
|
||||
}
|
||||
|
||||
// Schedule new delayed resize call
|
||||
// This can be cancelled by #requestResize, #resize and #reset
|
||||
this._resizeRequestTimeout = setTimeout(this.resize, 200)
|
||||
this._resizeRequestTimeout = setTimeout(this.resize, 200);
|
||||
}
|
||||
}
|
||||
|
||||
resize = () => {
|
||||
this._plotInstance.setSize(this.getPlotSize())
|
||||
this._plotInstance.setSize(this.getPlotSize());
|
||||
|
||||
// undefine value so #clearTimeout is not called
|
||||
// This is safe even if #resize is manually called since it removes the pending work
|
||||
if (this._resizeRequestTimeout) {
|
||||
clearTimeout(this._resizeRequestTimeout)
|
||||
clearTimeout(this._resizeRequestTimeout);
|
||||
}
|
||||
|
||||
this._resizeRequestTimeout = undefined
|
||||
}
|
||||
this._resizeRequestTimeout = undefined;
|
||||
};
|
||||
|
||||
initEventListeners () {
|
||||
initEventListeners() {
|
||||
if (!this._initEventListenersOnce) {
|
||||
this._initEventListenersOnce = true
|
||||
this._initEventListenersOnce = true;
|
||||
|
||||
// These listeners should only be init once since they attach to persistent elements
|
||||
document.getElementById('settings-toggle').addEventListener('click', this.handleSettingsToggle, false)
|
||||
document
|
||||
.getElementById("settings-toggle")
|
||||
.addEventListener("click", this.handleSettingsToggle, false);
|
||||
|
||||
document.querySelectorAll('.graph-controls-show').forEach((element) => {
|
||||
element.addEventListener('click', this.handleShowButtonClick, false)
|
||||
})
|
||||
document.querySelectorAll(".graph-controls-show").forEach((element) => {
|
||||
element.addEventListener("click", this.handleShowButtonClick, false);
|
||||
});
|
||||
}
|
||||
|
||||
// These listeners should be bound each #initEventListeners call since they are for newly created elements
|
||||
document.querySelectorAll('.graph-control').forEach((element) => {
|
||||
element.addEventListener('click', this.handleServerButtonClick, false)
|
||||
})
|
||||
document.querySelectorAll(".graph-control").forEach((element) => {
|
||||
element.addEventListener("click", this.handleServerButtonClick, false);
|
||||
});
|
||||
}
|
||||
|
||||
handleServerButtonClick = (event) => {
|
||||
const serverId = parseInt(event.target.getAttribute('minetrack-server-id'))
|
||||
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverId)
|
||||
const serverId = parseInt(event.target.getAttribute("minetrack-server-id"));
|
||||
const serverRegistration =
|
||||
this._app.serverRegistry.getServerRegistration(serverId);
|
||||
|
||||
if (serverRegistration.isVisible !== event.target.checked) {
|
||||
serverRegistration.isVisible = event.target.checked
|
||||
serverRegistration.isVisible = event.target.checked;
|
||||
|
||||
// Any manual changes automatically disables "Only Favorites" mode
|
||||
// Otherwise the auto management might overwrite their manual changes
|
||||
this._showOnlyFavorites = false
|
||||
this._showOnlyFavorites = false;
|
||||
|
||||
this.redraw()
|
||||
this.redraw();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleShowButtonClick = (event) => {
|
||||
const showType = event.target.getAttribute('minetrack-show-type')
|
||||
const showType = event.target.getAttribute("minetrack-show-type");
|
||||
|
||||
// If set to "Only Favorites", set internal state so that
|
||||
// visible graphData is automatically updating when a ServerRegistration's #isVisible changes
|
||||
// This is also saved and loaded by #loadLocalStorage & #updateLocalStorage
|
||||
this._showOnlyFavorites = showType === 'favorites'
|
||||
this._showOnlyFavorites = showType === "favorites";
|
||||
|
||||
let redraw = false
|
||||
let redraw = false;
|
||||
|
||||
this._app.serverRegistry.getServerRegistrations().forEach(function (serverRegistration) {
|
||||
let isVisible
|
||||
if (showType === 'all') {
|
||||
isVisible = true
|
||||
} else if (showType === 'none') {
|
||||
isVisible = false
|
||||
} else if (showType === 'favorites') {
|
||||
isVisible = serverRegistration.isFavorite
|
||||
}
|
||||
this._app.serverRegistry
|
||||
.getServerRegistrations()
|
||||
.forEach(function (serverRegistration) {
|
||||
let isVisible;
|
||||
if (showType === "all") {
|
||||
isVisible = true;
|
||||
} else if (showType === "none") {
|
||||
isVisible = false;
|
||||
} else if (showType === "favorites") {
|
||||
isVisible = serverRegistration.isFavorite;
|
||||
}
|
||||
|
||||
if (serverRegistration.isVisible !== isVisible) {
|
||||
serverRegistration.isVisible = isVisible
|
||||
redraw = true
|
||||
}
|
||||
})
|
||||
if (serverRegistration.isVisible !== isVisible) {
|
||||
serverRegistration.isVisible = isVisible;
|
||||
redraw = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (redraw) {
|
||||
this.redraw()
|
||||
this.updateCheckboxes()
|
||||
this.redraw();
|
||||
this.updateCheckboxes();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleSettingsToggle = () => {
|
||||
const element = document.getElementById('big-graph-controls-drawer')
|
||||
const element = document.getElementById("big-graph-controls-drawer");
|
||||
|
||||
if (element.style.display !== 'block') {
|
||||
element.style.display = 'block'
|
||||
if (element.style.display !== "block") {
|
||||
element.style.display = "block";
|
||||
} else {
|
||||
element.style.display = 'none'
|
||||
element.style.display = "none";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleServerIsFavoriteUpdate = (serverRegistration) => {
|
||||
// When in "Only Favorites" mode, visibility is dependent on favorite status
|
||||
// Redraw and update elements as needed
|
||||
if (this._showOnlyFavorites && serverRegistration.isVisible !== serverRegistration.isFavorite) {
|
||||
serverRegistration.isVisible = serverRegistration.isFavorite
|
||||
if (
|
||||
this._showOnlyFavorites &&
|
||||
serverRegistration.isVisible !== serverRegistration.isFavorite
|
||||
) {
|
||||
serverRegistration.isVisible = serverRegistration.isFavorite;
|
||||
|
||||
this.redraw()
|
||||
this.updateCheckboxes()
|
||||
this.redraw();
|
||||
this.updateCheckboxes();
|
||||
}
|
||||
};
|
||||
|
||||
updateCheckboxes() {
|
||||
document.querySelectorAll(".graph-control").forEach((checkbox) => {
|
||||
const serverId = parseInt(checkbox.getAttribute("minetrack-server-id"));
|
||||
const serverRegistration =
|
||||
this._app.serverRegistry.getServerRegistration(serverId);
|
||||
|
||||
checkbox.checked = serverRegistration.isVisible;
|
||||
});
|
||||
}
|
||||
|
||||
updateCheckboxes () {
|
||||
document.querySelectorAll('.graph-control').forEach((checkbox) => {
|
||||
const serverId = parseInt(checkbox.getAttribute('minetrack-server-id'))
|
||||
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverId)
|
||||
|
||||
checkbox.checked = serverRegistration.isVisible
|
||||
})
|
||||
}
|
||||
|
||||
reset () {
|
||||
reset() {
|
||||
// Destroy graphs and unload references
|
||||
// uPlot#destroy handles listener de-registration, DOM reset, etc
|
||||
if (this._plotInstance) {
|
||||
this._plotInstance.destroy()
|
||||
this._plotInstance = undefined
|
||||
this._plotInstance.destroy();
|
||||
this._plotInstance = undefined;
|
||||
}
|
||||
|
||||
this._graphTimestamps = []
|
||||
this._graphData = []
|
||||
this._hasLoadedSettings = false
|
||||
this._graphTimestamps = [];
|
||||
this._graphData = [];
|
||||
this._hasLoadedSettings = false;
|
||||
|
||||
// Fire #clearTimeout if the timeout is currently defined
|
||||
if (this._resizeRequestTimeout) {
|
||||
clearTimeout(this._resizeRequestTimeout)
|
||||
clearTimeout(this._resizeRequestTimeout);
|
||||
|
||||
this._resizeRequestTimeout = undefined
|
||||
this._resizeRequestTimeout = undefined;
|
||||
}
|
||||
|
||||
// Reset modified DOM structures
|
||||
document.getElementById('big-graph-checkboxes').innerHTML = ''
|
||||
document.getElementById('big-graph-controls').style.display = 'none'
|
||||
document.getElementById("big-graph-checkboxes").innerHTML = "";
|
||||
document.getElementById("big-graph-controls").style.display = "none";
|
||||
|
||||
document.getElementById('settings-toggle').style.display = 'none'
|
||||
document.getElementById("settings-toggle").style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user