Skip to content

Instantly share code, notes, and snippets.

@guiseek

guiseek/index.html

Last active January 29, 2016 01:56
Show Gist options
  • Save guiseek/64041dee591d572cda25 to your computer and use it in GitHub Desktop.
Save guiseek/64041dee591d572cda25 to your computer and use it in GitHub Desktop.
Download ZIP
Loja de Cerveja View com AngularJS
Raw
index.html
<!DOCTYPE html>
<html ng-app="lojaDeCerveja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Loja de Cerveja</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<style>
table tr th:first-child {
width: 20px;
}
table tr th:last-child {
width: 70px;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="LojaDeCervejaController">
<div class="container">
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Loja de Cerveja</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="glyphicon glyphicon-shopping-cart"></i>
Carrinho
<span class="label label-default">{{ carrinho.length }}</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li ng-show="carrinho.length == 0"><a href="#">Carrinho vazio</a></li>
<li ng-show="carrinho.length > 0"><a href="#" ng-repeat="cerveja in carrinho">{{ cerveja.nome }} ({{ cerveja.cervejaria.nome }})</a></li>
<li role="separator" class="divider"></li>
<li ng-class="{'disabled': carrinho == 0}"><a href="#" ng-click="limpaCarrinho()">Limpar carrinho</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="row">
<aside class="col-sm-3">
<section class="panel panel-default">
<header class="panel-heading">
Cervejarias
</header>
<div class="panel-body">
<section class="navbar">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" ng-model="buscaCervejarias" placeholder="Buscar cervejarias..." aria-describedby="basic-addon1">
</div>
</section>
<section class="list-group">
<a href="#" class="list-group-item" ng-repeat="cervejaria in filtradas = ( cervejarias | filter:buscaCervejarias )">
{{ cervejaria.nome }}
<button type="button" class="btn btn-default btn-xs pull-right" ng-click="removeCervejaria(cervejaria)">
<i class="glyphicon glyphicon-remove"></i>
</button>
</a>
</section>
<section>
<h4 class="page-header">Cervejaria</h4>
<form name="cervejariaForm" ng-submit="adicionaCervejaria(cervejaria)" novalidate>
<div class="input-group">
<input type="text" class="form-control" ng-model="cervejaria.nome" placeholder="Ex.: Budweiser" ng-minlength="3" required>
<span class="input-group-btn">
<button class="btn btn-success" type="submit" ng-disabled="cervejariaForm.$invalid">
<i class="glyphicon glyphicon-ok"></i>
</button>
</span>
</div>
</form>
</section>
</div>
<footer class="panel-footer">
{{ filtradas.length }} cervejas encontradas
</footer>
</section>
</aside>
<main class="col-sm-9">
<nav class="navbar">
<div class="row">
<div class="col-sm-6">
<ol class="breadcrumb">
<li class="active">Loja de cerveja</li>
</ol>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success btn-block" data-toggle="modal" data-target="#cerveja">Nova cerveja</button>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" ng-model="buscaCervejas" placeholder="Buscar cervejas..." aria-describedby="basic-addon1">
</div>
</div>
</div>
</nav>
<div class="panel panel-default">
<header class="panel-heading">Cervejas</header>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<input type="checkbox">
</th>
<th>Nome</th>
<th>Categoria</th>
<th>Cervejaria</th>
<th>Comprar</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cerveja in cervejas | filter:buscaCervejas">
<td>
<input type="checkbox">
</td>
<td>{{ cerveja.nome }}</td>
<td>{{ cerveja.categoria }}</td>
<td>{{ cerveja.cervejaria.nome }}</td>
<td>
<button class="btn btn-default btn-xs" ng-click="adicionaCarrinho(cerveja)">
<i class="glyphicon glyphicon-shopping-cart"></i> {{ cerveja.carrinho || 0 }}
</button>
</td>
<td>
<button class="btn btn-default btn-xs">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button class="btn btn-default btn-xs" ng-click="removeCerveja(cerveja)">
<i class="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
<div class="modal fade" id="cerveja" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Cerveja</h4>
</div>
<form name="cerveja" ng-submit="adicionaCerveja(cerveja)" novalidate>
<div class="modal-body">
<div class="row">
<div class="form-group col-md-6">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" ng-model="cerveja.nome" placeholder="Ex.: Gebumga" required>
</div>
<div class="form-group col-md-6">
<label for="categoria">Categoria</label>
<input type="text" class="form-control" id="categoria" ng-model="cerveja.categoria" placeholder="Pale Ale" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="cervejaria">Cervejaria</label>
<select class="form-control" id="cervejaria" ng-model="cerveja.cervejaria" name="cervejaria" ng-options="cervejaria as cervejaria.nome for cervejaria in cervejarias track by cervejaria.id" required></select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Adiciona cerveja</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="loja-de-cerveja.controller.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment