espresso-block
Version:
A component of Espresso Grid
119 lines (114 loc) • 5.95 kB
HTML
<html>
<head>
<title>HTTP iframe</title>
<link rel="stylesheet" href="bootstrap.css"/>
<style>
body{ margin:0; }
.modal-content .ngGrid{ height:300px; }
.ngViewport .generic-type-number{ text-align: right; }
.body .ngHeaderCell{ background:#fff; color:#333; border:none; }
.body .ngHeaderCell .ngVerticalBarVisible{ background-color:#fff; }
.body .ngRow.even{ background:#f9f9f9; }
.body .ngRow.odd{ background:#fff; }
.body .ngViewport{ border-bottom:1px solid #d6d6d6; }
.body button:first-child{ border-left:1px #d6d6d6 solid; }
.body button{ background:#e6e6e6; margin:0; padding:8px 20px; color:#444; border:1px #d6d6d6 solid; border-left:none; border-top:none; }
.body button:hover{ background:#f6f6f6; }
.body .modal-content{ padding:20px 20px 0; }
.modal-content .filters{ padding-bottom:20px; }
.body .filters button{ border-top:1px #d6d6d6 solid; border-left:1px #d6d6d6 solid; margin:2px 0; }
.body .ngRow.selected{ background: #DEF7E0;}
.body .modified{ background:rgba(243,244,199, .75); }
.body .grid-alert-box{
position: absolute; top: 0; z-index: 1000; right: 0; margin: 10px 20px;
padding: 5px 10px; background: #DEF7E0; border-radius: 3px;
transition: opacity 1s;
-webkit-transition: opacity 1s;
-mox-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
opacity: 0;
visibility:hidden;
}
.body .grid-alert-box.display{
opacity:1;
visibility:visible;
}
.body .alert-modal .modal-content{ padding: 20px; }
.body .disabled{ background:#FFF; cursor:not-allowed; color:#bbb; }
@media (max-width: 768px) { .filters-form .form-control{ width:27%; display:inline; } .filters-form .form-group{ display:inline; }}
</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.3/underscore.string.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.12.0.min.js"></script>
<script type="text/javascript" src="nggrid.js"></script>
<script type="text/javascript" src="transit.js"></script>
<script type="text/javascript">
_.mixin(_.str.exports());
_.str.include('Underscore.string', 'string');
var Application = angular.module('Application', ['ngGrid', 'ui.bootstrap']);
var Config = {};
//url parameter parser
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
//initialization broadcasts
$(document).ready(function () {
var gridID = getParameterByName('gridID');
transit.addAppend('frame', gridID);
transit.broadcast('startup', gridID);
});
</script>
<script type="text/javascript" src="TemplatesService.js"></script>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="DataService.js"></script>
<script type="text/javascript" src="TransitService.js"></script>
<script type="text/javascript" src="GridController.js"></script>
<script type="text/javascript" src="LookupController.js"></script>
</head>
<body class="body">
<div id="container" ng-app="Application">
<div class="content" ng-controller="GridController">
<div class="controls-box controls-top" ng-if="config.controlBox == 'top'">
<div class="filters" ng-if="config.controls.search" ng-show="params.filters">
<button ng-click="controls.addFilter();">Add Filter</button>
<div ng-repeat="filter in filters" class="form-inline">
<button ng-click="controls.removeFilter($index);">-</button>
<div class="form-group">
<select class="form-control" ng-options="column.name for column in table.columns" ng-model="filter.column"></select>
<select class="form-control" ng-options="operator.label for operator in operators" ng-model="filter.operator"></select>
<input class="form-control" ng-model="filter.text" placeholder="text"/>
</div>
</div>
<button ng-click="controls.runSearch(filters);">Run</button>
</div>
</div>
<div class="gridStyle grid" ng-grid="options"></div>
<div class="controls-box controls-bottom" ng-if="config.controlBox == 'bottom'">
<div class="filters" ng-if="config.controls.search" ng-show="params.filters">
<button ng-click="controls.addFilter();">Add Filter</button>
<div ng-repeat="filter in filters" class="form-inline filters-form">
<button ng-click="controls.removeFilter($index);">-</button>
<div class="form-group">
<select class="form-control" ng-options="column.name for column in table.columns" ng-model="filter.column"></select>
<select class="form-control" ng-options="operator.label for operator in operators" ng-model="filter.operator"></select>
<input class="form-control" ng-model="filter.text" placeholder="text"/>
</div>
</div>
<button ng-click="controls.runSearch(filters);">Run</button>
</div>
</div>
<div class="grid-alert-box {{alertMessage && 'display'}}">{{alertMessage}}</div>
<style ng-if="rawCSS">{{rawCSS}}</style>
</div>
</div>
</body>
</html>