feat(vuejs): add logs view

resources/static/vue-igopher/src/components/LogsPanel.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="container-fluid">
+    <div class="card shadow">
+      <div class="card-header py-3">
+        <p class="text-primary m-0 fw-bold">Logs</p>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-6 text-nowrap">
+            <div
+              id="dataTable_length"
+              class="dataTables_length"
+              aria-controls="dataTable"
+            >
+              <label class="form-label d-inline-flex align-items-xxl-center"
+                >Show&nbsp;<select
+                  id="elementsPerPageSelect"
+                  class="form-select form-select-sm custom-select custom-select-sm"
+                >
+                  <option value="10" selected="">10</option>
+                  <option value="25" selected="">25</option>
+                  <option value="50">50</option>
+                  <option value="100">100</option> </select
+                >&nbsp;</label
+              >
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div
+              class="text-end text-md-end dataTables_filter"
+              id="dataTable_filter"
+            >
+              <a
+                class="btn btn-primary justify-content-end btn-icon-split"
+                role="button"
+                id="refreshLogsBtn"
+                ><span class="text-white-50 icon"
+                  ><i class="fas fa-sync-alt" id="refreshLogsIcon"></i></span
+                ><span class="text-white text" id="refreshLogsSpan"
+                  >Refresh</span
+                ></a
+              >
+            </div>
+          </div>
+        </div>
+        <div
+          class="table-responsive table mt-2"
+          id="dataTable"
+          role="grid"
+          aria-describedby="dataTable_info"
+        >
+          <table class="table my-0" id="dataTable">
+            <thead>
+              <tr>
+                <th>Level</th>
+                <th>Message</th>
+                <th>Date</th>
+              </tr>
+            </thead>
+            <tbody id="logsList"></tbody>
+            <tfoot>
+              <tr>
+                <td><strong>Level</strong></td>
+                <td><strong>Message</strong></td>
+                <td><strong>Date</strong></td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+        <div class="row">
+          <div class="col-md-6 align-self-center">
+            <p
+              id="dataTable_info"
+              class="dataTables_info"
+              role="status"
+              aria-live="polite"
+            >
+              Showing 1 to 10 of 27
+            </p>
+          </div>
+          <div class="col-md-6">
+            <nav
+              class="d-lg-flex justify-content-end dataTables_paginate paging_simple_numbers"
+            >
+              <ul class="pagination">
+                <li class="page-item">
+                  <button id="prevPageBtn" class="page-link" aria-label="Prev">
+                    «
+                  </button>
+                </li>
+                <li class="page-item active">
+                  <span id="pageNumber" class="page-link">1</span>
+                </li>
+                <li class="page-item">
+                  <button id="nextPageBtn" class="page-link" aria-label="Next">
+                    »
+                  </button>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Vue } from "vue-class-component";
+
+export default class LogsPanel extends Vue {}
+</script>
+
+<style lang="scss"></style>

resources/static/vue-igopher/src/config.ts

