:art: Add delete button to nodes and DNS

api/public/functions.tmpl

@@ -4,12 +4,41 @@
 {{ $fields:= get . "fields" }}
 {{ $struct:= get . "struct" }}
 {{ $condition:= get . "condition" | default "" }}
+{{ $delete:= get . "delete" }}
 
         <div class="w-full px-4 md:px-0 md:mt-8 mb-16 text-gray-800 leading-normal"
 
                 x-data="{{$func}}()"
                 x-init="$interval(updateItems, 1500)"
                 >
+
+
+            <!-- Notification toast -->
+            <div
+                x-show="open"
+                class="w-96 p-4 rounded h-32 fixed bottom-4 right-4 transform-gpu transition-transform duration-400 ease"
+                x-class="success ? 'bg-green-500' : 'bg-red-500'"
+                x-transition:enter-start="opacity-0 translate-y-full"
+                x-transition:enter-end="opacity-100 translate-y-0"
+                x-transition:leave-start="translate-y-0"
+                x-transition:leave="transition transform ease-in duration-300"
+                x-transition:leave-end="opacity-0 translate-y-full"
+                >
+                <div class="bg-white border-gray-300 dark:border-slate-800 dark:bg-slate-900 border p-3 flex items-start shadow-lg rounded-md space-x-2">
+                  <svg class="flex-shrink-0 h-6 w-6 text-green-400" stroke="currentColor" viewBox="0 0 20 20">
+                    <path stroke-width="1" d="M10.219,1.688c-4.471,0-8.094,3.623-8.094,8.094s3.623,8.094,8.094,8.094s8.094-3.623,8.094-8.094S14.689,1.688,10.219,1.688 M10.219,17.022c-3.994,0-7.242-3.247-7.242-7.241c0-3.994,3.248-7.242,7.242-7.242c3.994,0,7.241,3.248,7.241,7.242C17.46,13.775,14.213,17.022,10.219,17.022 M15.099,7.03c-0.167-0.167-0.438-0.167-0.604,0.002L9.062,12.48l-2.269-2.277c-0.166-0.167-0.437-0.167-0.603,0c-0.166,0.166-0.168,0.437-0.002,0.603l2.573,2.578c0.079,0.08,0.188,0.125,0.3,0.125s0.222-0.045,0.303-0.125l5.736-5.751C15.268,7.466,15.265,7.196,15.099,7.03"></path>
+                  </svg>
+                  <div class="flex-1 space-y-1">
+                    <p class="text-base leading-6 font-medium text-gray-700 dark:text-gray-400" x-text="title"></p>
+                    <p class="text-sm leading-5 text-gray-600 dark:text-gray-400" x-text="message"></p>
+                  </div>
+                  <svg class="flex-shrink-0 h-5 w-5 text-gray-400 cursor-pointer" x-on:click="isShow = false" stroke="currentColor" viewBox="0 0 20 20">
+                    <path stroke-width="1.2" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
+                  </svg>
+                </div>
+            </div>
+
+
             <div class="w-full mt-12 p-3 dark:bg-gray-900 border dark:border-gray-800 rounded shadow">
                 <div class="border-b bg-white-200 dark:bg-gray-900 dark:border-gray-800 p-3">
                     <h5 class="font-bold uppercase dark:text-gray-600">{{$title}}</h5>
@@ -47,7 +76,9 @@
                             {{range $fields}}
                                 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">{{.}}</th>
                             {{end}}
-
+                            {{ if ne $delete "" }}
+                                <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm"></th>
+                                {{ end }}
                             </tr>
                         </thead>
                         <tbody class="text-black dark:text-white">
@@ -58,6 +89,19 @@
                                     {{range $struct}}
                                         <td x-text="{{.}}" class="text-left py-3 px-4"></td>
                                     {{end}}
+                                    {{ if ne $delete "" }}
+
+                                    <!-- Action menu -->
+                                    <td class="text-left py-3 px-4" >
+                                         <button
+                                          class="px-3 py-2 rounded"
+                                          type="button"
+                                          x-on:click="deleteItem({{$delete}})"
+                                          >
+                                          <i class="fa-solid fa-trash-can"></i>
+                                          </button>
+                                    </td>
+                                    {{ end }}
                                    </tr>
                              </template>                          
                         </tbody>
