Merge pull request #20 from christophernewton/master

Frontend update

Author: FoxxMD

README.md

@@ -42,7 +42,7 @@ npm install
 ### [Docker](https://hub.docker.com/r/foxxmd/multi-scrobbler)
 
 ```
-foxxmd/spotify-scrobbler:latest
+foxxmd/multi-scrobbler:latest
 ```
 
 ## Setup
@@ -61,7 +61,7 @@ SPOTIFY_CLIENT_ID=yourId SPOTIFY_CLIENT_SECRET=yourSecret MALOJA_URL=http://doma
 #### Docker
 
 ```bash
-docker run -e "SPOTIFY_CLIENT_ID=yourId" -e "SPOTIFY_CLIENT_SECRET=yourSecret" -e "MALOJA_URL=http://domain.tld" -e "MALOJA_API_KEY=1234" -v /path/on/host/config:/home/node/app/config foxxmd/spotify-scrobbler
+docker run -e "SPOTIFY_CLIENT_ID=yourId" -e "SPOTIFY_CLIENT_SECRET=yourSecret" -e "MALOJA_URL=http://domain.tld" -e "MALOJA_API_KEY=1234" -v /path/on/host/config:/home/node/app/config foxxmd/multi-scrobbler
 ```
 
 **But I want to use json for configuration?**

index.js

@@ -35,7 +35,12 @@ const {transports} = winston;
 let output = []
 const stream = new Writable()
 stream._write = (chunk, encoding, next) => {
-    output.unshift(chunk.toString().replace('\n', ''));
+    let formatString = chunk.toString().replace('\n', '<br />')
+    .replace(/(debug)/gi, '<span class="debug text-pink-400">$1</span>')
+    .replace(/(warn)/gi, '<span class="warn text-blue-400">$1</span>')
+    .replace(/(info)/gi, '<span class="info text-yellow-500">$1</span>')
+    .replace(/(error)/gi, '<span class="error text-red-400">$1</span>')
+    output.unshift(formatString);
     output = output.slice(0, 101);
     next()
 }
@@ -198,9 +203,9 @@ app.use(bodyParser.json());
                 clients: clientData,
                 logs: {
                     output: slicedLog,
-                    limit: [10, 20, 50, 100].map(x => `<a class="capitalize ${logConfig.limit === x ? 'bold' : ''}" href="logs/settings/update?limit=${x}">${x}</a>`).join(' | '),
-                    sort: ['ascending', 'descending'].map(x => `<a class="capitalize ${logConfig.sort === x ? 'bold' : ''}" href="logs/settings/update?sort=${x}">${x}</a>`).join(' | '),
-                    level: availableLevels.map(x => `<a class="capitalize ${logConfig.level === x ? 'bold' : ''}" href="logs/settings/update?level=${x}">${x}</a>`).join(' | ')
+                    limit: [10, 20, 50, 100].map(x => `<a class="capitalize ${logConfig.limit === x ? 'font-bold no-underline pointer-events-none' : ''}" href="logs/settings/update?limit=${x}">${x}</a>`).join(' | '),
+                    sort: ['ascending', 'descending'].map(x => `<a class="capitalize ${logConfig.sort === x ? 'font-bold no-underline pointer-events-none' : ''}" href="logs/settings/update?sort=${x}">${x}</a>`).join(' | '),
+                    level: availableLevels.map(x => `<a class="capitalize ${logConfig.level === x ? 'font-bold no-underline pointer-events-none' : ''}" href="logs/settings/update?level=${x}">${x}</a>`).join(' | ')
                 }
             });
         })