diff --git a/client/index.html b/client/index.html
index 93c36a98947f7f5fb5459aa4d2775e618482b734..4446e03ed6af25e65a12aacac410ff11ad56e74c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,11 +3,13 @@
<head>
<meta charset="UTF-8">
<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">
</head>
<body>
<!-- main file running the express app -->
<script src='./main.js' type='text/javascript'></script>
-
+
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/client/main.js b/client/main.js
index 9d81ac43042742d94e5ee5328b8b465724a0ff52..d4c84d5b9e631cbf4705b4414d087555050fb12f 100644
--- a/client/main.js
+++ b/client/main.js
@@ -8,9 +8,9 @@ function launcher () {
var publicRouter = require('./routes/public.js');
- app.set('views', __dirname + '/views');
+ app.set('views', `${__dirname}/views`);
app.set('view engine', 'ejs');
- app.use(express.static(__dirname + '/../style'));
+ app.use(express.static(`${__dirname}/../style`));
app.use('/', publicRouter);
app.listen(port, () => {
diff --git a/instance/index.html b/instance/index.html
index 12f138d3a675585373d59a666e2663ed9fa3819f..43230f5344044fb479c2747ce0b367a482cbbdb1 100644
--- a/instance/index.html
+++ b/instance/index.html
@@ -24,19 +24,18 @@
LektorApp Admin Interface
</h2>
</div>
- <div id="headerBody" class="card-body text-center">
- <button id="closeButton" type="button" class="btn btn-outline-primary">
- Quit LektorApp
- </button>
+ <div id="buttonPanelListLeft" class="card-body text-left"
+ style="padding-top: 0px;padding-bottom: 0px;padding-right: 0px;padding-left: 0px;">
+ <!-- Will be generated on loading page --!>
</div>
</div>
</div>
<div id="panelWrapper" class="row">
<div id="panelLeft" class="col panel">
-
+ <!-- Will be generated on loading page --!>
</div>
<div id="panelRight" class="col panel">
-
+ <!-- Will be generated on loading page --!>
</div>
</div>
</div>
diff --git a/instance/main.js b/instance/main.js
index 147a3926e3a87b3ec7bece0068246cc55618d1e1..14abccc47846974de29c2956d15cf479cacb3647 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -1,22 +1,53 @@
const { ipcRenderer } = require('electron');
-const logger = require('../common/logger.js');
+const logger = require('../common/logger.js');
const karaJSON = require('../test/dummyKara.json');
+const buttonList = [
+ [ "left", "Play", "commandPlay" ],
+ [ "left", "Stop", "commandStop" ],
+ [ "right", "Quit LektorApp", "closeButton" ]
+];
-window.onload = function(){
- const closeApp = document.getElementById("closeButton");
- closeApp.addEventListener('click', () => {
+window.onload = () => {
+ createButtonList(buttonList);
+ karaList(karaJSON);
+
+ document.getElementById("closeButton").addEventListener('click', () => {
ipcRenderer.send('close-app')
});
- karaList(karaJSON);
+ document.getElementById("commandPlay").addEventListener('click', () => {
+ logger.debug("Command play !");
+ });
+
logger.debug("Window loaded");
}
-function karaList(karas){
+function createButtonList(list) {
+ var renderHtmlLeft = "";
+ var renderHtmlRight = "";
+ list.forEach( (btn) => {
+ if (btn[0] == "left") {
+ renderHtmlLeft = `${renderHtmlLeft}
+ <button id="${btn[2]}" type="button" class="btn btn-outline-primary">
+ ${btn[1]}
+ </button>`;
+ logger.debug(`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-outline-primary">
+ ${btn[1]}
+ </button>`;
+ logger.debug(`Create button for "${btn[1]}" with id "${btn[2]} at the right"`);
+ }
+ });
+ document.getElementById("buttonPanelListLeft").innerHTML = renderHtmlLeft + renderHtmlRight;
+}
+
+function karaList(karas) {
var karaList = "";
var playingList = "";
- karas.forEach(function(kara) {
- if(kara.author_name === "Sting"){
+ karas.forEach( (kara) => {
+ if (kara.author_name === "Sting") {
playingList += '<div class="card shadow" style="margin: 5px; border-radius: 10px; margin: 20px 0px 20px 0px;"><div class="card-body">' + kara.source_name + ' - ' + kara.song_name + '</div></div>';
}
karaList += '<div class="card shadow" style="margin: 5px; border-radius: 10px; margin: 20px 0px 20px 0px;"><div class="card-body">' + kara.source_name + ' - ' + kara.song_name + '</div></div>';
diff --git a/instance/views/main.ejs b/instance/views/main.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391