condense other device info ui

This commit is contained in:
liamcottle
2024-09-02 04:14:26 +12:00
parent 9cbd4a8291
commit 09e13d007a

View File

@ -1137,87 +1137,45 @@
<div class="bg-gray-200 p-2 font-semibold">Other</div> <div class="bg-gray-200 p-2 font-semibold">Other</div>
<ul role="list" class="flex-1 divide-y divide-gray-200"> <ul role="list" class="flex-1 divide-y divide-gray-200">
<li> <!-- id -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">ID</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ selectedNode.node_id }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">ID</p>
<p class="truncate text-sm text-gray-700">{{ selectedNode.node_id }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- hex id -->
<div class="group relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Hex ID</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ selectedNode.node_id_hex }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Hex ID</p>
<p class="truncate text-sm text-gray-700">{{ selectedNode.node_id_hex }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- first seen -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">First Seen</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(selectedNode.created_at)).fromNow() }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">First Seen</p>
<p class="truncate text-sm text-gray-700">{{ moment(new Date(selectedNode.created_at)).fromNow() }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- last seen -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Last Seen</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(selectedNode.updated_at)).fromNow() }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Last Seen</p>
<p class="truncate text-sm text-gray-700">{{ moment(new Date(selectedNode.updated_at)).fromNow() }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- neighbours updated -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Neighbours Updated</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Neighbours Updated</p>
<p class="truncate text-sm text-gray-700">
<span v-if="selectedNode.neighbours_updated_at">{{ moment(new Date(selectedNode.neighbours_updated_at)).fromNow() }}</span> <span v-if="selectedNode.neighbours_updated_at">{{ moment(new Date(selectedNode.neighbours_updated_at)).fromNow() }}</span>
<span v-else class="text-gray-500">???</span> <span v-else>???</span>
</p>
</div>
</div>
</div>
</div> </div>
</li> </li>
<li> <!-- position updated -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Position Updated</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Position Updated</p>
<p class="truncate text-sm text-gray-700">
<span v-if="selectedNode.position_updated_at">{{ moment(new Date(selectedNode.position_updated_at)).fromNow() }}</span> <span v-if="selectedNode.position_updated_at">{{ moment(new Date(selectedNode.position_updated_at)).fromNow() }}</span>
<span v-else class="text-gray-500">???</span> <span v-else>???</span>
</p>
</div>
</div>
</div>
</div> </div>
</li> </li>