<!DOCTYPE html>
<html data-ng-app="musicApp">
<head>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootswatch.com/slate/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-route@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h6>
<span class="glyphicon glyphicon-headphones hidden-xs"></span>
</h6>
</div>
</div>
<div class="col-xs-12">
<div data-ng-view></div>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module('musicApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/items', {
templateUrl: 'view-list.html',
controller: 'listCtrl'
})
.when('/items/add', {
templateUrl: 'view-detail.html',
controller: 'addCtrl'
})
.when('/items/:index', {
templateUrl: 'view-detail.html',
controller: 'editCtrl'
})
.when('/regioes', {
templateUrl: 'View_Regioes.html',
controller: 'regioesCtrl'
})
/*.when('/usuario', {
tempatleUrl: 'view-usuario.html',
controller: 'usuarioCtrl'
})*/
.otherwise({
redirectTo: '/items'
})
});
app.factory('musicService', ['$rootScope', function($rootScope) {
var svc = {};
var data = [{
nome: "Zeca Pagodinho",
genero: "Pagode",
nota: "8"
}, {
nome: "Gal Costa",
genero: "MPB",
nota: "7"
}, {
nome: "Cazuza",
genero: "Rock",
nota: "10"
}, {
nome: "Anita",
genero: "Alternativa",
nota: "5"
}];
svc.getArtists = function() {
return data;
};
svc.addArtist = function(artist) {
data.push(artist);
};
svc.editArtist = function(index, artist) {
data[index] = artist;
};
return svc;
}]);
app.controller('listCtrl', ['$scope', '$location', '$routeParams', 'musicService',
function($scope, $location, $routeParams, musicService) {
$scope.data = musicService.getArtists();
$scope.addArtist = function() {
$location.path('/items/add');
};
$scope.editItem = function(x) {
$location.path('/items/' + x);
};
$scope.addUsuario = function() {
$location.path('/usuario');
};
$scope.mostrarRegioes = function(){
$location.path('/regioes');
};
}
]);
app.controller('addCtrl', ['$scope', '$location', '$routeParams', 'musicService',
function($scope, $location, $routeParams, musicService) {
$scope.save = function(item) {
/*musicService.addArtist({
nome: $scope.item.nome,
genero: $scope.item.genero,
nota: $scope.item.nota
})*/
musicService.addArtist(item);
$location.path('/items');
};
$scope.cancel = function() {
$location.path('/items');
};
}
]);
app.controller('editCtrl', ['$scope', '$location', '$routeParams', 'musicService',
function($scope, $location, $routeParams, musicService) {
$scope.item = musicService.getArtists()[parseInt($routeParams.index)];
$scope.save = function(item) {
musicService.editArtist(parseInt($routeParams.index), item);
$location.path('/items');
};
$scope.cancel = function() {
$location.path('/items');
};
}
]);
/*app.controller('usuarioCtrl', ['$scope', '$location', function($scope, $location) {
$scope.cancel = function() {
$location.path('/items');
};
$scope.user = {
name: 'John Doe',
email: '',
phone: '',
address: 'Mountain View, CA'
};
}]);*/
app.controller('urlController', ['$scope', '$http', function($scope, $http) {
/*this controller uses the url as a single string*/
$http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=5&fname={firstName}&lname={lastName}¬a={numberRange|1, 10}").
success(function(data) {
$scope.users = data
})
}]);
app.controller('regioesCtrl', ['$scope', '$location',
function($scope, $location) {
$scope.titulo = "Gerência Executiva Regionais";
$scope.cancel = function() {
$location.path('/items');
};
}
]);
/* Styles go here */
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Pesquisa de artista" data-ng-model="search" />
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Artista</th>
<th>Gênero</th>
<th>Nota</th>
</tr>
</thead>
<tbody>
<tr class="warning" data-ng-repeat="item in data | filter: search" data-ng-click="editItem($index)">
<td>{{ item.nome }}</td>
<td>{{ item.genero }}</td>
<td>{{ item.nota }}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button data-ng-click="addArtist()" class="btn btn-info">Incluir Artista</button>
<button data-ng-click="addUsuario()" class="btn btn-primary">Novo Usuário</button>
<button data-ng-click="mostrarRegioes()" class="btn btn-primary">Regiões</button>
</div>
<div class="form-group">
<label for="txtNome">Nome:</label>
<input type="text" id="txtNome" class="form-control" data-ng-model="item.nome">
</div>
<div class="form-group">
<label for="ddlGenero"></label>
<select name="ddlGenero" id="ddlGenero" class="form-control" data-ng-model="item.genero">
<option value=""></option>
<option value="Rock">Rock</option>
<option value="Alternativa">Alternativa</option>
<option value="Pagode">Pagode</option>
<option value="MPB">MPB</option>
</select>
</div>
<div class="form-group">
<label for="ddlNota"></label>
<select name="ddlNota" id="ddlNota" class="form-control" data-ng-model="item.nota">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<button data-ng-click="save(item)" class="btn btn-primary">Gravar</button>
<button data-ng-click="cancel()" class="btn btn-primary">Cancelar</button>
</div>
<div layout="column">
<br/>
<md-content layout-padding class="autoScroll">
<md-input-container class="md-icon-float" >
<!-- Use floating label instead of placeholder -->
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_phone_24px.svg"></md-icon>
<input ng-model="user.phone" type="text" placeholder="Phone Number">
</md-input-container>
<md-input-container >
<!-- Use floating placeholder instead of label -->
<md-icon md-svg-src="img/icons/ic_email_24px.svg" class="email"></md-icon>
<input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
</md-input-container>
<md-input-container md-no-float>
<md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Address" >
</md-input-container>
</md-content>
</div>
<h4 class="text-success">{{ titulo }}</h4>
<br>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Barra do Piraí
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Unidades de Negócios</h3>
</div>
<ul class="list-group">
<li class="list-group-item"><a href="#" class="alert-link">Agência de Formação Profissional de Barra do Piraí</a></li>
<li class="list-group-item"><a href="#" class="alert-link">Agência de Formação Profissional de Mendes</a></li>
<li class="list-group-item"><a href="#" class="alert-link">Agência de Formação Profissional de Valença</a></li>
<li class="list-group-item"><a href="#" class="alert-link">Centro de Atividade Barra do Piraí</a></li>
<li class="list-group-item"><a href="#" class="alert-link">SESI Barra do Piraí II</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Barra Mansa
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Campos
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<div class="form-group">
<button data-ng-click="cancel()" class="btn btn-primary">Cancelar</button>
</div>