Sansan/MusicServer
1
0 Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Added option to not add played to database

Browse Source 
Added Search for inspiration
Added song for match point
This commit is contained in:
Sansan committed 2023-01-01 01:21:37 +01:00
1 parent 4e876fa28f
commit 8369b5f0a1
10 files changed
+660 -502
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

cmd/frontend/src/components/items/InspirationWindow.vue
+126 -75
View File
@@ -1,31 +1,43 @@
<template>
<div class="inspirationDiv">
<div class="inspirationTitle">
<h1>Inspiration</h1>
</div>
<transition-group
tag="ul"
name="inspirationList"
class="inspirationList"
ref="inspirationList"
>
<li v-for="game in allGamesList" class="inspirationEntry" :key="game">
{{ game }}
</li>
</transition-group>
</div>
<div class="inspirationDiv">
<div class="inspirationHeader">
<div class="inspirationTitle">
<h1>Inspiration</h1>
</div>
<div class="searchInput">
<input
v-model="searchInputText"
type="text"
@input="searchGame()"
ref="inputField"
/>
</div>
</div>
<transition-group
tag="ul"
name="inspirationList"
class="inspirationList"
ref="inspirationList"
>
<li v-for="game in showingGamesList" class="inspirationEntry" :key="game">
{{ game }}
</li>
</transition-group>
</div>
</template>
<script>
import arne from '../../arne.js'
import {mapState} from "vuex";
export default {
data() {
return {
allGamesList: [],
scrollDown: true,
};
},
data() {
return {
allGamesList: [],
showingGamesList: [],
scrollDown: true,
searchInputText: "",
};
},
computed: {
...mapState(["reloadGamesList"]),
},
@@ -37,78 +49,117 @@ export default {
}
}
},
methods: {
scrollInspiration() {
let inspirationListDOM = document.querySelector(".inspirationList");
let scrollSpeed = 1;
let currentScrollLocation = 0;
methods: {
searchGame() {
this.showingGamesList = [];
for (const game of this.allGamesList) {
if (this.searchInputText === "" ||
game.toLowerCase().replace(/\s/g, "")
.includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
this.showingGamesList.push(game);
}
}
if (this.searchInputText.replace(/\s/g, "") !== "") {
this.showingGamesList.sort((n1, n2) => {
if (n1 > n2) {
return 1;
}
if (n1 < n2) {
return -1;
}
return 0;
});
}
},
scrollInspiration() {
let inspirationListDOM = document.querySelector(".inspirationList");
let scrollSpeed = 1;
let currentScrollLocation = 0;
currentScrollLocation = inspirationListDOM.scrollTop;
this.scrollDown
? inspirationListDOM.scrollBy(0, scrollSpeed)
: inspirationListDOM.scrollBy(0, -scrollSpeed);
currentScrollLocation = inspirationListDOM.scrollTop;
this.scrollDown
? inspirationListDOM.scrollBy(0, scrollSpeed)
: inspirationListDOM.scrollBy(0, -scrollSpeed);
if (currentScrollLocation === inspirationListDOM.scrollTop) {
this.scrollDown = !this.scrollDown;
}
},
reloadGames() {
this.axios({
method: "get",
url: `${arne.hostname}/music/all`,
})
.then((response) => {
this.allGamesList = response.data;
this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
})
.catch(function(error) {
console.log(error);
});
}
},
mounted() {
this.reloadGames();
window.setInterval(() => {
this.scrollInspiration();
}, 40);
},
if (currentScrollLocation === inspirationListDOM.scrollTop) {
this.scrollDown = !this.scrollDown;
}
},
reloadGames() {
this.axios({
method: "get",
url: `${arne.hostname}/music/all`,
})
.then((response) => {
this.allGamesList = response.data;
this.searchInputText = "";
this.searchGame();
this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
})
.catch(function(error) {
console.log(error);
});
}
},
mounted() {
this.reloadGames();
window.setInterval(() => {
this.scrollInspiration();
}, 40);
},
};
</script>
<style scoped>
.inspirationDiv {
width: 38vw;
height: 20vh;
color: white;
width: 38vw;
height: 20vh;
color: white;
}
.inspirationTitle {
display: flex;
background-color: #333;
height: 5vh;
justify-content: center;
align-items: center;
display: flex;
flex: auto;
align-items: flex-start;
justify-content: flex-start;
padding: 5px 10px;
}
.searchInput {
display: flex;
flex: auto;
align-items: flex-end;
justify-content: flex-end;
padding: 0 10px;
}
.inspirationHeader {
display: flex;
background-color: #333;
height: 5vh;
justify-content: center;
align-items: center;
}
.inspirationList {
display: inline-block;
background-color: rgb(66, 66, 66);
width: 38vw;
height: 22vh;
list-style: none;
overflow: hidden;
display: inline-block;
background-color: rgb(66, 66, 66);
width: 38vw;
height: 22vh;
list-style: none;
overflow: hidden;
}
.inspirationEntry {
width: 100%;
max-width: 38vw;
padding: 0.3vh 0.8vh;
font-size: 1.2rem;
width: 100%;
max-width: 38vw;
padding: 0.3vh 0.8vh;
font-size: 1.2rem;
}
@media only screen and (max-width: 1000px) {
.inspirationDiv {
display: none;
}
.inspirationDiv {
display: none;
}
}
</style>