Skip to content

Instantly share code, notes, and snippets.

@robwormald
Created November 28, 2013 00:13
Show Gist options
  • Save robwormald/7685261 to your computer and use it in GitHub Desktop.
Save robwormald/7685261 to your computer and use it in GitHub Desktop.
var pocketClock = angular.module('innit.apps.pocketclock.controllers',[])
pocketClock.controller('ClockFlowController',function($scope){
$scope.cards = [
//section 1
[
//card 1-1
{
cardType : 'punch',
showHeader :true,
headerText : 'Header1-1',
bodyText : 'bodyTextOne',
actions : [
{
actionText : 'Action 1',
onClick : function(){
console.log('clicky')
}
},
{
actionText : 'Action 2',
onClick : function(){
console.log('clocky')
}
}]
},
//card 1-2
{
cardType : 'simple',
showHeader :true,
headerText : 'Header1-2',
bodyText : 'bodyTextOne'
}
],
//section2
[
{
cardType : 'simple',
showHeader :true,
headerText : 'Header2',
bodyText : 'bodyTextTwo'
}
]
]
})
InnitCard.directive('innitCard', ['$compile', '$http', '$templateCache', function($compile, $http, $templateCache) {
var getTemplate = function(cardType) {
var templateLoader,
baseUrl = 'partials/cards/',
templateMap = {
simple: 'simple.html',
punch: 'punch.html'
};
var templateUrl = baseUrl + templateMap[cardType];
templateLoader = $http.get(templateUrl, {cache: $templateCache});
console.log(templateUrl)
return templateLoader;
}
var linker = function(scope, element, attrs) {
var cardType = scope.cardType
var loader = getTemplate(cardType);
var promise = loader.success(function(html) {
element.html(html);
}).then(function (response) {
$compile(element.contents())(scope)
});
}
var controller = function($scope,$element){
var cards = $scope.cards
var card = $scope.card
$scope.select = function(card) {
angular.forEach(cards, function(_card) {
_card.selected = false;
console.log(_card)
});
card.selected = true;
console.log(card)
}
$scope.mouseOver = function(card){
console.log("hovering...")
console.log(card)
angular.forEach(cards, function(_card) {
_card.focused = false;
});
card.focused = true
}
$scope.mouseLeave = function(card){
card.focused = false
}
$scope.save = function(card){
console.log("saving...")
card.editable = false
}
$scope.delete = function (card) {
var card_to_delete = $scope.cards[card];
API.DeletePerson({ id: card_to_delete.id }, function (success) {
$scope.cards.splice(card, 1);
});
};
}
return {
restrict: 'E',
scope: {
card:'=',
cardType: "=",
cards : "="
},
link: linker,
controller: controller
}
}])
InnitCard.directive('innitCardList', function() {
return {
templateUrl : 'partials/innitCardList.html',
replace: true,
transclude: true,
restrict: 'E',
scope: {
cards: "=collection",
cardType : '@',
onSelect : "="
},
controller: function($scope, $element) {
var cards = $scope.cards
console.log(cards.length + " cards found:")
console.log(cards)
// $scope.selectCard = function(card) {
// angular.forEach(cards, function(card) {
// card.selected = false;
// card.focused = true;
// });
// card.selected = true;
// console.log(card.selected)
// }
$scope.createCard = function() {
console.log("creating a new card")
$scope.newCard = {}
if(cards.length > 0){
cards.unshift($scope.newCard);
$scope.newCard.editable = true;
}
}
$scope.addCardToList = function(card){
console.log('adding the card to the list...')
if(cards.length > 0){
cards.push(card);
}
}
}
};
})
<div class="row" >
<!-- <a class="btn btn-primary btn-block" ng-click="createCard()">Create Card</a> -->
<!-- <ul class="list-group" id="card-list">
<li class="list-group-item animate-repeat" ng-repeat="card in cards | limitTo:10">
<innit-card card="card" card-type="cardType"></innit-card>
</li>
</ul> -->
<dt ng-repeat-start="section in cards"><div ng-if="section.showHeader">{{section.headerText}}</div></dt>
<dd ng-repeat="card in section"><innit-card card="card" card-type="card.cardType"></innit-card></dd>
<dd ng-repeat-end>
{{section.footerText}}
</dd>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p class="lead">{{card.headerText}}</p>
<p>{{card.bodyText}}</p>
</div>
<div ng-repeat="cardAction in card.actions" class="list-group">
<a ng-click="cardAction.onClick()" class="list-group-item btn-link">{{cardAction.actionText}}</a>
</div>
</div>
<div class="card" ng-mouseover="mouseOver(card)" ng-mouseleave="mouseLeave(card)" ng-hide="card.editable">
<div class="card-heading image">
<img src="holder.js/46x46" alt=""/>
<!-- <span class="glyphicon glyphicon-wrench"></span> -->
<div class="card-heading-header">
<h3 ng-bind="card.descriptionText">Service Item</h3>
<span>Job Name</span>
</div>
<button class="btn btn-success btn-small pull-right" ng-click="select(card)" ng-show="card.focused">Select</button>
</div>
</div>
<div class="card" ng-show="card.editable">
<div class="card-body">
<form role="form">
<!-- <button class="btn btn-link btn-xs pull-left" ng-click="delete(card)">X</button> -->
<div class="form-group">
<!-- <label for="serviceItemSelect">Select an Operation </label> -->
<select id="serviceItemSelect" class="col-xs-12" ng-model="serviceItem" ng-options="serviceItem.description for serviceItem in serviceItems" ng-required></select>
</div>
<button class="btn btn-link pull-left" ng-click="showJobSelect = true" ng-show="selectedServiceItem"><span class="glyphicon glyphicon-plus"></span> Add a Project</button>
<div class="form-group" ng-show="showJobSelect">
<!-- <label for="jobSelect">Job</label> -->
<select id="jobSelect" class="col-xs-12" ng-model="job" ng-options="job.name for job in jobs" ng-required></select>
</div>
<!-- <div class="checkbox">
<label>
<input type="checkbox"> Save as Favorite
</label>
</div> -->
</form>
</div>
<div class="card-actions animate-show" >
<button type="submit" class="btn btn-success btn-small pull-right" ng-click="save(card)" ng-hide="!selectedServiceItem">Submit</button>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment