Skip to content

Commit

Permalink
Layout creado con states
Browse files Browse the repository at this point in the history
  • Loading branch information
canofm committed Sep 2, 2016
1 parent 2ba35d8 commit f99b878
Show file tree
Hide file tree
Showing 20 changed files with 468 additions and 1,009 deletions.
27 changes: 27 additions & 0 deletions app/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
'use strict';

angular.module('booking-app', ['ui.router'])
.config(function($urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
return $locationProvider.html5Mode(true);
})
.config(function($stateProvider) {
return $stateProvider
.state('main', {
abstract: true,
views: {
'layout': {
templateUrl: "app/layout/layout.html"
},
'container@main': {
template: "<ui-view>"
},
'topbar@main': {
templateUrl: "app/layout/topbar.html"
},
'sidebar@main': {
templateUrl: "app/layout/sidebar.html"
}
}
});
});
9 changes: 9 additions & 0 deletions app/layout/layout.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div ui-view="topbar"></div>
<div ui-view="sidebar"></div>
</nav>
<div id="page-wrapper">
<div ui-view="container"></div>
</div>
</div>
29 changes: 29 additions & 0 deletions app/layout/sidebar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<a ui-sref="main.dashboard"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<a ui-sref="main.listado_propiedades"><i class="fa fa-university fa-fw"></i> Propiedades</a>
</li>
<li>
<a ui-sref="main.dashboard"><i class="glyphicon glyphicon-bullhorn"></i> Campañas</a>
</li>
<li>
<a ui-sref="main.dashboard"><i class="glyphicon glyphicon-comment"></i> Mensajes</a>
</li>
<li>
<a ui-sref="main.dashboard"><i class="glyphicon glyphicon-calendar"></i> Reservas</a>
</li>
<li>
<a ui-sref="main.dashboard"><i class="glyphicon glyphicon-piggy-bank"></i> Facturación</a>
</li>
<li>
<a ui-sref="main.dashboard"><i class="glyphicon glyphicon-cog"></i> Configuración</a>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
80 changes: 80 additions & 0 deletions app/layout/topbar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">booking-dds</a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw "></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
</li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
98 changes: 98 additions & 0 deletions app/modules/dashboard/dashboard.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">33</div>
<div>Nuevos mensajes!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Ver detalle</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-heart fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">2</div>
<div>Nuevas campañas!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Ver detalle</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">16</div>
<div>Nuevas ventas!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Ver detalle</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-thumbs-down fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">1</div>
<div>Nueva queja!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">Ver detalle</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.row -->
8 changes: 8 additions & 0 deletions app/modules/dashboard/dashboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
angular.module('booking-app')
.config(function($stateProvider) {
return $stateProvider
.state('main.dashboard', {
url: "/",
templateUrl: "app/modules/dashboard/dashboard.html"
});
});
9 changes: 9 additions & 0 deletions app/modules/propiedades/controllers/listadoPropiedadesCtrl.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
function ListadoPropiedadesCtrl(propiedades) {
var self = this;
self.propiedades = propiedades;
}

angular.module("booking-app")
.controller("ListadoPropiedadesCtrl", [ "propiedades", function(propiedades) {
return new ListadoPropiedadesCtrl(propiedades);
}]);
19 changes: 19 additions & 0 deletions app/modules/propiedades/propiedades.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
angular.module('booking-app')
.config(function($stateProvider) {
return $stateProvider
.state('main.listado_propiedades', {
url: "/propiedades",
templateUrl: "app/modules/propiedades/views/list.html",
controller: "ListadoPropiedadesCtrl",
controllerAs: "listadoCtrl",
resolve: {
propiedades: function (PropiedadesHome) {
return PropiedadesHome.getAll()
}
}
})
.state('main.alta_propiedades', {
url: "/propiedades/crear",
templateUrl: "app/modules/propiedades/views/create.html"
});
});
47 changes: 47 additions & 0 deletions app/modules/propiedades/views/create.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Propiedades</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"> Propiedad </div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form role="form">
<div class="form-group">
<label>Dirección</label>
<input class="form-control" placeholder="Por ejemplo: Mozart 2300">
</div>
<div class="form-group">
<label>Localidad</label>
<input class="form-control" placeholder="Por ejemplo: Lugano, Buenos Aires.">
</div>
<div class="form-group">
<label>Descripción</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label>Tipo de propiedad</label>
<select class="form-control">
<option>Hotel</option>
<option>Particular</option>
</select>
</div>
<button type="submit" class="btn btn-outline btn-primary">Agregar</button>
<button type="reset" class="btn btn-outline btn-danger">Reset</button>
</form>
</div>
<!-- /.col-lg-6 (nested) -->
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
47 changes: 47 additions & 0 deletions app/modules/propiedades/views/list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Propiedades</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Listado de Propiedades
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Dirección</th>
<th>Localidad</th>
<th>Estado</th>
<th>Tipo</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="propiedad in listadoCtrl.propiedades">
<td>{{ propiedad.direccion }}</td>
<td>{{ propiedad.localidad }}</td>
<td>{{ propiedad.estado }}</td>
<td>{{ propiedad.tipo }}</td>
<td class="center">
<a href="#" class="btn btn-primary btn-circle"><i class="fa fa-pencil-square-o"></i></a>
<a href="#" class="btn btn-danger btn-circle"><i class="fa fa-times"></i></a>
</td>
</tr>
</tbody>
</table>
<!-- /.table-responsive -->
<p><a ui-sref="main.alta_propiedades" class="btn btn-primary">+ Registrar propiedad</a></p>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
Loading

0 comments on commit f99b878

Please sign in to comment.