From a9d99e208ae0f66bdb5f0c962063d4af9f2e0aa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Wed, 15 Apr 2015 18:13:31 +0200
Subject: [PATCH] Fixed some form placements in the HTML, placing of X button,
 removed doublesubmitting of switches and added disabled handling for
 togglebuttons

---
 php/panel.php        | 58 ++++++++++++++++++++++----------------------
 server/server.js     | 25 ++++++++++++-------
 static/css/style.css |  5 ++++
 static/js/admin.js   | 37 +++++++++++++++++++---------
 static/js/list.js    | 11 ++++++---
 5 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/php/panel.php b/php/panel.php
index 7a450181..c9e8eb53 100755
--- a/php/panel.php
+++ b/php/panel.php
@@ -1,84 +1,84 @@
 <li class="no-padding">
     <ul class="collapsible collapsible-accordion">
-        <li>
-          <a class="nav-btn close-settings" title="Close" href="#" onclick="hide_settings()">
-              <i class="mdi-navigation-close right-align"></i>
-          </a>
-            <a class="col s9 collapsible-header bold waves-effect active">Channel Settings
+        <li><a class="nav-btn close-settings" title="Close" href="#" onclick="hide_settings()" style="float:right;">
+            <i class="mdi-navigation-close right-align"></i>
+        </a>
+            <a class="col s9 collapsible-header bold waves-effect active">
+                Channel Settings
                 <i class="mdi-image-tune"></i>
             </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">
+                    <form id="adminForm" onsubmit="pass_save();return false;">
+                      <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>
                         <li><a class="setting-text">
                             Add songs
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Anyone
-                            <input name="addsongs" type="checkbox"><span class="lever"></span>
+                            <input name="addsongs" type="checkbox" class="conf"><span class="lever"></span>
                             Admin
                         </label></div></a></li>
 
                         <li><a class="setting-text">
                             Vote
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Anyone
-                            <input name="vote" type="checkbox"><span class="lever"></span>
+                            <input name="vote" type="checkbox" class="conf"><span class="lever"></span>
                             Admin
                         </label></div></a></li>
 
                         <li><a class="setting-text">
                             Shuffle
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Anyone
-                            <input name="shuffle" type="checkbox"><span class="lever"></span>
+                            <input name="shuffle" type="checkbox" class="conf"><span class="lever"></span>
                             Admin
                         </label></div></a></li>
 
                         <li><a class="setting-text">
                             Skip
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Anyone
-                            <input name="addsongs" type="checkbox"><span class="lever"></span>
+                            <input name="skip" type="checkbox" class="conf"><span class="lever"></span>
                             Admin
                         </label></div></a></li>
 
                         <li><a class="setting-text">
                             Song length
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Any
-                            <input name="longsongs" type="checkbox"><span class="lever"></span>
+                            <input name="longsongs" type="checkbox" class="conf"><span class="lever"></span>
                             Short
                         </label></div></a></li>
 
                         <li><a class="setting-text">
                             Type
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Any
-                            <input name="allvideos" type="checkbox"><span class="lever"></span>
+                            <input name="allvideos" type="checkbox" class="conf"><span class="lever"></span>
                             Song
                         </label></div></a></li>
 
 
                         <li><a class="setting-text">
                             Frontpage
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Display
-                            <input name="frontpage" type="checkbox"><span class="lever"></span>
+                            <input name="frontpage" type="checkbox" class="conf"><span class="lever"></span>
                             Hide
                         </label></div></a></li>
 
                         <li><a class="setting-text">
                             After play
-                            <div class="switch"><label onclick="save()">
+                            <div class="switch"><label>
                             Keep
-                            <input name="removeplay" type="checkbox"><span class="lever"></span>
+                            <input name="removeplay" type="checkbox" class="conf"><span class="lever"></span>
                             Remove
                         </label></div></a></li>
 
