@viplance/nestjs-logger 0.4.3 → 0.4.5

package/README.md

@@ -4,6 +4,10 @@
 [![npm version](https://img.shields.io/npm/v/@viplance/nestjs-logger.svg?style=flat-square)](https://www.npmjs.com/package/@viplance/nestjs-logger)
 [![GitHub stars](https://img.shields.io/github/stars/viplance/nestjs-logger.svg?style=social)](https://github.com/viplance/nestjs-logger)
 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/viplance/nestjs-logger/refs/heads/main/nestjs-logger.heic" width="100%" title="NestJS logger">
+</p>
+
 ### Installation
 1. Install the package `npm i @viplance/nestjs-logger`<br />
 2. Import the module in app.module.ts<br />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viplance/nestjs-logger",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "NestJS internal logging system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/public/index.html

@@ -18,6 +18,11 @@
       src="scripts/json-viewer.js
     "
     ></script>
+    <script
+      defer="defer"
+      src="scripts/local-storage.js
+    "
+    ></script>
     <script
       defer="defer"
       src="scripts/details-popup.js

package/public/scripts/details-popup.js

@@ -1,21 +1,31 @@
+const popup = document.getElementById('popup');
+
 function showLogDetails(log) {
-  const popup = document.getElementById(`popup`);
   const context = getObject(log.context);
   const breadcrumbs = getObject(log.breadcrumbs);
 
+  // Restore position from LocalStorage
+  const savedLeft = getLs('popupLeft');
+  if (savedLeft) {
+    popup.style.left = savedLeft;
+  }
+
   const timeInfo =
     log.updatedAt === log.createdAt
       ? getDate(log.updatedAt)
       : `Updated: ${getDate(
-          log.updatedAt
+          log.updatedAt,
         )}.   First seen: ${getDate(log.createdAt)}`;
 
   popup.innerHTML = `
+    <div id="drag-handle" style="margin: -2rem -2rem 1rem -2rem; height: 1.5rem; background-color: #f1f1f1; border-bottom: 1px solid #ddd; cursor: grab; display: flex; align-items: center; justify-content: center;" title="Drag to move">
+        <div style="width: 50px; height: 5px; background-color: #ccc; border-radius: 5px;"></div>
+    </div>
     <div class="content center">
       <div class="container">
         <h2 class="popup-title ${log.type}">${log.type}: ${log.message} (${
-    log.count
-  })</h2>
+          log.count
+        })</h2>
         <div class="mt-05">${timeInfo}</div>
           ${
             log.trace
@@ -48,9 +58,50 @@ function showLogDetails(log) {
           }')">Delete</button>
         </div>
       </div>
-    <div>`;
+    </div>`;
 
   popup.style.display = 'block';
+
+  const left = parseFloat(getLs('popupLeft')) || 0;
+
+  setPopupLeft(left);
+
+  // Drag'n'Drop logic
+  const handle = document.getElementById('drag-handle');
+
+  if (handle) {
+    handle.onmousedown = function (e) {
+      e.preventDefault();
+
+      const startX = e.clientX;
+      const rect = popup.getBoundingClientRect();
+      const startLeft = rect.left;
+
+      handle.style.cursor = 'move';
+      document.body.style.cursor = 'move';
+
+      function onMouseMove(e) {
+        const dx = e.clientX - startX;
+        const left = startLeft + dx;
+
+        setPopupLeft(left);
+      }
+
+      function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+
+        handle.style.cursor = 'grab';
+        document.body.style.cursor = 'default';
+
+        // Remember position
+        setLs('popupLeft', popup.style.left);
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    };
+  }
 }
 
 function getObject(context) {
@@ -66,6 +117,26 @@ function getTrace(trace) {
 }
 
 function closePopup() {
-  const popup = document.getElementById(`popup`);
   popup.style.display = 'none';
 }
+
+function setPopupLeft(left) {
+  if (popup?.style.display === 'block') {
+    if (left < 0) {
+      left = 0;
+    }
+    const popupWidth = popup.offsetWidth;
+    if (left > window.innerWidth - popupWidth) {
+      left = window.innerWidth - popupWidth;
+    }
+
+    popup.style.left = `${left}px`;
+    setLs('popupLeft', popup.style.left);
+  }
+}
+
+window.addEventListener('resize', () => {
+  const left = parseFloat(getLs('popupLeft')) || 0;
+
+  setPopupLeft(left);
+});

package/public/scripts/local-storage.js

@@ -0,0 +1,23 @@
+const LS_KEY = 'nestjs-logger';
+
+function getLs(propertyName) {
+  const item = localStorage.getItem(LS_KEY);
+
+  if (!item) {
+    return;
+  }
+
+  return JSON.parse(item)[propertyName];
+}
+
+function setLs(propertyName, value) {
+  const item = localStorage.getItem(LS_KEY);
+
+  if (!item) {
+    localStorage.setItem(LS_KEY, JSON.stringify({}));
+  }
+
+  const ls = JSON.parse(item);
+  ls[propertyName] = value;
+  localStorage.setItem(LS_KEY, JSON.stringify(ls));
+}

package/public/scripts/ws.js

@@ -8,21 +8,26 @@ async function connectWebSocket() {
   const res = await fetch(`${origin}${pathname}settings${search}`);
 
   if (!res.ok) {
-    alert('An error occurred while fetching settings.');
+    alert(
+      'An error occurred while fetching settings. Check the `key` url parameter.'
+    );
     return;
   }
 
   const settings = await res.json();
 
-  if (!settings.websocket) {
-    getLogs();
+  if (!!settings.websocket) {
+    document.getElementById('refresh').style.display = 'none';
+    document.getElementById('freeze').style.display = 'block';
+  } else {
     document.getElementById('refresh').style.display = 'block';
+    document.getElementById('freeze').style.display = 'none';
+    getLogs();
+    return;
   }
 
-  document.getElementById('freeze').style.display = 'block';
-
   if (!settings.websocket?.port) {
-    alert('WebSocket port is not configured.');
+    alert('WebSocket port is not configured properly.');
     return;
   }