Skip to content

Commit 782e9fc

Browse files
FaisalNasirFaisalNasir
committed
Added Demo applications
1 parent 35964c8 commit 782e9fc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+43727
-0
lines changed

‎Angular-Write_Custom_Directive_Demo/assets/css/app.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.ng-invalid.ng-dirty {
2+
border-color: #FA787E;
3+
}
4+
5+
.ng-valid.ng-dirty {
6+
border-color: #78Fa89;
7+
}

‎Angular-Write_Custom_Directive_Demo/assets/js/app.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
Main = angular.module("Main")
2+
3+
Main.directive('datePicker', function() {
4+
return {
5+
restrict: 'A',
6+
require : 'ngModel',
7+
link: function(scope, element, attrs, ngModelCtrl) {
8+
element.css("cursor", "pointer");
9+
element.css("background-color", "white");
10+
element.datepicker({
11+
startDate: attrs.startdate,
12+
endDate: attrs.enddate,
13+
format: attrs.format,
14+
weekStart: attrs.week_start,
15+
todayBtn: attrs.today_btn,
16+
onSelect: function(dateText, inst) {
17+
ngModelCtrl.$setViewValue(dateText);
18+
scope.$apply();
19+
}
20+
})
21+
}
22+
};
23+
});
24+
Main.controller("AppController", function($scope, $routeParams, $location){
25+
$scope.$routeParams = $routeParams
26+
27+
$scope.isActive = function(route) {
28+
return route === $location.path();
29+
}
30+
})
31+
32+
.controller("PanelController", function($scope){
33+
this.tab = 1;
34+
35+
this.selectTab = function(setTab) {
36+
this.tab = setTab;
37+
}
38+
39+
this.isSelected = function(checkTab) {
40+
return this.tab === checkTab;
41+
}
42+
43+
// ratings
44+
this.ratings = function(rate) {
45+
var str = "";
46+
if(rate === 0) {
47+
str = "fa-star-o";
48+
} else if (rate < 5) {
49+
str = "fa-star-half-o";
50+
} else if (rate >= 5) {
51+
str = "fa-star";
52+
}
53+
return str;
54+
// {'fa-star-o':review.stars === 0, 'fa-star':review.stars >= 1, 'fa-star-half-o':review.stars >= 5}
55+
}
56+
57+
this.highlyRated = function(ratings) {
58+
var stars = [];
59+
angular.forEach(ratings, function(value, key) {
60+
this.push(value["stars"]);
61+
}, stars);
62+
return Math.max.apply(Math, stars);
63+
}
64+
})
65+

‎Angular-Write_Custom_Directive_Demo/assets/js/controllers/review_controller.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Main.controller("ReviewController", function($scope, $routeParams){
2+
this.review = {};
3+
4+
this.addReview = function(product, form) {
5+
if(form.$valid === false) {
6+
console.log(form.submitted)
7+
} else {
8+
this.review.stars = parseInt(this.review.stars)
9+
product.reviews.push(this.review)
10+
this.review = {}
11+
}
12+
}
13+
});

