1
0
mirror of https://github.com/jcwimer/wrestlingApp synced 2026-03-25 01:14:43 +00:00

Added bootstrap and angularjs

This commit is contained in:
2016-02-18 15:13:33 +00:00
parent 33529cb9fe
commit 4a90165514
3 changed files with 64 additions and 23 deletions

30
frontend/app/js/app.js Normal file
View File

@@ -0,0 +1,30 @@
function ctrl($scope){
$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;
};
}

View File

@@ -1,14 +0,0 @@
window.helloText = function() {
return 'Hello, World!';
};
window.hello = function() {
html = JST['app/templates/hello.us']({text: helloText()});
document.body.innerHTML += html;
};
if(window.addEventListener) {
window.addEventListener('DOMContentLoaded', hello, false);
} else {
window.attachEvent('onload', hello);
}

View File

@@ -1,11 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title><%= pkg.name %></title>
<html ng-app>
<head>
<link rel="stylesheet" type="text/css" href="<%= css %>" media="all" />
<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" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<meta charset=utf-8 />
<title>Angular JS Demo</title>
</head>
<body ng-controller="ctrl">
<h2>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span></h2>
<form class="form-horizontal">
<span ng-class="{'input-append':addName}">
<input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/>
<input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/>
</span>
<link rel="stylesheet" type="text/css" href="<%= css %>" media="all" />
</head>
<body>
<script type="text/javascript" src="<%= js %>"></script>
</body>
<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>