setup frontend node project

some-programs · Feb 16, 2021 · af9f903 · af9f903
1 parent 6be6240
commit af9f903
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /natbwmon
-/natbwmon-arm64
+/natbwmon-arm64
+/node_modules/
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+vendor
+template
+/static/clients.js
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/README.md b/README.md
@@ -8,24 +8,21 @@
 
 - Show bandwidth per lan client between router host and the internet, updated
   muliple times per second on default settings.
-
 - View tracked connections per client host.
 
 ## why?
 
 - I wanted to run this on an UniFi Dream Machine Pro which doesnt officially
   support third party sofware so a static binary that does not link to anything
   outside itself was the primary target.
-
 - This is **only tested on UniFi Dream Machine Pro** with one specific port
   configuration so YMMV, should work on most linux NAT gateway setups though.
-  
+
 ## how to use
 
 - The only requirement is Go 1.16 or later for mative and cross platform
   builds.
 
 - Look at the [run](run) script to see how the application is compiled and
-  transferred to the arm64 UDM pro device. 
-
+  transferred to the arm64 UDM pro device.
 - Execute `go run . -h` to see command line flags.
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "natbwmon",
+  "version": "0.1.0",
+  "main": "index.js",
+  "repository": "[email protected]:some-programs/natbwmon.git",
+  "author": "Thomas Frössman <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "typescript": "^4.1.3"
+  },
+  "devDependencies": {
+    "prettier": "2.2.1"
+  },
+  "scripts": {
+    "lint": "prettier -c . && tsc --noEmit",
+    "fmt": "prettier --write .",
+    "build": "tsc"
+  }
+}
diff --git a/static/style.css b/static/style.css
@@ -2,37 +2,36 @@
   --bg: #fff;
   --fg: #333;
   --hl-fg: black;
-  --hl-bg:#e8e8e8;
-  --link: #125E89;
+  --hl-bg: #e8e8e8;
+  --link: #125e89;
   --border: #ddd;
-  --border2: #CA9F00;
+  --border2: #ca9f00;
 
   --green: #598700;
-  --red: #A11C42;
+  --red: #a11c42;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-  --bg: #222;
-  --fg: #ddd;
-  --hl-fg: #ddd;
-  --hl-bg:#333;
-  --link:#1f9be2;
-  --border: #444;
-  --border2: #777;
-
-  --green: #7bba00;
-  --red: #df4470;
+    --bg: #222;
+    --fg: #ddd;
+    --hl-fg: #ddd;
+    --hl-bg: #333;
+    --link: #1f9be2;
+    --border: #444;
+    --border2: #777;
+
+    --green: #7bba00;
+    --red: #df4470;
   }
 }
 
-
 body {
-  font-family: 'Roboto', sans-serif;
-  color:var(--fg);
+  font-family: "Roboto", sans-serif;
+  color: var(--fg);
 
   background-color: var(--bg);
-  padding: 1em .5em;
+  padding: 1em 0.5em;
 }
 
 a {
@@ -56,15 +55,15 @@ a.icon:hover {
   color: var(--hl-fg);
 }
 
-tbody > tr:first-child{
+tbody > tr:first-child {
   border-bottom: 2px solid var(--border);
 }
-tbody > tr:last-child{
+tbody > tr:last-child {
   border-bottom: 2px solid var(--border);
 }
 
 table {
-  font-family: 'Roboto Condensed', sans-serif;
+  font-family: "Roboto Condensed", sans-serif;
   border-collapse: collapse;
 }
 tr:hover {
@@ -73,7 +72,7 @@ tr:hover {
 }
 tr > td:nth-child(1) {
   white-space: nowrap;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 td {
   padding-left: 5px;
@@ -89,12 +88,12 @@ tr > td:nth-child(4) {
 
 th > button {
   font-weight: bold;
-  font-family: 'Roboto Condensed', sans-serif;
+  font-family: "Roboto Condensed", sans-serif;
   color: var(--fg);
 }
 
 pre {
-  font-family: 'Roboto Mono', monospace;
+  font-family: "Roboto Mono", monospace;
   color: var(--fg);
   font-size: 85%;
   line-height: 1.3em;
@@ -120,9 +119,11 @@ pre {
   color: var(--red);
 }
 
-
-h1,h2,h3,h4 {
-  font-family: 'Roboto Condensed', sans-serif;
+h1,
+h2,
+h3,
+h4 {
+  font-family: "Roboto Condensed", sans-serif;
   color: var(--fg);
   font-weight: normal;
 }
@@ -135,10 +136,18 @@ h4 {
   margin: 0;
 }
 
-h1 { font-size: 1.9em; }
-h2 { font-size: 1.55em; }
-h3 { font-size: 1.4em; }
-h4 { font-size: 1.2em; }
+h1 {
+  font-size: 1.9em;
+}
+h2 {
+  font-size: 1.55em;
+}
+h3 {
+  font-size: 1.4em;
+}
+h4 {
+  font-size: 1.2em;
+}
 
 .success-invert {
   background-color: var(--green);
@@ -156,13 +165,12 @@ h4 { font-size: 1.2em; }
   color: var(--bg);
 }
 
-
 button {
-  background: none!important;
+  background: none !important;
   border: none;
-  padding: 0!important;
+  padding: 0 !important;
   cursor: pointer;
-  color:var(--link);
+  color: var(--link);
   font-size: 1.1em;
 }
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,19 +3,19 @@
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 
     /* Basic Options */
-    "incremental": false,                   /* Enable incremental compilation */
-    "target": "es2016",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "amd",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "incremental": false /* Enable incremental compilation */,
+    "target": "es2016" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "amd" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     // "lib": [],                             /* Specify library files to be included in the compilation. */
-    "allowJs": false,                       /* Allow javascript files to be compiled. */
-    "checkJs": false,                       /* Report errors in .js files. */
+    "allowJs": false /* Allow javascript files to be compiled. */,
+    "checkJs": false /* Report errors in .js files. */,
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "outDir": "./static/",                        /* Redirect output structure to the directory. */
-    "rootDir": "./ts/",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    "outDir": "./static/" /* Redirect output structure to the directory. */,
+    "rootDir": "./ts/" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
     // "composite": true,                     /* Enable project compilation */
     // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
     // "removeComments": true,                /* Do not emit comments to output. */
@@ -25,8 +25,8 @@
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
-    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
@@ -49,22 +49,22 @@
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
 
     /* Source Map Options */
     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-    "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    "inlineSourceMap": true /* Emit a single file with source maps instead of having a separate file. */,
     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
 
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
 
     /* Advanced Options */
-    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+[email protected]:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+
+typescript@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==