app/views/view/classactivity.jade
//-
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