From dcaab7d0e7b6f6657559076167a4593f2ffe4626 Mon Sep 17 00:00:00 2001
From: "Nicolas A. Tonne" <nixatto@gmail.com>
Date: Wed, 15 Apr 2015 02:05:17 +0200
Subject: [PATCH] ALt

---
 index.php            |   4 +-
 php/panel.php        | 132 +++++++++++++++++++++++++++++++++++++++----
 static/css/style.css |  38 ++++++++++++-
 static/js/admin.js   |  32 +++--------
 static/js/list.js    |   2 +-
 static/js/youtube.js |   8 ++-
 6 files changed, 178 insertions(+), 38 deletions(-)

diff --git a/index.php b/index.php
index 527a9165..7aaf36e4 100755
--- a/index.php
+++ b/index.php
@@ -33,13 +33,13 @@
 	                        </a>
                         </li>
                         <li>
-                            <a class="nav-btn" href="#" onclick="admin();" data-activates="mobile-demo" id="settings">
+                            <a class="nav-btn" href="#" data-activates="settings-bar" id="settings">
                                 <i class="mdi-action-settings"></i>
                                 <span class="hover-text">Conf</span>
                             </a>
                         </li>
                     </ul>
-                    <ul class="side-nav" id="mobile-demo">
+                    <ul class="side-nav" id="settings-bar">
                         <?php include("php/panel.php");?>
                     </ul>
                     <form id="searchform" onsubmit="return false">
diff --git a/php/panel.php b/php/panel.php
index d1e47103..0706e246 100755
--- a/php/panel.php
+++ b/php/panel.php
@@ -1,44 +1,155 @@
-<b>Admin Panel</b> <span id="setpass"></span>
-<br>
+<li class="no-padding">
+    <ul class="collapsible collapsible-accordion">
+        <li>
+            <a class="col s9 collapsible-header bold waves-effect active">Channel Settings
+                <i class="mdi-image-tune"></i>
+                <a class="nav-btn close-settings" title="Close" href="#" onclick="hide_settings()">
+                    <i class="mdi-navigation-close"></i>
+                </a>
+            </a>
+            <div class="collapsible-body">
+                <ul>
+                    <li class="white-bg">
+                        <a class="white-bg">
+                            <div class="input-field">
+                                <input placeholder="Enter channel password" id="password" type="password" class="validate">
+                            </div>
+                        </a>
+                    </li>
+                    <form id="adminForm">
+                        <li><a class="setting-text">
+                            Add songs
+                            <div class="switch"><label onclick="save()">
+                            Anyone
+                            <input name="addsongs" type="checkbox"><span class="lever"></span>
+                            Admin
+                        </label></div></a></li>
+
+                        <li><a class="setting-text">
+                            Vote
+                            <div class="switch"><label onclick="save()">
+                            Anyone
+                            <input name="vote" type="checkbox"><span class="lever"></span>
+                            Admin
+                        </label></div></a></li>
+
+                        <li><a class="setting-text">
+                            Shuffle
+                            <div class="switch"><label onclick="save()">
+                            Anyone
+                            <input name="shuffle" type="checkbox"><span class="lever"></span>
+                            Admin
+                        </label></div></a></li>
+
+                        <li><a class="setting-text">
+                            Skip
+                            <div class="switch"><label onclick="save()">
+                            Anyone
+                            <input name="addsongs" type="checkbox"><span class="lever"></span>
+                            Admin
+                        </label></div></a></li>
+
+                        <li><a class="setting-text">
+                            Song length
+                            <div class="switch"><label onclick="save()">
+                            Any
+                            <input name="longsongs" type="checkbox"><span class="lever"></span>
+                            Short
+                        </label></div></a></li>
+
+                        <li><a class="setting-text">
+                            Type
+                            <div class="switch"><label onclick="save()">
+                            Any
+                            <input name="allvideos" type="checkbox"><span class="lever"></span>
+                            Song
+                        </label></div></a></li>
+
+
+                        <li><a class="setting-text">
+                            Frontpage
+                            <div class="switch"><label onclick="save()">
+                            Display
+                            <input name="frontpage" type="checkbox"><span class="lever"></span>
+                            Hide
+                        </label></div></a></li>
+
+                        <li><a class="setting-text">
+                            After play
+                            <div class="switch"><label onclick="save()">
+                            Keep
+                            <input name="removeplay" type="checkbox"><span class="lever"></span>
+                            Remove
+                        </label></div></a></li>
+
+
+                    </form>
+                </ul>
+            </div>
+        </li>
+    </ul>
+</li>
+<li class="no-padding hide">
+    <ul class="collapsible collapsible-accordion">
+        <li>
+            <a class="collapsible-header bold waves-effect">User Settings
+                <i class="mdi-action-account-circle"></i>
+            </a>
+            <div class="collapsible-body">
+                <ul>
+                    <li><a href="#!">Second</a></li>
+                    <li><a href="#!">Third</a></li>
+                    <li><a href="#!">Fourth</a></li>
+                </ul>
+            </div>
+        </li>
+    </ul>
+</li>
+
+
+
+
+<!--<span id="setpass"></span>
+
 <input type="button" class="button" value="Shuffle" onclick="shuffle(this.form);" title="Shuffle the playlist">
 
 <form id="adminForm" onsubmit="return false" name="ufo" action="" class="daform nomargin" id="base">
     <div class="toggles">
     <div class="toggler">
