add node icon to search results

This commit is contained in:
liamcottle
2024-09-04 12:32:17 +12:00
parent 7f05a68627
commit 17cd661c6a
2 changed files with 13 additions and 10 deletions

View File

@ -202,16 +202,19 @@
<div v-if="searchText !== ''" class="absolute z-search bg-white w-full border border-gray-200 rounded-lg shadow-md mt-1 overflow-y-scroll max-h-80 divide-y divide-gray-200"> <div v-if="searchText !== ''" class="absolute z-search bg-white w-full border border-gray-200 rounded-lg shadow-md mt-1 overflow-y-scroll max-h-80 divide-y divide-gray-200">
<template v-if="searchedNodes.length > 0"> <template v-if="searchedNodes.length > 0">
<div @click="onSearchResultNodeClick(node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
<div @click="onSearchResultNodeClick(node)" class="p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes"> <div>
<div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div> <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(node.node_id)}]` ]">
<div class="flex space-x-1 text-sm text-gray-700"> <div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
<div>Short Name: {{ node.short_name !== '' ? node.short_name : "-" }}</div> </div>
<div class="text-gray-500">/</div> </div>
<div>Hex ID: {{ node.node_id_hex }}</div> <div>
<div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div>
<div class="flex space-x-1 text-sm text-gray-700">
<div>{{ node.node_id_hex }} / {{ node.node_id }}</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -585,7 +588,7 @@
<div class="flex"> <div class="flex">
<div class="my-auto mr-2"> <div class="my-auto mr-2">
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(selectedNode.node_id)}]` ]"> <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(selectedNode.node_id)}]` ]">
<div class="mx-auto my-auto">{{ selectedNode.short_name }}</div> <div class="mx-auto my-auto drop-shadow-sm">{{ selectedNode.short_name }}</div>
</div> </div>
</div> </div>
<div class="my-auto mr-auto"> <div class="my-auto mr-auto">

View File

@ -53,7 +53,7 @@
<div class="mr-2 mt-2"> <div class="mr-2 mt-2">
<a target="_blank" :href="`/?node_id=${message.from}`"> <a target="_blank" :href="`/?node_id=${message.from}`">
<div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(message.from)}]` ]"> <div class="flex rounded-full h-12 w-12 text-white shadow" :class="[ `bg-[${getNodeColour(message.from)}]` ]">
<div class="mx-auto my-auto">{{ getNodeShortName(message.from) }}</div> <div class="mx-auto my-auto drop-shadow-sm">{{ getNodeShortName(message.from) }}</div>
</div> </div>
</a> </a>
</div> </div>