mumuki-laboratory 7.7.6 → 7.10.0

data/app/assets/javascripts/mumuki_laboratory/application/submissions-store.js

@@ -0,0 +1,93 @@
+mumuki.SubmissionsStore = (() => {
+  const SubmissionsStore = new class {
+    /**
+     * Returns the submission's result status for the last submission to
+     * the given exercise, or pending, if not present
+     *
+     * @param {number} exerciseId
+     * @returns {SubmissionStatus}
+     */
+    getLastSubmissionStatus(exerciseId) {
+      const submission = this.getLastSubmissionAndResult(exerciseId);
+      return submission ? submission.result.status : 'pending';
+    }
+
+    /**
+     * Returns the submission and result for the last submission to
+     * the given exercise
+     *
+     * @param {number} exerciseId
+     * @returns {SubmissionAndResult}
+     */
+    getLastSubmissionAndResult(exerciseId) {
+      const submissionAndResult = window.localStorage.getItem(this._keyFor(exerciseId));
+      if (!submissionAndResult) return null;
+      return JSON.parse(submissionAndResult);
+    }
+
+    /**
+     * Saves the result for the given exercise
+     *
+     * @param {number} exerciseId
+     * @param {SubmissionAndResult} submissionAndResult
+     */
+    setSubmissionResultFor(exerciseId, submissionAndResult) {
+      window.localStorage.setItem(this._keyFor(exerciseId), this._asString(submissionAndResult));
+    }
+
+    /**
+     * Retrieves the last cached, non-aborted result for the given submission of the given exercise
+     *
+     * @param {number} exerciseId
+     * @param {Submission} submission
+     * @returns {SubmissionResult} the cached result for this submission
+     */
+    getSubmissionResultFor(exerciseId, submission) {
+      const last = this.getLastSubmissionAndResult(exerciseId);
+      if (!last
+          || last.result.status === 'aborted'
+          || !this.submissionSolutionEquals(last.submission, submission)) {
+        return null;
+      }
+      return last.result;
+    }
+
+     /**
+     * Extract the submission's solution content
+     *
+     * @param {Submission} submission
+     * @returns {string}
+     */
+    submissionSolutionContent(submission) {
+      if (submission.solution) {
+        return submission.solution.content;
+      } else {
+        return submission['solution[content]'];
+      }
+    }
+
+    /**
+     * Compares two solutions to determine if they are equivalent
+     * from the point of view of the code evaluation
+     *
+     * @param {Submission} one
+     * @param {Submission} other
+     * @returns {boolean}
+     */
+    submissionSolutionEquals(one, other) {
+      return this.submissionSolutionContent(one) === this.submissionSolutionContent(other);
+    }
+
+    // private API
+
+    _asString(object) {
+      return JSON.stringify(object);
+    }
+
+    _keyFor(exerciseId) {
+      return `/exercise/${exerciseId}/submission`;
+    }
+  };
+
+  return SubmissionsStore;
+})();

data/app/assets/javascripts/mumuki_laboratory/application/sync-mode.js

@@ -0,0 +1,75 @@
+/** @type {boolean} */
+mumuki.incognitoUser;
+mumuki.syncMode = (() => {
+
+  /**
+   * Syncs progress and solutions
+   * from local storage
+   */
+  class ClientSyncMode {
+    syncProgress() {
+      mumuki.progress.updateWholeProgressBar($anchor => this._getProgressListItemClass($anchor));
+    }
+
+    syncEditorContent() {
+      const lastSubmission = mumuki.SubmissionsStore.getLastSubmissionAndResult(mumuki.exercise.id);
+      if (lastSubmission) {
+        /** @todo extract core module  */
+        const content = mumuki.SubmissionsStore.submissionSolutionContent(lastSubmission.submission);
+        mumuki.editors.setContent(content);
+      }
+    }
+
+    /**
+     * @param {JQuery} $anchor
+     */
+    _getProgressListItemClass($anchor) {
+      const exerciseId = $anchor.data('mu-exercise-id');
+      const status = mumuki.SubmissionsStore.getLastSubmissionStatus(exerciseId);
+      return mumuki.renderers.progressListItemClassForStatus(status, exerciseId == mumuki.exercise.id);
+    }
+
+  }
+
+  /**
+   * Syncs progress and solutions from server.
+   *
+   * This class does nothing actually, since a server-side behaviour is the default one
+   * and no additional actions are needed.
+   */
+  class ServerSyncMode {
+    syncProgress() {
+      // nothing
+    }
+
+    syncEditorContent() {
+      // nothing
+    }
+  }
+
+
+  /** Selects the most appropriate sync mode */
+  function _selectSyncMode() {
+    if (mumuki.incognitoUser) {
+      mumuki.syncMode._current = new ClientSyncMode();
+    } else {
+      mumuki.syncMode._current = new ServerSyncMode();
+    }
+  }
+
+  return {
+    ServerSyncMode,
+    ClientSyncMode,
+
+    _selectSyncMode,
+
+    /** @type {ClientSyncMode|ServerSyncMode}*/
+    _current: null
+  }
+})();
+
+mumuki.load(() => {
+  mumuki.syncMode._selectSyncMode();
+  mumuki.syncMode._current.syncProgress();
+  mumuki.syncMode._current.syncEditorContent();
+})

