client: request folder lists from server

This commit is contained in:
geoffrey45 2021-12-15 15:20:12 +03:00
parent 803c813786
commit 701f61250e
14 changed files with 111 additions and 61 deletions

1
server/.gitignore vendored
View File

@ -1 +0,0 @@
.vscode

View File

@ -14,6 +14,7 @@ requests = "*"
watchdog = "*"
progress = "*"
pillow = "*"
gunicorn = "*"
[dev-packages]
autopep8 = "*"

10
server/Pipfile.lock generated
View File

@ -1,7 +1,7 @@
{
"_meta": {
"hash": {
"sha256": "99f472c203bd38494cccddd96820194910b1693da8ea6ed6d4b141895ff3002e"
"sha256": "ac6887caf42c4ea723d7e1e9fc8a94cb42b2cd815c447eb2afd0f35a73f314e1"
},
"pipfile-spec": 6,
"requires": {
@ -55,6 +55,14 @@
"index": "pypi",
"version": "==3.0.10"
},
"gunicorn": {
"hashes": [
"sha256:9dcc4547dbb1cb284accfb15ab5667a0e5d1881cc443e0677b4882a4067a807e",
"sha256:e0a968b5ba15f8a328fdfd7ab1fcb5af4470c28aaf7e55df02a99bc13138e6e8"
],
"index": "pypi",
"version": "==20.1.0"
},
"idna": {
"hashes": [
"sha256:84d9dd047ffa80596e0f246e2eab0b391788b0503584e8945f2368256d2735ff",

View File

@ -10,8 +10,3 @@ def create_app():
app.register_blueprint(api.bp, url_prefix='/')
return app
if __name__ == '__main__':
app = create_app()
app.run(debug=True)

6
server/manage.py Normal file
View File

@ -0,0 +1,6 @@
from app import create_app
if __name__ == '__main__':
app = create_app()
app.run(debug=True, threaded=True, host="127.0.0.1", port=9876)

View File

@ -1,10 +1,14 @@
export PORT=8000
export music_dir="/home/cwilvx/Music/"
export FLASK_APP=app
export FLASK_DEBUG=1
export FLASK_RUN_PORT=8008
# export FLASK_APP=app
# export FLASK_DEBUG=1
# export FLASK_RUN_PORT=8008
# export music_dirs="['/home/cwilvx/Music/', '/home/cwilvx/FreezerMusic']"
flask run
# flask run
python manage.py
# gunicorn -b 0.0.0.0:9876 --workers=4 "wsgi:create_app()" --log-level=debug

5
server/wsgi.py Normal file
View File

@ -0,0 +1,5 @@
from app import create_app
if __name__ == '__main__':
app = create_app()
app.run(debug=True, threaded=True)

View File

@ -1,29 +1,32 @@
<template>
<div class="f-container rounded">
<p>folders in this directory</p>
<div id="f-items">
<router-link :to="{ path: '/' }" v-for="folder in folders" :key="folder">
<p v-if="folders.length">folders in this directory</p>
<div id="f-items" v-if="folders.length">
<router-link
:to="{ name: 'FolderView', params: { path: folder.path } }"
v-for="folder in folders"
:key="folder"
>
<div class="f-item rounded">
<span class="f-item-text">{{ folder.name }}</span>
<div class="f-item-text ellip">{{ folder.name }}</div>
<div class="f-item-count">{{ folder.count }} tracks</div>
</div>
</router-link>
</div>
<div v-else>
<p>No folders in this directory</p>
</div>
</div>
</template>
<script>
import Folders from "../../data/folders.js";
export default {
setup() {
const folders = Folders.folders;
return { folders };
},
props: ["folders"],
setup() {},
};
</script>
<style>
<style lang="scss">
.f-container {
margin-bottom: 1rem;
background: rgba(31, 30, 30, 0.521);
@ -49,7 +52,6 @@ export default {
min-width: 14.4rem;
min-height: 5rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-image: url(../../assets/icons/folder.svg);
@ -57,21 +59,23 @@ export default {
background-position: 1rem;
background-size: 10% 100%;
background-color: rgba(80, 80, 80, 0.247);
.f-item-count {
position: absolute;
top: 70%;
left: 3rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.f-item-text {
position: absolute;
left: 3rem;
text-align: left;
}
}
.f-container .f-item:hover {
background-color: rgba(0, 0, 0, 0.527);
}
.f-container .f-item-text {
position: absolute;
left: 3rem;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
</style>

View File

@ -45,7 +45,7 @@
</div>
</router-link>
<hr />
<router-link :to="{ name: 'FolderView' }">
<router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon image" id="folders-icon"></div>
@ -54,7 +54,7 @@
</div>
</router-link>
<hr />
<router-link :to="{ name: 'FolderView' }">
<router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon image" id="settings-icon"></div>
@ -104,7 +104,7 @@ export default {
.collapsed .nav-button {
font-size: smaller;
margin-top: 5px;
transition: all .2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.side-nav-container .nav-button:hover {

View File

@ -0,0 +1,23 @@
import { ref } from "@vue/reactivity";
let home_url = "http://127.0.0.1:9876";
const getData = async (path) => {
const songs = ref(null);
const folders = ref(null);
const res = await fetch(`${home_url}/?f=${path}`);
if (!res.ok) {
const message = `An erro has occured: ${res.status}`;
throw new Error(message);
}
const data = await res.json();
songs.value = data.songs;
folders.value = data.folders;
return { songs, folders };
};
export default getData;

View File

@ -1,17 +0,0 @@
const scrollLeftX = (artists_dom) => {
const dom = artists_dom.value;
dom.scrollBy({
left: -700,
behavior: "smooth",
});
};
const scrollRightX = (artists_dom) => {
const dom = artists_dom.value;
dom.scrollBy({
left: 700,
behavior: "smooth",
});
};
export { scrollLeftX, scrollRightX, };

View File

@ -15,7 +15,7 @@ const routes = [
component: Home,
},
{
path: "/folder",
path: "/folder:path",
name: "FolderView",
component: FolderView,
},

View File

@ -12,11 +12,13 @@
<div class="separator" id="av-sep"></div>
<AlbumBio />
<div class="separator" id="av-sep"></div>
<FromTheSameArtist/>
<FromTheSameArtist />
</div>
</template>
<script>
// import { useRoute } from 'vue-router'
import Header from "../components/AlbumView/Header.vue";
import AlbumBio from "../components/AlbumView/AlbumBio.vue";
import FromTheSameArtist from "../components/AlbumView/FromTheSameArtist.vue";
@ -32,6 +34,7 @@ export default {
SongList,
FeaturedArtists,
},
setup() {},
};
</script>

View File

@ -5,16 +5,21 @@
</div>
<div id="scrollable">
<SongList />
<FolderList />
<FolderList :folders="folders" />
</div>
</div>
</template>
<script>
import { ref } from "@vue/reactivity";
import { useRoute } from 'vue-router'
import SongList from "@/components/FolderView/SongList.vue";
import FolderList from "@/components/FolderView/FolderList.vue";
import SearchBox from "@/components/FolderView/SearchBox.vue";
import getData from "../composables/getFiles.js";
export default {
components: {
SongList,
@ -22,8 +27,22 @@ export default {
SearchBox,
},
setup() {
const route = useRoute();
const path = route.params.path;
console.log(path);
const songs = ref([]);
const folders = ref([]);
getData("/Music").then((data) => {
songs.value = data.songs.value;
folders.value = data.folders.value;
});
return {
//
songs,
folders,
};
},
};
@ -43,7 +62,7 @@ export default {
position: absolute;
height: min-content;
width: calc(100% - 2rem);
top: .5rem;
top: 0.5rem;
}
#scrollable {