From dd797c3fe1888fd58cf86b995af008ad4b531864 Mon Sep 17 00:00:00 2001 From: Kubat <mael.martin31@gmail.com> Date: Thu, 11 Feb 2021 16:40:30 +0100 Subject: [PATCH] Update prettierrc.json for more readability --- .prettierrc.json | 5 +- client/index.html | 5 +- common/db.js | 28 ++++---- common/lkt.js | 22 ++----- common/logger.js | 10 +-- instance/index.html | 46 +++----------- instance/main.js | 141 +++++++++++++---------------------------- style/css/instance.css | 6 ++ 8 files changed, 79 insertions(+), 184 deletions(-) diff --git a/.prettierrc.json b/.prettierrc.json index 60a7595..f2af50f 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -2,10 +2,13 @@ "trailingComma": "es5", "useTabs": false, "tabWidth": 4, + "printWidth": 120, + "jsxBracketSameLine": true, "semi": true, "singleQuote": true, "bracketSpacing": true, "arrowParens": "avoid", "htmlWhitespaceSensitivity": "strict", - "endOfLine": "lf" + "endOfLine": "lf", + "vueIndentScriptAndStyle": true } diff --git a/client/index.html b/client/index.html index 4a6f71e..5329550 100644 --- a/client/index.html +++ b/client/index.html @@ -5,10 +5,7 @@ <title>Lektor App</title> <script src="../style/jquery/jquery-3.5.1.js"></script> <script src="../style/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script> - <link - rel="stylesheet" - href="../style/bootstrap-4.5.2-dist/css/bootstrap.min.css" - /> + <link rel="stylesheet" href="../style/bootstrap-4.5.2-dist/css/bootstrap.min.css" /> </head> <body> <!-- main file running the express app --> diff --git a/common/db.js b/common/db.js index ddfc7c5..1e795a3 100644 --- a/common/db.js +++ b/common/db.js @@ -71,25 +71,20 @@ class KaraDatabase { song_name AS title, source_name AS source FROM kara WHERE string LIKE ? OR author_name COLLATE nocase = ?`; - if (offset != null && limit != null) - __sqlQuery += ` LIMIT ${offset}, ${limit}`; + if (offset != null && limit != null) __sqlQuery += ` LIMIT ${offset}, ${limit}`; function __getRecords(db) { return new Promise(resolv => { - db.all( - __sqlQuery, - [`%${queryString}%`, queryString], - (err, rows) => { - if (err) { - logger.error('db', err); - throw err; - } - rows.forEach(row => { - __ret.push(row); - }); - resolv(__ret); + db.all(__sqlQuery, [`%${queryString}%`, queryString], (err, rows) => { + if (err) { + logger.error('db', err); + throw err; } - ); + rows.forEach(row => { + __ret.push(row); + }); + resolv(__ret); + }); }); } @@ -108,8 +103,7 @@ class KaraDatabase { language, author_name AS author, song_name AS title, source_name AS source FROM kara`; - if (offset != null && limit != null) - __sqlQuery += ` LIMIT ${offset}, ${limit}`; + if (offset != null && limit != null) __sqlQuery += ` LIMIT ${offset}, ${limit}`; function __getRecords(db) { return new Promise(resolv => { diff --git a/common/lkt.js b/common/lkt.js index 238f0cd..09b3ba5 100644 --- a/common/lkt.js +++ b/common/lkt.js @@ -34,26 +34,17 @@ class LktClient { this.m_socket.setTimeout(3000); this.m_socket.setEncoding('utf8'); this.m_socket.on('timeout', () => { - logger.error( - 'lkt', - `Got timeout while connecting to localhost:${config.port}` - ); + logger.error('lkt', `Got timeout while connecting to localhost:${config.port}`); this.m_socket.end(); }); this.m_socket.on('ready', () => { - logger.debug( - 'lkt', - `Ready to use socker with localhost:${config.port}` - ); + logger.debug('lkt', `Ready to use socker with localhost:${config.port}`); this.m_online = true; }); this.m_socket.on('end', () => { - logger.info( - 'lkt', - `Disconnected from server localhost:${config.port}` - ); + logger.info('lkt', `Disconnected from server localhost:${config.port}`); this.m_online = false; }); @@ -170,12 +161,7 @@ class LktClient { setInterval(() => client.m_socket.write(`status\n`), 100); client.m_socket.on('data', data => { dataObj = __mpdToObject(data); - if ( - dataObj.elapsed && - dataObj.duration && - dataObj.state && - dataObj.song - ) { + if (dataObj.elapsed && dataObj.duration && dataObj.state && dataObj.song) { LktClient.setSongTimeData( parseInt(dataObj.elapsed, 10), parseInt(dataObj.duration, 10), diff --git a/common/logger.js b/common/logger.js index 72a4bd8..c91112f 100644 --- a/common/logger.js +++ b/common/logger.js @@ -75,18 +75,12 @@ var __lektord = data => { break; case '.': if (line.length >= 2 && line[1] != '.') { - logger.info( - 'lektord', - line.replace(/^\. (.*)$/g, '$1') - ); + logger.info('lektord', line.replace(/^\. (.*)$/g, '$1')); break; } /* Fallthrough case */ default: - logger.debug( - 'lektord', - line.replace(/^\.\.\. (.*)$/g, '\t$1') - ); + logger.debug('lektord', line.replace(/^\.\.\. (.*)$/g, '\t$1')); break; } }); diff --git a/instance/index.html b/instance/index.html index 048d4e2..332dc97 100644 --- a/instance/index.html +++ b/instance/index.html @@ -7,37 +7,19 @@ window.$ = window.jQuery = require('../style/jquery/jquery-3.5.1.js'); </script> <script src="../style/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script> - <link - rel="stylesheet" - href="../style/bootstrap-4.5.2-dist/css/bootstrap.min.css" - /> + <link rel="stylesheet" href="../style/bootstrap-4.5.2-dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="../style/css/instance.css" /> - <link - rel="stylesheet" - href="../style/fontawesome-free-5.15.1-web/css/all.min.css" - /> + <link rel="stylesheet" href="../style/fontawesome-free-5.15.1-web/css/all.min.css" /> <script src="./main.js"></script> <script></script> </head> <body> - <div - id="modal-settings" - class="modal bd-example-modal-lg" - tabindex="-1" - role="dialog" - > - <div - class="modal-dialog modal-lg modal-dialog-centered" - role="document" - > + <div id="modal-settings" class="modal bd-example-modal-lg" tabindex="-1" role="dialog"> + <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title">Amadeus settings</h2> - <button - type="button" - class="btn btn-outline-primary btn-lg modal-close" - aria-label="Close" - > + <button type="button" class="btn btn-outline-primary btn-lg modal-close" aria-label="Close"> <i class="fas fa-window-close"></i> </button> </div> @@ -55,25 +37,13 @@ style="-webkit-app-region: drag" ></div> <div id="panelWrapper" class="row"> - <ul - id="panelLeft" - class="col panel d-flex flex-column bd-highlight mb-3" - ></ul> - <ul - id="panelRight" - class="col panel d-flex flex-column bd-highlight mb-3" - ></ul> + <ul id="panelLeft" class="col panel d-flex flex-column bd-highlight mb-3"></ul> + <ul id="panelRight" class="col panel d-flex flex-column bd-highlight mb-3"></ul> </div> <div id="progress" class="progress" - style=" - z-index: 666; - position: fixed !important; - right: 0; - left: 0; - bottom: 0; - " + style="z-index: 666; position: fixed !important; right: 0; left: 0; bottom: 0" > <div class="progress-bar" diff --git a/instance/main.js b/instance/main.js index 30a1088..7c05b70 100644 --- a/instance/main.js +++ b/instance/main.js @@ -85,10 +85,7 @@ window.onload = () => { /* Create the button list */ function createButtonList(list) { function action(ipc, argument) { - logger.error( - 'instance', - 'The action function builder for control buttons is not implemented' - ); + logger.error('instance', 'The action function builder for control buttons is not implemented'); } var renderHtmlLeft = ''; var renderHtmlRight = ''; @@ -99,33 +96,21 @@ function createButtonList(list) { <button id="${btn[2]}" type="button" class="btn btn-primary p-2 bd-highlight" data-toggle="tooltip" data-placement="bottom" title="${btn[3]}" style="-webkit-app-region: no-drag">${btn[1]}</button>`; - logger.debug( - 'instance', - `Create button for "${btn[1]}" with id "${btn[2]} at the left"` - ); + logger.debug('instance', `Create button for "${btn[1]}" with id "${btn[2]} at the left"`); } else if (btn[0] == 'right') { renderHtmlRight = `${renderHtmlRight} <button id="${btn[2]}" type="button" class="btn btn-secondary p-2 bd-highlight" data-toggle="tooltip" data-placement="bottom" title="${btn[3]}" style="-webkit-app-region: no-drag">${btn[1]}</button>`; - logger.debug( - 'instance', - `Create button for "${btn[1]}" with id "${btn[2]} at the right"` - ); + logger.debug('instance', `Create button for "${btn[1]}" with id "${btn[2]} at the right"`); } else if (btn[0] == 'sleft') { renderHtmlSLeft = `${renderHtmlSLeft} <button id="${btn[2]}" type="button" class="btn btn-secondary p-2 bd-highlight" data-toggle="tooltip" data-placement="bottom" title="${btn[3]}" style="-webkit-app-region: no-drag">${btn[1]}</button>`; - logger.debug( - 'instance', - `Create button for "${btn[1]}" with id "${btn[2]} at the right"` - ); + logger.debug('instance', `Create button for "${btn[1]}" with id "${btn[2]} at the right"`); } else { - logger.warn( - 'instance', - `Unknown button type ${btn[0]} in top bar builder` - ); + logger.warn('instance', `Unknown button type ${btn[0]} in top bar builder`); } }); document.getElementById('buttonPanelListLeft').innerHTML = ` @@ -168,21 +153,14 @@ ipcRenderer.on('reload-db-responce', (event, arg) => { logger.debug('instance', `Web page got reload-db`); document.getElementById('panelLeft').innerHTML = ''; arg.forEach(kara => { - ejs.renderFile( - __dirname + '/views/karaDBListItem.ejs', - { kara: kara }, - (err, data) => { - if (err) logger.error('instance', err); - document.getElementById('panelLeft').innerHTML = ` + ejs.renderFile(__dirname + '/views/karaDBListItem.ejs', { kara: kara }, (err, data) => { + if (err) logger.error('instance', err); + document.getElementById('panelLeft').innerHTML = ` ${document.getElementById('panelLeft').innerHTML} ${data}`; - } - ); + }); }); - [].forEach.call( - document.querySelectorAll('#panelLeft .karaCard'), - addDBKaraEventHandlers - ); + [].forEach.call(document.querySelectorAll('#panelLeft .karaCard'), addDBKaraEventHandlers); }); /* Create the right panel: the queue */ @@ -192,62 +170,44 @@ ipcRenderer.on('reload-queue-responce', (event, arg) => { document.getElementById('panelRight').innerHTML = ''; arg.forEach(kara => { countKaraInQueue++; - ejs.renderFile( - __dirname + '/views/karaQueueListItem.ejs', - { kara: kara }, - (err, data) => { - if (err) logger.error('instance', err); - document.getElementById('panelRight').innerHTML = ` + ejs.renderFile(__dirname + '/views/karaQueueListItem.ejs', { kara: kara }, (err, data) => { + if (err) logger.error('instance', err); + document.getElementById('panelRight').innerHTML = ` ${document.getElementById('panelRight').innerHTML} ${data}`; - } - ); + }); }); - [].forEach.call( - document.querySelectorAll('#panelRight .karaCard'), - addQueueKaraEventHandlers - ); + [].forEach.call(document.querySelectorAll('#panelRight .karaCard'), addQueueKaraEventHandlers); }); ipcRenderer.on('send-song-time-data', (event, timeData) => { document.getElementById('progressBar').style.width = `${ - (timeData.elapsed / timeData.total) * - document.documentElement.clientWidth + (timeData.elapsed / timeData.total) * document.documentElement.clientWidth }px`; if (timeData.state == 'play' || timeData.state == 'pause') { if (currentSong != timeData.song) { - document.getElementsByClassName('karaQueue')[ - currentSong - ].style.background = '#4e5d6c'; + document.getElementsByClassName('karaQueue')[currentSong].style.background = '#4e5d6c'; currentSong = timeData.song; } - document.getElementsByClassName('karaQueue')[ - timeData.song - ].style.background = '#6b7d8e'; + document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#6b7d8e'; } else { - document.getElementsByClassName('karaQueue')[ - timeData.song - ].style.background = '#4e5d6c'; + document.getElementsByClassName('karaQueue')[timeData.song].style.background = '#4e5d6c'; } }); function addDBKaraEventHandlers(element) { element.addEventListener('dragstart', onDragStartDB, false); element.addEventListener('dragend', onDragEnd, false); - element - .getElementsByClassName('karaAddBtn')[0] - .addEventListener('click', () => - ipcRenderer.send('add-kara-queue-id', { - id: element.getElementsByClassName('karaID')[0].innerText, - }) - ); - element - .getElementsByClassName('karaInsertBtn')[0] - .addEventListener('click', () => - ipcRenderer.send('insert-kara-queue-id', { - id: element.getElementsByClassName('karaID')[0].innerText, - }) - ); + element.getElementsByClassName('karaAddBtn')[0].addEventListener('click', () => + ipcRenderer.send('add-kara-queue-id', { + id: element.getElementsByClassName('karaID')[0].innerText, + }) + ); + element.getElementsByClassName('karaInsertBtn')[0].addEventListener('click', () => + ipcRenderer.send('insert-kara-queue-id', { + id: element.getElementsByClassName('karaID')[0].innerText, + }) + ); } function addQueueKaraEventHandlers(element) { @@ -257,41 +217,29 @@ function addQueueKaraEventHandlers(element) { element.addEventListener('dragleave', ondragLeave, false); element.addEventListener('drop', onDrop, false); element.addEventListener('dragend', onDragEnd, false); - element - .getElementsByClassName('karaDeleteBtn')[0] - .addEventListener('click', () => - ipcRenderer.send('delete-kara-queue-pos', { - position: element.getElementsByClassName('karaPosition')[0] - .innerText, - }) - ); - element - .getElementsByClassName('karaPlayBtn')[0] - .addEventListener('click', () => - ipcRenderer.send('play-kara-queue-pos', { - position: element.getElementsByClassName('karaPosition')[0] - .innerText, - }) - ); + element.getElementsByClassName('karaDeleteBtn')[0].addEventListener('click', () => + ipcRenderer.send('delete-kara-queue-pos', { + position: element.getElementsByClassName('karaPosition')[0].innerText, + }) + ); + element.getElementsByClassName('karaPlayBtn')[0].addEventListener('click', () => + ipcRenderer.send('play-kara-queue-pos', { + position: element.getElementsByClassName('karaPosition')[0].innerText, + }) + ); } function onDragStartDB(event) { isDnDFromDB = true; event.dataTransfer.effectAllowed = 'move'; event.currentTarget.style.opacity = 0.4; - event.dataTransfer.setData( - 'text/plain', - event.currentTarget.getElementsByClassName('karaID')[0].innerText - ); + event.dataTransfer.setData('text/plain', event.currentTarget.getElementsByClassName('karaID')[0].innerText); } function onDragStartQueue(event) { event.dataTransfer.effectAllowed = 'move'; event.currentTarget.style.opacity = 0.4; - event.dataTransfer.setData( - 'text/plain', - event.currentTarget.getElementsByClassName('karaPosition')[0].innerText - ); + event.dataTransfer.setData('text/plain', event.currentTarget.getElementsByClassName('karaPosition')[0].innerText); } function onDragEnter(event) { @@ -324,16 +272,13 @@ function onDrop(event) { if (isDnDFromDB) { ipcRenderer.send('add-kara-queue-pos', { id: event.dataTransfer.getData('text/plain'), - position: event.currentTarget.getElementsByClassName( - 'karaPosition' - )[0].innerText, + position: event.currentTarget.getElementsByClassName('karaPosition')[0].innerText, queueSize: countKaraInQueue, }); } else { ipcRenderer.send('queue-moved-kara', { from: event.dataTransfer.getData('text/plain'), - to: event.currentTarget.getElementsByClassName('karaPosition')[0] - .innerText, + to: event.currentTarget.getElementsByClassName('karaPosition')[0].innerText, }); } isDnDFromDB = false; diff --git a/style/css/instance.css b/style/css/instance.css index 417ad34..21de65d 100644 --- a/style/css/instance.css +++ b/style/css/instance.css @@ -158,3 +158,9 @@ input[type="color"]:focus, outline: none !important; box-shadow: none !important; } + +/* Modal */ +.modal-close { + border: 0px; + background: none !important; +} -- GitLab