rref #5385. Add widget for table cell state change

app/shared/directives.js

@@ -707,4 +707,51 @@ angular.module('ulakbus')
                 });
             }
         };
+    })
+    .directive('timetableActionSelector', function($timeout){
+        // Display/hide popover with actions
+        // global listener used to close popover when user clicks outside of the popover
+        $('html').on('click', function(e) {
+            var target = $(e.target);
+            if (target.parents().is('.action-selector')){
+                target.parents('.action-selector').children('.popover').toggleClass('ng-hide');
+                return;
+            }
+            if (target.hasClass('action-selector')){
+                target.children('.popover').toggleClass('ng-hide');
+                return;
+            };
+            $('.course-prg-scheduler .action-selector>.popover').toggleClass('ng-hide', true);
+        });
+
+        return {
+            templateUrl: 'shared/templates/directives/timetable-action-selector.html',
+            scope: {
+                externalModel: '=ngModel',
+                onChange: "&ngChange"
+            },
+            link: function(iScope, iElem, iAttrs){
+                var valueToClassMap = {
+                    1: 'action-indicator_appropriate',
+                    2: 'action-indicator_uncertain',
+                    3: 'action-indicator_busy'
+                };
+
+                iScope.$watch('externalModel', function(value){
+                    iScope.value = valueToClassMap[value];
+                });
+
+                iScope.setModelValue = function(value){
+                    var oldValue = iScope.externalModel;
+                    iScope.externalModel = value;
+                    // call change in next digest
+                    $timeout(function(){
+                        if (iScope.onChange && value != oldValue) {
+                            iScope.onChange();
+                        }
+                    });
+
+                }
+            }
+        }
     });

app/shared/templates/directives/timetable-action-selector.html

+<div class="action-selector">
+    <span class="action-indicator" ng-class="value"></span>
+    <div class="popover bottom ng-hide">
+        <div class="arrow"></div>
+        <div class="popover-content">
+            <ul class="actions-selector-select">
+                <li ng-click="setModelValue(1)">
+                    <span class="action-indicator action-indicator_appropriate"></span>
+                </li>
+                <li ng-click="setModelValue(2)">
+                    <span class="action-indicator action-indicator_uncertain"></span>
+                </li>
+                <li ng-click="setModelValue(3)">
+                    <span class="action-indicator action-indicator_busy"></span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>