Merge pull request #117 from tekstrand/frontend-cleanup

Clean up frontend code and styles

src/var/www/hsmm-pi/View/Layouts/default.ctp

@@ -61,9 +61,12 @@ $cakeDescription = __d('cake_dev', __('HSMM-Pi'));
             <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
             <?php
               echo $this->Html->link(__('Reboot'), array(
-                                                        'controller' => 'system',
-                                                        'action' => 'reboot'),
-                                                        array('class'=>'btn btn-danger'));
+                  'controller' => 'system',
+                  'action' => 'reboot'
+                ),
+                array(
+                  'class'=>'btn btn-danger'
+                ));
             ?>
           </div>
         </div><!-- /.modal-content -->
@@ -85,9 +88,9 @@ $cakeDescription = __d('cake_dev', __('HSMM-Pi'));
             <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
             <?php
               echo $this->Html->link(__('Shutdown'), array(
-                                                          'controller' => 'system',
-                                                          'action' => 'shutdown'),
-                                                          array('class'=>'btn btn-danger'));
+                'controller' => 'system',
+                'action' => 'shutdown'),
+                  array('class'=>'btn btn-danger'));
             ?>
           </div>
         </div><!-- /.modal-content -->
@@ -95,113 +98,124 @@ $cakeDescription = __d('cake_dev', __('HSMM-Pi'));
     </div>
 
     <div class="navbar navbar-default" role="navigation">
-      <div class="navbar-header">
-        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <div class="navbar-brand"><?php echo __('HSMM-Pi'); ?></div>
-      </div>
-      <div class="navbar-collapse collapse">
-        <ul class="nav navbar-nav">
-          <li <?php if (strstr($this->here, '/hsmm-pi/status') != FALSE) { echo 'class="active"'; }  ?>>
-            <?php
-              echo $this->Html->link(__('Status'), array(
-                                                        'controller' => 'status',
-                                                        'action' => 'index'));
-            ?>
-          </li>
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
           <?php
-             if ($this->Session->read('Auth.User')) {
+            echo $this->Html->link(__('HSMM-Pi'), array(
+              'controller' => 'status',
+              'action' => 'index'
+            ),
+            array(
+              'class' => 'navbar-brand'
+            ));
           ?>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a>
-          <ul class="dropdown-menu">
-          <li <?php if (strstr($this->here, '/hsmm-pi/network_settings') != FALSE) { echo 'class="active"'; }  ?>>
+        </div>
+        <div class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li <?php if (strstr($this->here, '/hsmm-pi/status') != FALSE) { echo 'class="active"'; }  ?>>
+              <?php
+                echo $this->Html->link(__('Status'), array(
+                  'controller' => 'status',
+                  'action' => 'index'));
+              ?>
+            </li>
             <?php
-              echo $this->Html->link(__("<i class=\"glyphicon glyphicon-signal\"></i>&nbsp;".'Network'),
-                                     array(
-                                           'controller' => 'network_settings',
-                                           'action' => 'edit/1'),
-                                     array('escape' => false));
+              if ($this->Session->read('Auth.User')) {
             ?>
-          </li>
-          <li <?php if (strstr($this->here, '/hsmm-pi/network_services') != FALSE) { echo 'class="active"'; }  ?>>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li <?php if (strstr($this->here, '/hsmm-pi/network_settings') != FALSE) { echo 'class="active"'; }  ?>>
+                    <?php
+                    echo $this->Html->link(__("<i class=\"glyphicon glyphicon-signal\"></i>&nbsp;".'Network'),
+                    array(
+                      'controller' => 'network_settings',
+                      'action' => 'edit/1'),
+                      array('escape' => false));
+                    ?>
+                  </li>
+                  <li <?php if (strstr($this->here, '/hsmm-pi/network_services') != FALSE) { echo 'class="active"'; }  ?>>
+                    <?php
+                    echo $this->Html->link("<i class=\"glyphicon glyphicon-bullhorn\"></i>&nbsp;".__('Services'),
+                    array(
+                      'controller' => 'network_services',
+                      'action' => 'index'),
+                      array('escape' => false));
+                    ?>
+                  </li>
+                  <li <?php if (strstr($this->here, '/hsmm-pi/location') != FALSE) { echo 'class="active"'; }  ?>>
+                    <?php
+                     echo $this->Html->link("<i class=\"glyphicon glyphicon-globe\"></i>&nbsp;".__('Location'),
+                    array(
+                      'controller' => 'location_settings',
+                      'action' => 'edit/1'),
+                      array('escape' => false));
+                     ?>
+                  </li>
+                  <li <?php if (strstr($this->here, '/hsmm-pi/user') != FALSE) { echo 'class="active"'; }  ?>>
+                    <?php
+                     echo $this->Html->link("<i class=\"glyphicon glyphicon-user\"></i>&nbsp;".__('Account'),
+                    array(
+                      'controller' => 'users',
+                      'action' => 'edit'),
+                      array('escape' => false));
+                    ?>
+                  </li>
+                  <li class="divider"></li>
+                  <li <?php if (strstr($this->here, '/hsmm-pi/wifi_scan') != FALSE) { echo 'class="active"'; }  ?>>
+                    <?php
+                      echo $this->Html->link("<i class=\"glyphicon glyphicon-search\"></i>&nbsp;".__('WiFi Scan'),
+                      array(
+                        'controller' => 'wifi_scan',
+                        'action' => 'index'),
+                        array('escape' => false));
+                    ?>
+                  </li>
+                  <li class="divider"></li>
+                  <li><a href="#rebootModal" data-toggle="modal"><?php echo __('<i class="glyphicon glyphicon-refresh"></i>&nbsp;Reboot'); ?></a></li>
+                  <li><a href="#shutdownModal" data-toggle="modal"><?php echo __('<i class="glyphicon glyphicon-off"></i>&nbsp;Shutdown'); ?></a></li>
+                </ul>
+              </li>
             <?php
-              echo $this->Html->link("<i class=\"glyphicon glyphicon-bullhorn\"></i>&nbsp;".__('Services'),
-                                     array(
-                                           'controller' => 'network_services',
-                                           'action' => 'index'),
-                                     array('escape' => false));
+              }
             ?>
-          </li>
-          <li <?php if (strstr($this->here, '/hsmm-pi/location') != FALSE) { echo 'class="active"'; }  ?>>
-            <?php
-              echo $this->Html->link("<i class=\"glyphicon glyphicon-globe\"></i>&nbsp;".__('Location'),
-                                     array(
-                                           'controller' => 'location_settings',
-                                           'action' => 'edit/1'),
-                                     array('escape' => false));
-             ?>
-          </li>
-          <li <?php if (strstr($this->here, '/hsmm-pi/user') != FALSE) { echo 'class="active"'; }  ?>>
-            <?php
-              echo $this->Html->link("<i class=\"glyphicon glyphicon-user\"></i>&nbsp;".__('Account'),
-                                    array(
-                                          'controller' => 'users',
-                                          'action' => 'edit'),
-                                    array('escape' => false));
-            ?>
-          </li>
-          <li class="divider"></li>
-          <li <?php if (strstr($this->here, '/hsmm-pi/wifi_scan') != FALSE) { echo 'class="active"'; }  ?>>
-            <?php
-               echo $this->Html->link("<i class=\"glyphicon glyphicon-search\"></i>&nbsp;".__('WiFi Scan'),
-                                      array(
-                                            'controller' => 'wifi_scan',
-                                            'action' => 'index'),
-                                      array('escape' => false));
-            ?>
-          </li>
-          <li class="divider"></li>
-          <li><a href="#rebootModal" data-toggle="modal"><?php echo __('<i class="glyphicon glyphicon-refresh"></i>&nbsp;Reboot'); ?></a></li>
-          <li><a href="#shutdownModal" data-toggle="modal"><?php echo __('<i class="glyphicon glyphicon-off"></i>&nbsp;Shutdown'); ?></a></li>
           </ul>
-        <?php
-          }
-        ?>
-        </ul>
-        <?php
-          if ($this->Session->read('Auth.User')) {
-        ?>
-        <ul class="nav navbar-right">
-          <li>
-            <?php
-              echo $this->Html->link(__('Logout'),
-                                    array(
-                                          'controller' => 'users',
-                                          'action' => 'logout'));
-            ?>
-          </li>
-        </ul>
-        <?php
-          } else {
-        ?>
-        <ul class="nav pull-right">
-          <li>
-            <?php
-              echo $this->Html->link(__('Login'),
-                                    array(
-                                          'controller' => 'users',
-                                          'action' => 'login'));
-            ?>
-          </li>
-        </ul>
-        <?php
-          }
-        ?>
+          <?php
+            if ($this->Session->read('Auth.User')) {
+          ?>
+            <ul class="nav navbar-nav navbar-right">
+              <li>
+                <?php
+                  echo $this->Html->link(__('Logout'),
+                    array(
+                      'controller' => 'users',
+                      'action' => 'logout'));
+                ?>
+              </li>
+            </ul>
+          <?php
+            } else {
+          ?>
+            <ul class="nav navbar-nav navbar-right">
+              <li>
+                <?php
+                  echo $this->Html->link(__('Login'),
+                  array(
+                    'controller' => 'users',
+                    'action' => 'login'));
+                ?>
+              </li>
+            </ul>
+          <?php
+            }
+          ?>
+      </div>
     </div>
   </div>
 

