зеркало из https://github.com/DeGsoft/meanjs.git
practica los
This commit is contained in:
Alberto Basalo
Родитель
064e31f2fd
Коммит
e29adc04c5
|
|
@ -0,0 +1 @@
|
|||
angular.module('logApp', ['ui.router']);
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<div>
|
||||
<section>
|
||||
<h3>Filtro</h3>
|
||||
<form class="form-horizontal text-left">
|
||||
<fieldset>
|
||||
<div id="legend">
|
||||
<legend class="">Filtro para buscar eventos</legend>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="nivel">Nivel</label>
|
||||
<div class="controls">
|
||||
<select name="nivel" ng-model="vm.formulario.nivel" ng-options="nivel for nivel in vm.maestros.niveles"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="contenido">Contenido</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="contenido" placeholder="" class="input" ng-model="vm.formulario.contenido">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<button style="margin-top: 20px" type="button" class="btn btn-lg btn-primary" ng-click="vm.buscarEventos()">
|
||||
<span>Buscar Eventos</span>
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Lista de eventos</h3>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><a href="" ng-click="sentido = !sentido">Fecha</a>
|
||||
</th>
|
||||
<th>Nivel</th>
|
||||
<th>Mensaje</th>
|
||||
<th>Datos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="evento in vm.eventos | filter:vm.formulario.contenido | orderBy:'timestamp':sentido">
|
||||
<td class="text-left">{{evento.timestamp}}</td>
|
||||
<td class="text-left" ng-class="{'text-info': evento.level=='info', 'text-warning' : evento.level=='warn'}">{{evento.level}}</td>
|
||||
<td class="text-left">{{evento.message}}</td>
|
||||
<td class="text-left" >{{evento.meta}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
var eventosCtrl = function (eventosFactory) {
|
||||
var vm = this;
|
||||
eventosFactory.gettingEventos()
|
||||
.success(function(response){
|
||||
vm.eventos=response;
|
||||
})
|
||||
}
|
||||
angular.module('logApp').controller('EventosCtrl',eventosCtrl);
|
||||
}());
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
var eventosFactory = function ($http) {
|
||||
var factory = {};
|
||||
factory.gettingEventos = function () {
|
||||
return $http.get('/Practica-Log/src/logs.json');
|
||||
};
|
||||
return factory;
|
||||
}
|
||||
angular.module('logApp').factory('eventosFactory',eventosFactory);
|
||||
}());
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<html lang="es" ng-app="logApp">
|
||||
|
||||
<head>
|
||||
<title>LogAnalytics</title>
|
||||
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<meta charset="utf-8" />
|
||||
<meta lang="es" />
|
||||
<meta name="description" content="Analíticas de logs y métricas" />
|
||||
<meta name="author" content="Alberto Basalo @ Ágora Binaria" />
|
||||
<meta name="application-name" content="LogAnalytics" />
|
||||
<meta name="Keywords" content="AngularJS, ejemplo, tutorial, curso, logs, analíticas" />
|
||||
<link rel="author" href="https://plus.google.com/+AlbertoBasalo71" />
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="MenuCtrl as menu">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<ul class="nav navbar-nav">
|
||||
<li ng-class="{ active: menu.isActive('eventos') }">
|
||||
<a ui-sref="eventos">Eventos</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('metricas') }">
|
||||
<a ui-sref="metricas">Métricas</a>
|
||||
</li>
|
||||
<li ng-class="{ active: menu.isActive('servicios') }">
|
||||
<a ui-sref="servicios">Servicios</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container text-center" style="padding-top:50px;" ui-view>
|
||||
</div>
|
||||
<!-- JavaScript References -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
|
||||
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<script src="states.js"></script>
|
||||
<script src="menuCtrl.js"></script>
|
||||
<script src="eventosCtrl.js"></script>
|
||||
<script src="eventosFactory.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,8 @@
|
|||
(function () {
|
||||
var menuCtrl = function ($state) {
|
||||
this.isActive = function (estado) {
|
||||
return $state.is(estado);
|
||||
}
|
||||
}
|
||||
angular.module('logApp').controller('MenuCtrl',menuCtrl);
|
||||
}());
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<div>
|
||||
<h1>404</h1>
|
||||
<h3>No hemos encontrado lo que buscabas</h3>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
(function () {
|
||||
var states = function ($stateProvider, $locationProvider) {
|
||||
$stateProvider
|
||||
.state('eventos', {
|
||||
url: '/',
|
||||
controller: 'EventosCtrl as vm',
|
||||
templateUrl: 'eventos.html'
|
||||
})
|
||||
.state('not-found', {
|
||||
url: '*path',
|
||||
templateUrl: 'not-found.html'
|
||||
});
|
||||
}
|
||||
angular.module('logApp').config(states);
|
||||
}());
|
||||
Загрузка…
Ссылка в новой задаче