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

UI/UX mejorados 5

Browse Source
This commit is contained in:
josedario87
2025-09-26 19:10:17 -06:00
parent 9848bd46f1
commit 0d4b0cbf67
6 changed files with 108 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/DispositivoCard.vue
View File

@@ -7,6 +7,7 @@
<span v-if="connectedCount>0 || connected" class="chip" style="background: rgba(255,127,187,.2); border-color: rgba(255,127,187,.5);">Conectado</span>
<span class="spacer"></span>
<button class="icon-btn" @click="$emit('edit', device)">Editar</button>
<button class="icon-btn" @click="$emit('disconnect', device)">Desconectar</button>
<button v-if="!simple" class="icon-btn" @click="$emit('toggleExpand')">{{ expanded ? 'Contraer' : 'Expandir' }}</button>
</div>
<div class="muted" style="font-size:12px; margin-top:6px;" v-if="device.nombre || device.descripcion">

6
frontend/src/components/UserCard.vue
View File

@@ -4,15 +4,17 @@
<b>{{ item.username }}</b>
<span class="chip">VLAN {{ item.vlan }}</span>
<span class="chip" :style="item.disabled ? 'color:#b33' : ''">{{ item.disabled ? 'deshabilitado' : 'activo' }}</span>
<span v-if="hasConnected" class="chip" style="background: rgba(255,127,187,.2); border-color: rgba(255,127,187,.5);">Conectado</span>
<span class="spacer"></span>
<button class="icon-btn" @click="$emit('edit', item)">Editar</button>
<button class="icon-btn" @click="$emit('disconnect', item)">Desconectar</button>
<button class="icon-btn" @click="$emit('toggleDisable', item)">{{ item.disabled ? 'Habilitar' : 'Deshabilitar' }}</button>
<button class="icon-btn" @click="$emit('remove', item)">Eliminar</button>
<button v-if="expandable" class="icon-btn" @click="$emit('toggleExpand')">{{ expanded ? 'Contraer' : 'Expandir' }}</button>
</div>
<div v-if="expanded && deviceList.length" style="margin-top:8px;">
<div class="grid">
<DispositivoCard v-for="d in deviceList" :key="d.id" :device="d" :connected="isConnected(d.id)" simple />
<DispositivoCard v-for="d in deviceList" :key="d.id" :device="d" :connected="isConnected(d.id)" simple @edit="$emit('editDevice', d)" />
</div>
</div>
</div>
@@ -37,4 +39,6 @@ const deviceList = computed(() => {
function isConnected(id) {
return Array.isArray(props.item.dispositivos_conectados) && props.item.dispositivos_conectados.includes(id);
}
const hasConnected = computed(() => Array.isArray(props.item.dispositivos_conectados) && props.item.dispositivos_conectados.length > 0);
</script>