Merge pull request #2381 from cloudnativedaysjp/chore/hotwire

hotwireの導入 & 脱jQuery

Gemfile

@@ -7,9 +7,6 @@ gem 'rails', '~> 7.0.5'
 gem 'puma', '~> 6.0'
 # Use SCSS for stylesheets
 gem 'sass-rails', '>= 6'
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
-# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
-gem 'turbolinks', '~> 5'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.11'
 gem 'jsbundling-rails'
@@ -116,7 +113,7 @@ gem "aws-sdk-ssm"
 
 gem 'active_hash'
 
-gem "turbo-rails"
+gem "turbo-rails", "2.0.5"
 
 gem 'slack-ruby-client'
 

Gemfile.lock

@@ -657,9 +657,6 @@ GEM
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
@@ -746,8 +743,7 @@ DEPENDENCIES
   slack-ruby-client
   stackprof
   steep
-  turbo-rails
-  turbolinks (~> 5)
+  turbo-rails (= 2.0.5)
   tzinfo-data
   uppy-s3_multipart (~> 1.0)
   web-console (>= 3.3.0)

app/controllers/admin/check_in_events_controller.rb

@@ -5,21 +5,27 @@ def create
     @check_in = CheckInConference.new(check_in_events_params.merge(conference_id: conference.id, check_in_timestamp: DateTime.now))
     @profile = Profile.find(@check_in.profile_id)
 
-    if @check_in.save
-      redirect_back(fallback_location: "#{conference.abbr}/admin", allow_other_host: false)
-    else
-      redirect_back(fallback_location: "#{conference.abbr}/admin", allow_other_host: false, notice: "#{@profile.last_name} #{@profile.first_name} のチェックインに失敗しました")
+    respond_to do |format|
+      if @check_in.save
+        flash.now[:notice] = "#{@profile.last_name} #{@profile.first_name} をチェックインしました"
+      else
+        flash.now[:alert] = "#{@profile.last_name} #{@profile.first_name} のチェックインに失敗しました"
+      end
+      format.turbo_stream
     end
   end
 
   def destroy_all
     @check_ins = CheckInConference.where(profile_id: check_in_events_params[:profile_id], conference_id: conference.id)
     @profile = Profile.find(check_in_events_params[:profile_id])
 
-    if @check_ins.map(&:destroy!)
-      redirect_back(fallback_location: "#{conference.abbr}/admin")
-    else
-      redirect_back(fallback_location: "#{conference.abbr}/admin", notice: "#{@profile.last_name} #{@profile.first_name} のチェックインキャンセルに失敗しました")
+    respond_to do |format|
+      if @check_ins.map(&:destroy!)
+        flash.now[:notice] = "#{@profile.last_name} #{@profile.first_name} のチェックインをキャンセルしました"
+      else
+        flash.now[:alert] = "#{@profile.last_name} #{@profile.first_name} のチェックインキャンセルに失敗しました"
+      end
+      format.turbo_stream
     end
   end
 

app/controllers/admin/conferences_controller.rb

@@ -31,6 +31,20 @@ def update
     end
   end
 
+  def add_link
+    @conference_form = ConferenceForm.new(conference: @conference)
+
+    helpers.fields(model: @conference_form) do |f|
+      f.fields_for(:links, Link.new, child_index: Process.clock_gettime(Process::CLOCK_REALTIME, :millisecond)) do |ff|
+        render(turbo_stream: turbo_stream.append(
+          'link_fields',
+          partial: 'admin/conferences/link_fields',
+          locals: { f: ff }
+        ))
+      end
+    end
+  end
+
   private
 
   def conference_params

app/controllers/admin/talks_controller.rb

@@ -22,63 +22,31 @@ def update_talks
   end
 
   def start_on_air
-    date = params[:talk][:date]
-    track_name = params[:talk][:track_name]
-    talk = Talk.find(params[:talk][:id])
+    @talk = Talk.find(params[:talk][:id])
 
     respond_to do |format|
