diff --git a/app/assets/javascripts/channels/synchronized_editor_channel.js b/app/assets/javascripts/channels/synchronized_editor_channel.js index 980b92dc..d61e8e24 100644 --- a/app/assets/javascripts/channels/synchronized_editor_channel.js +++ b/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']) { - CodeOceanEditor.applyChanges(data['delta']['data'], data['active_file']); + if (current_user_id !== data.current_user_id) { + 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}); } }); diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb index a7fce30f..4caef636 100644 --- a/app/assets/javascripts/editor/editor.js.erb +++ b/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(); diff --git a/app/assets/javascripts/editor/submissions.js b/app/assets/javascripts/editor/submissions.js index cf62f531..3809a137 100644 --- a/app/assets/javascripts/editor/submissions.js +++ b/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 diff --git a/app/channels/synchronized_editor_channel.rb b/app/channels/synchronized_editor_channel.rb index 8de89308..3b40919f 100644 --- a/app/channels/synchronized_editor_channel.rb +++ b/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 diff --git a/app/views/exercises/_editor.html.slim b/app/views/exercises/_editor.html.slim index 80f10f90..e5475e7c 100644 --- a/app/views/exercises/_editor.html.slim +++ b/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 - button style="display:none" id="autosave" + span id="autosave" = " | " diff --git a/config/locales/de.yml b/config/locales/de.yml index bb353006..adaeb4c1 100644 --- a/config/locales/de.yml +++ b/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: %{address}.' pair_programming_session: Pair Programming Session diff --git a/config/locales/en.yml b/config/locales/en.yml index 5fa4e592..9b76f7d4 100644 --- a/config/locales/en.yml +++ b/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: %{address}.' pair_programming_session: Pair Programming Session