dashboard.html

<%!
  from django.core.urlresolvers import reverse
  from courseware.courses import course_image_url, get_course_about_section
  from courseware.access import has_access
  from certificates.models import CertificateStatuses
%>
<%inherit file="main.html" />

<%namespace name='static' file='static_content.html'/>

<%block name="title"><title>Dashboard</title></%block>

<%block name="js_extra">
  <script type="text/javascript">
  (function() {

    var carouselPageHeight = 0;
    var carouselIndex = 0;
    var carouselDelay = 5000;
    var carouselPages = $('.news-carousel .page').length;


    $('.news-carousel .page').each(function() {
      carouselPageHeight = Math.max($(this).outerHeight(), carouselPageHeight);
    });
    $('.news-carousel .pages').css('height', carouselPageHeight);
    $('.news-carousel .page-dot').bind('click', setCarouselPage);
    var carouselTimer = setInterval(nextCarouselPage, carouselDelay);

    function nextCarouselPage() {
      carouselIndex = carouselIndex + 1 < carouselPages ? carouselIndex + 1 : 0;
      setCarouselPage(null, carouselIndex);
    }

    function setCarouselPage(event, index) {
      var $pageToShow;
      var transitionSpeed;
      $('.news-carousel .page-dots').find('.current').removeClass('current');

      if(event) {
        clearInterval(carouselTimer);
        carouselTimer = setInterval(nextCarouselPage, carouselDelay);
        transitionSpeed = 250;
        $pageToShow = $('.news-carousel .page').eq(index);
        $(this).addClass('current');
      } else {
        transitionSpeed = 750;
        $pageToShow = $('.news-carousel .page').eq(index);
        $('.news-carousel .page-dot').eq(index).addClass('current');
      }

      $pageToShow.fadeIn(transitionSpeed);
      $('.news-carousel .page').not($pageToShow).fadeOut(transitionSpeed);
    }

    $(".unenroll").click(function(event) {
      $("#unenroll_course_id").val( $(event.target).data("course-id") );
      $("#unenroll_course_number").text( $(event.target).data("course-number") );
    });

    $(document).delegate('#unenroll_form', 'ajax:success', function(data, json, xhr) {
      if(json.success) {
        location.href="${reverse('dashboard')}";
      } else {
        if($('#unenroll_error').length == 0) {
          $('#unenroll_form').prepend('<div id="unenroll_error" class="modal-form-error"></div>');
        }
        $('#unenroll_error').text(json.error).stop().css("display", "block");
      }
    });

    $('#pwd_reset_button').click(function() {
      $.post('${reverse("password_reset")}',
             {"email"  : $('#id_email').val()},
             function(data){
               $("#password_reset_complete_link").click();
             });
    });

    $("#change_email_form").submit(function(){
      var new_email = $('#new_email_field').val();
      var new_password = $('#new_email_password').val();

      $.post('${reverse("change_email")}',
               {"new_email" : new_email, "password" : new_password},
               function(data) {
                 if (data.success) {
                   $("#change_email_title").html("Please verify your new email");
                   $("#change_email_form").html("<p>You'll receive a confirmation in your " +
                                                "in-box. Please click the link in the " +
                                                "email to confirm the email change.</p>");
                 } else {
                   $("#change_email_error").html(data.error).stop().css("display", "block");
                 }
               });
      return false;
    });

    $("#change_name_form").submit(function(){
      var new_name = $('#new_name_field').val();
      var rationale = $('#name_rationale_field').val();

      $.post('${reverse("change_name")}',
             {"new_name":new_name, "rationale":rationale},
             function(data) {
               if(data.success) {
                 location.reload();
                 // $("#change_name_body").html("<p>Name changed.</p>");
               } else {
                 $("#change_name_error").html(data.error).stop().css("display", "block");
               }
             });
       return false;
    });

  })(this)
  </script>
</%block>

