olivier
7b32e9b4fd
Add three new device types (21 total) with Lucide icons (Tv2, Printer, Smartphone), colour-coded badges, and translations in fr/en/es. No backend migration needed — type is a free string field. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
|
<!-- Simple Icons : logos des marques détectées (chips de topologie) -->
|
|
<span v-if="!typeOnly && brandIcons.length > 0" class="brand-icons">
|
|
<svg
|
|
v-for="icon in brandIcons"
|
|
:key="icon.title"
|
|
:width="size"
|
|
:height="size"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path :d="icon.path" />
|
|
</svg>
|
|
</span>
|
|
|
|
<!-- Lucide : icône générique par type -->
|
|
<component
|
|
v-else
|
|
:is="lucideIcon"
|
|
:size="size"
|
|
:stroke-width="1.75"
|
|
aria-hidden="true"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import {
|
|
Server, Network, Wifi, Database, Globe, GitFork,
|
|
Camera, Thermometer, Gauge, House, PlugZap, ShieldAlert,
|
|
Lightbulb, BellRing, Antenna, Monitor, Laptop, Tv2, Printer, Smartphone, Box,
|
|
} from 'lucide-vue-next'
|
|
import { detectBrands } from '../brandIcons.js'
|
|
|
|
const props = defineProps({
|
|
deviceType: { type: String, default: 'other' },
|
|
isGateway: { type: Boolean, default: false },
|
|
isLivebox: { type: Boolean, default: false },
|
|
name: { type: String, default: '' },
|
|
description: { type: String, default: '' },
|
|
size: { type: Number, default: 18 },
|
|
typeOnly: { type: Boolean, default: false },
|
|
})
|
|
|
|
const brandIcons = computed(() => detectBrands(props.name, props.description))
|
|
|
|
const LUCIDE_MAP = {
|
|
server: Server,
|
|
switch: Network,
|
|
router: Wifi,
|
|
nas: Database,
|
|
gateway: GitFork,
|
|
livebox: Globe,
|
|
camera: Camera,
|
|
temperature: Thermometer,
|
|
sensor: Gauge,
|
|
hub: House,
|
|
smart_plug: PlugZap,
|
|
alarm: ShieldAlert,
|
|
light: Lightbulb,
|
|
doorbell: BellRing,
|
|
access_point: Antenna,
|
|
desktop: Monitor,
|
|
laptop: Laptop,
|
|
smart_tv: Tv2,
|
|
printer: Printer,
|
|
smartphone: Smartphone,
|
|
other: Box,
|
|
}
|
|
|
|
const lucideIcon = computed(() => {
|
|
if (props.isLivebox) return Globe
|
|
if (props.isGateway) return GitFork
|
|
return LUCIDE_MAP[props.deviceType] || Box
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.brand-icons {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
</style>
|