e-ucm/rage-analytics-frontend

View on GitHub
app/views/view/classactivity.jade

Summary

Maintainability
Test Coverage
//- 
    Copyright 2016 e-UCM (http://www.e-ucm.es/)
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    This project has received funding from the European Union’s Horizon
    2020 research and innovation programme under grant agreement No 644187.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0 (link is external)
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
.container.theme-showcase(ng-if='selectedClass' ng-controller='ClassCtrl' ng-attr-classid='{{ selectedClass._id }}')
    #dashboardModal(class="modal fade")
        div.modal-dialog-full(class="modal-dialog")
            div.modal-content-full(class="modal-content")
                div(class="modal-header")
                    button(type="button" class="close" data-dismiss="modal" aria-hidden="true") ×
                    h4(class="modal-title") Class dashboard displaying activities visualizations
                div(class="modal-body ")
                    iframe#dashboardIframe.no-border(ng-src = "{{dashboardLink}}" scrolling="no" width="100%" height="100%")
                    script(src='./js/iresizer.js')
    div(ng-controller='ActivityListCtrl', ng-attr-classid='{{ class._id }}' ng-class='(isTeacher() ? "col-md-8" : "col-md-12")')
        .panel.panel-default
            .panel-heading
                .row
                    h1(ng-if='isTeacher()')
                        a.btn-space(href="#", editable-text="class.name" onaftersave="changeName()") Class {{ class.name }}
                        button.btn.btn-primary.btn-space(data-toggle="modal" href="#dashboardModal") Dashboard
                        button.btn.btn-primary.btn-space
                            i.fa.fa-external-link(ng-click='popDashboard()')
                    h1(ng-if='!isTeacher()') Class {{ class.name }}

            .panel-body
                .panel.panel-primary(ng-if='isTeacher()')
                    .panel-heading Create a new Activity
                    .panel-body
                        label Activity title:
                            input.form-control(placeholder='New Activity' type='text' ng-model='activity.name')
                        label Game:
                            select.form-control(ng-model='activity.gameId')
                                option(ng-repeat='game in games' value='{{ game._id }}') {{ game.title }}
                        a.btn.btn-primary.btn-space(type='button', ng-click="createActivity()" class="btn btn-default")
                            span.glyphicon.glyphicon-plus.right10
                            | New activity
                        .checkbox(style="display: inline-block")
                            label
                                input(type='checkbox' ng-model='type.offline')
                                span.cr
                                    i.cr-icon.glyphicon.glyphicon-ok
                                |    Offline activity
                        p.btn-danger {{activityCreatedError}}
                p.btn-danger {{activityOpenedError}}
                p.btn-danger {{activityOpenedError}}
                table.table.table-hover
                    thead
                        tr
                            th Activities
                            th Game
                            th Created
                            th(ng-if='isTeacher()') State
                            th(ng-if='isTeacher()') Delete
                    tbody
                        tr(ng-if='activities.length == 0')
                            td(colspan=6)
                                div.alert.alert-info(style='margin-bottom: 0px') No activities found
                        tr(ng-repeat='activity in activities')
                            td
                                span.glyphicon.glyphicon-stats.right10
                                a(ng-href="#" ng-click='goToActivity(activity)') {{activity.name}}
                            td
                                a(ng-href='#', ng-click='goToGame(getGameById(activity.gameId))') {{ getGameById(activity.gameId).title }}
                            td {{activity._id | prettyDateId }}
                            td(ng-if='isTeacher()', ng-controller='ActivityCtrl' lite activity='{{ activity }}')
                                button.btn-success(ng-if='activityState() == 2 && isOnlineActivityParam(activity)' ng-click='endActivity()') Opened
                                button.btn-warning(ng-if='activityState() == 0 && isOnlineActivityParam(activity)' ng-click='startActivity()') Closed
                                button.btn-info(ng-if='activityState() == 1 && isOnlineActivityParam(activity)') Loading
                                    span.fa.fa-refresh.fa-spin
                                p.btn-info(ng-if='isOfflineActivityParam(activity)') Offline Activity
                            td(ng-if='isTeacher()')
                                a(ng-click='deleteActivity(activity)')
                                    span.glyphicon.glyphicon-remove-sign
    .col-md-4(ng-if='isTeacher()')
        .panel.panel-default
            .panel-heading
                h3
                    label LTI
                    a.pull-right.glyphicon.glyphicon-question-sign(href='{{DOCS.LTI}}'
                    target="_blank" title="See documentation on GitHub")
            .panel-body
                .row
                    .col-md-8(ng-if='!lti.key')
                        p Configure class to use lti
                .row
                    .col-md-8(ng-if='!lti.key')
                        label Type the secret:
                            input.form-control(type='text' ng-model='lti.secret')
                        a.btn.btn-primary(type='button', ng-click='createLtiKey()')
                            | Configure Lti
                .row
                    .col-md-8(ng-if='lti.key')
                        p Introduce the key and secret values in your tool consumer (e.g Moodle)
                .row
                    .col-md-8(ng-if='lti.key')
                        label KEY:
                            kbd.label-success {{ lti.key }}
                .row
                    .col-md-8(ng-if='lti.key')
                        label Secret:
                            kbd.label-success  {{ lti.secret }}
                .row
                    .col-md-10(ng-if='lti.key')
                        label Launch URL:
                            kbd.label-success  {{ lti.launch }}
    .col-md-4(ng-if='isTeacher()')
        .panel.panel-default
            .panel-heading
                h3
                    label Configure your class participants
            .panel-body
                button.btn.btn-primary(ng-click="open('lg')") Configure
                    span.right20
                    span.glyphicon.glyphicon-user
        .panel.panel-default
            .panel-heading
                h3
                    label List of current participants
                label.label-success(ng-if='isUsingGroups()') Using a subclass (Groups selected)
                label.label-warning(ng-if='isUsingGroupings()') Using a subclass (Groupings selected)
            .panel-body
                table.table.table-hover
                    thead
                        tr
                            th User
                            th Role
                    tbody
                        tr(ng-repeat='teacher in participants.teachers')
                            td
                                label {{teacher}}
                            td
                                label teacher
                        tr(ng-repeat='assistant in participants.assistants')
                            td
                                label {{assistant}}
                            td
                                label assistant
                        tr(ng-repeat='student in participants.students')
                            td
                                label {{student}}
                            td
                                label student

    // PARTICIPANTS MODAL
    script#participantsModal(type="text/ng-template")
        div.modal-header.row
            .modal-title
                .col-md-6
                    h1 Configure Participants
                .col-md-12(ng-if='!$scope.unlockedGroups && !$scope.unlockedGroupings')
                    label.alert-info *If you want restrict the default access to the class with groups o groupings, please click on a star icon and check the groups or groupings
                .col-md-12(ng-if='$scope.unlockedGroups')
                    label.alert-success You are using groups (if you want use all participants, please, click star icon in groups area)
                .col-md-12(ng-if='$scope.unlockedGroupings')
                    label.alert-warning You are using groupings (if you want use all participants, please, click star icon in groupings area)
        div.modal-body.row
            .col-md-6
                .panel.panel-default
                    .panel-heading
                        h3
                            label Class Teachers
                    .panel-body
                        div(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping')
                            p An activity will inherit all the class teachers when created
                            .panel.panel-primary
                                .panel-heading Add teacher to class
                                .panel-body
                                    label Username:
                                        input.form-control(type='text' ng-model='$scope.teacher.name')
                                    a.btn.btn-primary(type='button', ng-click='$scope.inviteUser("teacher")')
                                        span.glyphicon.glyphicon-plus.right10
                        table.table.table-hover
                            thead
                                tr
                                    th Teacher
                                    th(ng-show='$scope.selectedGroup') Add or Remove
                                    th(ng-show='!$scope.selectedGroup') Remove
                            tbody
                                tr(ng-if='$scope.class.participants.teachers.length == 0')
                                    td(colspan=6)
                                        div.alert.alert-warning(style='margin-bottom: 0px') No students found
                                tr(ng-repeat='teacher in $scope.class.participants.teachers')
                                    td(ng-class='$scope.getUserThClass(teacher, "teachers")')
                                        label {{teacher}}
                                    td(ng-show='$scope.selectedGroup && !$scope.isInSelectedGroup(teacher, "teachers")' ng-class='$scope.isInSelectedGroup(teacher, "teachers") ? "bg-success" : ""')
                                        a(ng-click='$scope.modifyGroup(teacher, "teacher", true)')
                                            span.glyphicon.glyphicon-plus
                                    td(ng-show='$scope.isInSelectedGroup(teacher, "teachers")' ng-class='$scope.isInSelectedGroup(teacher, "teachers") ? "bg-success" : ""')
                                        a(ng-click='$scope.modifyGroup(teacher, "teacher", false)')
                                            span.glyphicon.glyphicon-minus
                                    td(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping' ng-class='$scope.isInSelectedGroup(teacher, "teachers") ? "bg-success" : ""')
                                        a(ng-if='$scope.isRemovable(teacher)' ng-click='$scope.ejectUser(teacher, "teacher")')
                                            span.glyphicon.glyphicon-remove-sign
                .panel.panel-default
                    .panel-heading
                        h3
                            label Class Assistants
                    .panel-body
                        div(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping')
                            p An activity will inherit all the class assistants when created
                            .panel.panel-primary
                                .panel-heading Add assistant to class
                                .panel-body
                                    label Username:
                                        input.form-control(type='text' ng-model='$scope.assistant.name')
                                    a.btn.btn-primary(type='button', ng-click='$scope.inviteUser("assistant")')
                                        span.glyphicon.glyphicon-plus.right10
                        table.table.table-hover
                            thead
                                tr
                                    th Assistant
                                    th(ng-show='$scope.selectedGroup') Add or Remove
                                    th(ng-show='!$scope.selectedGroup') Remove
                            tbody
                                tr(ng-if='$scope.class.participants.assistants.length == 0')
                                    td(colspan=6)
                                        div.alert.alert-warning(style='margin-bottom: 0px') No assistants found
                                tr(ng-repeat='assistant in $scope.class.participants.assistants')
                                    td(ng-class='$scope.getUserThClass(assistant, "assistants")')
                                        label {{assistant}}
                                    td(ng-show='$scope.selectedGroup && !$scope.isInSelectedGroup(assistant, "assistants")' ng-class='$scope.isInSelectedGroup(assistant, "assistants") ? "bg-success" : ""')
                                        a(ng-click='$scope.modifyGroup(assistant, "assistant", true)')
                                            span.glyphicon.glyphicon-plus
                                    td(ng-show='$scope.isInSelectedGroup(assistant, "assistants")' ng-class='$scope.isInSelectedGroup(assistant, "assistants") ? "bg-success" : ""')
                                        a(ng-click='$scope.modifyGroup(assistant, "assistant", false)')
                                            span.glyphicon.glyphicon-minus
                                    td(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping' ng-class='$scope.isInSelectedGroup(assistant, "assistants") ? "bg-success" : ""')
                                        a(ng-click='$scope.ejectUser(assistant, "assistant")')
                                            span.glyphicon.glyphicon-remove-sign
                .panel.panel-default
                    .panel-heading
                        h3
                            label Class Students
                    .panel-body
                        div(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping')
                            p An activity will inherit all the class students when created
                            .panel.panel-primary
                                .panel-heading Add students to class
                                .panel-body
                                    label Add students to class from file:
                                        input#inputFile.file(type='file' file-reader="$scope.fileContent")
                                    button.btn.btn-primary(ng-click='$scope.addCsvClass()')  Add class
                                    hr
                                    label Username:
                                        input.form-control(type='text' ng-model='$scope.student.name')
                                    a.btn.btn-primary(type='button', ng-click='$scope.inviteUser("student")')
                                        span.glyphicon.glyphicon-plus.right10
                        table.table.table-hover
                            thead
                                tr
                                    th Student
                                    th(ng-show='$scope.selectedGroup') Add or Remove
                                    th(ng-show='!$scope.selectedGroup') Remove
                            tbody
                                tr(ng-if='$scope.class.participants.students.length == 0')
                                    td(colspan=6)
                                        div.alert.alert-warning(style='margin-bottom: 0px') No students found
                                tr(ng-repeat='student in $scope.class.participants.students')
                                    td(ng-class='$scope.getUserThClass(student, "students")')
                                        label {{student}}
                                    td(ng-show='$scope.selectedGroup && !$scope.isInSelectedGroup(student, "students")' ng-class='$scope.isInSelectedGroup(student, "students") ? "bg-success" : ""')
                                        a(ng-click='$scope.modifyGroup(student, "student", true)')
                                            span.glyphicon.glyphicon-plus
                                    td(ng-show='$scope.isInSelectedGroup(student, "students")' ng-class='$scope.isInSelectedGroup(student, "students") ? "bg-success" : ""')
                                        a(ng-click='$scope.modifyGroup(student, "student", false)')
                                            span.glyphicon.glyphicon-minus
                                    td(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping' ng-class='$scope.isInSelectedGroup(student, "students") ? "bg-success" : ""')
                                        a(ng-click='$scope.ejectUser(student, "student")')
                                            span.glyphicon.glyphicon-remove-sign
            .col-md-6
                .panel.panel-default
                    .panel-heading
                        .row
                            .col-md-9
                                h3
                                    label Class Groups
                            .col-md-3
                                a.btn.btn-default(type='button', ng-click='$scope.unlockGroups()' ng-class='$scope.unlockedGroups ? "btn-success" : "btn-default"')
                                    span.glyphicon(ng-class='$scope.unlockedGroups ? "glyphicon-star" : "glyphicon-star-empty"')
                    .panel-body
                        div(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping')
                            p The groups help you to configure your users activities easely
                            .panel.panel-success
                                .panel-heading Add group to class
                                .panel-body
                                    label Group name:
                                        input.form-control(type='text' ng-model='$scope.group.name')
                                    a.btn.btn-success(type='button', ng-click='$scope.createGroup()')
                                        span.glyphicon.glyphicon-plus.right10
                        table.table.table-hover
                            thead
                                tr
                                    th Group
                                    th(ng-if='$scope.unlockedGroups') Use this groups in the class
                                    th Remove
                            tbody
                                tr(ng-if='$scope.classGroups.length == 0')
                                    td(colspan=6)
                                        div.alert.alert-warning(style='margin-bottom: 0px') No groups created yet
                                tr(ng-repeat='group in $scope.classGroups')
                                    td(ng-class='$scope.getGroupThClass(group)')
                                        a.btn(ng-click='$scope.selectGroup(group)') {{group.name}}
                                    td(ng-if='$scope.unlockedGroups')
                                        a.btn(ng-click='$scope.checkGroup(group)')
                                            span.glyphicon(ng-class='$scope.class.groups.indexOf(group._id)===-1 ? "glyphicon-unchecked" : "glyphicon-saved"')
                                    td(ng-show='$scope.selectedGrouping && !$scope.isInSelectedGrouping(group._id, "group")' ng-class='$scope.getGroupThClass(group)')
                                        a.btn(ng-click='$scope.modifyGrouping(group, true)')
                                            span.glyphicon.glyphicon-plus
                                    td(ng-show='$scope.selectedGrouping && $scope.isInSelectedGrouping(group._id, "group")' ng-class='$scope.getGroupThClass(group)')
                                        a.btn(ng-click='$scope.modifyGrouping(group, false)')
                                            span.glyphicon.glyphicon-minus
                                    td(ng-show='!$scope.selectedGrouping' ng-class='$scope.getGroupThClass(group)')
                                        a.btn(ng-click='$scope.removeGroup(group)')
                                            span.glyphicon.glyphicon-remove-sign
                .panel.panel-default
                    .panel-heading
                        .row
                            .col-md-9
                                h3
                                    label Class Groupings
                            .col-md-3
                                a.btn(type='button', ng-click='$scope.unlockGroupings()' ng-class='$scope.unlockedGroupings ? "btn-warning" : "btn-default"')
                                    span.glyphicon(ng-class='$scope.unlockedGroupings ? "glyphicon-star" : "glyphicon-star-empty"')
                    .panel-body
                        div(ng-show='!$scope.selectedGroup && !$scope.selectedGrouping')
                            p The groupings help you to configure your users activities grouping groups of participants
                            .panel.panel-warning
                                .panel-heading Add grouping to class
                                .panel-body
                                    label Grouping name:
                                        input.form-control(type='text' ng-model='$scope.grouping.name')
                                    a.btn.btn-warning(type='button', ng-click='$scope.createGrouping()')
                                        span.glyphicon.glyphicon-plus.right10
                        table.table.table-hover
                            thead
                                tr
                                    th Grouping
                                    th(ng-if='$scope.unlockedGroupings') Use this groupings in the class
                                    th Remove
                            tbody
                                tr(ng-if='$scope.classGroupings.length == 0')
                                    td(colspan=6)
                                        div.alert.alert-warning(style='margin-bottom: 0px') No groups created yet
                                tr(ng-class='$scope.selectedGrouping._id === grouping._id ? "bg-warning" : ""' ng-repeat='grouping in $scope.classGroupings')
                                    td
                                        a.btn(ng-click='$scope.selectGrouping(grouping)') {{grouping.name}}
                                    td(ng-if='$scope.unlockedGroupings')
                                        a.btn(ng-click='$scope.checkGrouping(grouping)')
                                            span.glyphicon(ng-class='$scope.class.groupings.indexOf(grouping._id)===-1 ? "glyphicon-unchecked" : "glyphicon-saved"')
                                    td
                                        a(ng-click='$scope.removeGrouping(grouping)')
                                            span.glyphicon.glyphicon-remove-sign