felixh/slowdowner
1
0
Fork 0
Code Pull Requests Releases Activity

update according to webpack changes, replace collapsable navbar with simple links, add download button, import socket.io.client from bundle, fix weird styling issues after dependencies update

Browse Source
This commit is contained in:
felix
2022-05-31 22:41:46 +00:00
parent 94b03e90d9
commit d5691ad264
8 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/frontend/app.js
View File

@@ -211,10 +211,10 @@ function updateDownloadLink(){
} }
function tableClickListener(){ function tableClickListener(){
$( "tbody tr").unbind(); $( "tbody tr td").unbind();
$( "tbody tr").hover(function(){ $( "tbody tr td").hover(function(){
let selected = $(this).hasClass("ui-state-highlight"); let selected = $(this).hasClass("ui-state-highlight");
$("tbody tr").removeClass("ui-state-highlight"); $("tbody tr td").removeClass("ui-state-highlight");
if (!selected) { if (!selected) {
$(this).addClass("ui-state-highlight"); $(this).addClass("ui-state-highlight");
} }
@@ -278,6 +278,7 @@ Player.prototype = {
requestAnimationFrame(self.step.bind(self)); requestAnimationFrame(self.step.bind(self));
}, },
onload: function() { onload: function() {
console.log(sound.duration())
$( '#txt-duration' ).text(self.formatTime(Math.round(sound.duration()))); $( '#txt-duration' ).text(self.formatTime(Math.round(sound.duration())));
$( '#playBtn' ).prop("disabled", false); $( '#playBtn' ).prop("disabled", false);
$( '#downloadBtn' ).prop("disabled", false); $( '#downloadBtn' ).prop("disabled", false);

1
src/frontend/common.js
View File

@@ -1,5 +1,6 @@
import './scss/app.scss'; import './scss/app.scss';
import 'bootstrap'; import 'bootstrap';
const io = require('socket.io-client')
//adding the fontawesome icons //adding the fontawesome icons
import { library, dom } from "@fortawesome/fontawesome-svg-core"; import { library, dom } from "@fortawesome/fontawesome-svg-core";

10
src/frontend/index.ejs
View File

@@ -2,17 +2,17 @@
<html> <html>
<head> <head>
<title>SlowDowner</title> <title>SlowDowner</title>
${require ('./views/head.html')} <%= require('./views/head.html').default %>
</head> </head>
<body> <body>
${require ('./views/menu.html')} <%= require('./views/menu.html').default %>
<div class='container-fluid'> <div class='container-fluid'>
<div class='row'> <div class='row'>
<div class='col-md-5'> <div class='col-md-5'>
<div class="input-group mb-3"> <div class="input-group mb-3">
<select class="custom-select" id="dir-dropdown"></select> <select class="custom-select" id="dir-dropdown"></select>
</div> </div>
<table id='songlist' class='table table-bordered'> <table id='songlist' class='table table-bordered table-striped'>
<thead> <thead>
<tr> <tr>
<th>Stücke</th> <th>Stücke</th>
@@ -27,7 +27,7 @@
<p class="info-txt-small" id="txt-timer">0:00</p> <p class="info-txt-small" id="txt-timer">0:00</p>
</div> </div>
<div class='col-6'> <div class='col-6'>
<p class="info-txt-small text-right" id="txt-duration">0:00</p> <p class="info-txt-small align-right" id="txt-duration">0:00</p>
</div> </div>
<div class="col-12 slidecontainer spacer-bottom"> <div class="col-12 slidecontainer spacer-bottom">
<input type="range" min="0" max="1000" value="0" class="slider" id="position-slider"> <input type="range" min="0" max="1000" value="0" class="slider" id="position-slider">
@@ -66,7 +66,7 @@
</div> </div>
</div> </div>
</div> </div>
${require ('./views/footer.html')} <%= require('./views/footer.html').default %>
</div> </div>
</body> </body>
</html> </html>

11
src/frontend/scss/app.scss
View File

@@ -5,6 +5,7 @@
/* Colors */ /* Colors */
$secondary-color: #456632; $secondary-color: #456632;
$bg-dark: #343a40; $bg-dark: #343a40;
$bg-grey: #fefefe;
/* scss */ /* scss */
@@ -25,6 +26,7 @@ $bg-dark: #343a40;
body { body {
font: 13px Helvetica, Arial; font: 13px Helvetica, Arial;
background-color: $bg-grey;
} }
.container-fluid { .container-fluid {
@@ -32,6 +34,10 @@ body {
min-width: 25em; min-width: 25em;
} }
.nav-link{
color: $bg-grey;
}
.info-txt{ .info-txt{
font-size: 1.5em; font-size: 1.5em;
} }
@@ -41,7 +47,8 @@ body {
} }
.btn{ .btn{
font-size: 1.8em; font-size: 1.8em;
width: 2em;
} }
#txt-duration-label { #txt-duration-label {
@@ -123,6 +130,6 @@ body {
} }
.ui-state-highlight { .ui-state-highlight {
color: #FFFFFF !important; color: #FFF !important;
background: $bg-dark !important; background: $bg-dark !important;
} }

6
src/frontend/sheets.ejs
View File

@@ -2,10 +2,10 @@
<html> <html>
<head> <head>
<title>Noten</title> <title>Noten</title>
${require ('./views/head.html')} <%= require('./views/head.html').default %>
</head> </head>
<body> <body>
${require ('./views/menu.html')} <%= require('./views/menu.html').default %>
<div class='container-fluid'> <div class='container-fluid'>
<div class='row'> <div class='row'>
<div class='col-md-12'> <div class='col-md-12'>
@@ -30,7 +30,7 @@
<div id='pdf_viewer'></div> <div id='pdf_viewer'></div>
</div> </div>
</div> </div>
${require ('./views/footer.html')} <%= require('./views/footer.html').default %>
</div> </div>
</body> </body>
</html> </html>

3
src/frontend/views/head.html
View File

@@ -1,4 +1,3 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='shortcut icon' type='image/png' href='../images/snail.png'/> <link rel='shortcut icon' type='image/png' href='../images/snail.png'/>
<script src='/socket.io/socket.io.js'></script>

31
src/frontend/views/menu.html
View File

@@ -1,20 +1,17 @@
<nav class='navbar navbar-dark navbar-expand-sm bg-dark'> <nav class='navbar navbar-dark bg-dark'>
<div class='container-fluid'> <div class='container-fluid'>
<a class="navbar-brand" href="/"> <ul class="nav nav-pills nav-dark bg-dark">
<img src="../images/snail.png" width="30" height="30" alt="SlowDowner Logo"> <li class="nav-item">
</a> <a class="nav-brand" href="/">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <img src="../images/snail.png" width="30" height="30" alt="SlowDowner Logo">
<span class="navbar-toggler-icon"></span> </a>
</button> </li>
<div class="collapse navbar-collapse" id="navbarNav"> <li class="nav-item">
<ul class="navbar-nav"> <a class='nav-link' href='/'><i class="fa fa-music"></i> Musik</a>
<li class="nav-item"> </li>
<a class='nav-link' href='/'><i class="fa fa-music"></i> Musik</a> <li class="nav-item">
</li> <a class='nav-link' href='/sheets.html'><i class="fa fa-file"></i> Noten</a>
<li class="nav-item"> </li>
<a class='nav-link' href='/sheets.html'><i class="fa fa-file"></i> Noten</a> </ul>
</li>
</ul>
</div>
</div> </div>
</nav> </nav>

16
src/main.js
View File

@@ -46,12 +46,16 @@ function get_file_list(socket, req){
let json = []; let json = [];
let files = []; let files = [];
let songs_path = path.join(__dirname, '../dist/', req) let songs_path = path.join(__dirname, '../dist/', req)
fs.readdirSync(songs_path).forEach(dir => { fs.readdir(songs_path, (err, res) => {
fs.readdirSync(path.join(songs_path,dir)).forEach(file => { if(err) io.to(socket.id).emit('message','failed to load data... - '+err)
files.push({'name': file}); else
res.forEach(dir => {
fs.readdirSync(path.join(songs_path,dir)).forEach(file => {
files.push({'name': file});
});
json.push({'name': dir, 'files':files});
files = [];
}); });
json.push({'name': dir, 'files':files}); io.to(socket.id).emit('update_' + req ,json);
files = [];
}); });
io.to(socket.id).emit('update_' + req ,json);
} }