mirror of
https://github.com/janishutz/MusicPlayerV2.git
synced 2025-11-25 13:04:23 +00:00
some more progress
This commit is contained in:
janis
@@ -21,8 +21,8 @@ app.get( '/', ( request, response ) => {
|
||||
|
||||
|
||||
app.get( '/openSongs', ( req, res ) => {
|
||||
// res.send( '{ "data": [ "/home/janis/Music/KB2022" ] }' );
|
||||
res.send( '{ "data": [ "/mnt/storage/SORTED/Music/audio/KB2022" ] }' );
|
||||
res.send( '{ "data": [ "/home/janis/Music/KB2022" ] }' );
|
||||
// res.send( '{ "data": [ "/mnt/storage/SORTED/Music/audio/KB2022" ] }' );
|
||||
// res.send( { 'data': dialog.showOpenDialogSync( { properties: [ 'openDirectory' ], title: 'Open music library folder' } ) } );
|
||||
} );
|
||||
|
||||
|
||||
0
frontend/src/client/index.html
Normal file
0
frontend/src/client/index.html
Normal file
0
frontend/src/client/showcase.css
Normal file
0
frontend/src/client/showcase.css
Normal file
121
frontend/src/client/showcase.html
Normal file
121
frontend/src/client/showcase.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=7">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Showcase - MusicPlayerV2</title>
|
||||
<link rel="stylesheet" href="/showcase.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
|
||||
.voting-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.voting {
|
||||
border-radius: 500px;
|
||||
border: 1px black solid;
|
||||
font-size: 150%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.voting-counter {
|
||||
margin: 0;
|
||||
font-size: 150%;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 30vw;
|
||||
padding: 20px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
margin-bottom: 1vh;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.entry {
|
||||
border: black 2px solid;
|
||||
padding: 1% 10%;
|
||||
width: 40vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.comment {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: lightgray;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
padding-top: 0.5vh;
|
||||
padding-bottom: 5vh,
|
||||
}
|
||||
|
||||
.content {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content" id="app">
|
||||
<div class="wrapper" v-if="hasLoaded">
|
||||
<img :src="" alt="">
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>Loading...</h1>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script src="/js/voting.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
183
frontend/src/client/showcase.js
Normal file
183
frontend/src/client/showcase.js
Normal file
@@ -0,0 +1,183 @@
|
||||
// eslint-disable-next-line no-undef
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp( {
|
||||
data() {
|
||||
return {
|
||||
hasLoaded: false,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
orderedVotes() {
|
||||
if ( this.sorting === 'oldest' ) {
|
||||
return Object.values( this.entries );
|
||||
} else if ( this.sorting === 'newest' ) {
|
||||
const ent = Object.keys( this.entries ).reverse();
|
||||
let ret = [];
|
||||
for ( let entry in ent ) {
|
||||
ret.push( this.entries[ ent[ entry ] ] );
|
||||
}
|
||||
return ret;
|
||||
} else {
|
||||
let ent = Object.keys( this.entries ).sort( ( a, b ) => {
|
||||
if ( this.sorting === 'nameUp' ) {
|
||||
return this.entries[ a ].title.localeCompare( this.entries[ b ].title );
|
||||
} else if ( this.sorting === 'nameDown' ) {
|
||||
return this.entries[ b ].title.localeCompare( this.entries[ a ].title );
|
||||
} else if ( this.sorting === 'mostVoted' ) {
|
||||
return this.entries[ b ].count - this.entries[ a ].count;
|
||||
} else if ( this.sorting === 'leastVoted' ) {
|
||||
return this.entries[ a ].count - this.entries[ b ].count;
|
||||
}
|
||||
} );
|
||||
let ret = [];
|
||||
for ( let entry in ent ) {
|
||||
ret.push( this.entries[ ent[ entry ] ] );
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
fetch( '/voting/get/' + location.pathname.substring( 8 ) ).then( response => {
|
||||
response.json().then( data => {
|
||||
this.fingerprint();
|
||||
this.entries = data;
|
||||
let fetchOptions = {
|
||||
method: 'post',
|
||||
body: JSON.stringify( { 'fingerprint': this.userIdentifier } ),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'charset': 'utf-8'
|
||||
},
|
||||
};
|
||||
fetch( '/voting/getVotedOn/' + location.pathname.substring( 8 ), fetchOptions ).then( res => {
|
||||
if ( res.status === 200 ) {
|
||||
res.json().then( json => {
|
||||
this.votedOn = JSON.parse( localStorage.getItem( 'itemsVotedOn' ) ?? '{}' );
|
||||
for ( let el in json ) {
|
||||
if ( json[ el ] === 1 ) {
|
||||
this.votedOn[ json[ el ] ] = 'up';
|
||||
} else if ( json[ el ] === -1 ) {
|
||||
this.votedOn[ json[ el ] ] = 'down';
|
||||
}
|
||||
}
|
||||
localStorage.setItem( 'itemsVotedOn', JSON.stringify( this.votedOn ) );
|
||||
this.hasLoadedVotes = true;
|
||||
} );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
fetch( '/voting/getDetails/' + location.pathname.substring( 8 ) ).then( response => {
|
||||
response.json().then( data => {
|
||||
this.votingDetails = data;
|
||||
this.hasLoadedBasics = true;
|
||||
} );
|
||||
} );
|
||||
},
|
||||
save() {
|
||||
if ( this.newSuggestion.comment && this.newSuggestion.title ) {
|
||||
let alreadyExists = false;
|
||||
for ( let el in this.entries ) {
|
||||
if ( this.entries[ el ][ 'title' ].toLocaleLowerCase() === this.newSuggestion.title.toLocaleLowerCase() ) {
|
||||
alreadyExists = true;
|
||||
}
|
||||
}
|
||||
if ( !alreadyExists ) {
|
||||
let fetchOptions = {
|
||||
method: 'post',
|
||||
body: JSON.stringify( this.newSuggestion ),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'charset': 'utf-8'
|
||||
},
|
||||
};
|
||||
fetch( '/voting/add/' + location.pathname.substring( 8 ), fetchOptions ).then( response => {
|
||||
if ( response.status === 418 ) {
|
||||
alert( 'One or more of the words in either your description or title is on our blocklist. Please make sure that you are not using any words that are NSFW, racist or similar.' );
|
||||
} else if ( response.status !== 200 ) {
|
||||
alert( 'there was an error updating' );
|
||||
} else {
|
||||
this.closePopup();
|
||||
this.getData();
|
||||
}
|
||||
} );
|
||||
this.closePopup();
|
||||
this.getData();
|
||||
} else {
|
||||
alert( 'An entry with this name exists already. Please vote on that entry.' );
|
||||
}
|
||||
} else {
|
||||
alert( 'Not all required fields are filled out!' );
|
||||
}
|
||||
},
|
||||
fingerprint() {
|
||||
// I am forced to do this because there are idiots in this world
|
||||
// https://stackoverflow.com/questions/27247806/generate-unique-id-for-each-device
|
||||
if ( !this.userIdentifier ) {
|
||||
const navigator_info = window.navigator;
|
||||
const screen_info = window.screen;
|
||||
let uid = navigator_info.mimeTypes.length;
|
||||
uid += navigator_info.userAgent.replace( /\D+/g, '' );
|
||||
uid += navigator_info.plugins.length;
|
||||
uid += screen_info.height || '';
|
||||
uid += screen_info.width || '';
|
||||
uid += screen_info.pixelDepth || '';
|
||||
this.userIdentifier = uid;
|
||||
}
|
||||
},
|
||||
vote( type, suggestionID ) {
|
||||
this.fingerprint();
|
||||
let voteType = type;
|
||||
let didDeactivate = false;
|
||||
if ( this.votedOn[ suggestionID ] === type ) {
|
||||
didDeactivate = true;
|
||||
if ( type === 'up' ) {
|
||||
voteType = 'down';
|
||||
} else {
|
||||
voteType = 'up';
|
||||
}
|
||||
} else if ( this.votedOn[ suggestionID ] ) {
|
||||
return;
|
||||
}
|
||||
let fetchOptions = {
|
||||
method: 'post',
|
||||
body: JSON.stringify( { 'voteType': voteType, 'id': suggestionID, 'fingerprint': this.userIdentifier } ),
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'charset': 'utf-8'
|
||||
},
|
||||
};
|
||||
fetch( '/voting/vote/' + location.pathname.substring( 8 ), fetchOptions ).then( response => {
|
||||
if ( response.status === 409 ) {
|
||||
alert( 'You have already voted on this!' );
|
||||
} else if ( response.status !== 200 ) {
|
||||
alert( 'there was an error updating' );
|
||||
} else {
|
||||
this.votedOn[ suggestionID ] = didDeactivate ? undefined : voteType;
|
||||
localStorage.setItem( 'itemsVotedOn', JSON.stringify( this.votedOn ) );
|
||||
this.getData();
|
||||
}
|
||||
} );
|
||||
},
|
||||
closePopup() {
|
||||
// eslint-disable-next-line no-undef
|
||||
$( '#popup' ).fadeOut( 500 );
|
||||
// eslint-disable-next-line no-undef
|
||||
$( 'body' ).removeClass( 'menuOpen' );
|
||||
this.getData();
|
||||
},
|
||||
addSuggestion () {
|
||||
// eslint-disable-next-line no-undef
|
||||
$( '#popup' ).fadeIn( 500 );
|
||||
// eslint-disable-next-line no-undef
|
||||
$( 'body' ).addClass( 'menuOpen' );
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
}
|
||||
} ).mount( '#app' );
|
||||
Reference in New Issue
Block a user