Agenda slide templates. Some template improvements.

- User import
- show linebreaks for long text
- some style work
- item detail and agenda list slide

openslides/agenda/static/js/agenda/agenda.js

@@ -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',
+        name: name,
-        endpoint: '/rest/agenda/item/'
+        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;
+    })
+});

openslides/agenda/static/templates/agenda/item-detail.html

@@ -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-->
+  <!-- project -->
-  <a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      title="{{ 'Show' | translate }}">
+      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>
 
 

openslides/agenda/static/templates/agenda/item-list.html

@@ -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"
+        <div ng-if="(items | filter: {id: node.id})[0].comment">
-            class="btn btn-default btn-xs" popover="{{(items | filter: {id: node.id})[0].comment}}"
+          <small><i class="fa fa-info-circle"></i> {{ (items | filter: {id: node.id})[0].comment }}</small>
-            popover-title="{{ 'Comment' | translate }}">
+        </div>
-          <i class="fa fa-comment-o"></i>
-        </button>
       <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-->
+        <!-- project -->
-        <a href="#TODO" os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+        <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-            title="{{ 'Show' | translate }}">
+            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 -->

openslides/agenda/static/templates/agenda/slide_agenda.html

@@ -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>

openslides/agenda/static/templates/agenda/slide_item.html

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

openslides/assignments/static/templates/assignments/assignment-detail.html

@@ -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"
+  <!-- project -->
-      title="{{ 'Show' | translate }}">
+  <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 -->

openslides/assignments/static/templates/assignments/slide_assignment.html

@@ -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>

openslides/core/static/css/projector.css

@@ -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;
+}

openslides/core/static/js/app.js

@@ -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',

openslides/core/static/templates/core/slide_customslide.html

@@ -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>

openslides/motions/static/templates/motions/motion-detail.html

@@ -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"
+  <!-- project -->
-      title="{{ 'Show' | translate }}">
+  <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">

openslides/motions/static/templates/motions/slide_motion.html

@@ -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>

openslides/users/static/js/users/users.js

@@ -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++;

openslides/users/static/templates/users/group-list.html

@@ -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">
+      <td os-perms="users.can_manage" 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>
         <!-- edit -->
         <a ui-sref="users.group.detail.update({id: group.id})" os-perms="users.can_manage"
             class="btn btn-default btn-sm"

openslides/users/static/templates/users/user-detail.html

@@ -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 }}
+      <div ng-repeat="group in user.groups">
-      <!-- TODO: print all 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 }}
+      <div class="white-space-pre-line">{{ user.comment }}</div>
-    <label translate>Last login</label>
-      {{ user.last_login }}
   </fieldset>
 </div>

openslides/users/static/templates/users/user-import.html

@@ -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">
+  <div class="col-xs-5" ng-if="users">
-    <progressbar animate="false" type="success" max="items.length" value="importcounter">
+    <progressbar animate="false" type="success" max="users.length" value="importcounter">
       <i>{{ importcounter }} / {{ users.length }} {{ "imported" | translate }}</i>
     </progressbar>
   </div>