From ab8d9de7af0b5641b29fcc9ea59aeb7e770c587d Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Tue, 10 Oct 2023 16:43:54 +0200
Subject: [PATCH] start adding some features

---
 frontend/src/app.js                   | 26 ++++++++++++
 frontend/src/background.js            |  1 +
 frontend/src/components/mediaPool.vue | 47 +++++++++++++++++++++
 frontend/src/components/player.vue    | 14 +++++++
 frontend/src/views/HomeView.vue       | 59 ++++++++++++++++++++++++++-
 5 files changed, 145 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/app.js

diff --git a/frontend/src/app.js b/frontend/src/app.js
new file mode 100644
index 0000000..9395c3b
--- /dev/null
+++ b/frontend/src/app.js
@@ -0,0 +1,26 @@
+const express = require( 'express' );
+let app = express();
+const path = require( 'path' );
+const fs = require( 'fs' );
+const bodyParser = require( 'body-parser' );
+const dialog = require( 'electron' ).dialog;
+
+app.use( bodyParser.urlencoded( { extended: false } ) );
+app.use( bodyParser.json() );
+
+
+app.get( '/', ( request, response ) => {
+    response.send( 'Hello world' );
+} );
+
+
+app.get( '/openSongs', ( req, res ) => {
+    res.send( { 'data': dialog.showOpenDialogSync( { properties: [ 'openDirectory' ], title: 'Open music library folder' } ) } );
+} );
+
+
+app.use( ( request, response, next ) => {
+    response.sendFile( path.join( __dirname + '' ) ) 
+} );
+
+app.listen( 8081 );
\ No newline at end of file
diff --git a/frontend/src/background.js b/frontend/src/background.js
index 22b6a9b..3322276 100644
--- a/frontend/src/background.js
+++ b/frontend/src/background.js
@@ -33,6 +33,7 @@ async function createWindow() {
     // Load the index.html when not in development
     win.loadURL('app://./index.html')
   }
+  require( './app.js' );
 }
 
 // Quit when all windows are closed.
diff --git a/frontend/src/components/mediaPool.vue b/frontend/src/components/mediaPool.vue
index e69de29..c6b5828 100644
--- a/frontend/src/components/mediaPool.vue
+++ b/frontend/src/components/mediaPool.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="media-pool">
+        <div v-if="hasLoadedSongs">
+            <div v-for="song in songQueue">{{ song }}</div>
+        </div>
+        <div v-else class="no-songs">
+            <h3>No songs loaded</h3>
+            <button @click="loadSongs()">Load songs</button>
+        </div>
+    </div>
+</template>
+
+<style>
+    .media-pool {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .no-songs {
+        height: 50vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+</style>
+
+<script>
+    export default {
+        name: 'HomeView',
+        data() {
+            return {
+                hasLoadedSongs: false,
+                songQueue: [],
+            }
+        },
+        methods: {
+            loadSongs() {
+                fetch( 'http://localhost:8081/openSongs' )
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/player.vue b/frontend/src/components/player.vue
index e69de29..46a4b24 100644
--- a/frontend/src/components/player.vue
+++ b/frontend/src/components/player.vue
@@ -0,0 +1,14 @@
+<template>
+    <div class="player">
+        <div class="controls"></div>
+        <div class="song-info"></div>
+    </div>
+</template>
+
+<style>
+    .song-info {
+        background-color: var( --accent-background );
+        height: 80%;
+        width: 50%;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 2afb6f8..3c4d9c7 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,17 +1,72 @@
 <template>
     <div class="home">
-        
+        <div class="top-bar">
+            <img src="@/assets/logo.png" alt="logo" class="logo">
+            <div class="player-wrapper">
+                
+            </div>
+        </div>
+        <div class="pool-wrapper">
+            <mediaPool></mediaPool>
+        </div>
     </div>
 </template>
 
 <style>
+    .home {
+        width: 100%;
+        height: 100%;
+    }
+
+    .pool-wrapper {
+        height: 84vh;
+    }
+
+    .top-bar {
+        margin-left: auto;
+        margin-right: auto;
+        width: 99%;
+        height: 15vh;
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        border: var( --primary-color ) 2px solid;
+    }
+
+    .player-wrapper {
+        width: 70vw;
+        margin-right: auto;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
     .logo {
-        height: 50vh;
+        height: 90%;
+        margin-left: 3%;
+        margin-right: auto;
     }
 </style>
 
 <script>
+    import mediaPool from '@/components/mediaPool.vue';
+
     export default {
         name: 'HomeView',
+        components: {
+            mediaPool,
+        },
+        data() {
+            return {
+                hasLoadedSongs: false,
+                songQueue: [],
+            }
+        },
+        methods: {
+            loadSongs() {
+                
+            }
+        }
     }
 </script>