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

<div class="info_page" ng-controller="CourseInfoCtrl as ctrl">
  <!-- Original code -->
  <div class="col-md-12">
    <div class="tag-box">
      <div class="theme_red">
        <div class="row">
          <div class="col-md-5">
            <!-- show video if video available -->
            <div class="media_container">
              <div class="inner_content" ng-if="ctrl.course">
                <img ng-if="!ctrl.course.video && !ctrl.course.youtube" ng-src="{{ctrl.course.photo? ctrl.coursePhotoUrl  + ctrl.course.photo :ctrl.imgdefault }}" style="float:left; width:100%;" title="{{ ctrl.course.name }}"/>
              </div>
              <div class="videogular-container" ng-if="ctrl.course.video">
                <videogular vg-theme="ctrl.outlinemp4config.theme">
                  <vg-media vg-src="ctrl.outlinemp4config.sources">
                  </vg-media>
                  <vg-controls vg-autohide="true" vg-autohide-time="1000">
                    <vg-play-pause-button>
                    </vg-play-pause-button>
                    <vg-time-display>
                      {{ currentTime | date:'mm:ss' }}
                    </vg-time-display>
                    <vg-scrub-bar>
                      <vg-scrub-bar-current-time>
                      </vg-scrub-bar-current-time>
                    </vg-scrub-bar>
                    <vg-time-display>
                      {{ totalTime | date:'mm:ss' }}
                    </vg-time-display>
                    <vg-volume>
                      <vg-mute-button>
                      </vg-mute-button>
                      <vg-volume-bar>
                      </vg-volume-bar>
                    </vg-volume>
                    <vg-fullscreen-button>
                    </vg-fullscreen-button>
                  </vg-controls>
                  <vg-buffering>
                  </vg-buffering>
                  <vg-overlay-play>
                  </vg-overlay-play>
                </videogular>
              </div>
              <div class="videoWrapper" ng-if="ctrl.course.youtube">
                <iframe ng-src="{{youtubeUrl}}">
                </iframe>
              </div>
            </div>
          </div>
          <div class="col-md-7">
            <div class="forum">
              <div class="margin-bottom-10 clearfix blog-info">
                <strong>
                  {{ ctrl.course.name }}
                </strong>
                <div class="clearfix"></div>
              </div>
              <div class="clearfix"></div>
              <span class="date_sml_aln" title="Submit">
                <span class="clr_chng" translate="">
                  Last Update
                </span> : {{ ctrl.course.update||ctrl.course.created | date: 'yyyy-MM-dd' }}
              </span>
              <span>
                <span class="color-blue">{{'Views' | translate}}:</span>
                {{ctrl.course.visitercounter}}&nbsp;&nbsp;
                <span ng-if="loginService.subDomain != 'caregiverasia'">
                <span class="color-blue">{{'Enrolled Students' | translate}}:</span>
                  {{ ctrl.course.enrolledcounter||0 }}&nbsp;&nbsp;
                </span>
              </span>
              <div class="margin-bottom-5"></div>
              <span class="avrg_aln">
                <div class="average" ng-if="averageRating">
                  <average-star-rating max="5" rating-value="averageRating">
                  </average-star-rating>
                  <span>
                    {{ averageRating }}/5
                  </span>
                  <span class="list_reviews ng-binding">
                    <a ng-click="ctrl.getAssessmentResult()">
                      ({{ ctrl.course.ratingcounter }} {{ 'reviews'|translate }})
                    </a>
                  </span>
                </div>
                <span class="average dummy_avg" ng-if="!averageRating">
                  <div class="average-rating-container">
                    <ul class="rating background">
                      <li class="star">
                        <i class="fa fa-star">
                        </i>
                      </li>
                      <li class="star">
                        <i class="fa fa-star">
                        </i>
                      </li>
                      <li class="star">
                        <i class="fa fa-star">
                        </i>
                      </li>
                      <li class="star">
                        <i class="fa fa-star">
                        </i>
                      </li>
                      <li class="star">
                        <i class="fa fa-star">
                        </i>
                      </li>
                    </ul>
                  </div>
                  <span class="list_reviews ng-binding">
                    <a ng-click="ctrl.getAssessmentResult()">
                      (0 {{ 'reviews'|translate }})
                    </a>
                  </span>
                </span>
                <a class="btn btn-u rev_but" ng-click="ctrl.review()" ng-if="ctrl.showassessment&&!ctrl.editable" translate="">
                  Review
                </a>
              </span>
              <div class="margin-bottom-20"></div>
              <div class="clamped clamped-4">
                <p ng-model="ctrl.course.detail" ta-bind=""></p>
              </div>
              <div class="margin-bottom-10"></div>
              <div ng-if="ctrl.mycourseFlag || !ctrl.mycourseFlag">
                <div class="info_purchase text-left">
                  <span ng-if="ctrl.futureFlag">
                    <em translate>Start Soon!</em>  {{ctrl.course.start|date:medium}}
                  </span>
                  <span ng-if="!ctrl.mycourseFlag">
                    <div ng-if="ctrl.course.privacy=='fee' && !loginService.school.disableAdminStudy">
                      <div class="pricing_info">
                        <div class="cf_info">
                          <div class="product_price detail" ng-if="ctrl.course.price">
                            ${{ctrl.course.price}}
                          </div>
                          <div class="cf_text" ng-if="!ctrl.course.price">
                            Free
                          </div>
                        </div>
                      </div>
                      <button class="btn btn-info btn-bg" ng-if="loginService.isLogged" ng-click="ctrl.paypalPurchase()">
                         {{'Buy Now'|translate}}
                      </button>
                      <button class="btn btn-info btn-bg" ng-if="loginService.isLogged&&ctrl.course.couponExist" ng-click="ctrl.applybyCoupon()">
                         {{'Buy by Coupon'|translate}}
                      </button>
                      <span ng-controller="LoginCtrl as lctrl" ng-if="!loginService.isLogged">
                        <button class="btn btn-info btn-bg" ng-click="lctrl.showCourseLoginDialog()">
                           {{'Buy Now'|translate}}
                        </button>
                      </span>
                    </div>
                    <span ng-if="loginService.isLogged && ctrl.course.privacy!='fee' && !loginService.school.disableAdminStudy">
                      <button ng-if="!ctrl.enrollinprocess" class="btn btn-info btn-bg" ng-click="ctrl.enroll()" translate>
                        Enroll Now
                      </button>
                      <span ng-if="ctrl.enrollinprocess" class="pending_alert" translate>
                        Pending for approval!
                      </span>
                    </span>
                  </span>
                  <span ng-if="ctrl.mycourseFlag&&!ctrl.futureFlag&&!loginService.school.disableAdminStudy">
                    <button class="btn btn-info" translate="" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.courses.course({cid:ctrl.id,cs:getCheckSum(ctrl.id)})">
                      Enter
                    </button>
                  </span>

                  <span ng-if="!loginService.isLogged  && ctrl.course.privacy!='fee' && !loginService.school.disableAdminStudy" ng-controller="LoginCtrl as lctrl">
                    <button class="btn btn-info btn-bg" ng-click="lctrl.showCourseLoginDialog()" translate>
                      Enroll Now
                    </button>
                  </span>
                </div>
                <div class="clearfix">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="tag-box">
      <div class="col-md-12">
        <div>
          <div class="heading_align">
            <div class="inner_content" ng-if="ctrl.course.outcome">
              <h5>
                Outcome
              </h5>
              <div class="margin-bottom-20" ng-model="ctrl.course.outcome" ta-bind="">
              </div>
            </div>
            <div class="inner_content" ng-if="ctrl.course.designedfor">
              <h5>
                Designed for
              </h5>
              <div class="margin-bottom-20" ng-model="ctrl.course.designedfor" ta-bind="">
              </div>
            </div>
            <div class="inner_content" ng-if="ctrl.course.coverage">
              <h5>
                Coverage
              </h5>
              <div class="margin-bottom-20" ng-model="ctrl.course.coverage" ta-bind="">
              </div>
            </div>
            <div class="inner_content" ng-if="ctrl.course.venue">
              <h5>
                Venue
              </h5>
              <i class="fa fa-map-marker color-green pull-left" style="position:relative; top:3px;">
              </i>
              <div class="pull-left" ng-model="ctrl.course.venue" ta-bind="">
              </div>
            </div>
            <div class="clearfix margin-bottom-20">
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12 col-xs-12 no-padding">
        <div class="headline">
          <h4 translate="">
            Contents
          </h4>
        </div>
        <div style="margin-left:15px; background:transparent; border:none;" ng-if="tablelist.length == 0" class="no_record margin-bottom20" translate="">
          Content Under Construction
        </div>
        <div class="margin-bottom20" ng-if="tablelist | notEmpty">
          <ul class="profile crsr">
            <li class="profile-post {{ctrl.getlistcolor($index,item.level)}}" ng-class="{active:showSec ==  item,'second-level': item.level,'': !item.level,'disabled':ctrl.futureFlag}" ng-click="ctrl.handleContentClick()" ng-repeat="item in tablelist">
              <div class="news-title" ng-if="item.id">
                <span class="profile-post-numb">
                  {{ item.idx }}
                </span>
                <div class="profile-post-in">
                  <h3 class="heading-xs">
                    {{ item.title }}
                  </h3>
                  <p>
                    {{item.description ? item.description : item.title}}
                  </p>
                </div>
              </div>
              <div ng-if="!item.id">
                <span class="profile-post-numb">
                  {{ item.idx }}
                </span>
                <div class="profile-post-in">
                  <h3 class="heading-xs">
                    {{ item.title }}
                  </h3>
                  <p>
                    {{item.description ? item.description : item.title}}
                  </p>
                </div>
              </div>
            </li>
          </ul>
          <div class="clearfix">
          </div>
        </div>
      </div>
      <!-- <div class="col-lg-12 col-xs-12 no-padding" ng-if="!tablelist||tablelist.length<1 && !_user ">
        <div class="headline">
          <h4 translate="">
            Please login to get more Info!
          </h4>
        </div>
      </div>
      <div class="col-lg-12 col-xs-12 no-padding" ng-if="!_user ">
        <div class="headline">
          <h4 translate="">
            Please login to get more Info!
          </h4>
        </div>
      </div> -->
      <div class="clearfix">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div style="margin-left:0px;" class="teacher_new_holder">
      <div class="teacher_new">
        <div class="headline mrg_adj" ng-if="ctrl.editors&&ctrl.editors.length>0">
          <h4 translate="course.teachers">
            Teachers
          </h4>
        </div>
        <div class="teacher_container row">
          <div class="col-lg-12" ng-repeat="editor in ctrl.editors">
            <div  >
              <div class="teacher_block">
                <div class="col-md-3 col-xs-2 no-padding">
                  <a ng-controller="LoginCtrl as lctrl" ng-if="!loginService.isLogged" class="cursor-pointer">
                    <img ng-src="{{editor.photourl }}" ng-click="lctrl.showCourseLoginDialog()" title="{{ editor.name || editor.username }}" width="85"/>
                  </a>
                  <a ng-if="loginService.isLogged" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.teacher.detail.summary({teacherloginname : editor.username,cs:getCheckSum(editor.username)})">
                    <img ng-src="{{editor.photourl }}" title="{{ editor.name || editor.username }}" width="85"/>
                  </a>
                </div>
                <div class="col-md-8 col-xs-9" style="padding-top: 10px;">
                  <h3 style="margin-top:0px;">
                    <a class="cursor-pointer" ng-controller="LoginCtrl as lctrl" ng-if="!loginService.isLogged">
                      <span ng-click="lctrl.showCourseLoginDialog()">{{ editor.name || editor.username }}</span>
                    </a>
                    <a ng-if="loginService.isLogged" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.teacher.detail.summary({teacherloginname : editor.username,cs:getCheckSum(editor.username)})">
                      {{ editor.name || editor.username }}
                    </a>
                  </h3>
                  <p>
                    <b>
                      <span>
                        {{editor.title}}
                      </span>
                    </b>
                  </p>
                  <p>
                    {{editor.description}}
                  </p>
                  <span class="average" ng-if="editor.rating">
                    <average-star-rating max="5" rating-value="editor.rating">
                    </average-star-rating>
                    <span>
                      {{ editor.rating | number: 1 }}/5
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix margin-bottom-20">
    </div>
    <div ng-if="displayedStudents | notEmpty">
      <div class="headline mrg_adj">
        <h4 translate="">
          Community
        </h4>
        <span style="color:#337ab7;">
          ({{totalenroll}})
        </span>
      </div>
      <div class="tag-box">
        <div class="community_img" ng-repeat="student in displayedStudents">
          <img class="img-responsive" ng-src="{{ student.avatar_url }}" style="width:100%;"/>
        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>
    <div ng-if="ctrl.course.theme!='mobile' && ctrl.commentscount>0">
      <div class="headline mrg_adj">
        <h4 translate="">
          Comments
        </h4>
        <span style="color:#337ab7;">
          ({{ctrl.commentscount}})
        </span>
      </div>
      <div class="tag-box">
        <div class="col-md-12">
          <div class="row blog-comments" ng-repeat="topic in ctrl.coursetopics">
            <div class="col-md-2 col-xs-2 padding-left-0 sm-margin-bottom-20">
              <div>
                <img class="media-object rounded-x img_res_adj" height="80" ng-src="{{ topic.avatar_url }}" title="{{ topic.authorname }}" width="80"/>
              </div>
            </div>
            <div class="col-md-10 col-xs-10 padding-right-0">
              <div  >
                <a ng-if="loginService.isLogged" ui-sref-opts="{reload: true, inherit: false}" ui-sref="index.setting.profile({ id: topic.author.loginname,cs:getCheckSum(topic.author.loginname) })">
                <strong>
                  {{ topic.author.fullname }}
                </strong>
              </a>
              <a ng-if="!loginService.isLogged">
                <strong>
                  {{ topic.author.fullname }}
                </strong>
              </a>
                <div class="pull-right date_font">
                  {{ topic.create_at | date: 'short' }}
                </div>
                <p>
                  {{topic.content}}
                </p>
              </div>
            </div>
            <div class="clearfix">
            </div>
            <hr class="darker"/>
          </div>
        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>
  </div>
</div>