@@ -42,7 +42,7 @@ export function getIgopherConfig(astor: Astor, callback: () => void) {
     astor.trigger("getConfig", {}, function(message: any) {
         if (message.status === SUCCESS) {
             igopherConfig = JSON.parse(message.msg);
-            console.log("getIgopherConfig: "+igopherConfig);
+            console.log("getIgopherConfig: ", igopherConfig);
             callback();
         } else {
             console.log(message.msg)

resources/static/vue-igopher/src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import DmAutomation from '../views/DmAutomation.vue'
 import Settings from '../views/Settings.vue'
+import Logs from '../views/Logs.vue'
 import About from '../views/About.vue'
 
 const routes: Array<RouteRecordRaw> = [
@@ -14,6 +15,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Settings',
     component: Settings
   },
+  {
+    path: '/logs',
+    name: 'Logs',
+    component: Logs
+  },
   {
     path: '/about',
     name: 'About',

resources/static/vue-igopher/src/views/Logs.vue

@@ -0,0 +1,168 @@
+<template>
+  <LogsPanel/>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+import { inject } from 'vue'
+import LogsPanel from "@/components/LogsPanel.vue";
+import * as config from "@/config"
+import { Astor } from "@/plugins/astilectron";
+
+class Pager {
+    items: any[];
+    pagedItems: any[];
+    currentPage: number;
+    itemsPerPage: number;
+
+    constructor(items: any[], itemsPerPage?: number) {
+        this.itemsPerPage = itemsPerPage;
+        this.init();
+        this.setItems(items);
+    }
+
+    init() {
+        this.pagedItems = [];
+        this.currentPage = 0;
+        if (this.itemsPerPage === undefined) {
+            this.itemsPerPage = 25;
+        }
+    }
+
+    refresh() {
+        this.currentPage = 0;
+        this.pagedItems = [];
+        for (var i = 0; i < this.items.length; i++) {
+            if (i % this.itemsPerPage === 0) {
+                this.pagedItems[Math.floor(i / this.itemsPerPage)] = [this.items[i]];
+            } else {
+                this.pagedItems[Math.floor(i / this.itemsPerPage)].push(this.items[i]);
+            }
+        }
+    }
+
+    prevPage() {
+        if (this.currentPage > 0) {
+            this.currentPage--;
+        }
+    }
+
+    nextPage() {
+        if (this.currentPage < this.pagedItems.length - 1) {
+            this.currentPage++;
+        }
+    }
+
+    setPagination(nbElem: number) {
+        this.itemsPerPage = +nbElem;
+        this.refresh();
+    }
+
+    setItems(items: any[]) {
+        this.items = items;
+        this.refresh()
+    }
+}
+
+@Options({
+  components: {
+    LogsPanel,
+  },
+  mounted() {
+    const astor: Astor = inject('astor');
+
+    config.ready(() => {
+      astor.onIsReady(() => {
+        let pager: Pager;
+        refreshLogs();
+
+        function refreshLogs() {
+            astor.trigger("getLogs", {}, function(message: any) {
+                if (message.status === config.SUCCESS) {
+                    let items = JSON.parse(message.msg);
+                    if(pager === undefined) {
+                        pager = new Pager(items);
+                    } else {
+                        pager.setItems(items);
+                    }
+                    bindList();
+                } else {
+                    console.log(message.msg);
+                    config.iziToast.error(message.msg);
+                }
+                document.querySelector('#refreshLogsIcon').classList.remove('fa-spin');
+            });
+        }
+
+        function bindList() {
+            var pgItems = pager.pagedItems[pager.currentPage];
+            var new_tbody = document.createElement('tbody');
+            var old_tbody = document.getElementById("logsList");
+            new_tbody.id = old_tbody.id;
+            for (var i = 0; i < pgItems.length; i++) {
+                var tr = document.createElement('TR');
+                for (var key in pgItems[i]) {
+                    var td = document.createElement('TD')
+                    td.appendChild(document.createTextNode(pgItems[i][key]));
+                    tr.appendChild(td);
+                }
+                new_tbody.appendChild(tr);
+            }
+            old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
+            document.getElementById("pageNumber").innerHTML = String(pager.currentPage + 1);
+            updateTableInfo();
+        }
+
+        function prevPage() {
+            pager.prevPage();
+            bindList();
+        }
+
+        function nextPage() {
+            pager.nextPage();
+            bindList();
+        }
+
+        function setPagination(nbElem: number) {
+            pager.setPagination(nbElem);
+            bindList();
+        }
+
+        function updateTableInfo() {
+            let firstElem = pager.currentPage * pager.itemsPerPage + 1;
+            let lastElem = 0;
+            if (pager.currentPage === pager.pagedItems.length - 1) {
+                lastElem = pager.items.length;
+            } else {
+                lastElem = firstElem + pager.itemsPerPage - 1;
+            }
+            document.getElementById("dataTable_info").innerHTML = "Showing " + firstElem + " to " + lastElem + " of " + pager.items.length;
+        }
+
+        // Controllers
+        /// Buttons
+        document.querySelector("#refreshLogsBtn").addEventListener("click", function() {
+            document.querySelector('#refreshLogsIcon').classList.add('fa-spin');
+            refreshLogs();
+        });
+        document.querySelector("#prevPageBtn").addEventListener("click", function() {
+            prevPage();
+        });
+        document.querySelector("#nextPageBtn").addEventListener("click", function() {
+            nextPage();
+        });
+
+        /// Select
+        document.querySelector("#elementsPerPageSelect").addEventListener("change", () => {
+            setPagination(this.value);
+        });
+      });
+    });
+  }
+})
+export default class Logs extends Vue {}
+</script>
+
+<style lang="scss">
+
+</style>