From 112a57f3ae0a6b77319a89c4fec1e203c9ca2575 Mon Sep 17 00:00:00 2001 From: Sam Rozenberg Date: Mon, 29 Nov 2021 19:11:53 +0100 Subject: [PATCH] changes complete --- app/assets/config/manifest.js | 1 + .../stylesheets/components/_chatroom.scss | 97 +++++++++++++++++++ app/assets/stylesheets/components/_index.scss | 4 +- app/channels/chatroom_channel.rb | 11 +++ app/controllers/activities_controller.rb | 1 + app/controllers/chatrooms_controller.rb | 2 + app/controllers/messages_controller.rb | 25 +++++ .../chatroom_subscription_controller.js | 31 ++++++ app/models/activity.rb | 2 +- app/models/chatroom.rb | 4 +- app/models/message.rb | 1 + app/policies/chatroom_policy.rb | 11 +++ app/policies/message_policy.rb | 11 +++ app/views/activities/index.html.erb | 2 - app/views/chatrooms/show.html.erb | 48 ++++++--- app/views/messages/_message.html.erb | 12 +++ app/views/pages/dashboard.html.erb | 13 +++ config/routes.rb | 4 +- db/schema.rb | 7 +- db/seeds.rb | 3 +- test/channels/chatroom_channel_test.rb | 8 ++ test/controllers/messages_controller_test.rb | 7 ++ test/policies/chatroom_policy_test.rb | 18 ++++ test/policies/message_policy_test.rb | 18 ++++ 24 files changed, 316 insertions(+), 25 deletions(-) create mode 100644 app/assets/stylesheets/components/_chatroom.scss create mode 100644 app/channels/chatroom_channel.rb create mode 100644 app/controllers/messages_controller.rb create mode 100644 app/javascript/controllers/chatroom_subscription_controller.js create mode 100644 app/policies/chatroom_policy.rb create mode 100644 app/policies/message_policy.rb create mode 100644 app/views/messages/_message.html.erb create mode 100644 test/channels/chatroom_channel_test.rb create mode 100644 test/controllers/messages_controller_test.rb create mode 100644 test/policies/chatroom_policy_test.rb create mode 100644 test/policies/message_policy_test.rb diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 5918193..994f2d8 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,2 +1,3 @@ //= link_tree ../images //= link_directory ../stylesheets .css +//= link application.css diff --git a/app/assets/stylesheets/components/_chatroom.scss b/app/assets/stylesheets/components/_chatroom.scss new file mode 100644 index 0000000..1c9f895 --- /dev/null +++ b/app/assets/stylesheets/components/_chatroom.scss @@ -0,0 +1,97 @@ +.chatroom { + background: white; + height: calc(100vh - 75px); + display: flex; + flex-direction: column; + justify-content: space-between; + flex-grow: 1; + + h1 { + border-bottom: 1px solid $red-poppy; + margin-bottom: 0; + padding: 1rem; + } + + .messages { + height: 100%; + overflow: scroll; + padding: 1rem; + } +} + +.new_message { + border-top: 1px solid #a8a8a8; + padding: 1rem; + font-size: 16px; + background-color: #f7f7f7; + + .form-group { + margin-bottom: 0; + } +} + +.all_chats { + height: calc(100vh - 75px); + background: white; + border-right: 3px solid $red-poppy ; + h1 { + border-bottom: 1px solid $red-poppy; + } +} + +#new_message { + background-color: $red-poppy; +} + +#input_form { + margin: 0 +} + + +.chatbox_box { + border: 1px solid rgb(220, 220, 220); + margin-top: 20px; + margin-bottom: 20px; +} + + +.card-chat { + overflow: hidden; + height: 120px; + background: white; + box-shadow: 0 0 15px rgba(0,0,0,0.2); + display: flex; + align-items: center; + width: 500px; + margin: 10px; + .avatar{ + width: 40px; + height: 40px; + border: 1px solid white; + margin-right: -15px; + } +} + +.card-chat-image { + height: 100%; + width: 120px; + object-fit: cover; +} + +.card-chat h2 { + font-size: 16px; + font-weight: bold; + margin: 0; +} + +.card-chat p { + font-size: 12px; + line-height: 1.4; + opacity: .7; + margin-bottom: 0; + margin-top: 8px; +} + +.card-chat .card-chat-infos { + padding: 16px; +} diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss index 7153b2c..8b47f0e 100644 --- a/app/assets/stylesheets/components/_index.scss +++ b/app/assets/stylesheets/components/_index.scss @@ -13,8 +13,6 @@ @import "sweetalert"; @import "calendar"; @import "card-user"; -<<<<<<< HEAD @import "tags"; -======= @import "carousel"; ->>>>>>> 96b69c1725fad720aefa56df629d515fd3b4c494 +@import "chatroom"; diff --git a/app/channels/chatroom_channel.rb b/app/channels/chatroom_channel.rb new file mode 100644 index 0000000..e7e4625 --- /dev/null +++ b/app/channels/chatroom_channel.rb @@ -0,0 +1,11 @@ +class ChatroomChannel < ApplicationCable::Channel + def subscribed + # stream_from "some_channel" + chatroom = Chatroom.find(params[:id]) + stream_for chatroom + end + + def unsubscribed + # Any cleanup needed when channel is unsubscribed + end +end diff --git a/app/controllers/activities_controller.rb b/app/controllers/activities_controller.rb index 7ede673..77bcc4b 100644 --- a/app/controllers/activities_controller.rb +++ b/app/controllers/activities_controller.rb @@ -100,6 +100,7 @@ def create @activity.owner = current_user if @activity.save! redirect_to activity_path(@activity) + Chatroom.create(activity: @activity, name: "#{@activity.name} chat") else render :new end diff --git a/app/controllers/chatrooms_controller.rb b/app/controllers/chatrooms_controller.rb index 36a9e49..abc91ea 100644 --- a/app/controllers/chatrooms_controller.rb +++ b/app/controllers/chatrooms_controller.rb @@ -2,5 +2,7 @@ class ChatroomsController < ApplicationController def show @activity = Activity.find(params[:activity_id]) @chatroom = Chatroom.find(params[:id]) + @message = Message.new + authorize @chatroom end end diff --git a/app/controllers/messages_controller.rb b/app/controllers/messages_controller.rb new file mode 100644 index 0000000..99f5114 --- /dev/null +++ b/app/controllers/messages_controller.rb @@ -0,0 +1,25 @@ +class MessagesController < ApplicationController + def create + @chatroom = Chatroom.find(params[:chatroom_id]) + @message = Message.new(message_params) + @message.chatroom = @chatroom + @message.user = current_user + authorize @message + if @message.save! + ChatroomChannel.broadcast_to( + @chatroom, + render_to_string(partial: "message", locals: { message: @message , new: 'true'}) + ) + redirect_to activity_chatroom_path(@chatroom.activity, @chatroom, anchor: "message-#{@message.id}") + # render plain:"" + else + render "chatrooms/show" + end + end + + private + + def message_params + params.require(:message).permit(:content) + end +end diff --git a/app/javascript/controllers/chatroom_subscription_controller.js b/app/javascript/controllers/chatroom_subscription_controller.js new file mode 100644 index 0000000..ab5fcd9 --- /dev/null +++ b/app/javascript/controllers/chatroom_subscription_controller.js @@ -0,0 +1,31 @@ +import { Controller } from "stimulus"; +import consumer from "../channels/consumer"; + +export default class extends Controller { + static values = { chatroomId: Number } + static targets = ["allmessages"] + + connect() { + this.allmessagesTarget.scrollTop = this.allmessagesTarget.scrollHeight + this.channel = consumer.subscriptions.create( + { channel: "ChatroomChannel", id: this.chatroomIdValue }, + + { received: data => { + // const last_message = document.querySelector(".new_message"); + // if (last_message) { + // last_message.classList.remove("new_message") + // } + this.allmessagesTarget.insertAdjacentHTML("beforeend", data); + this.allmessagesTarget.scrollTop = this.allmessagesTarget.scrollHeight + } + } + // this.element.insertAdjacentHTML("beforeend", data) } + ) + console.log(`Subscribe to the chatroom with the id ${this.chatroomIdValue}.`); + } + + disconnect() { + console.log("Unsubscribed from the chatroom") + this.channel.unsubscribe() + } +} diff --git a/app/models/activity.rb b/app/models/activity.rb index 3f92ddd..69f9355 100644 --- a/app/models/activity.rb +++ b/app/models/activity.rb @@ -3,7 +3,7 @@ class Activity < ApplicationRecord has_many :bookings has_many :users, through: :bookings has_one_attached :photo - has_one :chatroom + has_one :chatroom, dependent: :destroy # Geocoding set-up geocoded_by :place diff --git a/app/models/chatroom.rb b/app/models/chatroom.rb index 156ac30..a13d77e 100644 --- a/app/models/chatroom.rb +++ b/app/models/chatroom.rb @@ -1,4 +1,4 @@ class Chatroom < ApplicationRecord - has_many :messages - belong_to :activity + has_many :messages, dependent: :destroy + belongs_to :activity end diff --git a/app/models/message.rb b/app/models/message.rb index 9cebfd2..17a7c7f 100644 --- a/app/models/message.rb +++ b/app/models/message.rb @@ -1,4 +1,5 @@ class Message < ApplicationRecord belongs_to :chatroom belongs_to :user + validates :content, presence: true end diff --git a/app/policies/chatroom_policy.rb b/app/policies/chatroom_policy.rb new file mode 100644 index 0000000..619c1fa --- /dev/null +++ b/app/policies/chatroom_policy.rb @@ -0,0 +1,11 @@ +class ChatroomPolicy < ApplicationPolicy + class Scope < Scope + def resolve + scope.all + end + end + + def show? + true + end +end diff --git a/app/policies/message_policy.rb b/app/policies/message_policy.rb new file mode 100644 index 0000000..7eef69a --- /dev/null +++ b/app/policies/message_policy.rb @@ -0,0 +1,11 @@ +class MessagePolicy < ApplicationPolicy + class Scope < Scope + def resolve + scope.all + end + end + + def create? + return true + end +end diff --git a/app/views/activities/index.html.erb b/app/views/activities/index.html.erb index 69c674f..8ddd29e 100644 --- a/app/views/activities/index.html.erb +++ b/app/views/activities/index.html.erb @@ -60,5 +60,3 @@ data-mapbox-markers-value="<%= @markers.to_json %>" data-mapbox-api-key-value="<%= ENV['MAPBOX_API_KEY'] %>"> - -<%= console %> diff --git a/app/views/chatrooms/show.html.erb b/app/views/chatrooms/show.html.erb index b0b50a6..99114c1 100644 --- a/app/views/chatrooms/show.html.erb +++ b/app/views/chatrooms/show.html.erb @@ -1,15 +1,41 @@ -
-

