Implemented settings load and save

public/css/style.css

@@ -430,3 +430,15 @@ input[type="text"], input[type="password"], input[type="number"]{
 .right{
 	float: right;
 }
+.fixed_footer footer{
+	position: sticky;
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	justify-content: flex-end;
+	background-color: var(--main-background);
+	bottom: 0px;
+	height: 64px;
+	width: 100%;
+	margin-top: 24px;
+}

public/index.html

@@ -173,7 +173,7 @@ <h1>Home</h1>
 
 					<div id="analyzer_tab" class="main_tabcontent"><h1>Link Analyzer</h1></div>
 
-					<div id="settings_tab" class="main_tabcontent">
+					<div id="settings_tab" class="main_tabcontent fixed_footer">
 						<h1>Settings</h1>
 						<div id="logged_in_info">
 							<img id="settings_picture" src="" alt="Profile Picture" class="circle" style="width: 125px;height:125px; margin-right: 12px;"/>
@@ -345,6 +345,9 @@ <h1>Settings</h1>
 								</select>
 							</div>
 						</div>
+						<footer>
+							<button onclick="saveSettings()">Save</button>
+						</footer>
 					</div>
 
 					<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
@@ -373,8 +376,8 @@ <h1>Settings</h1>
 	<script type="text/javascript" src="/public/js/jquery-3.3.1.min.js"></script>
 	<script type="text/javascript" src="/public/js/vue.min.js"></script>
 	<script type="text/javascript" src="/public/js/toastify.js"></script>
-	<script type="text/javascript" src="/public/js/init.js"></script>
-	<script type="text/javascript" src="/public/js/utils.js"></script>
-	<script type="text/javascript" src="/public/js/app.js"></script>
-	<script type="text/javascript" src="/public/js/downloadList.js"></script>
+	<script type="text/javascript" src="/public/js/app/app.js"></script>
+	<script type="text/javascript" src="/public/js/app/utils.js"></script>
+	<script type="text/javascript" src="/public/js/app/search.js"></script>
+	<script type="text/javascript" src="/public/js/app/downloadList.js"></script>
 </html>

public/js/app/app.js

@@ -6,6 +6,8 @@ search_selected = ""
 main_selected=""
 // toasts stuff
 toastsWithId = {}
+// settings
+lastSettings = {}
 
 function toast(msg, icon=null, dismiss=true, id=null){
 	if (toastsWithId[id]){
@@ -52,6 +54,11 @@ socket.on("toast", (data)=>{
 	toast(data.msg, data.icon || null, data.dismiss !== undefined ? data.dismiss : true, data.id || null)
 })
 
+// Debug messages for socketio
+socket.on("message", function(msg){
+	console.log(msg)
+})
+
 window.addEventListener('pywebviewready', function() {
 	if (window.pywebview.platform == "gtk"){
 		$('#open_login_prompt').prop('disabled', false);
@@ -164,7 +171,7 @@ socket.on("logged_out", function(){
 	$("#settings_picture").attr("src",`https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
 })
 
-// settings
+// settings stuff
 var settingsTab = new Vue({
   el: '#settings_tab',
   data: {
@@ -173,7 +180,44 @@ var settingsTab = new Vue({
 })
 
 socket.on("init_settings", function(settings){
-	console.log(settings)
-	settingsTab.settings = settings
-	toast("Loaded Settings", 'done')
+	loadSettings(settings)
+	toast("Settings loaded!", 'settings')
 })
+
+socket.on("updateSettings", function(settings){
+	loadSettings(settings)
+	toast("Settings updated!", 'settings')
+})
+
+function loadSettings(settings){
+	lastSettings = {...settings}
+	settingsTab.settings = settings
+}
+
+function saveSettings(){
+	lastSettings = {...settingsTab.settings}
+	socket.emit("saveSettings", lastSettings)
+}
+
+// tabs stuff
+function changeTab(evt, section, tabName) {
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName(section+"_tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+	tabcontent[i].style.display = "none";
+  }
+  tablinks = document.getElementsByClassName(section+"_tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+	tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+	if (tabName == "settings_tab" && main_selected != "settings_tab"){
+		settingsTab.settings = {...lastSettings}
+	}
+  document.getElementById(tabName).style.display = "block";
+	window[section+"_selected"] = tabName
+  evt.currentTarget.className += " active";
+	// Check if you need to load more content in the search tab
+	if (document.getElementById("content").offsetHeight >= document.getElementById("content").scrollHeight && main_selected == "search_tab" && ["track_search", "album_search", "artist_search", "playlist_search"].indexOf(search_selected) != -1){
+		scrolledSearch(window[search_selected.split("_")[0]+"Search"])
+	}
+}

public/js/app/search.js

@@ -1,27 +1,3 @@
-// Debug messages for socketio
-socket.on("message", function(msg){
-	console.log(msg)
-})
-
-function changeTab(evt, section, tabName) {
-  var i, tabcontent, tablinks;
-  tabcontent = document.getElementsByClassName(section+"_tabcontent");
-  for (i = 0; i < tabcontent.length; i++) {
-	tabcontent[i].style.display = "none";
-  }
-  tablinks = document.getElementsByClassName(section+"_tablinks");
-  for (i = 0; i < tablinks.length; i++) {
-	tablinks[i].className = tablinks[i].className.replace(" active", "");
-  }
-  document.getElementById(tabName).style.display = "block";
-	window[section+"_selected"] = tabName
-  evt.currentTarget.className += " active";
-	// Check if you need to load more content in the search tab
-	if (document.getElementById("content").offsetHeight >= document.getElementById("content").scrollHeight && main_selected == "search_tab" && ["track_search", "album_search", "artist_search", "playlist_search"].indexOf(search_selected) != -1){
-		scrolledSearch(window[search_selected.split("_")[0]+"Search"])
-	}
-}
-
 // Load more content when the search page is at the end
 $('#content').on('scroll', function() {
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {