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

1
src/frontend/common.js
View File

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

10
src/frontend/index.ejs
View File

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

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

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

6
src/frontend/sheets.ejs
View File

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

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

@@ -1,4 +1,3 @@
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<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'>
<a class="navbar-brand" href="/">
<img src="../images/snail.png" width="30" height="30" alt="SlowDowner Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class='nav-link' href='/'><i class="fa fa-music"></i> Musik</a>
</li>
<li class="nav-item">
<a class='nav-link' href='/sheets.html'><i class="fa fa-file"></i> Noten</a>
</li>
</ul>
</div>
<ul class="nav nav-pills nav-dark bg-dark">
<li class="nav-item">
<a class="nav-brand" href="/">
<img src="../images/snail.png" width="30" height="30" alt="SlowDowner Logo">
</a>
</li>
<li class="nav-item">
<a class='nav-link' href='/'><i class="fa fa-music"></i> Musik</a>
</li>
<li class="nav-item">
<a class='nav-link' href='/sheets.html'><i class="fa fa-file"></i> Noten</a>
</li>
</ul>
</div>
</nav>

16
src/main.js
View File

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