unserver-unify/src/app/mystudy/mycourses.html

<div class="tab-v1" ng-controller="MyCoursesCtrl as ctrl">
  <div class="col-md-12">
    <!-- tabs -->
    <ul class="nav nav-tabs mobile_tab tab2" ng-init="ctrl.tabname = 'mycourse'">
      <li class="active">
        <a data-toggle="tab" ng-click="ctrl.tabname = 'mycourse'">
          <i class="fa fa-book"></i>
          {{ 'Ongoing Courses' | translate}}
          <span class="badge badge-warning rounded-2x">
            {{ctrl.totalCount}}
          </span>
        </a>
      </li>
      <li  ng-if="ctrl.toEnrolls.length">
        <a data-toggle="tab" ng-click="ctrl.tabname = 'toenroll'">
          <i class="fa fa-book"></i>
          {{ 'Ready to study' | translate}}
          <span class="badge badge-warning rounded-2x">
            {{ctrl.toEnrolls.length || 0}}
          </span>
        </a>
      </li>
      <li   ng-if="ctrl.upComings.length">
        <a data-toggle="tab" ng-click="ctrl.tabname = 'upcomingcourses'">
          <i class="fa fa-book"></i>
          {{ 'Up Coming' | translate}}
          <span class="badge badge-warning rounded-2x">
            {{ctrl.upComings.length || 0}}
          </span>
        </a>
      </li>
      <!--li>
        <a data-toggle="tab" ng-click="ctrl.tabname = 'bookmark'">
          <i class="fa fa-bookmark"></i>
          {{ 'My Bookmark' | translate}}
          <span class="badge badge-warning rounded-2x">
            {{totalbookedCourses || 0}}
          </span>
        </a>
      </li -->
      <li>
        <a data-toggle="tab" ng-click="ctrl.tabname = 'completedcourses'">
          <i class="fa fa-certificate"></i>
          {{ 'Completed Courses' | translate}}
          <span class="badge badge-warning rounded-2x">
             {{ctrl.totalcompletedrecords || 0}}
          </span>
        </a>
      </li>
    </ul>
    <div class="margin-bottom-10"></div>
  </div>
  <div class="tab-content">
    <div ng-class="{'profile-edit tab-pane fade':true, 'in active':ctrl.tabname == 'mycourse'}">
      <div class="col-lg-12 col-xs-12 forum">
        <div class="tab_top_button">
          <a class="btn btn-danger btn-sm" ng-click="ctrl.enableDeleteMode()" ng-if="loginService.school.homepage!='genx' && (ctrl.items | notEmpty)" translate="">
            Remove Course
          </a>
          <!--a class="btn btn-warning btn-xs">
            <i class="fa fa-filter">&nbsp;</i>
            Show completed 
          </a -->
        </div>
        <div class="clearfix">
        </div>
        <!-- view for empty mycourse page -->
        <div ng-if="ctrl.items | isEmpty" class="no_record">
          <div class="col-md-8 col-md-offset-2">
            <div class="error-v1">
              <span>
                {{ { eng : 'You did not join any course, please contact your class/course teacher if you cannot see your course', chn: '你还未报名任何课程。如果你没有看到你已报名的课程，请联系班级/课程老师。' } | trans }}
              </span>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- view for not empty mycourse page -->
        <div ng-if="ctrl.items | notEmpty">
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" current-page="ctrl.currentPage" dir-paginate="item in ctrl.items | itemsPerPage: ctrl.pageSize" pagination-id="courselist" total-items="ctrl.totalCount">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing relative">
                <div class="ribbon" ng-if="item.info && item.info.required"><span>Required</span></div>
                <div class="ribbon blue" ng-if="item.info && !item.info.required"><span>Elective</span></div>
                <a class="btn-u btn-u-red btn-xs" style="position: absolute; z-index: 100; right: 19px; top: 5px; border-radius: 15px !important;" ng-click="ctrl.deleteCourse(item._id)" ng-if="ctrl.deleteMode&&item.myCourseFlag">
                  <i class="fa fa-times"></i>
                </a>
                <span class="new_course" ng-if="item.newflag" translate="">
                  New Course
                </span>
                <div class="thumbnail-img">
                  <div class="overflow-hidden text-center">
                    <a ng-click="ctrl.gotocourse(item._id)" style="cursor: pointer;">
                      <img alt="{{ item.name }}" class="img-responsive" ng-src="{{item.photo? ctrl.coursePhotoUrl+item._id +'/'+ item.photo : (item.mvpic? ctrl.subjectPicUrl+ item.mvpic :ctrl.defaultpic)}}" style="height:135px; " title="{{ item.name }}"/>
                    </a>
                    <span class="badge badge-warning list_micro" ng-if="item.singlesection">
                      {{'Micro'|translate}}
                    </span>
                    <a class="btn-more hover-effect">
                      <span class="btn-more prvt_btn" ng-if="item.privacy!='public'" translate="">
                        Private ...
                      </span>
                    </a>
                  </div>
                </div>
                <div class="caption overflow-hidden clst" style="height: 30px; margin-bottom: 5px;">
                  <h3>
                    <a class="line-ellipsis" ng-click="ctrl.gotocourse(item._id)" style="cursor: pointer;">
                      <strong>
                        {{ item.name }}
                      </strong>
                    </a>
                  </h3>
                </div>
                <div style="min-height:23px;">
                  <div class=" col-lg-12 no-padding" style="margin-top:3px;">
                    <div ng-if="item.progress && item.progress != 0">
                      <hr style="margin: 0 0 5px 0;">
                      <b class="font-12" translate="">Progress</b>
                      <div class="progress progress-u progress-xs">
                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="{{item.progress}}" class="progress-bar progress-bar-info" role="progressbar" style="width: {{item.progress}}%; float: left; height: 10px;">
                        </div>
                      </div>
                      <span class="font-12">{{item.progress}}% {{'Completed' | translate}}</span>
                      <a class="btn btn-info btn-xs pull-right" translate="" style="margin-top: 3px;" ng-click="ctrl.gotoCourseResult(item._id)">View</a>
                    </div>
                    <div ng-if="!item.progress">
                      <hr style="margin: 0 0 5px 0;">
                      <b class="font-12" translate="">Progress</b>
                      <div class="progress progress-u progress-xs">
                        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" class="progress-bar progress-bar-info" role="progressbar" style="width:0%">
                        </div>
                      </div>
                      <a ng-click="ctrl.gotocourse(item._id)" translate="">To be started</a>
                      <a class="btn btn-info btn-xs pull-right" translate="" style="margin-top: 3px;" ng-click="ctrl.gotoCourseResult(item._id)">View</a>
                    </div>
                  </div>
                  <!--a ng-if="!ctrl.deleteMode" ui-sref="index.courses.cours({ cid: item._id })">
                    {{ { eng : 'Start', chn : '浏览课程'} | trans }}
                  </a-->
                  <!-- <a ng-if="ctrl.deleteMode&&!item.myCourseFlag">
                    .
                  </a> -->
                </div>
                <div class="clearfix"></div>
              </div>
            </div>
          </div>
          <div class="tag-box tag-box-v6 margin-bottom-20 text-right clearfix">
            <span class="text-right">
              <dir-pagination-controls boundary-links="true" class="with-others " on-page-change="ctrl.pageChanged(newPageNumber)" pagination-id="courselist" template-url="components/content/dirPagination.tpl.html">
              </dir-pagination-controls>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="row" ng-class="{'profile-edit tab-pane fade':true, 'in active':ctrl.tabname == 'toenroll'}">
      <div class="col-lg-12 col-xs-12 forum">
        <!-- view for not empty Upcoming Course page -->
        <div ng-if="ctrl.toEnrolls | notEmpty">
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" ng-repeat="item in ctrl.toEnrolls">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden">
                <span class="new_course" translate="">
                  New Course
                </span>
                <div class="thumbnail-img">
                  <div class="overflow-hidden text-center">
                    <a ng-click="ctrl.gotocourse(item._id)" style="cursor: pointer;">
                      <img alt="{{ item.name }}" class="img-responsive" ng-src="{{item.photo? ctrl.coursePhotoUrl+item._id +'/'+ item.photo : (item.mvpic? ctrl.subjectPicUrl+ item.mvpic :ctrl.defaultpic)}}" style="height:135px; " title="{{ item.name }}"/>
                    </a>
                    <span class="badge badge-warning list_micro" ng-if="item.singlesection">
                      {{'Micro'|translate}}
                    </span>
                    <a class="btn-more hover-effect">
                      <span class="btn-more prvt_btn" ng-if="item.privacy!='public'" translate="">
                        Private ...
                      </span>
                    </a>
                  </div>
                </div>
                <div class="caption overflow-hidden clst" style="height: 60px; margin-bottom: 5px;">
                  <h3>
                    <a class="line-ellipsis" ng-click="ctrl.gotocourse(item._id)" style="cursor: pointer;">
                      <strong>
                        {{ item.name }}
                      </strong>
                    </a>
                  </h3>
                  <p>
                    {{ item.description }}
                  </p>
                  <a class="btn-u btn-u-red btn-xs pull-right" ng-click="ctrl.deleteCourse(item._id)" ng-if="ctrl.deleteMode&&item.myCourseFlag" translate="">
                    Remove
                  </a>
                </div>
                <div style="height:0;border-top:1px solid Gainsboro;font-size:0;">
                  -
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row" ng-class="{'profile-edit tab-pane fade':true, 'in active':ctrl.tabname == 'upcomingcourses'}">
      <div class="col-lg-12 col-xs-12 forum">
        <!-- view for not empty Upcoming Course page -->
        <div ng-if="ctrl.upComings | notEmpty">
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" ng-repeat="item in ctrl.upComings">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden">
                <div class="thumbnail-img">
                  <div class="overflow-hidden text-center">
                    <a ui-sref="index.courses.info({cid:item._id})" style="cursor: pointer;">
                      <img alt="{{ item.name }}" class="img-responsive" ng-src="{{item.photo? ctrl.coursePhotoUrl+item._id +'/'+ item.photo : (item.mvpic? ctrl.subjectPicUrl+ item.mvpic :ctrl.defaultpic)}}" style="height:135px; " title="{{ item.name }}"/>
                    </a>
                    <span class="badge badge-warning list_micro" ng-if="item.singlesection">
                      {{'Micro'|translate}}
                    </span>
                    <a class="btn-more hover-effect">
                      <span class="btn-more prvt_btn" ng-if="item.privacy!='public'" translate="">
                        Private ...
                      </span>
                    </a>
                  </div>
                </div>
                <div class="caption overflow-hidden clst" style="height: 60px; margin-bottom: 5px;">
                  <h3>
                    <a class="line-ellipsis" ui-sref="index.courses.info({cid:item._id})" style="cursor: pointer;">
                      <strong>
                        {{ item.name }}
                      </strong>
                    </a>
                  </h3>
                  <p>
                    {{ item.description }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--div ng-class="{'profile-edit tab-pane fade':true, 'in active':ctrl.tabname == 'bookmark'}" ng-controller="MyFavouriteCtrl as ctrl">
    

      <div ng-if="!ctrl.favCourseList" class="no_record" translate="">
          No Record
      </div>

      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" ng-repeat="course in ctrl.favCourseList">
          <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden">
            <div class="thumbnail-img">
              <a style="cursor: pointer;" title="{{ course.name }}" ui-sref="{{course.url}}">
                <img ng-src="{{ course.photo ? course.coursePhotoUrl : ctrl.defaultpic}}" style="height:150px; width:100%" title="{{course.name}}"/>
              </a>
            </div>
            <div class="caption" style="height:91px;overflow:hidden; margin:0;">
              <h5 style="height:50px">
                <a title="{{ news.name }}" ui-sref="{{course.url}}">
                  <strong>
                    {{course.name}}
                  </strong>
                </a>
              </h5>
              <button class="btn-u btn-u-red btn-xs pull-right" ng-click="ctrl.deleteFromFav(course)" translate="">
                Remove
              </button>
              <div class="clearfix">
              </div>
            </div>
            <div class="clearfix">
            </div>
          </div>
        </div>
      </div>
    </div -->
    <div ng-class="{'profile-edit tab-pane fade':true, 'in active':ctrl.tabname == 'completedcourses'}">
      <div class="col-lg-12 col-xs-12 forum">
        <div ng-if="ctrl.completedCourses | isEmpty" class="no_record">
          <span>
            {{ { eng : 'You have not completed any course', chn: '你还没有完成任何课程' } | trans }}
          </span>
          <div class="clearfix"></div>
        </div>
        <!-- view for not empty mycourse page -->
        <div ng-if="ctrl.completedCourses | notEmpty">
          <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" current-page="ctrl.currentCompletedPage" dir-paginate="item in ctrl.completedCourses | itemsPerPage: ctrl.pageSize" pagination-id="completedlist" total-items="ctrl.totalcompletedrecords">
              <div class="thumbnails thumbnail-style thumbnail-kenburn new_listing overflow-hidden">
                <div class="thumbnail-img">
                  <div class="overflow-hidden text-center">
                    <a ng-click="ctrl.gotocourse(item.courseId)" style="cursor: pointer;">
                      <img alt="{{ item.courseName }}" class="img-responsive" ng-src="{{item.course.photo? ctrl.coursePhotoUrl+item.course._id +'/'+ item.course.photo : (item.mvpic? ctrl.subjectPicUrl+ item.mvpic :ctrl.defaultpic)}}" style="height:135px; " title="{{ item.courseName }}"/>
                    </a>
                  </div>
                </div>
                <div class="caption overflow-hidden clst" style="height: 30px; margin-bottom: 5px;">
                  <h3>
                    <a class="line-ellipsis" ng-click="ctrl.gotocourse(item.courseId)" style="cursor: pointer;">
                      <strong>
                        {{ item.courseName }}
                      </strong>
                    </a>
                  </h3>
                </div>
              </div>
            </div>
          </div>
          <div class="tag-box tag-box-v6 margin-bottom-20 text-right clearfix">
            <span class="text-right">
              <dir-pagination-controls boundary-links="true" class="with-others " on-page-change="ctrl.pageCompletedChanged(newPageNumber)" pagination-id="completedlist" template-url="components/content/dirPagination.tpl.html">
              </dir-pagination-controls>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</div>