New hover tooltip layout, use template literals
This commit is contained in:
parent
2336c9f78b
commit
d48c5afc9b
@ -20,7 +20,7 @@ export class FavoritesManager {
|
|||||||
serverRegistration.isFavorite = true
|
serverRegistration.isFavorite = true
|
||||||
|
|
||||||
// Update icon since by default it is unfavorited
|
// Update icon since by default it is unfavorited
|
||||||
document.getElementById('favorite-toggle_' + serverRegistration.serverId).setAttribute('class', this.getIconClass(serverRegistration.isFavorite))
|
document.getElementById(`favorite-toggle_${serverRegistration.serverId}`).setAttribute('class', this.getIconClass(serverRegistration.isFavorite))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -47,7 +47,7 @@ export class FavoritesManager {
|
|||||||
serverRegistration.isFavorite = !serverRegistration.isFavorite
|
serverRegistration.isFavorite = !serverRegistration.isFavorite
|
||||||
|
|
||||||
// Update the displayed favorite icon
|
// Update the displayed favorite icon
|
||||||
document.getElementById('favorite-toggle_' + serverRegistration.serverId).setAttribute('class', this.getIconClass(serverRegistration.isFavorite))
|
document.getElementById(`favorite-toggle_${serverRegistration.serverId}`).setAttribute('class', this.getIconClass(serverRegistration.isFavorite))
|
||||||
|
|
||||||
// Request the app controller instantly re-sort the server listing
|
// Request the app controller instantly re-sort the server listing
|
||||||
// This handles the favorite sorting logic internally
|
// This handles the favorite sorting logic internally
|
||||||
|
@ -50,10 +50,7 @@ export class GraphDisplayManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Paint updated data structure
|
// Paint updated data structure
|
||||||
this._plotInstance.setData([
|
this._plotInstance.setData(this.getGraphData())
|
||||||
this._graphTimestamps,
|
|
||||||
...this._graphData
|
|
||||||
])
|
|
||||||
}
|
}
|
||||||
|
|
||||||
loadLocalStorage () {
|
loadLocalStorage () {
|
||||||
@ -127,6 +124,13 @@ export class GraphDisplayManager {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getGraphData () {
|
||||||
|
return [
|
||||||
|
this._graphTimestamps,
|
||||||
|
...this._graphData
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
getGraphDataPoint (serverId, index) {
|
getGraphDataPoint (serverId, index) {
|
||||||
const graphData = this._graphData[serverId]
|
const graphData = this._graphData[serverId]
|
||||||
if (graphData && index < graphData.length && typeof graphData[index] === 'number') {
|
if (graphData && index < graphData.length && typeof graphData[index] === 'number') {
|
||||||
@ -134,6 +138,37 @@ export class GraphDisplayManager {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getClosestPlotSeriesIndex (idx) {
|
||||||
|
let closestSeriesIndex = -1
|
||||||
|
let closestSeriesDist = Number.MAX_VALUE
|
||||||
|
|
||||||
|
for (let i = 1; i < this._plotInstance.series.length; i++) {
|
||||||
|
const series = this._plotInstance.series[i]
|
||||||
|
|
||||||
|
if (!series.show) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
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))) * this._plotInstance.height
|
||||||
|
|
||||||
|
// +20 to offset some sort of strange calculation bug
|
||||||
|
// cursor.top does not seem to correctly align with the generated posY values
|
||||||
|
const dist = Math.abs(posY - (this._plotInstance.cursor.top + 20))
|
||||||
|
|
||||||
|
if (dist < closestSeriesDist) {
|
||||||
|
closestSeriesIndex = i
|
||||||
|
closestSeriesDist = dist
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return closestSeriesIndex
|
||||||
|
}
|
||||||
|
|
||||||
buildPlotInstance (timestamps, data) {
|
buildPlotInstance (timestamps, data) {
|
||||||
// Lazy load settings from localStorage, if any and if enabled
|
// Lazy load settings from localStorage, if any and if enabled
|
||||||
if (!this._hasLoadedSettings) {
|
if (!this._hasLoadedSettings) {
|
||||||
@ -150,7 +185,7 @@ export class GraphDisplayManager {
|
|||||||
scale: 'Players',
|
scale: 'Players',
|
||||||
stroke: serverRegistration.data.color,
|
stroke: serverRegistration.data.color,
|
||||||
width: 2,
|
width: 2,
|
||||||
value: (_, raw) => formatNumber(raw) + ' Players',
|
value: (_, raw) => `${formatNumber(raw)} Players`,
|
||||||
show: serverRegistration.isVisible,
|
show: serverRegistration.isVisible,
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
points: {
|
points: {
|
||||||
@ -165,44 +200,32 @@ export class GraphDisplayManager {
|
|||||||
// eslint-disable-next-line new-cap
|
// eslint-disable-next-line new-cap
|
||||||
this._plotInstance = new uPlot({
|
this._plotInstance = new uPlot({
|
||||||
plugins: [
|
plugins: [
|
||||||
uPlotTooltipPlugin((pos, id) => {
|
uPlotTooltipPlugin((pos, idx) => {
|
||||||
if (pos) {
|
if (pos) {
|
||||||
let text = this._app.serverRegistry.getServerRegistrations()
|
const closestSeriesIndex = this.getClosestPlotSeriesIndex(idx)
|
||||||
|
|
||||||
|
const text = this._app.serverRegistry.getServerRegistrations()
|
||||||
.filter(serverRegistration => serverRegistration.isVisible)
|
.filter(serverRegistration => serverRegistration.isVisible)
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
if (a.isFavorite !== b.isFavorite) {
|
if (a.isFavorite !== b.isFavorite) {
|
||||||
return a.isFavorite ? -1 : 1
|
return a.isFavorite ? -1 : 1
|
||||||
}
|
|
||||||
|
|
||||||
const aPoint = this.getGraphDataPoint(a.serverId, id)
|
|
||||||
const bPoint = this.getGraphDataPoint(b.serverId, id)
|
|
||||||
|
|
||||||
if (typeof aPoint === typeof bPoint) {
|
|
||||||
if (typeof aPoint === 'undefined') {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
return typeof aPoint === 'number' ? -1 : 1
|
return a.data.name.localeCompare(b.data.name)
|
||||||
}
|
}
|
||||||
|
|
||||||
return bPoint - aPoint
|
|
||||||
})
|
})
|
||||||
.map(serverRegistration => {
|
.map(serverRegistration => {
|
||||||
const point = this.getGraphDataPoint(serverRegistration.serverId, id)
|
const point = this.getGraphDataPoint(serverRegistration.serverId, idx)
|
||||||
|
|
||||||
let serverName = serverRegistration.data.name
|
let serverName = serverRegistration.data.name
|
||||||
|
if (closestSeriesIndex === serverRegistration.getGraphDataIndex()) {
|
||||||
|
serverName = `<strong>${serverName}</strong>`
|
||||||
|
}
|
||||||
if (serverRegistration.isFavorite) {
|
if (serverRegistration.isFavorite) {
|
||||||
serverName = '<span class="' + this._app.favoritesManager.getIconClass(true) + '"></span> ' + serverName
|
serverName = `<span class="${this._app.favoritesManager.getIconClass(true)}"></span> ${serverName}`
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof point === 'number') {
|
return `${serverName}: ${formatNumber(point)}`
|
||||||
return serverName + ': ' + formatNumber(point)
|
}).join('<br>') + `<br><br><strong>${formatTimestampSeconds(this._graphTimestamps[idx])}</strong>`
|
||||||
} else {
|
|
||||||
return serverName + ': -'
|
|
||||||
}
|
|
||||||
}).join('<br>')
|
|
||||||
|
|
||||||
text += '<br><br><strong>' + formatTimestampSeconds(this._graphTimestamps[id]) + '</strong>'
|
|
||||||
|
|
||||||
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
|
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
|
||||||
} else {
|
} else {
|
||||||
@ -238,8 +261,8 @@ export class GraphDisplayManager {
|
|||||||
},
|
},
|
||||||
split: () => {
|
split: () => {
|
||||||
const visibleGraphData = this.getVisibleGraphData()
|
const visibleGraphData = this.getVisibleGraphData()
|
||||||
const [, max, scale] = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
|
const { scaledMax, scale } = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
|
||||||
const ticks = RelativeScale.generateTicks(0, max, scale)
|
const ticks = RelativeScale.generateTicks(0, scaledMax, scale)
|
||||||
return ticks
|
return ticks
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -249,18 +272,15 @@ export class GraphDisplayManager {
|
|||||||
auto: false,
|
auto: false,
|
||||||
range: () => {
|
range: () => {
|
||||||
const visibleGraphData = this.getVisibleGraphData()
|
const visibleGraphData = this.getVisibleGraphData()
|
||||||
const [, scaledMax] = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
|
const { scaledMin, scaledMax } = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
|
||||||
return [0, scaledMax]
|
return [scaledMin, scaledMax]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
}, [
|
}, this.getGraphData(), document.getElementById('big-graph'))
|
||||||
this._graphTimestamps,
|
|
||||||
...this._graphData
|
|
||||||
], document.getElementById('big-graph'))
|
|
||||||
|
|
||||||
// Show the settings-toggle element
|
// Show the settings-toggle element
|
||||||
document.getElementById('settings-toggle').style.display = 'inline-block'
|
document.getElementById('settings-toggle').style.display = 'inline-block'
|
||||||
@ -273,7 +293,7 @@ export class GraphDisplayManager {
|
|||||||
|
|
||||||
// Copy application state into the series data used by uPlot
|
// Copy application state into the series data used by uPlot
|
||||||
for (const serverRegistration of this._app.serverRegistry.getServerRegistrations()) {
|
for (const serverRegistration of this._app.serverRegistry.getServerRegistrations()) {
|
||||||
this._plotInstance.series[serverRegistration.serverId + 1].show = serverRegistration.isVisible
|
this._plotInstance.series[serverRegistration.getGraphDataIndex()].show = serverRegistration.isVisible
|
||||||
}
|
}
|
||||||
|
|
||||||
this._plotInstance.redraw()
|
this._plotInstance.redraw()
|
||||||
|
@ -13,8 +13,8 @@ export class MojangUpdater {
|
|||||||
|
|
||||||
updateServiceStatus (name, title) {
|
updateServiceStatus (name, title) {
|
||||||
// HACK: ensure mojang-status is added for alignment, replace existing class to swap status color
|
// HACK: ensure mojang-status is added for alignment, replace existing class to swap status color
|
||||||
document.getElementById('mojang-status_' + name).setAttribute('class', MOJANG_STATUS_BASE_CLASS + ' mojang-status-' + title.toLowerCase())
|
document.getElementById(`mojang-status_${name}`).setAttribute('class', `${MOJANG_STATUS_BASE_CLASS} mojang-status-${title.toLowerCase()}`)
|
||||||
document.getElementById('mojang-status-text_' + name).innerText = title
|
document.getElementById(`mojang-status-text_${name}`).innerText = title
|
||||||
}
|
}
|
||||||
|
|
||||||
reset () {
|
reset () {
|
||||||
|
@ -20,12 +20,15 @@ export class PercentageBar {
|
|||||||
|
|
||||||
// Update position/width
|
// Update position/width
|
||||||
// leftPadding is a sum of previous iterations width value
|
// leftPadding is a sum of previous iterations width value
|
||||||
const div = document.getElementById('perc-bar-part_' + serverRegistration.serverId) || this.createPart(serverRegistration)
|
const div = document.getElementById(`perc-bar-part_${serverRegistration.serverId}`) || this.createPart(serverRegistration)
|
||||||
|
|
||||||
|
const widthPixels = `${width}px`
|
||||||
|
const leftPaddingPixels = `${leftPadding}px`
|
||||||
|
|
||||||
// Only redraw if needed
|
// Only redraw if needed
|
||||||
if (div.style.width !== width + 'px' || div.style.left !== leftPadding + 'px') {
|
if (div.style.width !== widthPixels || div.style.left !== leftPaddingPixels) {
|
||||||
div.style.width = width + 'px'
|
div.style.width = widthPixels
|
||||||
div.style.left = leftPadding + 'px'
|
div.style.left = leftPaddingPixels
|
||||||
}
|
}
|
||||||
|
|
||||||
leftPadding += width
|
leftPadding += width
|
||||||
@ -35,7 +38,7 @@ export class PercentageBar {
|
|||||||
createPart (serverRegistration) {
|
createPart (serverRegistration) {
|
||||||
const div = document.createElement('div')
|
const div = document.createElement('div')
|
||||||
|
|
||||||
div.id = 'perc-bar-part_' + serverRegistration.serverId
|
div.id = `perc-bar-part_${serverRegistration.serverId}`
|
||||||
div.style.background = serverRegistration.data.color
|
div.style.background = serverRegistration.data.color
|
||||||
|
|
||||||
div.setAttribute('class', 'perc-bar-part')
|
div.setAttribute('class', 'perc-bar-part')
|
||||||
@ -55,10 +58,10 @@ export class PercentageBar {
|
|||||||
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverId)
|
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverId)
|
||||||
|
|
||||||
this._app.tooltip.set(event.target.offsetLeft, event.target.offsetTop, 10, this._parent.offsetTop + this._parent.offsetHeight + 10,
|
this._app.tooltip.set(event.target.offsetLeft, event.target.offsetTop, 10, this._parent.offsetTop + this._parent.offsetHeight + 10,
|
||||||
(typeof serverRegistration.rankIndex !== 'undefined' ? '#' + (serverRegistration.rankIndex + 1) + ' ' : '') +
|
`${typeof serverRegistration.rankIndex !== 'undefined' ? `#${serverRegistration.rankIndex + 1} ` : ''}
|
||||||
serverRegistration.data.name +
|
${serverRegistration.data.name}<br>
|
||||||
'<br>' + formatNumber(serverRegistration.playerCount) + ' Players<br>' +
|
${formatNumber(serverRegistration.playerCount)} Players<br>
|
||||||
'<strong>' + formatPercent(serverRegistration.playerCount, this._app.getTotalPlayerCount()) + '</strong>')
|
<strong>${formatPercent(serverRegistration.playerCount, this._app.getTotalPlayerCount())}</strong>`)
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMouseOut = () => {
|
handleMouseOut = () => {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
export class RelativeScale {
|
export class RelativeScale {
|
||||||
static scale (data, tickCount, maxFactor) {
|
static scale (data, tickCount, maxFactor) {
|
||||||
const [min, max] = RelativeScale.calculateBounds(data)
|
const { min, max } = RelativeScale.calculateBounds(data)
|
||||||
|
|
||||||
let factor = 1
|
let factor = 1
|
||||||
|
|
||||||
@ -12,8 +12,12 @@ export class RelativeScale {
|
|||||||
|
|
||||||
const ticks = (scaledMax - scaledMin) / scale
|
const ticks = (scaledMax - scaledMin) / scale
|
||||||
|
|
||||||
if (ticks < tickCount + 1 || (typeof maxFactor === 'number' && factor === maxFactor)) {
|
if (ticks <= tickCount || (typeof maxFactor === 'number' && factor === maxFactor)) {
|
||||||
return [scaledMin, scaledMax, scale]
|
return {
|
||||||
|
scaledMin,
|
||||||
|
scaledMax,
|
||||||
|
scale
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// Too many steps between min/max, increase factor and try again
|
// Too many steps between min/max, increase factor and try again
|
||||||
factor++
|
factor++
|
||||||
@ -22,27 +26,9 @@ export class RelativeScale {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static scaleMatrix (data, tickCount, maxFactor) {
|
static scaleMatrix (data, tickCount, maxFactor) {
|
||||||
let max = Number.MIN_VALUE
|
const max = Math.max(...data.flat())
|
||||||
|
|
||||||
for (const row of data) {
|
return RelativeScale.scale([0, RelativeScale.isFiniteOrZero(max)], tickCount, maxFactor)
|
||||||
let testMax = Number.MIN_VALUE
|
|
||||||
|
|
||||||
for (const point of row) {
|
|
||||||
if (point > testMax) {
|
|
||||||
testMax = point
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (testMax > max) {
|
|
||||||
max = testMax
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (max === Number.MIN_VALUE) {
|
|
||||||
max = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
return RelativeScale.scale([0, max], tickCount, maxFactor)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static generateTicks (min, max, step) {
|
static generateTicks (min, max, step) {
|
||||||
@ -55,30 +41,22 @@ export class RelativeScale {
|
|||||||
|
|
||||||
static calculateBounds (data) {
|
static calculateBounds (data) {
|
||||||
if (data.length === 0) {
|
if (data.length === 0) {
|
||||||
return [0, 0]
|
return {
|
||||||
|
min: 0,
|
||||||
|
max: 0
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
let min = Number.MAX_VALUE
|
const min = Math.min(...data)
|
||||||
let max = Number.MIN_VALUE
|
const max = Math.max(...data)
|
||||||
|
|
||||||
for (const point of data) {
|
return {
|
||||||
if (typeof point === 'number') {
|
min: RelativeScale.isFiniteOrZero(min),
|
||||||
if (point > max) {
|
max: RelativeScale.isFiniteOrZero(max)
|
||||||
max = point
|
|
||||||
}
|
|
||||||
if (point < min) {
|
|
||||||
min = point
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (min === Number.MAX_VALUE) {
|
static isFiniteOrZero (val) {
|
||||||
min = 0
|
return Number.isFinite(val) ? val : 0
|
||||||
}
|
|
||||||
if (max === Number.MIN_VALUE) {
|
|
||||||
max = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
return [min, max]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -67,6 +67,10 @@ export class ServerRegistration {
|
|||||||
this._failedSequentialPings = 0
|
this._failedSequentialPings = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getGraphDataIndex () {
|
||||||
|
return this.serverId + 1
|
||||||
|
}
|
||||||
|
|
||||||
addGraphPoints (points, timestampPoints) {
|
addGraphPoints (points, timestampPoints) {
|
||||||
this._graphData = [
|
this._graphData = [
|
||||||
timestampPoints.slice(),
|
timestampPoints.slice(),
|
||||||
@ -87,9 +91,7 @@ export class ServerRegistration {
|
|||||||
if (typeof playerCount !== 'number') {
|
if (typeof playerCount !== 'number') {
|
||||||
this._app.tooltip.hide()
|
this._app.tooltip.hide()
|
||||||
} else {
|
} else {
|
||||||
const text = formatNumber(playerCount) + ' Players<br>' + formatTimestampSeconds(this._graphData[0][id])
|
this._app.tooltip.set(pos.left, pos.top, 10, 10, `${formatNumber(playerCount)} Players<br>${formatTimestampSeconds(this._graphData[0][id])}`)
|
||||||
|
|
||||||
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this._app.tooltip.hide()
|
this._app.tooltip.hide()
|
||||||
@ -116,7 +118,7 @@ export class ServerRegistration {
|
|||||||
scale: 'Players',
|
scale: 'Players',
|
||||||
stroke: '#E9E581',
|
stroke: '#E9E581',
|
||||||
width: 2,
|
width: 2,
|
||||||
value: (_, raw) => formatNumber(raw) + ' Players',
|
value: (_, raw) => `${formatNumber(raw)} Players`,
|
||||||
spanGaps: true,
|
spanGaps: true,
|
||||||
points: {
|
points: {
|
||||||
show: false
|
show: false
|
||||||
@ -139,8 +141,8 @@ export class ServerRegistration {
|
|||||||
width: 1
|
width: 1
|
||||||
},
|
},
|
||||||
split: () => {
|
split: () => {
|
||||||
const [min, max, scale] = RelativeScale.scale(this._graphData[1], tickCount)
|
const { scaledMin, scaledMax, scale } = RelativeScale.scale(this._graphData[1], tickCount)
|
||||||
const ticks = RelativeScale.generateTicks(min, max, scale)
|
const ticks = RelativeScale.generateTicks(scaledMin, scaledMax, scale)
|
||||||
return ticks
|
return ticks
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -149,7 +151,7 @@ export class ServerRegistration {
|
|||||||
Players: {
|
Players: {
|
||||||
auto: false,
|
auto: false,
|
||||||
range: () => {
|
range: () => {
|
||||||
const [scaledMin, scaledMax] = RelativeScale.scale(this._graphData[1], tickCount)
|
const { scaledMin, scaledMax } = RelativeScale.scale(this._graphData[1], tickCount)
|
||||||
return [scaledMin, scaledMax]
|
return [scaledMin, scaledMax]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -157,7 +159,7 @@ export class ServerRegistration {
|
|||||||
legend: {
|
legend: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
}, this._graphData, document.getElementById('chart_' + this.serverId))
|
}, this._graphData, document.getElementById(`chart_${this.serverId}`))
|
||||||
}
|
}
|
||||||
|
|
||||||
handlePing (payload, timestamp) {
|
handlePing (payload, timestamp) {
|
||||||
@ -193,15 +195,15 @@ export class ServerRegistration {
|
|||||||
updateServerRankIndex (rankIndex) {
|
updateServerRankIndex (rankIndex) {
|
||||||
this.rankIndex = rankIndex
|
this.rankIndex = rankIndex
|
||||||
|
|
||||||
document.getElementById('ranking_' + this.serverId).innerText = '#' + (rankIndex + 1)
|
document.getElementById(`ranking_${this.serverId}`).innerText = `#${rankIndex + 1}`
|
||||||
}
|
}
|
||||||
|
|
||||||
_renderValue (prefix, handler) {
|
_renderValue (prefix, handler) {
|
||||||
const labelElement = document.getElementById(prefix + '_' + this.serverId)
|
const labelElement = document.getElementById(`${prefix}_${this.serverId}`)
|
||||||
|
|
||||||
labelElement.style.display = 'block'
|
labelElement.style.display = 'block'
|
||||||
|
|
||||||
const valueElement = document.getElementById(prefix + '-value_' + this.serverId)
|
const valueElement = document.getElementById(`${prefix}-value_${this.serverId}`)
|
||||||
const targetElement = valueElement || labelElement
|
const targetElement = valueElement || labelElement
|
||||||
|
|
||||||
if (targetElement) {
|
if (targetElement) {
|
||||||
@ -214,7 +216,7 @@ export class ServerRegistration {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_hideValue (prefix) {
|
_hideValue (prefix) {
|
||||||
const element = document.getElementById(prefix + '_' + this.serverId)
|
const element = document.getElementById(`${prefix}_${this.serverId}`)
|
||||||
|
|
||||||
element.style.display = 'none'
|
element.style.display = 'none'
|
||||||
}
|
}
|
||||||
@ -227,8 +229,8 @@ export class ServerRegistration {
|
|||||||
if (ping.recordData) {
|
if (ping.recordData) {
|
||||||
this._renderValue('record', (element) => {
|
this._renderValue('record', (element) => {
|
||||||
if (ping.recordData.timestamp > 0) {
|
if (ping.recordData.timestamp > 0) {
|
||||||
element.innerText = formatNumber(ping.recordData.playerCount) + ' (' + formatDate(ping.recordData.timestamp) + ')'
|
element.innerText = `${formatNumber(ping.recordData.playerCount)} (${formatDate(ping.recordData.timestamp)})`
|
||||||
element.title = 'At ' + formatDate(ping.recordData.timestamp) + ' ' + formatTimestampSeconds(ping.recordData.timestamp)
|
element.title = `At ${formatDate(ping.recordData.timestamp)} ${formatTimestampSeconds(ping.recordData.timestamp)}`
|
||||||
} else {
|
} else {
|
||||||
element.innerText = formatNumber(ping.recordData.playerCount)
|
element.innerText = formatNumber(ping.recordData.playerCount)
|
||||||
}
|
}
|
||||||
@ -240,7 +242,7 @@ export class ServerRegistration {
|
|||||||
if (ping.graphPeakData) {
|
if (ping.graphPeakData) {
|
||||||
this._renderValue('peak', (element) => {
|
this._renderValue('peak', (element) => {
|
||||||
element.innerText = formatNumber(ping.graphPeakData.playerCount)
|
element.innerText = formatNumber(ping.graphPeakData.playerCount)
|
||||||
element.title = 'At ' + formatTimestampSeconds(ping.graphPeakData.timestamp)
|
element.title = `At ${formatTimestampSeconds(ping.graphPeakData.timestamp)}`
|
||||||
})
|
})
|
||||||
|
|
||||||
this.lastPeakData = ping.graphPeakData
|
this.lastPeakData = ping.graphPeakData
|
||||||
@ -262,7 +264,7 @@ export class ServerRegistration {
|
|||||||
|
|
||||||
// An updated favicon has been sent, update the src
|
// An updated favicon has been sent, update the src
|
||||||
if (ping.favicon) {
|
if (ping.favicon) {
|
||||||
const faviconElement = document.getElementById('favicon_' + this.serverId)
|
const faviconElement = document.getElementById(`favicon_${this.serverId}`)
|
||||||
|
|
||||||
// Since favicons may be URLs, only update the attribute when it has changed
|
// Since favicons may be URLs, only update the attribute when it has changed
|
||||||
// Otherwise the browser may send multiple requests to the same URL
|
// Otherwise the browser may send multiple requests to the same URL
|
||||||
@ -275,20 +277,20 @@ export class ServerRegistration {
|
|||||||
initServerStatus (latestPing) {
|
initServerStatus (latestPing) {
|
||||||
const serverElement = document.createElement('div')
|
const serverElement = document.createElement('div')
|
||||||
|
|
||||||
serverElement.id = 'container_' + this.serverId
|
serverElement.id = `container_${this.serverId}`
|
||||||
serverElement.innerHTML = '<div class="column column-favicon">' +
|
serverElement.innerHTML = `<div class="column column-favicon">
|
||||||
'<img class="server-favicon" src="' + (latestPing.favicon || MISSING_FAVICON) + '" id="favicon_' + this.serverId + '" title="' + this.data.name + '\n' + formatMinecraftServerAddress(this.data.ip, this.data.port) + '">' +
|
<img class="server-favicon" src="${latestPing.favicon || MISSING_FAVICON}" id="favicon_${this.serverId}" title="${this.data.name}\n${formatMinecraftServerAddress(this.data.ip, this.data.port)}">
|
||||||
'<span class="server-rank" id="ranking_' + this.serverId + '"></span>' +
|
<span class="server-rank" id="ranking_${this.serverId}"></span>
|
||||||
'</div>' +
|
</div>
|
||||||
'<div class="column column-status">' +
|
<div class="column column-status">
|
||||||
'<h3 class="server-name"><span class="' + this._app.favoritesManager.getIconClass(this.isFavorite) + '" id="favorite-toggle_' + this.serverId + '"></span> ' + this.data.name + '</h3>' +
|
<h3 class="server-name"><span class="${this._app.favoritesManager.getIconClass(this.isFavorite)}" id="favorite-toggle_${this.serverId}"></span> ${this.data.name}</h3>
|
||||||
'<span class="server-error" id="error_' + this.serverId + '"></span>' +
|
<span class="server-error" id="error_${this.serverId}"></span>
|
||||||
'<span class="server-label" id="player-count_' + this.serverId + '">Players: <span class="server-value" id="player-count-value_' + this.serverId + '"></span></span>' +
|
<span class="server-label" id="player-count_${this.serverId}">Players: <span class="server-value" id="player-count-value_${this.serverId}"></span></span>
|
||||||
'<span class="server-label" id="peak_' + this.serverId + '">' + this._app.publicConfig.graphDurationLabel + ' Peak: <span class="server-value" id="peak-value_' + this.serverId + '">-</span></span>' +
|
<span class="server-label" id="peak_${this.serverId}">${this._app.publicConfig.graphDurationLabel} Peak: <span class="server-value" id="peak-value_${this.serverId}">-</span></span>
|
||||||
'<span class="server-label" id="record_' + this.serverId + '">Record: <span class="server-value" id="record-value_' + this.serverId + '">-</span></span>' +
|
<span class="server-label" id="record_${this.serverId}">Record: <span class="server-value" id="record-value_${this.serverId}">-</span></span>
|
||||||
'<span class="server-label" id="version_' + this.serverId + '"></span>' +
|
<span class="server-label" id="version_${this.serverId}"></span>
|
||||||
'</div>' +
|
</div>
|
||||||
'<div class="column column-graph" id="chart_' + this.serverId + '"></div>'
|
<div class="column column-graph" id="chart_${this.serverId}"></div>`
|
||||||
|
|
||||||
serverElement.setAttribute('class', 'server')
|
serverElement.setAttribute('class', 'server')
|
||||||
|
|
||||||
@ -297,8 +299,8 @@ export class ServerRegistration {
|
|||||||
|
|
||||||
updateHighlightedValue (selectedCategory) {
|
updateHighlightedValue (selectedCategory) {
|
||||||
['player-count', 'peak', 'record'].forEach((category) => {
|
['player-count', 'peak', 'record'].forEach((category) => {
|
||||||
const labelElement = document.getElementById(category + '_' + this.serverId)
|
const labelElement = document.getElementById(`${category}_${this.serverId}`)
|
||||||
const valueElement = document.getElementById(category + '-value_' + this.serverId)
|
const valueElement = document.getElementById(`${category}-value_${this.serverId}`)
|
||||||
|
|
||||||
if (selectedCategory && category === selectedCategory) {
|
if (selectedCategory && category === selectedCategory) {
|
||||||
labelElement.setAttribute('class', 'server-highlighted-label')
|
labelElement.setAttribute('class', 'server-highlighted-label')
|
||||||
@ -311,7 +313,7 @@ export class ServerRegistration {
|
|||||||
}
|
}
|
||||||
|
|
||||||
initEventListeners () {
|
initEventListeners () {
|
||||||
document.getElementById('favorite-toggle_' + this.serverId).addEventListener('click', () => {
|
document.getElementById(`favorite-toggle_${this.serverId}`).addEventListener('click', () => {
|
||||||
this._app.favoritesManager.handleFavoriteButtonClick(this)
|
this._app.favoritesManager.handleFavoriteButtonClick(this)
|
||||||
}, false)
|
}, false)
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,7 @@ export class SocketManager {
|
|||||||
webSocketProtocol = 'wss:'
|
webSocketProtocol = 'wss:'
|
||||||
}
|
}
|
||||||
|
|
||||||
this._webSocket = new WebSocket(webSocketProtocol + '//' + location.host)
|
this._webSocket = new WebSocket(`${webSocketProtocol}//${location.host}`)
|
||||||
|
|
||||||
// The backend will automatically push data once connected
|
// The backend will automatically push data once connected
|
||||||
this._webSocket.onopen = () => {
|
this._webSocket.onopen = () => {
|
||||||
@ -119,10 +119,10 @@ export class SocketManager {
|
|||||||
.forEach(serverName => {
|
.forEach(serverName => {
|
||||||
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverName)
|
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverName)
|
||||||
|
|
||||||
controlsHTML += '<td>' +
|
controlsHTML += `<td>
|
||||||
'<input type="checkbox" class="graph-control" minetrack-server-id="' + serverRegistration.serverId + '" ' + (serverRegistration.isVisible ? 'checked' : '') + '>' +
|
<input type="checkbox" class="graph-control" minetrack-server-id="${serverRegistration.serverId}" ${serverRegistration.isVisible ? 'checked' : ''}>
|
||||||
' ' + serverName +
|
${serverName}
|
||||||
'</input></td>'
|
</input></td>`
|
||||||
|
|
||||||
// Occasionally break table rows using a magic number
|
// Occasionally break table rows using a magic number
|
||||||
if (++lastRowCounter % 6 === 0) {
|
if (++lastRowCounter % 6 === 0) {
|
||||||
@ -131,10 +131,7 @@ export class SocketManager {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Apply generated HTML and show controls
|
// Apply generated HTML and show controls
|
||||||
document.getElementById('big-graph-checkboxes').innerHTML = '<table><tr>' +
|
document.getElementById('big-graph-checkboxes').innerHTML = `<table><tr>${controlsHTML}</tr></table>`
|
||||||
controlsHTML +
|
|
||||||
'</tr></table>'
|
|
||||||
|
|
||||||
document.getElementById('big-graph-controls').style.display = 'block'
|
document.getElementById('big-graph-controls').style.display = 'block'
|
||||||
|
|
||||||
// Bind click event for updating graph data
|
// Bind click event for updating graph data
|
||||||
@ -171,7 +168,7 @@ export class SocketManager {
|
|||||||
this.createWebSocket()
|
this.createWebSocket()
|
||||||
} else if (this._reconnectDelaySeconds > 0) {
|
} else if (this._reconnectDelaySeconds > 0) {
|
||||||
// Update displayed text
|
// Update displayed text
|
||||||
this._app.caption.set('Reconnecting in ' + this._reconnectDelaySeconds + 's...')
|
this._app.caption.set(`Reconnecting in ${this._reconnectDelaySeconds}s...`)
|
||||||
}
|
}
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
|
@ -6,7 +6,7 @@ const SORT_OPTIONS = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
getName: (app) => {
|
getName: (app) => {
|
||||||
return app.publicConfig.graphDurationLabel + ' Peak'
|
return `${app.publicConfig.graphDurationLabel} Peak`
|
||||||
},
|
},
|
||||||
sortFunc: (a, b) => {
|
sortFunc: (a, b) => {
|
||||||
if (!a.lastPeakData && !b.lastPeakData) {
|
if (!a.lastPeakData && !b.lastPeakData) {
|
||||||
@ -188,7 +188,7 @@ export class SortController {
|
|||||||
// Update the DOM structure
|
// Update the DOM structure
|
||||||
sortedServers.forEach(function (serverRegistration) {
|
sortedServers.forEach(function (serverRegistration) {
|
||||||
const parentElement = document.getElementById('server-list')
|
const parentElement = document.getElementById('server-list')
|
||||||
const serverElement = document.getElementById('container_' + serverRegistration.serverId)
|
const serverElement = document.getElementById(`container_${serverRegistration.serverId}`)
|
||||||
|
|
||||||
parentElement.appendChild(serverElement)
|
parentElement.appendChild(serverElement)
|
||||||
|
|
||||||
|
@ -19,8 +19,8 @@ export class Tooltip {
|
|||||||
offsetX *= -1
|
offsetX *= -1
|
||||||
}
|
}
|
||||||
|
|
||||||
this._div.style.top = (y + offsetY) + 'px'
|
this._div.style.top = `${y + offsetY}px`
|
||||||
this._div.style.left = (x + offsetX) + 'px'
|
this._div.style.left = `${x + offsetX}px`
|
||||||
}
|
}
|
||||||
|
|
||||||
hide = () => {
|
hide = () => {
|
||||||
@ -49,7 +49,7 @@ const MINECRAFT_DEFAULT_PORTS = [25565, 19132]
|
|||||||
|
|
||||||
export function formatMinecraftServerAddress (ip, port) {
|
export function formatMinecraftServerAddress (ip, port) {
|
||||||
if (port && !MINECRAFT_DEFAULT_PORTS.includes(port)) {
|
if (port && !MINECRAFT_DEFAULT_PORTS.includes(port)) {
|
||||||
return ip + ':' + port
|
return `${ip}:${port}`
|
||||||
}
|
}
|
||||||
return ip
|
return ip
|
||||||
}
|
}
|
||||||
@ -93,8 +93,7 @@ export function formatMinecraftVersions (versions, knownVersions) {
|
|||||||
return startVersion
|
return startVersion
|
||||||
} else {
|
} else {
|
||||||
const endVersion = knownVersions[versionGroup[versionGroup.length - 1]]
|
const endVersion = knownVersions[versionGroup[versionGroup.length - 1]]
|
||||||
|
return `${startVersion}-${endVersion}`
|
||||||
return startVersion + '-' + endVersion
|
|
||||||
}
|
}
|
||||||
}).join(', ')
|
}).join(', ')
|
||||||
}
|
}
|
||||||
@ -113,9 +112,13 @@ export function formatDate (secs) {
|
|||||||
|
|
||||||
export function formatPercent (x, over) {
|
export function formatPercent (x, over) {
|
||||||
const val = Math.round((x / over) * 100 * 10) / 10
|
const val = Math.round((x / over) * 100 * 10) / 10
|
||||||
return val + '%'
|
return `${val}%`
|
||||||
}
|
}
|
||||||
|
|
||||||
export function formatNumber (x) {
|
export function formatNumber (x) {
|
||||||
|
if (typeof x !== 'number') {
|
||||||
|
return '-'
|
||||||
|
} else {
|
||||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user