edgevpn/api/public/functions.tmpl

{{ define "table" }}
{{ $title:= get . "title" }}
{{ $func:= get . "func" }}
{{ $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>
                </div>
                <br>
                <div class="relative mt-1 ">
                  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                      xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd"
                        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                        clip-rule="evenodd"></path>
                    </svg>
                  </div>

                <input
                  x-ref="searchField"
                  x-model="search"
                  x-on:click="viewPage(0)"
                  x-on:keydown.window.prevent.slash=" viewPage(0), $refs.searchField.focus()"
                  placeholder="Search..."
                  type="search"
                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                  />
                
                </div>

                <div class="overflow-auto">
			 

                    <table class="min-w-full bg-white-200 dark:bg-gray-900">
                        <thead class="bg-slate-200 dark:bg-gray-800 dark:text-white">
                            <tr>

                            {{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">
                            <template x-for="(d, index) in filtered" :key="index">
                                   <tr
                                    {{ $condition }}
                                   >
                                    {{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>
                    </table>
                    <!--Pagination Buttons-->
                    <div
                    class="w-full md:w-1/2 mx-auto py-6 flex justify-between items-center"
                    x-show="pageCount() > 1"
                     >
                    <!--First Button-->
                    <button
                      x-on:click="viewPage(0)"
                      :disabled="pageNumber==0"
                      :class="{ 'disabled cursor-not-allowed text-gray-600' : pageNumber==0 }"
                    >
                      <svg
                        class="h-8 w-8 text-indigo-600"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <polygon points="19 20 9 12 19 4 19 20"></polygon>
                        <line x1="5" y1="19" x2="5" y2="5"></line>
                      </svg>
                    </button>
            
                    <!--Previous Button-->
                    <button
                      x-on:click="prevPage"
                      :disabled="pageNumber==0"
                      :class="{ 'disabled cursor-not-allowed text-gray-600' : pageNumber==0 }"
                    >
                      <svg
                        class="h-8 w-8 text-indigo-600"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <polyline points="15 18 9 12 15 6"></polyline>
                      </svg>
                    </button>
            
                    <!-- Display page numbers -->
                    <template x-for="(page,index) in pages()" :key="page">
                      <button
                        class="px-3 py-2 rounded"
                        :class="{ 'bg-indigo-600 text-white font-bold' : page === pageNumber }"
                        type="button"
                        x-on:click="viewPage(page)"
                      >
                        <span x-text="page" class="dark:text-white"></span>
                      </button>
                    </template>
            
                    <!--Next Button-->
                    <button
                      x-on:click="nextPage"
                      :disabled="pageNumber >= pageCount() -1"
                      :class="{ 'disabled cursor-not-allowed text-gray-600' : pageNumber >= pageCount() -1 }"
                    >
                      <svg
                        class="h-8 w-8 text-indigo-600"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <polyline points="9 18 15 12 9 6"></polyline>
                      </svg>
                    </button>
            
                    <!--Last Button-->
                    <button
                      x-on:click="viewPage(Math.ceil(total/size)-1)"
                      :disabled="pageNumber >= pageCount() -1"
                      :class="{ 'disabled cursor-not-allowed text-gray-600' : pageNumber >= pageCount() -1 }"
                    >
                      <svg
                        class="h-8 w-8 text-indigo-600"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <polygon points="5 4 15 12 5 20 5 4"></polygon>
                        <line x1="19" y1="5" x2="19" y2="19"></line>
                      </svg>
                    </button>
                </div>
                <!-- /Pagination Buttons-->


                </div>
            </div>
        </div>
{{end}}


{{ define "table_js" }}
{{ $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())
                .then(data => { 
                    data.sort(sortData("{{$sort}}","asc"));
                    this.data = data;
                 } )
            },
             search: "",
             pageNumber: 0,
             size: 10,
             total: "",
           
           get filtered() {return filter(this, "{{$sort}}") },
 
           //Create array of all pages (for loop to display page numbers)
           pages() {
               return calcPages(this.pageNumber, this.total, this.size)
           },
 
           //Next Page
           nextPage() {
             this.pageNumber++;
           },
 
           //Previous Page
           prevPage() {
             this.pageNumber--;
           },
 
           //Total number of pages
           pageCount() {
             return Math.ceil(this.total / this.size);
           },
 
           //Return the start range of the paginated results
           startResults() {
             return this.pageNumber * this.size + 1;
           },
 
           //Return the end range of the paginated results
           endResults() {
               return endRes(this)
           },
 
           //Link to navigate to page
           viewPage(index) {
             this.pageNumber = index;
           },
 
         };
    }
{{end}}

{{ define "menu_entry" }}
{{ $page:= get . "page" }}
{{ $name:= get . "name" }}
{{ $icon:= get . "icon" }}
{{ $anchor:= $page }}
{{ if eq $anchor "" }}
{{ $anchor = "#" }}
{{ end }}
        <li class="mr-6 my-2 md:my-0">
            <a href="{{$anchor}}"
            x-bind:class="page === '{{$page}}' ? 'text-blue-400 border-blue-400 hover:border-blue-400' : 'text-gray-500 dark:hover:text-gray-100 dark:hover:border-violet-900 hover:text-gray-900 border-sky-100 dark:border-sky-900 hover:border-pink-400'"
            class="block py-1 md:py-3 pl-1 align-middle no-underline border-b-2">
              <i
              x-bind:class="page === '{{$page}}' ? 'text-blue-400' : '' "
              class="fas {{$icon}} fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">{{$name}}</span>
          </a>
        </li>
{{ end }}


{{ define "metric_card" }}
{{ $color:= get . "color" }}
{{ $name:= get . "name" }}
{{ $field:= get . "field" }}
{{ $icon:= get . "icon" }}
                <div class="w-full md:w-1/2 xl:w-1/3 p-3">
                    <!--Metric Card-->
                    <div class="dark:bg-gray-900 bg-white-100 dark:border-gray-800 dark:border-gray-600 border-b-4 rounded shadow p-2">
                        <div class="flex flex-row items-center">
                            <div class="flex-shrink pr-4">
                                <div class="rounded p-3 {{$color}}"><i class="{{$icon}} fa-2x fa-fw fa-inverse"></i></div>
                            </div>
                            <div class="flex-1 text-right md:text-center">
                                <h5 class="font-bold uppercase text-gray-400">{{$name}}</h5>
                                <h3 class="font-bold text-3xl text-gray-600" x-text="{{$field}}"></h3>
                            </div>
                        </div>
                    </div>
                    <!--/Metric Card-->
                </div>
{{ end }}

{{ define "readme_badge" }}
{{ $url:= get . "url" }}
{{ $text:= get . "text" }}
        <div class="px-4 md:px-0 md:mt-8 mb-20 leading-normal " >
          
          <div class="relative " >
          <a class="mr-2 bg-sky-300 dark:bg-sky-600 text-white p-2 rounded leading-none items-center absolute top-10 right-1 " href="{{$url}}" target=_blank>
            <i class="fa-solid fa-book fa-fw pr-1"></i> {{$text}}
          </a>
          </div>
        </div>
{{end}}