src/var/www/hsmm-pi/View/LocationSettings/edit.ctp

@@ -16,47 +16,54 @@
 </script>
 
 <?php
-echo $this->Form->create('LocationSetting', array(
-  'inputDefaults' => array(
-    'div' => 'form-group',
-    'label' => array('class' => 'col col-md-3 control-label'),
-    'class' => 'form-control'),
-	'url' => array('controller' => 'location_settings', 'action' => 'edit')));
-echo $this->Form->input('id', array(
-	'type' => 'hidden',
-));
-
-?>
-<span class="pull-right">
-<?php echo $this->Form->submit(__('Save'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));?>
-</span>
-<p></p>
-
-<?php
-echo $this->Form->input('maps_api_key', array('label' => __('Bing Maps API Key (optional)')));
+  echo $this->Form->create('LocationSetting', array(
+    'inputDefaults' => array(
+      'div' => 'form-group',
+      'label' => array(
+        'class' => 'col col-md-3 control-label'
+      ),
+      'class' => 'form-control'
+    ),
+    'url' => array(
+      'controller' => 'location_settings',
+      'action' => 'edit'
+    )
+  ));
+  echo $this->Form->input('id', array(
+    'type' => 'hidden',
+  ));
 ?>
 
-<?php
-echo $this->Form->input('transmit_location_enabled', array('label' => __('Transmit Location in Mesh'), 'type' => 'checkbox'));
-echo $this->Form->input('location_source',
-	array(
-		'label' => __('Location Data Source'),
-		'options' => array('fixed' => 'Fixed', 'gps' => 'GPS'),
-		'onchange' => 'show_location_source(this)',
-	)
-);
-?>
-  <div id="fixed" style="padding: 0; display: <?php echo (0 == strcmp($location_source, 'fixed')) ? 'block' : 'none';?>;">
+<div class="row">
+  <div class="col-sm-8 col-md-5">
     <?php
