Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@batmanimal
batmanimal committed Aug 30, 2015
0 parents commit 09e1dfb
Show file tree
Hide file tree
Showing 33 changed files with 50,740 additions and 0 deletions.
2 changes: 2 additions & 0 deletions README.md
@@ -0,0 +1,2 @@
# photo-app-angular

11 changes: 11 additions & 0 deletions app/app.module.js
@@ -0,0 +1,11 @@
var app = angular.module('app', ['display', 'listCtrl', 'ngRoute'])

.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'app/components/display/displayView.html',
controller: 'displayController',
controllerAs: 'display'
});
$locationProvider.html5Mode(true);
});
103 changes: 103 additions & 0 deletions app/components/display/displayController.js
@@ -0,0 +1,103 @@
angular.module('display', [])
.controller('displayController', function() {
var vm = this;
vm.imageUrl = '';
vm.caption = '';
vm.orderCount = 0;
vm.rating = null;
vm.selectedPhoto;

vm.oneStar = false;
vm.twoStars = false;
vm.threeStars = false;
vm.fourStars = false;

vm.updatePhoto = function(photo) {
// clear display
vm.resetRatingDisplay();
vm.selectedPhoto = photo;
vm.imageUrl = photo.imageUrl;
vm.caption = photo.caption;
vm.orderCount = photo.orderCount;
// if the photo already has a rating, display it
if(photo.rating) {
vm.updateRating(photo.rating);
}
};

vm.updateRating = function(stars) {
vm.selectedPhoto.rating = stars;

if (stars === 1) {
vm.oneStar = true;
vm.twoStars = false;
vm.threeStars = false;
vm.fourStars = false;
}
if (vm.selectedPhoto.rating === 2) {
vm.oneStar = false;
vm.twoStars = true;
vm.threeStars = false;
vm.fourStars = false;
}
if (vm.selectedPhoto.rating === 3) {
vm.oneStar = false;
vm.twoStars = false;
vm.threeStars = true;
vm.fourStars = false;
}
if (vm.selectedPhoto.rating === 4) {
vm.oneStar = false;
vm.twoStars = false;
vm.threeStars = false;
vm.fourStars = true;
}
};

vm.resetRatingDisplay = function() {
vm.oneStar = false;
vm.twoStars = false;
vm.threeStars = false;
vm.fourStars = false;
};

vm.photoArray = [
{
title: "Norway",
caption: "Low tide at Olstinden by Douglas Stratton",
rating: null,
orderCount: 3,
imageUrl: "https://drscdn.500px.org/photo/81913125/m%3D2048/d6926aeb94599899fc9e76fce241ff94"
},
{
title: "Maui",
caption: "Makena Cove, Maui. Let's go to the beach!",
rating: null,
orderCount: 2,
imageUrl: "http://assets.fodors.com/destinations/4636/beach-makena-cove-south-shore-maui-maui-hawaii-usa_main.jpg"
},
{
title: "Tufa",
caption: "Tufa at Night by Romain Guy",
rating: '',
orderCount: 3,
imageUrl: "https://lh3.googleusercontent.com/-YifreVFp77c/UMoTI_wpC6I/AAAAAAAAMRw/6VACc_ubeaU/w2048-h1312/Tufa%2Bat%2BNight.jpg"
},
{
title: "Lost Island",
caption: "Lost Island, San Gregorio, by Romain Guy",
rating: '',
orderCount: 1,
imageUrl: "https://lh3.googleusercontent.com/-7WqXcxOUVVA/VW1ct0NIx1I/AAAAAAAAQKE/GUcb_c0UAzc/w1719-h1149-no/Lost%2BIsland.jpg"
},
{
title: "Winter Scene",
caption: "Winter is coming, somewhere",
rating: '',
orderCount: 5,
imageUrl: "http://www.smashingmagazine.com/images/winter-wonderland/temple.jpg"
}
];

});

63 changes: 63 additions & 0 deletions app/components/display/displayView.html
@@ -0,0 +1,63 @@
<div ng-controller="displayController as display">
<div class="app container">
<div class="jumbotron app-header">
<h1>My Super Awesome Photos</h1>
</div>

