Max ssids and delete features implemented

TODO

@@ -1,8 +1,6 @@
 * Translate PHP interface in French
 
 * multissid
-** WEB: limit to N ssid max depending on the antenna specs
-** WEB: add ssid delete feature
 ** WEB: update is_connected_through_hotspot feature
 ** WEB: autocomplete ipv4 nat prefix (.242, .243, .244, etc)
 ** WEB: check if ipv6 delgated prefixes and ipv4 nat prefixes are unique

sources/public/css/style.css

@@ -152,3 +152,13 @@ div.tabs {
 div.tabs a {
   outline: none;
 }
+
+div.deletessid {
+  text-align: center;
+  padding: 10px;
+}
+
+div.deletessid button {
+  display: block;
+  width: 100%;
+}

sources/public/js/custom.js

@@ -52,6 +52,45 @@ function dropDownClick() {
   input.val($(this).text());
 }
 
+function updateNbSsidRemaining() {
+  multissid = $('#devlist .active').data('multissid');
+  current = $('.ssid').length;
+  remaining = multissid - current;
+
+  $('.ssid').each(function(i) {
+    if(i >= multissid) {
+      $(this).removeClass('panel-default');
+      $(this).addClass('panel-danger');
+
+    } else {
+      $(this).removeClass('panel-danger');
+      $(this).addClass('panel-default');
+    }
+  });
+
+  $('.ssid').find('.deletessid').hide();
+  $('.ssid').last().find('.deletessid').show();
+  $('.ssid').first().find('.deletessid').hide();
+
+  if(remaining <= 0) {
+    $('#newssid').attr('disabled', true);
+    $('#newssid').removeClass('btn-success');
+    $('#newssid').addClass('btn-danger');
+
+  } else {
+    $('#newssid').attr('disabled', false);
+    $('#newssid').removeClass('btn-danger');
+    $('#newssid').addClass('btn-success');
+  }
+
+  $('#newssid span').text(remaining);
+}
+
+function deleteClick() {
+  $(this).closest('.ssid').remove();
+  updateNbSsidRemaining();
+}
+
 $(document).ready(function() {
   $('.btn-group').button();
   $('[data-toggle="tooltip"]').tooltip();
@@ -143,6 +182,7 @@ $(document).ready(function() {
     });
 
     clone.find('[data-toggle="tooltip"]').tooltip();
+    clone.find('.deletessid').click(deleteClick);
 
     clone.find('input[type=text]').each(function() {
       if($(this).attr('name').match('dns')) {
@@ -170,7 +210,13 @@ $(document).ready(function() {
     });
 
     $('#ssids').append(clone);
+
+    updateNbSsidRemaining(); 
   });
+
+  $('.deletessid').click(deleteClick);
+
+  updateNbSsidRemaining(); 
 });
 
 $(document).keydown(function(e) {

sources/views/_ssid.html.php

@@ -91,5 +91,9 @@
       </div>
     </div>
   </div>
+
+  <div class="deletessid" style="display: none">
+    <button type="button" class="btn btn-danger"><?= T_("Delete") ?></button>
+  </div>
 </div>
 

sources/views/settings.html.php

@@ -83,7 +83,7 @@
               <div class="input-group">
                   <input type="text" name="wifi_device" id="wifi_device" value="<?= $wifi_device ?>" style="display: none" />
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><?= $wifi_device ?> <span class="caret"></span></button>
-                  <ul class="dropdown-menu dropdown-menu-left" role="menu">
+                  <ul class="dropdown-menu dropdown-menu-left" id="devlist" role="menu">
                     <?= $wifi_device_list ?>
                   </ul>
               </div>
@@ -121,7 +121,7 @@
       <?php endforeach; ?>
       </div>
 
-<button id="newssid" type="button" class="btn btn-default">Add</button>
+      <button id="newssid" type="button" class="btn btn-success"><?= T_("Add a hotspot") ?> <span class="badge">0</span></button>
 
       <div class="form-group">
         <div style="text-align: center">