logging update

overwriting native log, warn, debug, error
added color coded tags to logs
automatically enabling debug logs on localhost
added fucntion to enable debug logs

frontend/src/ts/account/result-filters.ts

@@ -77,7 +77,6 @@ function save(): void {
 }
 
 export async function load(): Promise<void> {
-  console.log("loading filters");
   try {
     const newResultFilters = window.localStorage.getItem("resultFilters");
 
@@ -297,7 +296,6 @@ export function getFilter<G extends MonkeyTypes.Group>(
 // }
 
 export function loadTags(tags: MonkeyTypes.Tag[]): void {
-  console.log("loading tags");
   tags.forEach((tag) => {
     defaultResultFilters.tags[tag._id] = true;
   });

frontend/src/ts/config.ts

@@ -74,6 +74,7 @@ async function saveToLocalStorage(
 export async function saveFullConfigToLocalStorage(
   noDbCheck = false
 ): Promise<void> {
+  console.log("saving full config to localStorage");
   if (!dbConfigLoaded && !noDbCheck) {
     setChangedBeforeDb(true);
   }
@@ -1927,10 +1928,8 @@ export function loadFromLocalStorage(): void {
       newConfig = {} as MonkeyTypes.Config;
     }
     apply(newConfig);
-    console.log("applying localStorage config");
     localStorageConfig = newConfig;
     saveFullConfigToLocalStorage(true);
-    console.log("saving localStorage config");
   } else {
     reset();
   }

frontend/src/ts/controllers/account-controller.ts

@@ -294,6 +294,7 @@ if (Auth && ConnectionState.get()) {
     const search = window.location.search;
     const hash = window.location.hash;
     console.log(`auth state changed, user ${user ? true : false}`);
+    console.debug(user);
     if (user) {
       $("#top .signInOut .icon").html(
         `<i class="fas fa-fw fa-sign-out-alt"></i>`

frontend/src/ts/controllers/page-controller.ts

@@ -32,14 +32,17 @@ export async function change(
 
   return new Promise((resolve) => {
     if (PageTransition.get()) {
-      console.log(`change page ${page.name} stopped`);
+      console.debug(
+        `change page to ${page.name} stopped, page transition is true`
+      );
       return resolve(false);
     }
-    console.log(`change page ${page.name}`);
 
     if (!options.force && ActivePage.get() === page.name) {
-      console.log(`page ${page.name} already active`);
+      console.debug(`change page ${page.name} stoped, page already active`);
       return resolve(false);
+    } else {
+      console.log(`changing page ${page.name}`);
     }
 
     const pages: Record<string, Page> = {

frontend/src/ts/index.ts

@@ -3,6 +3,7 @@
 import "../styles/index.scss";
 import "./firebase";
 
+import * as Logger from "./utils/logger";
 import * as DB from "./db";
 import "./ui";
 import "./controllers/ad-controller";
@@ -65,3 +66,5 @@ extendedGlobal.enableSpacingDebug = TestInput.enableSpacingDebug;
 extendedGlobal.egVideoListener = egVideoListener;
 
 extendedGlobal.wpmCalculationDebug = TestStats.wpmCalculationDebug;
+
+extendedGlobal.toggleDebugLogs = Logger.toggleDebugLogs;

frontend/src/ts/types/types.d.ts

@@ -686,6 +686,7 @@ declare namespace MonkeyTypes {
     noGoogleNoMo(): void;
     egVideoListener(options: Record<string, string>): void;
     wpmCalculationDebug(): void;
+    toggleDebugLogs(): void;
   }
 
   interface GithubRelease {

frontend/src/ts/utils/logger.ts

@@ -0,0 +1,57 @@
+import { isLocalhost } from "./misc";
+
+const nativeLog = console.log;
+const nativeWarn = console.warn;
+const nativeError = console.error;
+
+let debugLogs = localStorage.getItem("debugLogs") === "true" ?? false;
+
+if (isLocalhost()) {
+  debugLogs = true;
+  debug("Debug logs automatically enabled on localhost");
+}
+
+export function toggleDebugLogs(): void {
+  debugLogs = !debugLogs;
+  info(`Debug logs ${debugLogs ? "enabled" : "disabled"}`);
+  localStorage.setItem("debugLogs", debugLogs.toString());
+}
+
+export function info(...args: unknown[]): void {
+  nativeLog(
+    "%cINFO",
+    "background:#4CAF50;color: #111;padding:0 5px;border-radius:10px",
+    //@ts-ignore
+    ...args
+  );
+}
+
+export function warn(...args: unknown[]): void {
+  nativeWarn(
+    "%cWRN",
+    "background:#FFC107;color: #111;padding:0 5px;border-radius:10px",
+    ...args
+  );
+}
+
+export function error(...args: unknown[]): void {
+  nativeError(
+    "%cERR",
+    "background:#F44336;color: #111;padding:0 5px;border-radius:10px",
+    ...args
+  );
+}
+
+export function debug(...args: unknown[]): void {
+  if (!debugLogs) return;
+  nativeLog(
+    "%cDEBG",
+    "background:#2196F3;color: #111;padding:0 5px;border-radius:10px",
+    ...args
+  );
+}
+
+console.log = info;
+console.warn = warn;
+console.error = error;
+console.debug = debug;