<div class="row">

<div class="col-md-3">
<table class="table table-bordered">
<thead>
<th>Photos in this Album</th>
</thead>
<tbody>
<tr ng-repeat="photo in display.photoArray | orderBy:'orderCount' ">
<td><a class="photo-title" ng-click="display.updatePhoto(photo)">{{photo.title}}</a></td>
</tr>
</tbody>
</table>

<div class="rating-area">
<div class="dropdown" ng-show="display.selectedPhoto">

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Rating
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

<li><a href="#" ng-click="display.updateRating(1)"><span class="glyphicon glyphicon-star"></span></a></li>

<li><a href="#" ng-click="display.updateRating(2)"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></a></li>

<li><a href="#" ng-click="display.updateRating(3)"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></a></li>

<li><a href="#" ng-click="display.updateRating(4)"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></a></li>

</ul>
</div>

<div class="star-display">
<div ng-show="display.oneStar"><span class="glyphicon glyphicon-star"></span></div>

<div ng-show="display.twoStars"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></div>

<div ng-show="display.threeStars"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></div>

<div ng-show="display.fourStars"><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></div>

</div>
</div> <!-- /rating area -->
</div>

<div class="col-md-9">
<div><img src="{{display.imageUrl}}"/></div>
<div ng-show="display.selectedPhoto" class="caption">{{display.caption}}
<div class="count" ng-show="display.orderCount">{{display.orderCount}} of {{display.photoArray.length}}</div>
</div>
</div>

</div> <!-- /row -->
</div> <!-- /app -->
</div>
3 changes: 3 additions & 0 deletions app/components/list/listController.js
@@ -0,0 +1,3 @@
angular.module('listCtrl', [])
.controller('listController', function() {
});
3 changes: 3 additions & 0 deletions app/components/list/listView.html
@@ -0,0 +1,3 @@
<div>
<h1>test</h1>
</div>
55 changes: 55 additions & 0 deletions app/css/style.css
@@ -0,0 +1,55 @@
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
padding-bottom: 50px;
}

img {
width: 100%;
}

.photo-area {
text-align: center;
}

.caption {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 5px;
text-align: left;
background-color: #eee;
}

.count {
color: #000;
float: right;
padding-right: 10px;
}

.list-area {
font-size: 1.0em;
max-width: 200px;
}

.list-header {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 10px;
}

.btn-group {
float: right;
position: relative;
padding-right: 10px;
margin-bottom: 10px;
}

.star-display {
text-align: left;
padding-left: 10px;
margin-top: 10px;
}
31 changes: 31 additions & 0 deletions app/lib/angular-bootstrap/.bower.json
@@ -0,0 +1,31 @@
{
"author": {
"name": "https://github.com/angular-ui/bootstrap/graphs/contributors"
},
"name": "angular-bootstrap",
"keywords": [
"angular",
"angular-ui",
"bootstrap"
],
"license": "MIT",
"ignore": [],
"description": "Native AngularJS (Angular) directives for Bootstrap.",
"version": "0.13.3",
"main": [
"./ui-bootstrap-tpls.js"
],
"dependencies": {
"angular": ">=1.3.0"
},
"homepage": "https://github.com/angular-ui/bootstrap-bower",
"_release": "0.13.3",
"_resolution": {
"type": "version",
"tag": "0.13.3",
"commit": "140a9a069f051e55a2468737b68f407c82098c5e"
},
"_source": "git://github.com/angular-ui/bootstrap-bower.git",
"_target": "~0.13.3",
"_originalSource": "angular-bootstrap"
}
1 change: 1 addition & 0 deletions app/lib/angular-bootstrap/.gitignore
@@ -0,0 +1 @@
.DS_Store
1 change: 1 addition & 0 deletions app/lib/angular-bootstrap/.npmignore
@@ -0,0 +1 @@
bower.json

0 comments on commit 09e1dfb

Please sign in to comment.