-      on_air_talks_of_other_days = talk.track.talks.includes([:conference_day, :video]).accepted_and_intermission.reject { |t| t.conference_day.id == talk.conference_day.id }.select { |t| t.video.on_air? }
+      on_air_talks_of_other_days = @talk.track.talks.includes([:conference_day, :video]).accepted_and_intermission.reject { |t| t.conference_day.id == @talk.conference_day.id }.select { |t| t.video.on_air? }
       if on_air_talks_of_other_days.size.positive?
-        format.html {
-          update_variables_for_tracks(talk)
-          redirect_to(admin_tracks_path(date:, track_name:), alert: "Talk id=#{on_air_talks_of_other_days.map(&:id).join(',')} are already on_air.")
+        format.turbo_stream {
+          flash[:alert] = "Talk id=#{on_air_talks_of_other_days.map(&:id).join(',')} are already on_air."
         }
-        # format.turbo_stream {
-        #   update_variables_for_tracks(talk)
-        #   flash[:alert] = "Talk id=#{on_air_talks_of_other_days.map(&:id).join(',')} are already on_air."
-        # }
       else
-        talk.start_streaming
-        format.html {
-          update_variables_for_tracks(talk)
-          redirect_to(admin_tracks_path(date:, track_name:), notice: "OnAirに切り替えました: #{talk.start_to_end} #{talk.speaker_names.join(',')} #{talk.title}")
+        @talk.start_streaming
+        format.turbo_stream {
+          flash[:notice] = "OnAirに切り替えました: #{@talk.start_to_end} #{@talk.speaker_names.join(',')} #{@talk.title}"
         }
-        # format.turbo_stream {
-        #   update_variables_for_tracks(talk)
-        #   flash[:notice] = "OnAirに切り替えました: #{talk.start_to_end} #{talk.speaker_names.join(',')} #{talk.title}"
-        # }
       end
     end
   end
 
   def stop_on_air
-    date = params[:talk][:date]
-    track_name = params[:talk][:track_name]
-    talk = Talk.find(params[:talk][:id])
-    talk.stop_streaming
-    @conference_day = talk.conference_day
-    @track = talk.track
-    @talks = talk.track
-                 .talks
-                 .where(conference_day_id: talk.conference_day.id, track_id: talk.track.id)
-                 .order('conference_day_id ASC, start_time ASC, track_id ASC').includes(:video, :speakers, :conference_day, :track)
+    @talk = Talk.find(params[:talk][:id])
+    @talk.stop_streaming
 
     respond_to do |format|
-      format.html {
-        redirect_to(admin_tracks_path(date:, track_name:), notice: "Waiting に切り替えました: #{talk.start_to_end} #{talk.speaker_names.join(',')} #{talk.title}")
+      format.turbo_stream {
+        flash.now[:notice] = "Waitingに切り替えました: #{@talk.start_to_end} #{@talk.speaker_names.join(',')} #{@talk.title}"
       }
-      # format.turbo_stream {
-      #   flash[:notice] = "Waiting に切り替えました: #{talk.start_to_end} #{talk.speaker_names.join(',')} #{talk.title}"
-      # }
     end
   end
-
-  private
-
-  def update_variables_for_tracks(talk)
-    @conference_day = talk.conference_day
-    @track = talk.track
-    @talks = Talk.all.where(conference_day_id: @conference_day.id, track_id: @track.id)
-                 .order('conference_day_id ASC, start_time ASC, track_id ASC').includes(:video, :speakers, :conference_day, :track)
-  end
 end

app/helpers/application_helper.rb

@@ -33,24 +33,6 @@ def event_image_url
     end
   end
 
-  def link_to_add_link_fields(name, f, association, **args)
-    new_object = f.object.to_model.class.reflect_on_association(association).klass.new
-    id = new_object.object_id
-    fields = f.fields_for(association, new_object, child_index: id) do |builder|
-      render(association.to_s.singularize + '_fields', f: builder)
-    end
-    link_to(name, '#', class: 'add_link_fields ' + args[:class], data: { id:, fields: fields.gsub("\n", '') }, style: args[:style])
-  end
-
-  def link_to_add_conference_day_fields(name, f, association, **args)
-    new_object = f.object.to_model.class.reflect_on_association(association).klass.new
-    id = new_object.object_id
-    fields = f.fields_for(association, new_object, child_index: id) do |builder|
-      render(association.to_s.singularize + '_fields', f: builder)
-    end
-    link_to(name, '#', class: 'add_conference_day_fields ' + args[:class], data: { id:, fields: fields.gsub("\n", '') }, style: args[:style])
-  end
-
   def markdown(text)
     html_render = Redcarpet::Render::HTML
     options = {

app/javascript/packs/application.js

@@ -3,8 +3,8 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-require("@rails/ujs").start()
-require("turbolinks").start()
+import "@hotwired/turbo-rails"
+Turbo.session.drive = false
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
@@ -13,21 +13,10 @@ require("turbolinks").start()
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 // import '../stylesheets/application'
-import $ from 'jquery'
 import './bootstrap_custom.js'
-window.jQuery = $
-import './scripts.js'
 import './timetable.js'
 import './talks.js'
-import './conference_form.js'
-import './admin.js'
-import './contents.js'
 import './speaker_form.js'
 import './cropbox.js'
-import './copy.js'
 
 //require.context('images/cndo201', true, /\.(png|jpg|jpeg|svg)$/)
-
-// import 'regenerator-runtime/runtime'
-// import "@hotwired/turbo-rails"
-// import "controllers"

app/javascript/packs/cicd2021.js

@@ -3,26 +3,19 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-require("@rails/ujs").start()
-require("turbolinks").start()
+import Rails from "@rails/ujs"
+import "@hotwired/turbo-rails"
+
+Rails.start()
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
 //
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
-import $ from 'jquery'
+import '../stylesheets/cicd2021'
 import './bootstrap_custom.js'
-window.jQuery = $
-import './scripts.js'
 import './talks.js'
-import './conference_form.js'
-import './admin.js'
-import './contents.js'
-import './cropbox.js'
-import './timetable.js'
-import './attendee_dashboard.js'
-import "particles.js";
-import './copy.js'
 import './speaker_form.js'
+

app/javascript/packs/cndf2023.js

@@ -3,29 +3,26 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-require("@rails/ujs").start()
-require("turbolinks").start()
+import Rails from "@rails/ujs"
+import "@hotwired/turbo-rails"
+
+Rails.start()
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
 //
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
-import $ from 'jquery'
+import '../stylesheets/cndf2023'
 import './bootstrap_custom.js'
-window.jQuery = $
-import './scripts.js'
 import './talks.js'
-import './conference_form.js'
-import './admin.js'
-import './contents.js'
+import './speaker_form.js'
 import './cropbox.js'
 import './timetable.js'
-import './attendee_dashboard.js'
-import "particles.js";
-import './copy.js'
-import './speaker_form.js'
+
+
+
 // import 'regenerator-runtime/runtime'
 // import "@hotwired/turbo-rails"
 // import "controllers"

app/javascript/packs/cndo2021.js

@@ -3,8 +3,10 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-require("@rails/ujs").start()
-require("turbolinks").start()
+import Rails from "@rails/ujs"
+import "@hotwired/turbo-rails"
+
+Rails.start()
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
@@ -13,17 +15,9 @@ require("turbolinks").start()
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 // import '../stylesheets/cndo2021'
-import $ from 'jquery'
 import './bootstrap_custom.js'
-window.jQuery = $
-import './scripts.js'
 import './talks.js'
-import './conference_form.js'
-import './admin.js'
-import './contents.js'
 import './cropbox.js'
 import './timetable.js'
-import './attendee_dashboard.js'
 import "particles.js";
-import './copy.js'
-import './speaker_form.js'
+import './speaker_form.js'