My Servers Feature

Store your favorite servers to easily select them when connecting

app/client/controllers/connectController.js

@@ -2,7 +2,14 @@
  * Connect Controller
  */
 
-module.exports = function($scope, socket) {
+module.exports = function($scope, socket, servers) {
+
+  $scope.servers = servers.get();
+
+  $scope.select = function(id) {
+    $scope.ip =   servers.select(id).ip;
+    $scope.port = servers.select(id).port;
+  };
 
   // connect handler
   $scope.connect = function() {

app/client/controllers/index.js

@@ -8,5 +8,6 @@ exports.register = function(app) {
   app.controller('bufferController',  require('./bufferController'));
   app.controller('chatController',    require('./chatController'));
   app.controller('navController',     require('./navController'));
+  app.controller('serversController', require('./serversController'));
 
 };

app/client/controllers/serversController.js

@@ -0,0 +1,21 @@
+module.exports = function($scope, servers) {
+
+  $scope.servers = servers.get();
+
+  $scope.add = function() {
+    var server = {
+      name: $scope.name,
+      ip:   $scope.ip,
+      port: $scope.port || 25565
+    };
+    servers.add(server);
+    $scope.servers = servers.get();
+  };
+
+
+  $scope.delete = function(index) {
+    servers.delete(index);
+    $scope.servers = servers.get();
+  };
+
+};

app/client/services/buffer.js

@@ -46,7 +46,6 @@ module.exports = function(socket, sound) {
   socket.on('disconnect', function() {
     $('#buffer').append('<span style="color:#D62D18;">&gt; Connection to chat server has been lost. Reconnecting...</span><br>');
     $('#buffer').scrollTop($('#buffer').prop('scrollHeight'));
-    sound.error();
   });
 
   socket.on('bot:disconnect', function() {

app/client/services/index.js

@@ -5,12 +5,15 @@
 exports.register = function(app) {
 
   // socket factory
-  app.factory('socket', require('./socket'));
+  app.factory('socket',  require('./socket'));
 
   // buffer factory
-  app.factory('buffer', require('./buffer'));
+  app.factory('buffer',  require('./buffer'));
 
   // sound factory
-  app.factory('sound',  require('./sound'));
+  app.factory('sound',   require('./sound'));
+
+  // servers factory
+  app.factory('servers', require('./servers'));
 
 };

app/client/services/servers.js

@@ -0,0 +1,41 @@
+module.exports = function() {
+
+  // function to save servers into localStorage
+  function save() {
+    localStorage.servers = JSON.stringify(servers);
+  }
+
+
+  // default servers
+  var defaultServers = [
+    {name: 'LattyCraft', ip: 'us.latty.info', port: 25565}
+  ];
+
+
+  // load servers from localstorage
+  var servers = JSON.parse(localStorage.servers);
+
+  if (!servers || servers.length === 0) {
+    servers = defaultServers;
+    save();
+  }
+
+
+  return {
+    get: function() {
+      return servers;
+    },
+    select: function(id) {
+      return servers[id];
+    },
+    add: function(server) {
+      servers.push(server);
+      save();
+    },
+    delete: function(index) {
+      servers.splice(index, 1);
+      save();
+    }
+  };
+
+};

public/templates/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Minecraft Chat | AlexKvazos</title>
   <meta name="author" content="AlexKvazos">
-  <meta name="viewport" content="width=device-with, initial-scale=1, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
   <!-- styles and fonts -->
   <link rel="shortcut icon" href="/favicon.png">

public/templates/modals/connect.html

@@ -8,21 +8,47 @@
       </div>
       <form ng-submit="connect()">
         <div class="modal-body">
-          <div class="form-group">
-            <label>Minecraft Username/Email</label>
-            <input type="text" ng-model="username" class="form-control" placeholder="Steve" required>
+          <div class="row">
+            <div class="col-sm-6">
+              <div class="form-group">
+                <label>Minecraft Username/Email</label>
+                <input type="text" ng-model="username" class="form-control" placeholder="Steve" required>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="form-group">
+                <label>Minecraft Password</label>
+                <input type="password" ng-model="password" class="form-control" placeholder="" required>
+              </div>
+            </div>
           </div>
-          <div class="form-group">
-            <label>Minecraft Password</label>
-            <input type="password" ng-model="password" class="form-control" placeholder="" required>
+          <hr>
+          <div class="row">
+            <div class="col-md-12">
+              <h6>My Servers</h6>
+              <table class="table table-bordered" ng-show="servers.length">
+                <tr ng-repeat="server in servers track by $index">
+                  <td>{{server.name}}</td>
+                  <td>{{server.ip}}:{{server.port}}</td>
+                  <td><span class="label label-info" ng-click="select($index)" style="cursor:pointer">Select</span></td>
+                </tr>
+              </table>
+              <p ng-hide="servers.length">You haven't saved any servers</p>
+            </div>
           </div>
-          <div class="form-group">
-            <label>Server IP</label>
-            <input type="text" ng-model="ip" class="form-control" placeholder="mc.server.com" required>
-          </div>
-          <div class="form-group">
-            <label>Server Port (Leave empty if unknown)</label>
-            <input type="number" ng-model="port" class="form-control" placeholder="25565">
+          <div class="row">
+            <div class="col-sm-6">
+              <div class="form-group">
+                <label>Server IP</label>
+                <input type="text" ng-model="ip" class="form-control" placeholder="mc.server.com" required>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="form-group">
+                <label>Server Port (Leave empty if unknown)</label>
+                <input type="number" ng-model="port" class="form-control" placeholder="25565">
+              </div>
+            </div>
           </div>
         </div>
         <div class="modal-footer">

public/templates/modals/servers.html

@@ -0,0 +1,49 @@
+<div class="modal fade" id="serversModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="serversController">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="myModalLabel">Servers</h4>
+        <p>Save your favorite servers to quickly connect to them.</p>
+      </div>
+
+      <div class="modal-body">
+        <h5>My Servers</h5>
+        <table class="table table-bordered" ng-show="servers.length">
+          <tr ng-repeat="server in servers track by $index">
+            <td>{{server.name}}</td>
+            <td>{{server.ip}}:{{server.port}}</td>
+            <td><span class="label label-danger" ng-click="delete($index)" style="cursor:pointer">Delete</span></td>
+          </tr>
+        </table>
+
+        <p ng-hide="servers.length">You haven't saved any servers!</p>
+
+        <hr>
+        <h5>Add Server</h5>
+        <form ng-submit="add()">
+          <div class="form-group">
+            <label>Server Name</label>
+            <input type="text" class="form-control" ng-model="name" placeholder="Minecraft Server" required>
+          </div>
+          <div class="row">
+            <div class="col-sm-6">
+              <div class="form-group">
+                <label>Server IP</label>
+                <input type="text" class="form-control" ng-model="ip" placeholder="mc.server.com" required>
+              </div>
+            </div>
+            <div class="col-sm-6">
+              <div class="form-group">
+                <label>Server Port (Leave empty if unknown)</label>
+                <input type="number" class="form-control" ng-model="port" placeholder="25565">
+              </div>
+            </div>
+          </div>
+          <input type="submit" class="btn btn-success" value="Save">
+        </form>
+      </div>
+
+    </div>
+  </div>
+</div>

public/templates/windows/nav.html

@@ -14,6 +14,7 @@
     <ul class="nav navbar-nav">
       <li><a style="cursor:pointer" ng-hide="connected" data-toggle="modal" data-target="#connectModal">Connect</a></li>
       <li><a style="cursor:pointer;color:#BE1106" ng-show="connected" ng-click="disconnect()">Disconnect</a></li>
+      <li><a style="cursor:pointer" data-toggle="modal" data-target="#serversModal">My Servers</a></li>
       <li><a href="https://github.com/AlexKvazos/MinecraftChat" target="new"><i class="fa fa-github"></i> GitHub</a></li>
     </ul>
     <ul class="nav navbar-nav pull-right">
@@ -26,3 +27,4 @@
 
 <!-- connect modal -->
 <div ng-include="'templates/modals/connect.html'"></div>
+<div ng-include="'templates/modals/servers.html'"></div>