unserver-unify/src/app/course/mycourse.html

<div class="myspace_cntnr" ng-controller="CourseUserResultCtrl as ctrl">
  <!-- tabs -->
  <div class="container">
    <div class="tag-box">
      <div class="col-md-9 col-md-offset-3 padding-left-0" ng-init="showTab='dashboard'">
        <div class="margin-bottom-15"></div>
        <h2 style="width: 75%; float: left; margin: 0">{{ctrl.course.name}}</h2>

        <button class="btn btn-u pull-right" ng-click="ctrl.gotoCourse()" translate>Learn Course</button>

        <ul class="middle_tab tab_wdth" >
          <li ng-class="(showTab == 'dashboard'||showTab == 'task')?'active':''">
            <a data-toggle="tab" ng-click="showTab = 'dashboard'">
              {{ 'Dashboard' | translate}}
            </a>
          </li>
          <li ng-class="(showTab == 'assignment')?'active':''">
            <a data-toggle="tab" ng-click="showTab = 'assignment'">
              {{ 'Assignment' | translate}}
            </a>
          </li>
          <li ng-class="(showTab == 'exam')?'active':''">
            <a data-toggle="tab" ng-click="showTab = 'exam'">
              {{ 'Exam' | translate}}
            </a>
          </li>
          <li ng-class="(showTab == 'errorbank')?'active':''">
            <a data-toggle="tab" ng-click="showTab = 'errorbank'">
              {{ 'Error Bank' | translate}}
            </a>
          </li>
          <li ng-class="(showTab == 'knowledge')?'active':''">
            <a data-toggle="tab" ng-click="showTab = 'knowledge'">
              {{ 'Knowledge' | translate}}
            </a>
          </li>
          <li ng-class="(showTab == 'certificate')?'active':''">
            <a data-toggle="tab" ng-click="showTab = 'certificate'">
              {{ 'Certificate' | translate}}
            </a>
          </li>
          <li ng-class="(showTab == 'knowledgechart')?'active':''">
            <a data-toggle="tab" ng-click="showTab = 'knowledgechart'">
              {{ 'Knowledge Chart' | translate}}
            </a>
          </li>
        </ul>
      </div>
      <!-- Left container Starts -->
      <div class="col-md-3 padding-left-0">
        <div class="my_course_sidebar" style="margin-top: -93px">
          <div class="profile sidebar no-wrap">
            <div class="panel margin-bottom-20">
              <div class="panel-heading overflow-h" style="padding-top: 0;">
                <h2 class="panel-title heading-sm pull-left">
                  <i class="fa fa-tasks">
                  </i>
                  <span translate="">To DO</span>
                </h2>
              </div>
              <ul>
                <li ng-if="ctrl.topTasks.assignments.length == 0 && ctrl.topTasks.exams.length == 0" class="profile-event text-center" style="color:#e67e22; padding-bottom: 10px;">{{ {eng:'No task to do this week',chn:'本周没有任务'} | trans }}
                </li>
                <li class="profile-event" ng-repeat="item in ctrl.topTasks.assignments">
                  <a >
                    <i class="fa fa-tasks">&nbsp;</i>{{item.title}}
                  </a>
                </li>
                <li class="profile-event" ng-repeat="item in ctrl.topTasks.exams">
                  <a >
                    <i class="fa fa-check-square-o">&nbsp;</i>{{item.name}}
                  </a>
                </li>
                <!-- <li class="profile-event text-center" style="color:#e67e22; padding-bottom: 10px;" translate="">No task pending</li> -->
              </ul>
              <div class="clearfix"></div>
            </div>
          </div>
          <div class="profile sidebar no-wrap">
            <div class="panel margin-bottom-20">
              <div class="panel-heading overflow-h">
                <h2 class="panel-title heading-sm pull-left">
                  <i class="fa fa-calendar-o">
                  </i>
                  <span translate="" class="ng-scope">This Week</span>
                </h2>
              </div>
              <ul>
                <li class="profile-event text-center" style="color:#e67e22; padding-bottom: 10px;" ng-if="!ctrl.weeks||ctrl.weeks.length<1" translate="">No events this week</li>
              </ul>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- Left container Ends -->
      <!-- Right container Starts -->
      <div class="col-md-9 col-xs-12 myspace_right padding-left-0">
        <div class="panel panel-body" style="padding:10px 0 0; margin-bottom: 0;">
          <div class="relative">
           <!-- Dashboard Starts -->
            <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'dashboard'||showTab=='task'}">
            <div class="myspace_hed">
              {{ {eng:'Recent activity',chn:'近期任务'} | trans }}
            </div>
              <div class="no_record" translate="" ng-if="ctrl.topTasks.assignments.length == 0 && ctrl.topTasks.exams.length == 0" style="margin-bottom: 0; position: relative; top:25px">
                {{ {eng:'No Recent activities',chn:'近期没有任务'} | trans }}
              </div>
              <uib-accordion class="acc-v1 faq my_course accordian" style="margin-top:30px; float:left; width:100%;" ng-if="ctrl.topTasks.assignments.length > 0 || ctrl.topTasks.exams.length > 0">
                <div class="panel-default accordian_container new" heading="Dynamic Body Content" is-open="status.isCustomHeaderOpen" uib-accordion-group="" ng-if="ctrl.topTasks.assignments.length > 0">
                  <uib-accordion-heading>
                    <h4 class="panel-title">
                      <i class="fa fa-tasks fa-3x">&nbsp;</i>
                      <span translate="">Assignment</span>&nbsp;&nbsp;|&nbsp;&nbsp;{{ctrl.topTasks.assignmentCounter}}
                    </h4>
                    <i class="pull-right fa" ng-class="{'fa-angle-down': status.isCustomHeaderOpen, 'fa-angle-right': !status.isCustomHeaderOpen}">
                    </i>
                  </uib-accordion-heading>
                  <ul>
                    <li ng-repeat='item in ctrl.topTasks.assignments'>
                      <a ui-sref="index.myspace.assignments.detail({ aid: item._id })">{{item.title}}</a>
                    </li>
                  </ul>
                  <a href="" class="pull-right" data-toggle="tab" ng-click="changeTab('assignment');">View all <i class="fa fa-angle-right"></i></a>
                  <div class="margin-bottom-5"></div>
                </div>
                <div class="panel-default accordian_container" heading="Dynamic Body Content" is-open="status.isCustomHeaderOpen" uib-accordion-group="" ng-if="ctrl.topTasks.exams.length > 0">
                  <uib-accordion-heading>
                    <h4 class="panel-title">
                      <i class="fa fa-check-square-o fa-3x">&nbsp;</i><span translate="">Exam</span>&nbsp;&nbsp;|&nbsp;&nbsp;{{ctrl.topTasks.examCounter}}
                    </h4>
                    <i class="pull-right fa" ng-class="{'fa-angle-down': status.isCustomHeaderOpen, 'fa-angle-right': !status.isCustomHeaderOpen}">
                    </i>
                  </uib-accordion-heading>
                  <ul>
                    <li ng-repeat="item in ctrl.topTasks.exams">
                      <a examid="{{item._id}}" redirect-to-exam="">{{item.name}}</a>
                    </li>
                  </ul>
                  <a href="" class="pull-right" data-toggle="tab" ng-click="changeTab('exam');">View all <i class="fa fa-angle-right"></i></a>
                  <div class="margin-bottom-5"></div>
                </div>
              </uib-accordion>
              <div class="clearfix"></div>
            </div>
            <!-- Dashboard Ends -->
            <!-- Assignment Starts -->
            <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'assignment'}">
              <table class="table table-bordered table-striped table-hover">
                <tr>
                  <th style="min-width: 2%" translate="">
                    Status
                  </th>
                  <th translate="myspace.exam.assign.name">
                    Name
                  </th>
                  <th translate="">
                    Exam Knowledge
                  </th>
                  <th translate="">
                    Start Time
                  </th>
                  <th translate="">
                    End Time
                  </th>
                  <th translate="">
                    Status
                  </th>
                </tr>
                <tr ng-repeat="exam in assignmentitems | filter : { donecount : q}">
                  <td class="text_indent10" style="width: 2%">
                    <i class="fa fa-lock" ng-if="!exam.publish">
                    </i>
                    <i class="fa fa-unlock" ng-if="exam.publish" style="color:#81A6C6;">
                    </i>
                  </td>
                  <td style="width: 10%">
                    <a ng-if="exam.publish" ui-sref="index.myspace.assignments.detail({ aid: exam._id })">
                      <strong>
                        {{ exam.title }}
                      </strong>
                    </a>
                    <strong ng-if="!exam.publish">
                      {{ exam.title }}
                    </strong>
                  </td>
                  <td style="width: 10%">
                    {{exam.knowledge}}
                  </td>
                  <td style="width: 10%">
                    {{exam.start | date:'mediumDate'}}
                  </td>
                  <td style="width: 10%">
                    {{exam.stop | date:'mediumDate'}}
                  </td>
                  <td style="width: 10%">
                    <span class="btn-u btn-u-red btn-xs" ng-if="!exam.donecounter&&!exam.commentscounter" translate="">
                      OUTSTANDING
                    </span>
                    <span class="btn-u btn-u-orange btn-xs" ng-if="exam.donecounter && !exam.commentscounter ">
                      {{'REVIEWING' | translate}}
                    </span>
                    <span class="btn-u btn-u-blue btn-xs" ng-if="exam.commentscounter">
                      {{ {eng:'COMPLETED', chn:'已批阅'}| trans}}
                    </span>
                  </td>
                </tr>
              </table>
            </div>
            <!-- Assignment Ends -->
            <!-- Exam Starts -->
            <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'exam'}">
              <table class="table table-bordered table-striped table-hover" st-pipe="ctrl.getexamitems" st-table="examitems">
                <tr>
                  <th style="min-width: 2%" translate="">
                    Status
                  </th>
                  <th st-sort="name" translate="">
                    Name
                  </th>
                  <th st-sort="description" translate="">
                    Description
                  </th>
                  <th st-sort="knowledge" translate="">
                    Exam Knowledge
                  </th>
                  <th st-sort="start" translate="">
                    Start Time
                  </th>
                  <th st-sort="stop" translate="">
                    End Time
                  </th>
                  <th translate="">
                    Status
                  </th>
                </tr>
                <tr ng-repeat="exam in examitems">
                  <td class="text_indent10" style="width: 2%">
                    <i class="fa fa-lock" ng-if="!exam.publish">
                    </i>
                    <i class="fa fa-unlock" ng-if="exam.publish" style="color:#81A6C6;">
                    </i>
                  </td>
                  <td style="width: 10%">
                    <a examid="{{exam._id}}" ng-if="exam.publish" redirect-to-exam="">
                      <strong>
                        {{ exam.name }}
                      </strong>
                    </a>
                    <strong ng-if="!exam.publish">
                      {{ exam.name }}
                    </strong>
                  </td>
                  <td style="width: 15%">
                    {{exam.description}}
                  </td>
                  <td style="width: 10%">
                    {{exam.knowledge}}
                  </td>
                  <td style="width: 10%">
                    {{exam.start | date:'mediumDate'}}
                  </td>
                  <td style="width: 10%">
                    {{exam.stop | date:'mediumDate'}}
                  </td>
                  <td style="width: 10%">
                    <button class="btn-u btn-u-blue btn-xs" ng-if="exam.mycount">
                      {{'COMPLETED' | translate}}
                    </button>
                    <button class="btn-u btn-u-red btn-xs" ng-if="!exam.mycount||exam.mycount == 0" translate="">
                      OUTSTANDING
                    </button>
                  </td>
                </tr>
                <tr>
                  <td colspan="8" style="text-align:right">
                    <div st-items-by-page="10" st-pagination="">
                    </div>
                  </td>
                </tr>
              </table>
            </div>
            <!-- Exam Ends -->
            <!-- errorbank Starts -->
            <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'errorbank'}">
              <div ng-include src="'app/course/errorbank.html'"></div>
              <div class="clearfix"></div>
            </div>
            <!-- errorbank Ends -->
            <!-- knowlede Starts -->
            <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'knowledge'}">
              <div ng-include src="'app/course/knowledge/knowledges.html'"></div>
              <div class="clearfix"></div>
            </div>
            <!-- knowlede Ends -->
            <!-- certificate Starts -->
            <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'certificate'}">
              <!-- Block Starts -->
              <div class="margin-bottom-50">
                <!--  <div class="headline">
                <h4>
                  {{'Certificates'|translate}}
                </h4>
              </div> -->
                <div class="row">
                  <div class="col-md-10">
                    <div class="row">
                      <div class="col-md-12">
                        <h5 ng-if="haveCERT">
                          <b>
                            {{ {eng:'CONGRATULATIONS! :',chn:'祝贺！'} | trans }}
                          </b>
                          <span>
                            {{'You have successfully completed:' | translate}}
                            <b>
                              {{ctrl.course.name}}
                            </b>
                          </span>
                        </h5>
                        <h5 ng-if="!haveCERT">
                          <b>
                            {{ {eng:'Sorry! :',chn:'很抱歉！'} | trans }}
                          </b>
                          <span>
                            {{ {eng:'You have not successfully completed :',chn:'您还未完成课程：'} | trans }}
                            <b>
                              {{ctrl.course.name}}
                            </b>
                          </span>
                        </h5>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2">
                    <a class="btn btn-u btn-sm btn-success pull-right" id="downloadbtn" ng-click="ctrl.DownloadCertificate()" ng-if="haveCERT">
                      <i class="fa fa-download">
                      </i>
                      {{'Download Certificate'|translate}}
                    </a>
                  </div>
                </div>
              </div>
              <!-- Block Ends -->
              <div class="certificate">
                <canvas height="1055" id="canvas" ng-show="haveCERT" style="margin:0;" width="1481">
                </canvas>
              </div>
            </div>
            <!-- certificate Ends -->
            <!-- Knowledge chart -->
            <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'knowledgechart'}">
              <!-- Block Starts -->
              <div class="margin-bottom-50">
                <div class="headline">
                <input ng-model="ctrl.onlyweak" ng-change="ctrl.showKnowledge()" type="checkbox"/>
                  {{ 'Show Weak items only' | translate }}
                </div>
                <div class="row" ng-if="ctrl.showChart">
                  <canvas chart-data="ctrl.chartData" chart-legend="radarChart" chart-options="chartOptions" fullscreen="" id="knowledge_radar_chart" tc-chartjs-radar="">
                  </canvas>
                </div>
              </div>
            </div> 
            <!-- Knowledge chart -->
          </div>
        </div>
      </div>
      <div class="clearfix"></div>
      <!-- Right container Starts -->
    </div>
    <div class="clearfix"></div>
  </div>
</div>