data/app/assets/javascripts/mumuki_laboratory/application/timer.js

@@ -1,7 +1,5 @@
-var mumuki = mumuki || {};
-
-(function (mumuki) {
-  mumuki.startTimer = function (endDate) {
+mumuki.startTimer = (() => {
+  function startTimer(endDate) {
     var endTime = new Date(endDate).getTime();
     var currentTime = Date.now();
     var diffTime = endTime - currentTime;
@@ -17,5 +15,6 @@ var mumuki = mumuki || {};
         $('#timer').text(duration.format("HH:mm:ss"));
       }
     }, intervalDuration);
-  };
-})(mumuki);
+  }
+  return startTimer
+})();

data/app/assets/javascripts/mumuki_laboratory/application/tooltip.js

@@ -1,3 +1,3 @@
-mumuki.load(function () {
+mumuki.load(() => {
     $('[title]').tooltip();
 });

data/app/assets/javascripts/mumuki_laboratory/application/upload.js

@@ -1,4 +1,4 @@
-mumuki.load(function() {
+mumuki.load(() => {
   $('#upload-input').change(function (evt) {
     var file = evt.target.files[0];
     if (!file) return;

data/app/assets/javascripts/mumuki_laboratory/application/user.js

@@ -1,4 +1,4 @@
-mumuki.load(function () {
+mumuki.load(() => {
   var hash = document.location.hash;
   if (hash) {
     $(".nav-tabs a[data-target='" + hash + "']").tab('show');

data/app/assets/stylesheets/mumuki_laboratory/application.scss

@@ -1,4 +1,4 @@
-$icon-font-path: asset-path('assets/bootstrap');
+$icon-font-path: asset-path('assets/bootstrap/');
 $fa-font-path: asset-path('assets');
 $da-font-path: asset-path('assets');
 

data/app/assets/stylesheets/mumuki_laboratory/application/_modules.scss

@@ -1,26 +1,28 @@
-@import "modules/chapter_show";
-@import "modules/exercise_assignment";
-@import "modules/exercise_results";
-@import "modules/modal";
-@import "modules/upload";
-@import "modules/console";
-@import "modules/progress_listing";
+@import "modules/avatar";
 @import "modules/book_header";
-@import "modules/progress_bar";
-@import "modules/timer";
-@import "modules/overlap";
-@import "modules/editor";
-@import "modules/organization_chooser";
-@import "modules/guide-corollary";
+@import "modules/breadcrumb";
+@import "modules/chapter_show";
 @import "modules/checkboxes";
+@import "modules/console";
+@import "modules/datepicker";
+@import "modules/discussion";
 @import "modules/dropdown";
+@import "modules/editor";
+@import "modules/exercise_assignment";
+@import "modules/exercise_results";
 @import "modules/flash";
-@import "modules/highlight";
-@import "modules/breadcrumb";
 @import "modules/gs-board";
+@import "modules/guide_corollary";
+@import "modules/highlight";
 @import "modules/kids";
 @import "modules/kindergarten";
 @import "modules/kids_results";
-@import "modules/discussion";
+@import "modules/modal";
+@import "modules/organization_chooser";
+@import "modules/overlap";
 @import "modules/popover";
-@import "modules/datepicker";
+@import "modules/progress_bar";
+@import "modules/progress_listing";
+@import "modules/timer";
+@import "modules/upload";
+@import "modules/user_profile";

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_avatar.scss

@@ -0,0 +1,41 @@
+.mu-user-avatar {
+  width: 250px;
+  height: 250px;
+
+  border: 2px solid $mu-color-dark-separator;
+  border-radius: 50%;
+
+  padding: 2px;
+}
+
+.mu-edit-avatar {
+  position: relative;
+  top: 100px;
+  right: 15px;
+}
+
+.mu-avatar-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+
+  padding: 15px;
+}
+
+.mu-avatar-item {
+  width: 150px;
+  height: 150px;
+
+  border: 2px solid $mu-color-dark-separator;
+
+  padding: 2px;
+  margin: 10px;
+
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: -3px 3px 10px -3px $mu-color-primary;
+    transform: scale(1.025);
+  }
+}

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_gs-board.scss

@@ -4,5 +4,8 @@ gs-board {
     span {
       vertical-align: middle;
     }
+    &.gs-board {
+      background-color: #FFFFFF;
+    }
   }
 }

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kids.scss

@@ -96,7 +96,7 @@ $kids-speech-tabs-width: 40px;
   }
 
   .mu-kids-character-animation {
-    width: 120px;
+    width: $kids-characters-height;
   }
 
   .mu-kids-character {
@@ -338,7 +338,6 @@ $kids-speech-tabs-width: 40px;
         td, th {
           &.gs-board {
             border: $kids-speech-border !important;
-            background-color: #FFFFFF;
           }
           &.gbs_lx,
           &.gbs_lh,

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kindergarten.scss

@@ -8,7 +8,7 @@
   .mu-kids-exercise-workspace {
     display: flex;
     flex-flow: row;
-    height: 100%;
+    height: calc(100% - #{$kids-characters-height});
     width: 100%;
   }
 
@@ -41,6 +41,7 @@
 
   .mu-kids-state.mu-state-initial {
     height: 100%;
+    width: 100%;
   }
 
   .mu-kids-state.mu-state-final {

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_user_profile.scss

@@ -0,0 +1,36 @@
+.mu-user-header {
+  padding: 10px 0px;
+
+  display: flex;
+  align-items: center;
+}
+
+.mu-profile-actions {
+  vertical-align: middle;
+  margin-left: auto;
+
+  .btn {
+    width: 150px;
+    height: 55px;
+    margin-left: 15px;
+    transition: background-color 0.3s, border-color 0.3s;
+
+    &[disabled], &[disabled]:hover {
+      background-color: lighten($mu-color-complementary, 15%);
+      border-color: lighten($mu-color-complementary, 15%);
+    }
+  }
+}
+
+.mu-profile-info {
+  font-size: 20px;
+  margin-top: 5px;
+  div {
+    margin-bottom: 15px;
+    .italic {
+      font-style: italic;
+    }
+  }
+
+
+}

data/app/controllers/application_controller.rb

@@ -11,6 +11,7 @@ class ApplicationController < ActionController::Base
   include Mumuki::Laboratory::Controllers::Notifications
   include Mumuki::Laboratory::Controllers::DynamicErrors
   include Mumuki::Laboratory::Controllers::EmbeddedMode
+  include Mumuki::Laboratory::Controllers::IncognitoMode
 
   before_action :set_current_organization!
   before_action :set_locale!
@@ -92,7 +93,7 @@ class ApplicationController < ActionController::Base
   def validate_user_profile!
     unless current_user.profile_completed?
       flash.notice = I18n.t :please_fill_profile_data
-      redirect_to user_path
+      redirect_to edit_user_path
     end
   end
 

data/app/controllers/users_controller.rb

@@ -11,7 +11,7 @@ class UsersController < ApplicationController
 
   def update
     current_user.update_and_notify! user_params
-    redirect_to root_path, notice: I18n.t(:user_data_updated)
+    redirect_to user_path, notice: I18n.t(:user_data_updated)
   end
 
   def unsubscribe
@@ -21,6 +21,10 @@ class UsersController < ApplicationController
     redirect_to root_path, notice: t(:unsubscribed_successfully)
   end
 
+  def permissible_params
+    super << :avatar_id
+  end
+
   private
 
   def validate_user_profile!

data/app/helpers/application_helper.rb

@@ -6,12 +6,14 @@ module ApplicationHelper
     html_escape html.to_str
   end
 
-  def profile_picture
-    profile_picture_for current_user
+  def profile_picture_for(user, **options)
+    options.merge!(height: 40, onError: "this.onerror = null; this.src = '#{image_url(user.placeholder_image_url)}'")
+    avatar_image(user.profile_picture, options)
   end
 
-  def profile_picture_for(user, height = 40)
-    image_tag(user.profile_picture, height: height, class: 'img-circle', onError: "this.onerror = null; this.src = '#{image_url('user_shape.png')}'")
+  def avatar_image(avatar_url, **options)
+    options.merge!(class: "img-circle #{options[:class]}")
+    image_tag(image_url(avatar_url), options)
   end
 
   def paginate(object, options = {})