<section class="container dashboard">

  %if message:
    <section class="dashboard-banner">
      ${message}
    </section>
  %endif

  <section class="profile-sidebar">
    <header class="profile">
      <h1 class="user-name">${ user.username }</h1>
    </header>
    <section class="user-info">
      <ul>
        <li>
          <span class="title"><div class="icon name-icon"></div>Full Name (<a href="#apply_name_change" rel="leanModal" class="edit-name">edit</a>)</span> <span class="data">${ user.profile.name | h }</span>
        </li>
        <li>
          <span class="title"><div class="icon email-icon"></div>Email (<a href="#change_email" rel="leanModal" class="edit-email">edit</a>)</span> <span class="data">${ user.email | h }</span>
        </li>
        <li>
          <span class="title"><a href="#password_reset_complete" rel="leanModal" id="pwd_reset_button">Reset Password</a></span>
          <form id="password_reset_form" method="post" data-remote="true" action="${reverse('password_reset')}">
            <input id="id_email" type="hidden" name="email" maxlength="75" value="${user.email}" />
            <!-- <input type="submit" id="pwd_reset_button" value="Reset Password" /> -->
          </form>
        </li>
      </ul>
    </section>

    %if news:
    <article class="news-carousel">
      <header>
        <h4>edX News</h4>
        <nav class="page-dots">
          <ol>
            <li><a href="#" class="page-dot current"></a></li>
            <li><a href="#" class="page-dot"></a></li>
            <li><a href="#" class="page-dot"></a></li>
          </ol>
        </nav>
      </header>
      <div class="pages">
        % for entry in news:
        <section class="page">
          %if entry.image:
          <div class="news-image">
            <a href="${entry.link}"><img src="${entry.image}" /></a>
          </div>
          %endif
          <h5><a href="${entry.link}">${entry.title}</a></h5>
          <div class="excerpt">
            %if entry.summary:
            <p>${entry.summary}</p>
            %endif
            <p><a href="${entry.link}">Learn More ›</a></p>
          </div>
        </section>
        %endfor
      </div>
    </article>
    %endif
  </section>

  <section class="my-courses">
    <header>
      <h2>Current Courses</h2>
    </header>

    % if len(courses) > 0:
      % for course in courses:

        <article class="my-course">
          <%
          if has_access(user, course, 'load'):
            course_target = reverse('info', args=[course.id])
          else:
            course_target = reverse('about_course', args=[course.id])
          %>

          <a href="${course_target}">
            <section class="cover" style="background-image: url('${course_image_url(course)}')">
              <div class="shade"></div>
              <div class="arrow">&#10095;</div>
            </section>

            <section class="info">
              <hgroup>
                <h2 class="university">${get_course_about_section(course, 'university')}</h2>
                <h3>${course.number} ${course.title}</h3>
              </hgroup>
              <section class="course-status course-status-completed">
              <p>
              % if course.has_ended():
              Course Completed - <span>${course.end_date_text}</span>
              % elif course.has_started():
              Course Started - <span>${course.start_date_text}</span>
              % else:   # hasn't started yet
              Course Starts - <span>${course.start_date_text}</span>
              % endif
              </p>
              </section>
              % if course.id in show_courseware_links_for:
                <p class="enter-course">View Courseware</p>
              % endif
            </section>
          </a>
        </article>

        <%
        cert_status = cert_statuses.get(course.id)
        %>
        % if course.has_ended() and cert_status:
            <%
            if cert_status['status'] == 'generating':
                status_css_class = 'course-status-certrendering'
            elif cert_status['status'] == 'ready':
                status_css_class = 'course-status-certavailable'
            elif cert_status['status'] == 'notpassing':
                status_css_class = 'course-status-certnotavailable'
            else:
                status_css_class = 'course-status-processing'
            %>
            <div class="message message-status ${status_css_class} is-shown">

            % if cert_status['status'] == 'processing':
                  <p class="message-copy">Final course details are being wrapped up at
                  this time. Your final standing will be available shortly.</p>
            % elif cert_status['status'] in ('generating', 'ready'):
                  <p class="message-copy">You have received a grade of
                            <span class="grade-value">${cert_status['grade']}</span>
                            in this course.</p>
            % elif cert_status['status'] == 'notpassing':
                  <p class="message-copy">You did not complete the necessary requirements for
                     completion of this course.</p>
            % endif

            % if cert_status['show_disabled_download_button'] or cert_status['show_download_url'] or cert_status['show_survey_button']:
              <ul class="actions">
                % if cert_status['show_disabled_download_button']:
                  <li class="action"><span class="btn disabled" href="">
                      Your Certificate is Generating</span></li>
                % elif cert_status['show_download_url']:
                  <li class="action">
                  <a class="btn" href="${cert_status['download_url']}"
                     title="This link will open/download a PDF document">
                     Download Your PDF Certificate</a></li>
                % endif

                % if cert_status['show_survey_button']:
                  <li class="action"><a class="cta" href="${cert_status['survey_url']}">
                         Complete our course feedback survey</a></li>
                % endif
              </ul>
            % endif
            </div>

        % endif

        <a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id}" data-course-number="${course.number}">Unregister</a>

      % endfor
    % else:
      <section class="empty-dashboard-message">
        <p>Looks like you haven't registered for any courses yet.</p>
        <a href="${reverse('courses')}">Find courses now!</a>
      </section>
    % endif

    % if staff_access and len(errored_courses) > 0:
      <div id="course-errors">
        <h2>Course-loading errors</h2>

      % for course_dir, errors in errored_courses.items():
         <h3>${course_dir | h}</h3>
             <ul>
           % for (msg, err) in errors:
               <li>${msg}
                 <ul><li><pre>${err}</pre></li></ul>
               </li>
           % endfor
             </ul>
      % endfor
    % endif
  </section>
