FrontEnd/schedule.html at master · UOSHUB/FrontEnd · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script type="text/ng-template" id="schedule">
    <md-select ng-model="$ls.selected.term" ng-click="$toolbar.getTerms()" class="no-margin" flex-xs="100">
        <md-option ng-repeat="term in $toolbar.orderTerms($ls.terms || [])" ng-bind-html="::$toolbar.termTitle(term)"
                   ng-click="$toolbar.getSchedule(term)" ng-value="term"></md-option>
    </md-select>
</script>

<md-card flex>
    <md-card-content layout="row" class="fill-card">
        {{ term = !loading && $ls.terms[$ls.selected.term]; '' }}
        <loading items="term.courses" color="color" style="position: absolute; left: 50%; top: 45%"></loading>
        <div class="day as-hours-head" md-colors="::{background: 'green-50'}"></div>
        <div class="day" ng-repeat="day in ::[1, 2, 3, 4]"></div>

        <div class="hour as-days-head" md-colors="::{background: 'green-50'}"></div>
        <div ng-repeat-start="fraction in term.fractions" class="hour-label blue-grey-text" style="top: {{ 2 + fraction * term.height }}%">
            {{ term.labels[$index].hour }}<span class="hide-xs">{{ term.labels[$index].period }}</span>
        </div>
        <div ng-if="!$last" class="half hour" style="top: {{ 5 + term.height * (0.5 + fraction) }}%"></div>
        <div class="hour" style="top: {{ 5 + fraction * term.height }}%" ng-repeat-end></div>

        <div class="classes-container" ng-repeat="id in term.courses">
            {{ course = $ls.courses[id]; ''}}
            <div ng-repeat="point in course.points" ng-click="showCourse($event, id)" class="class"
                 md-colors="::{background: course.color, color: 'grey-A100'}" ng-if="course.start"
                 ng-style="::{height: course.length * term.height + '%', left: point.x + '%', top: point.y + '%'}">
                <div>{{ course.title }}</div>
                <div hide-xs><md-icon md-font-icon="fa fa-user fa-fw" md-colors="::{color: 'grey-A100'}"></md-icon> {{ ::course.doctor }}</div>
                <div hide-xs><md-icon md-font-icon="fa fa-map-marker fa-fw" md-colors="::{color: 'grey-A100'}"></md-icon> {{ ::course.location }}</div>
            </div>
        </div>
        <div ng-repeat="day in ::days" class="day-label blue-grey-text text-darken-2" style="left: {{ ::(5 + $index * 19) }}%">
            {{ ::day }} <span class="hide-xs">{{ ::term.dates[$index] }}</span>
        </div>
    </md-card-content>
</md-card>

<script type="text/ng-template" id="class-dialog">
    <md-dialog class="schedule" md-colors="::{background: 'default-grey-A100', color: 'default-grey-800'}" layout="column" flex="40" flex-xs="90">
        <md-toolbar flex="10" md-colors="::{background: 'default-' + course.color, color: 'default-grey-A100'}">
            <div class="md-toolbar-tools" flex>
                <span flex>{{ ::course.title }}</span>
                <md-button class="md-icon-button" ng-click="cancel()">
                    <md-icon md-font-icon="fa fa-times fa-lg"></md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content class="course-info-icons" layout="row" layout-margin>
            <div ng-repeat="column in course.columns" layout="column" layout-align="space-between start" flex layout-margin>
                <p ng-repeat="row in column">
                    <md-icon md-font-icon="fa fa-{{ ::row[2] }} fa-fw"></md-icon>
                    {{ ::row[1] }} <span ng-if="row[3]" md-colors="{color: 'default-grey-500'}">{{ ::row[3] }}</span>
                    <md-tooltip md-direction="right">{{ ::row[0] }}</md-tooltip>
                </p>
            </div>
        </md-dialog-content>
    </md-dialog>
</script>