#<%= @chatroom.name %>

- -
- <% @chatroom.messages.each do |message| %> -
- - <%= message.user.first_name %> - <%= message.created_at.strftime("%a %b %e at %l:%M %p") %> - -

<%= message.content %>

+
+
+ +
+

Chats

+ <% @current_user.activities.each do |activity| %> +
+
+ <%= cl_image_tag activity.photo.key, class:"card-chat-image" %> +
+
+

<%= activity.name %>

+

<%= activity.chatroom.messages.last.user.first_name %>: <%= activity.chatroom.messages.last.content %>

+
+
+ <% activity.users.first(3).each do |user| %> + <%= cl_image_tag user.photo.key, crop: :thumb, class: "avatar", alt: "avatar" %> + <% end %> +

+<%= activity.users.count - 3 %>

+
+
+
<% end %>
+ +
+

#<%= @chatroom.name %>

+ +
+ <% @chatroom.messages.each do |message| %> + <%= render "messages/message", message: message, new: 'false' %> + <% end %> +
+ + <%= simple_form_for [@activity, @chatroom, @message], remote: true, data:{action: "submit->chatroom-subscription#disconnect"} do |f| %> + <%= f.input :content, id: "input_form", label: false, placeholder: "Message ##{@chatroom.name}" %> + <% end %> +
+
diff --git a/app/views/messages/_message.html.erb b/app/views/messages/_message.html.erb new file mode 100644 index 0000000..ae1c609 --- /dev/null +++ b/app/views/messages/_message.html.erb @@ -0,0 +1,12 @@ +
+
+ <%= cl_image_tag message.user.photo.key, crop: :thumb, class:"avatar" %> +
+
+ + <%= message.user.first_name %> <%= message.user.last_name %> + <%= message.created_at.strftime("%a %b %e at %l:%M %p") %> + +

