mirror of
https://github.com/mivodev/mivo.git
synced 2026-01-26 21:41:59 +07:00
Initial Release v1.0.0: Full feature set with Docker automation, Nginx/Alpine stack
This commit is contained in:
dyzulk
331
app/Views/dashboard.php
Normal file
331
app/Views/dashboard.php
Normal file
@@ -0,0 +1,331 @@
|
||||
<?php
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="common.dashboard">Dashboard</h1>
|
||||
<p class="text-accents-5"><span data-i18n="common.session">Session</span>: <strong class="text-foreground"><?= $session ?></strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- System Info Card -->
|
||||
<div class="card space-y-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<i data-lucide="cpu" class="w-5 h-5"></i>
|
||||
<h3 class="font-semibold text-lg" data-i18n="dashboard.system_info">System Info</h3>
|
||||
</div>
|
||||
<div class="text-sm space-y-2">
|
||||
<div class="flex justify-between border-b border-accents-2 pb-2">
|
||||
<span class="text-accents-5" data-i18n="dashboard.model">Model</span>
|
||||
<span class="font-medium"><?= $routerboard['model'] ?? '-' ?></span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-accents-2 pb-2">
|
||||
<span class="text-accents-5" data-i18n="dashboard.board_name">Board Name</span>
|
||||
<span class="font-medium"><?= $resource['board-name'] ?? '-' ?></span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-accents-2 pb-2">
|
||||
<span class="text-accents-5" data-i18n="dashboard.router_os">RouterOS</span>
|
||||
<span class="font-medium"><?= $resource['version'] ?? '-' ?></span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-accents-2 pb-2">
|
||||
<span class="text-accents-5" data-i18n="dashboard.architecture">Architecture</span>
|
||||
<span class="font-medium"><?= $resource['architecture-name'] ?? '-' ?></span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-accents-5" data-i18n="dashboard.uptime">Uptime</span>
|
||||
<span class="font-medium"><?= \App\Helpers\FormatHelper::elapsedTime($resource['uptime'] ?? '-') ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resources Card -->
|
||||
<div class="card space-y-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<i data-lucide="hard-drive" class="w-5 h-5"></i>
|
||||
<h3 class="font-semibold text-lg" data-i18n="dashboard.resources">Resources</h3>
|
||||
</div>
|
||||
|
||||
<!-- CPU Config (simple progress not calculated here for cpu-load as it fluctuates, just text) -->
|
||||
<div class="space-y-1">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span data-i18n="dashboard.cpu_load">CPU Load</span>
|
||||
<span class="font-bold"><?= $resource['cpu-load'] ?? 0 ?>%</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-accents-2 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-foreground" style="width: <?= $resource['cpu-load'] ?? 0 ?>%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span data-i18n="dashboard.memory">Memory</span>
|
||||
<span class="text-accents-5"><?= \App\Helpers\FormatHelper::formatBytes($resource['free-memory']??0, 1) ?> <span data-i18n="dashboard.free">Free</span></span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-accents-2 rounded-full overflow-hidden">
|
||||
<?php
|
||||
$totalMem = ($resource['total-memory']??1);
|
||||
$freeMem = ($resource['free-memory']??0);
|
||||
$usedMemP = (($totalMem - $freeMem) / $totalMem) * 100;
|
||||
?>
|
||||
<div class="h-full bg-blue-600 dark:bg-blue-500" style="width:<?= $usedMemP ?>%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span data-i18n="dashboard.hdd">HDD</span>
|
||||
<span class="text-accents-5"><?= \App\Helpers\FormatHelper::formatBytes($resource['free-hdd-space']??0, 1) ?> <span data-i18n="dashboard.free">Free</span></span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-accents-2 rounded-full overflow-hidden">
|
||||
<?php
|
||||
$totalHdd = ($resource['total-hdd-space']??1);
|
||||
$freeHdd = ($resource['free-hdd-space']??0);
|
||||
$usedHddP = (($totalHdd - $freeHdd) / $totalHdd) * 100;
|
||||
?>
|
||||
<div class="h-full bg-foreground" style="width:<?= $usedHddP ?>%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hotspot Stats -->
|
||||
<div class="col-span-full md:col-span-1 lg:col-span-1 card flex flex-col justify-center space-y-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<i data-lucide="wifi" class="w-5 h-5"></i>
|
||||
<h3 class="font-semibold text-lg" data-i18n="hotspot_menu.hotspot">Hotspot</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-1 xl:grid-cols-2 gap-4">
|
||||
<!-- Active Hotspot -->
|
||||
<div class="sub-card text-center group relative aspect-square flex flex-col justify-center items-center w-full max-w-[140px] mx-auto">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/active" class="absolute inset-0 z-10" title="View Active Users"></a>
|
||||
<div class="flex justify-center mb-2 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform">
|
||||
<i data-lucide="activity" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-foreground"><?= $hotspot_active ?></div>
|
||||
<div class="text-xs text-accents-5 uppercase tracking-wide font-semibold mt-1" data-i18n="status_menu.active">Active</div>
|
||||
</div>
|
||||
|
||||
<!-- Users -->
|
||||
<div class="sub-card text-center group relative aspect-square flex flex-col justify-center items-center w-full max-w-[140px] mx-auto">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="absolute inset-0 z-10" title="Manage Users"></a>
|
||||
<div class="flex justify-center mb-2 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform">
|
||||
<i data-lucide="users" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-foreground"><?= htmlspecialchars($hotspot_users['count'] ?? 0) ?></div>
|
||||
<div class="text-xs text-accents-5 uppercase tracking-wide font-semibold mt-1" data-i18n="hotspot_menu.users">Users</div>
|
||||
</div>
|
||||
|
||||
<!-- Income -->
|
||||
<div class="sub-card text-center col-span-2 group">
|
||||
<div class="flex justify-center mb-2 text-yellow-500 dark:text-yellow-400 group-hover:scale-110 transition-transform">
|
||||
<i data-lucide="dollar-sign" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-foreground">0</div>
|
||||
<div class="text-xs text-accents-5 uppercase tracking-wide font-semibold mt-1" data-i18n="dashboard.income_today">Income Today</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Traffic Monitor -->
|
||||
<div class="col-span-full card space-y-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-4 w-full sm:w-auto">
|
||||
<div class="flex items-center gap-2">
|
||||
<i data-lucide="activity" class="w-5 h-5 text-blue-500"></i>
|
||||
<h3 class="font-semibold text-lg" data-i18n="dashboard.traffic_monitor">Traffic Monitor</h3>
|
||||
</div>
|
||||
<div class="relative w-full sm:w-auto">
|
||||
<select id="traffic-interface" class="custom-select w-full sm:w-48">
|
||||
<option value="" disabled selected>Loading...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs text-accents-5 self-end sm:self-auto">
|
||||
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-blue-500"></span> <span data-i18n="dashboard.rx_download">Rx (Download)</span></span>
|
||||
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500"></span> <span data-i18n="dashboard.tx_upload">Tx (Upload)</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-64 w-full">
|
||||
<canvas id="trafficChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/chart.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const ctx = document.getElementById('trafficChart').getContext('2d');
|
||||
const labels = Array(20).fill('');
|
||||
const rxData = Array(20).fill(0);
|
||||
const txData = Array(20).fill(0);
|
||||
|
||||
// Chart Configuration
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: window.i18n ? window.i18n.t('dashboard.rx_download') : 'Rx (Download)',
|
||||
data: rxData,
|
||||
borderColor: '#3b82f6', // blue-500
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointRadius: 0
|
||||
},
|
||||
{
|
||||
label: window.i18n ? window.i18n.t('dashboard.tx_upload') : 'Tx (Upload)',
|
||||
data: txData,
|
||||
borderColor: '#22c55e', // green-500
|
||||
backgroundColor: 'rgba(34, 197, 94, 0.1)',
|
||||
borderWidth: 2,
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointRadius: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false, // Disable animation for smoother realtime updates
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return context.dataset.label + ': ' + formatBits(context.raw);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false,
|
||||
grid: { display: false }
|
||||
},
|
||||
y: {
|
||||
border: { display: false },
|
||||
grid: { color: 'rgba(128, 128, 128, 0.1)' },
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return formatBits(value);
|
||||
}
|
||||
},
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Helper: Format Bits
|
||||
function formatBits(bits) {
|
||||
if (bits === 0) return '0 bps';
|
||||
const units = ['bps', 'Kbps', 'Mbps', 'Gbps'];
|
||||
const i = Math.floor(Math.log(bits) / Math.log(1024));
|
||||
return parseFloat((bits / Math.pow(1024, i)).toFixed(1)) + ' ' + units[i];
|
||||
}
|
||||
|
||||
// Fetch Data
|
||||
const session = '<?= htmlspecialchars($session) ?>';
|
||||
let currentInterface = null; // Will be set after fetching interfaces
|
||||
|
||||
async function fetchInterfaces() {
|
||||
try {
|
||||
const response = await fetch(`/${session}/traffic/interfaces`);
|
||||
if (!response.ok) return;
|
||||
|
||||
const interfaces = await response.json();
|
||||
const select = document.getElementById('traffic-interface');
|
||||
select.innerHTML = ''; // access clean
|
||||
|
||||
if (Array.isArray(interfaces)) {
|
||||
interfaces.forEach(iface => {
|
||||
const option = document.createElement('option');
|
||||
option.value = iface.name;
|
||||
option.textContent = iface.name; // Simple name, can add type if needed
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
// Set default (ether1 or first one)
|
||||
// Priority: Configured Interface > ether1 > First available
|
||||
const configInterface = '<?= $interface ?>'; // From Controller
|
||||
let defaultIface = null;
|
||||
|
||||
if (configInterface && interfaces.find(i => i.name === configInterface)) {
|
||||
defaultIface = configInterface;
|
||||
} else if (interfaces.find(i => i.name === 'ether1')) {
|
||||
defaultIface = 'ether1';
|
||||
} else {
|
||||
defaultIface = interfaces[0]?.name;
|
||||
}
|
||||
|
||||
if (defaultIface) {
|
||||
select.value = defaultIface;
|
||||
currentInterface = defaultIface;
|
||||
}
|
||||
|
||||
// Refresh Custom Select UI
|
||||
if (typeof CustomSelect !== 'undefined' && CustomSelect.instances) {
|
||||
const instance = CustomSelect.instances.find(i => i.originalSelect.id === 'traffic-interface');
|
||||
if (instance) instance.refresh();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Interfaces fetch error:", err);
|
||||
document.getElementById('traffic-interface').innerHTML = '<option>Error</option>';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Change
|
||||
document.getElementById('traffic-interface').addEventListener('change', (e) => {
|
||||
currentInterface = e.target.value;
|
||||
// Clear chart for visual feedback? Or just let it transition
|
||||
rxData.fill(0);
|
||||
txData.fill(0);
|
||||
chart.update();
|
||||
});
|
||||
|
||||
async function fetchTraffic() {
|
||||
if (!currentInterface) return;
|
||||
|
||||
try {
|
||||
// Encode interface name to handle special chars / spaces
|
||||
const response = await fetch(`/${session}/traffic/monitor?interface=${encodeURIComponent(currentInterface)}`);
|
||||
if (!response.ok) return; // Silent fail
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data && !data.error) {
|
||||
// Update Data (Shift and Push)
|
||||
chart.data.datasets[0].data.push(parseInt(data['rx-bits-per-second']));
|
||||
chart.data.datasets[0].data.shift();
|
||||
|
||||
chart.data.datasets[1].data.push(parseInt(data['tx-bits-per-second']));
|
||||
chart.data.datasets[1].data.shift();
|
||||
|
||||
chart.update('none'); // Update without animation
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Traffic fetch error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// Init
|
||||
fetchInterfaces().then(() => {
|
||||
// Start Polling after interfaces loaded
|
||||
setInterval(fetchTraffic, 5000); // Every 5 seconds
|
||||
fetchTraffic();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
396
app/Views/design_system.php
Normal file
396
app/Views/design_system.php
Normal file
@@ -0,0 +1,396 @@
|
||||
<?php require_once ROOT . '/app/Views/layouts/header_main.php'; ?>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Design System</h1>
|
||||
<p class="text-accents-5">Component library and style guide for Mikhmon v3.</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="document.documentElement.classList.remove('dark')" class="btn bg-gray-200 text-gray-800">Light</button>
|
||||
<button onclick="document.documentElement.classList.add('dark')" class="btn bg-gray-800 text-white">Dark</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1. Typography -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Typography</h2>
|
||||
<div class="card space-y-4">
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold tracking-tight">Heading 1 (text-4xl)</h1>
|
||||
<p class="text-sm text-accents-5">Used for landing page titles.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold tracking-tight">Heading 2 (text-3xl)</h2>
|
||||
<p class="text-sm text-accents-5">Used for page titles.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold tracking-tight">Heading 3 (text-2xl)</h3>
|
||||
<p class="text-sm text-accents-5">Used for section headers.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-semibold tracking-tight">Heading 4 (text-xl)</h4>
|
||||
<p class="text-sm text-accents-5">Used for card titles.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-base text-foreground">Body Text (text-base)</p>
|
||||
<p class="text-sm text-accents-5">The quick brown fox jumps over the lazy dog. Used for specific content.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-foreground">Small Text (text-sm)</p>
|
||||
<p class="text-sm text-accents-5">The quick brown fox jumps over the lazy dog. Used for descriptions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. Colors -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Colors (Theming)</h2>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="p-4 rounded-lg bg-background border border-accents-2">
|
||||
<div class="font-bold">Background</div>
|
||||
<div class="text-xs text-accents-5">bg-background</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-foreground text-background">
|
||||
<div class="font-bold">Foreground</div>
|
||||
<div class="text-xs opacity-80">bg-foreground</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-accents-1 border border-accents-2">
|
||||
<div class="font-bold">Accents-1</div>
|
||||
<div class="text-xs text-accents-5">bg-accents-1</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-accents-2">
|
||||
<div class="font-bold">Accents-2</div>
|
||||
<div class="text-xs text-accents-5">bg-accents-2</div>
|
||||
</div>
|
||||
<!-- Status Colors -->
|
||||
<div class="p-4 rounded-lg bg-blue-600 text-white">
|
||||
<div class="font-bold">Blue (Info)</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-green-600 text-white">
|
||||
<div class="font-bold">Green (Success)</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-yellow-500 text-white">
|
||||
<div class="font-bold">Yellow (Warning)</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-red-600 text-white">
|
||||
<div class="font-bold">Red (Danger)</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. Buttons -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Buttons</h2>
|
||||
<div class="card space-y-4">
|
||||
<div class="flex flex-wrap gap-4 items-center">
|
||||
<button class="btn btn-primary">Primary Button</button>
|
||||
<button class="btn btn-secondary">Secondary Button</button>
|
||||
<button class="btn btn-danger">Danger Button</button>
|
||||
<button class="px-4 py-2 text-sm font-medium text-accents-5 hover:text-foreground transition-colors">Ghost Button</button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 items-center">
|
||||
<button class="btn btn-primary" disabled>Disabled</button>
|
||||
<button class="btn btn-primary w-full sm:w-auto">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i>
|
||||
With Icon
|
||||
</button>
|
||||
<button class="btn btn-secondary">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2 animate-spin"></i>
|
||||
Loading
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. Form Elements -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Forms</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card space-y-4">
|
||||
<h3 class="font-medium text-lg mb-2">Inputs</h3>
|
||||
|
||||
<!-- Text Input -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6">Username</label>
|
||||
<input type="text" class="form-input w-full" placeholder="Enter username">
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6">Password</label>
|
||||
<input type="password" class="form-input w-full" value="password123">
|
||||
</div>
|
||||
|
||||
<!-- Select -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6">Role</label>
|
||||
<div class="relative">
|
||||
<select class="custom-select w-full">
|
||||
<option>Administrator</option>
|
||||
<option>User</option>
|
||||
<option>Viewer</option>
|
||||
</select>
|
||||
<i data-lucide="chevron-down" class="absolute right-3 top-2.5 h-4 w-4 text-accents-4 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Textarea -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6">Description</label>
|
||||
<textarea class="form-input w-full" rows="3" placeholder="Add some details..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card space-y-4">
|
||||
<h3 class="font-medium text-lg mb-2">States & Toggles</h3>
|
||||
|
||||
<!-- Error State -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-red-500">Error Input</label>
|
||||
<input type="text" class="form-input w-full border-red-500 focus:ring-red-500 focus:border-red-500" value="Invalid Value">
|
||||
<p class="text-xs text-red-500">This field is required.</p>
|
||||
</div>
|
||||
|
||||
<!-- Disabled State -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-4">Disabled Input</label>
|
||||
<input type="text" class="form-input w-full bg-accents-1 text-accents-4 cursor-not-allowed" value="Cannot edit me" disabled>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<input type="checkbox" id="chk1" class="rounded border-accents-3 text-foreground focus:ring-foreground h-4 w-4">
|
||||
<label for="chk1" class="text-sm">Enable Features</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. Cards & Layout -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Cards</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Simple Card -->
|
||||
<div class="card">
|
||||
<h3 class="font-semibold text-lg mb-2">Simple Card</h3>
|
||||
<p class="text-sm text-accents-5">Just a div with `card` class.</p>
|
||||
</div>
|
||||
|
||||
<!-- Hover Card -->
|
||||
<div class="card hover:border-foreground transition-colors cursor-pointer group">
|
||||
<h3 class="font-semibold text-lg mb-2 group-hover:text-blue-500 transition-colors">Hoverable Card</h3>
|
||||
<p class="text-sm text-accents-5">Add `hover:border-foreground` for interactive feel.</p>
|
||||
</div>
|
||||
|
||||
<!-- Icon Card -->
|
||||
<div class="card flex items-start gap-4">
|
||||
<div class="p-2 bg-accents-1 rounded-lg">
|
||||
<i data-lucide="box" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-base">Icon Card</h3>
|
||||
<p class="text-xs text-accents-5">Layout with flexbox.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5b. Nested Cards -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Nested Cards</h2>
|
||||
<div class="card space-y-6">
|
||||
<h3 class="font-semibold text-lg">Parent Glass Card</h3>
|
||||
<p class="text-sm text-accents-5">This is the main container card.</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="sub-card">
|
||||
<h4 class="font-semibold text-base mb-1">Nested Card 1</h4>
|
||||
<p class="text-xs text-accents-5">Standard content inside a generic sub-card container.</p>
|
||||
</div>
|
||||
|
||||
<div class="sub-card flex items-center gap-3">
|
||||
<div class="p-2 bg-white/10 rounded-lg">
|
||||
<i data-lucide="shield" class="w-5 h-5 text-blue-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-base">Nested with Icon</h4>
|
||||
<p class="text-xs text-accents-5">Additional context here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-card p-0 overflow-hidden">
|
||||
<div class="p-4 border-b border-white/10">
|
||||
<h4 class="font-semibold">Full Width Sub-Card</h4>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm text-accents-5">This sub-card has a header and content area, simulating a mini-panel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. Tables -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Data Table</h2>
|
||||
|
||||
<div class="card space-y-4">
|
||||
<h3 class="font-semibold text-lg">Detailed List</h3>
|
||||
<p class="text-sm text-accents-5 mb-4">Using <code>.table-glass</code> class for a premium look.</p>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Role</th>
|
||||
<th class="text-right">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-9 w-9 rounded-full bg-accents-2 flex items-center justify-center text-xs font-bold mr-3">
|
||||
JD
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-foreground">Jane Cooper</div>
|
||||
<div class="text-xs text-accents-5">jane.cooper@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="px-2.5 py-0.5 inline-flex text-xs font-medium rounded-full bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-accents-5">Admin</td>
|
||||
<td class="text-right">
|
||||
<button class="p-1 hover:bg-accents-2 rounded text-accents-5 hover:text-foreground transition-colors">
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-9 w-9 rounded-full bg-accents-2 flex items-center justify-center text-xs font-bold mr-3">
|
||||
CW
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-foreground">Cody Fisher</div>
|
||||
<div class="text-xs text-accents-5">cody.fisher@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="px-2.5 py-0.5 inline-flex text-xs font-medium rounded-full bg-accents-2 text-accents-6 border border-accents-3/20">
|
||||
Offline
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-accents-5">User</td>
|
||||
<td class="text-right">
|
||||
<button class="p-1 hover:bg-accents-2 rounded text-accents-5 hover:text-foreground transition-colors">
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-9 w-9 rounded-full bg-accents-2 flex items-center justify-center text-xs font-bold mr-3">
|
||||
EW
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-foreground">Esther Howard</div>
|
||||
<div class="text-xs text-accents-5">esther.howard@example.com</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="px-2.5 py-0.5 inline-flex text-xs font-medium rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20">
|
||||
On Leave
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-accents-5">Editor</td>
|
||||
<td class="text-right">
|
||||
<button class="p-1 hover:bg-accents-2 rounded text-accents-5 hover:text-foreground transition-colors">
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between pt-4 border-t border-white/10">
|
||||
<div class="text-xs text-accents-5">Showing 1 to 3 of 12 results</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-secondary py-1 px-3 text-xs h-8">Previous</button>
|
||||
<button class="btn btn-secondary py-1 px-3 text-xs h-8">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. Alerts & Confirmations -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Alerts & Confirmations (JS Helper)</h2>
|
||||
<div class="card space-y-4">
|
||||
<p class="text-sm text-accents-5 mb-4">You can trigger standardized premium alerts using the global <code>Mivo</code> helper.</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 items-center">
|
||||
<button onclick="Mivo.alert('success', 'Operation Successful', 'Data has been saved to the database.')" class="btn btn-secondary">
|
||||
Success Alert
|
||||
</button>
|
||||
<button onclick="Mivo.alert('error', 'Operation Failed', 'There was a connection error.')" class="btn btn-secondary text-red-500">
|
||||
Error Alert
|
||||
</button>
|
||||
<button onclick="Mivo.alert('warning', 'Low Storage', 'Please check your disk space.')" class="btn btn-secondary text-yellow-500">
|
||||
Warning Alert
|
||||
</button>
|
||||
<button onclick="Mivo.alert('info', 'System Update', 'New features are available.')" class="btn btn-secondary text-blue-500">
|
||||
Info Alert
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-accents-2 mt-4">
|
||||
<h3 class="font-medium text-lg mb-2">Confirmation Example</h3>
|
||||
<button onclick="Mivo.confirm('Delete Item?', 'Are you sure? This cannot be undone.', 'Yes, Delete', 'Keep it').then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
Mivo.alert('success', 'Deleted!', 'The item has been removed.');
|
||||
}
|
||||
})" class="btn btn-danger">
|
||||
Trigger Confirmation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Custom Stacking Toasts -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-accents-2 pb-2">Stacking Toasts (Custom Helper)</h2>
|
||||
<div class="card space-y-4">
|
||||
<p class="text-sm text-accents-5 mb-4">Premium non-disruptive notifications that stack from the bottom-right.</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4 items-center">
|
||||
<button onclick="Mivo.toast('success', 'Operation Successful', 'Your changes have been saved.')" class="btn btn-primary bg-emerald-500 hover:bg-emerald-600 border-none text-white">
|
||||
Success Toast
|
||||
</button>
|
||||
<button onclick="Mivo.toast('error', 'Update Failed', 'An unexpected error occurred.')" class="btn btn-primary bg-red-500 hover:bg-red-600 border-none text-white">
|
||||
Error Toast
|
||||
</button>
|
||||
<button onclick="Mivo.toast('warning', 'Low Resources', 'Disk space is running low.')" class="btn btn-primary bg-amber-500 hover:bg-amber-600 border-none text-white">
|
||||
Warning Toast
|
||||
</button>
|
||||
<button onclick="Mivo.toast('info', 'System Update', 'New features are available.')" class="btn btn-primary bg-blue-500 hover:bg-blue-600 border-none text-white">
|
||||
Info Toast
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
36
app/Views/errors/default.php
Normal file
36
app/Views/errors/default.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
// Default values if not provided
|
||||
$errorCode = isset($code) ? $code : 404;
|
||||
$errorMessage = isset($message) ? $message : 'Page Not Found';
|
||||
$errorDescription = isset($description) ? $description : "The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.";
|
||||
|
||||
// Ensure title is set for header.php
|
||||
$title = "$errorCode - $errorMessage";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex-grow flex flex-col items-center justify-center w-full">
|
||||
<div class="text-center px-4">
|
||||
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-accents-2 mb-8">
|
||||
<i data-lucide="alert-triangle" class="w-10 h-10 text-accents-5"></i>
|
||||
</div>
|
||||
|
||||
<h1 class="text-6xl font-extrabold tracking-tighter mb-4 text-foreground"><?= $errorCode ?></h1>
|
||||
<h2 class="text-2xl font-bold mb-4 text-foreground"><?= $errorMessage ?></h2>
|
||||
|
||||
<p class="text-accents-5 max-w-md mx-auto mb-8">
|
||||
<?= $errorDescription ?>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4 w-full sm:w-auto">
|
||||
<a href="/" class="btn btn-primary w-full sm:w-auto">
|
||||
Return Home
|
||||
</a>
|
||||
<button onclick="history.back()" class="btn btn-secondary w-full sm:w-auto">
|
||||
Go Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
214
app/Views/errors/development.php
Normal file
214
app/Views/errors/development.php
Normal file
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>System Error - MIVO</title>
|
||||
<!-- Tailwind CSS (Local) -->
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
<script src="/assets/js/lucide.min.js"></script>
|
||||
<style>
|
||||
/* Force dark mode if needed */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root { color-scheme: dark; }
|
||||
body { background-color: #000; color: #fff; }
|
||||
}
|
||||
|
||||
/* Critical: Reset potential global tag styles that might break layout */
|
||||
.dev-layout-header, .dev-layout-footer {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
top: auto !important;
|
||||
bottom: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Ensure code block scrolls nicely */
|
||||
.custom-scrollbar::-webkit-scrollbar { height: 8px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: #0d1117; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #6e7681; }
|
||||
|
||||
/* Manual Utilities (Polyfill for missing Tailwind classes) */
|
||||
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
|
||||
.space-y-16 > :not([hidden]) ~ :not([hidden]) { margin-top: 4rem !important; }
|
||||
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-foreground antialiased min-h-screen flex flex-col font-sans selection:bg-red-500/30 overflow-x-hidden">
|
||||
|
||||
<!-- Isolated Header -->
|
||||
<div class="dev-layout-header border-b border-accents-2 bg-background py-4 px-6 flex-none z-50">
|
||||
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Branding -->
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="bg-foreground text-background font-black text-lg px-2 py-0.5 rounded leading-tight">
|
||||
MIVO
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-5 w-px bg-accents-2"></div>
|
||||
|
||||
<span class="text-sm font-bold text-red-600 dark:text-red-500 uppercase tracking-widest">
|
||||
System Error
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/" class="p-2 rounded-full text-accents-5 hover:bg-accents-1 hover:text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-accents-2" aria-label="Return to Dashboard" title="Return to Dashboard">
|
||||
<i data-lucide="home" class="w-4 h-4"></i>
|
||||
</a>
|
||||
<button onclick="location.reload()" class="p-2 rounded-full text-accents-5 hover:bg-accents-1 hover:text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-accents-2" aria-label="Reload Application" title="Reload Application">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<div class="w-px h-4 bg-accents-2 mx-1"></div>
|
||||
<button id="theme-toggle" class="p-2 rounded-full text-accents-5 hover:bg-accents-1 hover:text-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-accents-2" aria-label="Toggle Dark Mode">
|
||||
<i data-lucide="moon" class="w-4 h-4 hidden dark:block"></i>
|
||||
<i data-lucide="sun" class="w-4 h-4 block dark:hidden"></i>
|
||||
</button>
|
||||
<div class="hidden sm:flex items-center gap-2 text-xs font-mono text-accents-5 bg-accents-1 px-3 py-1.5 rounded-full border border-accents-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
|
||||
DEV MODE
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$className = get_class($exception);
|
||||
$message = $exception->getMessage();
|
||||
$file = $exception->getFile();
|
||||
$line = $exception->getLine();
|
||||
$trace = $exception->getTraceAsString();
|
||||
|
||||
// Code Snippet Logic
|
||||
$snippet = [];
|
||||
if (file_exists($file)) {
|
||||
$lines = file($file);
|
||||
$start = max(0, $line - 6);
|
||||
$end = min(count($lines), $line + 5);
|
||||
|
||||
for ($i = $start; $i < $end; $i++) {
|
||||
$snippet[$i + 1] = $lines[$i];
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-grow w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 flex flex-col justify-center">
|
||||
|
||||
<div class="max-w-4xl mx-auto w-full space-y-16">
|
||||
|
||||
<!-- Error Card -->
|
||||
<div class="card !border-red-500/30 !bg-red-50/50 dark:!bg-red-900/10 p-6 md:p-8 shadow-lg transition-all">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 md:w-14 md:h-14 flex items-center justify-center bg-red-100 dark:bg-red-900/40 rounded-xl text-red-600 dark:text-red-400 ring-1 ring-red-200 dark:ring-red-800/50 shadow-sm">
|
||||
<i data-lucide="bomb" class="w-6 h-6 md:w-8 md:h-8"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2 mb-3">
|
||||
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-red-600 text-white uppercase tracking-widest shadow-sm">
|
||||
FATAL EXCEPTION
|
||||
</span>
|
||||
<span class="text-xs font-mono text-accents-5">
|
||||
<?= date('H:i:s') ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-sm font-bold text-red-600 dark:text-red-400 break-all font-mono mb-2">
|
||||
<?= htmlspecialchars($className) ?>
|
||||
</h2>
|
||||
|
||||
<h1 class="text-2xl md:text-3xl font-extrabold text-foreground mb-6 leading-tight">
|
||||
<?= htmlspecialchars($message) ?>
|
||||
</h1>
|
||||
|
||||
<div class="bg-background border border-accents-2 rounded-lg font-mono text-sm shadow-sm overflow-hidden mt-6">
|
||||
<div class="bg-accents-1 px-4 py-2 border-b border-accents-2 flex justify-between items-center">
|
||||
<span class="break-all text-accents-7 text-xs"><?= htmlspecialchars($file) ?></span>
|
||||
<span class="text-xs font-bold bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400 px-2 py-0.5 rounded">Line <?= $line ?></span>
|
||||
</div>
|
||||
<div class="p-0 overflow-x-auto bg-[#0d1117] text-gray-300">
|
||||
<table class="w-full text-xs md:text-sm">
|
||||
<?php foreach ($snippet as $num => $code): ?>
|
||||
<?php $isErrorLine = ($num == $line); ?>
|
||||
<tr class="<?= $isErrorLine ? 'bg-red-500/20' : '' ?>">
|
||||
<td class="text-right px-4 py-1 select-none text-gray-600 border-r border-[#30363d] w-12 bg-[#0d1117]"><?= $num ?></td>
|
||||
<td class="px-4 py-1 whitespace-pre break-normal font-mono <?= $isErrorLine ? 'text-white font-bold' : 'text-gray-300' ?>"><?= htmlspecialchars($code) ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stack Trace -->
|
||||
<div class="space-y-8">
|
||||
<div class="flex items-center justify-between px-1">
|
||||
<h3 class="text-sm font-semibold text-accents-5 uppercase tracking-wider flex items-center gap-2">
|
||||
<i data-lucide="activity" class="w-4 h-4"></i>
|
||||
Stack Trace
|
||||
</h3>
|
||||
<button onclick="navigator.clipboard.writeText(document.getElementById('stacktrace').innerText); this.innerHTML = 'Copied!';" class="text-xs btn btn-sm btn-secondary h-8 px-4 transition-all">
|
||||
Copy Trace
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl overflow-hidden border border-accents-2 shadow-inner bg-[#0d1117] relative group">
|
||||
<div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-[10px] text-gray-500 font-mono">PHP Stack Trace</span>
|
||||
</div>
|
||||
<pre id="stacktrace" class="p-4 text-xs font-mono leading-relaxed whitespace-pre-wrap text-gray-300 overflow-x-auto custom-scrollbar max-h-[500px]"><?= htmlspecialchars($trace) ?></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Isolated Footer -->
|
||||
<div class="dev-layout-footer border-t border-accents-2 bg-background py-6 text-center flex-none">
|
||||
<p class="text-sm text-accents-4 font-medium flex items-center justify-center gap-2">
|
||||
MIVO Debugger <span class="w-1 h-1 rounded-full bg-accents-3"></span> Environment: <span class="text-foreground font-semibold">Development</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Theme Toggle Logic
|
||||
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
// Check local storage or system preference
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (storedTheme === 'dark' || (!storedTheme && systemDark)) {
|
||||
html.classList.add('dark');
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
}
|
||||
|
||||
// Toggle Event
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
if (html.classList.contains('dark')) {
|
||||
html.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
html.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
90
app/Views/home.php
Normal file
90
app/Views/home.php
Normal file
@@ -0,0 +1,90 @@
|
||||
<?php require_once ROOT . '/app/Views/layouts/header_main.php'; ?>
|
||||
|
||||
<div class="w-full max-w-4xl mx-auto py-8 md:py-16 px-4 sm:px-6 text-center">
|
||||
<div class="mb-8 flex justify-center">
|
||||
<div class="h-16 w-16 bg-transparent rounded-full flex items-center justify-center">
|
||||
<img src="/assets/img/logo-m.svg" alt="Mikhmon Logo" class="h-16 w-auto block dark:hidden">
|
||||
<img src="/assets/img/logo-m-dark.svg" alt="Mikhmon Logo" class="h-16 w-auto hidden dark:block">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl font-extrabold tracking-tight mb-4"><?= \App\Config\SiteConfig::APP_FULL_NAME ?></h1>
|
||||
<p class="text-xl text-accents-5 mb-12 max-w-2xl mx-auto" data-i18n="home.subtitle">
|
||||
A modern, lightweight MikroTik Hotspot Manager built for performance and simplicity.
|
||||
</p>
|
||||
|
||||
<!-- Action Section -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-2xl mx-auto mb-16">
|
||||
<a href="/settings" class="group card hover:border-foreground transition-all duration-200 text-left">
|
||||
<div class="h-10 w-10 bg-accents-1 rounded-lg flex items-center justify-center mb-4 group-hover:bg-foreground group-hover:text-background transition-colors">
|
||||
<i data-lucide="server" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-1" data-i18n="home.manage_routers">Manage Routers</h3>
|
||||
<p class="text-sm text-accents-5" data-i18n="home.manage_routers_desc">Configure RouterOS connections and view status.</p>
|
||||
</a>
|
||||
|
||||
<a href="<?= \App\Config\SiteConfig::REPO_URL ?>" target="_blank" class="group card hover:border-foreground transition-all duration-200 text-left">
|
||||
<div class="h-10 w-10 bg-accents-1 rounded-lg flex items-center justify-center mb-4 group-hover:bg-foreground group-hover:text-background transition-colors">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-1" data-i18n="home.source_code">Source Code</h3>
|
||||
<p class="text-sm text-accents-5" data-i18n="home.source_code_desc">View the project repository and contribute.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Quick Router List if available -->
|
||||
<?php
|
||||
$quickRouters = array_filter($routers, function($r) {
|
||||
return isset($r['quick_access']) && $r['quick_access'] == 1;
|
||||
});
|
||||
?>
|
||||
<?php if (!empty($quickRouters)): ?>
|
||||
<div class="text-left max-w-4xl mx-auto">
|
||||
<h2 class="text-sm font-semibold text-accents-5 uppercase tracking-wider mb-4" data-i18n="home.quick_access">Quick Access</h2>
|
||||
<div class="table-container">
|
||||
<table class="table-glass">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" data-i18n="home.session_name">Session Name</th>
|
||||
<th scope="col" data-i18n="home.hotspot_name">Hotspot Name</th>
|
||||
<th scope="col" data-i18n="home.ip_address">IP Address</th>
|
||||
<th scope="col" class="relative text-right">
|
||||
<span class="sr-only" data-i18n="common.actions">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($quickRouters as $router): ?>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-8 w-8 rounded bg-accents-2 flex items-center justify-center text-xs font-bold mr-3">
|
||||
<?= strtoupper(substr($router['session_name'], 0, 2)) ?>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-foreground"><?= htmlspecialchars($router['session_name']) ?></div>
|
||||
<div class="text-xs text-accents-5">ID: <?= $router['id'] ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= htmlspecialchars($router['hotspot_name']) ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-accents-5 font-mono"><?= htmlspecialchars($router['ip_address']) ?></div>
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<a href="/<?= htmlspecialchars($router['session_name']) ?>/dashboard" class="btn btn-secondary btn-sm h-8 px-3" data-i18n="common.open">
|
||||
Open
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
209
app/Views/hotspot/cookies.php
Normal file
209
app/Views/hotspot/cookies.php
Normal file
@@ -0,0 +1,209 @@
|
||||
<?php
|
||||
$title = "Hotspot Cookies";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="cookies.title">Hotspot Cookies</h1>
|
||||
<p class="text-accents-5"><span data-i18n="cookies.subtitle">Active authentication cookies for:</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="location.reload()" class="btn btn-secondary">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> <span data-i18n="reports.refresh">Refresh</span>
|
||||
</button>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($error) && $error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-64">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search user, mac..." data-i18n="common.table.search_placeholder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="cookies-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="user" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="cookies.user">User</th>
|
||||
<th data-i18n="cookies.mac">MAC Address</th>
|
||||
<th data-i18n="cookies.ip">IP Address</th>
|
||||
<th data-sort="expires" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="cookies.expires">Expires In</th>
|
||||
<th class="relative text-right" data-i18n="common.actions">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($cookies) && is_array($cookies)): ?>
|
||||
<?php foreach ($cookies as $cookie): ?>
|
||||
<tr class="table-row-item"
|
||||
data-user="<?= strtolower($cookie['user'] ?? '') ?>"
|
||||
data-mac="<?= strtolower($cookie['mac-address'] ?? '') ?>"
|
||||
data-expires="<?= htmlspecialchars($cookie['expires-in'] ?? '') ?>">
|
||||
|
||||
<td>
|
||||
<span class="text-sm font-medium text-foreground"><?= htmlspecialchars($cookie['user'] ?? '-') ?></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-mono text-sm text-accents-5 uppercase"><?= htmlspecialchars($cookie['mac-address'] ?? '-') ?></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-mono text-sm text-foreground"><?= htmlspecialchars($cookie['ip'] ?? '-') ?></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm text-accents-5"><?= htmlspecialchars($cookie['expires-in'] ?? '-') ?></span>
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex justify-end table-actions-reveal">
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/cookies/remove" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('cookies.remove_cookie') : 'Remove Cookie?', window.i18n ? window.i18n.t('cookies.remove_confirm', {user: '<?= htmlspecialchars($cookie['user'] ?? '') ?>'}) : 'Are you sure you want to remove the cookie for <?= htmlspecialchars($cookie['user'] ?? '') ?>?', window.i18n ? window.i18n.t('common.delete') : 'Remove', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.submit(); });">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= $cookie['.id'] ?>">
|
||||
<button type="submit" class="p-1.5 text-red-500 hover:bg-red-500/10 rounded transition-colors" title="Remove">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5" data-i18n="common.table.showing" data-i18n-params='{"start": "0", "end": "0", "total": "0"}'>
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> cookies
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
// Placeholder translation handled via data-i18n-placeholder
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const user = row.dataset.user || '';
|
||||
const mac = row.dataset.mac || '';
|
||||
|
||||
if (this.filters.search) {
|
||||
if (!user.includes(this.filters.search) && !mac.includes(this.filters.search)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
} else {
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
}
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
260
app/Views/hotspot/generate.php
Normal file
260
app/Views/hotspot/generate.php
Normal file
@@ -0,0 +1,260 @@
|
||||
<?php require_once ROOT . '/app/Views/layouts/header_main.php'; ?>
|
||||
<?php require_once ROOT . '/app/Views/layouts/sidebar_session.php'; ?>
|
||||
|
||||
<!-- Content Inside max-w-7xl (Opened by sidebar.php) -->
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-foreground" data-i18n="hotspot_generate.title">Generate Vouchers</h1>
|
||||
<p class="text-sm text-accents-5" data-i18n="hotspot_generate.form.subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($session) ?>"}'>Create multiple hotspot vouchers in batch for: <span class="font-medium text-foreground"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.back">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
|
||||
Back to Users
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Form Column -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card p-0 overflow-hidden border-accents-2 shadow-sm">
|
||||
<div class="p-6 border-b border-accents-2 bg-accents-1/30">
|
||||
<h3 class="text-lg font-semibold flex items-center gap-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<i data-lucide="layers" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span data-i18n="hotspot_generate.form.batch_settings">Batch Generation Settings</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/generate/process" method="POST" class="p-8 space-y-8">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Core Settings (Full Width on Mobile, Half on MD) -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2 mb-4" data-i18n="hotspot_generate.form.core_config">Core Config</h4>
|
||||
|
||||
<!-- Quantity -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.qty">Quantity</label>
|
||||
<div class="input-group">
|
||||
<input type="number" name="qty" class="form-input w-full text-lg font-bold text-primary border-primary/50 focus:border-primary focus:ring-2 focus:ring-primary/20 pr-16" value="1" min="1" required>
|
||||
<div class="input-suffix text-xs font-bold text-accents-4 uppercase" data-i18n="hotspot_users.title">Users</div>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.qty_help">Count of vouchers to generate.</p>
|
||||
</div>
|
||||
|
||||
<!-- Server -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.server">Server</label>
|
||||
<select name="server" class="custom-select w-full" data-search="true">
|
||||
<option value="all">all</option>
|
||||
<?php if(isset($servers) && is_array($servers)): ?>
|
||||
<?php foreach($servers as $srv): ?>
|
||||
<option value="<?= htmlspecialchars($srv['name']) ?>">
|
||||
<?= htmlspecialchars($srv['name']) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.server_help">Target Hotspot Instance.</p>
|
||||
</div>
|
||||
|
||||
<!-- User Mode -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.user_mode">User Mode</label>
|
||||
<select name="userModel" class="custom-select w-full">
|
||||
<option value="up">Username & Password</option>
|
||||
<option value="vc">Username = Password</option>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.user_mode_help">Login credential format.</p>
|
||||
</div>
|
||||
|
||||
<!-- Comment -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.comment">Comment</label>
|
||||
<div class="input-group">
|
||||
<span class="input-icon">
|
||||
<i data-lucide="message-square" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="comment" class="form-input w-full" data-i18n-placeholder="hotspot_generate.form.comment_help" placeholder="Batch note...">
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.comment_help">Note for this batch.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Format -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2 mb-4" data-i18n="hotspot_generate.form.user_format">User Format</h4>
|
||||
|
||||
<!-- Name Length -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.user_length">Name Length</label>
|
||||
<select name="userLength" class="custom-select w-full">
|
||||
<?php for($i=3; $i<=8; $i++): ?>
|
||||
<option value="<?= $i ?>" <?= $i==4 ? 'selected' : '' ?>><?= $i ?></option>
|
||||
<?php endfor; ?>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.name_length_help">Length of username/password.</p>
|
||||
</div>
|
||||
|
||||
<!-- Prefix -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.prefix">Prefix</label>
|
||||
<div class="input-group">
|
||||
<span class="input-icon">
|
||||
<i data-lucide="type" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="prefix" class="form-input w-full" data-i18n-placeholder="hotspot_generate.form.prefix_placeholder" placeholder="e.g. VIP-">
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.prefix_help">Prefix for generated usernames.</p>
|
||||
</div>
|
||||
|
||||
<!-- Character Set -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.characters">Character Set</label>
|
||||
<select name="char" class="custom-select w-full">
|
||||
<option value="lower">abcd (Lower)</option>
|
||||
<option value="upper">ABCD (Upper)</option>
|
||||
<option value="uppernumber">ABCD2345 (Upper + Num)</option>
|
||||
<option value="lowernumber">abcd2345 (Lower + Num)</option>
|
||||
<option value="number">12345 (Numbers)</option>
|
||||
<option value="mix">aBcD2345 (Mix)</option>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.characters_help">Character types to include.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Limit Profile (Full Width) -->
|
||||
<div class="space-y-6 pt-2">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2 mb-4" data-i18n="hotspot_generate.form.limits_profile">Limits & Profile</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Profile -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.profile">Profile</label>
|
||||
<select name="profile" class="custom-select w-full" required data-search="true">
|
||||
<?php foreach ($profiles as $profile): ?>
|
||||
<option value="<?= htmlspecialchars($profile['name']) ?>">
|
||||
<?= htmlspecialchars($profile['name']) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.profile_help">Apply speed limits from profile.</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty Placeholder for Grid Alignment -->
|
||||
<div class="hidden md:block"></div>
|
||||
|
||||
<!-- Time Limit -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.time_limit">Time Limit</label>
|
||||
<div class="flex w-full">
|
||||
<!-- Day -->
|
||||
<div class="input-group flex-1">
|
||||
<input type="number" name="timelimit_d" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:z-10 font-mono text-center" placeholder="0">
|
||||
<div class="input-suffix text-xs font-bold w-8 justify-center">D</div>
|
||||
</div>
|
||||
<!-- Hour -->
|
||||
<div class="input-group flex-1">
|
||||
<input type="number" name="timelimit_h" min="0" max="23" class="form-input w-full pr-8 rounded-none border-r-0 focus:z-10 font-mono text-center" placeholder="0">
|
||||
<div class="input-suffix text-xs font-bold w-8 justify-center">H</div>
|
||||
</div>
|
||||
<!-- Minute -->
|
||||
<div class="input-group flex-1">
|
||||
<input type="number" name="timelimit_m" min="0" max="59" class="form-input w-full pr-8 rounded-l-none focus:z-10 font-mono text-center" placeholder="0">
|
||||
<div class="input-suffix text-xs font-bold w-8 justify-center">M</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.time_limit_help">Max uptime (e.g. 1h, 30m).</p>
|
||||
</div>
|
||||
|
||||
<!-- Data Limit -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_generate.form.data_limit">Data Limit</label>
|
||||
<div class="flex w-full">
|
||||
<div class="input-group flex-grow z-0 focus-within:z-10">
|
||||
<div class="input-icon">
|
||||
<i data-lucide="database" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<input type="number" name="datalimit_val" min="0" class="form-input w-full rounded-r-none border-r-0" placeholder="0">
|
||||
</div>
|
||||
<select name="datalimit_unit" class="custom-select w-32 bg-accents-1 font-medium text-accents-6 text-center rounded-l-none border-l-0 -ml-px z-0 focus:z-10">
|
||||
<option value="MB" selected>MB</option>
|
||||
<option value="GB">GB</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_generate.form.data_limit_help">Max data transfer (MB).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary px-8 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
|
||||
<i data-lucide="zap" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="hotspot_generate.form.generate">Generate Vouchers</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Quick Tips Column -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-6 space-y-6">
|
||||
<div class="card p-6 bg-accents-1/50 border-accents-2 border-dashed">
|
||||
<h3 class="font-semibold mb-4 flex items-center gap-2 text-foreground" data-i18n="hotspot_generate.form.quick_tips">
|
||||
<i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i>
|
||||
Quick Tips
|
||||
</h3>
|
||||
<div class="space-y-6 text-sm text-accents-5">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-medium text-foreground" data-i18n="hotspot_generate.form.user_mode">User Mode</h4>
|
||||
<ul class="space-y-1">
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_generate.form.tip_user_mode"><strong>User Mode</strong>: UP (separate), VC (same).</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-medium text-foreground" data-i18n="hotspot_generate.form.user_format">User Format</h4>
|
||||
<ul class="space-y-1">
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_generate.form.tip_format_examples"><strong>Format Examples</strong>: abcd (lower), 1234 (num), Mix (upper/lower/num).</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-medium text-foreground" data-i18n="hotspot_profiles.form.limits_queues">Limits</h4>
|
||||
<ul class="space-y-1">
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_generate.form.tip_limits"><strong>Limits</strong>: Time (e.g. 1h, 30m), Data (e.g. 100MB). Leave empty to use Profile default.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer closes the divs opened in sidebar.php -->
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize Custom Selects with Search
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(select => {
|
||||
new CustomSelect(select);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
236
app/Views/hotspot/profiles/add.php
Normal file
236
app/Views/hotspot/profiles/add.php
Normal file
@@ -0,0 +1,236 @@
|
||||
<?php
|
||||
$title = "Add User Profile";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_profiles.form.add_title">Add Profile</h1>
|
||||
<p class="text-accents-5" data-i18n="hotspot_profiles.form.subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($session) ?>"}'>Create a new hotspot user profile for: <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary w-full sm:w-auto justify-center" data-i18n="common.back">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Form Column -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card p-6 border-accents-2 shadow-sm">
|
||||
<h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<i data-lucide="settings" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span data-i18n="hotspot_profiles.form.settings">New Profile Settings</span>
|
||||
</h3>
|
||||
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/profile/store" method="POST" class="space-y-6">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
|
||||
<!-- General Settings Section -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.general">General</h4>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6"><span data-i18n="common.name">Name</span> <span class="text-red-500">*</span></label>
|
||||
<input type="text" name="name" required class="form-input w-full" data-i18n-placeholder="hotspot_profiles.form.name_placeholder" placeholder="e.g. 1Hour-Package">
|
||||
</div>
|
||||
|
||||
<!-- Pools & Shared Users -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.address_pool">Address Pool</label>
|
||||
<select name="address-pool" class="custom-select w-full" data-search="true">
|
||||
<option value="none" data-i18n="common.forms.none">none</option>
|
||||
<?php foreach ($pools as $pool): ?>
|
||||
<?php if(isset($pool['name'])): ?>
|
||||
<option value="<?= htmlspecialchars($pool['name']) ?>"><?= htmlspecialchars($pool['name']) ?></option>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.shared_users">Shared Users</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="users" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="shared-users" value="1" min="1" class="form-input pl-10 w-full" placeholder="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Limits Section -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.limits_queues">Limits & Queues</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Rate Limit -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.rate_limit">Rate Limit (Rx/Tx)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="activity" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="rate-limit" class="form-input pl-10 w-full" data-i18n-placeholder="hotspot_profiles.form.rate_limit_help" placeholder="e.g. 512k/1M">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Parent Queue -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.parent_queue">Parent Queue</label>
|
||||
<select name="parent-queue" class="custom-select w-full" data-search="true">
|
||||
<option value="none" data-i18n="common.forms.none">none</option>
|
||||
<?php foreach ($queues as $q): ?>
|
||||
<option value="<?= htmlspecialchars($q) ?>"><?= htmlspecialchars($q) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing & Validity -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.pricing_validity">Pricing & Validity</h4>
|
||||
|
||||
<!-- Expired Mode -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.expired_mode">Expired Mode</label>
|
||||
<select name="expired_mode" id="expired-mode" class="custom-select w-full">
|
||||
<option value="none" data-i18n="common.forms.none" selected>none</option>
|
||||
<option value="rem">Remove</option>
|
||||
<option value="ntf">Notice</option>
|
||||
<option value="remc">Remove & Record</option>
|
||||
<option value="ntfc">Notice & Record</option>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.expired_mode_help">Action when validity expires.</p>
|
||||
</div>
|
||||
|
||||
<!-- Validity (Hidden by default unless mode selected) -->
|
||||
<div id="validity-group" class="hidden space-y-1 transition-all duration-300">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.validity">Validity</label>
|
||||
<div class="flex w-full">
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">D</span>
|
||||
<input type="number" name="validity_d" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">H</span>
|
||||
<input type="number" name="validity_h" min="0" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">M</span>
|
||||
<input type="number" name="validity_m" min="0" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.validity_help">Days / Hours / Minutes</p>
|
||||
</div>
|
||||
|
||||
<!-- Prices -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.price">Price (Rp)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="tag" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="price" class="form-input pl-10 w-full" placeholder="e.g. 5000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.selling_price">Selling Price (Rp)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="selling_price" class="form-input pl-10 w-full" placeholder="e.g. 7000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lock User -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.lock_user">Lock User</label>
|
||||
<select name="lock_user" class="custom-select w-full">
|
||||
<option value="Disable" data-i18n="common.forms.disabled">Disable</option>
|
||||
<option value="Enable" data-i18n="common.forms.enabled">Enable</option>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.lock_user_help">Lock user to one specific MAC address.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary px-8 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
|
||||
<i data-lucide="save" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="hotspot_profiles.form.save">Save Profile</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Quick Tips Column -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-6 space-y-6">
|
||||
<div class="card p-6 bg-accents-1/50 border-accents-2 border-dashed">
|
||||
<h3 class="font-semibold mb-4 flex items-center gap-2 text-foreground" data-i18n="hotspot_profiles.form.quick_tips">
|
||||
<i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i>
|
||||
Quick Tips
|
||||
</h3>
|
||||
<ul class="text-sm text-accents-5 space-y-3">
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_profiles.form.tip_rate_limit"><strong>Rate Limit</strong>: Rx/Tx (Upload/Download). Example: <code>512k/1M</code></span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_profiles.form.tip_expired_mode"><strong>Expired Mode</strong>: Select 'Remove' or 'Notice' to enable Validity.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_profiles.form.tip_parent_queue"><strong>Parent Queue</strong>: Assigns users to a specific parent queue for bandwidth management.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Custom Select Init
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(select => {
|
||||
new CustomSelect(select);
|
||||
});
|
||||
}
|
||||
|
||||
// Validity Toggle Logic
|
||||
const modeSelect = document.getElementById('expired-mode');
|
||||
const validityGroup = document.getElementById('validity-group');
|
||||
|
||||
function toggleValidity() {
|
||||
if (!modeSelect || !validityGroup) return;
|
||||
|
||||
// Show validity ONLY if mode != none
|
||||
if (modeSelect.value === 'none') {
|
||||
validityGroup.classList.add('hidden');
|
||||
} else {
|
||||
validityGroup.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
if (modeSelect) {
|
||||
// Initial check
|
||||
toggleValidity();
|
||||
// Listen for changes
|
||||
modeSelect.addEventListener('change', toggleValidity);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
241
app/Views/hotspot/profiles/edit.php
Normal file
241
app/Views/hotspot/profiles/edit.php
Normal file
@@ -0,0 +1,241 @@
|
||||
<?php
|
||||
$title = "Edit User Profile";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_profiles.form.edit_title">Edit Profile</h1>
|
||||
<p class="text-accents-5" data-i18n="hotspot_profiles.form.edit_subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($profile['name'] ?? '') ?>"}'>Edit hotspot user profile: <span class="text-foreground font-medium"><?= htmlspecialchars($profile['name'] ?? '') ?></span></p>
|
||||
</div>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary w-full sm:w-auto justify-center" data-i18n="common.back">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Main Form Column -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card p-6 border-accents-2 shadow-sm">
|
||||
<h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<i data-lucide="edit" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span data-i18n="hotspot_profiles.form.edit_title">Edit Profile</span>
|
||||
</h3>
|
||||
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/profile/update" method="POST" class="space-y-6">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= htmlspecialchars($profile['.id']) ?>">
|
||||
|
||||
<!-- General Settings Section -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.general">General</h4>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6"><span data-i18n="common.name">Name</span> <span class="text-red-500">*</span></label>
|
||||
<input type="text" name="name" value="<?= htmlspecialchars($profile['name'] ?? '') ?>" required class="form-input w-full" data-i18n-placeholder="hotspot_profiles.form.name_placeholder" placeholder="e.g. 1Hour-Package">
|
||||
</div>
|
||||
|
||||
<!-- Pools & Shared Users -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.address_pool">Address Pool</label>
|
||||
<select name="address-pool" class="custom-select w-full" data-search="true">
|
||||
<option value="none" data-i18n="common.forms.none" <?= ($profile['address-pool'] ?? 'none') === 'none' ? 'selected' : '' ?>>none</option>
|
||||
<?php foreach ($pools as $pool): ?>
|
||||
<?php if(isset($pool['name'])): ?>
|
||||
<option value="<?= htmlspecialchars($pool['name']) ?>" <?= ($profile['address-pool'] ?? '') === $pool['name'] ? 'selected' : '' ?>>
|
||||
<?= htmlspecialchars($pool['name']) ?>
|
||||
</option>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.shared_users">Shared Users</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="users" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="shared-users" value="<?= htmlspecialchars($profile['shared-users'] ?? '1') ?>" min="1" class="form-input pl-10 w-full" placeholder="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Limits Section -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.limits_queues">Limits & Queues</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Rate Limit -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.rate_limit">Rate Limit (Rx/Tx)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="activity" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="rate-limit" value="<?= htmlspecialchars($profile['rate-limit'] ?? '') ?>" class="form-input pl-10 w-full" data-i18n-placeholder="hotspot_profiles.form.rate_limit_help" placeholder="e.g. 512k/1M">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Parent Queue -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.parent_queue">Parent Queue</label>
|
||||
<select name="parent-queue" class="custom-select w-full" data-search="true">
|
||||
<option value="none" data-i18n="common.forms.none" <?= ($profile['parent-queue'] ?? 'none') === 'none' ? 'selected' : '' ?>>none</option>
|
||||
<?php foreach ($queues as $q): ?>
|
||||
<option value="<?= htmlspecialchars($q) ?>" <?= ($profile['parent-queue'] ?? '') === $q ? 'selected' : '' ?>>
|
||||
<?= htmlspecialchars($q) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pricing & Validity -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase tracking-wider border-b border-accents-2 pb-2" data-i18n="hotspot_profiles.form.pricing_validity">Pricing & Validity</h4>
|
||||
|
||||
<!-- Expired Mode -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.expired_mode">Expired Mode</label>
|
||||
<?php $exMode = $profile['meta']['expired_mode'] ?? 'none'; ?>
|
||||
<select name="expired_mode" id="expired-mode" class="custom-select w-full">
|
||||
<option value="none" data-i18n="common.forms.none" <?= ($exMode === 'none' || $exMode === '') ? 'selected' : '' ?>>none</option>
|
||||
<option value="rem" <?= $exMode === 'rem' ? 'selected' : '' ?>>Remove</option>
|
||||
<option value="ntf" <?= $exMode === 'ntf' ? 'selected' : '' ?>>Notice</option>
|
||||
<option value="remc" <?= $exMode === 'remc' ? 'selected' : '' ?>>Remove & Record</option>
|
||||
<option value="ntfc" <?= $exMode === 'ntfc' ? 'selected' : '' ?>>Notice & Record</option>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.expired_mode_help">Action when validity expires.</p>
|
||||
</div>
|
||||
|
||||
<!-- Validity (Hidden by default unless mode selected) -->
|
||||
<div id="validity-group" class="hidden space-y-1 transition-all duration-300">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.validity">Validity</label>
|
||||
<div class="flex w-full">
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">D</span>
|
||||
<input type="number" name="validity_d" value="<?= htmlspecialchars($profile['val_d'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">H</span>
|
||||
<input type="number" name="validity_h" value="<?= htmlspecialchars($profile['val_h'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">M</span>
|
||||
<input type="number" name="validity_m" value="<?= htmlspecialchars($profile['val_m'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.validity_help">Days / Hours / Minutes</p>
|
||||
</div>
|
||||
|
||||
<!-- Prices -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.price">Price (Rp)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="tag" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="price" value="<?= htmlspecialchars($profile['meta']['price'] ?? '') ?>" class="form-input pl-10 w-full" placeholder="e.g. 5000">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.selling_price">Selling Price (Rp)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="selling_price" value="<?= htmlspecialchars($profile['meta']['selling_price'] ?? '') ?>" class="form-input pl-10 w-full" placeholder="e.g. 7000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lock User -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_profiles.form.lock_user">Lock User</label>
|
||||
<?php $lock = $profile['meta']['lock_user'] ?? 'Disable'; ?>
|
||||
<select name="lock_user" class="custom-select w-full">
|
||||
<option value="Disable" data-i18n="common.forms.disabled" <?= $lock === 'Disable' ? 'selected' : '' ?>>Disable</option>
|
||||
<option value="Enable" data-i18n="common.forms.enabled" <?= $lock === 'Enable' ? 'selected' : '' ?>>Enable</option>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="hotspot_profiles.form.lock_user_help">Lock user to one specific MAC address.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary px-8 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
|
||||
<i data-lucide="save" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="common.forms.save_changes">Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Quick Tips Column -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-6 space-y-6">
|
||||
<div class="card p-6 bg-accents-1/50 border-accents-2 border-dashed">
|
||||
<h3 class="font-semibold mb-4 flex items-center gap-2 text-foreground" data-i18n="hotspot_profiles.form.quick_tips">
|
||||
<i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i>
|
||||
Quick Tips
|
||||
</h3>
|
||||
<ul class="text-sm text-accents-5 space-y-3">
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_profiles.form.tip_rate_limit"><strong>Rate Limit</strong>: Rx/Tx (Upload/Download). Example: <code>512k/1M</code></span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_profiles.form.tip_expired_mode"><strong>Expired Mode</strong>: Select 'Remove' or 'Notice' to enable Validity.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_profiles.form.tip_parent_queue"><strong>Parent Queue</strong>: Assigns users to a specific parent queue for bandwidth management.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Custom Select Init
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(select => {
|
||||
new CustomSelect(select);
|
||||
});
|
||||
}
|
||||
|
||||
// Validity Toggle Logic
|
||||
const modeSelect = document.getElementById('expired-mode');
|
||||
const validityGroup = document.getElementById('validity-group');
|
||||
|
||||
function toggleValidity() {
|
||||
if (!modeSelect || !validityGroup) return;
|
||||
|
||||
// Show validity ONLY if mode != none
|
||||
if (modeSelect.value === 'none') {
|
||||
validityGroup.classList.add('hidden');
|
||||
} else {
|
||||
validityGroup.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Initial check
|
||||
toggleValidity();
|
||||
// Listen for changes
|
||||
modeSelect.addEventListener('change', toggleValidity);
|
||||
});
|
||||
</script>
|
||||
311
app/Views/hotspot/profiles/index.php
Normal file
311
app/Views/hotspot/profiles/index.php
Normal file
@@ -0,0 +1,311 @@
|
||||
<?php
|
||||
$title = "User Profiles";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Prepare Filters Data
|
||||
$uniqueModes = [];
|
||||
if (!empty($profiles)) {
|
||||
foreach ($profiles as $p) {
|
||||
$m = $p['meta']['expired_mode_formatted'] ?? '';
|
||||
if(!empty($m)) $uniqueModes[$m] = $m;
|
||||
}
|
||||
}
|
||||
sort($uniqueModes);
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_profiles.title">User Profiles</h1>
|
||||
<p class="text-accents-5"><span data-i18n="hotspot_profiles.subtitle">Manage hotspot rate limits and pricing for session</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profile/add" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="hotspot_profiles.add_profile">Add Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($error)): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Filters & Table -->
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="input-group md:w-64 z-10">
|
||||
<div class="input-icon">
|
||||
<i data-lucide="search" class="h-4 w-4"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input-search w-full" placeholder="Search profile...">
|
||||
</div>
|
||||
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-48">
|
||||
<select id="filter-mode" class="custom-select form-filter" data-search="true">
|
||||
<option value="" data-i18n="hotspot_profiles.all_modes">All Expired Modes</option>
|
||||
<?php foreach($uniqueModes as $m): ?>
|
||||
<option value="<?= htmlspecialchars($m) ?>"><?= htmlspecialchars($m) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="profiles-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="name" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_profiles.name">Name</th>
|
||||
<th data-i18n="hotspot_profiles.shared_users">Shared Users</th>
|
||||
<th data-i18n="hotspot_profiles.rate_limit">Rate Limit</th>
|
||||
<th data-i18n="hotspot_profiles.parent_queue">Parent Queue</th>
|
||||
<th data-sort="mode" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_profiles.expired_mode">Expired Mode</th>
|
||||
<th data-i18n="hotspot_profiles.validity">Validity</th>
|
||||
<th data-i18n="hotspot_profiles.price">Price</th>
|
||||
<th data-i18n="hotspot_profiles.selling_price">Selling Price</th>
|
||||
<th data-i18n="hotspot_profiles.lock_user">Lock User</th>
|
||||
<th class="text-right" data-i18n="common.actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($profiles)): ?>
|
||||
<?php foreach ($profiles as $profile): ?>
|
||||
<tr class="table-row-item"
|
||||
data-name="<?= strtolower($profile['name'] ?? '') ?>"
|
||||
data-mode="<?= htmlspecialchars($profile['meta']['expired_mode_formatted'] ?? '') ?>">
|
||||
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-8 w-8 rounded bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex items-center justify-center text-xs font-bold mr-3">
|
||||
<i data-lucide="ticket" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-foreground">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profile/edit/<?= $profile['.id'] ?>" class="hover:underline hover:text-purple-600 dark:hover:text-purple-400">
|
||||
<?= htmlspecialchars($profile['name'] ?? '-') ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm font-semibold"><?= htmlspecialchars($profile['shared-users'] ?? '1') ?></span>
|
||||
<span class="text-xs text-accents-5">dev</span>
|
||||
</td>
|
||||
<td>
|
||||
<?php if(!empty($profile['rate-limit'])): ?>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
|
||||
<?= htmlspecialchars($profile['rate-limit']) ?>
|
||||
</span>
|
||||
<?php else: ?>
|
||||
<span class="text-xs text-accents-4">-</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td class="text-sm text-accents-6">
|
||||
<?= htmlspecialchars($profile['parent-queue'] ?? '-') ?>
|
||||
</td>
|
||||
<td class="text-sm text-accents-6">
|
||||
<?= htmlspecialchars($profile['meta']['expired_mode_formatted'] ?? '') ?>
|
||||
</td>
|
||||
<td class="text-sm text-accents-6">
|
||||
<?= htmlspecialchars($profile['meta']['validity'] ?? '') ?>
|
||||
</td>
|
||||
<td class="text-sm text-accents-6">
|
||||
<?= htmlspecialchars($profile['meta']['price'] ?? '') ?>
|
||||
</td>
|
||||
<td class="text-sm text-accents-6">
|
||||
<?= htmlspecialchars($profile['meta']['selling_price'] ?? '') ?>
|
||||
</td>
|
||||
<td class="text-sm text-accents-6">
|
||||
<?= htmlspecialchars($profile['meta']['lock_user'] ?? '') ?>
|
||||
</td>
|
||||
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex items-center justify-end gap-2 table-actions-reveal">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profile/edit/<?= $profile['.id'] ?>" class="btn bg-blue-50 hover:bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:hover:bg-blue-900/40 border-transparent h-8 px-2 rounded transition-colors" title="Edit">
|
||||
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
||||
</a>
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/profile/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('hotspot_profiles.title') : 'Delete Profile?', window.i18n ? window.i18n.t('common.confirm_delete') : 'Are you sure you want to delete profile <?= $profile['name'] ?>?', window.i18n ? window.i18n.t('common.delete') : 'Delete', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= $profile['.id'] ?>">
|
||||
<button type="submit" class="btn bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-900/20 dark:hover:bg-red-900/40 border-transparent h-8 px-2 rounded transition-colors" title="Delete">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> profiles
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = {
|
||||
search: '',
|
||||
mode: ''
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.setupListeners();
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const maxPage = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if (this.currentPage < maxPage) {
|
||||
this.currentPage++;
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('filter-mode').addEventListener('change', (e) => {
|
||||
this.filters.mode = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const name = row.dataset.name || '';
|
||||
const mode = row.dataset.mode || '';
|
||||
|
||||
if (this.filters.search && !name.includes(this.filters.search)) return false;
|
||||
if (this.filters.mode && mode !== this.filters.mode) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
|
||||
const pageRows = this.filteredRows.slice(start, end);
|
||||
pageRows.forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(select => {
|
||||
new CustomSelect(select);
|
||||
});
|
||||
}
|
||||
|
||||
const rows = document.querySelectorAll('.table-row-item');
|
||||
new TableManager(rows, 10);
|
||||
});
|
||||
</script>
|
||||
171
app/Views/hotspot/users/add.php
Normal file
171
app/Views/hotspot/users/add.php
Normal file
@@ -0,0 +1,171 @@
|
||||
<?php
|
||||
$title = "Add User";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_users.form.add_title">Add User</h1>
|
||||
<p class="text-accents-5" data-i18n="hotspot_users.form.subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($session) ?>"}'>Generate a new voucher/user for session: <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.back">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back to List
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="card p-6 border-accents-2 shadow-sm">
|
||||
<h3 class="text-lg font-semibold mb-6 flex items-center gap-2">
|
||||
<div class="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<i data-lucide="user-plus" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span data-i18n="hotspot_users.form.subtitle">User Details</span>
|
||||
</h3>
|
||||
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/store" method="POST" class="space-y-6">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Name & Password -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.username">Name (Username)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="user" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="name" required class="form-input pl-10 w-full focus:ring-2 focus:ring-primary/20 transition-all" data-i18n-placeholder="hotspot_users.form.username_placeholder" placeholder="e.g. voucher123">
|
||||
</div>
|
||||
<p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.username_help">Unique username for login.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.password">Password</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="key" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="password" required class="form-input pl-10 w-full focus:ring-2 focus:ring-primary/20 transition-all" data-i18n-placeholder="hotspot_users.form.password_placeholder" placeholder="e.g. 123456">
|
||||
</div>
|
||||
<p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.password_help">Strong password for security.</p>
|
||||
</div>
|
||||
|
||||
<!-- Profile -->
|
||||
<div class="space-y-2 col-span-1 md:col-span-2">
|
||||
<label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.profile">Profile</label>
|
||||
<!-- Searchable Dropdown -->
|
||||
<select name="profile" class="custom-select w-full" data-search="true">
|
||||
<?php foreach ($profiles as $profile): ?>
|
||||
<?php if(!empty($profile['name'])): ?>
|
||||
<option value="<?= htmlspecialchars($profile['name']) ?>"><?= htmlspecialchars($profile['name']) ?></option>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<p class="text-xs text-accents-4 mt-1" data-i18n="hotspot_users.form.profile_help">Profile determines speed limit and shared user policy.</p>
|
||||
</div>
|
||||
|
||||
<!-- Time Limit (Split) -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.time_limit">Time Limit</label>
|
||||
<div class="flex w-full">
|
||||
<!-- Day -->
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">D</span>
|
||||
<input type="number" name="timelimit_d" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<!-- Hour -->
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">H</span>
|
||||
<input type="number" name="timelimit_h" min="0" max="23" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<!-- Minute -->
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-6 z-10 text-xs font-bold pointer-events-none">M</span>
|
||||
<input type="number" name="timelimit_m" min="0" max="59" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.time_limit_help">Total allowed uptime (Days, Hours, Minutes).</p>
|
||||
</div>
|
||||
|
||||
<!-- Data Limit (Unit) -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.data_limit">Data Limit</label>
|
||||
<div class="flex relative w-full">
|
||||
<div class="relative flex-grow z-0 focus-within:z-10">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 transition-colors pointer-events-none">
|
||||
<i data-lucide="database" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="datalimit_val" min="0" class="form-input w-full pl-10 rounded-r-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="0">
|
||||
</div>
|
||||
<div class="relative -ml-px w-24 z-0 focus-within:z-10">
|
||||
<select name="datalimit_unit" class="custom-select form-input w-full rounded-l-none bg-accents-1 focus:ring-2 focus:ring-primary/20 cursor-pointer font-medium text-accents-6 text-center">
|
||||
<option value="MB" selected>MB</option>
|
||||
<option value="GB">GB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.data_limit_help">Limit data usage (0 for unlimited).</p>
|
||||
</div>
|
||||
|
||||
<!-- Comment -->
|
||||
<div class="space-y-2 col-span-1 md:col-span-2">
|
||||
<label class="text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.comment">Comment</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-6 z-10 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="message-square" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="comment" class="form-input pl-10 w-full focus:ring-2 focus:ring-primary/20 transition-all" data-i18n-placeholder="hotspot_users.form.comment_placeholder" placeholder="Optional note for this user">
|
||||
</div>
|
||||
<p class="text-xs text-accents-5 mt-1" data-i18n="hotspot_users.form.comment_help">Additional notes or contact info.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary px-8 shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
|
||||
<i data-lucide="save" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="hotspot_users.form.save">Save User</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Help / Info -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 bg-accents-1/50 border-accents-2 border-dashed">
|
||||
<h3 class="font-semibold mb-4 flex items-center gap-2 text-foreground" data-i18n="hotspot_users.form.quick_tips">
|
||||
<i data-lucide="lightbulb" class="w-4 h-4 text-yellow-500"></i>
|
||||
Quick Tips
|
||||
</h3>
|
||||
<ul class="text-sm text-accents-5 space-y-3">
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_users.form.tip_profiles"><strong>Profiles</strong> define the default speed limits, session timeout, and shared users policy.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_users.form.tip_time_limit"><strong>Time Limit</strong> is the total accumulated uptime allowed for this user.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
|
||||
<span data-i18n="hotspot_users.form.tip_data_limit"><strong>Data Limit</strong> will override the profile's data limit settings if specified here. Set to 0 to use profile default.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize Custom Selects with Search
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(select => {
|
||||
new CustomSelect(select);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
134
app/Views/hotspot/users/edit.php
Normal file
134
app/Views/hotspot/users/edit.php
Normal file
@@ -0,0 +1,134 @@
|
||||
<?php require_once ROOT . '/app/Views/layouts/header_main.php'; ?>
|
||||
<?php require_once ROOT . '/app/Views/layouts/sidebar_session.php'; ?>
|
||||
|
||||
<!-- Content Inside max-w-7xl -->
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-foreground" data-i18n="hotspot_users.form.edit_title">Edit Hotspot User</h1>
|
||||
<p class="text-sm text-accents-5" data-i18n="hotspot_users.form.edit_subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($user['name']) ?>"}'>Update user details for: <span class="font-medium text-foreground"><?= htmlspecialchars($user['name']) ?></span></p>
|
||||
</div>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary w-full sm:w-auto justify-center" data-i18n="common.back">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
|
||||
Cancel
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card bg-background border border-accents-2 rounded-lg shadow-sm">
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/update" method="POST" class="p-6 space-y-6">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= htmlspecialchars($user['.id']) ?>">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Username -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.username">Username</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="user" class="w-4 h-4 text-accents-4"></i>
|
||||
</div>
|
||||
<input type="text" name="name" class="form-input pl-10 w-full"
|
||||
value="<?= htmlspecialchars($user['name'] ?? '') ?>" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.password">Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="lock" class="w-4 h-4 text-accents-4"></i>
|
||||
</div>
|
||||
<input type="text" name="password" class="form-input pl-10 w-full"
|
||||
value="<?= htmlspecialchars($user['password'] ?? '') ?>">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.profile">Profile</label>
|
||||
<select name="profile" class="custom-select w-full">
|
||||
<?php foreach ($profiles as $profile): ?>
|
||||
<option value="<?= htmlspecialchars($profile['name']) ?>"
|
||||
<?= (isset($user['profile']) && $user['profile'] === $profile['name']) ? 'selected' : '' ?>>
|
||||
<?= htmlspecialchars($profile['name']) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Server -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.server">Server</label>
|
||||
<select name="server" class="custom-select w-full">
|
||||
<option value="all" <?= (isset($user['server']) && $user['server'] === 'all') ? 'selected' : '' ?>>all</option>
|
||||
<!-- Ideally fetch servers like in generate, but keeping it simple for now -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Time Limit -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.time_limit">Time Limit</label>
|
||||
<div class="flex w-full">
|
||||
<!-- Day -->
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-4 text-xs font-bold pointer-events-none">D</span>
|
||||
<input type="number" name="timelimit_d" value="<?= htmlspecialchars($user['time_d'] ?? '') ?>" min="0" class="form-input w-full pr-8 rounded-r-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<!-- Hour -->
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-4 text-xs font-bold pointer-events-none">H</span>
|
||||
<input type="number" name="timelimit_h" value="<?= htmlspecialchars($user['time_h'] ?? '') ?>" min="0" max="23" class="form-input w-full pr-8 rounded-none border-r-0 focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
<!-- Minute -->
|
||||
<div class="relative flex-1 group">
|
||||
<span class="absolute right-3 top-2.5 text-accents-4 text-xs font-bold pointer-events-none">M</span>
|
||||
<input type="number" name="timelimit_m" value="<?= htmlspecialchars($user['time_m'] ?? '') ?>" min="0" max="59" class="form-input w-full pr-8 rounded-l-none focus:ring-2 focus:ring-primary/20 focus:z-10 transition-all font-mono text-center" placeholder="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Limit -->
|
||||
<div class="space-y-1">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.data_limit">Data Limit</label>
|
||||
<div class="flex relative w-full">
|
||||
<div class="relative flex-grow z-0 focus-within:z-10">
|
||||
<span class="absolute left-3 top-2.5 text-accents-4 transition-colors pointer-events-none">
|
||||
<i data-lucide="database" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="number" name="datalimit_val" value="<?= htmlspecialchars($user['data_val'] ?? '') ?>" min="0" class="form-input w-full pl-10 rounded-r-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="0">
|
||||
</div>
|
||||
<div class="relative -ml-px w-24 z-0 focus-within:z-10">
|
||||
<select name="datalimit_unit" class="custom-select form-input w-full rounded-l-none bg-accents-1 focus:ring-2 focus:ring-primary/20 cursor-pointer font-medium text-accents-6 text-center">
|
||||
<option value="MB" <?= ($user['data_unit'] ?? 'MB') === 'MB' ? 'selected' : '' ?>>MB</option>
|
||||
<option value="GB" <?= ($user['data_unit'] ?? 'MB') === 'GB' ? 'selected' : '' ?>>GB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comment -->
|
||||
<div class="space-y-1 col-span-2">
|
||||
<label class="block text-sm font-medium text-accents-6" data-i18n="hotspot_users.form.comment">Comment</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="message-square" class="w-4 h-4 text-accents-4"></i>
|
||||
</div>
|
||||
<input type="text" name="comment" class="form-input pl-10 w-full"
|
||||
value="<?= htmlspecialchars($user['comment'] ?? '') ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="pt-6 border-t border-accents-2 flex justify-end gap-3">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary" data-i18n="common.cancel">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i data-lucide="save" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="common.forms.save_changes">Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
449
app/Views/hotspot/users/users.php
Normal file
449
app/Views/hotspot/users/users.php
Normal file
@@ -0,0 +1,449 @@
|
||||
<?php
|
||||
$title = "Hotspot Users";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Prepare Filters Data
|
||||
$uniqueProfiles = [];
|
||||
$uniqueComments = [];
|
||||
if (!empty($users)) {
|
||||
foreach ($users as $u) {
|
||||
$p = $u['profile'] ?? 'default';
|
||||
$c = $u['comment'] ?? '';
|
||||
|
||||
$uniqueProfiles[$p] = $p; // Key-Value distinct
|
||||
if(!empty($c)) $uniqueComments[$c] = $c;
|
||||
}
|
||||
}
|
||||
sort($uniqueProfiles);
|
||||
sort($uniqueComments);
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_users.title">Hotspot Users</h1>
|
||||
<p class="text-accents-5"><span data-i18n="hotspot_users.subtitle">Manage vouchers and user accounts for session</span>: <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/add" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="hotspot_users.add_user">Add User</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Batch Action Toolbar -->
|
||||
<div id="batch-toolbar" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-foreground text-background px-6 py-3 rounded-full shadow-lg z-50 flex items-center gap-4 transition-all duration-300 translate-y-20 opacity-0">
|
||||
<span class="text-sm font-medium"><span id="selected-count">0</span> <span data-i18n="common.selected">Selected</span></span>
|
||||
<div class="h-4 w-px bg-background/20"></div>
|
||||
<button onclick="printSelected()" class="flex items-center gap-2 hover:text-accents-2 transition-colors font-bold text-sm">
|
||||
<i data-lucide="printer" class="w-4 h-4"></i> <span data-i18n="common.print">Print</span>
|
||||
</button>
|
||||
<button onclick="deleteSelected()" class="flex items-center gap-2 text-red-400 hover:text-red-300 transition-colors font-bold text-sm">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i> <span data-i18n="common.delete">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters & Table -->
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="input-group md:w-64 z-10">
|
||||
<div class="input-icon">
|
||||
<i data-lucide="search" class="h-4 w-4"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input-search w-full" placeholder="Search user..." data-i18n="common.table.search_placeholder">
|
||||
</div>
|
||||
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-40">
|
||||
<select id="filter-profile" class="custom-select form-filter" data-search="true">
|
||||
<option value="" data-i18n="common.all_profiles">All Profiles</option>
|
||||
<?php foreach($uniqueProfiles as $p): ?>
|
||||
<option value="<?= htmlspecialchars($p) ?>"><?= htmlspecialchars($p) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-40">
|
||||
<select id="filter-comment" class="custom-select form-filter" data-search="true">
|
||||
<option value="" data-i18n="common.all_comments">All Comments</option>
|
||||
<?php foreach($uniqueComments as $c): ?>
|
||||
<option value="<?= htmlspecialchars($c) ?>"><?= htmlspecialchars($c) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Container -->
|
||||
<!-- Table Container -->
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="users-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="px-4 py-3 w-10">
|
||||
<input type="checkbox" id="select-all" class="checkbox">
|
||||
</th>
|
||||
<th data-sort="name" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_users.name">Name</th>
|
||||
<th data-sort="profile" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_users.profile">Profile</th>
|
||||
<th data-i18n="hotspot_users.uptime_limit">Uptime / Limit</th>
|
||||
<th data-i18n="hotspot_users.bytes_in_out">Bytes In/Out</th>
|
||||
<th data-sort="comment" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_users.comment">Comment</th>
|
||||
<th class="relative text-right" data-i18n="common.actions">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($users)): ?>
|
||||
<?php foreach ($users as $user): ?>
|
||||
<tr class="table-row-item"
|
||||
data-name="<?= strtolower($user['name'] ?? '') ?>"
|
||||
data-profile="<?= $user['profile'] ?? 'default' ?>"
|
||||
data-comment="<?= htmlspecialchars($user['comment'] ?? '') ?>">
|
||||
|
||||
<td class="px-4 py-4">
|
||||
<input type="checkbox" name="selected_users[]" value="<?= htmlspecialchars($user['.id']) ?>" class="user-checkbox checkbox">
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex items-center w-full">
|
||||
<div class="h-8 w-8 rounded bg-accents-2 flex items-center justify-center text-xs font-bold mr-3 text-accents-6 flex-shrink-0">
|
||||
<i data-lucide="user" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="text-sm font-medium text-foreground truncate"><?= htmlspecialchars($user['name'] ?? '-') ?></div>
|
||||
<?php
|
||||
$status = \App\Helpers\HotspotHelper::getUserStatus($user);
|
||||
echo \App\Helpers\ViewHelper::badge($status);
|
||||
?>
|
||||
</div>
|
||||
<div class="text-xs text-accents-5"><?= htmlspecialchars($user['password'] ?? '******') ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
|
||||
<?= htmlspecialchars($user['profile'] ?? 'default') ?>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= \App\Helpers\FormatHelper::elapsedTime($user['uptime'] ?? '0s') ?></div>
|
||||
<div class="text-xs text-accents-5">Limit: <?= \App\Helpers\FormatHelper::elapsedTime($user['limit-uptime'] ?? 'unlimited') ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-xs text-accents-5 flex flex-col gap-1">
|
||||
<span class="flex items-center"><i data-lucide="arrow-down" class="w-3 h-3 mr-1 text-green-500"></i> <?= \App\Helpers\FormatHelper::formatBytes($user['bytes-in'] ?? 0) ?></span>
|
||||
<span class="flex items-center"><i data-lucide="arrow-up" class="w-3 h-3 mr-1 text-blue-500"></i> <?= \App\Helpers\FormatHelper::formatBytes($user['bytes-out'] ?? 0) ?></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-accents-5 italic"><?= htmlspecialchars($user['comment'] ?? '-') ?></div>
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex items-center justify-end gap-2 table-actions-reveal">
|
||||
<button onclick="printUser('<?= htmlspecialchars($user['.id']) ?>')" class="btn-icon" title="Print">
|
||||
<i data-lucide="printer" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/user/edit/<?= urlencode($user['.id']) ?>" class="btn-icon inline-flex items-center justify-center" title="Edit">
|
||||
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
||||
</a>
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Delete User?', 'Are you sure you want to delete user <?= htmlspecialchars($user['name'] ?? '') ?>?', 'Delete', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= $user['.id'] ?>">
|
||||
<button type="submit" class="btn-icon-danger" title="Delete">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
<span id="pagination-text">Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> users</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = {
|
||||
search: '',
|
||||
profile: '',
|
||||
comment: ''
|
||||
};
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupListeners();
|
||||
this.update();
|
||||
}
|
||||
|
||||
setupListeners() {
|
||||
// Search Input
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
// Prev/Next
|
||||
this.elements.prevBtn.addEventListener('click', () => {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const maxPage = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if (this.currentPage < maxPage) {
|
||||
this.currentPage++;
|
||||
this.render();
|
||||
}
|
||||
});
|
||||
|
||||
// Custom Select Listener (Mutation Observer or custom event if we emitted one,
|
||||
// but for now relying on underlying SELECT change or custom-select class behavior)
|
||||
// Since CustomSelect updates the original Select, we listen to change on original select
|
||||
document.getElementById('filter-profile').addEventListener('change', (e) => {
|
||||
this.filters.profile = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
document.getElementById('filter-comment').addEventListener('change', (e) => {
|
||||
this.filters.comment = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
// Re-bind actions when external CustomSelect updates the select value
|
||||
// CustomSelect triggers 'change' event on original select, so standard listener works!
|
||||
|
||||
// Listen for language change to update pagination text
|
||||
window.addEventListener('languageChanged', () => {
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
// Apply Filters
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const name = row.dataset.name || '';
|
||||
const comment = (row.dataset.comment || '').toLowerCase(); // dataset comment value
|
||||
const profile = row.dataset.profile || '';
|
||||
|
||||
// 1. Search (Name or Comment)
|
||||
if (this.filters.search) {
|
||||
const matchName = name.includes(this.filters.search);
|
||||
const matchComment = comment.includes(this.filters.search);
|
||||
if (!matchName && !matchComment) return false;
|
||||
}
|
||||
|
||||
// 2. Profile
|
||||
if (this.filters.profile && profile !== this.filters.profile) return false;
|
||||
|
||||
// 3. Comment (Exact match for dropdown)
|
||||
if (this.filters.comment && row.dataset.comment !== this.filters.comment) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
document.getElementById('pagination-text').textContent = text;
|
||||
} else {
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
}
|
||||
|
||||
// Clear & Append Rows
|
||||
this.elements.body.innerHTML = '';
|
||||
|
||||
const pageRows = this.filteredRows.slice(start, end);
|
||||
pageRows.forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
// Update Buttons
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
// Re-init Icons for new rows
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// Update Checkbox Logic (Select All should act on visible?)
|
||||
// We usually reset "Select All" check when page changes
|
||||
document.getElementById('select-all').checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Init Custom Selects
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(select => {
|
||||
new CustomSelect(select);
|
||||
});
|
||||
}
|
||||
|
||||
// Init Table
|
||||
const rows = document.querySelectorAll('.table-row-item');
|
||||
const manager = new TableManager(rows, 10);
|
||||
|
||||
// --- Toolbar Logic (Copied/Adapted) ---
|
||||
const selectAll = document.getElementById('select-all');
|
||||
const toolbar = document.getElementById('batch-toolbar');
|
||||
const countSpan = document.getElementById('selected-count');
|
||||
const tableBody = document.getElementById('table-body'); // Dynamic body
|
||||
|
||||
function updateToolbar() {
|
||||
const checked = document.querySelectorAll('.user-checkbox:checked');
|
||||
countSpan.textContent = checked.length;
|
||||
|
||||
if (checked.length > 0) {
|
||||
toolbar.classList.remove('translate-y-20', 'opacity-0');
|
||||
} else {
|
||||
toolbar.classList.add('translate-y-20', 'opacity-0');
|
||||
}
|
||||
}
|
||||
|
||||
selectAll.addEventListener('change', (e) => {
|
||||
const isChecked = e.target.checked;
|
||||
// Only select visible rows on current page
|
||||
const visibleCheckboxes = tableBody.querySelectorAll('.user-checkbox');
|
||||
visibleCheckboxes.forEach(cb => cb.checked = isChecked);
|
||||
updateToolbar();
|
||||
});
|
||||
|
||||
// Event Delegation for dynamic rows
|
||||
tableBody.addEventListener('change', (e) => {
|
||||
if (e.target.classList.contains('user-checkbox')) {
|
||||
updateToolbar();
|
||||
if (!e.target.checked) selectAll.checked = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Actions
|
||||
function printUser(id) {
|
||||
const width = 400;
|
||||
const height = 600;
|
||||
const left = (window.innerWidth - width) / 2;
|
||||
const top = (window.innerHeight - height) / 2;
|
||||
const session = '<?= htmlspecialchars($session) ?>';
|
||||
const url = `/${session}/hotspot/print/${encodeURIComponent(id)}`;
|
||||
window.open(url, `PrintUser`, `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`);
|
||||
}
|
||||
|
||||
function printSelected() {
|
||||
const selected = Array.from(document.querySelectorAll('.user-checkbox:checked')).map(cb => cb.value);
|
||||
if (selected.length === 0) return alert(window.i18n ? window.i18n.t('hotspot_users.no_users_selected') : "No users selected.");
|
||||
|
||||
const width = 800;
|
||||
const height = 600;
|
||||
const left = (window.innerWidth - width) / 2;
|
||||
const top = (window.innerHeight - height) / 2;
|
||||
const session = '<?= htmlspecialchars($session) ?>';
|
||||
const ids = selected.map(id => encodeURIComponent(id)).join(',');
|
||||
const url = `/${session}/hotspot/print-batch?ids=${ids}`;
|
||||
window.open(url, `PrintBatch`, `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`);
|
||||
}
|
||||
|
||||
function deleteSelected() {
|
||||
const selected = Array.from(document.querySelectorAll('.user-checkbox:checked')).map(cb => cb.value);
|
||||
if (selected.length === 0) return alert(window.i18n ? window.i18n.t('hotspot_users.no_users_selected') : "Please select at least one user.");
|
||||
|
||||
const title = window.i18n ? window.i18n.t('common.delete') : 'Delete Users?';
|
||||
const msg = window.i18n ? window.i18n.t('common.confirm_delete') : `Are you sure you want to delete ${selected.length} users?`;
|
||||
|
||||
Mivo.confirm(title, msg, window.i18n.t('common.delete'), window.i18n.t('common.cancel')).then(res => {
|
||||
if (!res) return;
|
||||
|
||||
// Create a form to submit
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '/<?= htmlspecialchars($session) ?>/hotspot/delete'; // Re-uses the delete endpoint
|
||||
|
||||
const sessionInput = document.createElement('input');
|
||||
sessionInput.type = 'hidden';
|
||||
sessionInput.name = 'session';
|
||||
sessionInput.value = '<?= htmlspecialchars($session) ?>';
|
||||
form.appendChild(sessionInput);
|
||||
|
||||
const idInput = document.createElement('input');
|
||||
idInput.type = 'hidden';
|
||||
idInput.name = 'id';
|
||||
idInput.value = selected.join(','); // Comma separated IDs
|
||||
form.appendChild(idInput);
|
||||
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
document.body.removeChild(form);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
75
app/Views/install.php
Normal file
75
app/Views/install.php
Normal file
@@ -0,0 +1,75 @@
|
||||
<?php
|
||||
$title = 'Install MIVO - Setup';
|
||||
include ROOT . '/app/Views/layouts/header_public.php';
|
||||
?>
|
||||
<!-- Install Container -->
|
||||
<main class="flex-grow flex items-center justify-center flex-col w-full">
|
||||
<div class="w-full max-w-full sm:max-w-md z-10 p-4 sm:p-6 animate-fade-in-up">
|
||||
|
||||
<div class="text-center mb-6 sm:mb-10">
|
||||
<!-- Brand / Logo Area -->
|
||||
<div class="flex justify-center mb-6 sm:mb-8">
|
||||
<div class="relative group">
|
||||
<!-- <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div> -->
|
||||
<img src="/assets/img/logo-m.svg" alt="MIVO Logo" class="relative h-10 sm:h-12 w-auto block dark:hidden transform transition-transform duration-300 group-hover:scale-105">
|
||||
<img src="/assets/img/logo-m-dark.svg" alt="MIVO Logo" class="relative h-10 sm:h-12 w-auto hidden dark:block transform transition-transform duration-300 group-hover:scale-105">
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight mb-2">Welcome to MIVO</h1>
|
||||
<p class="text-accents-5 text-sm">System Installation & Setup</p>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 sm:p-8 space-y-6">
|
||||
<form action="/install" method="POST" class="space-y-6">
|
||||
|
||||
<!-- Steps UI -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-foreground text-background text-xs font-bold mt-0.5">1</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-sm text-foreground">Database Setup</h3>
|
||||
<p class="text-xs text-accents-5 mt-0.5">Tables will be created automatically (SQLite).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-foreground text-background text-xs font-bold mt-0.5">2</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-sm text-foreground">Encryption Key</h3>
|
||||
<p class="text-xs text-accents-5 mt-0.5">Secure key generation for passwords.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full bg-foreground text-background text-xs font-bold mt-0.5">3</div>
|
||||
<div class="w-full">
|
||||
<h3 class="font-medium text-sm text-foreground mb-3">Admin Account</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-medium text-accents-5">Username</label>
|
||||
<input type="text" name="username" value="admin" class="form-input" required>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-medium text-accents-5">Password</label>
|
||||
<input type="password" name="password" placeholder="Min. 8 characters" class="form-input" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2">
|
||||
<button type="submit" class="w-full btn btn-primary h-10 shadow-lg hover:shadow-primary/20">
|
||||
Install MIVO
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php include ROOT . '/app/Views/layouts/footer_public.php'; ?>
|
||||
|
||||
|
||||
226
app/Views/layouts/footer_main.php
Normal file
226
app/Views/layouts/footer_main.php
Normal file
@@ -0,0 +1,226 @@
|
||||
<?php if (isset($session) && !empty($session)): ?>
|
||||
</div> <!-- /.max-w-7xl (Sidebar content) -->
|
||||
</main>
|
||||
</div> <!-- /.flex-col (Main Content Wrapper) -->
|
||||
</div> <!-- /.flex h-screen (Sidebar Layout Root) -->
|
||||
<?php else: ?>
|
||||
</div> <!-- /.container (Navbar Global) -->
|
||||
|
||||
<footer class="border-t border-accents-2 bg-background mt-auto transition-colors duration-200">
|
||||
<div class="max-w-7xl mx-auto px-4 py-6 text-center text-sm text-accents-5">
|
||||
<p><?= \App\Config\SiteConfig::getFooter() ?></p>
|
||||
</div>
|
||||
</footer>
|
||||
<?php endif; ?>
|
||||
|
||||
<script>
|
||||
// Global Theme Toggle Logic (Class-based for multiple instances)
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const toggleButtons = document.querySelectorAll('.theme-toggle');
|
||||
|
||||
// Function to update all icons based on current mode
|
||||
const updateIcons = (isDark) => {
|
||||
const darkIcons = document.querySelectorAll('.theme-toggle-dark-icon');
|
||||
const lightIcons = document.querySelectorAll('.theme-toggle-light-icon');
|
||||
|
||||
if (isDark) {
|
||||
darkIcons.forEach(el => el.classList.add('hidden'));
|
||||
lightIcons.forEach(el => el.classList.remove('hidden'));
|
||||
} else {
|
||||
darkIcons.forEach(el => el.classList.remove('hidden'));
|
||||
lightIcons.forEach(el => el.classList.add('hidden'));
|
||||
}
|
||||
};
|
||||
|
||||
// Initial Check
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
updateIcons(true);
|
||||
} else {
|
||||
updateIcons(false);
|
||||
}
|
||||
|
||||
// Click Handlers
|
||||
toggleButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
// Update LocalStorage & HTML Class
|
||||
if (localStorage.theme === 'dark') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.theme = 'light';
|
||||
updateIcons(false);
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.theme = 'dark';
|
||||
updateIcons(true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Sidebar Toggle Logic
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
||||
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
||||
const sidebarClose = document.getElementById('sidebar-close');
|
||||
|
||||
if (sidebar && mobileMenuToggle) {
|
||||
const toggleSidebar = () => {
|
||||
const isClosed = sidebar.classList.contains('-translate-x-full');
|
||||
if (isClosed) {
|
||||
// Open
|
||||
sidebar.classList.remove('-translate-x-full');
|
||||
sidebarOverlay.classList.remove('hidden');
|
||||
// Small delay to allow display:block to apply before opacity transition
|
||||
setTimeout(() => sidebarOverlay.classList.remove('opacity-0'), 10);
|
||||
} else {
|
||||
// Close
|
||||
sidebar.classList.add('-translate-x-full');
|
||||
sidebarOverlay.classList.add('opacity-0');
|
||||
setTimeout(() => sidebarOverlay.classList.add('hidden'), 200);
|
||||
}
|
||||
};
|
||||
|
||||
mobileMenuToggle.addEventListener('click', toggleSidebar);
|
||||
if (sidebarClose) sidebarClose.addEventListener('click', toggleSidebar);
|
||||
if (sidebarOverlay) sidebarOverlay.addEventListener('click', toggleSidebar);
|
||||
}
|
||||
|
||||
// Initialize Lucide Icons
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
<?php if (\App\Helpers\FlashHelper::has()): ?>
|
||||
<?php $flash = \App\Helpers\FlashHelper::get(); ?>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Map Flash Type to Lucide Icon & Color Class
|
||||
const typeMap = {
|
||||
'success': { icon: 'check-circle-2', color: 'text-success' },
|
||||
'error': { icon: 'x-circle', color: 'text-error' },
|
||||
'warning': { icon: 'alert-triangle', color: 'text-warning' },
|
||||
'info': { icon: 'info', color: 'text-info' },
|
||||
'question':{ icon: 'help-circle', color: 'text-question' }
|
||||
};
|
||||
|
||||
const type = '<?= $flash['type'] ?>';
|
||||
const config = typeMap[type] || typeMap['info'];
|
||||
|
||||
let title = '<?= addslashes($flash['title']) ?>';
|
||||
let message = '<?= addslashes($flash['message'] ?? '') ?>';
|
||||
const params = <?= json_encode($flash['params'] ?? []) ?>;
|
||||
const isTranslated = <?= $flash['isTranslated'] ? 'true' : 'false' ?>;
|
||||
|
||||
const showFlash = () => {
|
||||
if (isTranslated && window.i18n) {
|
||||
title = window.i18n.t(title, params);
|
||||
message = window.i18n.t(message, params);
|
||||
}
|
||||
|
||||
// Use Toasts for all flash notifications
|
||||
Mivo.toast(type, title, message);
|
||||
};
|
||||
|
||||
if (window.i18n && window.i18n.ready) {
|
||||
window.i18n.ready.then(showFlash);
|
||||
} else {
|
||||
showFlash();
|
||||
}
|
||||
});
|
||||
<?php endif; ?>
|
||||
</script>
|
||||
<script>
|
||||
// Global Dropdown & Sidebar Logic
|
||||
function toggleMenu(menuId, button) {
|
||||
const menu = document.getElementById(menuId);
|
||||
if (!menu) return;
|
||||
|
||||
// Handle Dropdowns (IDs start with 'lang-' or 'session-')
|
||||
if (menuId.startsWith('lang-') || menuId === 'session-dropdown') {
|
||||
if (menu.classList.contains('invisible')) {
|
||||
// Open
|
||||
menu.classList.remove('opacity-0', 'scale-95', 'invisible', 'pointer-events-none');
|
||||
menu.classList.add('opacity-100', 'scale-100', 'visible', 'pointer-events-auto');
|
||||
} else {
|
||||
// Close
|
||||
menu.classList.add('opacity-0', 'scale-95', 'invisible', 'pointer-events-none');
|
||||
menu.classList.remove('opacity-100', 'scale-100', 'visible', 'pointer-events-auto');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle Collapsible (Max-Height + Fade for Navbar)
|
||||
const isOpening = menu.style.maxHeight === '0px' || menu.style.maxHeight === '';
|
||||
const chevron = button.querySelector('[data-lucide="chevron-down"]');
|
||||
const burger = button.querySelector('[data-lucide="menu"]');
|
||||
|
||||
if (isOpening) {
|
||||
menu.style.maxHeight = menu.scrollHeight + "px";
|
||||
if (chevron) chevron.classList.add('rotate-180');
|
||||
if (burger) burger.classList.add('rotate-90');
|
||||
|
||||
if (menuId === 'mobile-navbar-menu') {
|
||||
menu.classList.remove('opacity-0', 'invisible');
|
||||
menu.classList.add('opacity-100', 'visible');
|
||||
}
|
||||
} else {
|
||||
menu.style.maxHeight = "0px";
|
||||
if (chevron) chevron.classList.remove('rotate-180');
|
||||
if (burger) burger.classList.remove('rotate-90');
|
||||
|
||||
if (menuId === 'mobile-navbar-menu') {
|
||||
menu.classList.add('opacity-0', 'invisible');
|
||||
menu.classList.remove('opacity-100', 'visible');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Close dropdowns when clicking outside
|
||||
document.addEventListener('click', function(event) {
|
||||
const dropdowns = document.querySelectorAll('[id^="lang-dropdown"], #session-dropdown');
|
||||
dropdowns.forEach(dropdown => {
|
||||
if (!dropdown.classList.contains('invisible')) {
|
||||
// Find the trigger button (previous sibling usually)
|
||||
// Robust way: check if click is inside dropdown OR inside the button that toggles it
|
||||
// Since button calls toggleMenu, we just need to ignore clicks inside dropdown and button?
|
||||
// Actually, simpler: just check if click is OUTSIDE dropdown.
|
||||
// But if click is on button, let button handler toggle it (don't double toggle).
|
||||
|
||||
const button = document.querySelector(`button[onclick*="'${dropdown.id}'"]`);
|
||||
|
||||
if (!dropdown.contains(event.target) && (!button || !button.contains(event.target))) {
|
||||
dropdown.classList.add('opacity-0', 'scale-95', 'invisible', 'pointer-events-none');
|
||||
dropdown.classList.remove('opacity-100', 'scale-100', 'visible', 'pointer-events-auto');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Helper for confirm actions
|
||||
async function confirmAction(url, message) {
|
||||
const title = message.includes('Reboot') ? 'Reboot Router?' : 'Shutdown Router?';
|
||||
const okText = message.includes('Reboot') ? 'Reboot' : 'Shutdown';
|
||||
|
||||
const confirmed = await Mivo.confirm(title, message, okText, 'Cancel');
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(url, { method: 'POST' });
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
Mivo.toast('success', title.replace('?', ''), 'The command has been sent to the router.');
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Action Failed',
|
||||
text: data.error || 'Unknown error occurred.',
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
backdrop: 'rgba(0,0,0,0.1)'
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
Mivo.toast('error', 'Connection Error', 'Failed to reach the server.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
82
app/Views/layouts/footer_public.php
Normal file
82
app/Views/layouts/footer_public.php
Normal file
@@ -0,0 +1,82 @@
|
||||
<footer class="mt-auto py-6 text-center text-xs text-accents-5 opacity-60">
|
||||
<?= \App\Config\SiteConfig::getFooter() ?>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize Lucide Icons
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
|
||||
<?php if (\App\Helpers\FlashHelper::has()): ?>
|
||||
<?php $flash = \App\Helpers\FlashHelper::get(); ?>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Map Flash Type to Lucide Icon & Color Class
|
||||
const typeMap = {
|
||||
'success': { icon: 'check-circle-2', color: 'text-success' },
|
||||
'error': { icon: 'x-circle', color: 'text-error' },
|
||||
'warning': { icon: 'alert-triangle', color: 'text-warning' },
|
||||
'info': { icon: 'info', color: 'text-info' },
|
||||
'question':{ icon: 'help-circle', color: 'text-question' }
|
||||
};
|
||||
|
||||
const type = '<?= $flash['type'] ?>';
|
||||
const config = typeMap[type] || typeMap['info'];
|
||||
|
||||
let title = '<?= addslashes($flash['title']) ?>';
|
||||
let message = '<?= addslashes($flash['message'] ?? '') ?>';
|
||||
const params = <?= json_encode($flash['params'] ?? []) ?>;
|
||||
const isTranslated = <?= $flash['isTranslated'] ? 'true' : 'false' ?>;
|
||||
|
||||
const showFlash = () => {
|
||||
if (isTranslated && window.i18n) {
|
||||
title = window.i18n.t(title, params);
|
||||
message = window.i18n.t(message, params);
|
||||
}
|
||||
|
||||
// Use Custom Toasts for most notifications (Success, Info, Error)
|
||||
// Only use Modal (Swal) for specific heavy warnings or questions if needed
|
||||
if (['success', 'info', 'error', 'warning'].includes(type)) {
|
||||
// Assuming Mivo.toast is available globally or via another script check
|
||||
if (window.Mivo && window.Mivo.toast) {
|
||||
Mivo.toast(type, title, message);
|
||||
} else {
|
||||
console.log('Toast:', title, message);
|
||||
}
|
||||
} else {
|
||||
// Use Swal for 'question' or fallback
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({
|
||||
iconHtml: `<i data-lucide="${config.icon}" class="w-12 h-12 ${config.color}"></i>`,
|
||||
title: title,
|
||||
text: message,
|
||||
confirmButtonText: 'OK',
|
||||
customClass: {
|
||||
popup: 'swal2-premium-card',
|
||||
confirmButton: 'btn btn-primary',
|
||||
cancelButton: 'btn btn-secondary',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
heightAuto: false,
|
||||
didOpen: () => {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
alert(`${title}\n${message}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (window.i18n && window.i18n.ready) {
|
||||
window.i18n.ready.then(showFlash);
|
||||
} else {
|
||||
showFlash();
|
||||
}
|
||||
});
|
||||
<?php endif; ?>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
135
app/Views/layouts/header_main.php
Normal file
135
app/Views/layouts/header_main.php
Normal file
@@ -0,0 +1,135 @@
|
||||
<?php
|
||||
// Initialize variables to avoid undefined notices if not set
|
||||
$hotspotname = isset($hotspotname) ? $hotspotname : \App\Config\SiteConfig::APP_NAME;
|
||||
$themecolor = isset($themecolor) ? $themecolor : '#000000';
|
||||
$theme = 'light'; // Default theme
|
||||
$title = isset($title) ? $title : \App\Config\SiteConfig::APP_NAME;
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><?= $title; ?></title>
|
||||
<meta name="theme-color" content="<?= $themecolor ?>" />
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="icon" href="/assets/img/favicon.png" />
|
||||
|
||||
<!-- Tailwind CSS (Local) -->
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
|
||||
<!-- Flag Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.2.3/css/flag-icons.min.css" />
|
||||
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('/assets/fonts/Geist-Regular.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('/assets/fonts/Geist-Bold.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Check local storage or system preference on load
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
</script>
|
||||
<script src="/assets/js/jquery.min.js"></script>
|
||||
<script src="/assets/js/lucide.min.js"></script>
|
||||
<script src="/assets/js/custom-select.js" defer></script>
|
||||
<script src="/assets/js/datatable.js" defer></script>
|
||||
<script src="/assets/js/sweetalert2.all.min.js" defer></script>
|
||||
<script src="/assets/js/alert-helper.js" defer></script>
|
||||
<script src="/assets/js/i18n.js" defer></script>
|
||||
<script src="/assets/js/i18n.js" defer></script>
|
||||
|
||||
<style>
|
||||
/* Global Form Input Style - Matches Vercel Design System */
|
||||
.form-input, .form-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2.5rem; /* 10px */
|
||||
width: 100%;
|
||||
border-radius: 0.375rem; /* 6px */
|
||||
border: 1px solid var(--accents-2, #eaeaea);
|
||||
background-color: var(--background, #ffffff);
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
font-size: 0.875rem; /* 14px */
|
||||
line-height: 1.25rem;
|
||||
color: var(--foreground, #000);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
/* Input with left icon spacing */
|
||||
.form-input.pl-10, .form-control.pl-10 {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.dark .form-input {
|
||||
background-color: #000; /* or darkest gray */
|
||||
border-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--foreground);
|
||||
box-shadow: 0 0 0 1px var(--foreground);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: var(--accents-4);
|
||||
}
|
||||
|
||||
/* Fix for DataTables or other inputs without Left Icon */
|
||||
input.form-input:not([class*="pl-"]) {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen bg-background text-foreground anti-aliased relative">
|
||||
<!-- Background Elements (Global Sci-Fi Grid) -->
|
||||
<div class="fixed inset-0 z-0 pointer-events-none">
|
||||
<!-- Subtle Grid Pattern -->
|
||||
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMCwwLDAsMC4zKSIvPjwvc3ZnPg==')] dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')] [mask-image:linear-gradient(to_bottom,white,transparent)]"></div>
|
||||
<div class="absolute -top-[20%] -left-[10%] w-[70vw] h-[70vw] rounded-full bg-blue-500/20 dark:bg-blue-500/5 blur-[120px] animate-pulse" style="animation-duration: 4s;"></div>
|
||||
<div class="absolute top-[30%] -right-[15%] w-[60vw] h-[60vw] rounded-full bg-purple-500/20 dark:bg-purple-500/5 blur-[100px] animate-pulse" style="animation-duration: 6s; animation-delay: 1s;"></div>
|
||||
</div>
|
||||
<?php
|
||||
if (isset($session) && !empty($session)) {
|
||||
// Session Layout (Sidebar)
|
||||
include ROOT . '/app/Views/layouts/sidebar_session.php';
|
||||
} else {
|
||||
// Global Layout (Navbar)
|
||||
include ROOT . '/app/Views/layouts/navbar_main.php';
|
||||
if (!isset($no_main_container) || !$no_main_container) {
|
||||
echo '<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow w-full flex flex-col">';
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
|
||||
68
app/Views/layouts/header_public.php
Normal file
68
app/Views/layouts/header_public.php
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?= $title ?? 'MIVO' ?></title>
|
||||
<!-- Tailwind CSS (Local) -->
|
||||
<link rel="stylesheet" href="/assets/css/styles.css">
|
||||
<script src="/assets/js/lucide.min.js"></script>
|
||||
<script src="/assets/js/sweetalert2.all.min.js" defer></script>
|
||||
<script src="/assets/js/alert-helper.js" defer></script>
|
||||
<script src="/assets/js/i18n.js" defer></script>
|
||||
<style>
|
||||
/* Custom Keyframes */
|
||||
@keyframes fade-in-up {
|
||||
0% { opacity: 0; transform: translateY(10px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.4s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Check local storage for theme
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-foreground antialiased min-h-screen relative overflow-hidden font-sans selection:bg-accents-2 selection:text-foreground flex flex-col">
|
||||
|
||||
<!-- Background Elements (Common) -->
|
||||
<div class="absolute inset-0 z-0 pointer-events-none">
|
||||
<!-- Subtle Grid Pattern -->
|
||||
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMCwwLDAsMC4zKSIvPjwvc3ZnPg==')] dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')] [mask-image:linear-gradient(to_bottom,white,transparent)]"></div>
|
||||
<div class="absolute -top-[20%] -left-[10%] w-[70vw] h-[70vw] rounded-full bg-blue-500/20 dark:bg-blue-500/5 blur-[120px] animate-pulse" style="animation-duration: 4s;"></div>
|
||||
<div class="absolute top-[30%] -right-[15%] w-[60vw] h-[60vw] rounded-full bg-purple-500/20 dark:bg-purple-500/5 blur-[100px] animate-pulse" style="animation-duration: 6s; animation-delay: 1s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Theme Toggle (Bottom Right) -->
|
||||
<button id="theme-toggle" class="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-background border border-accents-2 shadow-lg text-accents-5 hover:text-foreground hover:border-foreground transition-all duration-300 group" style="position: fixed; bottom: 1.5rem; right: 1.5rem;">
|
||||
<i data-lucide="moon" class="w-5 h-5 block dark:hidden group-hover:scale-110 transition-transform"></i>
|
||||
<i data-lucide="sun" class="w-5 h-5 hidden dark:block group-hover:scale-110 transition-transform"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
lucide.createIcons();
|
||||
|
||||
// Theme Toggle Logic
|
||||
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||
const htmlElement = document.documentElement;
|
||||
|
||||
if(themeToggleBtn){
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
if (htmlElement.classList.contains('dark')) {
|
||||
htmlElement.classList.remove('dark');
|
||||
localStorage.theme = 'light';
|
||||
} else {
|
||||
htmlElement.classList.add('dark');
|
||||
localStorage.theme = 'dark';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
127
app/Views/layouts/navbar_main.php
Normal file
127
app/Views/layouts/navbar_main.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<?php
|
||||
// Determine active link state
|
||||
$uri = $_SERVER['REQUEST_URI'] ?? '/';
|
||||
?>
|
||||
<!-- Modern Navbar (Tailwind) -->
|
||||
<nav class="sticky top-0 z-50 w-full border-b border-accents-2 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 items-center justify-between">
|
||||
<!-- Brand & Desktop Nav -->
|
||||
<div class="flex items-center gap-8">
|
||||
<a href="/" class="flex items-center gap-2 group">
|
||||
<img src="/assets/img/logo-m.svg" alt="<?= \App\Config\SiteConfig::APP_NAME ?> Logo" class="h-6 w-auto block dark:hidden transition-transform group-hover:scale-110">
|
||||
<img src="/assets/img/logo-m-dark.svg" alt="<?= \App\Config\SiteConfig::APP_NAME ?> Logo" class="h-6 w-auto hidden dark:block transition-transform group-hover:scale-110">
|
||||
<span class="font-bold text-lg tracking-tight"><?= \App\Config\SiteConfig::APP_NAME ?></span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation Links (Hidden on Mobile) -->
|
||||
<div class="hidden md:flex items-center gap-6 text-sm font-medium">
|
||||
<a href="/" class="relative py-1 <?= ($uri == '/' || $uri == '/home') ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-foreground' : 'text-accents-5 hover:text-foreground transition-colors' ?>">Home</a>
|
||||
<a href="/settings" class="relative py-1 <?= (strpos($uri, '/settings') === 0) ? 'text-foreground after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-foreground' : 'text-accents-5 hover:text-foreground transition-colors' ?>">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right side controls -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Desktop Control Pill (Hidden on Mobile) -->
|
||||
<div class="hidden md:flex control-pill scale-95 hover:scale-100 transition-transform">
|
||||
<!-- Language Switcher -->
|
||||
<div class="relative group">
|
||||
<button type="button" class="pill-lang-btn" onclick="toggleMenu('lang-dropdown-nav', this)" title="Change Language">
|
||||
<i data-lucide="languages" class="w-4 h-4 !text-black dark:!text-white" stroke-width="2.5"></i>
|
||||
</button>
|
||||
<div id="lang-dropdown-nav" class="absolute right-0 top-full mt-3 w-48 bg-background/90 backdrop-blur-xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top-right opacity-0 scale-95 invisible pointer-events-none z-50">
|
||||
<div class="px-3 py-2 text-[10px] font-bold text-accents-4 uppercase tracking-widest border-b border-accents-2/50 bg-accents-1/50" data-i18n="sidebar.switch_language">Select Language</div>
|
||||
<?php
|
||||
$languages = \App\Helpers\LanguageHelper::getAvailableLanguages();
|
||||
foreach ($languages as $lang):
|
||||
?>
|
||||
<button onclick="changeLanguage('<?= $lang['code'] ?>')" class="w-full text-left flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accents-1 transition-colors text-accents-6 hover:text-foreground group/lang">
|
||||
<span class="fi fi-<?= $lang['flag'] ?> rounded-sm shadow-sm transition-transform group-hover/lang:scale-110"></span>
|
||||
<span><?= $lang['name'] ?></span>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pill-divider"></div>
|
||||
|
||||
<!-- Theme Toggle (Segmented) -->
|
||||
<div class="segmented-switch theme-toggle" title="Toggle Theme">
|
||||
<div class="segmented-switch-slider"></div>
|
||||
<div class="segmented-switch-btn theme-toggle-light-icon">
|
||||
<i data-lucide="sun" class="w-4 h-4" stroke-width="3.5"></i>
|
||||
</div>
|
||||
<div class="segmented-switch-btn theme-toggle-dark-icon">
|
||||
<i data-lucide="moon" class="w-4 h-4" stroke-width="3.5"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if(isset($_SESSION['user_id'])): ?>
|
||||
<div class="pill-divider"></div>
|
||||
<a href="/logout" class="p-1.5 rounded-lg text-accents-5 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all ml-0.5" title="Logout">
|
||||
<i data-lucide="log-out" class="w-4 h-4 !text-black dark:!text-white" stroke-width="2.5"></i>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Toggles -->
|
||||
<div class="flex md:hidden items-center gap-2">
|
||||
<!-- Mobile Mode Control Pill (Condensed) -->
|
||||
<div class="control-pill py-1.5 px-2">
|
||||
<div class="segmented-switch theme-toggle scale-75" title="Toggle Theme">
|
||||
<div class="segmented-switch-slider"></div>
|
||||
<div class="segmented-switch-btn theme-toggle-light-icon"><i data-lucide="sun" class="w-4 h-4" stroke-width="3.5"></i></div>
|
||||
<div class="segmented-switch-btn theme-toggle-dark-icon"><i data-lucide="moon" class="w-4 h-4" stroke-width="3.5"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="p-2 rounded-lg bg-accents-1 text-accents-5 hover:text-foreground transition-colors group" onclick="toggleMenu('mobile-navbar-menu', this)">
|
||||
<i data-lucide="menu" class="w-5 h-5 !text-black dark:!text-white transition-transform duration-300" stroke-width="2.5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation Drawer (Hidden by default) -->
|
||||
<div id="mobile-navbar-menu" class="md:hidden border-t border-accents-2 bg-background/95 backdrop-blur-xl transition-all duration-300 ease-in-out max-h-0 opacity-0 invisible overflow-hidden">
|
||||
<div class="px-4 pt-4 pb-6 space-y-4">
|
||||
<!-- Nav Links -->
|
||||
<div class="flex flex-col gap-1">
|
||||
<a href="/" class="flex items-center gap-3 px-4 py-3 rounded-xl <?= ($uri == '/' || $uri == '/home') ? 'bg-foreground/5 text-foreground font-bold' : 'text-accents-5 hover:bg-accents-1' ?>">
|
||||
<i data-lucide="home" class="w-5 h-5 !text-black dark:!text-white" stroke-width="2.5"></i>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
<a href="/settings" class="flex items-center gap-3 px-4 py-3 rounded-xl <?= (strpos($uri, '/settings') === 0) ? 'bg-foreground/5 text-foreground font-bold' : 'text-accents-5 hover:bg-accents-1' ?>">
|
||||
<i data-lucide="settings" class="w-5 h-5 !text-black dark:!text-white" stroke-width="2.5"></i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Controls Overlay -->
|
||||
<div class="p-4 rounded-2xl bg-accents-1/50 border border-accents-2 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-bold text-accents-4 uppercase tracking-wider">Select Language</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 overflow-x-auto pb-2 -mx-4 px-4 scrollbar-hide snap-x">
|
||||
<?php foreach ($languages as $lang): ?>
|
||||
<button onclick="changeLanguage('<?= $lang['code'] ?>')" class="flex-shrink-0 flex items-center gap-2 px-4 py-2 rounded-full border border-accents-2 bg-background hover:border-foreground transition-all text-sm font-medium snap-start shadow-sm">
|
||||
<span class="fi fi-<?= $lang['flag'] ?> rounded-full shadow-sm"></span>
|
||||
<span class="whitespace-nowrap"><?= $lang['name'] ?></span>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<?php if(isset($_SESSION['user_id'])): ?>
|
||||
<div class="pt-2 border-t border-accents-2">
|
||||
<a href="/logout" class="flex items-center justify-center gap-2 w-full px-4 py-3 rounded-xl bg-red-500/10 text-red-600 font-bold hover:bg-red-500/20 transition-all">
|
||||
<i data-lucide="log-out" class="w-5 h-5 !text-black dark:!text-white" stroke-width="2.5"></i>
|
||||
<span>Logout System</span>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
475
app/Views/layouts/sidebar_session.php
Normal file
475
app/Views/layouts/sidebar_session.php
Normal file
@@ -0,0 +1,475 @@
|
||||
<?php
|
||||
// Determine active link state
|
||||
$uri = $_SERVER['REQUEST_URI'] ?? '/';
|
||||
$isDashboard = strpos($uri, '/dashboard') !== false;
|
||||
$isGenerate = strpos($uri, '/hotspot/generate') !== false;
|
||||
$isTemplates = strpos($uri, '/settings/templates') !== false;
|
||||
$isSettings = ($uri === '/settings' || strpos($uri, '/settings/') !== false) && !$isTemplates;
|
||||
|
||||
// Hotspot Group Active Check
|
||||
$hotspotPages = ['/hotspot/users', '/hotspot/profiles', '/hotspot/generate', '/hotspot/cookies'];
|
||||
$isHotspotActive = false;
|
||||
foreach ($hotspotPages as $page) {
|
||||
if (strpos($uri, $page) !== false) {
|
||||
$isHotspotActive = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Status Group Active Check
|
||||
$statusPages = ['/hotspot/active', '/hotspot/hosts'];
|
||||
$isStatusActive = false;
|
||||
foreach ($statusPages as $page) {
|
||||
if (strpos($uri, $page) !== false) {
|
||||
$isStatusActive = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Security Group Active Check (Existing)
|
||||
$securityPages = ['/hotspot/bindings', '/hotspot/walled-garden'];
|
||||
$isSecurityActive = false;
|
||||
foreach ($securityPages as $page) {
|
||||
if (strpos($uri, $page) !== false) {
|
||||
$isSecurityActive = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Reports Group Active Check
|
||||
$reportsPages = ['/reports/resume', '/reports/selling', '/reports/user-log'];
|
||||
$isReportsActive = false;
|
||||
foreach ($reportsPages as $page) {
|
||||
if (strpos($uri, $page) !== false) {
|
||||
$isReportsActive = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Network Group Active Check
|
||||
$networkPages = ['/network/dhcp'];
|
||||
$isNetworkActive = false;
|
||||
foreach ($networkPages as $page) {
|
||||
if (strpos($uri, $page) !== false) {
|
||||
$isNetworkActive = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// System Group Active Check
|
||||
$systemPages = ['/system/scheduler'];
|
||||
$isSystemActive = false;
|
||||
foreach ($systemPages as $page) {
|
||||
if (strpos($uri, $page) !== false) {
|
||||
$isSystemActive = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch all sessions for the switcher
|
||||
$configModel = new \App\Models\Config();
|
||||
$allSessions = $configModel->getAllSessions();
|
||||
|
||||
// Find current session details to get Hotspot Name / IP
|
||||
$currentSessionDetails = [];
|
||||
foreach ($allSessions as $s) {
|
||||
if (isset($session) && $s['session_name'] === $session) {
|
||||
$currentSessionDetails = $s;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Determine label: Hotspot Name > IP Address > 'MIVO'
|
||||
$sessionLabel = $currentSessionDetails['hotspot_name'] ?? $currentSessionDetails['ip_address'] ?? 'MIVO';
|
||||
if (empty($sessionLabel)) {
|
||||
$sessionLabel = $currentSessionDetails['ip_address'] ?? 'MIVO';
|
||||
}
|
||||
|
||||
// Helper for Session Initials (Kebab-friendly)
|
||||
$getInitials = function($name) {
|
||||
if (empty($name)) return 'UN';
|
||||
if (strpos($name, '-') !== false) {
|
||||
$parts = explode('-', $name);
|
||||
$initials = '';
|
||||
foreach ($parts as $part) {
|
||||
if (!empty($part)) $initials .= substr($part, 0, 1);
|
||||
}
|
||||
return strtoupper(substr($initials, 0, 2));
|
||||
}
|
||||
return strtoupper(substr($name, 0, 2));
|
||||
};
|
||||
?>
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Mobile Sidebar Overlay -->
|
||||
<div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden md:hidden transition-opacity opacity-0"></div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside id="sidebar" class="w-64 flex-shrink-0 border-r border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-[40px] fixed md:static inset-y-0 left-0 z-40 transform -translate-x-full md:translate-x-0 transition-transform duration-200 flex flex-col h-full">
|
||||
<!-- Sidebar Header -->
|
||||
<!-- Sidebar Header -->
|
||||
<div class="group flex flex-col items-center py-5 border-b border-accents-2 flex-shrink-0 relative cursor-default overflow-hidden">
|
||||
<div class="relative w-full h-10 flex items-center justify-center">
|
||||
<!-- Brand (Slides out to the Left) -->
|
||||
<div class="flex items-center gap-2 font-bold text-2xl tracking-tighter transition-all duration-500 ease-in-out group-hover:-translate-x-full group-hover:opacity-0">
|
||||
<img src="/assets/img/logo-m.svg" alt="MIVO Logo" class="h-10 w-auto block dark:hidden">
|
||||
<img src="/assets/img/logo-m-dark.svg" alt="MIVO Logo" class="h-10 w-auto hidden dark:block">
|
||||
<span>MIVO</span>
|
||||
</div>
|
||||
|
||||
<!-- Premium Control Pill (Slides in from the Right to replace Brand) -->
|
||||
<div class="absolute inset-0 hidden md:flex items-center justify-center transition-all duration-500 ease-in-out translate-x-full opacity-0 group-hover:translate-x-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto z-10">
|
||||
<div class="control-pill scale-90 transition-transform hover:scale-100 shadow-lg bg-white/10 dark:bg-black/20 backdrop-blur-md">
|
||||
<!-- Language Switcher -->
|
||||
<div class="relative group/lang">
|
||||
<button type="button" class="pill-lang-btn" onclick="toggleMenu('lang-dropdown-sidebar', this)" title="Change Language">
|
||||
<i data-lucide="languages" class="w-4 h-4 !text-black dark:!text-white" stroke-width="2.5"></i>
|
||||
</button>
|
||||
<div id="lang-dropdown-sidebar" class="absolute left-1/2 -translate-x-1/2 top-full mt-3 w-48 bg-background/90 backdrop-blur-xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top opacity-0 scale-95 invisible pointer-events-none z-50">
|
||||
<div class="px-3 py-2 text-[10px] font-bold text-accents-4 uppercase tracking-widest border-b border-accents-2/50 bg-accents-1/50" data-i18n="sidebar.switch_language">Select Language</div>
|
||||
<?php
|
||||
$languages = \App\Helpers\LanguageHelper::getAvailableLanguages();
|
||||
foreach ($languages as $lang):
|
||||
?>
|
||||
<button onclick="changeLanguage('<?= $lang['code'] ?>')" class="w-full text-left flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accents-1 transition-colors text-accents-6 hover:text-foreground group/lang-item">
|
||||
<span class="fi fi-<?= $lang['flag'] ?> rounded-sm shadow-sm transition-transform group-hover/lang-item:scale-110"></span>
|
||||
<span><?= $lang['name'] ?></span>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pill-divider"></div>
|
||||
|
||||
<!-- Theme Toggle (Segmented) -->
|
||||
<div class="segmented-switch theme-toggle" title="Toggle Theme">
|
||||
<div class="segmented-switch-slider"></div>
|
||||
<div class="segmented-switch-btn theme-toggle-light-icon">
|
||||
<i data-lucide="sun" class="w-4 h-4" stroke-width="3.5"></i>
|
||||
</div>
|
||||
<div class="segmented-switch-btn theme-toggle-dark-icon">
|
||||
<i data-lucide="moon" class="w-4 h-4" stroke-width="3.5"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Close Button -->
|
||||
<button id="sidebar-close" class="md:hidden absolute top-4 right-4 text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Sidebar Content -->
|
||||
<!-- Sidebar Content (RTL for left scrollbar) -->
|
||||
<div class="flex-1 overflow-y-auto" style="direction: rtl;">
|
||||
<div class="py-4 px-3 space-y-1" style="direction: ltr;">
|
||||
<!-- Session Switcher -->
|
||||
<div class="px-3 mb-6 relative">
|
||||
<button type="button" class="w-full group grid grid-cols-[auto_1fr_auto] items-center gap-3 px-4 py-2.5 rounded-xl bg-white/50 dark:bg-white/5 border border-accents-2 dark:border-white/10 hover:bg-white/80 dark:hover:bg-white/10 transition-all decoration-0 overflow-hidden shadow-sm" onclick="toggleMenu('session-dropdown', this)">
|
||||
<!-- Initials -->
|
||||
<div class="h-8 w-8 rounded-lg bg-accents-2/50 group-hover:bg-accents-2 flex items-center justify-center text-xs font-bold text-accents-6 group-hover:text-foreground transition-colors flex-shrink-0">
|
||||
<?= $getInitials($session ?? '') ?>
|
||||
</div>
|
||||
|
||||
<!-- Text Info -->
|
||||
<div class="flex flex-col text-left min-w-0">
|
||||
<span class="text-xs font-bold text-accents-6 group-hover:text-foreground transition-colors leading-none truncate"><?= htmlspecialchars($session ?? 'Select Session') ?></span>
|
||||
<span class="text-[10px] text-accents-4 leading-none mt-1 truncate" title="<?= htmlspecialchars($sessionLabel) ?>">
|
||||
<?= htmlspecialchars($sessionLabel) ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Chevron Icon -->
|
||||
<div class="h-8 w-8 flex-shrink-0 flex items-center justify-center rounded-lg bg-accents-2/50 group-hover:bg-accents-2 transition-colors">
|
||||
<i data-lucide="chevrons-up-down" class="!w-4 !h-4 !text-accents-6 dark:!text-accents-6 transition-colors"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown -->
|
||||
<div id="session-dropdown" class="absolute top-full left-3 w-[calc(100%-1.5rem)] z-50 mt-1 bg-background border border-accents-2 rounded-lg shadow-lg overflow-hidden transition-all duration-200 ease-out origin-top opacity-0 scale-95 invisible pointer-events-none">
|
||||
<div class="py-1 max-h-60 overflow-y-auto">
|
||||
<div class="px-3 py-2 text-xs font-semibold text-accents-5 uppercase tracking-wider bg-accents-1/50 border-b border-accents-2" data-i18n="sidebar.switch_session">
|
||||
Switch Session
|
||||
</div>
|
||||
<?php foreach ($allSessions as $s): ?>
|
||||
<a href="/<?= htmlspecialchars($s['session_name']) ?>/dashboard" class="flex items-center gap-3 px-3 py-2 text-sm hover:bg-accents-1 transition-colors group/item">
|
||||
<div class="h-6 w-6 rounded flex-shrink-0 bg-accents-2 flex items-center justify-center text-[10px] font-bold">
|
||||
<?= $getInitials($s['session_name']) ?>
|
||||
</div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<span class="truncate <?= ($session === $s['session_name']) ? 'font-medium text-foreground' : 'text-accents-5 group-hover/item:text-foreground' ?>">
|
||||
<?= htmlspecialchars($s['session_name']) ?>
|
||||
</span>
|
||||
<span class="text-[10px] text-accents-4 truncate">
|
||||
<?= htmlspecialchars($s['hotspot_name'] ?: $s['ip_address']) ?>
|
||||
</span>
|
||||
</div>
|
||||
<?php if ($session === $s['session_name']): ?>
|
||||
<i data-lucide="check" class="w-3 h-3 ml-auto text-primary"></i>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="border-t border-accents-2 p-1 bg-accents-1/30">
|
||||
<a href="/settings/add" class="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accents-2 rounded-md transition-colors text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="plus-circle" class="w-4 h-4"></i>
|
||||
<span data-i18n="settings.add_router">Connect Router</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard -->
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors <?= $isDashboard ? 'bg-white/40 dark:bg-white/5 shadow-sm text-foreground ring-1 ring-white/10' : 'text-accents-6 hover:text-foreground hover:bg-white/5' ?>">
|
||||
<i data-lucide="layout-dashboard" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.dashboard">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<!-- Quick Print -->
|
||||
<a href="/<?= htmlspecialchars($session) ?>/quick-print" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors <?= (strpos($uri, '/quick-print') !== false) ? 'bg-white/40 dark:bg-white/5 shadow-sm text-foreground ring-1 ring-white/10' : 'text-accents-6 hover:text-foreground hover:bg-white/5' ?>">
|
||||
<i data-lucide="printer" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.quick_print">Quick Print</span>
|
||||
</a>
|
||||
|
||||
<!-- Hotspots Separator -->
|
||||
<div class="pt-4 pb-1 px-3">
|
||||
<div class="text-xs font-semibold text-accents-5 uppercase tracking-wider" data-i18n="sidebar.hotspot">Hotspots</div>
|
||||
</div>
|
||||
|
||||
<!-- Hotspot Group (Collapsible) -->
|
||||
<div class="space-y-1">
|
||||
<button type="button" class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-5 hover:text-foreground hover:bg-accents-2/50 group" onclick="toggleMenu('hotspot-menu', this)">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="wifi" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.hotspot">Hotspot</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300 <?= $isHotspotActive ? 'rotate-180' : '' ?>"></i>
|
||||
</button>
|
||||
|
||||
<div id="hotspot-menu" class="space-y-1 pl-9 overflow-hidden transition-[max-height] duration-300 ease-in-out" style="max-height: <?= $isHotspotActive ? '500px' : '0px' ?>">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/users') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.users">Users</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/profiles" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/profile') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.profiles">User Profiles</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/generate" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/generate') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.generate">Generate</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/cookies" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/cookies') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.cookies">Cookies</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Group (Collapsible) -->
|
||||
<div class="space-y-1">
|
||||
<button type="button" class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-5 hover:text-foreground hover:bg-accents-2/50 group" onclick="toggleMenu('status-menu', this)">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="activity" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.status">Status</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300 <?= $isStatusActive ? 'rotate-180' : '' ?>"></i>
|
||||
</button>
|
||||
|
||||
<div id="status-menu" class="space-y-1 pl-9 overflow-hidden transition-[max-height] duration-300 ease-in-out" style="max-height: <?= $isStatusActive ? '500px' : '0px' ?>">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/active" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/active') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.active">Active</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/hosts" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/hosts') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.hosts">Hosts</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Group (Collapsible) -->
|
||||
<div class="space-y-1">
|
||||
<button type="button" class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-5 hover:text-foreground hover:bg-accents-2/50 group" onclick="toggleMenu('security-menu', this)">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="shield" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.security">Security</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300 <?= $isSecurityActive ? 'rotate-180' : '' ?>"></i>
|
||||
</button>
|
||||
|
||||
<div id="security-menu" class="space-y-1 pl-9 overflow-hidden transition-[max-height] duration-300 ease-in-out" style="max-height: <?= $isSecurityActive ? '500px' : '0px' ?>">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/bindings" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/bindings') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.bindings">IP Bindings</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/walled-garden" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/hotspot/walled-garden') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="hotspot_menu.walled_garden">Walled Garden</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Reports Group -->
|
||||
<div class="space-y-1">
|
||||
<button type="button" class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-5 hover:text-foreground hover:bg-accents-2/50 group" onclick="toggleMenu('reports-menu', this)">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="file-text" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.reports">Reports</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300 <?= $isReportsActive ? 'rotate-180' : '' ?>"></i>
|
||||
</button>
|
||||
|
||||
<div id="reports-menu" class="space-y-1 pl-9 overflow-hidden transition-[max-height] duration-300 ease-in-out" style="max-height: <?= $isReportsActive ? '500px' : '0px' ?>">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/reports/resume" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/reports/resume') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="reports_menu.resume">Resume</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/reports/selling" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/reports/selling') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="reports_menu.selling">Selling Report</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/reports/user-log" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/reports/user-log') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="reports_menu.user_log">User Log</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Group -->
|
||||
<div class="space-y-1">
|
||||
<button type="button" class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-5 hover:text-foreground hover:bg-accents-2/50 group" onclick="toggleMenu('network-menu', this)">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="network" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.network">Network</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300 <?= $isNetworkActive ? 'rotate-180' : '' ?>"></i>
|
||||
</button>
|
||||
|
||||
<div id="network-menu" class="space-y-1 pl-9 overflow-hidden transition-[max-height] duration-300 ease-in-out" style="max-height: <?= $isNetworkActive ? '500px' : '0px' ?>">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/network/dhcp" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/network/dhcp') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="network_menu.dhcp">DHCP Leases</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Group -->
|
||||
<div class="space-y-1">
|
||||
<button type="button" class="w-full flex items-center justify-between px-3 py-2 rounded-md text-sm font-medium transition-colors text-accents-5 hover:text-foreground hover:bg-accents-2/50 group" onclick="toggleMenu('system-menu', this)">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="cpu" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.system">System</span>
|
||||
</div>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300 <?= $isSystemActive ? 'rotate-180' : '' ?>"></i>
|
||||
</button>
|
||||
|
||||
<div id="system-menu" class="space-y-1 pl-9 overflow-hidden transition-[max-height] duration-300 ease-in-out" style="max-height: <?= $isSystemActive ? '500px' : '0px' ?>">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/system/scheduler" class="block px-3 py-2 rounded-md text-sm transition-colors <?= (strpos($uri, '/system/scheduler') !== false) ? 'bg-white/40 dark:bg-white/5 text-foreground ring-1 ring-white/10 font-medium' : 'text-accents-6 hover:text-foreground' ?>">
|
||||
<span data-i18n="system_menu.scheduler">Scheduler</span>
|
||||
</a>
|
||||
<button onclick="confirmAction('/<?= htmlspecialchars($session) ?>/system/reboot', 'Reboot Router?')" class="w-full text-left block px-3 py-2 rounded-md text-sm text-accents-5 hover:text-red-500 transition-colors">
|
||||
<span data-i18n="system_menu.reboot">Reboot</span>
|
||||
</button>
|
||||
<button onclick="confirmAction('/<?= htmlspecialchars($session) ?>/system/shutdown', 'Shutdown Router?')" class="w-full text-left block px-3 py-2 rounded-md text-sm text-accents-5 hover:text-red-500 transition-colors">
|
||||
<span data-i18n="system_menu.shutdown">Shutdown</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Systems Separator -->
|
||||
<div class="pt-4 pb-1 px-3">
|
||||
<div class="text-xs font-semibold text-accents-5 uppercase tracking-wider" data-i18n="sidebar.system">Systems</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<a href="/settings" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors <?= $isSettings ? 'bg-white/40 dark:bg-white/5 shadow-sm text-foreground ring-1 ring-white/10' : 'text-accents-6 hover:text-foreground hover:bg-white/5' ?>">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.settings">Settings</span>
|
||||
</a>
|
||||
|
||||
<!-- Voucher Templates -->
|
||||
<a href="/settings/templates" class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors <?= $isTemplates ? 'bg-white/40 dark:bg-white/5 shadow-sm text-foreground ring-1 ring-white/10' : 'text-accents-6 hover:text-foreground hover:bg-white/5' ?>">
|
||||
<i data-lucide="file-code" class="w-4 h-4"></i>
|
||||
<span data-i18n="sidebar.templates">Templates</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="p-4 border-t border-white/10 space-y-3">
|
||||
<!-- Disconnect (Session) -->
|
||||
<a href="/" class="group flex items-center justify-between px-3 py-2.5 rounded-xl bg-white/50 dark:bg-white/5 border border-accents-2 dark:border-white/10 hover:bg-white/80 dark:hover:bg-white/10 transition-all decoration-0 shadow-sm" title="Disconnect Session">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-1.5 rounded-lg bg-accents-2/50 group-hover:bg-accents-2 transition-colors">
|
||||
<i data-lucide="cast" class="!w-4 !h-4 !text-black dark:!text-white !flex-shrink-0 transition-colors"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-bold text-accents-6 group-hover:text-foreground transition-colors leading-none" data-i18n="sidebar.disconnect">Disconnect</span>
|
||||
<span class="text-[10px] text-accents-4 leading-none mt-1">Exit Session</span>
|
||||
</div>
|
||||
</div>
|
||||
<i data-lucide="chevron-right" class="!w-4 !h-4 !text-black dark:!text-white !flex-shrink-0 transition-colors"></i>
|
||||
</a>
|
||||
|
||||
<?php if(isset($_SESSION['user_id'])): ?>
|
||||
<!-- Logout (System) -->
|
||||
<a href="/logout" class="group flex items-center justify-between px-3 py-2.5 rounded-xl bg-white/50 dark:bg-white/5 border border-accents-2 dark:border-white/10 hover:bg-red-500/10 hover:border-red-500/20 transition-all decoration-0 shadow-sm" title="Logout from Mivo">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-1.5 rounded-lg bg-red-500/10 text-red-500 group-hover:bg-red-500/20 transition-colors">
|
||||
<i data-lucide="log-out" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-bold text-accents-6 group-hover:text-red-500 transition-colors leading-none" data-i18n="sidebar.logout">Logout</span>
|
||||
<span class="text-[10px] text-accents-4 group-hover:text-red-400/80 leading-none mt-1">Sign Out</span>
|
||||
</div>
|
||||
</div>
|
||||
<i data-lucide="chevron-right" class="!w-4 !h-4 !text-black dark:!text-white !flex-shrink-0 group-hover:!text-red-500 transition-colors"></i>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Wrapper -->
|
||||
<div class="flex-1 flex flex-col overflow-hidden w-full">
|
||||
<!-- Mobile Header (Visible only on small screens) -->
|
||||
<header class="h-16 flex items-center justify-between px-4 border-b border-accents-2 bg-background/80 backdrop-blur-md md:hidden z-20 sticky top-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<img src="/assets/img/logo-m.svg" class="h-6 w-auto block dark:hidden">
|
||||
<img src="/assets/img/logo-m-dark.svg" class="h-6 w-auto hidden dark:block">
|
||||
<span class="font-bold">MIVO</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Mobile Premium Control Pill -->
|
||||
<div class="control-pill scale-90 origin-right transition-transform hover:scale-95">
|
||||
<!-- Language Switcher -->
|
||||
<div class="relative group">
|
||||
<button type="button" class="pill-lang-btn" onclick="toggleMenu('lang-dropdown-mobile', this)" title="Change Language">
|
||||
<i data-lucide="languages" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<div id="lang-dropdown-mobile" class="absolute right-0 top-full mt-3 w-48 bg-background/90 backdrop-blur-xl border border-accents-2 rounded-xl shadow-xl overflow-hidden transition-all duration-200 ease-out origin-top-right opacity-0 scale-95 invisible pointer-events-none z-50">
|
||||
<div class="px-3 py-2 text-[10px] font-bold text-accents-4 uppercase tracking-widest border-b border-accents-2/50 bg-accents-1/50" data-i18n="sidebar.switch_language">Select Language</div>
|
||||
<?php
|
||||
$languages = \App\Helpers\LanguageHelper::getAvailableLanguages();
|
||||
foreach ($languages as $lang):
|
||||
?>
|
||||
<button onclick="changeLanguage('<?= $lang['code'] ?>')" class="w-full text-left flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accents-1 transition-colors text-accents-6 hover:text-foreground group/lang">
|
||||
<span class="fi fi-<?= $lang['flag'] ?> rounded-sm shadow-sm transition-transform group-hover/lang:scale-110"></span>
|
||||
<span><?= $lang['name'] ?></span>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pill-divider"></div>
|
||||
|
||||
<!-- Theme Toggle (Segmented) -->
|
||||
<div class="segmented-switch theme-toggle" title="Toggle Theme">
|
||||
<div class="segmented-switch-slider"></div>
|
||||
<div class="segmented-switch-btn theme-toggle-light-icon">
|
||||
<i data-lucide="sun" class="w-4 h-4" stroke-width="3.5"></i>
|
||||
</div>
|
||||
<div class="segmented-switch-btn theme-toggle-dark-icon">
|
||||
<i data-lucide="moon" class="w-4 h-4" stroke-width="3.5"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="mobile-menu-toggle" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Scrollable Page Content -->
|
||||
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-background p-4 md:p-8">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
|
||||
87
app/Views/layouts/sidebar_settings.php
Normal file
87
app/Views/layouts/sidebar_settings.php
Normal file
@@ -0,0 +1,87 @@
|
||||
<?php
|
||||
$uri = $_SERVER['REQUEST_URI'];
|
||||
function isActive($path, $current) {
|
||||
if ($path === '/settings') {
|
||||
// Routers is the new home. Active if exactly /settings or /settings/routers
|
||||
return $current === '/settings' || $current === '/settings/' || strpos($current, '/settings/routers') !== false;
|
||||
}
|
||||
return strpos($current, $path) !== false;
|
||||
}
|
||||
|
||||
$menu = [
|
||||
['label' => 'routers_title', 'url' => '/settings', 'namespace' => 'settings'],
|
||||
['label' => 'system', 'url' => '/settings/system', 'namespace' => 'settings'],
|
||||
['label' => 'templates_title', 'url' => '/settings/templates', 'namespace' => 'settings'],
|
||||
['label' => 'logos_title', 'url' => '/settings/logos', 'namespace' => 'settings'],
|
||||
['label' => 'api_cors_title', 'url' => '/settings/api-cors', 'namespace' => 'settings'],
|
||||
];
|
||||
?>
|
||||
<nav id="settings-sidebar" class="w-full sticky top-[64px] z-40 bg-background/95 backdrop-blur border-b border-accents-2 transition-all duration-300">
|
||||
<div class="max-w-7xl mx-auto px-4 md:px-8"> <!-- Aligned with header_main max-w-7xl -->
|
||||
<div class="relative py-2 flex items-start gap-2">
|
||||
|
||||
<!-- Menu Container (Toggles between flex-row/scroll and grid) -->
|
||||
<div id="sub-navbar-menu" class="flex-1 flex flex-row items-center overflow-x-auto no-scrollbar mask-fade-right gap-2 transition-all duration-300">
|
||||
<?php foreach($menu as $item):
|
||||
$active = isActive($item['url'], $uri);
|
||||
?>
|
||||
<a href="<?= $item['url'] ?>"
|
||||
class="sub-nav-item whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 border border-transparent
|
||||
<?= $active ? 'bg-foreground text-background shadow-sm' : 'text-accents-5 hover:text-foreground hover:bg-accents-1' ?>"
|
||||
data-i18n="<?= ($item['namespace'] ?? 'settings') . '.' . $item['label'] ?>">
|
||||
<?= $item['label'] ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- Toggle Button -->
|
||||
<button id="sub-navbar-toggle" class="flex-shrink-0 p-2 text-accents-5 hover:text-foreground hover:bg-accents-1 rounded-full transition-colors hidden sm:block" title="Expand Menu">
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const toggleBtn = document.getElementById('sub-navbar-toggle');
|
||||
const menu = document.getElementById('sub-navbar-menu');
|
||||
const icon = toggleBtn?.querySelector('i');
|
||||
let isExpanded = false;
|
||||
|
||||
if (toggleBtn && menu) {
|
||||
// Check if content overflows to decide if we even show the toggle initially?
|
||||
// For now, always show it on sm+ screens if desired, or we can check scrollWidth > clientWidth.
|
||||
// Let's keep it simple: always available on desktop/tablet to see full grid.
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
isExpanded = !isExpanded;
|
||||
|
||||
if (isExpanded) {
|
||||
// Expand: Grid Layout
|
||||
menu.classList.remove('flex-row', 'overflow-x-auto', 'whitespace-nowrap', 'mask-fade-right', 'items-center');
|
||||
menu.classList.add('grid', 'grid-cols-2', 'sm:grid-cols-3', 'md:grid-cols-4', 'lg:grid-cols-5', 'gap-2', 'pb-4');
|
||||
icon.style.transform = 'rotate(180deg)';
|
||||
} else {
|
||||
// Collapse: Scroll Layout
|
||||
menu.classList.add('flex-row', 'overflow-x-auto', 'whitespace-nowrap', 'mask-fade-right', 'items-center');
|
||||
menu.classList.remove('grid', 'grid-cols-2', 'sm:grid-cols-3', 'md:grid-cols-4', 'lg:grid-cols-5', 'gap-2', 'pb-4');
|
||||
icon.style.transform = 'rotate(0deg)';
|
||||
|
||||
// Reset scroll position to start? or keep?
|
||||
menu.scrollLeft = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Re-run Lucide mainly for the chevron if this is loaded via PJAX (though sidebar is usually persistent in SPA layout?
|
||||
// Wait, in PJAX we replace content, not the sidebar if it's outside.
|
||||
// BUT sidebar_settings.php is INSIDE the view in the current PHP architecture.
|
||||
// So it gets re-rendered on every navigation if we don't change that.
|
||||
// The current SPA script replaces `#settings-content-area`.
|
||||
// We need to move the sidebar OUT of the `#settings-content-area` target in the PHP files if we want it to persist...
|
||||
// OR we just re-init the script. Since it's inline, it runs on content injection.
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
</script>
|
||||
80
app/Views/login.php
Normal file
80
app/Views/login.php
Normal file
@@ -0,0 +1,80 @@
|
||||
<?php
|
||||
$title = 'MIVO Login';
|
||||
include ROOT . '/app/Views/layouts/header_public.php';
|
||||
?>
|
||||
|
||||
<!-- Login Container -->
|
||||
<main class="flex-grow flex items-center justify-center flex-col w-full">
|
||||
<div class="w-full max-w-full sm:max-w-md z-10 p-4 sm:p-6 animate-fade-in-up">
|
||||
|
||||
<div class="text-center mb-6 sm:mb-10">
|
||||
<!-- Brand / Logo Area -->
|
||||
<div class="flex justify-center mb-6 sm:mb-8">
|
||||
<div class="relative group">
|
||||
<!-- <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div> --> <!--SAYA TIDAK SUKA INI -->
|
||||
<img src="/assets/img/logo-m.svg" alt="MIVO Logo" class="relative h-10 sm:h-12 w-auto block dark:hidden transform transition-transform duration-300 group-hover:scale-105">
|
||||
<img src="/assets/img/logo-m-dark.svg" alt="MIVO Logo" class="relative h-10 sm:h-12 w-auto hidden dark:block transform transition-transform duration-300 group-hover:scale-105">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-accents-5 text-sm mb-6 sm:mb-10" data-i18n="login.welcome">Welcome back, please sign in to continue.</p>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 sm:p-8 relative overflow-hidden">
|
||||
<form action="/login" method="POST" class="space-y-4 relative z-10">
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase tracking-wider ml-1" data-i18n="login.username">Username</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
|
||||
<i data-lucide="user" class="h-4 w-4 text-accents-6"></i>
|
||||
</div>
|
||||
<input type="text" name="username" class="form-input pl-10" placeholder="mivo" required autocomplete="username" data-i18n-placeholder="login.username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase tracking-wider ml-1" data-i18n="login.password">Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
|
||||
<i data-lucide="key" class="h-4 w-4 text-accents-6"></i>
|
||||
</div>
|
||||
<input type="password" name="password" id="password" class="form-input pl-10 pr-10" placeholder="••••••••" required autocomplete="current-password" data-i18n-placeholder="login.password">
|
||||
<button type="button" onclick="togglePassword()" class="absolute inset-y-0 right-3 flex items-center text-accents-5 hover:text-foreground focus:outline-none cursor-pointer z-10">
|
||||
<i id="eye-icon" data-lucide="eye" class="h-4 w-4"></i>
|
||||
<i id="eye-off-icon" data-lucide="eye-off" class="h-4 w-4 hidden"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-full h-10 shadow-lg hover:shadow-primary/20" data-i18n="login.sign_in">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php include ROOT . '/app/Views/layouts/footer_public.php'; ?>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
// Toggle Password Logic
|
||||
function togglePassword() {
|
||||
const pwd = document.getElementById('password');
|
||||
const eye = document.getElementById('eye-icon');
|
||||
const eyeOff = document.getElementById('eye-off-icon');
|
||||
|
||||
if (pwd.type === 'password') {
|
||||
pwd.type = 'text';
|
||||
eye.classList.add('hidden');
|
||||
eyeOff.classList.remove('hidden');
|
||||
} else {
|
||||
pwd.type = 'password';
|
||||
eye.classList.remove('hidden');
|
||||
eyeOff.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
247
app/Views/network/dhcp.php
Normal file
247
app/Views/network/dhcp.php
Normal file
@@ -0,0 +1,247 @@
|
||||
<?php
|
||||
$title = "DHCP Leases";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Filter Data
|
||||
$uniqueServers = [];
|
||||
if (!empty($leases)) {
|
||||
foreach ($leases as $lease) {
|
||||
$s = $lease['server'] ?? '';
|
||||
if(!empty($s)) $uniqueServers[$s] = $s;
|
||||
}
|
||||
}
|
||||
sort($uniqueServers);
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="dhcp.title">DHCP Leases</h1>
|
||||
<p class="text-accents-5"><span data-i18n="dhcp.subtitle">Active DHCP leases for:</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="location.reload()" class="btn btn-secondary">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> <span data-i18n="reports.refresh">Refresh</span>
|
||||
</button>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($error) && $error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-64">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" data-i18n-placeholder="common.table.search_placeholder" placeholder="Search mac, ip, host...">
|
||||
</div>
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-40">
|
||||
<select id="filter-server" class="custom-select" data-search="true">
|
||||
<option value="" data-i18n="dhcp.all_servers">All Servers</option>
|
||||
<?php foreach($uniqueServers as $s): ?>
|
||||
<option value="<?= htmlspecialchars($s) ?>"><?= htmlspecialchars($s) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="dhcp-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="dhcp.address">Address</th>
|
||||
<th data-i18n="dhcp.mac">MAC Address</th>
|
||||
<th data-sort="server" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="dhcp.server">Server</th>
|
||||
<th data-sort="status" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="dhcp.status">Status</th>
|
||||
<th data-sort="host" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="dhcp.host">Host Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($leases)): ?>
|
||||
<?php foreach ($leases as $lease):
|
||||
$status = $lease['status'] ?? 'unknown';
|
||||
$isBound = $status === 'bound';
|
||||
$statusClass = $isBound ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-accents-2 text-accents-5';
|
||||
?>
|
||||
<tr class="table-row-item group"
|
||||
data-server="<?= htmlspecialchars($lease['server'] ?? '') ?>"
|
||||
data-mac="<?= strtolower($lease['mac-address'] ?? '') ?>"
|
||||
data-address="<?= htmlspecialchars($lease['address'] ?? '') ?>"
|
||||
data-host="<?= strtolower($lease['host-name'] ?? $lease['comment'] ?? '') ?>"
|
||||
data-status="<?= $status ?>">
|
||||
|
||||
<td>
|
||||
<div class="text-sm font-medium text-foreground"><?= htmlspecialchars($lease['address'] ?? '-') ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="network" class="w-4 h-4 mr-2 text-accents-4"></i>
|
||||
<span class="font-mono text-sm text-foreground uppercase"><?= htmlspecialchars($lease['mac-address'] ?? '-') ?></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-sm text-accents-6"><?= htmlspecialchars($lease['server'] ?? '-') ?></span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <?= $statusClass ?>">
|
||||
<?= ucfirst($status) ?>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-accents-5"><?= htmlspecialchars($lease['host-name'] ?? $lease['comment'] ?? '-') ?></div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5" data-i18n="common.table.showing" data-i18n-params='{"start": "0", "end": "0", "total": "0"}'>
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> leases
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '', server: '' };
|
||||
|
||||
// Placeholder translation handled via data-i18n-placeholder
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
document.getElementById('filter-server').addEventListener('change', (e) => {
|
||||
this.filters.server = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const svr = row.dataset.server || '';
|
||||
const mac = row.dataset.mac || '';
|
||||
const addr = row.dataset.address || '';
|
||||
const host = row.dataset.host || '';
|
||||
|
||||
if (this.filters.server && svr !== this.filters.server) return false;
|
||||
if (this.filters.search) {
|
||||
if (!mac.includes(this.filters.search) && !addr.includes(this.filters.search) && !host.includes(this.filters.search)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(s => new CustomSelect(s));
|
||||
}
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
144
app/Views/print/custom.php
Normal file
144
app/Views/print/custom.php
Normal file
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Print Voucher</title>
|
||||
<style>
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
* {
|
||||
-webkit-print-color-adjust: exact !important;
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
}
|
||||
body { margin: 0; padding: 0; background: #eee; font-family: sans-serif; }
|
||||
.voucher-wrapper {
|
||||
/* Wrapper for page break control if needed */
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
</style>
|
||||
<script src="/assets/js/qrious.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<?php include __DIR__ . '/toolbar.php'; ?>
|
||||
|
||||
<div style="padding: 20px; text-align: center;">
|
||||
<?php foreach($users as $index => $u): ?>
|
||||
<div class="voucher-wrapper">
|
||||
<?php
|
||||
$html = $templateContent;
|
||||
// Replace Variables
|
||||
// Standard variables
|
||||
$replacements = [
|
||||
'{{username}}' => $u['username'],
|
||||
'{{password}}' => $u['password'],
|
||||
'{{price}}' => $u['price'],
|
||||
'{{validity}}' => $u['validity'],
|
||||
'{{timelimit}}' => $u['timelimit'] ?? $u['validity'], // Fallback if missing
|
||||
'{{datalimit}}' => $u['datalimit'] ?? '',
|
||||
'{{profile}}' => $u['profile'],
|
||||
'{{comment}}' => $u['comment'],
|
||||
'{{hotspotname}}' => $u['hotspotname'],
|
||||
'{{dns_name}}' => $u['dns_name'],
|
||||
'{{login_url}}' => $u['login_url'],
|
||||
'{{num}}' => ($index + 1),
|
||||
'{{logo}}' => '<img src="/assets/img/logo.png" style="height:30px;border:0;">', // Default Logo placeholder
|
||||
];
|
||||
|
||||
// 1. Handle {{logo id=...}}
|
||||
$html = preg_replace_callback('/\{\{logo\s+id=[\'"]?([^\'"\s]+)[\'"]?\}\}/i', function($matches) use ($logoMap) {
|
||||
$id = $matches[1];
|
||||
if (isset($logoMap[$id])) {
|
||||
return '<img src="' . $logoMap[$id] . '" style="height:50px; width:auto;">'; // Default style, user can wrap in div
|
||||
}
|
||||
return ''; // Return empty if not found
|
||||
}, $html);
|
||||
|
||||
foreach ($replacements as $key => $val) {
|
||||
$html = str_replace($key, $val, $html);
|
||||
}
|
||||
|
||||
// 2. Handle QR Code with Logo support
|
||||
$html = preg_replace_callback('/\{\{qrcode(?:\s+(.*?))?\}\}/i', function($matches) use ($index, $u, $logoMap) {
|
||||
$qrId = "qr-custom-" . $index . "-" . uniqid();
|
||||
$qrCodeValue = $u['login_url'] . "?user=" . $u['username'] . "&password=" . $u['password'];
|
||||
|
||||
// Default Options
|
||||
$opts = [
|
||||
'element' => 'document.getElementById("'.$qrId.'")',
|
||||
'value' => $qrCodeValue,
|
||||
'size' => 100,
|
||||
'foreground' => 'black',
|
||||
'background' => 'white',
|
||||
'padding' => null,
|
||||
'logo' => null // Logo ID
|
||||
];
|
||||
|
||||
$rounded = '';
|
||||
|
||||
// Parse Attributes
|
||||
if (!empty($matches[1])) {
|
||||
$attrs = $matches[1];
|
||||
if (preg_match('/fg\s*=\s*[\'"]?([^\'"\s]+)[\'"]?/i', $attrs, $m)) $opts['foreground'] = $m[1];
|
||||
if (preg_match('/bg\s*=\s*[\'"]?([^\'"\s]+)[\'"]?/i', $attrs, $m)) $opts['background'] = $m[1];
|
||||
if (preg_match('/size\s*=\s*[\'"]?(\d+)[\'"]?/i', $attrs, $m)) $opts['size'] = $m[1];
|
||||
if (preg_match('/padding\s*=\s*[\'"]?(\d+)[\'"]?/i', $attrs, $m)) $opts['padding'] = $m[1];
|
||||
if (preg_match('/rounded\s*=\s*[\'"]?(\d+)[\'"]?/i', $attrs, $m)) $rounded = 'border-radius: ' . $m[1] . 'px;';
|
||||
if (preg_match('/logo\s*=\s*[\'"]?([^\'"\s]+)[\'"]?/i', $attrs, $m)) $opts['logo'] = $m[1];
|
||||
}
|
||||
|
||||
// CSS Styles
|
||||
$cssPadding = $opts['padding'] ? ('padding: ' . $opts['padding'] . 'px; ') : '';
|
||||
$cssBg = 'background-color: ' . $opts['background'] . '; ';
|
||||
$baseStyle = 'display: inline-block; vertical-align: middle; ' . $cssBg . $cssPadding . $rounded;
|
||||
|
||||
// JS Generation
|
||||
$qrJs = "
|
||||
(function() {
|
||||
var qr = new QRious({
|
||||
element: document.getElementById('$qrId'),
|
||||
value: \"{$opts['value']}\",
|
||||
size: {$opts['size']},
|
||||
foreground: \"{$opts['foreground']}\",
|
||||
backgroundAlpha: 0
|
||||
});
|
||||
";
|
||||
|
||||
// If Logo is requested and found
|
||||
if ($opts['logo'] && isset($logoMap[$opts['logo']])) {
|
||||
$logoPath = $logoMap[$opts['logo']];
|
||||
$qrJs .= "
|
||||
var img = new Image();
|
||||
img.src = '$logoPath';
|
||||
img.onload = function() {
|
||||
var canvas = document.getElementById('$qrId');
|
||||
var ctx = canvas.getContext('2d');
|
||||
var size = {$opts['size']};
|
||||
var logoSize = size * 0.2; // Logo is 20% of QR size
|
||||
var logoPos = (size - logoSize) / 2;
|
||||
ctx.drawImage(img, logoPos, logoPos, logoSize, logoSize);
|
||||
};
|
||||
";
|
||||
}
|
||||
|
||||
$qrJs .= "})();";
|
||||
|
||||
return '<canvas id="'.$qrId.'" style="'.$baseStyle.'"></canvas><script>'.$qrJs.'</script>';
|
||||
}, $html);
|
||||
|
||||
echo $html;
|
||||
?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
76
app/Views/print/default.php
Normal file
76
app/Views/print/default.php
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Print Voucher</title>
|
||||
<style>
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
body { margin: 0; padding: 0; }
|
||||
}
|
||||
body { font-family: 'Courier New', Courier, monospace; background: #eee; }
|
||||
.voucher-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.voucher {
|
||||
width: 300px;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
border: 1px solid #ccc;
|
||||
page-break-inside: avoid;
|
||||
display: inline-block;
|
||||
}
|
||||
.header { text-align: center; font-weight: bold; margin-bottom: 5px; }
|
||||
.row { display: flex; justify-content: space-between; margin-bottom: 2px; font-size: 12px; }
|
||||
.code { font-size: 16px; font-weight: bold; text-align: center; margin: 10px 0; border: 1px dashed #000; padding: 5px; }
|
||||
.qr-wrapper { text-align: center; margin-top: 5px; }
|
||||
</style>
|
||||
<script src="/assets/js/qrious.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<?php include __DIR__ . '/toolbar.php'; ?>
|
||||
|
||||
<div class="voucher-container">
|
||||
<?php foreach($users as $index => $u): ?>
|
||||
<div class="voucher">
|
||||
<div class="header"><?= htmlspecialchars($u['dns_name']) ?></div>
|
||||
<div class="row"><span>Profile:</span> <span><?= htmlspecialchars($u['profile']) ?></span></div>
|
||||
<div class="row"><span>Valid:</span> <span><?= htmlspecialchars($u['validity']) ?></span></div>
|
||||
<div class="row"><span>Price:</span> <span><?= htmlspecialchars($u['price']) ?></span></div>
|
||||
|
||||
<div class="code">
|
||||
User: <?= htmlspecialchars($u['username']) ?><br>
|
||||
Pass: <?= htmlspecialchars($u['password']) ?>
|
||||
</div>
|
||||
|
||||
<div class="qr-wrapper">
|
||||
<canvas id="qr-<?= $index ?>"></canvas>
|
||||
</div>
|
||||
|
||||
<div style="text-align:center; font-size: 10px; margin-top:5px;">
|
||||
Login: <?= htmlspecialchars($u['login_url']) ?>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
new QRious({
|
||||
element: document.getElementById('qr-<?= $index ?>'),
|
||||
value: '<?= htmlspecialchars($u['login_url']) ?>?user=<?= htmlspecialchars($u['username']) ?>&password=<?= htmlspecialchars($u['password']) ?>',
|
||||
size: 100
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Optional: Auto print if directed
|
||||
// window.print();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
45
app/Views/print/toolbar.php
Normal file
45
app/Views/print/toolbar.php
Normal file
@@ -0,0 +1,45 @@
|
||||
<?php
|
||||
// Print Toolbar (No Print)
|
||||
// Expected variables: $templates (array), $currentTemplate (id or 'default'), $session (string)
|
||||
// Also preserves current query params (like ids=...)
|
||||
|
||||
$currentQuery = $_GET;
|
||||
unset($currentQuery['template']); // Remove old template param
|
||||
$queryString = http_build_query($currentQuery);
|
||||
$baseUrl = strtok($_SERVER["REQUEST_URI"], '?');
|
||||
|
||||
// If ids is missing (e.g. Quick Print single ID in segment), we don't need to append it if it's not in GET.
|
||||
// Logic: Reload current URL but with new template param.
|
||||
?>
|
||||
<div class="no-print" style="position: sticky; top:0; background: #fff; border-bottom: 1px solid #ddd; padding: 10px; z-index: 50; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
<div style="display: flex; align-items: center; gap: 10px;">
|
||||
<label style="font-size: 14px; font-weight: bold; color: #333;">Template:</label>
|
||||
<select onchange="changeTemplate(this.value)" style="padding: 5px; border: 1px solid #ccc; rounded: 4px;">
|
||||
<option value="default" <?= $currentTemplate === 'default' ? 'selected' : '' ?>>Default Thermal</option>
|
||||
<?php if (!empty($templates)): ?>
|
||||
<?php foreach ($templates as $t): ?>
|
||||
<option value="<?= $t['id'] ?>" <?= (string)$currentTemplate === (string)$t['id'] ? 'selected' : '' ?>>
|
||||
<?= htmlspecialchars($t['name']) ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button onclick="window.print()" style="padding: 6px 16px; background: #0070f3; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer;">Print</button>
|
||||
<button onclick="window.close()" style="padding: 6px 16px; background: #eee; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; margin-left: 5px;">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function changeTemplate(val) {
|
||||
const currentUrl = new URL(window.location.href);
|
||||
if (val === 'default') {
|
||||
currentUrl.searchParams.delete('template');
|
||||
} else {
|
||||
currentUrl.searchParams.set('template', val);
|
||||
}
|
||||
window.location.href = currentUrl.toString();
|
||||
}
|
||||
</script>
|
||||
215
app/Views/public/status.php
Normal file
215
app/Views/public/status.php
Normal file
@@ -0,0 +1,215 @@
|
||||
<?php
|
||||
$title = 'Check Voucher Status';
|
||||
include ROOT . '/app/Views/layouts/header_public.php';
|
||||
?>
|
||||
|
||||
<!-- Main Container -->
|
||||
<main class="flex-grow flex items-center justify-center w-full">
|
||||
<div class="w-full max-w-lg z-10 p-4 md:p-6 animate-fade-in-up">
|
||||
|
||||
<div class="flex flex-col space-y-8 text-center">
|
||||
|
||||
<!-- Brand -->
|
||||
<div class="flex justify-center">
|
||||
<div class="relative group">
|
||||
<img src="/assets/img/logo-m.svg" alt="MIVO Logo" class="relative h-12 w-auto block dark:hidden transform transition-transform duration-300 group-hover:scale-105">
|
||||
<img src="/assets/img/logo-m-dark.svg" alt="MIVO Logo" class="relative h-12 w-auto hidden dark:block transform transition-transform duration-300 group-hover:scale-105">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text -->
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-extrabold tracking-tight mb-3 text-foreground" data-i18n="status.check_title">Check Voucher Status</h1>
|
||||
<p class="text-accents-5 text-sm md:text-base leading-relaxed max-w-sm mx-auto" data-i18n="status.check_desc">
|
||||
Monitor your data usage and voucher validity in real-time without needing to re-login.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Check Form -->
|
||||
<div class="card p-6 sm:p-8 relative overflow-hidden w-full text-left">
|
||||
<form onsubmit="checkStatus(event)" class="relative z-10">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-accents-5 uppercase tracking-wider ml-1 mb-1 block" data-i18n="status.voucher_code_label">Voucher Code</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10">
|
||||
<i data-lucide="ticket" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="voucher-code" class="form-input pl-10 h-11 text-lg font-mono tracking-wide" placeholder="Ex: QWASZX" required autofocus autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="chk-btn" class="w-full btn btn-primary h-11 text-base font-bold shadow-lg hover:shadow-primary/20">
|
||||
<span id="btn-text" data-i18n="status.check_now">Check Now</span>
|
||||
<i id="btn-loader" data-lucide="loader-2" class="w-4 h-4 animate-spin hidden"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php include ROOT . '/app/Views/layouts/footer_public.php'; ?>
|
||||
|
||||
<!-- Logic Script -->
|
||||
<script>
|
||||
// Initialize Input placeholder
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const inp = document.getElementById('voucher-code');
|
||||
if(inp && window.i18n) {
|
||||
inp.placeholder = window.i18n.t('status.code_placeholder');
|
||||
}
|
||||
});
|
||||
|
||||
async function checkStatus(e) {
|
||||
e.preventDefault();
|
||||
const code = document.getElementById('voucher-code').value.trim();
|
||||
if (!code) return;
|
||||
|
||||
const btn = document.getElementById('chk-btn');
|
||||
const btnText = document.getElementById('btn-text');
|
||||
const loader = document.getElementById('btn-loader');
|
||||
|
||||
// Set Loading
|
||||
btn.disabled = true;
|
||||
btnText.classList.add('hidden');
|
||||
loader.classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const pathParts = window.location.pathname.split('/');
|
||||
const session = pathParts[1];
|
||||
|
||||
const response = await fetch('/api/status/check', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ session: session, code: code })
|
||||
});
|
||||
|
||||
const json = await response.json();
|
||||
|
||||
if (json.success) {
|
||||
const d = json.data;
|
||||
|
||||
// Build HTML for SweetAlert
|
||||
// Status Badge Logic
|
||||
// Status Badge Logic (Glassmorphism)
|
||||
let statusColor = 'bg-blue-500/10 text-blue-600 border-blue-200 dark:border-blue-800 dark:text-blue-400';
|
||||
if (d.status === 'active') statusColor = 'bg-emerald-500/10 text-emerald-600 border-emerald-200 dark:border-emerald-800 dark:text-emerald-400';
|
||||
if (d.status === 'expired') statusColor = 'bg-slate-500/10 text-slate-600 border-slate-200 dark:border-slate-800 dark:text-slate-400';
|
||||
if (d.status === 'limited') statusColor = 'bg-orange-500/10 text-orange-600 border-orange-200 dark:border-orange-800 dark:text-orange-400';
|
||||
if (d.status === 'locked') statusColor = 'bg-red-500/10 text-red-600 border-red-200 dark:border-red-800 dark:text-red-400';
|
||||
|
||||
const htmlContent = `
|
||||
<div class="text-left mt-6 relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md shadow-2xl ring-1 ring-black/5 dark:ring-white/5">
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-500/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
<div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-500/20 rounded-full blur-3xl pointer-events-none"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="relative p-5 md:p-6 border-b border-white/10 flex justify-between items-center bg-white/10 dark:bg-black/20">
|
||||
<div>
|
||||
<span class="text-[10px] text-accents-5 font-bold uppercase tracking-widest block mb-0.5">Voucher Code</span>
|
||||
<span class="font-mono text-xl md:text-2xl font-black tracking-tighter text-foreground">${d.username}</span>
|
||||
</div>
|
||||
<div class="px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.15em] border ${statusColor} shadow-sm backdrop-blur-sm bg-opacity-80">
|
||||
${d.status}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Usage Bar -->
|
||||
<div class="relative p-5 md:p-6 pb-2">
|
||||
<div class="flex justify-between items-end mb-2">
|
||||
<span class="text-xs font-bold text-accents-5 uppercase tracking-wide">Data Remaining</span>
|
||||
<span class="text-lg font-black text-blue-600 dark:text-blue-400 font-mono tracking-tight">${d.data_left}</span>
|
||||
</div>
|
||||
<div class="w-full h-2.5 bg-accents-2 rounded-full overflow-hidden shadow-inner ring-1 ring-black/5 dark:ring-white/5">
|
||||
<div class="h-full bg-gradient-to-r from-blue-500 to-indigo-600 shadow-lg relative overflow-hidden" style="width: 100%">
|
||||
<div class="absolute inset-0 bg-white/20 animate-[shimmer_2s_infinite]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right mt-1.5">
|
||||
<span class="text-[10px] font-semibold text-accents-4 uppercase tracking-wider">Used: <span class="text-foreground">${d.data_used}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Table -->
|
||||
<div class="p-5 md:p-6 pt-2">
|
||||
<table class="w-full text-sm text-left">
|
||||
<tbody class="divide-y divide-white/10">
|
||||
<tr>
|
||||
<td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Package</td>
|
||||
<td class="py-3 text-right font-bold text-foreground font-mono">${d.profile}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Validity</td>
|
||||
<td class="py-3 text-right font-bold text-foreground font-mono">${d.validity}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Uptime</td>
|
||||
<td class="py-3 text-right font-medium text-foreground font-mono">${d.uptime_used}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 text-accents-5 font-bold uppercase tracking-wide text-[10px]">Expires</td>
|
||||
<td class="py-3 text-right font-medium text-foreground font-mono">${d.expiration}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Swal.fire({
|
||||
title: 'Voucher Details',
|
||||
html: htmlContent,
|
||||
icon: 'success', // Using success icon for positive result
|
||||
confirmButtonText: 'OK',
|
||||
customClass: {
|
||||
popup: 'swal2-premium-card w-full max-w-md', // Ensure good width
|
||||
confirmButton: 'btn btn-primary w-full',
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
|
||||
} else {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Voucher Not Found',
|
||||
text: json.message || "The voucher code you entered does not exist.",
|
||||
confirmButtonText: 'Try Again',
|
||||
customClass: {
|
||||
popup: 'swal2-premium-card',
|
||||
confirmButton: 'btn btn-primary',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
didClose: () => {
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById('voucher-code');
|
||||
if(el) { el.focus(); el.select(); }
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'System Error',
|
||||
text: 'Unable to connect to the server.',
|
||||
confirmButtonText: 'Close',
|
||||
customClass: {
|
||||
popup: 'swal2-premium-card',
|
||||
confirmButton: 'btn btn-secondary',
|
||||
},
|
||||
buttonsStyling: false
|
||||
});
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btnText.classList.remove('hidden');
|
||||
loader.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
106
app/Views/quick_print/index.php
Normal file
106
app/Views/quick_print/index.php
Normal file
@@ -0,0 +1,106 @@
|
||||
<?php
|
||||
// Quick Print Dashboard (Card View)
|
||||
$title = 'Quick Print';
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-foreground" data-i18n="quick_print.title">Quick Print</h1>
|
||||
<p class="text-accents-5" data-i18n="quick_print.subtitle">Instant voucher generation and printing.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/quick-print/manage" class="hidden sm:flex items-center gap-2 btn btn-secondary">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i>
|
||||
<span data-i18n="quick_print.manage">Manage Packages</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/quick-print/manage" class="sm:hidden btn btn-secondary px-2">
|
||||
<i data-lucide="settings" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<?php if (empty($packages)): ?>
|
||||
<div class="col-span-full flex flex-col items-center justify-center p-12 border-2 border-dashed border-accents-2 rounded-lg text-accents-5">
|
||||
<i data-lucide="printer" class="w-12 h-12 mb-4 opacity-50"></i>
|
||||
<p class="text-lg font-medium" data-i18n="quick_print.no_packages">No Packages Found</p>
|
||||
<p class="text-sm mb-6" data-i18n="quick_print.create_first">Create a Quick Print package to get started.</p>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/quick-print/manage" class="btn btn-primary" data-i18n="quick_print.create_package">
|
||||
Create Package
|
||||
</a>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php foreach ($packages as $pkg): ?>
|
||||
<!-- Card -->
|
||||
<div class="card relative group overflow-hidden hover:border-primary/50 hover:-translate-y-1 transition-all duration-300 p-0">
|
||||
<!-- Color Header -->
|
||||
<div class="h-2 <?= htmlspecialchars($pkg['color'] ?? 'bg-blue-500') ?>"></div>
|
||||
|
||||
<div class="p-5 bg-background">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 class="font-bold text-lg text-foreground truncate" title="<?= htmlspecialchars($pkg['name']) ?>">
|
||||
<?= htmlspecialchars($pkg['name']) ?>
|
||||
</h3>
|
||||
<div class="text-xs text-accents-5 font-mono mt-1">
|
||||
<span data-i18n="quick_print.profile">Profile</span>: <?= htmlspecialchars($pkg['profile']) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="font-bold text-foreground">
|
||||
<?= htmlspecialchars($pkg['price'] > 0 ? number_format($pkg['price'], 0, ',', '.') : 'Free') ?>
|
||||
</div>
|
||||
<div class="text-xs text-accents-5" data-i18n="<?= $pkg['time_limit'] ?: 'common.unlimited' ?>">
|
||||
<?= htmlspecialchars($pkg['time_limit'] ?: 'Unlimited') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details -->
|
||||
<div class="space-y-2 text-sm text-accents-5 mb-6">
|
||||
<div class="flex justify-between border-b border-accents-1 pb-1">
|
||||
<span data-i18n="quick_print.prefix">Prefix</span>
|
||||
<span class="font-mono text-xs"><?= htmlspecialchars($pkg['prefix']) ?: '-' ?></span>
|
||||
</div>
|
||||
<div class="flex justify-between border-b border-accents-1 pb-1">
|
||||
<span data-i18n="quick_print.server">Server</span>
|
||||
<span><?= htmlspecialchars($pkg['server']) ?></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action -->
|
||||
<button onclick="printPackage('<?= $pkg['id'] ?>', '<?= htmlspecialchars($pkg['name']) ?>')" class="w-full btn btn-primary flex items-center justify-center gap-2">
|
||||
<i data-lucide="printer" class="w-4 h-4"></i>
|
||||
<span data-i18n="quick_print.print_voucher">Print Voucher</span>
|
||||
</button>
|
||||
|
||||
<?php if(!empty($pkg['comment'])): ?>
|
||||
<p class="text-xs text-accents-4 text-center mt-3 truncate"><?= htmlspecialchars($pkg['comment']) ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Print Script -->
|
||||
<script>
|
||||
function printPackage(id, name) {
|
||||
// Open print window
|
||||
const width = 400;
|
||||
const height = 600;
|
||||
const left = (window.innerWidth - width) / 2;
|
||||
const top = (window.innerHeight - height) / 2;
|
||||
|
||||
const url = `/<?= htmlspecialchars($session) ?>/quick-print/print/${id}`;
|
||||
|
||||
window.open(url, `Print_${name}`, `width=${width},height=${height},top=${top},left=${left},scrollbars=yes`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
329
app/Views/quick_print/list.php
Normal file
329
app/Views/quick_print/list.php
Normal file
@@ -0,0 +1,329 @@
|
||||
<?php
|
||||
// Quick Print Management (List & CRUD)
|
||||
$title = 'Manage Quick Print';
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-foreground" data-i18n="quick_print.manage_title">Manage Packages</h1>
|
||||
<p class="text-accents-5"><span data-i18n="quick_print.manage_subtitle">Configure your Quick Print voucher packages for:</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/quick-print" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2 inline-block"></i> <span data-i18n="common.back">Back</span>
|
||||
</a>
|
||||
<button onclick="openModal('add')" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="quick_print.add_package">Add Package</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-64">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search package name..." data-i18n-placeholder="common.table.search_placeholder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="packages-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="name" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="quick_print.name">Name</th>
|
||||
<th data-i18n="quick_print.profile">Profile</th>
|
||||
<th data-i18n="quick_print.prefix">Prefix</th>
|
||||
<th data-sort="price" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="quick_print.price">Price</th>
|
||||
<th data-i18n="quick_print.time_limit">Time Limit</th>
|
||||
<th class="text-right" data-i18n="common.actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (empty($packages)): ?>
|
||||
<tr>
|
||||
<td colspan="6" class="p-8 text-center text-accents-5" data-i18n="quick_print.no_packages_found">No packages found.</td>
|
||||
</tr>
|
||||
<?php else: ?>
|
||||
<?php foreach ($packages as $pkg): ?>
|
||||
<tr class="table-row-item group"
|
||||
data-name="<?= strtolower($pkg['name']) ?>"
|
||||
data-price="<?= $pkg['price'] ?>">
|
||||
<td class="font-medium text-foreground">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full <?= htmlspecialchars($pkg['color']) ?>"></div>
|
||||
<?= htmlspecialchars($pkg['name']) ?>
|
||||
</div>
|
||||
</td>
|
||||
<td><?= htmlspecialchars($pkg['profile']) ?></td>
|
||||
<td class="font-mono text-xs"><?= htmlspecialchars($pkg['prefix']) ?: '-' ?></td>
|
||||
<td><?= htmlspecialchars($pkg['price'] > 0 ? number_format($pkg['price'], 0, ',', '.') : 'Free') ?></td>
|
||||
<td><?= htmlspecialchars($pkg['time_limit'] ?: 'Unlimited') ?></td>
|
||||
<td class="text-right text-sm">
|
||||
<div class="flex items-center justify-end gap-2 table-actions-reveal">
|
||||
<!-- Simple Delete Form -->
|
||||
<form action="/<?= htmlspecialchars($session) ?>/quick-print/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('quick_print.delete_package') : 'Delete Package?', window.i18n ? window.i18n.t('common.confirm_delete') : 'Are you sure you want to delete this Quick Print package?', window.i18n ? window.i18n.t('common.delete') : 'Delete', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.submit(); });">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= htmlspecialchars($pkg['id']) ?>">
|
||||
<button type="submit" class="btn-icon-danger" title="Delete">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
<button type="button" class="btn-icon" title="Edit">
|
||||
<i data-lucide="edit-3" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> packages
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Modal -->
|
||||
<div id="modal-overlay" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center opacity-0 transition-opacity duration-200">
|
||||
<div id="modal-content" class="card w-full max-w-lg mx-4 transform scale-95 transition-transform duration-200 overflow-hidden p-0">
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b border-accents-2 bg-accents-1/30">
|
||||
<h3 class="text-lg font-bold text-foreground" id="modal-title" data-i18n="quick_print.add_package">Add Package</h3>
|
||||
<button onclick="closeModal()" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form action="/<?= htmlspecialchars($session) ?>/quick-print/store" method="POST" class="p-6 space-y-4">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
|
||||
<!-- Quick Inputs Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<label class="form-label" data-i18n="quick_print.package_name">Package Name</label>
|
||||
<input type="text" name="name" required class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary placeholder:text-accents-3" placeholder="e.g. 3 Hours Voucher">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.select_profile">Select Profile</label>
|
||||
<select name="profile" class="custom-select w-full" data-search="true">
|
||||
<?php foreach($profiles as $p): ?>
|
||||
<option value="<?= htmlspecialchars($p['name']) ?>"><?= htmlspecialchars($p['name']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.card_color">Card Color</label>
|
||||
<select name="color" class="custom-select w-full">
|
||||
<option value="bg-blue-500" data-i18n="colors.blue">Blue</option>
|
||||
<option value="bg-red-500" data-i18n="colors.red">Red</option>
|
||||
<option value="bg-green-500" data-i18n="colors.green">Green</option>
|
||||
<option value="bg-yellow-500" data-i18n="colors.yellow">Yellow</option>
|
||||
<option value="bg-purple-500" data-i18n="colors.purple">Purple</option>
|
||||
<option value="bg-pink-500" data-i18n="colors.pink">Pink</option>
|
||||
<option value="bg-indigo-500" data-i18n="colors.indigo">Indigo</option>
|
||||
<option value="bg-gray-800" data-i18n="colors.dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.price">Price (Rp)</label>
|
||||
<input type="number" name="price" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="5000">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.selling_price">Selling Price</label>
|
||||
<input type="number" name="selling_price" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="Default same">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.prefix">Prefix</label>
|
||||
<input type="text" name="prefix" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="Example: VIP-">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.char_length">Char Length</label>
|
||||
<select name="char_length" class="custom-select w-full">
|
||||
<option value="4" selected data-i18n="common.char_length" data-i18n-params='{"n": 4}'>4 Characters</option>
|
||||
<option value="6" data-i18n="common.char_length" data-i18n-params='{"n": 6}'>6 Characters</option>
|
||||
<option value="8" data-i18n="common.char_length" data-i18n-params='{"n": 8}'>8 Characters</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.time_limit">Time Limit</label>
|
||||
<input type="text" name="time_limit" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="3h">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label" data-i18n="quick_print.data_limit">Data Limit</label>
|
||||
<input type="text" name="data_limit" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="500M (Optional)">
|
||||
</div>
|
||||
|
||||
<div class="col-span-1 md:col-span-2">
|
||||
<label class="form-label" data-i18n="system_tools.comment">Comment</label>
|
||||
<input type="text" name="comment" class="w-full bg-background border border-accents-2 rounded-md px-3 py-2 text-foreground focus:ring-1 focus:ring-primary focus:border-primary" placeholder="Description or Note">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3 pt-4 border-t border-accents-2 mt-4">
|
||||
<button type="button" onclick="closeModal()" class="btn btn-secondary" data-i18n="common.cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="quick_print.save_package">Save Package</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const name = row.dataset.name || '';
|
||||
|
||||
if (this.filters.search && !name.includes(this.filters.search)) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
const overlay = document.getElementById('modal-overlay');
|
||||
const content = document.getElementById('modal-content');
|
||||
|
||||
function openModal(mode) {
|
||||
overlay.classList.remove('hidden');
|
||||
// Trigger reflow
|
||||
void overlay.offsetWidth;
|
||||
|
||||
overlay.classList.remove('opacity-0');
|
||||
content.classList.add('open');
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
overlay.classList.add('opacity-0');
|
||||
content.classList.remove('open');
|
||||
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('hidden');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
113
app/Views/reports/resume.php
Normal file
113
app/Views/reports/resume.php
Normal file
@@ -0,0 +1,113 @@
|
||||
<?php
|
||||
$title = "Resume Report";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="reports.resume_title">Resume Report</h1>
|
||||
<p class="text-accents-5" data-i18n="reports.resume_subtitle">Overview of aggregated income.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium bg-accents-1 px-3 py-1 rounded-full border border-accents-2">
|
||||
<span data-i18n="reports.total_income">Total Income</span>: <?= $currency ?> <?= number_format($totalIncome, 0, ',', '.') ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="mb-6 border-b border-accents-2">
|
||||
<nav class="flex space-x-4 overflow-x-auto no-scrollbar" aria-label="Tabs">
|
||||
<button onclick="switchTab('daily')" id="tab-daily" class="px-3 py-2 text-sm font-medium border-b-2 border-primary text-primary active-tab whitespace-nowrap" data-i18n="reports.daily">Daily</button>
|
||||
<button onclick="switchTab('monthly')" id="tab-monthly" class="px-3 py-2 text-sm font-medium border-b-2 border-transparent text-accents-5 hover:text-foreground whitespace-nowrap" data-i18n="reports.monthly">Monthly</button>
|
||||
<button onclick="switchTab('yearly')" id="tab-yearly" class="px-3 py-2 text-sm font-medium border-b-2 border-transparent text-accents-5 hover:text-foreground whitespace-nowrap" data-i18n="reports.yearly">Yearly</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Daily Tab -->
|
||||
<div id="content-daily" class="tab-content">
|
||||
<div class="table-container">
|
||||
<table class="table-glass">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="reports.date">Date</th>
|
||||
<th class="text-right" data-i18n="reports.total">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($daily as $date => $total): ?>
|
||||
<tr>
|
||||
<td><?= $date ?></td>
|
||||
<td class="text-right"><?= $currency ?> <?= number_format($total, 0, ',', '.') ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Tab -->
|
||||
<div id="content-monthly" class="tab-content hidden">
|
||||
<div class="table-container">
|
||||
<table class="table-glass">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="reports.month">Month</th>
|
||||
<th class="text-right" data-i18n="reports.total">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($monthly as $date => $total): ?>
|
||||
<tr>
|
||||
<td><?= $date ?></td>
|
||||
<td class="text-right"><?= $currency ?> <?= number_format($total, 0, ',', '.') ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Yearly Tab -->
|
||||
<div id="content-yearly" class="tab-content hidden">
|
||||
<div class="table-container">
|
||||
<table class="table-glass">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="reports.year">Year</th>
|
||||
<th class="text-right" data-i18n="reports.total">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($yearly as $date => $total): ?>
|
||||
<tr>
|
||||
<td><?= $date ?></td>
|
||||
<td class="text-right"><?= $currency ?> <?= number_format($total, 0, ',', '.') ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(tabName) {
|
||||
// Hide all contents
|
||||
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
|
||||
// Show selected
|
||||
document.getElementById('content-' + tabName).classList.remove('hidden');
|
||||
|
||||
// Reset tab styles
|
||||
document.querySelectorAll('nav button').forEach(el => {
|
||||
el.classList.remove('border-primary', 'text-primary');
|
||||
el.classList.add('border-transparent', 'text-accents-5');
|
||||
});
|
||||
|
||||
// Active tab style
|
||||
const btn = document.getElementById('tab-' + tabName);
|
||||
btn.classList.remove('border-transparent', 'text-accents-5');
|
||||
btn.classList.add('border-primary', 'text-primary');
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
205
app/Views/reports/selling.php
Normal file
205
app/Views/reports/selling.php
Normal file
@@ -0,0 +1,205 @@
|
||||
<?php
|
||||
$title = "Selling Report";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="reports.selling_title">Selling Report</h1>
|
||||
<p class="text-accents-5"><span data-i18n="reports.selling_subtitle">Sales summary and details for:</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="location.reload()" class="btn btn-secondary">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> <span data-i18n="reports.refresh">Refresh</span>
|
||||
</button>
|
||||
<button onclick="window.print()" class="btn btn-primary">
|
||||
<i data-lucide="printer" class="w-4 h-4 mr-2"></i> <span data-i18n="reports.print_report">Print Report</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div class="card bg-accents-1 border-accents-2">
|
||||
<div class="text-sm text-accents-5 uppercase font-bold tracking-wide" data-i18n="reports.total_income">Total Income</div>
|
||||
<div class="text-3xl font-bold text-green-500 mt-2">
|
||||
<?= \App\Helpers\FormatHelper::formatCurrency($totalIncome, $currency) ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-accents-1 border-accents-2">
|
||||
<div class="text-sm text-accents-5 uppercase font-bold tracking-wide" data-i18n="reports.total_vouchers">Total Vouchers Sold</div>
|
||||
<div class="text-3xl font-bold text-blue-500 mt-2">
|
||||
<?= number_format($totalVouchers, 0, ',', '.') ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center no-print">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-64">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search date..." data-i18n-placeholder="common.table.search_placeholder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detailed Table -->
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="report-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="date" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="reports.date_batch">Date / Batch (Comment)</th>
|
||||
<th class="text-right" data-i18n="reports.qty">Qty</th>
|
||||
<th data-sort="total" class="sortable text-right cursor-pointer hover:text-foreground select-none" data-i18n="reports.total">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (empty($report)): ?>
|
||||
<tr>
|
||||
<td colspan="3" class="p-8 text-center text-accents-5" data-i18n="reports.no_data">No sales data found.</td>
|
||||
</tr>
|
||||
<?php else: ?>
|
||||
<?php foreach ($report as $row): ?>
|
||||
<tr class="table-row-item"
|
||||
data-date="<?= strtolower($row['date']) ?>"
|
||||
data-total="<?= $row['total'] ?>">
|
||||
<td class="font-medium"><?= htmlspecialchars($row['date']) ?></td>
|
||||
<td class="text-right font-mono"><?= number_format($row['count']) ?></td>
|
||||
<td class="text-right font-mono font-bold text-foreground">
|
||||
<?= \App\Helpers\FormatHelper::formatCurrency($row['total'], $currency) ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between no-print" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> rows
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 15) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const date = row.dataset.date || '';
|
||||
|
||||
if (this.filters.search && !date.includes(this.filters.search)) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 15);
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
246
app/Views/reports/user_log.php
Normal file
246
app/Views/reports/user_log.php
Normal file
@@ -0,0 +1,246 @@
|
||||
<?php
|
||||
$title = "User Log";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Prepare unique topics for filter
|
||||
$uniqueTopics = [];
|
||||
if (!empty($logs) && is_array($logs)) {
|
||||
foreach ($logs as $log) {
|
||||
$t = $log['topics'] ?? '';
|
||||
// Split comma separated topics if needed, but usually it's one string or comma sep string
|
||||
// Simple approach: Use full string or main topic
|
||||
if (!empty($t)) $uniqueTopics[$t] = $t;
|
||||
}
|
||||
}
|
||||
sort($uniqueTopics);
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="reports.user_log_title">User Log</h1>
|
||||
<p class="text-accents-5"><span data-i18n="reports.user_log_subtitle">Login and logout history for:</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="location.reload()" class="btn btn-secondary">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> <span data-i18n="reports.refresh">Refresh</span>
|
||||
</button>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($error) && $error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-64">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search message..." data-i18n-placeholder="common.table.search_placeholder">
|
||||
</div>
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-48">
|
||||
<select id="filter-topic" class="custom-select" data-search="true">
|
||||
<option value="" data-i18n="common.all_topics">All Topics</option>
|
||||
<option value="hotspot,info,debug">hotspot,info,debug</option>
|
||||
<option value="hotspot,account,info,debug">hotspot,account,info,debug</option>
|
||||
<option value="system,info,account">system,info,account</option>
|
||||
<!-- Fallback to generated if diverse -->
|
||||
<?php foreach($uniqueTopics as $t): ?>
|
||||
<option value="<?= htmlspecialchars($t) ?>"><?= htmlspecialchars($t) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="log-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-40" data-i18n="reports.time">Time</th>
|
||||
<th data-sort="topics" class="sortable cursor-pointer hover:text-foreground select-none w-48" data-i18n="reports.topics">Topics</th>
|
||||
<th data-sort="message" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="reports.message">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($logs) && is_array($logs)): ?>
|
||||
<?php foreach ($logs as $log):
|
||||
$topics = $log['topics'] ?? '';
|
||||
$isError = strpos($topics, 'error') !== false;
|
||||
$rowClass = $isError ? 'text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10' : '';
|
||||
?>
|
||||
<tr class="table-row-item <?= $rowClass ?>"
|
||||
data-topics="<?= htmlspecialchars($topics) ?>"
|
||||
data-message="<?= strtolower($log['message'] ?? '') ?>">
|
||||
|
||||
<td class="font-mono text-sm text-accents-5">
|
||||
<?= htmlspecialchars($log['time'] ?? '-') ?>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-accents-2 text-accents-6 border border-accents-3">
|
||||
<?= htmlspecialchars($topics) ?>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-sm whitespace-normal break-words">
|
||||
<?= htmlspecialchars($log['message'] ?? '-') ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> logs
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 15) {
|
||||
this.allRows = Array.from(rows);
|
||||
// Hide duplicates in unique topics select options (hacky fix for double output)
|
||||
const seen = new Set();
|
||||
document.querySelectorAll('#filter-topic option').forEach(o => {
|
||||
if(seen.has(o.value) || o.value === '') {
|
||||
if(o.value !== '') o.remove();
|
||||
} else seen.add(o.value);
|
||||
});
|
||||
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '', topics: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
document.getElementById('filter-topic').addEventListener('change', (e) => {
|
||||
this.filters.topics = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const topics = row.dataset.topics || '';
|
||||
const msg = row.dataset.message || '';
|
||||
|
||||
if (this.filters.topics && !topics.includes(this.filters.topics)) return false;
|
||||
if (this.filters.search && !msg.includes(this.filters.search)) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(s => new CustomSelect(s));
|
||||
}
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 15);
|
||||
});
|
||||
</script>
|
||||
340
app/Views/security/bindings.php
Normal file
340
app/Views/security/bindings.php
Normal file
@@ -0,0 +1,340 @@
|
||||
<?php
|
||||
$title = "IP Bindings";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Filter Data
|
||||
$uniqueTypes = [];
|
||||
if (!empty($items)) {
|
||||
foreach ($items as $item) {
|
||||
$t = $item['type'] ?? 'regular';
|
||||
$uniqueTypes[$t] = $t;
|
||||
}
|
||||
}
|
||||
sort($uniqueTypes);
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="security.bindings.title">IP Bindings</h1>
|
||||
<p class="text-accents-5" data-i18n="security.bindings.subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($session) ?>"}'>Manage IP bindings (bypass/blocked) for: <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary" data-i18n="common.dashboard">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center shadow-sm">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
||||
<!-- List (2/3) -->
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center bg-card p-4 rounded-lg border border-accents-2 shadow-sm">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search mac, address, comment..." data-i18n="common.table.search_placeholder">
|
||||
</div>
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-40">
|
||||
<select id="filter-type" class="custom-select" data-search="true">
|
||||
<option value="" data-i18n="security.bindings.all_types">All Types</option>
|
||||
<option value="regular" data-i18n="security.bindings.regular">Regular</option>
|
||||
<option value="bypassed" data-i18n="security.bindings.bypassed">Bypassed</option>
|
||||
<option value="blocked" data-i18n="security.bindings.blocked">Blocked</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="bindings-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="security.bindings.table.mac">MAC Address</th>
|
||||
<th data-i18n="security.bindings.table.address">Address</th>
|
||||
<th data-i18n="security.bindings.table.to_address">To Address</th>
|
||||
<th data-sort="type" class="sortable cursor-pointer hover:text-primary select-none group">
|
||||
<div class="flex items-center gap-1"><span data-i18n="security.bindings.table.type">Type</span> <i data-lucide="arrow-up-down" class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity"></i></div>
|
||||
</th>
|
||||
<th data-sort="comment" class="sortable cursor-pointer hover:text-primary select-none group">
|
||||
<div class="flex items-center gap-1"><span data-i18n="security.bindings.table.comment">Comment</span> <i data-lucide="arrow-up-down" class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity"></i></div>
|
||||
</th>
|
||||
<th class="relative text-right" data-i18n="common.actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($items)): ?>
|
||||
<?php foreach ($items as $item): ?>
|
||||
<tr class="table-row-item"
|
||||
data-type="<?= htmlspecialchars($item['type'] ?? 'regular') ?>"
|
||||
data-mac="<?= strtolower($item['mac-address'] ?? '') ?>"
|
||||
data-address="<?= htmlspecialchars($item['address'] ?? '') ?>"
|
||||
data-comment="<?= strtolower($item['comment'] ?? '') ?>">
|
||||
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="p-1.5 bg-accents-2 rounded mr-2 text-accents-6">
|
||||
<i data-lucide="link" class="w-3.5 h-3.5"></i>
|
||||
</div>
|
||||
<span class="font-mono text-sm text-foreground font-medium"><?= htmlspecialchars($item['mac-address'] ?? '-') ?></span>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="text-sm text-foreground"><?= htmlspecialchars($item['address'] ?? '-') ?></span></td>
|
||||
<td><span class="text-sm text-foreground"><?= htmlspecialchars($item['to-address'] ?? '-') ?></span></td>
|
||||
<td>
|
||||
<?php
|
||||
$typeClass = 'bg-accents-2 text-accents-6 border border-accents-3';
|
||||
if (($item['type']??'') == 'bypassed') $typeClass = 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800';
|
||||
if (($item['type']??'') == 'blocked') $typeClass = 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800';
|
||||
?>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <?= $typeClass ?>">
|
||||
<?= htmlspecialchars($item['type'] ?? 'regular') ?>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-sm text-accents-5 italic"><?= htmlspecialchars($item['comment'] ?? '-') ?></td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex justify-end">
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/bindings/remove" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Remove Binding?', 'Are you sure you want to remove the binding for <?= htmlspecialchars($item['mac-address'] ?? '') ?>?', 'Remove', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= $item['.id'] ?>">
|
||||
<button type="submit" class="btn btn-icon-sm hover:bg-red-50 text-accents-5 hover:text-red-600 transition-colors" title="Remove">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Form (Sticky Side) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="card p-0 border-accents-2 shadow-lg sticky top-6">
|
||||
<div class="p-4 border-b border-accents-2 bg-primary/5 flex items-center gap-2">
|
||||
<div class="p-1.5 bg-primary/10 rounded text-primary">
|
||||
<i data-lucide="plus-circle" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-sm uppercase tracking-wide text-primary" data-i18n="security.bindings.form.add_title">Add Binding</h3>
|
||||
</div>
|
||||
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/bindings/store" method="POST" class="p-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase"><span data-i18n="security.bindings.form.mac_address">MAC Address</span> <span class="text-red-500">*</span></label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-4 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="cpu" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="mac" required class="form-input pl-10" placeholder="00:00:00:00:00:00">
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="security.bindings.form.mac_help">Target device MAC address.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.bindings.form.address">Address (IP)</label>
|
||||
<input type="text" name="address" class="form-input" placeholder="192.168.x.x">
|
||||
<p class="text-xs text-accents-5" data-i18n="security.bindings.form.address_help">Target IP address (optional).</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.bindings.form.to_address">To Address</label>
|
||||
<input type="text" name="to_address" class="form-input" placeholder="192.168.x.x">
|
||||
<p class="text-xs text-accents-5" data-i18n="security.bindings.form.to_address_help">Translate to this IP (optional).</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.bindings.form.type">Type</label>
|
||||
<select name="type" class="custom-select w-full">
|
||||
<option value="regular" data-i18n="security.bindings.regular">Regular</option>
|
||||
<option value="bypassed" data-i18n="security.bindings.bypassed">Bypassed</option>
|
||||
<option value="blocked" data-i18n="security.bindings.blocked">Blocked</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5 md:col-span-2 lg:col-span-1">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.bindings.form.server">Server</label>
|
||||
<select name="server" class="custom-select w-full" data-search="true">
|
||||
<option value="all">all</option>
|
||||
<!-- Ideally fetch servers -->
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="security.bindings.form.server_help">Apply to specific Hotspot server.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5 md:col-span-2 lg:col-span-1">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.bindings.form.comment">Comment</label>
|
||||
<input type="text" name="comment" class="form-input" placeholder="Optional notes" data-i18n-placeholder="security.bindings.form.comment_help">
|
||||
<p class="text-xs text-accents-5" data-i18n="security.bindings.form.comment_help">Note for this binding.</p>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 md:col-span-2 lg:col-span-1">
|
||||
<button type="submit" class="btn btn-primary w-full shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
|
||||
<i data-lucide="save" class="w-4 h-4 mr-2"></i> <span data-i18n="security.bindings.form.save">Save & Bind</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Quick Tips -->
|
||||
<div class="pt-4 mt-4 border-t border-accents-2 md:col-span-2 lg:col-span-1">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase mb-2 flex items-center gap-1">
|
||||
<i data-lucide="lightbulb" class="w-3 h-3 text-yellow-500"></i> <span data-i18n="common.tips">Tips</span>
|
||||
</h4>
|
||||
<ul class="text-xs text-accents-5 space-y-1.5 list-disc list-inside">
|
||||
<li data-i18n="security.bindings.form.tip_bypassed"><strong>Bypassed:</strong> Access without login.</li>
|
||||
<li data-i18n="security.bindings.form.tip_blocked"><strong>Blocked:</strong> Deny access completely.</li>
|
||||
<li data-i18n="security.bindings.form.tip_regular"><strong>Regular:</strong> Normal hotspot client.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '', type: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
document.getElementById('filter-type').addEventListener('change', (e) => {
|
||||
this.filters.type = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const type = row.dataset.type || 'regular';
|
||||
const mac = row.dataset.mac || '';
|
||||
const addr = row.dataset.address || '';
|
||||
const cmt = row.dataset.comment || '';
|
||||
|
||||
if (this.filters.type && type !== this.filters.type) return false;
|
||||
if (this.filters.search) {
|
||||
if (!mac.includes(this.filters.search) && !addr.includes(this.filters.search) && !cmt.includes(this.filters.search)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
} else {
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
}
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(s => new CustomSelect(s));
|
||||
}
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
338
app/Views/security/walled_garden.php
Normal file
338
app/Views/security/walled_garden.php
Normal file
@@ -0,0 +1,338 @@
|
||||
<?php
|
||||
$title = "Walled Garden";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="security.walled_garden.title">Walled Garden</h1>
|
||||
<p class="text-accents-5" data-i18n="security.walled_garden.subtitle" data-i18n-params='{"name": "<?= htmlspecialchars($session) ?>"}'>Manage allowed destinations (bypass without login) for: <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary" data-i18n="common.dashboard">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center shadow-sm">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
||||
<!-- List (2/3) -->
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center bg-card p-4 rounded-lg border border-accents-2 shadow-sm">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search host, ip, comment..." data-i18n="common.table.search_placeholder">
|
||||
</div>
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-40">
|
||||
<select id="filter-action" class="custom-select" data-search="true">
|
||||
<option value="" data-i18n="security.walled_garden.all_actions">All Actions</option>
|
||||
<option value="allow" data-i18n="security.walled_garden.allow">Allow</option>
|
||||
<option value="deny" data-i18n="security.walled_garden.deny">Deny</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="walled-garden-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="security.walled_garden.table.host_ip">Dst. Host / IP</th>
|
||||
<th data-i18n="security.walled_garden.table.proto_port">Protocol / Port</th>
|
||||
<th data-sort="action" class="sortable cursor-pointer hover:text-primary select-none group">
|
||||
<div class="flex items-center gap-1"><span data-i18n="security.walled_garden.table.action">Action</span> <i data-lucide="arrow-up-down" class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity"></i></div>
|
||||
</th>
|
||||
<th data-sort="comment" class="sortable cursor-pointer hover:text-primary select-none group">
|
||||
<div class="flex items-center gap-1"><span data-i18n="security.walled_garden.table.comment">Comment</span> <i data-lucide="arrow-up-down" class="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity"></i></div>
|
||||
</th>
|
||||
<th class="relative text-right" data-i18n="common.actions">Act</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($items)): ?>
|
||||
<?php foreach ($items as $item): ?>
|
||||
<tr class="table-row-item"
|
||||
data-action="<?= htmlspecialchars($item['action'] ?? 'allow') ?>"
|
||||
data-host="<?= strtolower($item['dst-host'] ?? '') ?>"
|
||||
data-address="<?= htmlspecialchars($item['dst-address'] ?? '') ?>"
|
||||
data-comment="<?= strtolower($item['comment'] ?? '') ?>">
|
||||
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="p-1.5 bg-accents-2 rounded mr-2 text-accents-6">
|
||||
<i data-lucide="globe" class="w-3.5 h-3.5"></i>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-foreground"><?= htmlspecialchars($item['dst-host'] ?? $item['dst-address'] ?? 'Any') ?></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= htmlspecialchars($item['protocol'] ?? 'Any') ?> : <?= htmlspecialchars($item['dst-port'] ?? 'Any') ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<?php
|
||||
$actionClass = 'bg-accents-2 text-accents-6 border border-accents-3';
|
||||
if (($item['action']??'') == 'allow') $actionClass = 'bg-green-100 text-green-800 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800';
|
||||
if (($item['action']??'') == 'deny') $actionClass = 'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800';
|
||||
?>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <?= $actionClass ?>">
|
||||
<?= htmlspecialchars($item['action'] ?? 'allow') ?>
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-sm text-accents-5 italic"><?= htmlspecialchars($item['comment'] ?? '-') ?></td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex justify-end">
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/walled-garden/remove" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Remove Entry?', 'Are you sure you want to remove this Walled Garden entry?', 'Remove', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= $item['.id'] ?>">
|
||||
<button type="submit" class="btn btn-icon-sm hover:bg-red-50 text-accents-5 hover:text-red-600 transition-colors" title="Remove">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Form (Sticky Side) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="card p-0 border-accents-2 shadow-lg sticky top-6">
|
||||
<div class="p-4 border-b border-accents-2 bg-primary/5 flex items-center gap-2">
|
||||
<div class="p-1.5 bg-primary/10 rounded text-primary">
|
||||
<i data-lucide="plus-circle" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<h3 class="font-bold text-sm uppercase tracking-wide text-primary" data-i18n="security.walled_garden.form.add_title">Add Entry</h3>
|
||||
</div>
|
||||
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/walled-garden/store" method="POST" class="p-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
|
||||
<div class="space-y-1.5 md:col-span-2 lg:col-span-1">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.walled_garden.form.dst_host">Dst. Host (Domain)</label>
|
||||
<div class="relative group">
|
||||
<span class="absolute left-3 top-2.5 text-accents-4 group-focus-within:text-primary transition-colors pointer-events-none">
|
||||
<i data-lucide="globe" class="w-4 h-4"></i>
|
||||
</span>
|
||||
<input type="text" name="dst_host" class="form-input pl-10" placeholder="example.com">
|
||||
</div>
|
||||
<p class="text-xs text-accents-5" data-i18n="security.walled_garden.form.host_help">Domain to allow (wildcard supported).</p>
|
||||
</div>
|
||||
<div class="space-y-1.5 md:col-span-2 lg:col-span-1">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.walled_garden.form.dst_address">Dst. Address (IP)</label>
|
||||
<input type="text" name="dst_address" class="form-input" placeholder="10.5.50.1">
|
||||
<p class="text-xs text-accents-5" data-i18n="security.walled_garden.form.addr_help">Destination IP Address.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 md:col-span-2 lg:col-span-1">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.walled_garden.form.protocol">Protocol</label>
|
||||
<select name="protocol" class="custom-select w-full">
|
||||
<option value="(6) tcp">tcp</option>
|
||||
<option value="(17) udp">udp</option>
|
||||
<option value="" data-i18n="common.none">any</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.walled_garden.form.dst_port">Dst. Port</label>
|
||||
<input type="text" name="dst_port" class="form-input" placeholder="80,443">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.walled_garden.form.action">Action</label>
|
||||
<select name="action" class="custom-select w-full">
|
||||
<option value="allow" data-i18n="security.walled_garden.allow">allow</option>
|
||||
<option value="deny" data-i18n="security.walled_garden.deny">deny</option>
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="security.walled_garden.form.action_help">Allow (bypass) or Deny access.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.walled_garden.form.server">Server</label>
|
||||
<select name="server" class="custom-select w-full" data-search="true">
|
||||
<option value="all">all</option>
|
||||
<!-- Ideally fetch servers -->
|
||||
</select>
|
||||
<p class="text-xs text-accents-5" data-i18n="security.walled_garden.form.server_help">Apply to specific Hotspot server.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1.5 md:col-span-2 lg:col-span-1">
|
||||
<label class="text-xs font-bold text-accents-5 uppercase" data-i18n="security.walled_garden.form.comment">Comment</label>
|
||||
<input type="text" name="comment" class="form-input" placeholder="Optional notes" data-i18n-placeholder="security.walled_garden.form.comment_help">
|
||||
<p class="text-xs text-accents-5" data-i18n="security.walled_garden.form.comment_help">Note for this rule.</p>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 md:col-span-2 lg:col-span-1">
|
||||
<button type="submit" class="btn btn-primary w-full shadow-lg shadow-primary/20 hover:shadow-primary/40 transition-shadow">
|
||||
<i data-lucide="save" class="w-4 h-4 mr-2"></i> <span data-i18n="security.walled_garden.form.save">Save Entry</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Quick Tips -->
|
||||
<div class="pt-4 mt-4 border-t border-accents-2 md:col-span-2 lg:col-span-1">
|
||||
<h4 class="text-xs font-bold text-accents-5 uppercase mb-2 flex items-center gap-1">
|
||||
<i data-lucide="lightbulb" class="w-3 h-3 text-yellow-500"></i> <span data-i18n="common.tips">Tips</span>
|
||||
</h4>
|
||||
<ul class="text-xs text-accents-5 space-y-1.5 list-disc list-inside">
|
||||
<li data-i18n="security.walled_garden.form.tip_host"><strong>Dst. Host:</strong> Domain name (e.g. <code>*.google.com</code>).</li>
|
||||
<li data-i18n="security.walled_garden.form.tip_ip"><strong>Dst. IP:</strong> Specific IP address.</li>
|
||||
<li data-i18n="security.walled_garden.form.tip_action"><strong>Action:</strong> Allow to bypass auth.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '', action: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
document.getElementById('filter-action').addEventListener('change', (e) => {
|
||||
this.filters.action = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const action = row.dataset.action || 'allow';
|
||||
const host = row.dataset.host || '';
|
||||
const addr = row.dataset.address || '';
|
||||
const cmt = row.dataset.comment || '';
|
||||
|
||||
if (this.filters.action && action !== this.filters.action) return false;
|
||||
if (this.filters.search) {
|
||||
if (!host.includes(this.filters.search) && !addr.includes(this.filters.search) && !cmt.includes(this.filters.search)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
} else {
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
}
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(s => new CustomSelect(s));
|
||||
}
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
220
app/Views/settings/api_cors.php
Normal file
220
app/Views/settings/api_cors.php
Normal file
@@ -0,0 +1,220 @@
|
||||
<?php
|
||||
$title = "API CORS";
|
||||
$no_main_container = true;
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<!-- Sub-Navbar Navigation -->
|
||||
<?php include ROOT . '/app/Views/layouts/sidebar_settings.php'; ?>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow w-full flex flex-col">
|
||||
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold tracking-tight" data-i18n="settings.api_cors_title">API CORS</h1>
|
||||
<p class="text-accents-5 mt-2" data-i18n="settings.api_cors_subtitle">Manage Cross-Origin Resource Sharing for API access.</p>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="mt-8 flex-1 min-w-0" id="settings-content-area">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div class="hidden md:block">
|
||||
<!-- Spacer -->
|
||||
</div>
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<button onclick="openModal('addModal')" class="btn btn-primary w-full md:w-auto">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="settings.add_rule">Add CORS Rule</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="cors-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="settings.origin">Origin</th>
|
||||
<th data-i18n="settings.methods">Allowed Methods</th>
|
||||
<th data-i18n="settings.headers">Allowed Headers</th>
|
||||
<th class="text-right" data-i18n="common.actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($rules)): ?>
|
||||
<?php foreach ($rules as $rule): ?>
|
||||
<tr class="table-row-item">
|
||||
<td>
|
||||
<div class="text-sm font-medium text-foreground"><?= htmlspecialchars($rule['origin']) ?></div>
|
||||
<div class="text-xs text-accents-4">Max Age: <?= $rule['max_age'] ?>s</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<?php foreach ($rule['methods_arr'] as $method): ?>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"><?= htmlspecialchars($method) ?></span>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-accents-5 truncate max-w-[200px]"><?= htmlspecialchars(implode(', ', $rule['headers_arr'])) ?></div>
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex items-center justify-end gap-2 table-actions-reveal">
|
||||
<button onclick="editRule(<?= htmlspecialchars(json_encode($rule)) ?>)" class="btn-icon" title="Edit">
|
||||
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<form action="/settings/api-cors/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('settings.cors_rule_deleted') : 'Delete CORS Rule?', 'Are you sure you want to delete the CORS rule for <?= htmlspecialchars($rule['origin']) ?>?', 'Delete', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="id" value="<?= $rule['id'] ?>">
|
||||
<button type="submit" class="btn-icon-danger" title="Delete">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<tr>
|
||||
<td colspan="4" class="px-6 py-12 text-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<i data-lucide="shield" class="w-12 h-12 text-accents-2 mb-4"></i>
|
||||
<p class="text-accents-5">No CORS rules found. Add your first origin to allow external API access.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Modal -->
|
||||
<div id="addModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('addModal')"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
|
||||
<div class="card shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold" data-i18n="settings.add_rule">Add CORS Rule</h3>
|
||||
<button onclick="closeModal('addModal')" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form action="/settings/api-cors/store" method="POST" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.origin">Origin</label>
|
||||
<input type="text" name="origin" class="form-control" placeholder="https://example.com or *" required>
|
||||
<p class="text-xs text-orange-500 dark:text-orange-400 mt-1 font-medium">Use * for all origins (not recommended for production).</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" data-i18n="settings.methods">Allowed Methods</label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" name="methods[]" value="<?= $m ?>" class="form-checkbox" <?= in_array($m, ['GET', 'POST']) ? 'checked' : '' ?>>
|
||||
<span class="text-sm"><?= $m ?></span>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.headers">Allowed Headers</label>
|
||||
<input type="text" name="headers" class="form-control" value="*" placeholder="Content-Type, Authorization, *">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.max_age">Max Age (seconds)</label>
|
||||
<input type="number" name="max_age" class="form-control" value="3600">
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button" onclick="closeModal('addModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="common.save">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<div id="editModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('editModal')"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
|
||||
<div class="card shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold" data-i18n="settings.edit_rule">Edit CORS Rule</h3>
|
||||
<button onclick="closeModal('editModal')" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form action="/settings/api-cors/update" method="POST" class="space-y-4">
|
||||
<input type="hidden" name="id" id="edit_id">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.origin">Origin</label>
|
||||
<input type="text" name="origin" id="edit_origin" class="form-control" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" data-i18n="settings.methods">Allowed Methods</label>
|
||||
<div class="grid grid-cols-3 gap-2" id="edit_methods_container">
|
||||
<?php foreach(['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'HEAD'] as $m): ?>
|
||||
<label class="flex items-center space-x-2 cursor-pointer">
|
||||
<input type="checkbox" name="methods[]" value="<?= $m ?>" class="form-checkbox edit-method-check" data-method="<?= $m ?>">
|
||||
<span class="text-sm"><?= $m ?></span>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.headers">Allowed Headers</label>
|
||||
<input type="text" name="headers" id="edit_headers" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="settings.max_age">Max Age (seconds)</label>
|
||||
<input type="number" name="max_age" id="edit_max_age" class="form-control">
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button" onclick="closeModal('editModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="common.save">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
const content = modal.querySelector('.modal-content');
|
||||
modal.classList.remove('hidden');
|
||||
|
||||
// Use double requestAnimationFrame to ensure the browser has painted the hidden->block change
|
||||
// before we trigger the opacity/transform transitions.
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
modal.classList.remove('opacity-0');
|
||||
content.classList.remove('scale-95', 'opacity-0');
|
||||
content.classList.add('scale-100', 'opacity-100');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
const content = modal.querySelector('.modal-content');
|
||||
modal.classList.add('opacity-0');
|
||||
content.classList.remove('scale-100', 'opacity-100');
|
||||
content.classList.add('scale-95', 'opacity-0');
|
||||
setTimeout(() => { modal.classList.add('hidden'); }, 300);
|
||||
}
|
||||
|
||||
function editRule(rule) {
|
||||
document.getElementById('edit_id').value = rule.id;
|
||||
document.getElementById('edit_origin').value = rule.origin;
|
||||
document.getElementById('edit_headers').value = rule.headers_arr.join(', ');
|
||||
document.getElementById('edit_max_age').value = rule.max_age;
|
||||
|
||||
// Clear and check checkboxes
|
||||
const methods = rule.methods_arr;
|
||||
document.querySelectorAll('.edit-method-check').forEach(cb => {
|
||||
cb.checked = methods.includes(cb.dataset.method);
|
||||
});
|
||||
|
||||
openModal('editModal');
|
||||
}
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
123
app/Views/settings/form.php
Normal file
123
app/Views/settings/form.php
Normal file
@@ -0,0 +1,123 @@
|
||||
<?php
|
||||
// Use $router variable instead of $session to avoid conflict with header.php logic
|
||||
$router = $router ?? null;
|
||||
$title = $router ? "Edit Router" : "Add Router";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Safe access helper
|
||||
$val = function($key) use ($router) {
|
||||
return isset($router) && isset($router[$key]) ? htmlspecialchars($router[$key]) : '';
|
||||
};
|
||||
?>
|
||||
|
||||
<div class="w-full max-w-5xl mx-auto mb-16">
|
||||
<div class="mb-8">
|
||||
<a href="/settings/routers" class="inline-flex items-center text-sm text-accents-5 hover:text-foreground transition-colors mb-4">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> Back to Settings
|
||||
</a>
|
||||
<h1 class="text-2xl font-bold tracking-tight"><?= $title ?></h1>
|
||||
<p class="text-accents-5">Connect Mikhmon to your RouterOS device.</p>
|
||||
</div>
|
||||
|
||||
<form autocomplete="off" method="post" action="<?= isset($router) ? '/settings/update' : '/settings/store' ?>">
|
||||
<?php if(isset($router)): ?>
|
||||
<input type="hidden" name="id" value="<?= $router['id'] ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="card p-6 md:p-8 space-y-6">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold mb-4">Session Settings</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Session Name</label>
|
||||
<input class="form-control w-full" type="text" name="sessname" id="sessname" placeholder="e.g. router-jakarta-1" value="<?= $val('session_name') ?>" required/>
|
||||
<p class="text-xs text-accents-4">Unique ID. Preview: <span id="sessname-preview" class="font-mono text-primary font-bold">...</span></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="checkbox" id="quick_access" name="quick_access" class="checkbox" <?= (isset($router['quick_access']) && $router['quick_access'] == 1) ? 'checked' : '' ?> value="1">
|
||||
<label for="quick_access" class="text-sm font-medium cursor-pointer select-none">Show in Quick Access (Home Page)</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-accents-2 pt-6">
|
||||
<h2 class="text-base font-semibold mb-4">Connection Details</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">IP Address</label>
|
||||
<input class="form-control w-full" type="text" name="ipmik" placeholder="192.168.88.1" value="<?= $val('ip_address') ?>" required/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Username</label>
|
||||
<input class="form-control w-full" type="text" name="usermik" placeholder="admin" value="<?= $val('username') ?>" required/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Password</label>
|
||||
<input class="form-control w-full" type="password" name="passmik" <?= isset($router) ? '' : 'required' ?> />
|
||||
<?php if(isset($router)): ?>
|
||||
<p class="text-xs text-accents-4">Leave empty to keep existing password.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-accents-2 pt-6">
|
||||
<h2 class="text-base font-semibold mb-4">Hotspot Information</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Hotspot Name</label>
|
||||
<input class="form-control w-full" type="text" name="hotspotname" placeholder="My Hotspot ID" value="<?= $val('hotspot_name') ?>" required/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">DNS Name</label>
|
||||
<input class="form-control w-full" type="text" name="dnsname" placeholder="hotspot.net" value="<?= $val('dns_name') ?>" required/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Traffic Interface</label>
|
||||
<div class="flex w-full gap-2">
|
||||
<div class="flex-grow">
|
||||
<select class="custom-select w-full" name="iface" id="iface" data-search="true" required>
|
||||
<option value="<?= $val('interface') ?: 'ether1' ?>"><?= $val('interface') ?: 'ether1' ?></option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="button" id="check-interface-btn" class="btn btn-secondary whitespace-nowrap" title="Check connection and fetch interfaces">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> Check
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Currency</label>
|
||||
<input class="form-control w-full" type="text" name="currency" value="<?= $val('currency') ?: 'Rp' ?>" required/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-sm font-medium">Auto Reload (Sec)</label>
|
||||
<input class="form-control w-full" type="number" min="10" name="areload" value="<?= $val('reload_interval') ?: 10 ?>" required/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 flex justify-end gap-3">
|
||||
<a href="/settings/routers" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-secondary" name="action" value="save">
|
||||
Save
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" name="action" value="connect">
|
||||
Save & Connect
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/router-form.js"></script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
110
app/Views/settings/index.php
Normal file
110
app/Views/settings/index.php
Normal file
@@ -0,0 +1,110 @@
|
||||
<?php
|
||||
$title = "Settings";
|
||||
$no_main_container = true;
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<!-- Sub-Navbar Navigation -->
|
||||
<?php include ROOT . '/app/Views/layouts/sidebar_settings.php'; ?>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow w-full flex flex-col">
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Router Sessions</h1>
|
||||
<p class="text-accents-5 mt-2">Manage your stored MikroTik connections.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="mt-8 flex-1 min-w-0" id="settings-content-area">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div class="hidden md:block">
|
||||
<!-- Spacer or Breadcrumbs if needed -->
|
||||
</div>
|
||||
<a href="/settings/add" class="btn btn-primary w-full md:w-auto">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Add Router
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<?php if (empty($routers)): ?>
|
||||
<div class="card flex flex-col items-center justify-center py-16 text-center border-dashed">
|
||||
<div class="rounded-full bg-accents-1 p-4 mb-4">
|
||||
<i data-lucide="server-off" class="w-8 h-8 text-accents-4"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium mb-2">No routers configured</h3>
|
||||
<p class="text-accents-5 mb-6 max-w-sm mx-auto">Connect your first MikroTik router to start managing hotspots and vouchers.</p>
|
||||
<a href="/settings/add" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Connect Router
|
||||
</a>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="table-container">
|
||||
<table class="table-glass">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Session Name</th>
|
||||
<th scope="col">Hotspot Name</th>
|
||||
<th scope="col">IP Address</th>
|
||||
<th scope="col" class="relative text-right">
|
||||
<span class="sr-only">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($routers as $router): ?>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-8 w-8 rounded bg-accents-2 flex items-center justify-center text-xs font-bold mr-3">
|
||||
<?= strtoupper(substr($router['session_name'], 0, 2)) ?>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-foreground flex items-center gap-2">
|
||||
<?= htmlspecialchars($router['session_name']) ?>
|
||||
<?php if(isset($router['quick_access']) && $router['quick_access'] == 1): ?>
|
||||
<i data-lucide="star" class="w-3 h-3 text-yellow-500 fill-current" title="Quick Access Enabled"></i>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="text-xs text-accents-5">ID: <?= $router['id'] ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= htmlspecialchars($router['hotspot_name']) ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-accents-5 font-mono"><?= htmlspecialchars($router['ip_address']) ?></div>
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium flex justify-end gap-2">
|
||||
<a href="/<?= htmlspecialchars($router['session_name']) ?>/dashboard" class="btn btn-secondary btn-sm h-8 px-3">
|
||||
Open
|
||||
</a>
|
||||
<a href="/settings/edit/<?= $router['id'] ?>" class="btn btn-secondary btn-sm h-8 px-3" title="Edit">
|
||||
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
||||
</a>
|
||||
<form action="/settings/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm('Disconnect Router?', 'Are you sure you want to disconnect <?= htmlspecialchars($router['session_name']) ?>?', 'Disconnect', 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="id" value="<?= $router['id'] ?>">
|
||||
<button type="submit" class="btn hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 border border-transparent h-8 px-2" title="Delete">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="bg-accents-1 px-4 py-3 border-t border-accents-2 flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-0 sm:px-6">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing all <?= count($routers) ?> stored sessions
|
||||
</div>
|
||||
<a href="/settings/add" class="btn btn-primary btn-sm w-full sm:w-auto justify-center">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> Add New
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
121
app/Views/settings/logos.php
Normal file
121
app/Views/settings/logos.php
Normal file
@@ -0,0 +1,121 @@
|
||||
<?php
|
||||
$title = "Logo Management";
|
||||
$no_main_container = true;
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<!-- Sub-Navbar Navigation -->
|
||||
<?php include ROOT . '/app/Views/layouts/sidebar_settings.php'; ?>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow w-full flex flex-col">
|
||||
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold tracking-tight" data-i18n="settings.logos_title">Logo Management</h1>
|
||||
<p class="text-accents-5 mt-2" data-i18n="settings.logos_subtitle">Upload and manage logos for your hotspots and vouchers.</p>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="mt-8 flex-1 min-w-0" id="settings-content-area">
|
||||
<div class="space-y-8">
|
||||
<!-- Section Header (Removed redundant Logos) -->
|
||||
|
||||
<!-- Upload Section -->
|
||||
<section>
|
||||
<div class="card p-8 border-dashed border-2 bg-accents-1 hover:bg-background transition-colors text-center relative group">
|
||||
<form action="/settings/logos/upload" method="POST" enctype="multipart/form-data" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
|
||||
<input type="file" name="logo_file" accept=".png,.jpg,.jpeg,.svg,.gif" onchange="this.form.submit()" class="form-control-file">
|
||||
</form>
|
||||
|
||||
<div class="flex flex-col items-center justify-center pointer-events-none">
|
||||
<div class="h-12 w-12 rounded-full bg-accents-2 flex items-center justify-center mb-4 group-hover:bg-primary group-hover:text-white transition-colors">
|
||||
<i data-lucide="upload-cloud" class="w-6 h-6"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium mb-1" data-i18n="settings.upload_new_logo">Upload New Logo</h3>
|
||||
<p class="text-sm text-accents-5" data-i18n="settings.drag_drop">Drag and drop or click to select file</p>
|
||||
<p class="text-xs text-accents-4 mt-2" data-i18n="settings.supports_formats">Supports PNG, JPG, SVG, GIF</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<section>
|
||||
<?php if (empty($logos)): ?>
|
||||
<div class="text-center py-12">
|
||||
<p class="text-accents-5" data-i18n="settings.no_logos">No logos uploaded yet.</p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
|
||||
<?php foreach ($logos as $logo): ?>
|
||||
<div class="group relative card !p-0 overflow-hidden border border-accents-2 bg-background hover:shadow-md transition-all">
|
||||
<!-- Image Preview -->
|
||||
<div class="aspect-square flex items-center justify-center p-4 bg-accents-1 relative" style="background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;">
|
||||
<img src="<?= $logo['path'] ?>" alt="<?= htmlspecialchars($logo['name']) ?>" class="max-w-full max-h-full object-contain">
|
||||
|
||||
<!-- Overlay Actions -->
|
||||
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-2">
|
||||
<span class="text-white font-mono text-lg font-bold bg-black/50 px-2 py-1 rounded"><?= $logo['id'] ?></span>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="copyToClipboard('<?= $logo['id'] ?>')" class="p-2 bg-white text-black rounded hover:bg-accents-2 transition-colors" title="Copy ID">
|
||||
<i data-lucide="hash" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<form action="/settings/logos/delete" method="POST" class="delete-logo-form">
|
||||
<input type="hidden" name="id" value="<?= $logo['id'] ?>">
|
||||
<button type="submit" class="p-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors" title="Delete">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="p-3 border-t border-accents-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<code class="text-xs font-bold bg-accents-2 px-1 rounded"><?= $logo['id'] ?></code>
|
||||
<span class="text-xs text-accents-5 uppercase"><?= $logo['type'] ?></span>
|
||||
</div>
|
||||
<p class="text-xs text-accents-5 mt-1 truncate" title="<?= htmlspecialchars($logo['name']) ?>"><?= htmlspecialchars($logo['name']) ?></p>
|
||||
<div class="flex items-center justify-between mt-1 text-xs text-accents-4">
|
||||
<span><?= $logo['formatted_size'] ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
</div> <!-- End Space-y-8 -->
|
||||
</div> <!-- End Content Area -->
|
||||
|
||||
<script>
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const title = window.i18n ? window.i18n.t('settings.id_copied') : 'ID Copied';
|
||||
const desc = window.i18n ? window.i18n.t('settings.logo_id_copied_desc', {id: text}) : `Logo ID <strong>${text}</strong> copied to clipboard.`;
|
||||
Mivo.alert('success', title, desc);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Intercept Logo Deletion
|
||||
const deleteForms = document.querySelectorAll('.delete-logo-form');
|
||||
deleteForms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const logoId = this.querySelector('input[name="id"]').value;
|
||||
Mivo.confirm(
|
||||
window.i18n ? window.i18n.t('settings.delete_logo_title') : 'Delete Logo?',
|
||||
window.i18n ? window.i18n.t('settings.delete_logo_confirm', {id: logoId}) : `Are you sure you want to delete logo <strong>${logoId}</strong>?`,
|
||||
window.i18n ? window.i18n.t('common.delete') : 'Yes, Delete',
|
||||
window.i18n ? window.i18n.t('common.cancel') : 'Cancel'
|
||||
).then((result) => {
|
||||
if (result) {
|
||||
this.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
122
app/Views/settings/systems.php
Normal file
122
app/Views/settings/systems.php
Normal file
@@ -0,0 +1,122 @@
|
||||
<?php
|
||||
$title = "Settings";
|
||||
$no_main_container = true;
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<!-- Sub-Navbar Navigation -->
|
||||
<?php include ROOT . '/app/Views/layouts/sidebar_settings.php'; ?>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow w-full flex flex-col">
|
||||
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold tracking-tight" data-i18n="settings.system">General Settings</h1>
|
||||
<p class="text-accents-5 mt-2" data-i18n="settings.system_desc">System-wide configurations and security.</p>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="mt-8 flex-1 min-w-0" id="settings-content-area">
|
||||
<div class="space-y-8">
|
||||
|
||||
<!-- Section Header (Removed redundant General) -->
|
||||
<div class="pb-5">
|
||||
<h3 class="text-lg font-medium leading-6 text-foreground" data-i18n="settings.security">Security & Access</h3>
|
||||
</div>
|
||||
|
||||
<!-- Admin Password -->
|
||||
<div class="card">
|
||||
<form action="/settings/admin/update" method="POST" class="space-y-6">
|
||||
<div class="grid grid-cols-1 gap-6 w-full">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-foreground" data-i18n="settings.admin_username">Admin Username</label>
|
||||
<div class="relative">
|
||||
<input type="text" class="form-control w-full bg-accents-1 text-accents-5 cursor-not-allowed pl-10" value="<?= htmlspecialchars($username) ?>" readonly disabled>
|
||||
<i data-lucide="lock" class="absolute left-3 top-2.5 h-4 w-4 text-accents-4"></i>
|
||||
</div>
|
||||
<p class="text-xs text-accents-4" data-i18n="settings.admin_username_desc">
|
||||
<i class="inline-block w-3 h-3 mr-1 align-middle" data-lucide="info"></i>
|
||||
For security reasons, the administrator username cannot be changed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-foreground" data-i18n="settings.change_password">Change Password</label>
|
||||
<div class="relative">
|
||||
<input type="password" name="admin_password" class="form-control w-full pl-10" placeholder="Enter new password" data-i18n-placeholder="settings.new_password_placeholder">
|
||||
<i data-lucide="key" class="absolute left-3 top-2.5 h-4 w-4 text-accents-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 border-t border-accents-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<span data-i18n="settings.update_password">Update Password</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Global Configuration -->
|
||||
<div class="card">
|
||||
<form action="/settings/global/update" method="POST" class="space-y-6">
|
||||
<div class="grid grid-cols-1 gap-6 w-full">
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-foreground" data-i18n="settings.quick_print_mode">Quick Print Mode</label>
|
||||
<div class="relative">
|
||||
<select name="quick_print_mode" class="custom-select w-full">
|
||||
<option value="0" <?= ($settings['quick_print_mode'] ?? '0') == '0' ? 'selected' : '' ?> data-i18n="common.forms.disabled">Disabled</option>
|
||||
<option value="1" <?= ($settings['quick_print_mode'] ?? '0') == '1' ? 'selected' : '' ?> data-i18n="common.forms.enabled">Enabled</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="text-xs text-accents-4" data-i18n="settings.quick_print_mode_desc">Enable direct printing for voucher generation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-accents-2 mt-6">
|
||||
<button type="submit" class="btn btn-primary" data-i18n="settings.save_global">
|
||||
Save Global Settings
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Data Management -->
|
||||
<div class="card">
|
||||
<div class="mb-6">
|
||||
<h4 class="text-lg font-medium" data-i18n="settings.data_management">Data Management</h4>
|
||||
<p class="text-sm text-accents-5" data-i18n="settings.data_management_desc">Backup or restore your application data.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Backup -->
|
||||
<div class="p-4 rounded-lg bg-accents-1 border border-accents-2 flex flex-col h-full">
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium mb-2 text-sm" data-i18n="settings.backup_data">Backup Data</h4>
|
||||
<p class="text-xs text-accents-5 mb-4" data-i18n="settings.backup_data_desc">Download a configuration file (.mivo) containing your database and settings.</p>
|
||||
</div>
|
||||
<a href="/settings/backup" class="btn btn-primary w-full justify-center text-sm mt-auto">
|
||||
<i data-lucide="download" class="w-4 h-4 mr-2"></i> <span data-i18n="settings.download_backup">Download Backup</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Restore -->
|
||||
<div class="p-4 rounded-lg bg-accents-1 border border-accents-2 flex flex-col h-full">
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium mb-2 text-sm" data-i18n="settings.restore_data">Restore Data</h4>
|
||||
<p class="text-xs text-accents-5 mb-4" data-i18n="settings.restore_data_desc">Upload a previously backup file (.mivo). <strong>Overwrites or adds to existing data.</strong></p>
|
||||
</div>
|
||||
<form action="/settings/restore" method="POST" enctype="multipart/form-data" class="flex flex-col sm:flex-row gap-2 mt-auto">
|
||||
<div class="w-full">
|
||||
<input type="file" name="backup_file" accept=".mivo" class="form-control-file" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-full sm:w-auto mt-2 sm:mt-0" onclick="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('settings.restore_data') : 'Restore Data?', window.i18n ? window.i18n.t('settings.warning_restore') : 'WARNING: This will restore settings from the file and may overwrite existing data. Continue?', window.i18n ? window.i18n.t('settings.restore') : 'Restore', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.closest('form').submit(); });">
|
||||
<span data-i18n="settings.restore">Restore</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
3
app/Views/settings/templates/add.php
Normal file
3
app/Views/settings/templates/add.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<?php
|
||||
// Just include the edit view, logic is handled there
|
||||
include __DIR__ . '/edit.php';
|
||||
488
app/Views/settings/templates/edit.php
Normal file
488
app/Views/settings/templates/edit.php
Normal file
@@ -0,0 +1,488 @@
|
||||
<?php
|
||||
// Template Editor (Shared for Add/Edit)
|
||||
$isEdit = isset($template);
|
||||
$title = $isEdit ? 'Edit Template' : 'New Template';
|
||||
$initialContent = $template['content'] ?? '<div style="border: 1px solid #000; padding: 10px; width: 300px; background-color: #fff;">
|
||||
<h3>{{dns_name}}</h3>
|
||||
<p>User: {{username}}</p>
|
||||
<p>Pass: {{password}}</p>
|
||||
<p>Price: {{price}}</p>
|
||||
<p>Valid: {{validity}}</p>
|
||||
</div>';
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex flex-col lg:h-[calc(100vh-8rem)] gap-6">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4 flex-shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/settings/templates" class="text-accents-5 hover:text-foreground transition-colors">
|
||||
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
||||
</a>
|
||||
<h1 class="text-xl font-bold tracking-tight text-foreground"><?= $title ?></h1>
|
||||
</div>
|
||||
|
||||
<form id="templateForm" action="<?= $isEdit ? '/settings/templates/update' : '/settings/templates/store' ?>" method="POST" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full lg:w-auto">
|
||||
<?php if ($isEdit): ?>
|
||||
<input type="hidden" name="id" value="<?= $template['id'] ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<input type="text" name="name" value="<?= htmlspecialchars($template['name'] ?? 'New Template') ?>" required class="form-input w-full lg:w-64" placeholder="Template Name" data-i18n-placeholder="settings.template_name">
|
||||
|
||||
<button type="submit" class="btn btn-primary h-9 justify-center">
|
||||
<i data-lucide="save" class="w-4 h-4 mr-2"></i> <span data-i18n="common.save">Save</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Editor Layout -->
|
||||
<div class="flex-1 flex flex-col lg:flex-row gap-6 overflow-hidden min-h-0">
|
||||
|
||||
<!-- Left: Code Editor -->
|
||||
<div class="flex-1 flex flex-col bg-background border border-accents-2 rounded-lg overflow-hidden min-w-0 min-h-0 h-[400px] sm:h-[500px] lg:h-auto shrink-0">
|
||||
<div class="bg-accents-1 px-4 py-3 border-b border-accents-2 flex items-center justify-between gap-4">
|
||||
<span class="text-xs font-mono font-medium text-accents-5 whitespace-nowrap" data-i18n="settings.html_source">HTML Source</span>
|
||||
|
||||
<!-- Scrollable Toolbar -->
|
||||
<div class="flex-1 flex gap-2 overflow-x-auto no-scrollbar mask-fade-right py-1 px-1">
|
||||
<div class="flex gap-2 whitespace-nowrap">
|
||||
<!-- Help Button -->
|
||||
<button type="button" onclick="toggleDocs()" class="text-xs px-2 py-1 bg-accents-2 hover:bg-accents-3 text-accents-8 rounded transition-colors flex items-center gap-1">
|
||||
<i data-lucide="help-circle" class="w-3 h-3"></i> <span data-i18n="settings.docs">Docs</span>
|
||||
</button>
|
||||
|
||||
<button type="button" onclick="insertVar('{{username}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{username}}</button>
|
||||
<button type="button" onclick="insertVar('{{password}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{password}}</button>
|
||||
<button type="button" onclick="insertVar('{{price}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{price}}</button>
|
||||
<button type="button" onclick="insertVar('{{validity}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{validity}}</button>
|
||||
<button type="button" onclick="insertVar('{{timelimit}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{timelimit}}</button>
|
||||
<button type="button" onclick="insertVar('{{datalimit}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{datalimit}}</button>
|
||||
<button type="button" onclick="insertVar('{{profile}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{profile}}</button>
|
||||
<button type="button" onclick="insertVar('{{dns_name}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{dns_name}}</button>
|
||||
<button type="button" onclick="insertVar('{{login_url}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors">{{login_url}}</button>
|
||||
<button type="button" onclick="insertVar('{{qrcode}}')" class="text-xs px-2 py-1 bg-background border border-accents-2 rounded hover:bg-accents-2 transition-colors" title="Insert QR Code">{{qrcode}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="codeEditor" name="content" form="templateForm" class="form-control flex-1 w-full font-mono text-sm resize-none h-[500px]" spellcheck="false"><?= htmlspecialchars($initialContent) ?></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Right: Preview -->
|
||||
<div class="flex-1 flex flex-col border border-accents-2 rounded-lg bg-accents-1 relative overflow-hidden min-h-[500px] shrink-0 lg:h-auto lg:min-h-0">
|
||||
<div class="bg-background px-4 py-2 border-b border-accents-2 flex items-center justify-between">
|
||||
<span class="text-xs font-mono font-medium text-accents-5" data-i18n="settings.live_preview">Live Preview</span>
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 text-accents-5 cursor-pointer hover:text-foreground" onclick="updatePreview()"></i>
|
||||
</div>
|
||||
<!-- Scaled Preview Container - White Paper Simulation -->
|
||||
<div class="flex-1 overflow-auto flex items-center justify-center p-8 bg-zinc-900/50">
|
||||
<div id="previewContainer" class="bg-white text-black shadow-xl p-4 min-w-[300px] min-h-[300px] flex items-center justify-center rounded-sm">
|
||||
<!-- Content Injected Here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/qrious.min.js"></script>
|
||||
</div>
|
||||
|
||||
<!-- Documentation Modal -->
|
||||
<div id="docsModal" class="fixed inset-0 z-50 hidden transition-all duration-200">
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-background/80 backdrop-blur-sm opacity-0 transition-opacity duration-200" onclick="toggleDocs()"></div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="absolute inset-x-0 top-[10%] mx-auto max-w-2xl bg-background border border-accents-2 shadow-2xl rounded-xl overflow-hidden flex flex-col max-h-[80vh] opacity-0 scale-95 transition-all duration-200 origin-top">
|
||||
<div class="px-6 py-4 border-b border-accents-2 flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold" data-i18n="settings.template_variables">Template Variables</h2>
|
||||
<button onclick="toggleDocs()" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="p-6 overflow-y-auto custom-scrollbar">
|
||||
<div class="prose dark:prose-invert max-w-none">
|
||||
<p class="text-sm text-accents-5 mb-4" data-i18n="settings.variables_desc">Use these variables in your HTML source. They will be replaced with actual user data during printing.</p>
|
||||
|
||||
<h3 class="text-sm font-bold uppercase text-accents-5 mb-2">Basic Variables</h3>
|
||||
<div class="grid grid-cols-1 gap-2 mb-6">
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{username}}</code>
|
||||
<span class="text-sm text-accents-6">Username</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{password}}</code>
|
||||
<span class="text-sm text-accents-6">Password</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{price}}</code>
|
||||
<span class="text-sm text-accents-6">Price (formatted)</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{validity}}</code>
|
||||
<span class="text-sm text-accents-6">Validity (Raw)</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{timelimit}}</code>
|
||||
<span class="text-sm text-accents-6">Time Limit (Formatted)</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{datalimit}}</code>
|
||||
<span class="text-sm text-accents-6">Data Limit (Formatted)</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{profile}}</code>
|
||||
<span class="text-sm text-accents-6">User Profile Name</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{dns_name}}</code>
|
||||
<span class="text-sm text-accents-6">DNS Name / Hotspot Name</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-2 rounded bg-accents-1 border border-accents-2">
|
||||
<code class="text-sm font-mono text-primary">{{login_url}}</code>
|
||||
<span class="text-sm text-accents-6">Login URL (http://dnsname/login)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-sm font-bold uppercase text-accents-5 mb-2" data-i18n="settings.qr_code">QR Code</h3>
|
||||
<div class="p-4 rounded bg-accents-1 border border-accents-2">
|
||||
<p class="mb-2"><code class="text-sm font-mono text-primary">{{qrcode}}</code></p>
|
||||
<p class="text-sm text-accents-6 mb-4" data-i18n="settings.qr_desc">Generates a QR Code containing the Login URL with username and password.</p>
|
||||
|
||||
<h4 class="text-xs font-bold uppercase text-accents-5 mb-2" data-i18n="settings.custom_attributes">Custom Attributes</h4>
|
||||
<ul class="text-sm space-y-2 list-disc list-inside text-accents-6 mb-4">
|
||||
<li><strong class="text-foreground">fg</strong>: Foreground color (name or hex)</li>
|
||||
<li><strong class="text-foreground">bg</strong>: Background color (name or hex)</li>
|
||||
<li><strong class="text-foreground">size</strong>: Size in pixels (default 100)</li>
|
||||
<li><strong class="text-foreground">padding</strong>: Padding around QR code (pixels)</li>
|
||||
<li><strong class="text-foreground">rounded</strong>: Corner radius (pixels)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="text-xs font-bold uppercase text-accents-5 mb-1" data-i18n="settings.examples">Examples:</h4>
|
||||
<div class="bg-background p-2 rounded border border-accents-2 space-y-1 font-mono text-xs">
|
||||
<p>{{qrcode fg=red bg=yellow}}</p>
|
||||
<p>{{qrcode size=200 padding=10 rounded=15}}</p>
|
||||
<p>{{qrcode fg=#000 bg=#fff}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 border-t border-accents-2 bg-accents-1 flex justify-end">
|
||||
<button onclick="toggleDocs()" class="btn btn-secondary" data-i18n="common.cancel">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- Documentation Modal Animation ---
|
||||
function toggleDocs() {
|
||||
const modal = document.getElementById('docsModal');
|
||||
const content = modal.querySelector('div.bg-background'); // The modal card
|
||||
|
||||
if (modal.classList.contains('hidden')) {
|
||||
// Open
|
||||
modal.classList.remove('hidden');
|
||||
// Small delay to allow display:block to apply before opacity transition
|
||||
setTimeout(() => {
|
||||
modal.firstElementChild.classList.remove('opacity-0'); // Backdrop
|
||||
content.classList.remove('opacity-0', 'scale-95');
|
||||
content.classList.add('opacity-100', 'scale-100');
|
||||
}, 10);
|
||||
} else {
|
||||
// Close
|
||||
modal.firstElementChild.classList.add('opacity-0');
|
||||
content.classList.remove('opacity-100', 'scale-100');
|
||||
content.classList.add('opacity-0', 'scale-95');
|
||||
|
||||
setTimeout(() => {
|
||||
modal.classList.add('hidden');
|
||||
}, 200); // Match duration
|
||||
}
|
||||
}
|
||||
|
||||
// --- Editor Logic ---
|
||||
const editor = document.getElementById('codeEditor');
|
||||
const preview = document.getElementById('previewContainer');
|
||||
|
||||
// History Stack for Undo/Redo
|
||||
let historyStack = [];
|
||||
let redoStack = [];
|
||||
let isTyping = false;
|
||||
let typingTimer = null;
|
||||
|
||||
// Initial State
|
||||
historyStack.push({ value: editor.value, selectionStart: 0, selectionEnd: 0 });
|
||||
|
||||
function saveState() {
|
||||
// Limit stack size
|
||||
if (historyStack.length > 50) historyStack.shift();
|
||||
|
||||
const lastState = historyStack[historyStack.length - 1];
|
||||
if (lastState && lastState.value === editor.value) return; // No change
|
||||
|
||||
historyStack.push({
|
||||
value: editor.value,
|
||||
selectionStart: editor.selectionStart,
|
||||
selectionEnd: editor.selectionEnd
|
||||
});
|
||||
redoStack = []; // Clear redo on new change
|
||||
}
|
||||
|
||||
// Debounced save for typing
|
||||
editor.addEventListener('input', (e) => {
|
||||
if (!isTyping) {
|
||||
// Save state *before* a burst of typing starts?
|
||||
// Actually usually we save *after*.
|
||||
// For robust undo: save state Before modification if possible, or assume previous state is safe.
|
||||
// Simplified: Save debounced.
|
||||
clearTimeout(typingTimer);
|
||||
typingTimer = setTimeout(saveState, 500);
|
||||
}
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
// --- Keyboard Shortcuts (Undo/Redo, Tab, Enter) ---
|
||||
editor.addEventListener('keydown', function(e) {
|
||||
// Undo: Ctrl+Z
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
undo();
|
||||
return;
|
||||
}
|
||||
// Redo: Ctrl+Y or Ctrl+Shift+Z
|
||||
if (((e.ctrlKey || e.metaKey) && e.key === 'y') || ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey)) {
|
||||
e.preventDefault();
|
||||
redo();
|
||||
return;
|
||||
}
|
||||
|
||||
// Tab: Insert/Remove Indent
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault();
|
||||
const start = this.selectionStart;
|
||||
const end = this.selectionEnd;
|
||||
const val = this.value;
|
||||
const tabChar = " "; // 4 spaces
|
||||
|
||||
if (e.shiftKey) {
|
||||
// Un-indent (naive single line)
|
||||
// TODO: Multiline support if needed. For now simple cursor unindent.
|
||||
// Checking previous chars
|
||||
// Not implemented for simplicity, just preventing focus loss.
|
||||
} else {
|
||||
// Insert Tab
|
||||
// Use setRangeText to preserve browser undo buffer if mixed usage?
|
||||
// But we have custom undo.
|
||||
this.value = val.substring(0, start) + tabChar + val.substring(end);
|
||||
this.selectionStart = this.selectionEnd = start + tabChar.length;
|
||||
saveState();
|
||||
updatePreview();
|
||||
}
|
||||
}
|
||||
|
||||
// Enter: Auto-indent checking previous line
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
const start = this.selectionStart;
|
||||
const end = this.selectionEnd;
|
||||
const val = this.value;
|
||||
|
||||
// Find start of current line
|
||||
const lineStart = val.lastIndexOf('\n', start - 1) + 1;
|
||||
const currentLine = val.substring(lineStart, start);
|
||||
|
||||
// Calculate indentation
|
||||
const match = currentLine.match(/^\s*/);
|
||||
const indent = match ? match[0] : '';
|
||||
|
||||
const insert = '\n' + indent;
|
||||
|
||||
this.value = val.substring(0, start) + insert + val.substring(end);
|
||||
this.selectionStart = this.selectionEnd = start + insert.length;
|
||||
|
||||
saveState(); // Immediate save on Enter
|
||||
updatePreview();
|
||||
}
|
||||
});
|
||||
|
||||
function undo() {
|
||||
if (historyStack.length > 1) { // Keep initial state
|
||||
const current = historyStack.pop();
|
||||
redoStack.push(current);
|
||||
|
||||
const prev = historyStack[historyStack.length - 1];
|
||||
editor.value = prev.value;
|
||||
editor.selectionStart = prev.selectionStart;
|
||||
editor.selectionEnd = prev.selectionEnd;
|
||||
updatePreview();
|
||||
}
|
||||
}
|
||||
|
||||
function redo() {
|
||||
if (redoStack.length > 0) {
|
||||
const next = redoStack.pop();
|
||||
historyStack.push(next);
|
||||
|
||||
editor.value = next.value;
|
||||
editor.selectionStart = next.selectionStart;
|
||||
editor.selectionEnd = next.selectionEnd;
|
||||
updatePreview();
|
||||
}
|
||||
}
|
||||
|
||||
function insertVar(text) {
|
||||
saveState(); // Save state before insertion
|
||||
|
||||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
const val = editor.value;
|
||||
editor.value = val.substring(0, start) + text + val.substring(end);
|
||||
editor.selectionStart = editor.selectionEnd = start + text.length;
|
||||
editor.focus();
|
||||
|
||||
saveState(); // Save state after insertion
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
// Live Preview Logic
|
||||
|
||||
// Inject Logo Map from PHP
|
||||
const logoMap = <?= json_encode($logoMap ?? []) ?>;
|
||||
|
||||
// Sample Data for Preview
|
||||
const sampleData = {
|
||||
'{{username}}': 'user123',
|
||||
'{{password}}': 'pass789',
|
||||
'{{price}}': 'Rp 5.000',
|
||||
'{{validity}}': ' 3 Hours',
|
||||
'{{timelimit}}': ' 3 Hours',
|
||||
'{{datalimit}}': '500 MB',
|
||||
'{{profile}}': 'General',
|
||||
'{{comment}}': 'mikhmon',
|
||||
'{{hotspotname}}': 'Mikhmon Hotspot',
|
||||
'{{num}}': '1',
|
||||
'{{logo}}': '<img src="/assets/img/logo.png" style="height:30px;border:0;">', // Default placeholder
|
||||
'{{dns_name}}': 'hotspot.mikhmon',
|
||||
'{{login_url}}': 'http://hotspot.mikhmon/login',
|
||||
};
|
||||
|
||||
function updatePreview() {
|
||||
let content = editor.value;
|
||||
|
||||
// 1. Handle {{logo id=...}}
|
||||
content = content.replace(/\{\{logo\s+id=['"]?([^'"\s]+)['"]?\}\}/gi, (match, id) => {
|
||||
if (logoMap[id]) {
|
||||
return `<img src="${logoMap[id]}" style="height:50px; width:auto;">`;
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 2. Simple Replace for other variables
|
||||
for (const [key, value] of Object.entries(sampleData)) {
|
||||
content = content.replaceAll(key, value);
|
||||
}
|
||||
|
||||
// 3. Handle QR Code - Local Generation with Attributes
|
||||
content = content.replace(/\{\{qrcode(?:\s+(.*?))?\}\}/gi, (match, attrs) => {
|
||||
const qrValue = sampleData['{{login_url}}'] + '?user=' + sampleData['{{username}}'] + '&password=' + sampleData['{{password}}'];
|
||||
|
||||
let opts = {
|
||||
value: qrValue,
|
||||
size: 100,
|
||||
foreground: 'black',
|
||||
};
|
||||
|
||||
let roundedStyle = '';
|
||||
|
||||
// Default styling options
|
||||
let styleOpts = {
|
||||
padding: 0,
|
||||
background: 'white',
|
||||
logo: null
|
||||
};
|
||||
|
||||
opts.backgroundAlpha = 0;
|
||||
|
||||
if (attrs) {
|
||||
const fgMatch = attrs.match(/fg\s*=\s*['"]?([^'"\s]+)['"]?/i);
|
||||
if (fgMatch) opts.foreground = fgMatch[1];
|
||||
|
||||
const bgMatch = attrs.match(/bg\s*=\s*['"]?([^'"\s]+)['"]?/i);
|
||||
if (bgMatch) styleOpts.background = bgMatch[1];
|
||||
|
||||
const sizeMatch = attrs.match(/size\s*=\s*['"]?(\d+)['"]?/i);
|
||||
if (sizeMatch) opts.size = parseInt(sizeMatch[1]);
|
||||
|
||||
const paddingMatch = attrs.match(/padding\s*=\s*['"]?(\d+)['"]?/i);
|
||||
if (paddingMatch) styleOpts.padding = parseInt(paddingMatch[1]);
|
||||
|
||||
const roundedMatch = attrs.match(/rounded\s*=\s*['"]?(\d+)['"]?/i);
|
||||
if (roundedMatch) roundedStyle = `border-radius: ${roundedMatch[1]}px;`;
|
||||
|
||||
const logoMatch = attrs.match(/logo\s*=\s*['"]?([^'"\s]+)['"]?/i);
|
||||
if (logoMatch) styleOpts.logo = logoMatch[1];
|
||||
}
|
||||
|
||||
const qr = new QRious(opts);
|
||||
const qrDataUrl = qr.toDataURL();
|
||||
|
||||
// Construct compound style
|
||||
const cssBg = `background-color: ${styleOpts.background};`;
|
||||
const cssPadding = styleOpts.padding ? `padding: ${styleOpts.padding}px;` : '';
|
||||
const baseStyle = `display: inline-block; vertical-align: middle; ${cssBg} ${cssPadding} ${roundedStyle}`;
|
||||
|
||||
// If Logo requested, we need Canvas manipulation.
|
||||
if (styleOpts.logo && logoMap[styleOpts.logo]) {
|
||||
// Create a canvas (not added to DOM) to draw composite
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const size = opts.size;
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
|
||||
// Since QRious gives dataURL, we need to load it back
|
||||
// But wait, this is synchronous preview. Loading image is async.
|
||||
// We can return a placeholder or handle async?
|
||||
// Simple hack: Return an IMG with a unique class, script loads it?
|
||||
// Or better: Just render the QR + Logo overlay using CSS absolute positioning?
|
||||
// Print view uses Canvas. Live Preview uses innerHTML.
|
||||
// CSS Overlay is easiest for preview, but Print View logic uses Canvas-drawing.
|
||||
// Let's stick to Canvas drawing for 1:1 fidelity, BUT we need async handling.
|
||||
// We can use a unique ID + script injection like print view?
|
||||
// Yes, let's replicate print view logic.
|
||||
|
||||
const uniqueId = 'preview-qr-' + Math.random().toString(36).substr(2, 9);
|
||||
const logoPath = logoMap[styleOpts.logo];
|
||||
|
||||
// Generate Script to execute after insertion
|
||||
// We need to delay execution until element exists.
|
||||
// Note: innerHTML scripts don't run automatically in all contexts, but updatePreview sets innerHTML.
|
||||
// Scripts inserted via innerHTML do NOT execute.
|
||||
// We need another way or just CSS overlay for preview.
|
||||
|
||||
// CSS Overlay Approach for Preview (Simpler/Faster)
|
||||
// <div style="position:relative; ...">
|
||||
// <img src="QR">
|
||||
// <img src="LOGO" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20%;">
|
||||
// </div>
|
||||
|
||||
return `<div style="position:relative; ${baseStyle}">
|
||||
<img src="${qrDataUrl}" style="display:block;">
|
||||
<img src="${logoPath}" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20%; height:auto;">
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return '<img src="' + qrDataUrl + '" alt="QR Code" style="' + baseStyle + '">';
|
||||
});
|
||||
|
||||
preview.innerHTML = content;
|
||||
}
|
||||
|
||||
editor.addEventListener('input', updatePreview); // Handled by debouncer above too, but OK.
|
||||
|
||||
// Init
|
||||
updatePreview();
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
181
app/Views/settings/templates/index.php
Normal file
181
app/Views/settings/templates/index.php
Normal file
@@ -0,0 +1,181 @@
|
||||
<?php
|
||||
$title = "Voucher Templates";
|
||||
$no_main_container = true;
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<!-- Sub-Navbar Navigation -->
|
||||
<?php include ROOT . '/app/Views/layouts/sidebar_settings.php'; ?>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-grow w-full flex flex-col">
|
||||
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold tracking-tight" data-i18n="settings.templates_title">Voucher Templates</h1>
|
||||
<p class="text-accents-5 mt-2" data-i18n="settings.templates_subtitle">Manage and customize your voucher print designs.</p>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="mt-8 flex-1 min-w-0" id="settings-content-area">
|
||||
<div class="space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between border-b border-accents-2 pb-5 gap-4">
|
||||
<div class="hidden md:block">
|
||||
<!-- Spacer -->
|
||||
</div>
|
||||
<a href="/settings/templates/add" class="btn btn-primary w-full sm:w-auto justify-center">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i>
|
||||
<span data-i18n="settings.new_template">New Template</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Template List -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Default Template Card (Read Only) -->
|
||||
<div class="border border-accents-2 rounded-xl overflow-hidden bg-background flex flex-col h-full">
|
||||
<div class="aspect-video bg-accents-1 border-b border-accents-2 w-full h-full relative overflow-hidden flex items-center justify-center group">
|
||||
<!-- Loading Overlay -->
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-accents-1 z-10 transition-opacity duration-500 pointer-events-none input-overlay">
|
||||
<i data-lucide="loader-2" class="w-6 h-6 animate-spin text-accents-4"></i>
|
||||
</div>
|
||||
<iframe
|
||||
data-src="/settings/templates/preview/default"
|
||||
src="about:blank"
|
||||
class="w-full h-full border-0 pointer-events-none opacity-0 transition-opacity duration-500"
|
||||
scrolling="no"
|
||||
></iframe>
|
||||
</div>
|
||||
<div class="p-4 flex flex-col flex-grow">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="font-bold text-foreground" data-i18n="settings.default_template">Default Template</h3>
|
||||
<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-accents-2 text-foreground" data-i18n="settings.system_label">System</span>
|
||||
</div>
|
||||
<p class="text-sm text-accents-5 mb-4" data-i18n="settings.default_template_desc">Standard thermal printer friendly template.</p>
|
||||
<button disabled class="w-full py-2 border border-accents-2 rounded text-accents-4 text-sm cursor-not-allowed mt-auto" data-i18n="settings.built_in">
|
||||
Built-in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($templates)): ?>
|
||||
<?php foreach ($templates as $tpl): ?>
|
||||
<div class="border border-accents-2 rounded-xl overflow-hidden bg-background hover:shadow-sm transition-shadow flex flex-col h-full">
|
||||
<div class="aspect-video bg-white relative group overflow-hidden">
|
||||
<?php if (!empty($tpl['content'])): ?>
|
||||
<div class="w-full h-full bg-accents-1 relative overflow-hidden flex items-center justify-center group">
|
||||
<!-- Loading Overlay -->
|
||||
<div class="absolute inset-0 flex items-center justify-center bg-accents-1 z-10 transition-opacity duration-500 pointer-events-none input-overlay">
|
||||
<i data-lucide="loader-2" class="w-6 h-6 animate-spin text-accents-4"></i>
|
||||
</div>
|
||||
<iframe
|
||||
data-src="/settings/templates/preview/<?= $tpl['id'] ?>"
|
||||
src="about:blank"
|
||||
class="w-full h-full border-0 pointer-events-none opacity-0 transition-opacity duration-500"
|
||||
scrolling="no"
|
||||
></iframe>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<!-- Placeholder for Preview Thumb -->
|
||||
<div class="absolute inset-0 flex items-center justify-center text-accents-3 bg-accents-1">
|
||||
<i data-lucide="file-code" class="w-8 h-8 opacity-50"></i>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="p-4 flex flex-col flex-grow">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="font-bold text-foreground"><?= htmlspecialchars($tpl['name']) ?></h3>
|
||||
<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400" data-i18n="settings.custom_label">Custom</span>
|
||||
</div>
|
||||
<p class="text-sm text-accents-5 mb-4 line-clamp-1">Created: <?= htmlspecialchars($tpl['created_at']) ?></p>
|
||||
|
||||
<div class="flex items-center gap-2 mt-auto">
|
||||
<a href="/settings/templates/edit/<?= $tpl['id'] ?>" class="flex-1 btn btn-primary flex justify-center">
|
||||
<i data-lucide="edit-3" class="w-4 h-4 mr-2"></i> <span data-i18n="common.edit">Edit</span>
|
||||
</a>
|
||||
<form action="/settings/templates/delete" method="POST" class="delete-template-form">
|
||||
<input type="hidden" name="id" value="<?= $tpl['id'] ?>">
|
||||
<input type="hidden" name="template_name" value="<?= htmlspecialchars($tpl['name']) ?>">
|
||||
<button type="submit" class="p-2 btn btn-secondary hover:text-red-600 hover:bg-red-50 transition-colors h-9 w-9 flex items-center justify-center">
|
||||
<i data-lucide="trash-2" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div> <!-- End Space-y-6 -->
|
||||
</div> <!-- End Content Area -->
|
||||
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Intercept Template Deletion
|
||||
const deleteForms = document.querySelectorAll('.delete-template-form');
|
||||
deleteForms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const templateName = this.querySelector('input[name="template_name"]').value;
|
||||
Mivo.confirm(
|
||||
window.i18n ? window.i18n.t('settings.delete_template_title') : 'Delete Template?',
|
||||
window.i18n ? window.i18n.t('settings.delete_template_confirm', {name: templateName}) : `Are you sure you want to delete <strong>${templateName}</strong>?`,
|
||||
window.i18n ? window.i18n.t('common.delete') : 'Yes, Delete',
|
||||
window.i18n ? window.i18n.t('common.cancel') : 'Cancel'
|
||||
).then((result) => {
|
||||
if (result) {
|
||||
this.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const queue = [];
|
||||
let activeRequests = 0;
|
||||
const CONCURRENCY_LIMIT = 3; // "Threads"
|
||||
|
||||
const processQueue = () => {
|
||||
// Fill up to the limit
|
||||
while (activeRequests < CONCURRENCY_LIMIT && queue.length > 0) {
|
||||
const iframe = queue.shift();
|
||||
activeRequests++;
|
||||
|
||||
// Set src to trigger load
|
||||
iframe.src = iframe.dataset.src;
|
||||
|
||||
// On load (or error), fade in and process next slot
|
||||
const onComplete = () => {
|
||||
iframe.classList.remove('opacity-0');
|
||||
if(iframe.previousElementSibling && iframe.previousElementSibling.classList.contains('input-overlay')) {
|
||||
iframe.previousElementSibling.classList.add('opacity-0');
|
||||
}
|
||||
activeRequests--;
|
||||
setTimeout(processQueue, 50); // Small delay
|
||||
};
|
||||
|
||||
iframe.onload = onComplete;
|
||||
iframe.onerror = onComplete;
|
||||
}
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const iframe = entry.target;
|
||||
// Only queue if it hasn't started loading (src is blank) and isn't already queued
|
||||
if (iframe.getAttribute('src') === 'about:blank' && !iframe.classList.contains('queued')) {
|
||||
iframe.classList.add('queued');
|
||||
queue.push(iframe);
|
||||
processQueue();
|
||||
}
|
||||
}
|
||||
});
|
||||
}, { rootMargin: '200px' }); // Preload ahead slightly
|
||||
|
||||
document.querySelectorAll('iframe[data-src]').forEach(iframe => {
|
||||
observer.observe(iframe);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
270
app/Views/status/active.php
Normal file
270
app/Views/status/active.php
Normal file
@@ -0,0 +1,270 @@
|
||||
<?php
|
||||
$title = "Active Users";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Filter Data
|
||||
$uniqueServers = [];
|
||||
if (!empty($items)) {
|
||||
foreach ($items as $item) {
|
||||
$s = $item['server'] ?? '';
|
||||
if(!empty($s)) $uniqueServers[$s] = $s;
|
||||
}
|
||||
}
|
||||
sort($uniqueServers);
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_active.title">Active Users</h1>
|
||||
<p class="text-accents-5"><span data-i18n="hotspot_active.subtitle">Monitor currently active hotspot sessions</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
|
||||
</a>
|
||||
<a href="/<?= htmlspecialchars($session) ?>/hotspot/users" class="btn btn-secondary">
|
||||
<i data-lucide="users" class="w-4 h-4 mr-2"></i> <span data-i18n="hotspot_menu.users">Users List</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-64">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search user, mac, ip...">
|
||||
</div>
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-40">
|
||||
<select id="filter-server" class="custom-select" data-search="true">
|
||||
<option value="" data-i18n="hotspot_active.filter_server">All Servers</option>
|
||||
<?php foreach($uniqueServers as $s): ?>
|
||||
<option value="<?= htmlspecialchars($s) ?>"><?= htmlspecialchars($s) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="active-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="server" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_active.server">Server</th>
|
||||
<th data-sort="user" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_active.user">User</th>
|
||||
<th data-i18n="hotspot_active.address">Address / MAC</th>
|
||||
<th data-i18n="hotspot_active.uptime">Uptime / Left</th>
|
||||
<th data-i18n="hotspot_active.bytes_in_out">Bytes In/Out</th>
|
||||
<th class="relative text-right" data-i18n="common.actions">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($items)): ?>
|
||||
<?php foreach ($items as $item): ?>
|
||||
<tr class="table-row-item"
|
||||
data-server="<?= htmlspecialchars($item['server'] ?? '') ?>"
|
||||
data-user="<?= strtolower($item['user'] ?? '') ?>"
|
||||
data-address="<?= htmlspecialchars($item['address'] ?? '') ?>"
|
||||
data-mac="<?= strtolower($item['mac-address'] ?? '') ?>">
|
||||
|
||||
<td>
|
||||
<span class="text-sm font-medium text-foreground"><?= htmlspecialchars($item['server'] ?? '-') ?></span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<div class="h-8 w-8 rounded bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-xs font-bold mr-3 text-green-700 dark:text-green-400">
|
||||
<i data-lucide="wifi" class="w-4 h-4"></i>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-foreground"><?= htmlspecialchars($item['user'] ?? '-') ?></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= htmlspecialchars($item['address'] ?? '-') ?></div>
|
||||
<div class="text-xs text-accents-5 font-mono"><?= htmlspecialchars($item['mac-address'] ?? '-') ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= \App\Helpers\FormatHelper::elapsedTime($item['uptime'] ?? '0s') ?></div>
|
||||
<?php if(isset($item['session-time-left'])): ?>
|
||||
<div class="text-xs text-accents-5"><span data-i18n="hotspot_active.time_left">Left</span>: <?= \App\Helpers\FormatHelper::elapsedTime($item['session-time-left']) ?></div>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-xs text-accents-5 flex flex-col gap-1">
|
||||
<span class="flex items-center"><i data-lucide="arrow-down" class="w-3 h-3 mr-1 text-green-500"></i> <?= \App\Helpers\FormatHelper::formatBytes($item['bytes-in'] ?? 0) ?></span>
|
||||
<span class="flex items-center"><i data-lucide="arrow-up" class="w-3 h-3 mr-1 text-blue-500"></i> <?= \App\Helpers\FormatHelper::formatBytes($item['bytes-out'] ?? 0) ?></span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex items-center justify-end">
|
||||
<form action="/<?= htmlspecialchars($session) ?>/hotspot/active/remove" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('hotspot_active.remove') : 'Disconnect User?', window.i18n ? window.i18n.t('common.confirm_delete') : 'Are you sure you want to disconnect user <?= htmlspecialchars($item['user'] ?? '') ?>?', window.i18n ? window.i18n.t('hotspot_active.remove') : 'Disconnect', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="session" value="<?= htmlspecialchars($session) ?>">
|
||||
<input type="hidden" name="id" value="<?= $item['.id'] ?>">
|
||||
<button type="submit" class="btn bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-900/20 dark:hover:bg-red-900/40 border-transparent h-8 px-2 rounded transition-colors" title="Disconnect">
|
||||
<i data-lucide="x-circle" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> active
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '', server: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
document.getElementById('filter-server').addEventListener('change', (e) => {
|
||||
this.filters.server = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const svr = row.dataset.server || '';
|
||||
const user = row.dataset.user || '';
|
||||
const mac = row.dataset.mac || '';
|
||||
const addr = row.dataset.address || '';
|
||||
|
||||
if (this.filters.server && svr !== this.filters.server) return false;
|
||||
if (this.filters.search) {
|
||||
if (!user.includes(this.filters.search) && !mac.includes(this.filters.search) && !addr.includes(this.filters.search)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible, or reconstruct
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) container.innerHTML = text; // This replaces the span structure, need to be careful
|
||||
// Actually, the structure is "Showing <span>..</span> to <span>..</span>".
|
||||
// Our translation string is "Showing {start} to {end} of {total} active"
|
||||
// So we can just replace the whole innerHTML of the container
|
||||
if(container) {
|
||||
// Re-render with spans for consistent styling if needed, or just text
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(s => new CustomSelect(s));
|
||||
}
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
241
app/Views/status/hosts.php
Normal file
241
app/Views/status/hosts.php
Normal file
@@ -0,0 +1,241 @@
|
||||
<?php
|
||||
$title = "Hotspot Hosts";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
|
||||
// Filter Data
|
||||
$uniqueServers = [];
|
||||
if (!empty($items)) {
|
||||
foreach ($items as $item) {
|
||||
$s = $item['server'] ?? '';
|
||||
if(!empty($s)) $uniqueServers[$s] = $s;
|
||||
}
|
||||
}
|
||||
sort($uniqueServers);
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="hotspot_hosts.title">Hotspot Hosts</h1>
|
||||
<p class="text-accents-5"><span data-i18n="hotspot_hosts.subtitle">Devices connected to the hotspot network for:</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a href="/<?= htmlspecialchars($session) ?>/dashboard" class="btn btn-secondary">
|
||||
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i> <span data-i18n="common.dashboard">Dashboard</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="relative w-full md:w-64">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i data-lucide="search" class="h-4 w-4 text-accents-5"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input pl-10 w-full" placeholder="Search mac, ip, comment...">
|
||||
</div>
|
||||
<!-- Dropdowns -->
|
||||
<div class="flex gap-2 w-full md:w-auto">
|
||||
<div class="w-40">
|
||||
<select id="filter-server" class="custom-select" data-search="true">
|
||||
<option value="" data-i18n="hotspot_active.filter_server">All Servers</option>
|
||||
<?php foreach($uniqueServers as $s): ?>
|
||||
<option value="<?= htmlspecialchars($s) ?>"><?= htmlspecialchars($s) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="hosts-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-i18n="hotspot_hosts.mac">MAC Address</th>
|
||||
<th data-i18n="hotspot_hosts.address">Address</th>
|
||||
<th data-i18n="hotspot_hosts.to_address">To Address</th>
|
||||
<th data-sort="server" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_hosts.server">Server</th>
|
||||
<th data-sort="comment" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="hotspot_hosts.comment">Comment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($items)): ?>
|
||||
<?php foreach ($items as $item): ?>
|
||||
<tr class="table-row-item"
|
||||
data-server="<?= htmlspecialchars($item['server'] ?? '') ?>"
|
||||
data-mac="<?= strtolower($item['mac-address'] ?? '') ?>"
|
||||
data-address="<?= htmlspecialchars($item['address'] ?? '') ?>"
|
||||
data-comment="<?= strtolower($item['comment'] ?? '') ?>">
|
||||
|
||||
<td>
|
||||
<div class="flex items-center">
|
||||
<i data-lucide="smartphone" class="w-4 h-4 mr-2 text-accents-4"></i>
|
||||
<span class="font-mono text-sm text-foreground"><?= htmlspecialchars($item['mac-address'] ?? '-') ?></span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= htmlspecialchars($item['address'] ?? '-') ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-foreground"><?= htmlspecialchars($item['to-address'] ?? '-') ?></div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-accents-2 text-accents-6">
|
||||
<?= htmlspecialchars($item['server'] ?? '-') ?>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-sm text-accents-5 italic"><?= htmlspecialchars($item['comment'] ?? '-') ?></div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> hosts
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '', server: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
document.getElementById('filter-server').addEventListener('change', (e) => {
|
||||
this.filters.server = e.target.value;
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const svr = row.dataset.server || '';
|
||||
const mac = row.dataset.mac || '';
|
||||
const addr = row.dataset.address || '';
|
||||
const cmt = row.dataset.comment || '';
|
||||
|
||||
if (this.filters.server && svr !== this.filters.server) return false;
|
||||
if (this.filters.search) {
|
||||
if (!mac.includes(this.filters.search) && !addr.includes(this.filters.search) && !cmt.includes(this.filters.search)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (typeof CustomSelect !== 'undefined') {
|
||||
document.querySelectorAll('.custom-select').forEach(s => new CustomSelect(s));
|
||||
}
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
354
app/Views/system/scheduler.php
Normal file
354
app/Views/system/scheduler.php
Normal file
@@ -0,0 +1,354 @@
|
||||
<?php
|
||||
$title = "Scheduler";
|
||||
require_once ROOT . '/app/Views/layouts/header_main.php';
|
||||
?>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight" data-i18n="system_menu.scheduler">Scheduler</h1>
|
||||
<p class="text-accents-5"><span data-i18n="system_tools.scheduler_subtitle">Manage RouterOS automated tasks for:</span> <span class="text-foreground font-medium"><?= htmlspecialchars($session) ?></span></p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button onclick="location.reload()" class="btn btn-secondary">
|
||||
<i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i> <span data-i18n="reports.refresh">Refresh</span>
|
||||
</button>
|
||||
<button onclick="openModal('addModal')" class="btn btn-primary">
|
||||
<i data-lucide="plus" class="w-4 h-4 mr-2"></i> <span data-i18n="system_tools.add_task">Add Task</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (isset($error) && $error): ?>
|
||||
<div class="bg-red-50 text-red-600 p-4 rounded-lg mb-6 flex items-center">
|
||||
<i data-lucide="alert-circle" class="w-5 h-5 mr-3"></i>
|
||||
<?= htmlspecialchars($error) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Filter Bar -->
|
||||
<div class="flex flex-col md:flex-row gap-4 justify-between items-center">
|
||||
<!-- Search -->
|
||||
<div class="input-group md:w-64 z-10">
|
||||
<div class="input-icon">
|
||||
<i data-lucide="search" class="h-4 w-4"></i>
|
||||
</div>
|
||||
<input type="text" id="global-search" class="form-input-search w-full" placeholder="Search task name..." data-i18n-placeholder="common.table.search_placeholder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table-glass" id="scheduler-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-sort="name" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="system_tools.table_name">Name</th>
|
||||
<th data-i18n="system_tools.interval">Interval</th>
|
||||
<th data-i18n="system_tools.next_run">Next Run</th>
|
||||
<th data-sort="status" class="sortable cursor-pointer hover:text-foreground select-none" data-i18n="system_tools.status">Status</th>
|
||||
<th class="text-right" data-i18n="common.actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<?php if (!empty($schedulers) && is_array($schedulers)): ?>
|
||||
<?php foreach ($schedulers as $task):
|
||||
$status = ($task['disabled'] === 'true') ? 'disabled' : 'enabled';
|
||||
?>
|
||||
<tr class="table-row-item"
|
||||
data-name="<?= strtolower($task['name']) ?>"
|
||||
data-status="<?= $status ?>">
|
||||
|
||||
<td>
|
||||
<div class="text-sm font-medium text-foreground"><?= htmlspecialchars($task['name']) ?></div>
|
||||
<div class="text-xs text-accents-5 truncate max-w-[200px]"><?= htmlspecialchars($task['on-event']) ?></div>
|
||||
</td>
|
||||
<td class="text-sm text-accents-5"><?= htmlspecialchars($task['interval']) ?></td>
|
||||
<td class="text-sm text-accents-5"><?= htmlspecialchars($task['next-run'] ?? '-') ?></td>
|
||||
<td>
|
||||
<?php if ($task['disabled'] === 'true'): ?>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-accents-2 text-accents-5" data-i18n="system_tools.disabled">Disabled</span>
|
||||
<?php else: ?>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" data-i18n="system_tools.enabled">Enabled</span>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td class="text-right text-sm font-medium">
|
||||
<div class="flex items-center justify-end gap-2 table-actions-reveal">
|
||||
<button onclick="editTask(<?= htmlspecialchars(json_encode($task)) ?>)" class="btn-icon" title="Edit">
|
||||
<i data-lucide="edit-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<form action="/<?= $session ?>/system/scheduler/delete" method="POST" onsubmit="event.preventDefault(); Mivo.confirm(window.i18n ? window.i18n.t('system_tools.delete_task') : 'Delete Task?', window.i18n ? window.i18n.t('common.confirm_delete') : 'Are you sure you want to delete task <?= htmlspecialchars($task['name']) ?>?', window.i18n ? window.i18n.t('common.delete') : 'Delete', window.i18n ? window.i18n.t('common.cancel') : 'Cancel').then(res => { if(res) this.submit(); });" class="inline">
|
||||
<input type="hidden" name="id" value="<?= $task['.id'] ?>">
|
||||
<button type="submit" class="btn-icon-danger" title="Delete">
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-white/10 flex items-center justify-between" id="pagination-controls">
|
||||
<div class="text-sm text-accents-5">
|
||||
Showing <span id="start-idx" class="font-medium text-foreground">0</span> to <span id="end-idx" class="font-medium text-foreground">0</span> of <span id="total-count" class="font-medium text-foreground">0</span> tasks
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button id="prev-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.previous">Previous</button>
|
||||
<div id="page-numbers" class="flex gap-1"></div>
|
||||
<button id="next-btn" class="btn btn-sm btn-secondary" disabled data-i18n="common.next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Modal -->
|
||||
<div id="addModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('addModal')"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
|
||||
<div class="card shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold" data-i18n="system_tools.add_title">Add Scheduler Task</h3>
|
||||
<button onclick="closeModal('addModal')" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form action="/<?= $session ?>/system/scheduler/store" method="POST" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.name">Name</label>
|
||||
<input type="text" name="name" class="form-control" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.interval">Interval</label>
|
||||
<input type="text" name="interval" class="form-control" value="1d 00:00:00" placeholder="1d 00:00:00">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_date">Start Date</label>
|
||||
<input type="text" name="start_date" class="form-control" value="Jan/01/1970">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_time">Start Time</label>
|
||||
<input type="text" name="start_time" class="form-control" value="00:00:00">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.on_event">On Event (Script)</label>
|
||||
<textarea name="on_event" class="form-control font-mono text-xs h-24" placeholder="/system reboot"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.comment">Comment</label>
|
||||
<input type="text" name="comment" class="form-control">
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button" onclick="closeModal('addModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="system_tools.save_task">Save Task</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Modal -->
|
||||
<div id="editModal" class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300" role="dialog" aria-modal="true">
|
||||
<div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300" onclick="closeModal('editModal')"></div>
|
||||
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg transition-all duration-300 scale-95 opacity-0 modal-content">
|
||||
<div class="card shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-lg font-bold" data-i18n="system_tools.edit_title">Edit Scheduler Task</h3>
|
||||
<button onclick="closeModal('editModal')" class="text-accents-5 hover:text-foreground">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form action="/<?= $session ?>/system/scheduler/update" method="POST" class="space-y-4">
|
||||
<input type="hidden" name="id" id="edit_id">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.name">Name</label>
|
||||
<input type="text" name="name" id="edit_name" class="form-control" required>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.interval">Interval</label>
|
||||
<input type="text" name="interval" id="edit_interval" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_date">Start Date</label>
|
||||
<input type="text" name="start_date" id="edit_start_date" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.start_time">Start Time</label>
|
||||
<input type="text" name="start_time" id="edit_start_time" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.on_event">On Event (Script)</label>
|
||||
<textarea name="on_event" id="edit_on_event" class="form-control font-mono text-xs h-24"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1" data-i18n="system_tools.comment">Comment</label>
|
||||
<input type="text" name="comment" id="edit_comment" class="form-control">
|
||||
</div>
|
||||
<div class="flex justify-end pt-4">
|
||||
<button type="button" onclick="closeModal('editModal')" class="btn btn-secondary mr-2" data-i18n="common.cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" data-i18n="system_tools.update_task">Update Task</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
class TableManager {
|
||||
constructor(rows, itemsPerPage = 10) {
|
||||
this.allRows = Array.from(rows);
|
||||
this.filteredRows = this.allRows;
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
this.currentPage = 1;
|
||||
|
||||
this.elements = {
|
||||
body: document.getElementById('table-body'),
|
||||
startIdx: document.getElementById('start-idx'),
|
||||
endIdx: document.getElementById('end-idx'),
|
||||
totalCount: document.getElementById('total-count'),
|
||||
prevBtn: document.getElementById('prev-btn'),
|
||||
nextBtn: document.getElementById('next-btn'),
|
||||
pageNumbers: document.getElementById('page-numbers')
|
||||
};
|
||||
|
||||
this.filters = { search: '' };
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
// Translate placeholder
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
document.getElementById('global-search').addEventListener('input', (e) => {
|
||||
this.filters.search = e.target.value.toLowerCase();
|
||||
this.currentPage = 1;
|
||||
this.update();
|
||||
});
|
||||
|
||||
this.elements.prevBtn.addEventListener('click', () => { if(this.currentPage > 1) { this.currentPage--; this.render(); } });
|
||||
this.elements.nextBtn.addEventListener('click', () => {
|
||||
const max = Math.ceil(this.filteredRows.length / this.itemsPerPage);
|
||||
if(this.currentPage < max) { this.currentPage++; this.render(); }
|
||||
});
|
||||
|
||||
this.update();
|
||||
|
||||
// Listen for language change
|
||||
window.addEventListener('languageChanged', () => {
|
||||
const searchInput = document.getElementById('global-search');
|
||||
if (searchInput && window.i18n) {
|
||||
searchInput.placeholder = window.i18n.t('common.table.search_placeholder');
|
||||
}
|
||||
this.render();
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.filteredRows = this.allRows.filter(row => {
|
||||
const name = row.dataset.name || '';
|
||||
|
||||
if (this.filters.search && !name.includes(this.filters.search)) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
const total = this.filteredRows.length;
|
||||
const maxPage = Math.ceil(total / this.itemsPerPage) || 1;
|
||||
if (this.currentPage > maxPage) this.currentPage = maxPage;
|
||||
|
||||
const start = (this.currentPage - 1) * this.itemsPerPage;
|
||||
const end = Math.min(start + this.itemsPerPage, total);
|
||||
|
||||
this.elements.startIdx.textContent = total === 0 ? 0 : start + 1;
|
||||
this.elements.endIdx.textContent = end;
|
||||
this.elements.totalCount.textContent = total;
|
||||
|
||||
// Update Text (Use Translation)
|
||||
if (window.i18n && document.getElementById('pagination-controls')) {
|
||||
const text = window.i18n.t('common.table.showing', {
|
||||
start: total === 0 ? 0 : start + 1,
|
||||
end: end,
|
||||
total: total
|
||||
});
|
||||
// Find and update the text node if possible
|
||||
const container = document.getElementById('pagination-controls').querySelector('.text-accents-5');
|
||||
if(container) {
|
||||
container.innerHTML = text.replace('{start}', `<span class="font-medium text-foreground">${total === 0 ? 0 : start + 1}</span>`)
|
||||
.replace('{end}', `<span class="font-medium text-foreground">${end}</span>`)
|
||||
.replace('{total}', `<span class="font-medium text-foreground">${total}</span>`);
|
||||
}
|
||||
}
|
||||
|
||||
this.elements.body.innerHTML = '';
|
||||
this.filteredRows.slice(start, end).forEach(row => this.elements.body.appendChild(row));
|
||||
|
||||
this.elements.prevBtn.disabled = this.currentPage === 1;
|
||||
this.elements.nextBtn.disabled = this.currentPage === maxPage || total === 0;
|
||||
|
||||
if (this.elements.pageNumbers) {
|
||||
const pageText = window.i18n ? window.i18n.t('common.page_of', {current: this.currentPage, total: maxPage}) : `Page ${this.currentPage} of ${maxPage}`;
|
||||
this.elements.pageNumbers.innerHTML = `<span class="px-3 py-1 text-sm font-medium bg-accents-2 rounded text-accents-6">${pageText}</span>`;
|
||||
}
|
||||
|
||||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
const content = modal.querySelector('.modal-content');
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
// Force reflow
|
||||
void modal.offsetWidth;
|
||||
|
||||
modal.classList.remove('opacity-0');
|
||||
content.classList.remove('scale-95', 'opacity-0');
|
||||
content.classList.add('scale-100', 'opacity-100');
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const modal = document.getElementById(id);
|
||||
const content = modal.querySelector('.modal-content');
|
||||
|
||||
modal.classList.add('opacity-0');
|
||||
content.classList.remove('scale-100', 'opacity-100');
|
||||
content.classList.add('scale-95', 'opacity-0');
|
||||
|
||||
setTimeout(() => {
|
||||
modal.classList.add('hidden');
|
||||
}, 300); // Match duration-300
|
||||
}
|
||||
|
||||
function editTask(task) {
|
||||
document.getElementById('edit_id').value = task['.id'];
|
||||
document.getElementById('edit_name').value = task['name'];
|
||||
document.getElementById('edit_interval').value = task['interval'];
|
||||
document.getElementById('edit_start_date').value = task['start-date'];
|
||||
document.getElementById('edit_start_time').value = task['start-time'];
|
||||
document.getElementById('edit_on_event').value = task['on-event'];
|
||||
document.getElementById('edit_comment').value = task['comment'] ?? '';
|
||||
|
||||
openModal('editModal');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new TableManager(document.querySelectorAll('.table-row-item'), 10);
|
||||
});
|
||||
</script>
|
||||
|
||||
<?php require_once ROOT . '/app/Views/layouts/footer_main.php'; ?>
|
||||
Reference in New Issue
Block a user