rref #5385. Initial timetable implementation

app/components/crud/crud_controller.js

@@ -483,4 +483,60 @@ angular.module('ulakbus.crud', ['schemaForm', 'ui.bootstrap', 'ulakbus.formServi
                 }
             }
         };
-    });
\ No newline at end of file
+    })
+    /**
+     * @memberof ulakbus.crud
+     * @ngdoc directive
+     * @name crudTimetableDirective
+     * @description directive for displaying timetable widget
+     */
+    .directive("crudTimetableDirective", function(){
+        // todo: replace with utils service method
+        function groupBy (list, propName) {
+            return list.reduce(function(acc, item) {
+                (acc[item[propName]] = acc[item[propName]] || []).push(item);
+                return acc;
+            }, {});
+        };
+
+        return {
+            templateUrl: 'components/crud/templates/timetable.html',
+            restrict: 'E',
+            replace: true,
+            link: function(iScope, iElem, iAtrrs){
+                console.log("SXF: ", iScope.ogretim_elemani_zt);
+
+                iScope.lecturerList = iScope.ogretim_elemani_zt.ogretim_elemanlari;
+
+                iScope.currentLecturer = {
+                    key: iScope.ogretim_elemani_zt.oe_key,
+                    name: iScope.ogretim_elemani_zt.name,
+                    avatar_url: iScope.ogretim_elemani_zt.avatar_url,
+                    totalHours: iScope.ogretim_elemani_zt.toplam_ders_saati
+                };
+
+                iScope.availableStates = [
+                    {value: 1, name: "Uygun"},
+                    {value: 2, name: "Belirsiz"},
+                    {value: 3, name: "Meşgul"}
+                ];
+
+                prepareTimetable(iScope.ogretim_elemani_zt.uygunluk_durumu);
+
+                function prepareTimetable(timetable){
+                    var grouped = groupBy(timetable, "saat");
+                    for (var day in grouped){
+                        var dayItems = grouped[day];
+                        grouped[day] = dayItems.sort(function(a, b){
+                            return a.gun < b.gun ? -1 : 1;
+                        });
+                    }
+                    iScope.timetable = grouped;
+                }
+
+                iScope.selectLecturer = function(){
+
+                }
+            }
+        }
+    });

app/components/crud/templates/crud.html

@@ -5,9 +5,10 @@
         <crud-show-directive ng-if="object"></crud-show-directive>
         <crud-form-directive ng-if="forms"></crud-form-directive>
         <crud-list-directive ng-if="objects"></crud-list-directive>
+        <crud-timetable-directive ng-if="ogretim_elemani_zt"></crud-timetable-directive>
     </div>
     <crud-filters ng-show="meta.allow_filters === true" class="col-md-4 filtre"></crud-filters>
 </div>
 <div ng-show="show_crud === false" class="crud-mask">
     <span class="loader"></span>
-</div>
\ No newline at end of file
+</div>

app/components/crud/templates/timetable.html

+<div class="row academician-dashboard dashboard">
+    <div class="col-md-12 course-prg-scheduler">
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                <div class="panel-title">Course Scheduler Widget</div>
+            </div>
+            <div class="panel-body">
+
+                <div class="col-xs-3"> <!-- required for floating -->
+                    <!-- Nav tabs -->
+                    <ul class="nav nav-tabs tabs-left">
+                        <li ng-repeat="lecturer in lecturerList" ng-click="selectLecturer(lecturer)" ng-class="{active: currentLecturer.key == lecturer.key}"><a>{{lecturer.name}}</a></li>
+                    </ul>
+                </div>
+
+                <div class="col-xs-9">
+                    <!-- Tab panes -->
+                    <div class="tab-content">
+                        <div class="tab-pane active" id="one">
+
+                            <div class="info-header clearfix">
+                                <div class="info-wrapper">
+                                    <img ng-src="{{currentLecturer.avatar_url}}" class="profile-pic">
+                                    <span class="user-name">{{currentLecturer.name}}</span>
+                                </div>
+                                <div class="info-wrapper">
+                                    <div style="margin-top:14px;">
+                                        <span>Ders Yükü:</span> <span>{{currentLecturer.totalHours}} saat</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- end of header -->
+
+                            <div class="table-warning">
+                                <span class="glyphicon glyphicon-exclamation-sign"></span> Tabloda en az 30 saat uygun olarak işaretlemelisiniz.
+                            </div>
+
+                            <table border="1">
+                                <tbody>
+                                <tr class="headers">
+                                    <td></td>
+                                    <td>PZT</td>
+                                    <td>SAL</td>
+                                    <td>ÇAR</td>
+                                    <td>PER</td>
+                                    <td>CUM</td>
+                                    <td>CMT</td>
+                                    <td>PAZ</td>
+                                </tr>
+                                <tr ng-repeat="(time, days) in timetable">
+                                    <td>{{time}}</td>
+                                    <td ng-repeat="day in days">
+                                        <select ng-model="day.durum" class="form-control" ng-options="option.value as option.name for option in availableStates">
+                                        </select>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+
+
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <!-- end of panel-body -->
+        </div>
+        <!-- end of panel -->
+    </div>
+</div>