1<table id="data-table" class="table table-striped table-bordered" width="100%" cellspacing="0">
2  <thead>
3    <tr>
4      <th class="nd_center-cell">Left Device</th>
5      <th class="nd_center-cell">Left Port</th>
6      <th class="nd_center-cell">Right Device</th>
7      <th class="nd_center-cell">Right Port</th>
8      <th class="nd_center-cell">Action</th>
9    </tr>
10  </thead>
11  <tbody>
12    <tr>
13      <td class="nd_center-cell">
14        <div class="input-append">
15          <input data-form="add" class="nd_topo_dev nd_topo_dev1" name="dev1" type="text" value="[% params.dev1 | html_entity %]">
16          <span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
17        </div>
18      </td>
19      <td class="nd_center-cell">
20        <div class="input-append">
21          <input data-form="add" class="nd_topo_port nd_topo_dev1" name="port1" type="text" value="[% params.port1 | html_entity %]">
22          <span class="add-on nd_topo_port_caret"><i class="icon-caret-down icon-large"></i></span>
23        </div>
24      </td>
25      <td class="nd_center-cell">
26        <div class="input-append">
27          <input data-form="add" class="nd_topo_dev nd_topo_dev2" name="dev2"  type="text">
28          <span class="add-on nd_topo_dev_caret"><i class="icon-caret-down icon-large"></i></span>
29        </div>
30      </td>
31      <td class="nd_center-cell">
32        <div class="input-append">
33          <input data-form="add" class="nd_topo_port nd_topo_dev2" name="port2" type="text">
34          <span class="add-on nd_topo_port_caret"><i class="icon-caret-down icon-large"></i></span>
35        </div>
36      </td>
37      <td class="nd_center-cell">
38        <button class="btn btn-small nd_adminbutton" name="add" type="submit"><i class="icon-plus-sign"></i> Add</button>
39      </td>
40    </tr>
41    [% SET count = 0 %]
42    [% WHILE (row = results.next) %]
43    [% SET count = count + 1 %]
44    <tr>
45      <td class="nd_center-cell"><a class="nd_linkcell" href="[% uri_for('/device') | none %]?q=[% row.device1.ip | uri %]">
46        [% (row.device1.dns || row.device1.name || row.device1.ip) | html_entity %]</a>
47      </td>
48      <td class="nd_center-cell">[% row.port1 | html_entity %]</td>
49      <td class="nd_center-cell"><a class="nd_linkcell" href="[% uri_for('/device') | none %]?q=[% row.device2.ip | uri %]">
50        [% (row.device2.dns || row.device2.name || row.device2.ip) | html_entity %]</a></td>
51      <td class="nd_center-cell">[% row.port2 | html_entity %]</td>
52      <td class="nd_center-cell">
53        <button class="btn" data-toggle="modal"
54          data-target="#nd_devdel-[% count | html_entity %]" type="button"><i class="icon-trash text-error"></i></button>
55
56        <div id="nd_devdel-[% count | html_entity %]" class="nd_modal nd_deep-horizon modal hide fade" tabindex="-1"
57          role="dialog" aria-labelledby="nd_devdel-label-[% count | html_entity %]" aria-hidden="true">
58          <div class="modal-header">
59            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
60            <h3 id="nd_devdel-label-[% count | html_entity %]">Are you sure?</h3>
61          </div>
62          <div class="modal-body">
63            <blockquote>
64              <p class="text-info">The link between these two ports will be removed:</p>
65              <p>&nbsp;</p>
66            <ul>
67              <li><p class="text-info">[% (row.device1.dns || row.device1.name || row.device1.ip) | html_entity %],&nbsp;
68                [% row.port1 | html_entity %]</p></li>
69              <li><p class="text-info">[% (row.device2.dns || row.device2.name || row.device2.ip) | html_entity %],&nbsp;
70                [% row.port2 | html_entity %]</p></li>
71            </ul>
72            </blockquote>
73            <input data-form="del" name="dev1" type="hidden" value="[% row.dev1 | html_entity %]">
74            <input data-form="del" name="port1" type="hidden" value="[% row.port1 | html_entity %]">
75            <input data-form="del" name="dev2" type="hidden" value="[% row.dev2 | html_entity %]">
76            <input data-form="del" name="port2" type="hidden" value="[% row.port2 | html_entity %]">
77          </div>
78          <div class="modal-footer">
79            <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">Cancel</button>
80            <button class="btn btn-danger nd_adminbutton" name="del" data-dismiss="modal">Confirm</button>
81          </div>
82        </div>
83      </td>
84    </tr>
85    [% END %]
86  </tbody>
87</table>
88
89<script>
90$(document).ready(function() {
91  $('#data-table').dataTable({
92    "columnDefs": [ {
93        "targets": [ 4 ],
94        "orderable": false,
95        "searchable": false
96      } ],
97[% INCLUDE 'ajax/datatabledefaults.tt' -%]
98  } );
99} );
100</script>
101
102