Merge pull request #3502 from FinnStutzenstein/fullscreenCountdown

Countdown in a fullscreen view

openslides/core/static/css/app.css

@@ -928,6 +928,39 @@ img {
     margin-top: 10px;
 }
 
+/* Countdown fullscreen mode */
+#countdownWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    background-color: white;
+}
+#countdownWrapper > div {
+    text-align: center;
+    margin-top: 50px;
+}
+#countdown {
+    display: inline-block;
+    padding: 20px 50px;
+    border-radius: 8px;
+    font-size: 30vw;
+    line-height: 1;
+    font-weight: bold;
+}
+#countdown .description {
+    font-weight: normal;
+    font-size: 5vw;
+}
+#countdown.warning {
+    color: #ed940d;
+}
+#countdown.negative {
+    color: #CC0000;
+}
+
 /* countdown and message controls */
 .col2 .countdown.panel, .col2 .message.panel {
     margin-bottom: 7px;
@@ -973,7 +1006,7 @@ img {
     font-weight: bold;
 }
 
-.col2 .countdown .editicon, .col2 .message .editicon {
+.col2 .countdown .icons, .col2 .message .editicon {
     padding-right: 10px;
 }
 
@@ -1510,12 +1543,6 @@ img {
     display: none;
 }
 
-/* List of speakers view */
-.fullscreendiv-title {
-    border-bottom: 5px solid #d3d3d3;
-    margin-bottom: 40px;
-}
-
 .lastSpeakers {
     color: #9a9898;
 }

openslides/core/static/js/core/site.js

@@ -392,7 +392,25 @@ angular.module('OpenSlidesApp.core.site', [
                     basePerm: 'core.can_manage_tags',
                 },
             })
-            .state('core.tag.list', {});
+            .state('core.tag.list', {})
+
+            // Countdown
+            .state('core.countdown', {
+                url: '/countdown',
+                abstract: true,
+                template: "<ui-view/>",
+                data: {
+                    title: gettext('Countdown'),
+                    basePerm: 'core.can_manage_projector',
+                },
+            })
+            .state('core.countdown.detail', {
+                resolve: {
+                    countdownId: ['$stateParams', function($stateParams) {
+                        return $stateParams.id;
+                    }],
+                }
+            });
 
         $locationProvider.html5Mode(true);
     }
@@ -1785,6 +1803,41 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
+.controller('CountdownDetailCtrl', [
+    '$scope',
+    '$interval',
+    'Countdown',
+    'countdownId',
+    function ($scope, $interval, Countdown, countdownId) {
+        var interval;
+        var calculateCountdownTime = function (countdown) {
+            countdown.seconds = Math.floor( $scope.countdown.countdown_time - Date.now() / 1000 + $scope.serverOffset );
+        };
+        $scope.$watch(function () {
+            return Countdown.lastModified(countdownId);
+        }, function () {
+            $scope.countdown = Countdown.get(countdownId);
+            if (interval) {
+                $interval.cancel(interval);
+            }
+            if ($scope.countdown) {
+                if ($scope.countdown.running) {
+                    calculateCountdownTime($scope.countdown);
+                    interval = $interval(function () { calculateCountdownTime($scope.countdown); }, 1000);
+                } else {
+                    $scope.countdown.seconds = $scope.countdown.countdown_time;
+                }
+            }
+        });
+        $scope.$on('$destroy', function() {
+            // Cancel the interval if the controller is destroyed
+            if (interval) {
+                $interval.cancel(interval);
+            }
+        });
+    }
+])
+
 // counter of new (unread) chat messages
 .value('NewChatMessages', [])
 

openslides/core/static/templates/core/countdown-detail.html

@@ -0,0 +1,16 @@
+<div id="countdownWrapper">
+  <div>
+    <div id="countdown" ng-class="{
+        'negative': countdown.seconds <= 0,
+        'warning': countdown.seconds <= config('agenda_countdown_warning_time') && countdown.seconds > 0 }">
+      <div class="row">
+        <div class="col-d-12">{{ countdown.seconds | osSecondsToTime}}</div>
+      </div>
+      <div class="row">
+        <div class="col-md-12 description">
+          <span class="pull-right">{{ countdown.description }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

openslides/core/static/templates/core/projector-controls.html

@@ -1,4 +1,3 @@
-
 <div class="details">
 
   <div ng-controller="ProjectorControlCtrl">
@@ -153,11 +152,15 @@
                 <i class="fa fa-times"></i>
             </button>
             <!-- edit countdown button -->
-            <button type="button" class="close editicon"
+            <button type="button" class="close icons"
                 ng-click="countdown.editFlag=true; countdown.new_description = countdown.description;"
                 title="{{ 'Edit countdown' | translate}}">
                 <i class="fa fa-pencil"></i>
             </button>
+            <a ui-sref="core.countdown.detail({id: countdown.id})" class="close icons" target="_blank"
+              uib-tooltip="{{ 'Open countdown in fullscreen' | translate }}">
+              <i class="fa fa-arrows-alt"></i>
+            </a>
           </div>
           <div class="panel-body"
             ng-class="{ 'projected': isProjected(countdown).length }">