310 lines
12 KiB
HTML
310 lines
12 KiB
HTML
<!-- admin/static/index.html -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EaglerTiers Admin</title>
|
|
<style>
|
|
body { font-family: Arial; margin: 20px; background: #f5f5f5; }
|
|
.container { max-width: 1200px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
|
|
h1 { color: #333; }
|
|
input, select, button { padding: 8px; margin: 5px; width: 100%; max-width: 300px; }
|
|
button { background: #007bff; color: white; border: none; cursor: pointer; }
|
|
button:hover { background: #0056b3; }
|
|
.error { color: red; }
|
|
.success { color: green; }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
|
|
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
|
th { background: #f2f2f2; }
|
|
.tab { overflow: hidden; border-bottom: 1px solid #ccc; }
|
|
.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 10px 16px; transition: 0.3s; max-width: auto; }
|
|
.tab button:hover { background-color: #ddd; }
|
|
.tab button.active { background-color: #ccc; }
|
|
.tabcontent { display: none; padding: 20px 0; }
|
|
.logout { float: right; background: #dc3545; }
|
|
.logout:hover { background: #c82333; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="app">
|
|
<div v-if="!token">
|
|
<h1>Admin Login</h1>
|
|
<div>
|
|
<input type="text" v-model="loginUsername" placeholder="Username">
|
|
<input type="password" v-model="loginPassword" placeholder="Password">
|
|
<button @click="login">Login</button>
|
|
<p class="error" v-if="loginError">{{ loginError }}</p>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h1>EaglerTiers Admin Dashboard</h1>
|
|
<button @click="logout" class="logout">Logout</button>
|
|
</div>
|
|
<div class="tab">
|
|
<button :class="{active: activeTab === 'players'}" @click="activeTab = 'players'">Players</button>
|
|
<button :class="{active: activeTab === 'ranks'}" @click="activeTab = 'ranks'">Ranks</button>
|
|
<button v-if="userRole === 'superadmin'" :class="{active: activeTab === 'users'}" @click="activeTab = 'users'">Admin Users</button>
|
|
</div>
|
|
|
|
<!-- Players Tab -->
|
|
<div v-show="activeTab === 'players'" class="tabcontent" style="display: block;">
|
|
<h2>Players</h2>
|
|
<div>
|
|
<input type="text" v-model="newPlayer.username" placeholder="Username">
|
|
<select v-model="newPlayer.region">
|
|
<option v-for="r in regions" :value="r">{{ r }}</option>
|
|
</select>
|
|
<button @click="createPlayer">Create Player</button>
|
|
</div>
|
|
<table>
|
|
<thead><tr><th>ID</th><th>Username</th><th>Region</th><th>Created</th><th>Actions</th></tr></thead>
|
|
<tbody>
|
|
<tr v-for="p in players" :key="p.id">
|
|
<td>{{ p.id }}</td>
|
|
<td>{{ p.username }}</td>
|
|
<td>{{ p.region }}</td>
|
|
<td>{{ new Date(p.created_at).toLocaleDateString() }}</td>
|
|
<td><button @click="deletePlayer(p.id)">Delete</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Ranks Tab -->
|
|
<div v-show="activeTab === 'ranks'" class="tabcontent">
|
|
<h2>Manage Ranks</h2>
|
|
<div>
|
|
<select v-model="rankPlayerId">
|
|
<option v-for="p in players" :value="p.id">{{ p.username }}</option>
|
|
</select>
|
|
<select v-model="rankGamemode">
|
|
<option v-for="g in gamemodes" :value="g">{{ g }}</option>
|
|
</select>
|
|
<select v-model="rankTier">
|
|
<option v-for="t in tiers" :value="t">{{ t }}</option>
|
|
</select>
|
|
<button @click="setRank">Set Rank</button>
|
|
</div>
|
|
<table>
|
|
<thead><tr><th>Player</th><th>Gamemode</th><th>Tier</th><th>Actions</th></tr></thead>
|
|
<tbody>
|
|
<tr v-for="r in allRanks" :key="r.player_id + r.gamemode">
|
|
<td>{{ getPlayerName(r.player_id) }}</td>
|
|
<td>{{ r.gamemode }}</td>
|
|
<td>{{ r.tier }}</td>
|
|
<td><button @click="deleteRank(r.player_id, r.gamemode)">Delete</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Admin Users Tab (superadmin only) -->
|
|
<div v-show="activeTab === 'users' && userRole === 'superadmin'" class="tabcontent">
|
|
<h2>Admin Users</h2>
|
|
<div>
|
|
<input type="text" v-model="newUser.username" placeholder="Username">
|
|
<input type="password" v-model="newUser.password" placeholder="Password">
|
|
<select v-model="newUser.role">
|
|
<option value="admin">Admin</option>
|
|
<option value="superadmin">Superadmin</option>
|
|
</select>
|
|
<button @click="createAdminUser">Create User</button>
|
|
</div>
|
|
<table>
|
|
<thead><tr><th>ID</th><th>Username</th><th>Role</th><th>Created</th><th>Actions</th></tr></thead>
|
|
<tbody>
|
|
<tr v-for="u in adminUsers" :key="u.id">
|
|
<td>{{ u.id }}</td>
|
|
<td>{{ u.username }}</td>
|
|
<td>{{ u.role }}</td>
|
|
<td>{{ new Date(u.created_at).toLocaleDateString() }}</td>
|
|
<td><button @click="deleteAdminUser(u.id)">Delete</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script>
|
|
const { createApp, ref, onMounted } = Vue;
|
|
|
|
createApp({
|
|
setup() {
|
|
const token = ref(localStorage.getItem('adminToken') || '');
|
|
const userRole = ref(localStorage.getItem('userRole') || '');
|
|
const activeTab = ref('players');
|
|
const loginUsername = ref('');
|
|
const loginPassword = ref('');
|
|
const loginError = ref('');
|
|
|
|
const players = ref([]);
|
|
const allRanks = ref([]);
|
|
const adminUsers = ref([]);
|
|
|
|
const newPlayer = ref({ username: '', region: 'NA' });
|
|
const rankPlayerId = ref('');
|
|
const rankGamemode = ref('');
|
|
const rankTier = ref('');
|
|
const newUser = ref({ username: '', password: '', role: 'admin' });
|
|
|
|
const regions = ['NA', 'EU', 'AS', 'AU'];
|
|
const gamemodes = ['NETH_POT', 'CRYSTAL', 'CLASSIC', 'BUILDUHC', 'SUMO', 'GAP', 'AXE', 'SMP', 'VANILLA', 'BRIDGE', 'COMBO', 'FIREBALL'];
|
|
const tiers = ['HT1','LT1','HT2','LT2','HT3','LT3','HT4','LT4','HT5','LT5'];
|
|
|
|
const apiBase = ''; // relative to same origin
|
|
|
|
function getHeaders() {
|
|
const headers = { 'Content-Type': 'application/json' };
|
|
if (token.value) {
|
|
headers['Authorization'] = `Bearer ${token.value}`;
|
|
}
|
|
return headers;
|
|
}
|
|
|
|
async function login() {
|
|
loginError.value = '';
|
|
try {
|
|
const res = await fetch('/admin/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username: loginUsername.value, password: loginPassword.value })
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
loginError.value = data.error || 'Login failed';
|
|
return;
|
|
}
|
|
token.value = data.token;
|
|
userRole.value = data.user.role;
|
|
localStorage.setItem('adminToken', data.token);
|
|
localStorage.setItem('userRole', data.user.role);
|
|
fetchData();
|
|
} catch (err) {
|
|
loginError.value = 'Network error';
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
token.value = '';
|
|
userRole.value = '';
|
|
localStorage.removeItem('adminToken');
|
|
localStorage.removeItem('userRole');
|
|
players.value = [];
|
|
allRanks.value = [];
|
|
adminUsers.value = [];
|
|
}
|
|
|
|
async function fetchData() {
|
|
if (!token.value) return;
|
|
try {
|
|
const [playersRes, ranksRes] = await Promise.all([
|
|
fetch('/admin/players', { headers: getHeaders() }),
|
|
fetch('/admin/rankings', { headers: getHeaders() })
|
|
]);
|
|
if (playersRes.ok) players.value = await playersRes.json();
|
|
if (ranksRes.ok) allRanks.value = await ranksRes.json();
|
|
|
|
if (userRole.value === 'superadmin') {
|
|
const usersRes = await fetch('/admin/users', { headers: getHeaders() });
|
|
if (usersRes.ok) adminUsers.value = await usersRes.json();
|
|
}
|
|
} catch (err) {
|
|
console.error('Fetch error', err);
|
|
}
|
|
}
|
|
|
|
async function createPlayer() {
|
|
const res = await fetch('/admin/player', {
|
|
method: 'POST',
|
|
headers: getHeaders(),
|
|
body: JSON.stringify(newPlayer.value)
|
|
});
|
|
if (res.ok) {
|
|
newPlayer.value = { username: '', region: 'NA' };
|
|
fetchData();
|
|
} else {
|
|
const err = await res.json();
|
|
alert('Error: ' + err.error);
|
|
}
|
|
}
|
|
|
|
async function deletePlayer(id) {
|
|
if (!confirm('Delete player? This will also delete all ranks.')) return;
|
|
const res = await fetch(`/admin/player/${id}`, { method: 'DELETE', headers: getHeaders() });
|
|
if (res.ok) fetchData();
|
|
else alert('Delete failed');
|
|
}
|
|
|
|
async function setRank() {
|
|
if (!rankPlayerId.value || !rankGamemode.value || !rankTier.value) return;
|
|
const res = await fetch(`/admin/player/${rankPlayerId.value}/rank`, {
|
|
method: 'PUT',
|
|
headers: getHeaders(),
|
|
body: JSON.stringify({ gamemode: rankGamemode.value, tier: rankTier.value })
|
|
});
|
|
if (res.ok) {
|
|
rankPlayerId.value = rankGamemode.value = rankTier.value = '';
|
|
fetchData();
|
|
} else {
|
|
const err = await res.json();
|
|
alert('Error: ' + err.error);
|
|
}
|
|
}
|
|
|
|
async function deleteRank(playerId, gamemode) {
|
|
const res = await fetch(`/admin/player/${playerId}/rank/${gamemode}`, {
|
|
method: 'DELETE',
|
|
headers: getHeaders()
|
|
});
|
|
if (res.ok) fetchData();
|
|
else alert('Delete failed');
|
|
}
|
|
|
|
function getPlayerName(playerId) {
|
|
const p = players.value.find(p => p.id === playerId);
|
|
return p ? p.username : '?';
|
|
}
|
|
|
|
async function createAdminUser() {
|
|
const res = await fetch('/admin/users', {
|
|
method: 'POST',
|
|
headers: getHeaders(),
|
|
body: JSON.stringify(newUser.value)
|
|
});
|
|
if (res.ok) {
|
|
newUser.value = { username: '', password: '', role: 'admin' };
|
|
fetchData();
|
|
} else {
|
|
const err = await res.json();
|
|
alert('Error: ' + err.error);
|
|
}
|
|
}
|
|
|
|
async function deleteAdminUser(id) {
|
|
if (!confirm('Delete admin user?')) return;
|
|
const res = await fetch(`/admin/users/${id}`, { method: 'DELETE', headers: getHeaders() });
|
|
if (res.ok) fetchData();
|
|
else alert('Delete failed');
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (token.value) fetchData();
|
|
});
|
|
|
|
return {
|
|
token, userRole, activeTab, loginUsername, loginPassword, loginError,
|
|
players, allRanks, adminUsers, newPlayer, rankPlayerId, rankGamemode, rankTier,
|
|
newUser, regions, gamemodes, tiers,
|
|
login, logout, fetchData, createPlayer, deletePlayer, setRank, deleteRank,
|
|
getPlayerName, createAdminUser, deleteAdminUser
|
|
};
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|