client: request folder lists from server

src/components/FolderView/FolderList.vue

@@ -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>

src/components/LeftSidebar/Navigation.vue

@@ -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 {

src/composables/getFiles.js

@@ -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;

src/composables/scrolls.js

@@ -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, };

src/router/index.js

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

src/views/AlbumView.vue

@@ -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>
 

src/views/FolderView.vue

@@ -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 {