</section>

<section id="unenroll-modal" class="modal unenroll-modal">
  <div class="inner-wrapper">
    <header>
      <h2>Are you sure you want to unregister from <span id="unenroll_course_number"></span>?</h2>
      <hr/>
    </header>

    <form id="unenroll_form" method="post" data-remote="true" action="${reverse('change_enrollment')}">
      <input name="course_id" id="unenroll_course_id" type="hidden" />
      <input name="enrollment_action" type="hidden" value="unenroll" />
      <div class="submit">
        <input name="submit" type="submit" value="Unregister" />
      </div>
    </form>

    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>
</section>

<section id="password_reset_complete" class="modal">
  <div class="inner-wrapper">
    <header>
      <h2>Password Reset Email Sent</h2>
      <hr/>
    </header>
    <div>
      <form> <!-- Here for styling reasons -->
        <section>
          <p>An email has been sent to ${user.email}. Follow the link in the email to change your password.</p>
        </section>
      </form>
    </div>
    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>
</section>

<section id="change_email" class="modal">
  <div class="inner-wrapper">
    <header>
      <h2><span id="change_email_title">Change Email</span></h2>
      <hr/>
    </header>
    <div id="change_email_body">
      <form id="change_email_form">
        <div id="change_email_error" class="modal-form-error"> </div>
        <fieldset>
          <div class="input-group">
            <label>Please enter your new email address:</label>
            <input id="new_email_field" type="email" value="" />
            <label>Please confirm your password:</label>
            <input id="new_email_password" value="" type="password" />
          </div>
          <section>
            <p>We will send a confirmation to both ${user.email} and your new email as part of the process.</p>
          </section>
          <div class="submit">
            <input type="submit" id="submit_email_change" value="Change Email"/>
          </div>
        </fieldset>
      </form>
    </div>
    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>
</section>

<section id="apply_name_change" class="modal">
  <div class="inner-wrapper">
    <header>
      <h2>Change your name</h2>
      <hr/>
    </header>
    <div id="change_name_body">
      <form id="change_name_form">
        <div id="change_name_error" class="modal-form-error"> </div>
        <p>To uphold the credibility of edX certificates, all name changes will be logged and recorded.</p>
        <br/>
        <fieldset>
          <div class="input-group">
            <label>Enter your desired full name, as it will appear on the edX certificates: </label>
            <input id="new_name_field" value="" type="text" />
            <label>Reason for name change:</label>
            <textarea id="name_rationale_field" value=""></textarea>
          </div>
          <div class="submit">
            <input type="submit" id="submit" value="Change My Name">
          </div>
        </fieldset>
      </form>
    </div>
    <div class="close-modal">
      <div class="inner">
        <p>&#10005;</p>
      </div>
    </div>
  </div>
</section>