<%= message.content %>

+
+
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb index 14aca36..8e1e0bf 100644 --- a/app/views/pages/dashboard.html.erb +++ b/app/views/pages/dashboard.html.erb @@ -57,6 +57,19 @@ <% end %> + + <% if Activity.find_by_id(booking.activity_id).chatroom.messages.length == 0 %> + <%= link_to activity_chatroom_path(Activity.find_by_id(booking.activity_id), Activity.find_by_id(booking.activity_id).chatroom) do %> + <%# activity_chatroom_path(@chatroom.activity, @chatroom, anchor: "message-#{@message.id}") %> + + <% end %> + <% else %> + <%= link_to activity_chatroom_path(Activity.find_by_id(booking.activity_id), Activity.find_by_id(booking.activity_id).chatroom, anchor: "message-#{Activity.find_by_id(booking.activity_id).chatroom.messages.last.id}" ) do %> + <%# activity_chatroom_path(@chatroom.activity, @chatroom, anchor: "message-#{@message.id}") %> + + <% end %> + <% end %> + <% end %> diff --git a/config/routes.rb b/config/routes.rb index 5000652..294e24d 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -4,7 +4,9 @@ # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html resources :activities, only: [:index, :show] do resources :bookings, only: [:create, :destroy] - resources :chatrooms, only: :show + resources :chatrooms, only: [:index, :show, :create] do + resources :messages, only: :create + end end resources :users, only: [:show] diff --git a/db/schema.rb b/db/schema.rb index b5c7377..01026de 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -10,8 +10,7 @@ # # It's strongly recommended that you check this file into your version control system. - -ActiveRecord::Schema.define(version: 2021_11_26_113845) do +ActiveRecord::Schema.define(version: 2021_11_26_143436) do # These are extensions that must be enabled in order to support this database enable_extension "plpgsql" @@ -80,7 +79,8 @@ t.datetime "updated_at", precision: 6, null: false t.index ["chatroom_id"], name: "index_messages_on_chatroom_id" t.index ["user_id"], name: "index_messages_on_user_id" -======= + end + create_table "taggings", id: :serial, force: :cascade do |t| t.integer "tag_id" t.string "taggable_type" @@ -148,7 +148,6 @@ add_foreign_key "activities", "users", column: "owner_id" add_foreign_key "bookings", "activities" add_foreign_key "bookings", "users" - add_foreign_key "chatrooms", "activities" add_foreign_key "messages", "chatrooms" add_foreign_key "messages", "users" diff --git a/db/seeds.rb b/db/seeds.rb index 6a738d8..77109fc 100644 --- a/db/seeds.rb +++ b/db/seeds.rb @@ -133,7 +133,8 @@ activity = Activity.new(attributes) activity.photo.attach(io: URI.open(attributes[:photo]), filename: "#{activity.owner_id}_#{index}.jpg", content_type: "image/jpg") activity.save - puts "Created #{activity.name} 🌉" + Chatroom.create(activity: activity, name: "#{activity.name} chat") + puts "Created #{activity.name} and the dedicated chatroom 🌉" end puts "Creating bookings..." diff --git a/test/channels/chatroom_channel_test.rb b/test/channels/chatroom_channel_test.rb new file mode 100644 index 0000000..6b67814 --- /dev/null +++ b/test/channels/chatroom_channel_test.rb @@ -0,0 +1,8 @@ +require "test_helper" + +class ChatroomChannelTest < ActionCable::Channel::TestCase + # test "subscribes" do + # subscribe + # assert subscription.confirmed? + # end +end diff --git a/test/controllers/messages_controller_test.rb b/test/controllers/messages_controller_test.rb new file mode 100644 index 0000000..e251721 --- /dev/null +++ b/test/controllers/messages_controller_test.rb @@ -0,0 +1,7 @@ +require 'test_helper' + +class MessagesControllerTest < ActionDispatch::IntegrationTest + # test "the truth" do + # assert true + # end +end diff --git a/test/policies/chatroom_policy_test.rb b/test/policies/chatroom_policy_test.rb new file mode 100644 index 0000000..ed7b38a --- /dev/null +++ b/test/policies/chatroom_policy_test.rb @@ -0,0 +1,18 @@ +require 'test_helper' + +class ChatroomPolicyTest < ActiveSupport::TestCase + def test_scope + end + + def test_show + end + + def test_create + end + + def test_update + end + + def test_destroy + end +end diff --git a/test/policies/message_policy_test.rb b/test/policies/message_policy_test.rb new file mode 100644 index 0000000..4262669 --- /dev/null +++ b/test/policies/message_policy_test.rb @@ -0,0 +1,18 @@ +require 'test_helper' + +class MessagePolicyTest < ActiveSupport::TestCase + def test_scope + end + + def test_show + end + + def test_create + end + + def test_update + end + + def test_destroy + end +end