Control stuff in sidebar

php/footer.php

@@ -80,7 +80,8 @@
 <script type="text/javascript" src="static/js/search.js"></script>
 <script type="text/javascript" src="static/js/admin.js"></script>
 <script type="text/javascript" src="static/js/chat.js"></script>
-<script type="text/javascript" src="static/js/controller.js"></script>
+<script type="text/javascript" src="static/js/hostcontroller.js"></script>
+<script type="text/javascript" src="static/js/remotecontroller.js"></script>
 <script type="text/javascript" src="static/js/lib/materialize.js"></script>
 
 <!-- Piwik tracking -->

php/panel.php

@@ -1,7 +1,7 @@
 <li class="no-padding">
     <ul class="collapsible collapsible-accordion">
         <li>
-            <a class="col s9 collapsible-header bold waves-effect admin-settings active">
+            <a class="col s9 collapsible-header bold waves-effect admin-settings">
                 Channel Settings
                 <i class="mdi-image-tune"></i>
                 <div class="nav-btn close-settings clickable" title="Close" href="#" onclick="hide_settings()">
@@ -91,17 +91,47 @@
         </li>
     </ul>
 </li>
-<li class="no-padding hide">
+<li class="no-padding">
     <ul class="collapsible collapsible-accordion">
         <li>
-            <a class="collapsible-header bold waves-effect">User Settings
+            <a class="collapsible-header bold waves-effect">Remote Control
                 <i class="mdi-action-account-circle"></i>
             </a>
             <div class="collapsible-body">
                 <ul>
-                    <li><a href="#!">Second</a></li>
+                    <li>
-                    <li><a href="#!">Third</a></li>
+                    <form class="row" id="base" onsubmit="controll();return false;">
-                    <li><a href="#!">Fourth</a></li>
+                        <div class="input-field">
+                            <input
+                                class="input-field"
+                                type="text"
+                                id="code-input"
+                                name="chan"
+                                title="Type channel name here to create or listen to a channel. Only alphanumerical chars. [a-zA-Z0-9]+"
+                                autocomplete="off"
+                                list="searches"
+                                required pattern="[a-zA-Z0-9]+"
+                                spellcheck="false"
+                                maxlength="8"
+                                autocomplete
+                                length="8"
+                            />
+                            <label for="code-input" id="forcode">Type ID of host to be controlled</label>
+                        </div>
+                    </form>
+                    </li>
+                    <li>
+                    <div id="remote-controls" style="display:none;">
+                      <i id="remote_play" class="mdi-av-play-arrow"></i>
+                      <i id="remote_pause" class="mdi-av-pause"></i>
+                      <i id="remote_skip" class="mdi-av-skip-next"></i>
+                    </div>
+                    </li>
+                    <li>
+                    <p class="range-field">
+                      <input type="range" id="volume-control" style="display:none;" min="0" max="100" />
+                    </p>
+                    </li>
                 </ul>
             </div>
         </li>

static/css/style.css

@@ -762,7 +762,7 @@ ul #chat-log{
 	cursor:pointer;
 }
 
-#volume-controll {
+/*#volume-controll {
     cursor:pointer;
   float:left;
     position: relative;
@@ -794,4 +794,4 @@ ul #chat-log{
     cursor: pointer;
     outline: none;
     border: none;
-}
+}*/

static/js/mobilecontroller.js

@@ -1,60 +0,0 @@
-var start = true;
-var id;
-var socket;
-
-$(document).ready(function (){
-    setTimeout(function(){$("#search").focus();},500);
-    socket = io.connect('http://'+window.location.hostname+':3000');
-});
-
-document.getElementById("remote_play").addEventListener("click", function()
-{
-  socket.emit("id", [id, "play", "mock"]);
-});
-
-document.getElementById("remote_pause").addEventListener("click", function()
-{
-  socket.emit("id", [id, "pause", "mock"]);
-});
-
-document.getElementById("remote_skip").addEventListener("click", function()
-{
-  socket.emit("id", [id, "skip", "mock"]);
-});
-
-function controll()
-{
-  if(start)
-  {
-    id = $("#search").val().toLowerCase();
-    $("#search").val("");
-    start = false;
-
-    $("#volume-controll").css("display", "block");
-    $("#remote-controls").css("display", "block");
-
-    $("#search").attr("length", "18");
-    $("#search").attr("maxlength", "18");
-    $("#forsearch").html("Type new channel name to change to")
-    $("#volume-controll").slider({
-  	    min: 0,
-  	    max: 100,
-  	    value: 100,
-  			range: "min",
-  			animate: true,
-  	    /*slide: function(event, ui) {
-          console.log(ui.value);
-  				//localStorage.setItem("volume", ui.value);
-  	    },*/
-        stop:function(event, ui) {
-          socket.emit("id", [id, "volume", ui.value]);
-          //console.log(ui.value);
-        }
-  	});
-  }else
-  {
-    socket.emit("id", [id, "channel", $("#search").val().toLowerCase()]);
-    $("#search").val("");
-  }
-
-}

static/js/remotecontroller.js

@@ -0,0 +1,50 @@
+var start = true;
+var id;
+//var socket;
+
+$(document).ready(function (){
+    //setTimeout(function(){$("#code-input").focus();},500);
+    //socket = io.connect('http://'+window.location.hostname+':3000');
+});
+
+document.getElementById("remote_play").addEventListener("click", function()
+{
+  socket.emit("id", [id, "play", "mock"]);
+});
+
+document.getElementById("remote_pause").addEventListener("click", function()
+{
+  socket.emit("id", [id, "pause", "mock"]);
+});
+
+document.getElementById("remote_skip").addEventListener("click", function()
+{
+  socket.emit("id", [id, "skip", "mock"]);
+});
+
+document.getElementById("volume-control").addEventListener("click", function()
+{
+   socket.emit("id", [id, "volume", $("#volume-control").val()]);
+});
+
+function control()
+{
+  if(start)
+  {
+    id = $("#code-input").val().toLowerCase();
+    $("#code-input").val("");
+    start = false;
+
+    $("#volume-control").css("display", "block");
+    $("#remote-controls").css("display", "block");
+
+    $("#code-input").attr("length", "18");
+    $("#code-input").attr("maxlength", "18");
+    $("#forsearch").html("Type new channel name to change to");
+  }else
+  {
+    socket.emit("id", [id, "channel", $("#code-input").val().toLowerCase()]);
+    $("#code-input").val("");
+  }
+
+}