‎Angular-Write_Custom_Directive_Demo/assets/js/controllers/store_controller.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
angular.module("Main")
2+
3+
.controller("StoreController", function($scope, $routeParams){
4+
$scope.controller_name = "BookController";
5+
6+
$scope.greet = "Bonjour!"
7+
$scope.params = $routeParams;
8+
9+
$scope.products = [
10+
{
11+
id: 1,
12+
name: "Gem One",
13+
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iure dicta adipisci incidunt, maiores ex, eveniet iste commodi asperiores omnis cumque reprehenderit",
14+
price: "45",
15+
image: "https://devopsbootcamp.osuosl.org/_images/ruby-gem.png",
16+
specifications: [
17+
{materialType: "Solid", color: "Red", weight: 29}
18+
],
19+
reviews: [
20+
{stars: 3, comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", author: "abc@example.com", birthday: "2013-07-25"},
21+
{stars: 5, comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", author: "xyz@example.com", birthday: "2013-05-13"}
22+
],
23+
canPurchase: false,
24+
soldOut: false,
25+
publishedAt: "1388123412323"
26+
},
27+
{
28+
id: 2,
29+
name: "Gem Two",
30+
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iure dicta adipisci incidunt, maiores ex, eveniet iste commodi asperiores omnis cumque reprehenderit",
31+
price: "60",
32+
image: "https://lh3.googleusercontent.com/-xsS1M2ASymc/VXpmiWtt1FI/AAAAAAAAB60/ZqBeMYLNRxc/w506-h440/ruby.png",
33+
specifications: [
34+
{materialType: "Solid Charge", color: "Redish", weight: 20}
35+
],
36+
reviews: [
37+
{stars: 2, comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", author: "abc@example.com", birthday: "2013-07-25"},
38+
{stars: 4, comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", author: "xyz@example.com", birthday: "2013-07-25"}
39+
],
40+
canPurchase: true,
41+
soldOut: false,
42+
publishedAt: "1388123412323"
43+
}
44+
]
45+
46+
$.grep($scope.products, function(e) {
47+
if(e.id == $scope.params.id) {
48+
$scope.product = {
49+
id: e.id,
50+
name: e.name,
51+
description: e.description,
52+
price: e.price,
53+
image: e.image,
54+
specifications: e.specifications,
55+
reviews: e.reviews
56+
}
57+
}
58+
});
59+
})

‎Angular-Write_Custom_Directive_Demo/assets/js/routes.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
angular.module("Main", ['ngRoute'])
2+
3+
.config(function($routeProvider) {
4+
$routeProvider.when('/', {
5+
templateUrl: "templates/pages/landing.html",
6+
})
7+
8+
.when('/stores', {
9+
templateUrl: "templates/pages/stores/index.html",
10+
controller: 'StoreController'
11+
})
12+
13+
.when('/stores/:id', {
14+
templateUrl: "templates/pages/stores/show.html",
15+
controller: 'StoreController'
16+
})
17+
18+
.otherwise({ redirectTo: '/' })
19+
});

‎Angular-Write_Custom_Directive_Demo/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html ng-app="Main">
3+
<head>
4+
<script type="text/javascript" src="vender/js/jquery.js"></script>
5+
6+
<script type="text/javascript" src="vender/js/bootstrap.min.js"></script>
7+
<link rel="stylesheet" type="text/css" href="vender/css/bootstrap.css">
8+
<link rel="stylesheet" type="text/css" href="vender/css/bootstrap.min.css.map">
9+
10+
<script type="text/javascript" src="vender/js/bootstrap-datepicker.js"></script>
11+
<link rel="stylesheet" type="text/css" href="vender/css/bootstrap-datepicker3.css">
12+
13+
<link rel="stylesheet" type="text/css" href="assets/css/app.css">
14+
15+
<!-- Angular Js -->
16+
<script type="text/javascript" src="vender/js/angular.min.js"></script>
17+
<script type="text/javascript" src="vender/js/angular-route.min.js"></script>
18+
19+
<!-- Font-Awesome -->
20+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
21+
<title>Angular App</title>
22+
</head>
23+
<body ng-controller="AppController">
24+
<div class="container">
25+
<nav class="navbar navbar-light bg-faded">
26+
<a class="navbar-brand" href="#/">Flapper Store</a>
27+
<ul class="nav navbar-nav">
28+
<li class="nav-item" ng-class="{active : isActive('/stores') || isActive('/stores/' + $routeParams.id)}">
29+
<a class="nav-link" href="#/stores">Store <span class="sr-only">(current)</span></a>
30+
</li>
31+
</ul>
32+
</nav>
33+
<div class="invisible">...</div>
34+
35+
<div class="main-wrapper">
36+
<div ng-view></div>
37+
</div>
38+
39+
<footer>
40+
<div class="row">
41+
<hr />
42+
<div class="col-md-12">
43+
<ul class="list-inline">
44+
<li><a href="#/">Home</a></li>
45+
<li><a href="#/">Policy</a></li>
46+
<li class="pull-right"><a href>2015-2016</a></li>
47+
<li class="pull-right"><a href>&copy</a></li>
48+
</ul>
49+
</div>
50+
</div>
51+
</footer>
52+
</div>
53+
54+
55+
<script type="text/javascript" src="assets/js/routes.js"></script>
56+
<!-- Controllers -->
57+
<script type="text/javascript" src="assets/js/app.js"></script>
58+
<script type="text/javascript" src="assets/js/controllers/store_controller.js"></script>
59+
<script type="text/javascript" src="assets/js/controllers/review_controller.js"></script>
60+
</body>
61+
</html>

‎Angular-Write_Custom_Directive_Demo/templates/pages/landing.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div class="jumbotron">
2+
<h1 class="display-3">Hello, world!</h1>
3+
<p class="lead">
4+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus iure dicta adipisci incidunt, maiores ex, eveniet iste commodi asperiores omnis cumque reprehenderit, corrupti fuga cum molestias explicabo inventore est quas!
5+
</p>
6+
<hr class="m-y-2">
7+
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
8+
<p class="lead">
9+
<a class="btn btn-success btn-lg" href="#/stores" role="button">View our store</a>
10+
</p>
11+
</div>

‎Angular-Write_Custom_Directive_Demo/templates/pages/stores/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<div class="page-header">
2+
<h1>Flapper <small>Store</small></h1>
3+
<div ng-controller="StoreController as store">
4+
<p>
5+
{{greet}}
6+
</p>
7+
<div class="row">
8+
<div ng-repeat="product in products | orderBy:'-price'">
9+
<div class="col-md-4" ng-hide="product.soldOut">
10+
<div class="card">
11+
<img class="card-img-top img-thumbnail" ng-src="{{product.image}}">
12+
<div class="card-block">
13+
<h4 class="card-title">
14+
<strong>{{product.name}}</strong>
15+
<span class="pull-right">
16+
<strong>{{product.price | currency}}</strong>
17+
</span>
18+
</h4>
19+
<p class="card-text">{{product.description | limitTo:160}}</p>
20+
<ul class="list-inline">
21+
<li><a href="#/stores/{{product.id}}" class="btn btn-primary">View</a></li>
22+
<li><a href="#/stores/#}" class="btn btn-success" ng-show="product.canPurchase">Buy</a></li>
23+
<li class="pull-right">
24+
<h5><small>Added on <br />{{product.publishedAt | date:'MM/dd/yyyy'}}</small></h5>
25+
</li>
26+
</ul>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
33+
</div>
34+
</div>
35+
36+

0 commit comments

Comments
 (0)