-echo $this->Form->input('lat', array('label' => __('Latitude')));
-echo $this->Form->input('lon', array('label' => __('Longitude')));
-?>
-  </div>
-  <div id="gps" style="padding: 0; display: <?php echo (0 == strcmp($location_source, 'gps')) ? 'block' : 'none';?>;">
-    <?php
-echo $this->Form->input('gps_device_name', array('label' => __('GPS Device Name')));
-?>
+      echo $this->Form->input('maps_api_key', array('label' => __('Bing Maps API Key (optional)')));
+      echo $this->Form->input('transmit_location_enabled', array('label' => __('Transmit Location in Mesh'), 'type' => 'checkbox'));
+      echo $this->Form->input('location_source',
+        array(
+          'label' => __('Location Data Source'),
+          'options' => array(
+            'fixed' => 'Fixed',
+            'gps' => 'GPS'
+          ),
+          'onchange' => 'show_location_source(this)',
+        )
+      );
+    ?>
+    <div id="fixed" style="padding: 0; display: <?php echo (0 == strcmp($location_source, 'fixed')) ? 'block' : 'none';?>;">
+      <?php
+        echo $this->Form->input('lat', array('label' => __('Latitude')));
+        echo $this->Form->input('lon', array('label' => __('Longitude')));
+      ?>
+    </div>
+    <div id="gps" style="padding: 0; display: <?php echo (0 == strcmp($location_source, 'gps')) ? 'block' : 'none';?>;">
+      <?php
+        echo $this->Form->input('gps_device_name', array('label' => __('GPS Device Name')));
+      ?>
+    </div>
+    <?php echo $this->Form->submit(__('Save'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));?>
   </div>
+</div>
 <?php
-echo $this->Form->end();
+  echo $this->Form->end();
 ?>

src/var/www/hsmm-pi/View/NetworkServices/add.ctp

@@ -3,28 +3,32 @@
   <h1>Add Network Service</h1>
 </div>
 
-<?php
-echo $this->Form->create('NetworkService', array(
-  'inputDefaults' => array(
-    'div' => 'form-group',
-    'label' => array('class' => 'col col-md-3 control-label'),
-    'class' => 'form-control'),
-));
-echo $this->Form->input('name');
-echo $this->Form->input('service_protocol_name');
-echo $this->Form->input('host');
-echo $this->Form->input('port');
-echo $this->Form->input('path');
-echo $this->Form->input('protocol', array('options' => array('tcp' => 'TCP', 'udp' => 'UDP')));
-echo $this->Form->input('local_port');
+<div class="row">
+  <div class="col-sm-8 col-md-5">
+    <?php
+    echo $this->Form->create('NetworkService', array(
+      'inputDefaults' => array(
+        'div' => 'form-group',
+        'class' => 'form-control')
+      )
+    );
+    echo $this->Form->input('name');
+    echo $this->Form->input('service_protocol_name');
+    echo $this->Form->input('host');
+    echo $this->Form->input('port');
+    echo $this->Form->input('path');
+    echo $this->Form->input('protocol', array('options' => array('tcp' => 'TCP', 'udp' => 'UDP')));
+    echo $this->Form->input('local_port');
 
-echo $this->Html->link(__('Cancel'),
-	array(
-		'controller' => 'network_services',
-		'action' => 'index'),
-	array('class' => 'btn btn-default')
-);
-echo "&nbsp;&nbsp;";
-echo $this->Form->submit(__('Save'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));
-echo $this->Form->end();
-?>
+    echo $this->Html->link(__('Cancel'),
+      array(
+        'controller' => 'network_services',
+        'action' => 'index'),
+      array('class' => 'btn btn-default')
+    );
+    echo "&nbsp;&nbsp;";
+    echo $this->Form->submit(__('Save'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));
+    echo $this->Form->end();
+    ?>
+  </div>
+</div>

src/var/www/hsmm-pi/View/NetworkServices/index.ctp

@@ -7,12 +7,13 @@
   <div class="col-md-12">
     <div class="pull-right">
       <p>
-	<?php
-echo $this->Html->link(__('Add'), array(
-	'controller' => 'network_services',
-	'action' => 'add'), array(
-	'class' => 'btn btn-primary'));
-?>
+      <?php
+        echo $this->Html->link(__('Add a service'), array(
+          'controller' => 'network_services',
+          'action' => 'add'), array(
+          'class' => 'btn btn-primary')
+        );
+      ?>
       </p>
     </div>
   </div>