@@ -178,12 +222,34 @@
 {{ $func:= get . "func" }}
 {{ $endpoint:= get . "endpoint" }}
 {{ $sort:= get . "sort" }}
+{{ $delete:= get . "delete" }}
 
     function {{$func}}(){
         return {
             data: [
              
             ],
+            open: false,
+            title: "",
+            message: "",
+            success: false,
+            openToast(title, message, success) {
+                this.title = title
+                this.message = message
+                this.success = success
+                this.open = true
+                setTimeout(() => {
+                    this.open = false
+                }, 5000)
+            },
+            {{ if ne $delete "" }}
+            deleteItem(item) {
+              fetch('/api/ledger/{{$delete}}/'.concat("",item), {
+                method: 'DELETE',
+              });
+              this.openToast("Delete", "Announcing deletion to the blockchain, please wait", true);
+            },
+            {{ end }}
             updateItems() {
               fetch('/api/{{$endpoint}}')
                 .then(response => response.json())

api/public/index.tmpl

@@ -130,7 +130,7 @@
     <div class="container w-full mx-auto pt-20" x-show="page === '#nodes'">
         {{ $opts:= dict "text" "Machines API Documentation " "url" "https://mudler.github.io/edgevpn/docs/getting-started/api/#apimachines"}}
         {{ template "readme_badge" $opts}}
-        {{ $opts:= dict "condition" "x-bind:class=\"d.Online ? 'bg-lime-100 dark:bg-lime-800' : 'bg-stone-200 dark:bg-stone-800'\"" "title" "Nodes" "func" "machines" "fields" ( list "Address" "PeerID" "Hostname" "OS" "Architecture" "Version") "struct" (list "d.Address" "d.PeerID" "d.Hostname" "d.OS" "d.Arch" "d.Version")}}
+        {{ $opts:= dict "delete" "d.Address" "condition" "x-bind:class=\"d.Online ? 'bg-lime-100 dark:bg-lime-800' : 'bg-stone-200 dark:bg-stone-800'\"" "title" "Nodes" "func" "machines" "fields" ( list "Address" "PeerID" "Hostname" "OS" "Architecture" "Version") "struct" (list "d.Address" "d.PeerID" "d.Hostname" "d.OS" "d.Arch" "d.Version")}}
         {{ template "table" $opts}}
     </div>  
 	<!--END Node Container-->
@@ -165,7 +165,7 @@
     <div class="container w-full mx-auto pt-20" x-show="page === '#dns'">
         {{ $opts:= dict "text" "DNS Documentation " "url" "https://mudler.github.io/edgevpn/docs/concepts/overview/dns/"}}
         {{ template "readme_badge" $opts}}
-        {{ $opts:= dict "title" "DNS" "func" "dns" "fields" ( list "Regex" "Records") "struct" (list "d.Regex" "JSON.stringify(d.Records)")}}
+        {{ $opts:= dict "delete" "d.Regex" "title" "DNS" "func" "dns" "fields" ( list "Regex" "Records") "struct" (list "d.Regex" "JSON.stringify(d.Records)")}}
         {{ template "table" $opts}} 
 
     </div>
@@ -343,7 +343,7 @@
         }
      }
 
-    {{ $opts:= dict "endpoint" "machines" "func" "machines" "sort" "Address"}}
+    {{ $opts:= dict "endpoint" "machines" "func" "machines" "sort" "Address" "delete" "machines"}}
     {{ template "table_js" $opts}}
 
     {{ $opts:= dict "endpoint" "peerstore" "func" "peerstore" "sort" "ID"}}
@@ -355,7 +355,7 @@
     {{ $opts:= dict "endpoint" "users" "func" "users" "sort" "ID"}}
     {{ template "table_js" $opts}}
 
-    {{ $opts:= dict "endpoint" "dns" "func" "dns" "sort" "Regex"}}
+    {{ $opts:= dict "endpoint" "dns" "func" "dns" "sort" "Regex" "delete" "dns"}}
     {{ template "table_js" $opts}}
 
     {{ $opts:= dict "endpoint" "services" "func" "services" "sort" "Name"}}