add sidebar

This commit is contained in:
Hendrik Leppelsack 2015-11-05 16:33:30 +01:00
parent 820e1ceddc
commit 8c9058d0f6
14 changed files with 212 additions and 67 deletions

View File

@ -1,8 +1,6 @@
app.controller('contactCtrl', ['Contact', function(Contact) {
app.controller('contactCtrl', ['Contact', function() {
var ctrl = this;
ctrl.contact = new Contact(ctrl.data);
console.log("Contact: ",ctrl.contact);
}]);

View File

@ -4,7 +4,7 @@ app.directive('contact', function() {
controller: 'contactCtrl',
controllerAs: 'ctrl',
bindToController: {
data: '='
contact: '=data'
},
templateUrl: OC.linkTo('contactsrework', 'templates/contact.html')
};

View File

@ -0,0 +1,3 @@
app.controller('contactdetailsCtrl', function() {
var ctrl = this;
});

View File

@ -0,0 +1,12 @@
app.directive('contactdetails', function() {
return {
priority: 1,
scope: {},
controller: 'contactdetailsCtrl',
controllerAs: 'ctrl',
bindToController: {
contact: '=data'
},
templateUrl: OC.linkTo('contactsrework', 'templates/contactDetails.html')
};
});

View File

@ -0,0 +1,20 @@
app.filter('contactColor', function() {
return function(input) {
var colors = [
'#001f3f',
'#0074D9',
'#39CCCC',
'#3D9970',
'#2ECC40',
'#FF851B',
'#FF4136',
'#85144b',
'#F012BE',
'#B10DC9'
], asciiSum = 0;
for(var i in input) {
asciiSum += input.charCodeAt(i);
}
return colors[asciiSum % colors.length];
};
});

View File

@ -16,25 +16,52 @@ app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $ur
$stateProvider
.state('home', {
url: '/',
template: '<div>Home</div>'
views: {
'': {
template: '<div>Home</div>'
},
'sidebar': {
template: '<div>none</div>'
}
}
})
.state('contactlist',{
.state('contacts',{
url: '/:addressBookId',
template: '<contactlist data-adrbook="addressBook"></contactlist>',
views: {
'': {
template: '<contactlist data-adrbook="addressBook"></contactlist>',
controller: function($scope, addressBook) {
$scope.addressBook = addressBook;
}
},
'sidebar': {
template: '1'
}
},
resolve: {
addressBook: function(AddressBookService, $stateParams) {
return AddressBookService.get($stateParams.addressBookId).then(function(addressBook) {
return AddressBookService.sync(addressBook);
});
}
},
controller: function($scope, addressBook) {
$scope.addressBook = addressBook;
}
})
.state('contactlist.contact', {
url: '/:contact',
template: '<div>Test</div>'
.state('contacts.detail', {
url: '/:uid',
views: {
'sidebar@': {
template: '<contactdetails data="contact"></contactdetails>',
controller: function($scope, contact) {
$scope.contact = contact;
}
}
},
resolve: {
contact: function(addressBook, $stateParams) {
return addressBook.getContact($stateParams.uid);
}
}
});
}]);

View File

@ -3,9 +3,17 @@ app.factory('AddressBook', function()
return function AddressBook(data) {
angular.extend(this, {
baseUrl: "",
displayName: "",
contacts: []
contacts: [],
getContact: function(uid) {
for(var i in this.contacts) {
if(this.contacts[i].uid() === uid) {
return this.contacts[i];
}
}
return undefined;
}
});
angular.extend(this, data);

View File

@ -16,29 +16,72 @@ app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $ur
$stateProvider
.state('home', {
url: '/',
template: '<div>Home</div>'
views: {
'': {
template: '<div>Home</div>'
},
'sidebar': {
template: '<div>none</div>'
}
}
})
.state('contactlist',{
.state('contacts',{
url: '/:addressBookId',
template: '<contactlist data-adrbook="addressBook"></contactlist>',
views: {
'': {
template: '<contactlist data-adrbook="addressBook"></contactlist>',
controller: function($scope, addressBook) {
$scope.addressBook = addressBook;
}
},
'sidebar': {
template: '1'
}
},
resolve: {
addressBook: function(AddressBookService, $stateParams) {
return AddressBookService.get($stateParams.addressBookId).then(function(addressBook) {
return AddressBookService.sync(addressBook);
});
}
},
controller: function($scope, addressBook) {
$scope.addressBook = addressBook;
}
})
.state('contactlist.contact', {
url: '/:contact',
template: '<div>Test</div>'
.state('contacts.detail', {
url: '/:uid',
views: {
'sidebar@': {
template: '<contactdetails data="contact"></contactdetails>',
controller: function($scope, contact) {
$scope.contact = contact;
}
}
},
resolve: {
contact: function(addressBook, $stateParams) {
return addressBook.getContact($stateParams.uid);
}
}
});
}]);
app.controller('addressbookCtrl', function() {
var ctrl = this;
console.log(this);
});
app.directive('addressbook', function() {
return {
restrict: 'A', // has to be an attribute to work with core css
scope: {},
controller: 'addressbookCtrl',
controllerAs: 'ctrl',
bindToController: {
addressBook: "=data"
},
templateUrl: OC.linkTo('contactsrework', 'templates/addressBook.html')
};
});
app.controller('addressbooklistCtrl', ['$scope', 'AddressBookService', function(scope, AddressBookService) {
var ctrl = this;
@ -59,26 +102,8 @@ app.directive('addressbooklist', function() {
templateUrl: OC.linkTo('contactsrework', 'templates/addressBookList.html')
};
});
app.controller('addressbookCtrl', function() {
app.controller('contactCtrl', ['Contact', function() {
var ctrl = this;
console.log(this);
});
app.directive('addressbook', function() {
return {
restrict: 'A', // has to be an attribute to work with core css
scope: {},
controller: 'addressbookCtrl',
controllerAs: 'ctrl',
bindToController: {
addressBook: "=data"
},
templateUrl: OC.linkTo('contactsrework', 'templates/addressBook.html')
};
});
app.controller('contactCtrl', ['Contact', function(Contact) {
var ctrl = this;
ctrl.contact = new Contact(ctrl.data);
console.log("Contact: ",ctrl.contact);
@ -89,11 +114,26 @@ app.directive('contact', function() {
controller: 'contactCtrl',
controllerAs: 'ctrl',
bindToController: {
data: '='
contact: '=data'
},
templateUrl: OC.linkTo('contactsrework', 'templates/contact.html')
};
});
app.controller('contactdetailsCtrl', function() {
var ctrl = this;
});
app.directive('contactdetails', function() {
return {
priority: 1,
scope: {},
controller: 'contactdetailsCtrl',
controllerAs: 'ctrl',
bindToController: {
contact: '=data'
},
templateUrl: OC.linkTo('contactsrework', 'templates/contactDetails.html')
};
});
app.controller('contactlistCtrl', function() {
var ctrl = this;
});
@ -114,9 +154,17 @@ app.factory('AddressBook', function()
return function AddressBook(data) {
angular.extend(this, {
baseUrl: "",
displayName: "",
contacts: []
contacts: [],
getContact: function(uid) {
for(var i in this.contacts) {
if(this.contacts[i].uid() === uid) {
return this.contacts[i];
}
}
return undefined;
}
});
angular.extend(this, data);
@ -183,11 +231,13 @@ app.factory('Contact', [ 'ContactService', '$filter', function(ContactService, $
angular.extend(this.props, $filter('vCard2JSON')(this.data.addressData));
};
}]);
app.service('AddressBookService', ['DavClient', 'DavService', 'Contact', function(DavClient, DavService, Contact){
app.service('AddressBookService', ['DavClient', 'DavService', 'AddressBook', 'Contact', function(DavClient, DavService, AddressBook, Contact){
this.getAll = function() {
return DavService.then(function(account) {
return account.addressBooks;
return account.addressBooks.map(function(addressBook) {
return new AddressBook(addressBook);
});
});
};
@ -200,14 +250,15 @@ app.service('AddressBookService', ['DavClient', 'DavService', 'Contact', functio
};
this.sync = function(addressBook) {
console.log('hi');
return DavClient.syncAddressBook(addressBook).then(function(addressBook) {
/*addressBook.contacts = [];
console.log(addressBook.objects);
for(i in addressBook.objects) {
// parse contacts
addressBook.contacts = [];
for(var i in addressBook.objects) {
addressBook.contacts.push(
new Contact(addressBook.objects[i].data)
new Contact(addressBook.objects[i])
);
}*/
}
return addressBook;
});
};
@ -251,6 +302,27 @@ app.filter('JSON2vCard', function() {
return vCard.generate(input);
};
});
app.filter('contactColor', function() {
return function(input) {
var colors = [
'#001f3f',
'#0074D9',
'#39CCCC',
'#3D9970',
'#2ECC40',
'#FF851B',
'#FF4136',
'#85144b',
'#F012BE',
'#B10DC9'
], asciiSum = 0;
for(var i in input) {
asciiSum += input.charCodeAt(i);
}
return colors[asciiSum % colors.length];
};
});
app.filter('vCard2JSON', function() {
return function(input) {
return vCard.parse(input);

View File

@ -1,8 +1,10 @@
app.service('AddressBookService', ['DavClient', 'DavService', 'Contact', function(DavClient, DavService, Contact){
app.service('AddressBookService', ['DavClient', 'DavService', 'AddressBook', 'Contact', function(DavClient, DavService, AddressBook, Contact){
this.getAll = function() {
return DavService.then(function(account) {
return account.addressBooks;
return account.addressBooks.map(function(addressBook) {
return new AddressBook(addressBook);
});
});
};
@ -15,14 +17,15 @@ app.service('AddressBookService', ['DavClient', 'DavService', 'Contact', functio
};
this.sync = function(addressBook) {
console.log('hi');
return DavClient.syncAddressBook(addressBook).then(function(addressBook) {
/*addressBook.contacts = [];
console.log(addressBook.objects);
for(i in addressBook.objects) {
// parse contacts
addressBook.contacts = [];
for(var i in addressBook.objects) {
addressBook.contacts.push(
new Contact(addressBook.objects[i].data)
new Contact(addressBook.objects[i])
);
}*/
}
return addressBook;
});
};

View File

@ -1,3 +1,3 @@
<a ui-sref="{{ctrl.addressBook.displayName}}">
<a ui-sref="contacts({addressBookId: ctrl.addressBook.displayName})">
{{ctrl.addressBook.displayName}}
</a>

View File

@ -1 +1 @@
<a ui-sref="./{{ctrl.contact.uid()}}">{{ctrl.contact.fullName()}}</a>
<a ui-sref=".detail({ uid: ctrl.contact.uid() })">{{ctrl.contact.fullName()}}</a>

View File

@ -0,0 +1,3 @@
<section style="height:100px; display: flex; color: white; font-weight: bold; align-items: center;" ng-style="{'background-color': (ctrl.contact.uid() | contactColor)}">
<h2 style="font-size: 1.7em; margin-left: 1em;">{{ctrl.contact.fullName()}}</h2>
</section>

View File

@ -1,6 +1,6 @@
List:
<ul>
<li ng-repeat="contact in ctrl.addressbook.objects">
<li ng-repeat="contact in ctrl.addressbook.contacts">
<contact data="contact"></contact>
</li>
</ul>

View File

@ -14,8 +14,7 @@ style('contactsrework', 'style');
</div>
<div id="app-content">
<div id="app-content-wrapper" ui-view>
<?php /*print_unescaped($this->inc('part.content')); */ ?>
</div>
<div id="app-sidebar" ui-view="sidebar"></div>
<div id="app-content-wrapper" ui-view></div>
</div>
</div>
</div>