Skip to content

Commit

Permalink
Option modal (#1)
Browse files Browse the repository at this point in the history 
* Show/Hide function + Show/hide empty
* Hide/Show empty and options modal
* Hide/Show all regions
  • Loading branch information
@jtszalay @kesor
jtszalay authored and kesor committed Feb 7, 2018
1 parent a12a7aa commit b26c379
Showing 1 changed file with 126 additions and 2 deletions.
128 changes: 126 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,10 @@
</div>
</div>
</form><!-- /credentials-arn -->

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#optionsModal">
Options
</button>
</div><!-- /navbar -->

<div id="alerts"></div>
Expand All @@ -162,6 +165,61 @@

</div><!-- /container -->

<!-- Modal -->
<div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="optionsModalLongTitle">Options</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="all-regions" class="col-form-label">All Regions</label>
<div id="all-regions" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="optionsRegions" id="showRegions" autocomplete="off"> Show
</label>
<label class="btn btn-secondary active">
<input type="radio" name="optionsRegions" id="hideRegions" autocomplete="off" checked> Hide
</label>
</div>
</div>
<div class="form-group">
<label for="empty-resources" class="col-form-label">Empty Resources</label>
<div id="empty-resources" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="optionsEmpty" id="showEmpty" autocomplete="off" checked> Show
</label>
<label class="btn btn-secondary">
<input type="radio" name="optionsEmpty" id="hideEmpty" autocomplete="off"> Hide
</label>
</div>
</div>
<div class="form-group">
<label for="expand-tables" class="col-form-label">Empty Resources</label>
<div id="expand-tables" class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="optionsExpand" id="expandAll" autocomplete="off" checked> Expand
</label>
<label class="btn btn-secondary">
<input type="radio" name="optionsExpand" id="collapseAll" autocomplete="off"> Collapse
</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button id="modal-save" type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js" integrity="sha256-pS96pU17yq+gVu4KBQJi38VpSuKN7otMrDQprzf/DWY=" crossorigin="anonymous"></script>
Expand Down Expand Up @@ -1094,7 +1152,7 @@
window.AWS_REGIONS = regions;
for (var i=0; i<regions.length; i++) {
tabs.push( $('<li class="nav-item"><a href="#region-'+regions[i]+'" id="tab-region-'+regions[i]+'" class="nav-link" data-toggle="pill" role="tab">'+regions[i]+'</a></li>') );
tabPanes.push( $('<div class="tab-pane show" id="region-'+regions[i]+'" role="tabpanel" aria-labelledby="tab-region-'+regions[i]+'"></div>') )
tabPanes.push( $('<div class="tab-pane show" id="region-'+regions[i]+'" role="tabpanel" aria-labelledby="tab-region-'+regions[i]+'"><h1 href="#region-'+regions[i]+'">'+regions[i]+'</h1></div>') )
}
$('#aws-region-tabs').append(tabs);
$('#aws-inventory').append(tabPanes);
Expand Down Expand Up @@ -1184,6 +1242,72 @@
$('#aws-credentials-verify').on('click', credentialsVerify);
$('#aws-credentials-drop').on('click', credentialsDrop);
$('#btn-aws-assume-role').on('click', function(){ $('#aws-assume-role').show(); $('#btn-aws-assume-role').hide() })

function showAll() {
$('.tab-content>.tab-pane').addClass('active show');
$('nav-item').removeClass('active show');
}

function hideAll() {
$('.tab-content>.tab-pane').removeClass('active show');
var active_tab = $('.nav-item .active').attr('id');
$('#'+active_tab).removeClass('active show');
$('#'+active_tab).click();
}

function applyOptions() {
var showRegions = localStorage.getItem("showRegions");
var showEmpty = localStorage.getItem("showEmpty");
var expandAll = localStorage.getItem("expandAll");
if (showRegions == "showRegions") {
showAll()
} else {
hideAll()
}
if (showEmpty == "showEmpty") {
$('a.btn').show();
} else {
$('a.btn.btn-light').hide();
$('a.btn.btn-warning').hide();
}
if (expandAll == "expandAll") {
$('a:not(a.btn.btn-light)+div').show();
} else {
$('a:not(a.btn.btn-light)+div').css('display','');
}
}

// View Options
function saveOptions() {
localStorage.setItem("showRegions",$('input[name=optionsRegions]:checked').attr('id'));
localStorage.setItem("showEmpty",$('input[name=optionsEmpty]:checked').attr('id'));
localStorage.setItem("expandAll",$('input[name=optionsExpand]:checked').attr('id'));
// Apply the options
applyOptions();
$('#optionsModal').modal('hide');
}
$('#modal-save').on('click', saveOptions);
$('#optionsModal').on('shown.bs.modal', function () {
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem("showRegions") == null || localStorage.getItem("showRegions") == "undefined") {
localStorage.setItem("showRegions",$('input[name=optionsRegions]:checked').attr('id'));
} else {
$('#'+localStorage.getItem("showRegions")).click()
}
if (localStorage.getItem("showEmpty") == null || localStorage.getItem("showEmpty") == "undefined") {
localStorage.setItem("showEmpty",$('input[name=optionsEmpty]:checked').attr('id'));
} else {
$('#'+localStorage.getItem("showEmpty")).click()
}
if (localStorage.getItem("expandAll") == null || localStorage.getItem("expandAll") == "undefined") {
localStorage.setItem("expandAll",$('input[name=optionsExpand]:checked').attr('id'));
} else {
$('#'+localStorage.getItem("expandAll")).click()
}
} else {
console.debug("Sorry! No Web Storage support.");
}
})
});
</script>
</html>

0 comments on commit b26c379

Please sign in to comment.