Minetrack/assets/js/sort.js

186 lines
5.7 KiB
JavaScript
Raw Normal View History

Minetrack 5 (#143) * remove unused #getServer methods, inline #roundToPoint * replace #safeName regex with incremental ids * remove legacy #setInterval based #updateMojangServices handling * add Tooltip class, move faviconSize to css instead of js * move server id assignment to ServerRegistry * move printPort logic to formatMinecraftServerAddress, add MINECRAFT_DEFAULT_PORTS * simplify ping tracking * rework perc-bar tooltip to not use mousemove event * begin moving graphing logic to GraphDisplayManager * begin merge graph point tracking into graphDisplayManager * centralizing graphing logic into GraphDisplayManager * properly reset GraphDisplayManager when handling disconnects * move individual server graph data into ServerGraph class * constantly run sortServers loop to simplify logic * inline #updateMojangServices method * resize performance improvements * remove legacy bootTime refresh behavior, require manual user refresh * move class defs to core.js * remove unused #isGraphDataVisible arg * remove #toggleControlsDrawer * dont call #updatePercentageBar in #updateServerStatus calls * centralize caption handling * inline #msToTime * remove hackish seconds handling for timestamps * reduce #forEach calls with filter/map * safely fallback to errorMessage if errno/description does not match * Add /images/missing_favicon.png path instead of putting base64 in js * remove debug * cleanup mojang status handling * move historyPlot instance into GraphDisplayManager * cleanup checkbox html generation * cleanup #updateServerStatus * fix up tooltip styling * move jquery code out of core.js * fix add server race condition when initially pinging servers * send error.placeholder=true for pending pings so the frontend can discard later * filter placeholder pings sent by the backend * del assets/images/logo_2014.png * move graph code into graph.js * merge pingTracker into ServerRegistry+ServerGraph * remove todos * simplify getVisibleGraphData * fix potential sortServers race condition when adding * use #show instead of #fadeIn(0) * remove publicConfig.json, send over socket * update docs/CHANGELOG.md * getOrAssign -> getOrCreateId * dont delete graph controls when disconnected * early work cleaning up HTML+CSS structures * cleanup server css elements * cleanup graph control css elements * move base CSS color values into @media(prefers-color-scheme: light) * move CSS magic colors to vars * reduce duplicated CSS color rules * inline body text color CSS * WIP replacing jQuery calls with vanilla JS * WIP replacing jQuery calls with vanilla JS * replace getElementsByClass with querySelectorAll * typeMarker -> serverTypeHTML * use jQuery slim for remaining flot.js dependency * merge setAllGraphVisibility into GraphDisplayManager * break apart element update and redraw logic * add eslint + parcel bundler * auto lint assets/js when building * statically serve favicons/ for faviconOverrides outside of dist/ * only send favicons when changed * move faviconOverride behavior into entry in servers.json * add warning to backend server files * remove .server-favicon-missing class * add Minetrack 5 migration guide * add npm run build step to install.sh * adjust package.json version to 5.0.0 * remove js references from index.html * move logic and behavior out of site.js * cleanup ServerRegistry methods * prevent multiple history graph redraws * add comments * cleanup #addServer usage, move to App * move graph control bindings into GraphDisplayManager * site.js -> main.js, core.js -> servers.js * move Tooltip/Caption into util.js * spacing tweak * format index.html * ensure the frontend does not handling updateHistoryGraph events * prevent versions/record updates if the same value * avoid empty percbar updates, ensure versions are sorted * only include main.js ref in index.html * serve minified copy of font awesome directly * bundle icons.css into main.css, remove Open Sans 400 * add new SVG logo * update docs/CHANGELOG.md * new design, server version grouping * remove start.sh call from install.sh * move graph controls into header with new button * move #handleSettingsToggle back to graph * fix legacy code behavior of currentVersionIndex applying globally * fix header text color in light mode * fix mojang status text color in light mode * fix toggle settings and checkbox colors * tweak button hover color * tweak button hover color * add new status-overlay to avoid complicated DOM management during loading * fix initial graph rendering bug * add comments * update default graph tick sizes * prevent #tooltip from overflowing page * remove localhost spec * prevent minor connection errors from reshuffling layout * update CHANGELOG.md * add message/button for manually loading historical graph on mobile devices * send isGraphVisible to frontend to prevent alert if logToDatabase: false * send timestamp data with record * update docs/CHANGELOG.md * remove clock icon * remove 24h peak timestamp * Only check favicon if present * safely handle undefined/empty knownVersions in #formatMinecraftVersions * merge config.versions and minecraft.json into minecraft_versions.json, simplify index matching behavior * remove localhost url in socket.io config * stub methods/linkage for FocusManager * add #isObjectEqual hack, add event proxying to FocusManager * wip extended stats box * remove server-type badging * tweak mojang unstable color * serve socket.io-client using parcel * fix incorrect mojang status colors * remove legacy capitalization design * redesign focus boxes * update docs/CHANGELOG.md * remove localhost ref * color clock icon * use background-color for hover effect, remove unused var * improve stats focus box icons * change mojang sessions icon to globe * Add favorites system * remove focus boxes * update docs/CHANGELOG.md * remove focus icons from font * simplify graph related event binding * Add Sort By button * store current sortOption in localStorage * update docs/CHANGELOG.md * move magic 0 sortOption to SORT_OPTION_INDEX_DEFAULT * remove localhost ref * merge #settings-toggle, #sort-by and .mojang-status CSS * remove .focus-box CSS * use sortedServerIds for _lastSortedServers * tweak --color-blue * new missing_favicon design to match logo * edit footer CSS/text, remove github icon * replace player count diff counter with GROWTH sort option * italize non-default sort options * add Only Favorites button to auto sync favorites to the visible graph data * add icons to graph control buttons * update docs/CHANGELOG.md * use * to denote non-default sort option instead * remove localhost url in socket.io config * add value highlighting to make sort by easier to read * remove last remaining uppercase text * remove serverTypesVisible from config.json * simplify header CSS, fix spacing with logToDatabase=false * fix inverted text color on highlighted values * remove localhost url in socket.io config * break header into rows on mobile devices Co-authored-by: Hugo Manrique <contact@hugmanrique.me>
2020-04-20 00:27:59 +00:00
import { isArrayEqual } from './util'
const SORT_OPTIONS = [
{
getName: () => 'Players',
sortFunc: (a, b) => b.playerCount - a.playerCount,
highlightedValue: 'player-count'
},
{
getName: (app) => {
return Math.floor(app.publicConfig.graphDuration / (60 * 60 * 1000)) + 'h Peak'
},
sortFunc: (a, b) => {
if (!a.lastPeakData && !b.lastPeakData) {
return 0
} else if (a.lastPeakData && !b.lastPeakData) {
return -1
} else if (b.lastPeakData && !a.lastPeakData) {
return 1
}
return b.lastPeakData.playerCount - a.lastPeakData.playerCount
},
testFunc: (app) => {
// Require at least one ServerRegistration to have a lastPeakData value defined
for (const serverRegistration of app.serverRegistry.getServerRegistrations()) {
if (serverRegistration.lastPeakData) {
return true
}
}
return false
},
highlightedValue: 'peak'
},
{
getName: () => 'Record',
sortFunc: (a, b) => {
if (!a.lastRecordData && !b.lastRecordData) {
return 0
} else if (a.lastRecordData && !b.lastRecordData) {
return -1
} else if (b.lastRecordData && !a.lastRecordData) {
return 1
}
return b.lastRecordData.playerCount - a.lastRecordData.playerCount
},
testFunc: (app) => {
// Require at least one ServerRegistration to have a lastRecordData value defined
for (const serverRegistration of app.serverRegistry.getServerRegistrations()) {
if (serverRegistration.lastRecordData) {
return true
}
}
return false
},
highlightedValue: 'record'
}
]
const SORT_OPTION_INDEX_DEFAULT = 0
const SORT_OPTION_INDEX_STORAGE_KEY = 'minetrack_sort_option_index'
export class SortController {
constructor (app) {
this._app = app
this._buttonElement = document.getElementById('sort-by')
this._textElement = document.getElementById('sort-by-text')
this._sortOptionIndex = SORT_OPTION_INDEX_DEFAULT
}
reset () {
this._lastSortedServers = undefined
// Reset modified DOM structures
this._buttonElement.style.display = 'none'
this._textElement.innerText = '...'
// Remove bound DOM event listeners
this._buttonElement.removeEventListener('click', this.handleSortByButtonClick)
}
loadLocalStorage () {
if (typeof localStorage !== 'undefined') {
const sortOptionIndex = localStorage.getItem(SORT_OPTION_INDEX_STORAGE_KEY)
if (sortOptionIndex) {
this._sortOptionIndex = parseInt(sortOptionIndex)
}
}
}
updateLocalStorage () {
if (typeof localStorage !== 'undefined') {
if (this._sortOptionIndex !== SORT_OPTION_INDEX_DEFAULT) {
localStorage.setItem(SORT_OPTION_INDEX_STORAGE_KEY, this._sortOptionIndex)
} else {
localStorage.removeItem(SORT_OPTION_INDEX_STORAGE_KEY)
}
}
}
show () {
// Load the saved option selection, if any
this.loadLocalStorage()
this.updateSortOption()
// Bind DOM event listeners
// This is removed by #reset to avoid multiple listeners
this._buttonElement.addEventListener('click', this.handleSortByButtonClick)
// Show #sort-by element
this._buttonElement.style.display = 'inline-block'
}
handleSortByButtonClick = () => {
while (true) {
// Increment to the next sort option, wrap around if needed
this._sortOptionIndex = (this._sortOptionIndex + 1) % SORT_OPTIONS.length
// Only break if the sortOption is supported
// This can technically cause an infinite loop, but never should assuming
// at least one sortOption does not implement the test OR always returns true
const sortOption = SORT_OPTIONS[this._sortOptionIndex]
if (!sortOption.testFunc || sortOption.testFunc(this._app)) {
break
}
}
// Redraw the button and sort the servers
this.updateSortOption()
// Save the updated option selection
this.updateLocalStorage()
}
updateSortOption = () => {
const sortOption = SORT_OPTIONS[this._sortOptionIndex]
// Pass app instance so sortOption names can be dynamically generated
this._textElement.innerText = sortOption.getName(this._app)
// Update all servers highlighted values
for (const serverRegistration of this._app.serverRegistry.getServerRegistrations()) {
serverRegistration.updateHighlightedValue(sortOption.highlightedValue)
}
this.sortServers()
}
sortServers = () => {
const sortOption = SORT_OPTIONS[this._sortOptionIndex]
const sortedServers = this._app.serverRegistry.getServerRegistrations().sort((a, b) => {
if (a.isFavorite && !b.isFavorite) {
return -1
} else if (b.isFavorite && !a.isFavorite) {
return 1
}
return sortOption.sortFunc(a, b)
})
// Test if sortedServers has changed from the previous listing
// This avoids DOM updates and graphs being redrawn
const sortedServerIds = sortedServers.map(server => server.serverId)
if (isArrayEqual(sortedServerIds, this._lastSortedServers)) {
return
}
this._lastSortedServers = sortedServerIds
// Sort a ServerRegistration list by the sortOption ONLY
// This is used to determine the ServerRegistration's rankIndex without #isFavorite skewing values
const rankIndexSort = this._app.serverRegistry.getServerRegistrations().sort(sortOption.sortFunc)
// Update the DOM structure
sortedServers.forEach(function (serverRegistration) {
$('#container_' + serverRegistration.serverId).appendTo('#server-list')
// Set the ServerRegistration's rankIndex to its indexOf the normal sort
serverRegistration.updateServerRankIndex(rankIndexSort.indexOf(serverRegistration))
})
}
}