Show if partner is online

app/assets/javascripts/channels/synchronized_editor_channel.js

@@ -23,13 +23,24 @@ $(document).on('turbolinks:load', function () {
 
         received(data) {
           // Called when there's incoming data on the websocket for this channel
-          if (current_user_id !== data['current_user_id']) {
+          if (current_user_id !== data.current_user_id) {
-            CodeOceanEditor.applyChanges(data['delta']['data'], data['active_file']);
+            switch(data.command) {
+              case 'editor_change':
+                CodeOceanEditor.applyChanges(data.delta.data, data.active_file);
+                break;
+              case 'connection_change':
+                CodeOceanEditor.showPartnersConnectionStatus(data.status, data.current_user_name);
+                this.perform('send_hello');
+                break;
+              case 'hello':
+                CodeOceanEditor.showPartnersConnectionStatus(data.status, data.current_user_name);
+                break;
+            }
           }
         },
 
         send_changes(delta, active_file) {
-          const delta_with_user_id = {current_user_id: current_user_id, active_file: active_file, delta: delta}
+          const delta_with_user_id = {command: 'editor_change', current_user_id: current_user_id, active_file: active_file, delta: delta}
           this.perform('send_changes', {delta_with_user_id: delta_with_user_id});
         }
       });

app/assets/javascripts/editor/editor.js.erb

@@ -1044,6 +1044,17 @@ var CodeOceanEditor = {
           delta_data.text === last_delta.text;
     },
 
+    showPartnersConnectionStatus: function (status, username) {
+        switch(status) {
+            case 'connected':
+                $('#pg_session').text(I18n.t('exercises.editor.is_online', {name: username}));
+                break;
+            case 'disconnected':
+                $('#pg_session').text(I18n.t('exercises.editor.is_offline', {name: username}));
+                break;
+        }
+    },
+
     initializeEverything: function () {
         CodeOceanEditor.editors = [];
         this.initializeRegexes();

app/assets/javascripts/editor/submissions.js

@@ -3,7 +3,7 @@ CodeOceanEditorSubmissions = {
 
   AUTOSAVE_INTERVAL: 15 * 1000,
   autosaveTimer: null,
-  autosaveLabel: "#statusbar span",
+  autosaveLabel: "#statusbar #autosave",
 
   /**
    * Submission-Creation

app/channels/synchronized_editor_channel.rb

@@ -3,11 +3,13 @@
 class SynchronizedEditorChannel < ApplicationCable::Channel
   def subscribed
     stream_from specific_channel
+    ActionCable.server.broadcast(specific_channel, {command: 'connection_change', status: 'connected', current_user_id: current_user.id, current_user_name: current_user.name})
   end
 
   def unsubscribed
     # Any cleanup needed when channel is unsubscribed
     stop_all_streams
+    ActionCable.server.broadcast(specific_channel, {command: 'connection_change', status: 'disconnected', current_user_id: current_user.id, current_user_name: current_user.name})
   end
 
   def specific_channel
@@ -22,4 +24,8 @@ class SynchronizedEditorChannel < ApplicationCable::Channel
   def send_changes(message)
     ActionCable.server.broadcast(specific_channel, message['delta_with_user_id'])
   end
+
+  def send_hello
+    ActionCable.server.broadcast(specific_channel, {command: 'hello', status: 'connected', current_user_id: current_user.id, current_user_name: current_user.name})
+  end
 end

app/views/exercises/_editor.html.slim

@@ -4,7 +4,7 @@
 - show_tips_interventions = @show_tips_interventions || "false"
 - hide_rfc_button = @hide_rfc_button || false
 
-#editor.row data-exercise-id=@exercise.id data-message-depleted=t('exercises.editor.depleted') data-message-timeout=t('exercises.editor.timeout',  permitted_execution_time: @exercise.execution_environment.permitted_execution_time) data-message-out-of-memory=t('exercises.editor.out_of_memory',  memory_limit: @exercise.execution_environment.memory_limit) data-submissions-url=submissions_path data-user-id=current_user.id data-contributor-id=current_contributor.id data-user-external-id=external_user_external_id data-working-times-url=working_times_exercise_path(@exercise) data-intervention-save-url=intervention_exercise_path(@exercise) data-rfc-interventions=show_rfc_interventions data-break-interventions=show_break_interventions data-tips-interventions=show_tips_interventions
+#editor.row data-exercise-id=@exercise.id data-message-depleted=t('exercises.editor.depleted') data-message-timeout=t('exercises.editor.timeout',  permitted_execution_time: @exercise.execution_environment.permitted_execution_time) data-message-out-of-memory=t('exercises.editor.out_of_memory',  memory_limit: @exercise.execution_environment.memory_limit) data-submissions-url=submissions_path data-user-id=current_user.id data-user-name=current_user.name data-contributor-id=current_contributor.id data-user-external-id=external_user_external_id data-working-times-url=working_times_exercise_path(@exercise) data-intervention-save-url=intervention_exercise_path(@exercise) data-rfc-interventions=show_rfc_interventions data-break-interventions=show_break_interventions data-tips-interventions=show_tips_interventions
   - unless @embed_options[:hide_sidebar]
     - additional_classes = 'sidebar-col'
     - if @tips.blank?
@@ -39,12 +39,22 @@
             = t('exercises.editor.download')
 
       div
+        ruby:
+          if current_contributor.programming_group?
+            current_contributor.users.each do |user|
+              if user.id != current_user.id
+                @programming_partners_name = user.name
+              end
+            end
+          end
         - if current_contributor.programming_group?
+          span#pg_session
+            = t('exercises.editor.is_offline', name: @programming_partners_name)
+          = " | "
           = t('exercises.editor.pair_programming_session')
           = " | "
         = t('exercises.editor.lastsaved')
-        span
+        span id="autosave"
-        button style="display:none" id="autosave"
 
         = " | "
 

config/locales/de.yml

@@ -385,6 +385,8 @@ de:
       expand_action_sidebar: Aktions-Leiste Ausklappen
       expand_output_sidebar: Ausgabe-Leiste Ausklappen
       input: Ihre Eingabe
+      is_offline: "%{name} ist offline"
+      is_online: "%{name} ist online"
       lastsaved: 'Zuletzt gespeichert: '
       network: 'Während Ihr Code läuft, ist Port %{port} unter folgender Adresse erreichbar: <a href="%{address}" target="_blank" rel="noopener">%{address}</a>.'
       pair_programming_session: Pair Programming Session

config/locales/en.yml

@@ -385,6 +385,8 @@ en:
       expand_action_sidebar: Expand Action Sidebar
       expand_output_sidebar: Expand Output Sidebar
       input: Your input
+      is_offline: "%{name} is offline"
+      is_online: "%{name} is online"
       lastsaved: 'Last saved: '
       network: 'While your code is running, port %{port} is accessible using the following address: <a href="%{address}" target="_blank" rel="noopener">%{address}</a>.'
       pair_programming_session: Pair Programming Session