edx-platform/profile.html

<%inherit file="main.html" />

<%!
  import json
%>

<script>
var loc=true; // Activate on clicks? Not if already clicked.
var lang=true;
$(function() {
      $("#change_location").click(function() {
         log_event("profile", {"type":"location_show", "old":$("#location_sub").text()});

         if(loc) {
           $("#description").html('<div>'+
                                  "Preferred format is city, state, country (so for us, "+
                                  "&quot;Cambridge, Massachusetts, USA&quot;), but give "+
                                  "as much or as little detail as you want. </div>");

           loc=false;

           $("#location_sub").html('<input id="id_loc_text" type="text" name="loc_text" />'+
                                   '<input type="button" id="change_loc_button" value="Change" />');
           $("#change_loc_button").click(function() {
              postJSON('/change_setting', {'location':$("#id_loc_text").attr("value")}, function(json) {
                $("#location_sub").text(json.location);
                loc=true;
                $("#description").html("");
               log_event("profile", {"type":"location_change", "new":json.location});
              });
           });
         }
      });

      $("#change_language").click(function() {
         log_event("profile", {"type":"language_show", "old":$("#language_sub").text()});

         if(lang) {
           lang=false;
           $("#language_sub").html('<input id="id_lang_text" type="text" name="lang_text" />'+
                                   '<input type="button" id="change_lang_button" value="Change" />');
           $("#change_lang_button").click(function() {
              postJSON('/change_setting', {'language':$("#id_lang_text").attr("value")}, function(json) {
                $("#language_sub").text(json.language);
                lang=true;
                $("#description").html("");
               log_event("profile", {"type":"language_change", "new":json.language});
              });
           });
         }
      });

      $('#change_password').click(function(){
        $('.modal').trigger('click');
        log_event("profile", {"type":"password_show"});
      });

    $('#pwd_reset_button').click(function() {
      $.post('/password_reset/',{ "csrfmiddlewaretoken" : "${ csrf }",
                    "email"  : $('#id_email').val()}, function(data){
         $('#pwd_reset').html(data);
         log_event("profile", {"type":"password_send"});
      });
    });
});

</script>

<%include file="navigation.html" />

<section class="main-content">
  <div class="profile-wrapper">
    <section class="user-info">

      <h1>${name}</h1>

      <ul>
        <li>Forum name: ${username}</li>
        <li>E-mail: ${email}</li>
        <li>
          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Change</a>
        </li>
        <li>
          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Change</a>
        </li>
      </ul>

      <!-- <div><a class="modal" href="#change_password_pop">Reset password</a></div> -->

      <div id="change_password_pop">
        <h2>Password reset</h2>
        <p>We'll e-mail you a password reset link at ${email}. Follow the link in the email to reset your password.</p>

        <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
        <input type="submit" id="pwd_reset_button" value="Reset Password" />
      </div>

    </section>

    <section class="course-info">
      <h1>Course Progress</h1>
    
    <div id="homework-detail-graph" style="width:550px;height:200px;"></div>
    
    <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.min.js"></script>
    <script type="text/javascript" src="${ settings.LIB_URL }flot/jquery.flot.stack.js"></script>
    <script>
    $(function () {
      

      var homeworkData = ${ json.dumps( [[i + 1, percentage] for i,percentage in enumerate(homework_percentages)] ) };
      var labData = ${ json.dumps( [[i + 13, percentage] for i,percentage in enumerate(lab_percentages)] ) };
      
      var data = [
        //{label: 'Homework Total', data: [ [0.5,0.8] ], bars: {barWidth: 12, align: 'left'} },
        {label: 'Homework', data: homeworkData, color: 0},
        //{label: 'Lab Total', data: [ [12.5,0.9] ], bars: {barWidth: 12, align: 'left'}},
        {label: 'Labs', data: labData, color: 1},
        {label: 'Midterm', data: [[25,0.87]], color: 2},
        {label: 'Final', data: [[26,0.65]], color: 3},
      ];
      var options = {
        series: {lines: {show: false, steps: false },
        bars: {show: true, barWidth: 0.6, align: 'center',},},
        xaxis: {ticks: [[1,'1'], [2,'2'], [3,'3'], [4,'4'], [5,'5']]},
      };

      $.plot($("#homework-detail-graph"), data, options);
      
    });
    </script>
    
    
      <!-- <div id="description"></div> -->

      <ol>
        % for hw in homeworks:
        <li>
          <h2>${ hw['chapter'] }</h2>
          <h3>${hw['format']} - ${ hw['section'] } ${"({0}/{1})".format( hw['section_total'][0], hw['section_total'][1] )}</h3> 

          <ul>
            % for score in hw['scores']:
            <li>${ score[0] }/${ score[1] }</li>
            % endfor
          </ul>
        </li>
        % endfor
      </ol>
    </section>
  </div>
</section>