nucleo000/radiusNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tablas y frontend visualizador de DB listo

Browse Source
This commit is contained in:
josedario87
2025-09-26 17:48:45 -06:00
parent 3fc25719f3
commit 44916b642b
9 changed files with 403 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/App.vue
View File

@@ -12,9 +12,14 @@
<button class="icon-btn" @click="openAddGuest">
<img class="icon" src="/icons/guest.svg" alt="invitado"> Invitado
</button>
<button class="icon-btn" @click="openSettings">
<img class="icon" src="/icons/settings.svg" alt="config"> Configuración
</button>
<div class="dropdown">
<button class="icon-btn" @click="toggleSettingsMenu">
<img class="icon" src="/icons/settings.svg" alt="config"> Configuración
</button>
<div v-if="showSettingsMenu" class="menu">
<button @click="openRawDb">ver rawDB</button>
</div>
</div>
</div>
</header>
@@ -55,24 +60,10 @@
</div>
</div>
<div class="scroll">
<<<<<<< HEAD
<div v-if="loading.users" class="muted">Cargando usuarios…</div>
<div v-else class="grid">
<UserCard v-for="u in filteredUsers" :key="u.username" :item="u" :mode="layoutMode"
@toggleDisable="toggleDisable" @remove="removeUser" @edit="openEditUser" />
=======
<form @submit.prevent="createUser" class="row" style="margin-bottom:10px;">
<input v-model="form.username" placeholder="usuario" required class="toggle"/>
<input v-model="form.password" placeholder="contraseña" required class="toggle"/>
<input v-model="form.vlan" placeholder="VLAN" class="toggle"/>
<label class="row toggle" style="gap:6px;"><input type="checkbox" v-model="form.disabled"/> deshabilitado</label>
<button type="submit" class="icon-btn">Crear / Actualizar</button>
</form>
<div v-if="loading.users" class="muted">Cargando usuarios…</div>
<div v-else class="grid">
<UserCard v-for="u in filteredUsers" :key="u.username" :item="u" :mode="layoutMode"
@toggleDisable="toggleDisable" @remove="removeUser" />
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
</div>
</div>
</main>
@@ -103,14 +94,15 @@
</select>
</div>
</Modal>
<<<<<<< HEAD
<Modal :open="showUserForm" :title="userFormMode==='edit' ? 'Editar usuario' : (userFormMode==='guest' ? 'Agregar invitado' : 'Agregar usuario')"
@close="showUserForm=false">
<UserForm :model-value="userFormModel" :mode="userFormMode" @submit="handleUserFormSubmit" @cancel="showUserForm=false" />
</Modal>
=======
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
<Modal :open="showRawDb" :fullscreen="rawDbFullscreen" title="Raw DB Viewer" @close="closeRawDb">
<RawDbViewer @toggle-fullscreen="rawDbFullscreen = !rawDbFullscreen" />
</Modal>
</template>
<script setup>
@@ -118,19 +110,13 @@ import { onMounted, reactive, ref, computed } from 'vue';
import EventCard from './components/EventCard.js';
import UserCard from './components/UserCard.js';
import Modal from './components/Modal.vue';
<<<<<<< HEAD
import UserForm from './components/UserForm.vue';
=======
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
import RawDbViewer from './components/RawDbViewer.vue';
const users = ref([]);
const requests = ref([]);
const loading = reactive({ users: false, requests: false });
<<<<<<< HEAD
// formulario inline removido: se usa modal con UserForm
=======
const form = reactive({ username: '', password: '', vlan: '', disabled: false });
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
const showEventFilters = ref(false);
const showUserFilters = ref(false);
@@ -141,6 +127,7 @@ const mainCollapsed = ref(false);
const layoutMode = ref('user');
const theme = ref(localStorage.getItem('theme') || 'dark');
const statusText = ref('OK');
const showSettingsMenu = ref(false);
async function fetchUsers() {
loading.users = true;
@@ -160,20 +147,6 @@ async function fetchRequests() {
} finally { loading.requests = false; }
}
<<<<<<< HEAD
=======
async function createUser() {
const payload = { ...form };
if (!payload.vlan) delete payload.vlan;
await fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
form.username = '';
form.password = '';
form.vlan = '';
form.disabled = false;
await fetchUsers();
}
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
async function toggleDisable(u) {
await fetch(`/api/users/${encodeURIComponent(u.username)}`, {
method: 'PATCH',
@@ -253,7 +226,6 @@ function applyTheme() {
document.documentElement.classList.toggle('light', theme.value === 'light');
}
<<<<<<< HEAD
const showUserForm = ref(false);
const userFormMode = ref('create'); // 'create' | 'edit' | 'guest'
const userFormModel = ref({ username:'', password:'', vlan:'', disabled:false });
@@ -268,7 +240,12 @@ function openAddGuest() {
userFormModel.value = { username:'', password:'', vlan:'5', disabled:false };
showUserForm.value = true;
}
function openSettings() { /* modal de configuración futura */ }
function toggleSettingsMenu() { showSettingsMenu.value = !showSettingsMenu.value; }
const showRawDb = ref(false);
const rawDbFullscreen = ref(false);
function openRawDb() { showSettingsMenu.value = false; showRawDb.value = true; }
function closeRawDb() { showRawDb.value = false; }
function openSettings() { showSettingsMenu.value = !showSettingsMenu.value; }
function openEditUser(u) {
userFormMode.value = 'edit';
userFormModel.value = { username: u.username, password: u.password || '', vlan: u.vlan || '', disabled: !!u.disabled };
@@ -286,9 +263,4 @@ async function handleUserFormSubmit(data) {
await fetchUsers();
showUserForm.value = false;
}
=======
function openAddUser() { /* placeholder for advanced modal */ }
function openAddGuest() { /* placeholder for advanced modal */ }
function openSettings() { /* placeholder for advanced modal */ }
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
</script>