-        <label><input type="radio" class="radio" name="frontpage" value="true"><span>Display</span></label> / 
+        <label><input type="radio" class="radio" name="frontpage" value="true"><span>Display</span></label> /
         <label><input type="radio" class="radio" name="frontpage" value="false"><span>Hide</span></label>
     </div>
 
     <div class="toggler">
-        <label><input type="radio" class="radio" name="vote" value="true"><span>Admin</span></label> / 
+        <label><input type="radio" class="radio" name="vote" value="true"><span>Admin</span></label> /
         <label><input type="radio" class="radio" name="vote" value="false"><span>Anyone</span></label>
     </div>
 
     <div class="toggler">
-        <label><input type="radio" class="radio" name="addsongs" value="true"><span>Admin</span></label> / 
+        <label><input type="radio" class="radio" name="addsongs" value="true"><span>Admin</span></label> /
         <label><input type="radio" class="radio" name="addsongs" value="false"><span>Anyone</span></label>
     </div>
 
     <div class="toggler">
-        <label><input type="radio" class="radio" name="longsongs" value="true"><span>Allow</span></label> / 
+        <label><input type="radio" class="radio" name="longsongs" value="true"><span>Allow</span></label> /
         <label><input type="radio" class="radio" name="longsongs" value="false"><span>Block</span></label>
     </div>
 
     <div class="toggler">
-        <label><input type="radio" class="radio" name="allvideos" value="true"><span>All</span></label> / 
+        <label><input type="radio" class="radio" name="allvideos" value="true"><span>All</span></label> /
         <label><input type="radio" class="radio" name="allvideos" value="false"><span>Song</span></label>
     </div>
 
     <div class="toggler">
-        <label><input type="radio" class="radio" name="removeplay" value="true"><span>Remove</span></label> / 
+        <label><input type="radio" class="radio" name="removeplay" value="true"><span>Remove</span></label> /
         <label><input type="radio" class="radio" name="removeplay" value="false"><span>Keep</span></label>
     </div>
     <div class="toggler">
-        <label><input type="radio" class="radio" name="skip" value="true"><span>Allow</span></label> / 
+        <label><input type="radio" class="radio" name="skip" value="true"><span>Allow</span></label> /
         <label><input type="radio" class="radio" name="skip" value="false"><span>Block</span></label>
     </div>
     <div class="toggler">
-        <label><input type="radio" class="radio" name="shuffle" value="true"><span>Allow</span></label> / 
+        <label><input type="radio" class="radio" name="shuffle" value="true"><span>Allow</span></label> /
         <label><input type="radio" class="radio" name="shuffle" value="false"><span>Block</span></label>
     </div>
     </div>
@@ -56,3 +167,4 @@
 	<input type="password" name="pass" id="passbox" class="passbox" placeholder="Password">
 	<input type="submit" class="button" value="Login/Save" onclick="submitAdmin(this.form);" title="Save settings/Login">
 </form>
+-->
diff --git a/static/css/style.css b/static/css/style.css
index 3ff8341b..5a32515e 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -80,6 +80,14 @@ main {
     height: 120px;
 }
 
+.white-bg{
+    background-color:white;
+}
+
+.white-bg:hover{
+    background-color:white;
+}
+
 .card .card-content {
     padding: 10px 20px;
 }
