Agenda slide templates. Some template improvements.

- User import
- show linebreaks for long text
- some style work
- item detail and agenda list slide
This commit is contained in:
Emanuel Schuetze 2015-06-25 10:19:38 +02:00
parent f5654837e1
commit f75516c7bb
16 changed files with 180 additions and 49 deletions

View File

@ -1,9 +1,16 @@
angular.module('OpenSlidesApp.agenda', [])
.factory('Agenda', function(DS) {
.factory('Agenda', function(DS, jsDataModel) {
var name = 'agenda/item'
return DS.defineResource({
name: 'agenda/item',
endpoint: '/rest/agenda/item/'
name: name,
endpoint: '/rest/agenda/item/',
useClass: jsDataModel,
methods: {
getResourceName: function () {
return name;
}
}
});
})
@ -81,7 +88,7 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
});
})
.controller('ItemListCtrl', function($scope, Agenda, tree) {
.controller('ItemListCtrl', function($scope, $http, Agenda, tree, Projector) {
Agenda.bindAll({}, $scope, 'items');
// get a 'flat' (ordered) array of agenda tree to display in table
@ -114,6 +121,23 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
$scope.delete = function (id) {
Agenda.destroy(id);
};
// project agenda
$scope.projectAgenda = function () {
$http.post('/rest/core/projector/1/prune_elements/',
[{name: 'agenda/agenda'}]);
};
// check if agenda is projected
$scope.isAgendaProjected = function () {
// Returns true if there is a projector element with the same
// name and agenda is active.
var projector = Projector.get(id=1);
if (typeof projector === 'undefined') return false;
var self = this;
return _.findIndex(projector.elements, function(element) {
return element.name == 'agenda/agenda'
}) > -1;
};
})
.controller('ItemDetailCtrl', function($scope, $http, Agenda, User, item) {
@ -235,3 +259,40 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
};
});
angular.module('OpenSlidesApp.agenda.projector', ['OpenSlidesApp.agenda'])
.config(function(slidesProvider) {
slidesProvider.registerSlide('agenda/item', {
template: 'static/templates/agenda/slide_item.html',
});
slidesProvider.registerSlide('agenda/agenda', {
template: 'static/templates/agenda/slide_agenda.html',
});
})
.controller('SlideItemCtrl', function($scope, Agenda) {
// Attention! Each object that is used here has to be dealt on server side.
// Add it to the coresponding get_requirements method of the ProjectorElement
// class.
var id = $scope.element.context.id;
Agenda.find(id);
Agenda.bindOne(id, $scope, 'item');
})
.controller('SlideAgendaCtrl', function($scope, $http, Agenda) {
// Attention! Each object that is used here has to be dealt on server side.
// Add it to the coresponding get_requirements method of the ProjectorElement
// class.
Agenda.findAll();
Agenda.bindAll({}, $scope, 'items');
$scope.ids = [];
var tree = $http.get('/rest/agenda/item/tree/').success(function(data) {
var ids = [];
angular.forEach(data,function(element) {
ids.push(element.id)
});
$scope.ids = ids;
})
});

View File

@ -5,9 +5,11 @@
<i class="fa fa-angle-double-left fa-lg"></i>
<translate>Back to overview</translate>
</a>
<!-- projector, TODO: add link to activate slidea-->
<a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
title="{{ 'Show' | translate }}">
<!-- project -->
<a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
ng-class="{ 'btn-primary': item.isProjected() }"
ng-click="item.project()"
title="{{ 'Project item' | translate }}">
<i class="fa fa-video-camera"></i>
</a>
<!-- edit -->
@ -18,7 +20,7 @@
</a>
</div>
{{ item.text }}
<div class="white-space-pre-line">{{ item.text }}</div>
<div os-perm="agenda.can_manage">
<h3 os-perm="agenda.can_manage" translate>Duration</h3>
@ -27,7 +29,7 @@
<div os-perm="agenda.can_manage">
<h3 os-perm="agenda.can_manage" translate>Comment</h3>
{{ item.comment }}
<div class="white-space-pre-line">{{ item.comment }}</div>
</div>

View File

@ -25,6 +25,13 @@
<div class="row form-group">
<div class="col-sm-8">
<!-- project agenda -->
<a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
ng-click="projectAgenda()"
ng-class="{ 'btn-primary': isAgendaProjected() }">
<i class="fa fa-video-camera"></i>
<translate>Project agenda</translate>
</a>
</div>
<div class="col-sm-4">
<input type="text" os-focus-me ng-model="filter.search" class="form-control"
@ -45,7 +52,8 @@
<th os-perms="agenda.can_manage core.can_manage_projector" class="minimum">
<translate>Actions</translate>
<tbody>
<tr ng-repeat="node in flattenedTree | filter: filter.search">
<tr ng-repeat="node in flattenedTree | filter: filter.search"
ng-class="{ 'activeline': (items | filter: {id: node.id})[0].isProjected() }">
<td><input type="checkbox" ng-model="(items | filter: {id: node.id})[0].closed" ng-click="save(node.id)">
<td>
<span ng-repeat="n in [].constructor(node.level) track by $index">&ndash;</span>
@ -53,20 +61,20 @@
{{ (items | filter: {id: node.id})[0].item_number }}
{{ (items | filter: {id: node.id})[0].title }}
</a>
<button ng-if="(items | filter: {id: node.id})[0].comment"
class="btn btn-default btn-xs" popover="{{(items | filter: {id: node.id})[0].comment}}"
popover-title="{{ 'Comment' | translate }}">
<i class="fa fa-comment-o"></i>
</button>
<div ng-if="(items | filter: {id: node.id})[0].comment">
<small><i class="fa fa-info-circle"></i> {{ (items | filter: {id: node.id})[0].comment }}</small>
</div>
<td os-perms="agenda.can_manage" class="optional">
<a href="#" editable-number="(items | filter: {id: node.id})[0].duration" e-min="1" onaftersave="save(node.id)">
{{ (items | filter: {id: node.id})[0].duration }}
</a>
<span ng-if="(items | filter: {id: node.id})[0].duration" translate>min</span>
<td os-perms="agenda.can_manage core.can_manage_projector" class="nobr">
<!-- projector, TODO: add link to activate slide-->
<a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
title="{{ 'Show' | translate }}">
<!-- project -->
<a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
ng-class="{ 'btn-primary': (items | filter: {id: node.id})[0].isProjected() }"
ng-click="(items | filter: {id: node.id})[0].project()"
title="{{ 'Project item' | translate }}">
<i class="fa fa-video-camera"></i>
</a>
<!-- edit -->

View File

@ -0,0 +1,11 @@
<div ng-controller="SlideAgendaCtrl" class="content">
<h1 translate>Agenda</h1>
<table class="tablelist">
<tr ng-repeat="id in ids">
<td class="leftcolumn nobr" ng-class="{ 'closed': (items | filter: {id: id})[0].closed }">
{{ (items | filter: {id: id})[0].item_number }}
<td class="rightcolumn" ng-class="{ 'closed': (items | filter: {id: id})[0].closed }">
{{ (items | filter: {id: id})[0].title }}
</table>
</div>

View File

@ -0,0 +1,4 @@
<div ng-controller="SlideItemCtrl" class="content">
<h1>{{ item.title }}</h1>
<div class="white-space-pre-line">{{ item.text }}</div>
</div>

View File

@ -9,8 +9,11 @@
<i class="fa fa-file-pdf-o fa-lg"></i>
<translate>PDF</translate>
</a>
<a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
title="{{ 'Show' | translate }}">
<!-- project -->
<a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
ng-class="{ 'btn-primary': assignment.isProjected() }"
ng-click="assignment.project()"
title="{{ 'Project election' | translate }}">
<i class="fa fa-video-camera"></i>
</a>
<!-- edit -->
@ -22,7 +25,7 @@
</div>
<h3 translate>Description</h3>
{{ assignment.description }}
<div class="white-space-pre-line">{{ assignment.description }}</div>
<h3 translate>Candidates</h3>
<!-- TODO -->

View File

@ -1,4 +1,4 @@
<div ng-controller="SlideAssignmentCtrl" class="content">
<h1>{{ assignment.title }}</h1>
{{ assignment.description }}
<div class="white-space-pre-line">{{ assignment.description }}</div>
</div>

View File

@ -124,6 +124,9 @@ hr {
.nobr {
white-space: nowrap;
}
.white-space-pre-line {
white-space: pre-line;
}
/*** Overlay ***/
@ -166,7 +169,7 @@ hr {
/*** Table style ***/
table {
.table {
border-collapse:collapse;
border-color:#CCCCCC -moz-use-text-color #CCCCCC #CCCCCC;
border-style:solid none solid solid;
@ -174,7 +177,7 @@ table {
margin:0;
border-spacing:0px;
}
table th {
.table th {
border-right:1px solid #CCCCCC;
color:#333333;
font-weight:normal;
@ -182,10 +185,10 @@ table th {
text-align:left;
text-transform:uppercase;
}
table tr.odd td {
.table tr.odd td {
background:none repeat scroll 0 0 #F1F1F1;
}
table td {
.table td {
background:none repeat scroll 0 0 #F7F7F7;
border-right:1px solid #CCCCCC;
line-height:120%;
@ -199,3 +202,18 @@ tr.total td {
tr.elected td {
background-color: #BED4DE !important;
}
/*** Table list ***/
.tablelist {
font-size: 130%;
}
.tablelist td {
padding: 5px;
}
.tablelist .leftcolumn {
padding-right: 15px;
vertical-align: top;
}
.tablelist td.closed {
text-decoration: line-through;
}

View File

@ -10,7 +10,7 @@ angular.module('OpenSlidesApp', [
angular.module('OpenSlidesApp.projector', [
'OpenSlidesApp',
'OpenSlidesApp.core.projector',
'OpenSlidesApp.agenda',
'OpenSlidesApp.agenda.projector',
'OpenSlidesApp.motions.projector',
'OpenSlidesApp.assignments.projector',
'OpenSlidesApp.users.projector',

View File

@ -1,4 +1,4 @@
<div ng-controller="SlideCustomSlideCtrl" class="content">
<h1>{{ customslide.title }}</h1>
{{ customslide.text }}
<div class="white-space-pre-line">{{ customslide.text }}</div>
</div>

View File

@ -15,8 +15,11 @@
<i class="fa fa-file-pdf-o fa-lg"></i>
<translate>PDF</translate>
</a>
<a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
title="{{ 'Show' | translate }}">
<!-- project -->
<a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
ng-class="{ 'btn-primary': motion.isProjected() }"
ng-click="motion.project()"
title="{{ 'Project motion' | translate }}">
<i class="fa fa-video-camera"></i>
</a>
<!-- edit -->
@ -30,10 +33,10 @@
<div class="row">
<div class="col-sm-8">
<h3 translate>Text</h3>
{{ motion.getText() }}
<div class="white-space-pre-line">{{ motion.getText() }}</div>
<h3 translate>Reason</h3>
{{ motion.getReason() }}
<div class="white-space-pre-line">{{ motion.getReason() }}</div>
</div>
<div class="col-sm-4">

View File

@ -1,4 +1,4 @@
<div ng-controller="SlideMotionCtrl" class="content">
<h1>{{ motion.getTitle() }}</h1>
{{ motion.getText() }}
<div class="white-space-pre-line">{{ motion.getText() }}</div>
</div>

View File

@ -121,6 +121,9 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
resolve: {
user: function(User, $stateParams) {
return User.find($stateParams.id);
},
groups: function(Group) {
return Group.findAll();
}
}
})
@ -313,8 +316,9 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
};
})
.controller('UserDetailCtrl', function($scope, User, user) {
.controller('UserDetailCtrl', function($scope, User, user, Group) {
User.bindOne(user.id, $scope, 'user');
Group.bindAll({}, $scope, 'groups');
})
.controller('UserCreateCtrl', function($scope, $state, User, Group) {
@ -353,7 +357,17 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
$scope.users = $scope.userlist[0].split("\n");
$scope.importcounter = 0;
$scope.users.forEach(function(name) {
var user = {last_name: name, groups: []}; // use default group 'Registered' (#2)
// Split each full name in first and last name.
// The last word is set as last name, rest is the first name(s).
// (e.g.: "Max Martin Mustermann" -> last_name = "Mustermann")
var names = name.split(" ");
var last_name = names.slice(-1)[0];
var first_name = names.slice(0, -1).join(" ");
var user = {
first_name: first_name,
last_name: last_name,
groups: []
};
User.create(user).then(
function(success) {
$scope.importcounter++;

View File

@ -34,12 +34,7 @@
<tr ng-repeat="group in groups | filter: filter.search | orderBy:sortby:reverse">
<td>{{ group.id }}
<td><a ui-sref="users.group.detail({id: group.id})">{{ group.name }}</a>
<td os-perms="users.can_manage core.can_manage_projector" class="nobr">
<!-- projector, TODO: add link to activate slidea-->
<a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
title="{{ 'Show' | translate }}">
<i class="fa fa-video-camera"></i>
</a>
<td os-perms="users.can_manage" class="nobr">
<!-- edit -->
<a ui-sref="users.group.detail.update({id: group.id})" os-perms="users.can_manage"
class="btn btn-default btn-sm"

View File

@ -5,6 +5,19 @@
<i class="fa fa-angle-double-left fa-lg"></i>
<translate>Back to overview</translate>
</a>
<!-- project -->
<a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
ng-class="{ 'btn-primary': user.isProjected() }"
ng-click="user.project()"
title="{{ 'Project user' | translate }}">
<i class="fa fa-video-camera"></i>
</a>
<!-- edit -->
<a ui-sref="users.user.detail.update({id: user.id })" os-perms="users.can_manage"
class="btn btn-default btn-sm"
title="{{ 'Edit' | translate}}">
<i class="fa fa-pencil"></i>
</a>
</div>
<div class="user_details form-group">
@ -13,10 +26,11 @@
<label translate>Structure level</label>
{{ user.structure_level }}
<label translate>Groups</label>
{{ user.groups }}
<!-- TODO: print all groups -->
<div ng-repeat="group in user.groups">
{{ (groups | filter: {id: group})[0].name }}
</div>
<label translate>About me</label>
{{ user.about_me }}
<div class="white-space-pre-line">{{ user.about_me }}</div>
</fieldset>
<fieldset os-perms="users.can_manage">
@ -24,8 +38,6 @@
<label translate>Username</label>
{{ user.username }}
<label translate>Comment</label>
{{ user.comment }}
<label translate>Last login</label>
{{ user.last_login }}
<div class="white-space-pre-line">{{ user.comment }}</div>
</fieldset>
</div>

View File

@ -19,8 +19,8 @@ Keep each person in a single line.</p>
<div class="clearfix">
<button ng-click="importByLine()" class="btn btn-primary pull-left" translate>Import</button>
<div class="col-xs-5" ng-if="items">
<progressbar animate="false" type="success" max="items.length" value="importcounter">
<div class="col-xs-5" ng-if="users">
<progressbar animate="false" type="success" max="users.length" value="importcounter">
<i>{{ importcounter }} / {{ users.length }} {{ "imported" | translate }}</i>
</progressbar>
</div>