1[% IF orphans.size > 0 %] 2<div class="accordion" id="accordion-orphans"> 3 <div class="accordion-group"> 4 <div class="accordion-heading"> 5 <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse-orphan" href="#collapse-orphan"> 6 <i class="icon-chevron-up"></i> 7 Orphaned Devices 8 </a> 9 </div> 10 <div id="collapse-orphan" class="accordion-body collapse"> 11 <div class="accordion-inner"> 12 <table class="table table-bordered table-condensed"> 13 <thead> 14 <tr> 15 <th>Device</th> 16 <th>Location</th> 17 <th>Contact</th> 18 <th>Vendor</th> 19 <th>Model</th> 20 </tr> 21 </thead> 22 <tbody> 23 [% FOREACH row IN orphans %] 24 <tr> 25 <td><a href="[% uri_for('/device') | none %]?q=[% row.ip | uri %]"> 26 [% row.dns || row.name || row.ip | html_entity %]</a></td> 27 <td> 28 [% IF row.location %] 29 <a href="[% search_device | none %]&q=[% row.location | uri %]&location=[% row.location | uri %]"> 30 [% row.location | html_entity %]</a> 31 [% ELSE %] 32 [Not Set] 33 [% END %] 34 </td> 35 <td>[% row.contact | html_entity %]</td> 36 <td>[% row.vendor | html_entity %]</td> 37 <td>[% row.model | html_entity %]</td> 38 </tr> 39 [%END%] 40 </tbody> 41 </table> 42 </div> 43 </div> 44 </div> 45</div> 46[% END %] 47[%# The largest graph is considered the main network, all others are 48 considered orphaned, so we need two to generate div %] 49[% IF graphs.size > 1 %] 50<div class="accordion" id="accordion-networks"> 51[% count = 0 %] 52[% FOREACH network IN graphs %] 53 [% count = count + 1 %] 54 [%# The largest is not an orphan, so skip %] 55 [% NEXT IF count == 1 %] 56 <div class="accordion-group"> 57 <div class="accordion-heading"> 58 <a class="accordion-toggle" data-toggle="collapse" data-target="#collapse-[% count | html_entity %]" href="#collapse-[% count | html_entity %]"> 59 <i class="icon-chevron-up"></i> 60 Orphaned Network: [% count - 1 | html_entity %] Size: [% network.size | html_entity %] Devices 61 </a> 62 </div> 63 <div id="collapse-[% count | html_entity %]" class="accordion-body collapse"> 64 <div class="accordion-inner"> 65 <table class="table table-bordered table-condensed"> 66 <thead> 67 <tr> 68 <th>Device</th> 69 <th>Location</th> 70 <th>Contact</th> 71 <th>Vendor</th> 72 <th>Model</th> 73 </tr> 74 </thead> 75 <tbody> 76 [% FOREACH row IN network %] 77 <tr> 78 <td><a href="[% uri_for('/device') | none %]?tab=netmap&q=[% row.ip | uri %]&firstsearch=on"> 79 [% row.dns || row.name || row.ip | html_entity %]</a></td> 80 <td> 81 [% IF row.location %] 82 <a href="[% search_device | none %]&q=[% row.location | uri %]&location=[% row.location | uri %]"> 83 [% row.location | html_entity %]</a> 84 [% ELSE %] 85 [Not Set] 86 [% END %] 87 </td> 88 <td>[% row.contact | html_entity %]</td> 89 <td>[% row.vendor | html_entity %]</td> 90 <td>[% row.model | html_entity %]</td> 91 </tr> 92 [% END %] 93 </tbody> 94 </table> 95 </div> 96 </div> 97 </div> 98[% END %] 99</div> 100[% END %] 101<script> 102$('.accordion').on('show hide', function (n) { 103 $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down'); 104}); 105</script> 106