@@ -161,8 +169,9 @@ hide mdi-action-visibility mdi-action-visibility-off
     float: left;
 }
 
+
 .list-song{background-color: rgba(255, 255, 255, 0.1);}
-.card .card-content{padding:0;}
+.list-song .card-content{padding:0;}
 .list-title{
     display:block;
     color:white;font-size:1em;
@@ -185,4 +194,31 @@ hide mdi-action-visibility mdi-action-visibility-off
 }
 .result_info{margin-top:-36px;}
 
+
+/** settings **/
+
 #settings-button{color:white !important;}
+
+.setting-text {
+    font-size: 13px !important;
+    padding: 0 !important;
+}
+.switch{
+    display: inline;
+    float: right;
+}
+.switch label .lever {
+  background-color: #00B2FF;
+}
+
+.switch label input[type=checkbox]:checked + .lever {
+  background-color: #5ADB74;
+}
+
+.switch label input[type=checkbox]:checked + .lever:after {
+   background-color: white;
+}
+
+.switch label {
+  color:#848484;
+}
diff --git a/static/js/admin.js b/static/js/admin.js
index e5c1bea7..9c8ea76f 100755
--- a/static/js/admin.js
+++ b/static/js/admin.js
@@ -11,29 +11,11 @@ socket.on("toast", function(msg)
 	remove_bar();*/
 });
 
-function admin()
-{
-	adminTogg = !adminTogg;
-	if(adminTogg)
-	{
-		if(find)
-		{
-			eH = -10;
-		}else
-			eH = 30;
-		$("#playlist").height($("#player").height()-290+eH); //opening
-	}else if(!adminTogg)
-	{
-		if(find)
-		{
-			eH = -10;
-		}else
-			eH = 30;
-		$("#playlist").height($("#player").height()+eH); //closing
-	}
-	$("#adminPanel").toggleClass("hiddenAdmin");
-}
 
+//function used in html onlick
+function save(){
+	submitAdmin($("#adminForm"));
+}
 
 function submitAdmin(form)
 {
@@ -48,10 +30,14 @@ function submitAdmin(form)
 	shuffling = form.shuffle.value;
 
 	configs = [voting, addsongs, longsongs, frontpage, allvideos, removeplay, adminpass, skipping, shuffling];
-
+	alert(configs)
 	socket.emit("conf", configs);
 }
 
+function hide_settings(){
+	$('#settings').sideNav('hide');
+}
+
 function remove_bar()
 {
 	setTimeout(function(){
diff --git a/static/js/list.js b/static/js/list.js
index 8a1a4e90..b9e1914d 100755
--- a/static/js/list.js
+++ b/static/js/list.js
@@ -45,7 +45,6 @@ function populate_list(msg)
 					names=["vote","addsongs","longsongs","frontpage", "allvideos", "removeplay", "skip", "shuffle"];
 					for (var i = 0; i < names.length; i++) {
 						document.getElementsByName(names[i])[0].checked = (listeID[names[i]] === 'true');
-						document.getElementsByName(names[i])[1].checked = (listeID[names[i]] === 'false');
 					}
 
 					if(hasadmin)
@@ -63,6 +62,7 @@ function populate_list(msg)
 				$("#wrapper").append(list_html);
 				var song = $("#list-song");
 				song.find(".list-title").text(video_title);
+				song.find(".list-title").attr("title", video_title);
 				song.find(".list-votes").text(video_votes);
 				song.find(".votebg").attr("onclick", "vote('"+video_id+"','pos')");
 				song.find(".list-image").attr("style",video_thumb);
diff --git a/static/js/youtube.js b/static/js/youtube.js
index ee1df292..8a255778 100755
--- a/static/js/youtube.js
+++ b/static/js/youtube.js
@@ -77,7 +77,13 @@ socket.on(chan.toLowerCase()+",viewers", function(view)
 
 $(document).ready(function()
 {
-	$("#settings").sideNav();
+	$("#settings").sideNav({
+      menuWidth: 300, // Default is 240
+      edge: 'right', // Choose the horizontal origin
+      closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
+    });
+	$('#settings-close').sideNav('hide');
+	
 	colorThief = new ColorThief();
 	window.mobilecheck = function() {
 	var check = false;