API Buttons, Chat Connection

Author: jg

gui/css/main.css

@@ -16,7 +16,10 @@
             </a>
         </div>
         <div class="interactive-status" style="display:none">
-            Disconnected
+            Interactive
+        </div>
+        <div class="chat-status" style="display:none">
+            Chat
         </div>
         <div class="updated-version" style="display:none">
             <a href="#" data="updates" class="nav">Update Available</a>
@@ -75,7 +78,7 @@ <h3>General Settings</h3>
                     <select  title="Choose type of controls for the button" class="tooltip">
                         <option value="Game Controls" data="game-controls">Game Control</option>
                         <option value="Sound" data="sound-buttons">Sound</option>
-                        <option value="Api Buttons" data="api-buttons" disabled>API Button</option>
+                        <option value="Api Buttons" data="api-buttons">API Button</option>
                         <option value="Chat Currency" data="chat-currency-buttons" disabled>Chat Currency</option>
                         <option value="Clicker Boss" data="clickerboss-buttons" disabled>Clicker Boss</option>
                         <option value="Nothing" data="nothing">Nothing</option>
@@ -112,7 +115,6 @@ <h3>Type Specific</h3>
                     <label>Type</label>
                     <select>
                         <option value="Advice">Advice</option>
-                        <option value="TTS Quotes">TTS Quotes</option>
                         <option value="Cat Picture">Cat Picture</option>
                         <option value="Cat Fact">Cat Fact</option>
                         <option value="Dog Picture">Dog Picture</option>

gui/index.html

@@ -19,7 +19,6 @@ function buttonMenuValidate(){
                 required: true
             },
             cooldownButtons:{
-                required: true,
                 commaNumbers: true
             },
             cooldownLength:{

gui/js/form-validation.js

@@ -28,9 +28,9 @@ function pageNavigation(){
 
         // If the selected page is 
         if (nextup !== "start" && nextup !== "login" && nextup !== "updates"){
-            $('.interactive-status').fadeIn('fast');
+            $('.interactive-status, .chat-status').fadeIn('fast');
         } else {
-            $('.interactive-status').fadeOut('fast');
+            $('.interactive-status, .chat-status').fadeOut('fast');
         }
 
         return false; 

gui/js/global.js

@@ -122,6 +122,9 @@ function buttonSubmission(){
             var fileVolume = $('.sound-volume input').val();
             var typeSettings = { "filePath": filePath, "volume": fileVolume}
 
+        } else if (buttonType == "Api Buttons"){
+            var apiType = $('.api-select select option:selected').val();
+            var typeSettings = { "apiType": apiType,}
         } else if (buttonType == "Nothing"){
             var typeSettings = {};
         }
@@ -299,16 +302,24 @@ function connectFlipper(status){
     if(status == "disconnected"){
         $('.disconnect-interactive').fadeOut('fast', function(){
             $('.launch-interactive').fadeIn('fast');
-            $('.interactive-status').removeClass('online').text('Disconnected');
+            $('.interactive-status').removeClass('online');
+            $('.chat-status').removeClass('online');
         });
     } else if (status == "connected"){
         $('.launch-interactive').fadeOut('fast', function(){
             $('.disconnect-interactive').fadeIn('fast');
-            $('.interactive-status').addClass('online').text('Connected');
+            $('.interactive-status').addClass('online');
+            $('.chat-status').addClass('online');
         });
     }
 };
 
+// Disconnected for chat
+// Changes chat ui element if it disconnects or errors out.
+function chatDisconnected(status){
+    $('.chat-status').removeClass('online');
+};
+
 ///////////
 // Events
 //////////
@@ -409,6 +420,12 @@ ipcRenderer.on('beamInteractive', function (event, status){
     connectFlipper(status);
 })
 
+// Chat Disconnect
+// Flips ui elements if chat disconnects due to error.
+ipcRenderer.on('chat-disconnect', function (event, status){
+    chatDisconnected();
+})
+
 // Kill Switch Toggle
 // This recieves an event from the global killswitch in beam-connect.js, then sends an event back to confirm.
 ipcRenderer.on('killSwitch', function (event, status){

gui/js/interactive/interactive-board.js

@@ -23,7 +23,7 @@ function requestBeamData(token, streamOrBot) {
         var data = JSON.parse(res.body);
 
         //Load up avatar and such on login page. 
-        login(streamOrBot, data.channel.id, data.username, token, data.avatarUrl);
+        login(streamOrBot, data.id, data.channel.id, data.username, token, data.avatarUrl);
 
         // Close auth window
         ipcRenderer.send('auth-close');
@@ -33,12 +33,12 @@ function requestBeamData(token, streamOrBot) {
 
 // Log in
 // This takes the saved login info and puts things onto the login page such as the user avatar.
-function login(streamOrBot, channelID, username, token, avatar){
+function login(streamOrBot, userID, channelID, username, token, avatar){
 
     if (streamOrBot == "streamer"){
-        dbAuth.push('/streamer', { "channelID": channelID, "username": username, "token": token, "avatarUrl": avatar });
+        dbAuth.push('/streamer', { "channelID": channelID, "userID":userID, "username": username, "token": token, "avatarUrl": avatar });
     } else if (streamOrBot == "bot") {
-        dbAuth.push('/bot', { "channelID": channelID, "username": username, "token": token, "avatarUrl": avatar });
+        dbAuth.push('/bot', { "channelID": channelID, "userID":userID, "username": username, "token": token, "avatarUrl": avatar });
     }
 
     if(streamOrBot == "streamer"){

gui/js/login.js

@@ -147,7 +147,7 @@ textarea {
         font-size:1.5em;
     }
 
-    .interactive-status{
+    .interactive-status, .chat-status{
         float:right;
         display:inline-block;
         background-color: $status-offline-color;
@@ -156,8 +156,8 @@ textarea {
         border-radius: 10px;
         text-transform: uppercase;
         font-family: $font-primary;
-        margin:1%;
-        padding:4px;
+        margin:10px;
+        padding:4px 10px;
         font-size: .75em;
         &.online{
             background-color: $status-online-color;