hypermc/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up UI

Browse Source
This commit is contained in:
MCHost
2025-07-07 17:36:25 -04:00
parent 89c41fa8a7
commit d7306933b9
2 changed files with 38 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -216,7 +216,6 @@
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex flex-col space-y-1 text-sm"> <div class="flex flex-col space-y-1 text-sm">
<p><strong>User:</strong> <span id="user">Loading...</span></p> <p><strong>User:</strong> <span id="user">Loading...</span></p>
<p><strong>Key Expiry:</strong> <span id="keyExpiry">Loading...</span></p>
<p><strong>Status:</strong> <span id="serverStatus">Loading...</span></p> <p><strong>Status:</strong> <span id="serverStatus">Loading...</span></p>
</div> </div>
<div class="flex space-x-3 justify-center"> <div class="flex space-x-3 justify-center">

115
public/js/app.js
View File

@@ -926,34 +926,24 @@ document.addEventListener('DOMContentLoaded', () => {
} }
} }
if (message.type === 'time' && message.data?.keyexpireString) {
if (state.keyExpiry !== message.data.keyexpireString && elements.keyExpiry) {
const expiryDate = new Date(message.data.keyexpireString);
const formattedDate = expiryDate.toLocaleString('en-US', {
month: 'long',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
hour12: true,
timeZoneName: 'short'
});
elements.keyExpiry.textContent = formattedDate;
state.keyExpiry = message.data.keyexpireString;
}
}
if (message.type === 'list-players' && message.data?.players) { if (message.type === 'list-players' && message.data?.players) {
const players = message.data.players || []; const players = message.data.players || [];
state.currentPlayers = players; state.currentPlayers = players;
const isSinglePlayer = players.length <= 1; const isSinglePlayer = players.length <= 1;
// Initialize state for tracking action button visibility if not already present
state.actionButtonStates = state.actionButtonStates || {};
const playerListHtml = players.length > 0 const playerListHtml = players.length > 0
? players.map(player => ` ? players.map(player => {
// Default to hidden action buttons unless state says otherwise
const isActionButtonsVisible = state.actionButtonStates[player] || false;
return `
<div class="flex items-center space-x-4 mb-2"> <div class="flex items-center space-x-4 mb-2">
<span class="w-32">${player}</span> <span class="w-32">${player}</span>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<button class="toggle-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Actions</button> <button class="toggle-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}" ${isActionButtonsVisible ? 'hidden' : ''}>Actions</button>
<div class="action-buttons hidden flex-wrap gap-2" data-player="${player}"> <div class="action-buttons flex-wrap gap-2 ${isActionButtonsVisible ? '' : 'hidden'}" data-player="${player}">
<button class="tell-player bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm" data-player="${player}">Tell</button> <button class="tell-player bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm" data-player="${player}">Tell</button>
<button class="give-player bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm" data-player="${player}">Give</button> <button class="give-player bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm" data-player="${player}">Give</button>
<button class="teleport-player bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm ${isSinglePlayer ? 'opacity-50 cursor-not-allowed' : ''}" data-player="${player}" ${isSinglePlayer ? 'disabled' : ''}>Teleport</button> <button class="teleport-player bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm ${isSinglePlayer ? 'opacity-50 cursor-not-allowed' : ''}" data-player="${player}" ${isSinglePlayer ? 'disabled' : ''}>Teleport</button>
@@ -966,13 +956,25 @@ document.addEventListener('DOMContentLoaded', () => {
</div> </div>
</div> </div>
</div> </div>
`).join('') `;
}).join('')
: 'None'; : 'None';
if (state.playerList !== playerListHtml && elements.playerList) { if (state.playerList !== playerListHtml && elements.playerList) {
elements.playerList.innerHTML = playerListHtml; elements.playerList.innerHTML = playerListHtml;
state.playerList = playerListHtml; state.playerList = playerListHtml;
// Toggle action buttons // Remove existing event listeners to prevent duplication
const toggleButtons = document.querySelectorAll('.toggle-actions');
const closeButtons = document.querySelectorAll('.close-actions');
toggleButtons.forEach(button => {
button.replaceWith(button.cloneNode(true));
});
closeButtons.forEach(button => {
button.replaceWith(button.cloneNode(true));
});
// Add event listeners for toggle actions
document.querySelectorAll('.toggle-actions').forEach(button => { document.querySelectorAll('.toggle-actions').forEach(button => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
const player = button.getAttribute('data-player').trim(); const player = button.getAttribute('data-player').trim();
@@ -980,65 +982,24 @@ document.addEventListener('DOMContentLoaded', () => {
if (actionDiv) { if (actionDiv) {
actionDiv.classList.remove('hidden'); actionDiv.classList.remove('hidden');
button.classList.add('hidden'); button.classList.add('hidden');
state.actionButtonStates[player] = true; // Update state
} }
}); });
}); });
if (message.type === 'list-players' && message.data?.players) { // Add event listeners for close actions
const players = message.data.players || []; document.querySelectorAll('.close-actions').forEach(button => {
state.currentPlayers = players; button.addEventListener('click', () => {
const isSinglePlayer = players.length <= 1; const player = button.getAttribute('data-player').trim();
const playerListHtml = players.length > 0 const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
? players.map(player => ` const toggleButton = document.querySelector(`.toggle-actions[data-player="${player}"]`);
<div class="flex items-center space-x-4 mb-2"> if (actionDiv && toggleButton) {
<span class="w-32">${player}</span> actionDiv.classList.add('hidden');
<div class="flex flex-col gap-2"> toggleButton.classList.remove('hidden');
<button class="toggle-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Actions</button> state.actionButtonStates[player] = false; // Update state
<div class="action-buttons hidden flex-wrap gap-2" data-player="${player}"> }
<button class="tell-player bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm" data-player="${player}">Tell</button> });
<button class="give-player bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm" data-player="${player}">Give</button> });
<button class="teleport-player bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm ${isSinglePlayer ? 'opacity-50 cursor-not-allowed' : ''}" data-player="${player}" ${isSinglePlayer ? 'disabled' : ''}>Teleport</button>
<button class="effect-player bg-teal-600 hover:bg-teal-700 px-2 py-1 rounded text-sm" data-player="${player}">Effect</button>
<button class="op-player bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm" data-player="${player}">Op</button>
<button class="deop-player bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm" data-player="${player}">Deop</button>
<button class="kick-player bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm" data-player="${player}">Kick</button>
<button class="ban-player bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm" data-player="${player}">Ban</button>
<button class="close-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Close</button>
</div>
</div>
</div>
`).join('')
: 'None';
if (state.playerList !== playerListHtml && elements.playerList) {
elements.playerList.innerHTML = playerListHtml;
state.playerList = playerListHtml;
// Toggle action buttons
document.querySelectorAll('.toggle-actions').forEach(button => {
button.addEventListener('click', () => {
const player = button.getAttribute('data-player').trim();
const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
if (actionDiv) {
actionDiv.classList.remove('hidden');
button.classList.add('hidden');
}
});
});
// Close action buttons
document.querySelectorAll('.close-actions').forEach(button => {
button.addEventListener('click', () => {
const player = button.getAttribute('data-player').trim();
const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
const toggleButton = document.querySelector(`.toggle-actions[data-player="${player}"]`);
if (actionDiv && toggleButton) {
actionDiv.classList.add('hidden');
toggleButton.classList.remove('hidden');
}
});
});
}
}
document.querySelectorAll('.tell-player').forEach(button => { document.querySelectorAll('.tell-player').forEach(button => {
button.addEventListener('click', () => { button.addEventListener('click', () => {