@@ -20,50 +21,59 @@ echo $this->Html->link(__('Add'), array(
 
 <div class="row">
   <div class="col-md-12">
-      <?php
-if ($services != NULL && sizeof($services) > 0) {
-	?>
-      <table class="table table-striped table-bordered">
-	<tr>
-	  <th>Name</th>
-	  <th>Host</th>
-	  <th>Port</th>
-	  <th>Protocol</th>
-	  <th>Local Port</th>
-	  <th>Service URL</th>
-	  <th>Actions</th>
-	</tr>
-	<?php
-foreach ($services as $service) {
-		?>
-	<tr>
-	  <td><?php echo $service['NetworkService']['name'];?></td>
-	  <td><?php echo $service['NetworkService']['host'];?></td>
-	  <td><?php echo $service['NetworkService']['port'];?></td>
-	  <td><?php echo $service['NetworkService']['protocol'];?></td>
-	  <td><?php echo $service['NetworkService']['local_port'];?></td>
-	  <td><a href="<?php echo $service['NetworkService']['service_protocol_name'] . "://" . $node_name . ":" . $service['NetworkService']['port'] . '/' . $service['NetworkService']['path'];?>"><?php echo $service['NetworkService']['service_protocol_name'] . "://" . $node_name . ":" . $service['NetworkService']['port'] . '/' . $service['NetworkService']['path'];?></a></td>
-	  <td>
-	        <?php
-echo $this->Html->link('', array(
-			'action' => 'delete',
-			$service['NetworkService']['id'],
-		),
-			array('class' => 'glyphicon glyphicon-trash'));
-		?>
-	  </td>
-	</tr>
-	<?php
-}
-	?>
-      </table>
-      <?php
-} else {
-	?>
-      <div class="alert alert-info">
-      	   No services have been defined.
-      </div>
-      <?php }
-?>
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Host</th>
+          <th>Port</th>
+          <th>Protocol</th>
+          <th>Local Port</th>
+          <th>Service URL</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <?php
+          if ($services != NULL && sizeof($services) > 0) {
+            foreach ($services as $service) {
+        ?>
+          <tr>
+            <td><?php echo $service['NetworkService']['name'];?></td>
+            <td><?php echo $service['NetworkService']['host'];?></td>
+            <td><?php echo $service['NetworkService']['port'];?></td>
+            <td><?php echo $service['NetworkService']['protocol'];?></td>
+            <td><?php echo $service['NetworkService']['local_port'];?></td>
+            <td><a href="<?php echo $service['NetworkService']['service_protocol_name'] . "://" . $node_name . ":" . $service['NetworkService']['port'] . '/' . $service['NetworkService']['path'];?>"><?php echo $service['NetworkService']['service_protocol_name'] . "://" . $node_name . ":" . $service['NetworkService']['port'] . '/' . $service['NetworkService']['path'];?></a></td>
+            <td>
+              <?php
+                echo $this->Html->link('', array(
+                  'action' => 'delete',
+                  $service['NetworkService']['id'],
+                ),
+                array('class' => 'glyphicon glyphicon-trash'));
+              ?>
+            </td>
+          </tr>
+        <?php
+            }
+          } else {
+        ?>
+          <tr class="info">
+            <td colspan="7">No services have been added yet.
+              <?php
+                echo $this->Html->link(__('Add a service'), array(
+                  'controller' => 'network_services',
+                  'action' => 'add'), array(
+                  'class' => '')
+                );
+              ?>
+            </td>
+          </tr>
+        <?php 
+          }
+        ?>
+      </tbody>
+    </table>
   </div>
 </div>

src/var/www/hsmm-pi/View/NetworkSettings/edit.ctp

@@ -16,100 +16,102 @@
 </script>
 
 <?php
-echo $this->Form->create('NetworkSetting', array(
-  'inputDefaults' => array(
-    'div' => 'form-group',
-    'label' => array('class' => 'col col-md-3 control-label'),
-    'class' => 'form-control'),
-	'url' => array('controller' => 'network_settings', 'action' => 'edit')));
-echo $this->Form->input('id', array(
-	'type' => 'hidden',
-));
-
+  echo $this->Form->create('NetworkSetting', array(
+    'inputDefaults' => array(
+      'div' => 'form-group',
+      'class' => 'form-control'
+    ),
+    'url' => array(
+      'controller' => 'network_settings',
+      'action' => 'edit'
+    )
+  ));
+  echo $this->Form->input('id', array(
+    'type' => 'hidden',
+  ));
 ?>
-<span class="pull-right">
-<?php echo $this->Form->submit(__('Save'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));?>
-</span>
-<p></p>
 
-<div class="tabbable"> <!-- Only required for left/right tabs -->
-  <ul class="nav nav-tabs">
-    <li class="active"><a href="#wifi" data-toggle="tab"><?php echo __('WiFi');?></a></li>
-    <li><a href="#wired" data-toggle="tab"><?php echo __('Wired');?></a></li>
-    <li><a href="#mesh" data-toggle="tab"><?php echo __('Mesh');?></a></li>
-    <li><a href="#time" data-toggle="tab"><?php echo __('Time');?></a></li>
-  </ul>
-  <div class="tab-content">
-    <div class="tab-pane active" id="wifi">
-      <?php
-echo $this->Form->input('wifi_adapter_name', array('label' => __('Adapter Name')));
-echo $this->Form->input('wifi_ip_address', array('label' => __('IP Address')));
-echo $this->Form->input('wifi_netmask', array('label' => __('Netmask')));
-echo $this->Form->input('wifi_ssid', array('label' => __('SSID')));
-echo $this->Form->input('wifi_channel',
-	array(
-		'label' => __('Channel'),
-		'options' => array(1 => 1, 2 => 2, 3 => 3, 4 => 4, 5 => 5, 6 => 6, 7 => 7, 8 => 8, 9 => 9, 10 => 10, 11 => 11),
-	));
+<div class="row">
+  <div class="col-md-5 col-sm-8">
 
-?>
-    </div>
-    <div class="tab-pane" id="wired">
-      <?php
-echo $this->Form->input('wired_adapter_name', array('label' => __('Adapter Name')));
-echo $this->Form->input('wired_interface_mode',
-	array(
-		'label' => __('Wired interface mode'),
-		'options' => array('LAN' => 'LAN', 'WAN' => 'WAN'),
-		'onchange' => 'show_wired_mode(this)',
-	)
-);
-?>
-      <div id="lan" style="padding: 0; display: <?php echo (0 == strcmp($wired_interface_mode, 'LAN')) ? 'block' : 'none';?>;">
-      <?php
-echo $this->Form->input('lan_mode',
-	array(
-		'label' => __('LAN Mode'),
-		'options' => array('NAT' => 'NAT'),
-	)
-);
-echo $this->Form->input('lan_ip_address', array('label' => __('IP Address')));
-echo $this->Form->input('lan_netmask', array('label' => __('Netmask')));
-
-echo $this->Form->input('lan_dhcp_server', array('label' => __('DHCP Server'), 'type' => 'checkbox'));
-
-echo $this->Form->input('lan_dhcp_start', array('label' => __('DHCP Start')));
-echo $this->Form->input('lan_dhcp_end', array('label' => __('DHCP End')));
-?>
-      </div>
-      <div id="wan" style="padding: 0; display: <?php echo (0 == strcmp($wired_interface_mode, 'WAN')) ? 'block' : 'none';?>;">
-      <?php
-echo $this->Form->input('wan_protocol',
-	array(
-		'label' => __('Protocol'),
-		'options' => array('DHCP' => 'DHCP'),
-	)
-);
-echo $this->Form->input('wan_dns1', array('label' => __('DNS 1')));
-echo $this->Form->input('wan_dns2', array('label' => __('DNS 2')));
-echo $this->Form->input('wan_fixed_connection', array('label' => __('WAN port is always on (periodic testing of Internet connectivity is unnecessary)'), 'type' => 'checkbox'));
-?>
+    <div class="tabbable"> <!-- Only required for left/right tabs -->
+      <ul class="nav nav-tabs">
+        <li class="active"><a href="#wifi" data-toggle="tab"><?php echo __('WiFi');?></a></li>
+        <li><a href="#wired" data-toggle="tab"><?php echo __('Wired');?></a></li>
+        <li><a href="#mesh" data-toggle="tab"><?php echo __('Mesh');?></a></li>
+        <li><a href="#time" data-toggle="tab"><?php echo __('Time');?></a></li>
+      </ul>
+      <div class="tab-content">
+        <div class="tab-pane active" id="wifi">
+          <?php
+            echo $this->Form->input('wifi_adapter_name', array('label' => __('Adapter Name')));
+            echo $this->Form->input('wifi_ip_address', array('label' => __('IP Address')));
+            echo $this->Form->input('wifi_netmask', array('label' => __('Netmask')));
+            echo $this->Form->input('wifi_ssid', array('label' => __('SSID')));
+            echo $this->Form->input('wifi_channel',
+              array(
+                'label' => __('Channel'),
+                'options' => array(1 => 1, 2 => 2, 3 => 3, 4 => 4, 5 => 5, 6 => 6, 7 => 7, 8 => 8, 9 => 9, 10 => 10, 11 => 11),
+              ));
+          ?>
+        </div>
+        <div class="tab-pane" id="wired">
+          <?php
+            echo $this->Form->input('wired_adapter_name', array('label' => __('Adapter Name')));
+            echo $this->Form->input('wired_interface_mode',
+              array(
+                'label' => __('Wired interface mode'),
+                'options' => array('LAN' => 'LAN', 'WAN' => 'WAN'),
+                'onchange' => 'show_wired_mode(this)',
+              )
+            );
+          ?>
+          <div id="lan" style="padding: 0; display: <?php echo (0 == strcmp($wired_interface_mode, 'LAN')) ? 'block' : 'none';?>;">
+            <?php
+              echo $this->Form->input('lan_mode',
+                array(
+                  'label' => __('LAN Mode'),
+                  'options' => array('NAT' => 'NAT'),
+                )
+              );
+              echo $this->Form->input('lan_ip_address', array('label' => __('IP Address')));
+              echo $this->Form->input('lan_netmask', array('label' => __('Netmask')));
+              echo $this->Form->input('lan_dhcp_server', array('label' => __('DHCP Server'), 'type' => 'checkbox'));
+              echo $this->Form->input('lan_dhcp_start', array('label' => __('DHCP Start')));
+              echo $this->Form->input('lan_dhcp_end', array('label' => __('DHCP End')));
+            ?>
+          </div>
+          <div id="wan" style="padding: 0; display: <?php echo (0 == strcmp($wired_interface_mode, 'WAN')) ? 'block' : 'none';?>;">
+            <?php
+              echo $this->Form->input('wan_protocol',
+                array(
+                  'label' => __('Protocol'),
+                  'options' => array('DHCP' => 'DHCP'),
+                )
+              );
+              echo $this->Form->input('wan_dns1', array('label' => __('DNS 1')));
+              echo $this->Form->input('wan_dns2', array('label' => __('DNS 2')));
+              echo $this->Form->input('wan_fixed_connection', array('label' => __('WAN port is always on (periodic testing of Internet connectivity is unnecessary)'), 'type' => 'checkbox'));
+            ?>
+          </div>
+        </div>
+        <div class="tab-pane" id="mesh">
+          <?php
+            echo $this->Form->input('node_name', array('label' => __('Node Name')));
+            echo $this->Form->input('mesh_olsrd_secure', array('label' => __('OLSRD Secure'), 'type' => 'checkbox'));
+            echo $this->Form->input('mesh_olsrd_secure_key', array('label' => __('OLSRD Secure Key')));
+          ?>
+        </div>
+        <div class="tab-pane" id="time">
+          <?php
+            echo $this->Form->input('ntp_server', array('label' => __('Network Time Server')));
+          ?>
+        </div>
+        <?php echo $this->Form->submit(__('Save Network Settings'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));?>
       </div>
     </div>
-    <div class="tab-pane" id="mesh">
-      <?php
-echo $this->Form->input('node_name', array('label' => __('Node Name')));
-echo $this->Form->input('mesh_olsrd_secure', array('label' => __('OLSRD Secure'), 'type' => 'checkbox'));
-echo $this->Form->input('mesh_olsrd_secure_key', array('label' => __('OLSRD Secure Key')));
-?>
-    </div>
-    <div class="tab-pane" id="time">
-      <?php
-echo $this->Form->input('ntp_server', array('label' => __('Network Time Server')));
-?>
-    </div>
+    <?php
+      echo $this->Form->end();
+    ?>
   </div>
 </div>
-<?php
-echo $this->Form->end();
-?>

src/var/www/hsmm-pi/View/Status/index.ctp

@@ -1,37 +1,36 @@
 <!-- File: /app/View/Status/index.ctp -->
 
 <script>
-    $( document ).on("click", ".open-mapModal", function () {
-  // set lat-lon labels on the modal dialog
-  $("#longitude").text($(this).data('lon'));
-  $("#latitude").text($(this).data('lat'));
+  $(document).on("click", ".open-mapModal", function() {
+    // set lat-lon labels on the modal dialog
+    $("#longitude").text($(this).data('lon'));
+    $("#latitude").text($(this).data('lat'));
 
-
-  if ((typeof(Microsoft) !== 'undefined') && (typeof(Microsoft.Maps) !== 'undefined')) {
-            var latVal = $(this).data('lat');
-            var lonVal = Microsoft.Maps.Location.normalizeLongitude($(this).data('lon'));
-            var center_loc = new Microsoft.Maps.Location(latVal, lonVal);
-            var pin = new Microsoft.Maps.Pushpin(center_loc, {draggable:false});
-            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: "<?php echo ((null != $maps_api_key) ? $maps_api_key : '');?>"});
-            map.setView({center:center_loc, zoom:15});
-            map.entities.push(pin);
-  }
-
-    });
+    if ((typeof(Microsoft) !== 'undefined') && (typeof(Microsoft.Maps) !== 'undefined')) {
+      var latVal = $(this).data('lat');
+      var lonVal = Microsoft.Maps.Location.normalizeLongitude($(this).data('lon'));
+      var center_loc = new Microsoft.Maps.Location(latVal, lonVal);
+      var pin = new Microsoft.Maps.Pushpin(center_loc, {draggable:false});
+      var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials: "<?php echo ((null != $maps_api_key) ? $maps_api_key : '');?>"});
+      map.setView({center:center_loc, zoom:15});
+      map.entities.push(pin);
+    }
+  });
 </script>
 
 <div class="page-header">
   <h1>Status&nbsp;
