From edcbe29be9d293c92e65c49ffa88dd850c402b18 Mon Sep 17 00:00:00 2001
From: RemixDev <RemixDev64@gmail.com>
Date: Mon, 13 Apr 2020 20:20:58 +0200
Subject: [PATCH] Testing settings form with vue.js

---
 public/css/style.css | 34 ++++++++++----------------------
 public/index.html    | 46 ++++++++++++++++++++++++++++++++++++++------
 2 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 5b842fa..be92181 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -42,21 +42,6 @@ main#main_content{
 	display: flex;
 }
 
-/* Tracks preview */
-.preview_controls {
-	opacity: 0;
-  display: block;
-  background: rgba(0, 0, 0, .5);
-	width: 56px;
-	height: 56px;
-	text-align: center;
-	line-height: 56px;
-  position: absolute;
-	border-radius: 5px;
-  top: 0;
-  right: 0;
-}
-
 /* Middle section */
 div#middle_section {
   background-color: var(--main-background);
@@ -131,15 +116,6 @@ div#middle_section {
 #open_login_prompt{
 	margin: 8px 0px;
 }
-#login_input_arl{
-	width: 100%;
-  border: 0px solid black;
-  line-height: 36px;
-  padding: 0px 8px;
-  border-radius: 4px;
-	background-color: var(--secondary-background);
-	color: var(--primary-text);
-}
 #settings_btn_copyArl{
 	min-width: 24px;
 	width: 48px;
@@ -393,3 +369,13 @@ button[disabled]{
 	color: var(--main-text);
 	opacity: 0.75;
 }
+input[type="text"], input[type="password"]{
+	width: 100%;
+  border: 0px solid black;
+  line-height: 36px;
+  padding: 0px 8px;
+  border-radius: 4px;
+	background-color: var(--secondary-background);
+	color: var(--primary-text);
+	margin-bottom: 8px;
+}
diff --git a/public/index.html b/public/index.html
index 283260f..39746ec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -147,12 +147,17 @@ <h1>No Playlists found</h1>
 							</div>
 						</div>
 					</div>
+
 					<div id="home_tab" class="main_tabcontent">
 						<h1>Home</h1>
 					</div>
+
 					<div id="charts_tab" class="main_tabcontent"><h1>Charts</h1></div>
+
 					<div id="favorites_tab" class="main_tabcontent"><h1>Favorites</h1></div>
+
 					<div id="analyzer_tab" class="main_tabcontent"><h1>Link Analyzer</h1></div>
+
 					<div id="settings_tab" class="main_tabcontent">
 						<h1>Settings</h1>
 						<div id="logged_in_info">
@@ -167,10 +172,43 @@ <h1>Settings</h1>
 						</div>
 						<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I get my own ARL?</a></p>
 						<p><button onclick="loginButton()" style="width:100%;" id="settings_btn_updateArl">Update ARL</button></p>
+						<div id="settings_generic_tab">
+							<div class="input_group">
+								<p>Download Path</p>
+								<input type="text" v-model="settings.downloadLocation">
+							</div>
+							<div class="input_group">
+								<p>Trackname template</p>
+								<input type="text" v-model="settings.tracknameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Album track template</p>
+								<input type="text" v-model="settings.albumTracknameTemplate">
+							</div>
+							<div class="input_group">
+								<p>Playlsit track template</p>
+								<input type="text" v-model="settings.playlistTracknameTemplate">
+							</div>
+							<div class="input_group" v-if="settings.createPlaylistFolder">
+								<p>Playlsit folder template</p>
+								<input type="text" v-model="settings.playlistNameTemplate">
+							</div>
+							<div class="input_group" v-if="settings.createArtistFolder">
+								<p>Artist folder template</p>
+								<input type="text" v-model="settings.artistNameTemplate">
+							</div>
+							<div class="input_group" v-if="settings.createAlbumFolder">
+								<p>Album folder template</p>
+								<input type="text" v-model="settings.albumNameTemplate">
+							</div>
+						</div>
 					</div>
+
 					<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
+
 				</div></section>
 			</div>
+
 			<div id="download_tab_container">
 				<div id="download_tab_bar">
 					<i id="show_download_tab" class="material-icons download_bar_icon">chevron_left</i>
@@ -178,15 +216,11 @@ <h1>Settings</h1>
 				</div>
 				<div id="download_tab">
 					<i id="hide_download_tab" class="material-icons download_bar_icon">chevron_right</i>
-					<div id="download_list" class="">
-
-					</div>
+					<div id="download_list" class=""></div>
 				</div>
 			</div>
+
 		</main>
-		<audio id="preview-track">
-			<source id="preview-track_source" src="" type="audio/mpeg">
-		</audio>
 	</body>
 	<script type="text/javascript" src="/public/js/socket.io.js"></script>
 	<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>