frontend actualizado y mejorado extremadamente

frontend/src/components/EventCard.js

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue';
+import htm from 'htm';
+const html = htm.bind(h);
+
+export default defineComponent({
+  name: 'EventCard',
+  props: { ev: { type: Object, required: true } },
+  setup(props) {
+    return () => {
+      const a = props.ev.attrs || {};
+      return html`<div class="card">
+        <div class="row">
+          <b>${props.ev.type}</b>
+          <span class="chip muted">${props.ev.ts}</span>
+          ${props.ev.decision ? html`<span class="chip">Decision: ${props.ev.decision}</span>` : ''}
+          ${props.ev.error ? html`<span class="chip" style="color:#b33">Error</span>` : ''}
+        </div>
+        <div class="muted" style="margin-top:6px; font-size:12px;">
+          ${a['User-Name'] || a['User-Name*0'] ? html`<span>User: ${a['User-Name'] || a['User-Name*0']}</span>` : ''}
+          ${a['NAS-IP-Address'] ? html`<span> — NAS: ${a['NAS-IP-Address']}</span>` : ''}
+          ${a['Calling-Station-Id'] ? html`<span> — STA: ${a['Calling-Station-Id']}</span>` : ''}
+        </div>
+      </div>`;
+    };
+  }
+});
+

frontend/src/components/Modal.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-if="open" class="modal-backdrop" @click.self="$emit('close')">
+    <div class="modal">
+      <div class="modal-header">
+        <strong>{{ title }}</strong>
+        <button class="icon-btn" @click="$emit('close')">Cerrar</button>
+      </div>
+      <div>
+        <slot />
+      </div>
+      <div class="modal-footer">
+        <slot name="footer">
+          <button class="icon-btn" @click="$emit('close')">OK</button>
+        </slot>
+      </div>
+    </div>
+  </div>
+  </template>
+
+<script setup>
+defineProps({ open: Boolean, title: String });
+defineEmits(['close']);
+</script>
+

frontend/src/components/UserCard.js

@@ -0,0 +1,25 @@
+import { defineComponent, h } from 'vue';
+import htm from 'htm';
+const html = htm.bind(h);
+
+export default defineComponent({
+  name: 'UserCard',
+  props: { item: { type: Object, required: true }, mode: { type: String, default: 'user' } },
+  emits: ['toggleDisable', 'remove'],
+  setup(props, { emit }) {
+    function toggle() { emit('toggleDisable', props.item); }
+    function remove() { emit('remove', props.item); }
+    return () => html`<div class="card">
+      <div class="row">
+        <b>${props.mode === 'user' ? props.item.username : (props.item.device || props.item.username)}</b>
+        <span class="chip">VLAN ${props.item.vlan}</span>
+        ${props.item.disabled ? html`<span class="chip" style="color:#b33">deshabilitado</span>` : html`<span class="chip">activo</span>`}
+        <span class="spacer"></span>
+        <button class="icon-btn" onClick=${toggle}>${props.item.disabled ? 'Habilitar' : 'Deshabilitar'}</button>
+        <button class="icon-btn" onClick=${remove}>Eliminar</button>
+      </div>
+      <div class="muted" style="margin-top:6px; font-size:12px;">${props.item.devices ? props.item.devices.length : 0} dispositivos</div>
+    </div>`;
+  }
+});
+