From bebd3674364528fa2a4a6b92ba51c49373d7ed62 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sat, 6 Jul 2024 01:21:29 +1200
Subject: [PATCH] move buttons to view message logs to node info panel

---
 src/public/index.html | 46 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/public/index.html b/src/public/index.html
index 005bc98..10bf900 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -557,6 +557,47 @@
                                 </div>
                             </div>
 
+                            <!-- action buttons -->
+                            <div class="flex space-x-6 p-2 justify-center">
+
+                                <!-- sent messages -->
+                                <a target="_blank" :href="`/api/v1/text-messages/embed?from=${selectedNode.node_id}`" class="flex flex-col" title="Messages sent from this Node">
+                                    <div class="flex mx-auto mb-1">
+                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="m15 11.25-3-3m0 0-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    <div class="mx-auto text-sm font-medium text-gray-900">Sent Msgs</div>
+                                </a>
+
+                                <!-- received messages -->
+                                <a target="_blank" :href="`/api/v1/text-messages/embed?to=${selectedNode.node_id}`" class="flex flex-col" title="Messages sent to this Node">
+                                    <div class="flex mx-auto mb-1">
+                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    <div class="mx-auto text-sm font-medium text-gray-900">Received Msgs</div>
+                                </a>
+
+                                <!-- gated messages -->
+                                <a target="_blank" :href="`/api/v1/text-messages/embed?gateway_id=${selectedNode.node_id}`" class="flex flex-col" title="Messages gated to MQTT by this Node">
+                                    <div class="flex mx-auto mb-1">
+                                        <div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
+                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    <div class="mx-auto text-sm font-medium text-gray-900">Gated Msgs</div>
+                                </a>
+
+                            </div>
+
                             <!-- details -->
                             <div>
                                 <div class="bg-gray-200 p-2 font-semibold">Details</div>
@@ -3610,11 +3651,6 @@
         tooltip += `<br/><br/><button onclick="showNodeDetails(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Full Details</button>`;
         tooltip += `<br/><button onclick="showNodeNeighboursThatHeardUs(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Neighbours (Heard Us)</button>`;
         tooltip += `<br/><button onclick="showNodeNeighboursThatWeHeard(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200">Show Neighbours (We Heard)</button>`;
-        tooltip += `<br/>`;
-        tooltip += `<div class="flex space-x-1 mt-1">`;
-        tooltip += `<a target="_blank" href="/api/v1/text-messages/embed?from=${node.node_id}" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200" style="color:unset !important;">Sent Msgs</a>`;
-        tooltip += `<a target="_blank" href="/api/v1/text-messages/embed?to=${node.node_id}" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200" style="color:unset !important;">Received Msgs</a>`;
-        tooltip += `<a target="_blank" href="/api/v1/text-messages/embed?gateway_id=${node.node_id}" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200" style="color:unset !important;">Gated Msgs</a>`;
         tooltip += `</div>`;
 
         return tooltip;