Changeset 170

Show
Ignore:
Timestamp:
07/21/08 23:35:23 (4 months ago)
Author:
pwh
Message:

Reworked the device editing page to use semantic markup and CSS to lay it out correctly.

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • nethorus/app/views/device_admin/edit.html.erb

    r168 r170  
    1515 <% end %> 
    1616 
    17  <%= submit_tag @device.id ? 'Save' : 'Create' %> 
    1817 
    19  <% if @device.id %> 
    20   <%= link_to 'Delete', :action => 'delete', :device_id => @device.id %> 
    21  <% end %> 
     18 <fieldset> 
     19  <legend>Essentials</legend> 
     20  <label for="hostname" accesskey="h">Hostname</label><%= form.text_field :hostname %><br /> 
     21  <label for="description" accesskey="d">Description</label><%= form.text_field :description %><br /> 
     22  <label for="site" accesskey="s">Site</label><%= collection_select(:device, :site_id, Site.find(:all), :id, :description) %><br /> 
     23 </fieldset> 
    2224 
    23  <h2>Essentials</h2> 
     25 <fieldset> 
     26  <legend>Management</legend> 
     27  <label for="ipv4_address" accesskey="a">IP Address</label><%= form.text_field :ipv4_address %><br /> 
     28  <%= form.radio_button("snmp_version", "1", { :onchange => "Element.show('snmpv1_data'); Element.hide('snmpv2_data'); Element.hide('snmpv3_data');" } ) %>SNMPv1<br /> 
     29  <%= form.radio_button("snmp_version", "2", { :onchange => "Element.hide('snmpv1_data'); Element.show('snmpv2_data'); Element.hide('snmpv3_data');" } ) %>SNMPv2<br /> 
     30  <%= form.radio_button("snmp_version", "3", { :onchange => "Element.hide('snmpv1_data'); Element.hide('snmpv2_data'); Element.show('snmpv3_data');" } ) %>SNMPv3<br /> 
     31 </fieldset> 
    2432 
    25  <table class="horiz"> 
    26   <tr> 
    27    <th>Hostname</th> 
    28    <td><%= form.text_field :hostname %></td> 
    29   </tr> 
    30   <tr> 
    31    <th>Description</th> 
    32    <td><%= form.text_field :description %></td> 
    33   </tr> 
    34   <tr> 
    35    <th>Site</th> 
    36    <td><%= collection_select(:device, :site_id, Site.find(:all), :id, :description) %></td> 
    37   </tr> 
    38  </table> 
     33 <fieldset id="snmpv1_data"> 
     34  <legend>SNMPv1 Settings</legend> 
     35  <p><strong>Select SNMPv1 only when you are certain this device does not support SNMPv2.  Although SNMPv1 is backward compatible, it will not use GETBULK, which may delay gathering data.</strong></p> 
     36  <label for="snmp_community" accesskey="c">Community string</label><%= form.text_field :snmp_community %><br /> 
     37 </fieldset> 
    3938 
     39 <fieldset id="snmpv2_data"> 
     40  <legend>SNMPv2 Settings</legend> 
     41  <label for="snmp_community" accesskey="c">Community string</label><%= form.text_field :snmp_community %><br /> 
     42 </fieldset> 
    4043 
    41  <h2>Management</h2> 
    42  
    43  <table class="horiz"> 
    44   <tr> 
    45    <th>Address</th> 
    46    <td><%= form.text_field :ipv4_address %></td> 
    47   </tr> 
    48  </table> 
    49  
    50  
    51  <h3><%= form.radio_button("snmp_version", "1", { :onchange => "Element.show('snmpv1_data'); Element.hide('snmpv2_data'); Element.hide('snmpv3_data');" } ) %>SNMPv1</h3> 
    52  
    53  <div id="snmpv1_data"> 
    54   <p><strong>Select SNMPv1 only when you are certain this device does not support SNMPv2.  Although SNMPv1 is backward compatible, it will not use GETBULK, which may delay gathering data.</strong></p> 
    55   <table class="horiz"> 
    56    <tr> 
    57     <th>Community string</th> 
    58     <td><%= form.text_field :snmp_community %></td> 
    59    </tr> 
    60   </table> 
    61  </div> 
    62  
    63  
    64  <h3><%= form.radio_button("snmp_version", "2", { :onchange => "Element.hide('snmpv1_data'); Element.show('snmpv2_data'); Element.hide('snmpv3_data');" } ) %>SNMPv2</h3> 
    65  
    66  <div id="snmpv2_data"> 
    67   <table class="horiz"> 
    68    <tr> 
    69     <th>Community string</th> 
    70     <td><%= form.text_field :snmp_community %></td> 
    71    </tr> 
    72   </table> 
    73  </div> 
    74  
    75  
    76  <h3><%= form.radio_button("snmp_version", "3", { :onchange => "Element.hide('snmpv1_data'); Element.hide('snmpv2_data'); Element.show('snmpv3_data');" } ) %>SNMPv3</h3> 
    77  
    78  <div id="snmpv3_data"> 
    79   <table class="horiz"> 
    80    <tr> 
    81     <th>Security level</th> 
    82     <td> 
    83      <%= select('snmpv3_security_level', '', [ ['None', 'noAuthNoPriv'], ['Authentication', 'authNoPriv'], ['Privacy', 'authPriv'] ]) %> 
    84     </td> 
    85    </tr> 
    86    <tr> 
    87     <th>Authentication</th> 
    88     <td> 
    89      <%= select('snmpv3_auth_protocol', '', [ ['SHA', 'sha'], ['MD5', 'md5'] ]) %> 
    90      <%= form.text_field :snmpv3_auth_passphrase %> 
    91     </td> 
    92    </tr> 
    93    <tr> 
    94     <th>Privacy</th> 
    95     <td> 
    96      <%= select('snmpv3_priv_protocol', '', [ ['AES', 'aes'], ['DES', 'des'] ]) %> 
    97      <%= form.text_field :snmpv3_priv_passphrase %> 
    98     </td> 
    99    </tr> 
    100    <tr> 
    101     <th>Security name</th> 
    102     <td><%= form.text_field :snmpv3_security_name %></td> 
    103    </tr> 
    104   </table> 
    105  </div> 
     44 <fieldset id="snmpv3_data"> 
     45  <legend>SNMPv3 Settings</legend> 
     46  <label for="snmpv3_security_level">Security Level</label><%= select('snmpv3_security_level', '', [ ['None', 'noAuthNoPriv'], ['Authentication', 'authNoPriv'], ['Privacy', 'authPriv'] ]) %><br /> 
     47  <label for="snmpv3_auth_protocol">Authentication</label><%= select('snmpv3_auth_protocol', '', [ ['SHA', 'sha'], ['MD5', 'md5'] ]) %><%= form.text_field :snmpv3_auth_passphrase %><br /> 
     48  <label for="snmpv3_priv_protocol">Privacy</label><%= select('snmpv3_priv_protocol', '', [ ['AES', 'aes'], ['DES', 'des'] ]) %><%= form.text_field :snmpv3_priv_passphrase %><br /> 
     49  <label for="snmpv3_security_name">Security Name</label><%= form.text_field :snmpv3_security_name %><br /> 
     50 </fieldset> 
    10651 
    10752 <% if @device.snmp_version == 1 %> 
    …… 
    11358 <% end %> 
    11459 
     60 <%= submit_tag @device.id ? 'Save' : 'Create' %> 
     61 
     62 <% if @device.id %> 
     63  <%= link_to 'Delete', :action => 'delete', :device_id => @device.id %> 
     64 <% end %> 
     65 
    11566<% end %> 

  • nethorus/public/stylesheets/stylesheet.css

    r168 r170  
    326326        margin: 1em; 
    327327} 
     328 
     329form label { 
     330        display: block;  /* block float the labels to left column, set a width */ 
     331        float: left;  
     332        width: 150px;  
     333        padding: 0;  
     334        margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */ 
     335        text-align: right; 
     336} 
     337 
     338form fieldset { 
     339        border-color: black; 
     340        border-width: 1px; 
     341        border-style: solid; 
     342        padding: 1em; 
     343        margin-bottom: 1em; 
     344} 
     345 
     346form fieldset legend { 
     347        font-size: 1.1em; 
     348        font-weight: bold; 
     349        color: darkblue; 
     350} 
     351 
     352form input, form select { 
     353        width: auto; 
     354        margin: 5px 0 0 10px; 
     355}