-      <small><?php echo $node_name;?>
- <?php
-if (array_key_exists($node_wifi_ip_address, $mesh_node_locations)) {
-  $location = $mesh_node_locations[$node_wifi_ip_address];
-  if ($location != NULL) {
-    echo "&nbsp;<a href=\"#mapModal\" data-lat=\"" . $location['lat'] . "\" data-lon=\"" . $location['lon'] . "\" role=\"button\" class=\"open-mapModal glyphicon glyphicon-globe unstyled-link\" data-toggle=\"modal\"></a>";
-  }
-}
-?>
-</small></h1>
+    <small><?php echo $node_name;?>
+    <?php
+      if (array_key_exists($node_wifi_ip_address, $mesh_node_locations)) {
+        $location = $mesh_node_locations[$node_wifi_ip_address];
+        if ($location != NULL) {
+          echo "&nbsp;<a href=\"#mapModal\" data-lat=\"" . $location['lat'] . "\" data-lon=\"" . $location['lon'] . "\" role=\"button\" class=\"open-mapModal glyphicon glyphicon-globe unstyled-link\" data-toggle=\"modal\"></a>";
+        }
+      }
+    ?>
+    </small>
+  </h1>
 </div>
 
 <div class="row">
@@ -40,141 +39,148 @@ if (array_key_exists($node_wifi_ip_address, $mesh_node_locations)) {
       <h3>Neighbors</h3>
 
       <?php
-if ($mesh_links != NULL && sizeof($mesh_links['links']) > 0) {
-  ?>
-      <table class="table table-striped table-bordered">
-  <tr>
-          <th>Hostname</th>
-    <th>IP Address</th>
-    <th>Link Quality</th>
-  </tr>
-  <?php
-$neighbor_ips = array();
-foreach ($mesh_links['links'] as $node) {
-  $neighbor_ips[$node['remoteIP']] = 1;
-    ?>
-  <tr>
-          <?php
-$node_hostname = $mesh_hosts[$node['remoteIP']];
-if (!$node_hostname) {
-  $node_hostname = $node['remoteIP'];
-}
-?>
-          <td><a href="http://<?php echo $node_hostname;?>:8080/"><?php echo $node_hostname;?></a>
-     <?php
-if (array_key_exists($node['remoteIP'], $mesh_node_locations)) {
-      $location = $mesh_node_locations[$node['remoteIP']];
-      if ($location != NULL) {
-        echo "&nbsp;<a href=\"#mapModal\" data-lat=\"" . $location['lat'] . "\" data-lon=\"" . $location['lon'] . "\" role=\"button\" class=\"open-mapModal glyphicon glyphicon-globe unstyled-link\" data-toggle=\"modal\"></a>";
-      }
-    }
-    ?>
-     <?php if (in_array($node['remoteIP'], $mesh_neighbors)) {?>
-     &nbsp;<i class="glyphicon glyphicon-star"></i>
-     <?php }
-    ?>
-    </td>
-    <td><?php echo $node['remoteIP'];?></td>
-    <td>
-      <div class="progress"><div class="progress-bar" role="progressbar" style="width: <?php echo round($node['linkQuality'] * 100) . '%';?>;"><?php echo round($node['linkQuality'] * 100) . '%';?></div>
-    </div></td>
-  </tr>
-  <?php
-}
-  ?>
-      </table>
+        if ($mesh_links != NULL && sizeof($mesh_links['links']) > 0) {
+      ?>
+        <table class="table table-striped table-bordered table-responsive">
+          <thead>
+            <tr>
+              <th>Hostname</th>
+              <th>IP Address</th>
+              <th>Link Quality</th>
+            </tr>
+          </thead>
+          <tbody>
+            <?php
+              $neighbor_ips = array();
+              foreach ($mesh_links['links'] as $node) {
+                $neighbor_ips[$node['remoteIP']] = 1;
+            ?>
+              <tr>
+                <?php
+                  $node_hostname = $mesh_hosts[$node['remoteIP']];
+                  if (!$node_hostname) {
+                    $node_hostname = $node['remoteIP'];
+                  }
+                ?>
+                <td><a href="http://<?php echo $node_hostname;?>:8080/"><?php echo $node_hostname;?></a>
+                  <?php
+                    if (array_key_exists($node['remoteIP'], $mesh_node_locations)) {
+                      $location = $mesh_node_locations[$node['remoteIP']];
+                      if ($location != NULL) {
+                        echo "&nbsp;<a href=\"#mapModal\" data-lat=\"" . $location['lat'] . "\" data-lon=\"" . $location['lon'] . "\" role=\"button\" class=\"open-mapModal glyphicon glyphicon-globe unstyled-link\" data-toggle=\"modal\"></a>";
+                      }
+                    }
+                  ?>
+                  <?php if (in_array($node['remoteIP'], $mesh_neighbors)) {?>
+                    &nbsp;<i class="glyphicon glyphicon-star"></i>
+                  <?php }
+                  ?>
+                </td>
+                <td><?php echo $node['remoteIP'];?></td>
+                <td>
+                  <div class="progress">
+                    <div class="progress-bar" role="progressbar" style="width: <?php echo round($node['linkQuality'] * 100) . '%';?>;"><?php echo round($node['linkQuality'] * 100) . '%';?></div>
+                  </div>
+                </td>
+              </tr>
+            <?php
+              }
+            ?><!-- /foreach $mesh_links -->
+          </tbody>
+        </table>
       <?php
-} else {
-  ?>
-      <div class="alert alert-danger">
-  <strong>Warning!</strong>.  There are no mesh links in range.  It's a bit quiet around here.
-      </div>
-      <?php }
-?>
-    </div>
+        } else {
+      ?>
+        <div class="alert alert-info">
+          <p>There are currently no mesh nodes in range.</p>
+        </div>
+      <?php
+        }
+      ?>
+    </div><!-- /.well -->
 
     <?php
-$remote_nodes = array();
-foreach ($mesh_routes as $route) {
-  if ($route['genmask'] < 32) continue;
-  if (array_key_exists($route['destination'], $neighbor_ips)) continue;
-  $node_hostname = $mesh_hosts[$route['destination']];
-  if (!$node_hostname) {
-    $node_hostname = $route['destination'];
-  }
-  if (substr($node_hostname, 0, 8) === "dtdlink.") continue;
-  $route['hostname'] = $node_hostname;
-  $remote_nodes[] = $route;
-}
-if (sizeof($remote_nodes) > 0) {
-?>
-    <div class="well">
-      <h3>Remote Nodes</h3>
-      <table class="table table-striped table-bordered">
-  <tr>
-          <th>Hostname</th>
-    <th>IP Address</th>
-    <th>Link Cost</th>
-  </tr>
-  <?php
-foreach ($remote_nodes as $node) {
-    ?>
-  <tr>
-          <td><a href="http://<?php echo $node['hostname'];?>:8080/"><?php echo $node['hostname'];?></a>
-     <?php
-if (array_key_exists($node['destination'], $mesh_node_locations)) {
-      $location = $mesh_node_locations[$node['destination']];
-      if ($location != NULL) {
-        echo "&nbsp;<a href=\"#mapModal\" data-lat=\"" . $location['lat'] . "\" data-lon=\"" . $location['lon'] . "\" role=\"button\" class=\"open-mapModal glyphicon glyphicon-globe unstyled-link\" data-toggle=\"modal\"></a>";
+      $remote_nodes = array();
+      foreach ($mesh_routes as $route) {
+        if ($route['genmask'] < 32) continue;
+        if (array_key_exists($route['destination'], $neighbor_ips)) continue;
+        $node_hostname = $mesh_hosts[$route['destination']];
+        if (!$node_hostname) {
+          $node_hostname = $route['destination'];
+        }
+        if (substr($node_hostname, 0, 8) === "dtdlink.") continue;
+        $route['hostname'] = $node_hostname;
+        $remote_nodes[] = $route;
       }
-    }
+      if (sizeof($remote_nodes) > 0) {
     ?>
-    </td>
-    <td><?php echo $node['destination']; ?></td>
-    <td><?php echo number_format($node['rtpMetricCost'] / 1024, 2); ?></td>
-  </tr>
-  <?php
-}
-  ?>
-      </table>
-    </div>
+      <div class="well">
+        <h3>Remote Nodes</h3>
+        <table class="table table-striped table-bordered">
+          <tr>
+            <th>Hostname</th>
+            <th>IP Address</th>
+            <th>Link Cost</th>
+          </tr>
+          <?php
+            foreach ($remote_nodes as $node) {
+          ?>
+            <tr>
+              <td><a href="http://<?php echo $node['hostname'];?>:8080/"><?php echo $node['hostname'];?></a>
+              <?php
+                if (array_key_exists($node['destination'], $mesh_node_locations)) {
+                  $location = $mesh_node_locations[$node['destination']];
+                  if ($location != NULL) {
+                    echo "&nbsp;<a href=\"#mapModal\" data-lat=\"" . $location['lat'] . "\" data-lon=\"" . $location['lon'] . "\" role=\"button\" class=\"open-mapModal glyphicon glyphicon-globe unstyled-link\" data-toggle=\"modal\"></a>";
+                  }
+                }
+              ?>
+              </td>
+              <td><?php echo $node['destination']; ?></td>
+              <td><?php echo number_format($node['rtpMetricCost'] / 1024, 2); ?></td>
+            </tr>
+          <?php
+            }
+          ?>
+        </table>
+      </div><!-- /.well -->
     <?php
-  }
-  ?>
-  </div>
+      }
+    ?>
+  </div><!-- /.col-md-8 -->
 
   <div class="col-md-4">
     <div class="well">
       <h3>Mesh Services</h3>
-
-      <?php
-if ($mesh_services != NULL && sizeof($mesh_services) > 0) {
-  ?>
       <table class="table table-striped table-bordered">
-  <tr>
-    <th>Service</th>
-  </tr>
-  <?php
-foreach ($mesh_services as $service) {
-    ?>
-  <tr>
-    <td><a href="<?php echo $service[0];?>"><?php echo $service[2];?></a></td>
-  </tr>
-  <?php
-}
-  ?>
+        <thead>
+          <tr>
+            <th>Service</th>
+          </tr>
+        </thead>
+        <tbody>
+        <?php
+          if ($mesh_services != NULL && sizeof($mesh_services) > 0) {
+            foreach ($mesh_services as $service) {
+        ?>
+          <tr>
+            <td><a href="<?php echo $service[0];?>"><?php echo $service[2];?></a></td>
+          </tr>
+        <?php
+            }
+          } else {
+        ?>
+          <tr class="info">
+            <td>There are no mesh services being announced at this time.</td>
+          </tr>
+        <?php
+          }
+        ?>
+        </tbody>
       </table>
-      <?php
-} else {
-  ?>
-      <div class="alert alert-info">
-  There are no mesh services being announced at this time.
-      </div>
-      <?php }
-?>
-    </div>
-  </div>
-</div>
+    </div><!-- /.well -->
+  </div><!-- /.col-md-4 -->
+</div><!-- /.row -->
 
 <div class="row">
   <div class="col-md-8">
@@ -192,11 +198,11 @@ foreach ($mesh_services as $service) {
       </div>
       <div class="modal-body">
         <div id='mapDiv' style="position:relative; width:500px; height:350px;"></div>
-        <h5>Latitude:&nbsp;<em id="latitude"></em>&nbsp;&nbsp;Longitude:&nbsp;<em id="longitude"></em></h5>
+        <h5>Latitude: <span class="latitude"></span>, Longitude: <span class="longitude"></span> <small><span class="latitude"></span>, <span class="longitude"></span></small></h5>
       </div>
       <div class="modal-footer">
         <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
       </div>
     </div>
   </div>
-</div>
+</div>

src/var/www/hsmm-pi/View/Users/edit.ctp

@@ -2,18 +2,20 @@
 <div class="page-header">
   <h1>Change Password</h1>
 </div>
-
-<?php
-echo $this->Form->create('User', array(
-  'inputDefaults' => array(
-    'div' => 'form-group',
-    'label' => array('class' => 'col col-md-3 control-label'),
-    'class' => 'form-control'),
-  'url' => array('controller' => 'users', 'action' => 'edit')));
-echo $this->Form->input('current_password', array('label' => __('Current Password'), 'type' => 'password'));
-echo $this->Form->input('password', array('label' => __('New Password'), 'type' => 'password'));
-echo $this->Form->input('password_confirmation', array('label' => __('New Password (again)'), 'type' => 'password'));
-
-echo $this->Form->submit(__('Save'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));
-echo $this->Form->end();
-?>
+<div class="row">
+  <div class="col-sm-4">
+    <?php
+      echo $this->Form->create('User', array(
+        'inputDefaults' => array(
+          'div' => 'form-group',
+          'label' => array('class' => 'col col-md-3 control-label'),
+          'class' => 'form-control'),
+        'url' => array('controller' => 'users', 'action' => 'edit')));
+      echo $this->Form->input('current_password', array('label' => __('Current Password'), 'type' => 'password'));
+      echo $this->Form->input('password', array('label' => __('New Password'), 'type' => 'password'));
+      echo $this->Form->input('password_confirmation', array('label' => __('New Password (again)'), 'type' => 'password'));
+      echo $this->Form->submit(__('Save'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));
+      echo $this->Form->end();
+    ?>
+  </div>
+</div>

src/var/www/hsmm-pi/View/Users/login.ctp

@@ -1,26 +1,27 @@
-<div class="users form">
-<?php
-echo $this->Session->flash();
-?>
-<?php
-echo $this->Form->create('User', array(
-  'inputDefaults' => array(
-    'div' => 'form-group',
-    'label' => array('class' => 'col col-md-3 control-label'),
-    'class' => 'form-control')));
-?>
-
-<fieldset>
-<legend><?php
-echo __('Please enter your username and password');
-?></legend>
-<?php
-echo $this->Form->input('username');
-echo $this->Form->input('password');
-?>
-</fieldset>
-<?php
-echo $this->Form->submit(__('Login'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));
-echo $this->Form->end();
-?>
+<div class="col-sm-4">
+  <?php
+    echo $this->Session->flash();
+  ?>
+  <?php
+    echo $this->Form->create('User', array(
+      'inputDefaults' => array(
+        'div' => 'form-group',
+        'label' => array(
+          'class' => 'control-label'
+        ),
+        'class' => 'form-control'
+      )
+    ));
+  ?>
+  <?php
+    echo __('Please enter your username and password');
+  ?>
+  <?php
+    echo $this->Form->input('username');
+    echo $this->Form->input('password');
+  ?>
+  <?php
+    echo $this->Form->submit(__('Login'), array('name' => 'submit', 'div' => false, 'class' => 'btn btn-primary'));
+    echo $this->Form->end();
+  ?>
 </div>

src/var/www/hsmm-pi/View/WifiScan/index.ctp

@@ -9,31 +9,35 @@
     <?php
       if ($wifi_networks != NULL && sizeof($wifi_networks) > 0) {
     ?>
-    <table class="table table-striped table-bordered">
-      <tr>
-        <th>ESSID</th>
-        <th>MAC Address</th>
-        <th>Channel</th>
-        <th>Signal Quality</th>
-      </tr>
-      <?php
-      foreach ($wifi_networks as $network) {
-      ?>
-      <tr>
-        <td><?php echo $network['essid'];?></td>
-        <td><?php echo $network['address'];?></td>
-        <td><?php echo $network['channel'];?></td>
-        <td>
-          <div class="progress"><div class="progress-bar" role="progressbar" style="width: <?php echo round($network['signal_quality'] * 100) . '%';?>;"><?php echo round($network['signal_quality'] * 100) . '%';?></div>
-          </div>
-        </td>
-      </tr>
-      <?php
-        }
-      ?>
-    </table>
+      <table class="table table-striped table-bordered table-responsive">
+        <thead>
+          <tr>
+            <th>ESSID</th>
+            <th>MAC Address</th>
+            <th>Channel</th>
+            <th>Signal Quality</th>
+          </tr>
+        </thead>
+        <tbody>
+          <?php
+            foreach ($wifi_networks as $network) {
+          ?>
+            <tr>
+              <td><?php echo $network['essid'];?></td>
+              <td><?php echo $network['address'];?></td>
+              <td><?php echo $network['channel'];?></td>
+              <td>
+                <div class="progress"><div class="progress-bar" role="progressbar" style="width: <?php echo round($network['signal_quality'] * 100) . '%';?>;"><?php echo round($network['signal_quality'] * 100) . '%';?></div>
+                </div>
+              </td>
+            </tr>
+          <?php
+            }
+          ?>
+        </tbody>
+      </table>
     <?php
-    }
+      }
     ?>
   </div>
 </div>

src/var/www/hsmm-pi/webroot/css/custom.css

@@ -3,3 +3,27 @@
 	color: #000000;
 	text-decoration: none;
 }
+
+a {
+    font-weight: initial;
+}
+
+ul, li {
+    margin: 0;
+}
+
+.table .progress {
+    margin-bottom: 0;
+}
+
+form {
+    width: 100%;
+}
+
+form div {
+    padding: 0;
+}
+
+.tab-pane > .form-group:first-child {
+    margin-top: 10px;
+}