diff --git a/server/server.js b/server/server.js
index 3a8c703f..e83056f2 100755
--- a/server/server.js
+++ b/server/server.js
@@ -89,7 +89,7 @@ io.on('connection', function(socket){
     	}else
     	{
     		db.createCollection(coll, function(err, docs){
-  				db.collection(coll).insert({"addsongs":"false", "adminpass":"", "allvideos":"true", "frontpage":"true", "longsongs":"true", "removeplay": "false", "shuffle": "false", "skip": "true", "skips": [], "startTime":get_time(), "views": [], "vote": "false"}, function(err, docs)
+  				db.collection(coll).insert({"addsongs":false, "adminpass":"", "allvideos":true, "frontpage":true, "longsongs":true, "removeplay": false, "shuffle": false, "skip": true, "skips": [], "startTime":get_time(), "views": [], "vote": false}, function(err, docs)
   				{
             db.collection(coll).find().sort({votes:-1}, function(err, docs) {
     		    	socket.emit(coll, docs);
@@ -117,7 +117,7 @@ io.on('connection', function(socket){
     var hash = hash_pass(arr[2]);
     db.collection(coll).find({views:{$exists:true}}, function(err, docs)
     {
-      if((docs[0]["addsongs"] == "true" && (hash == docs[0]["adminpass"] || docs[0]["adminpass"] == "")) || docs[0]["addsongs"] == "false")
+      if((docs[0]["addsongs"] == true && (hash == docs[0]["adminpass"] || docs[0]["adminpass"] == "")) || docs[0]["addsongs"] == false)
       {
         db.collection(coll).find({id:id}, function(err, docs){
           if(docs.length == 0)
@@ -153,7 +153,7 @@ io.on('connection', function(socket){
       var hash = hash_pass(msg[4]);
       db.collection(coll).find({views:{$exists:true}}, function(err, docs)
       {
-        if((docs[0]["vote"] == "true" && (hash == docs[0]["adminpass"] || docs[0]["adminpass"] == "")) || docs[0]["vote"] == "false")
+        if((docs[0]["vote"] == true && (hash == docs[0]["adminpass"] || docs[0]["adminpass"] == "")) || docs[0]["vote"] == false)
         {
           vote(coll, id, guid, socket);
         }else{
@@ -165,7 +165,7 @@ io.on('connection', function(socket){
 
   socket.on('skip', function(list)
   {
-  	db.collection(coll).find({skip: "true"}, function(err, docs){
+  	db.collection(coll).find({skip: true}, function(err, docs){
   		if(docs.length == 1)
   		{
   			if(lists[coll].length/2 <= docs[0]["skips"]+1)
@@ -194,7 +194,10 @@ io.on('connection', function(socket){
   	var skipping = params[7];
   	var shuffling = params[8];
 
-    var hash = hash_pass(adminpass);
+    if(adminpass != "")
+      var hash = hash_pass(adminpass);
+    else
+      var hash = adminpass;
 
     db.collection(coll).find({views:{$exists:true}}, function(err, docs){
       if(docs[0]["adminpass"] == "" || docs[0]["adminpass"] == hash)
@@ -209,8 +212,12 @@ io.on('connection', function(socket){
             shuffle:shuffling,
             longsongs:longsongs,
             adminpass:hash}}, function(err, docs){
-            socket.emit("toast", "Successfully applied settings!");
-            sort_list(coll,undefined,false);
+            db.collection(coll).find({views:{$exists:true}}, function(err, docs)
+            {
+              io.sockets.emit(coll+",conf", docs);
+              socket.emit("toast", "Successfully applied settings!");
+            });
+            //sort_list(coll,undefined,false);
           });
 
       }else
@@ -223,7 +230,7 @@ io.on('connection', function(socket){
   socket.on('shuffle', function(pass){
     var hash = hash_pass(pass);
     db.collection(coll).find({views:{$exists:true}}, function(err, docs){
-      if((docs[0]["adminpass"] == hash || docs[0]["adminpass"] == "") || docs[0]["shuffle"] == "true")
+      if((docs[0]["adminpass"] == hash || docs[0]["adminpass"] == "") || docs[0]["shuffle"] == true)
       {
         db.collection(coll).find({now_playing:false}).forEach(function(err, docs){
           if(!docs){
@@ -305,7 +312,7 @@ function vote(coll, id, guid, socket)
 function change_song(coll)
 {
   db.collection(coll).find({views:{$exists:true}}, function(err, docs){
-    if(docs[0]["removeplay"] == "true")
+    if(docs[0]["removeplay"] == true)
     {
       db.collection(coll).remove({now_playing:true}, function(err, docs)
       {
diff --git a/static/css/style.css b/static/css/style.css
index 86e60512..1e27173c 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -162,6 +162,7 @@ hide mdi-action-visibility mdi-action-visibility-off
 {
     transition: background-color .2s;
     min-width: 64px;
+    float:right;
 }
 .nav-btn:hover{background-color:rgba(0,0,0,0.5);}
 .hover-text{display:none;}
@@ -226,3 +227,7 @@ hide mdi-action-visibility mdi-action-visibility-off
 .switch label {
   color:#848484;
 }
+
+.collapsible-body ul li.white-bg{
+  background-color:white !important;
+}
diff --git a/static/js/admin.js b/static/js/admin.js
index 9c8ea76f..ead77dca 100755
--- a/static/js/admin.js
+++ b/static/js/admin.js
@@ -11,26 +11,41 @@ socket.on("toast", function(msg)
 	remove_bar();*/
 });
 
+socket.on(chan.toLowerCase()+",conf", function(msg)
+{
+	populate_list(msg);
+});
+
+$('input[class=conf]').change(function()
+{
+		save();
+});
+
+function pass_save()
+{
+	save();
+}
 
 //function used in html onlick
 function save(){
-	submitAdmin($("#adminForm"));
+	submitAdmin(document.getElementById("adminForm").elements);
 }
 
 function submitAdmin(form)
 {
-	voting = form.vote.value;
-	addsongs = form.addsongs.value;
-	longsongs = form.longsongs.value;
-	frontpage = form.frontpage.value;
-	allvideos = form.allvideos.value;
-	removeplay = form.removeplay.value;
-	adminpass = form.pass.value;
-	skipping = form.skip.value;
-	shuffling = form.shuffle.value;
+	console.log(form);
+	voting = form.vote.checked;
+	addsongs = form.addsongs.checked;
+	longsongs = form.longsongs.checked;
+	frontpage = form.frontpage.checked;
+	allvideos = form.allvideos.checked;
+	removeplay = form.removeplay.checked;
+	adminpass = document.getElementById("password").value;
+	skipping = form.skip.checked;
+	shuffling = form.shuffle.checked;
 
 	configs = [voting, addsongs, longsongs, frontpage, allvideos, removeplay, adminpass, skipping, shuffling];
-	alert(configs)
+	console.log(configs);
 	socket.emit("conf", configs);
 }
 
diff --git a/static/js/list.js b/static/js/list.js
index 025b8698..2ad906f7 100755
--- a/static/js/list.js
+++ b/static/js/list.js
@@ -39,18 +39,21 @@ function populate_list(msg)
 			if(listeID.hasOwnProperty('startTime')) //check if its config part of list
 			{
 				console.log("startTime");
-				console.log(listeID.addsongs);
 				if(!adminTogg)
 				{
+					if(listeID['adminpass'] == "") hasadmin = false;
+					else hasadmin = true;
 					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])[0].checked = (listeID[names[i]] === true);
+						if(hasadmin)
+							$("input[name="+names[i]+"]").attr("disabled", true);
 					}
 
-					if(hasadmin)
+					/*if(hasadmin)
 						$("#setpass").text("Channel has admin");
 					else
-						$("#setpass").text("Channel has no admin");
+						$("#setpass").text("Channel has no admin");*/
 				}
 			}else if(!listeID.now_playing){ //check that the song isnt playing