mirror of
https://github.com/jcwimer/wrestlingApp
synced 2026-03-25 01:14:43 +00:00
Added a mock layout and an api call for angular
This commit is contained in:
@@ -1,3 +1,3 @@
|
|||||||
json.array!(@tournaments) do |tournament|
|
json.array!(@tournaments) do |tournament|
|
||||||
json.extract! tournament, :id, :name, :address, :director, :director_email
|
json.extract! tournament, :id, :name, :address, :director, :director_email, :date
|
||||||
end
|
end
|
||||||
@@ -1,30 +1 @@
|
|||||||
function ctrl($scope){
|
var app = angular.module("wrestlingdev", []);
|
||||||
$scope.rows = ['Paul','John','Lucie'];
|
|
||||||
$scope.temp = false;
|
|
||||||
|
|
||||||
$scope.addRow = function(){
|
|
||||||
$scope.temp = false;
|
|
||||||
$scope.addName="";
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.deleteRow = function(row){
|
|
||||||
$scope.rows.splice($scope.rows.indexOf(row),1);
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.plural = function (tab){
|
|
||||||
return tab.length > 1 ? 's': '';
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.addTemp = function(){
|
|
||||||
if($scope.temp) $scope.rows.pop();
|
|
||||||
else if($scope.addName) $scope.temp = true;
|
|
||||||
|
|
||||||
if($scope.addName) $scope.rows.push($scope.addName);
|
|
||||||
else $scope.temp = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
$scope.isTemp = function(i){
|
|
||||||
return i==$scope.rows.length-1 && $scope.temp;
|
|
||||||
};
|
|
||||||
|
|
||||||
}
|
|
||||||
17
frontend/app/js/homeController.js
Normal file
17
frontend/app/js/homeController.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
app.controller("homeController", function($scope, $http) {
|
||||||
|
$scope.message = "Test message in scope.";
|
||||||
|
|
||||||
|
|
||||||
|
$http({
|
||||||
|
method: 'GET',
|
||||||
|
url: '/api/tournaments/'
|
||||||
|
}).then(function successCallback(response) {
|
||||||
|
// this callback will be called asynchronously
|
||||||
|
// when the response is available
|
||||||
|
$scope.query = response.data;
|
||||||
|
}, function errorCallback(response) {
|
||||||
|
// called asynchronously if an error occurs
|
||||||
|
// or server returns response with an error status.
|
||||||
|
$scope.query = "Nothing there";
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,36 +1,85 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html ng-app>
|
<html ng-app="wrestlingdev">
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" type="text/css" href="<%= css %>" media="all" />
|
<title>WrestlingDev</title>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
|
|
||||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
<!-- Latest compiled and minified CSS -->
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||||
<meta charset=utf-8 />
|
<!-- Optional theme -->
|
||||||
<title>Angular JS Demo</title>
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
|
||||||
</head>
|
</head>
|
||||||
<body ng-controller="ctrl">
|
<body style="padding-top: 70px;">
|
||||||
<h2>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span></h2>
|
<div class="container">
|
||||||
<form class="form-horizontal">
|
<div class="navbar-roof"></div>
|
||||||
<span ng-class="{'input-append':addName}">
|
<!--header-->
|
||||||
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/>
|
<nav class="navbar navbar-inverse navbar-fixed-top navbar-custom">
|
||||||
<input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/>
|
<div class="container">
|
||||||
</span>
|
<div class="navbar-header navbar-custom-header">
|
||||||
|
<a class="navbar-brand navbar-custom-brand" href="/">WrestlingDev</a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav navbar-nav navbar-right navbar-custom-link">
|
||||||
|
<li><a href="#">Browse Tournaments</a></li>
|
||||||
|
<li><a href="#">About</a></li>
|
||||||
|
<li><a href="#">Tutorials</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div id="page-content">
|
||||||
|
<div class="row no-margin">
|
||||||
|
<div class="col-md-2">
|
||||||
|
<!--leftsidebar-->
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8" style="padding-left: 2%;">
|
||||||
|
<div class="container" ui-view="main" ng-controller="homeController">
|
||||||
|
<h2>All Tournaments</h2>
|
||||||
|
<br>
|
||||||
|
<table class="table">
|
||||||
|
<thead class="font-spot-color">
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Address</th>
|
||||||
|
<th>Director</th>
|
||||||
|
<th>Director Email</th>
|
||||||
|
<th>Date</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr ng-repeat="tournament in query">
|
||||||
|
<td>{{ tournament.name }}</td>
|
||||||
|
<td>{{ tournament.address }}</td>
|
||||||
|
<td>{{ tournament.director }}</td>
|
||||||
|
<td>{{ tournament.director_email }}</td>
|
||||||
|
<td>{{ tournament.date }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-2" >
|
||||||
|
<!--rightsidebar-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<!-- Latest compiled and minified JavaScript -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/app.js"></script>
|
||||||
|
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
|
||||||
|
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
|
||||||
|
|
||||||
|
<!--Mobile and tablet detection-->
|
||||||
|
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</html>
|
||||||
|
|
||||||
<span class="search input-prepend" ng-class="{'input-append':search}">
|
|
||||||
<span class="add-on"><i class="icon-search"></i></span>
|
|
||||||
<input type="text" class="span2" placeholder="Search" ng-model="search">
|
|
||||||
<button type="submit" class="btn btn-inverse" ng-click="search=''" ng-show="search" value="+ add"><i class="icon-remove icon-white"></i></button>
|
|
||||||
</span>
|
|
||||||
</form>
|
|
||||||
<table class="table table-striped">
|
|
||||||
<tr ng-repeat="row in rows | filter : search" ng-class="{'muted':isTemp($index)}">
|
|
||||||
<td>{{$index+1}}</td>
|
|
||||||
<td>{{row}}</td>
|
|
||||||
<td>
|
|
||||||
<button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)"><i class="icon-trash icon-white"></i></button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<script type="text/javascript" src="/js/app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user