feat: added instant update and create handling in both admin and user space
Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>
This commit is contained in:
parent
d07857c011
commit
86f5e7d088
@ -1,4 +1,5 @@
|
|||||||
class CountChannel < ApplicationCable::Channel
|
class CountChannel < ApplicationCable::Channel
|
||||||
|
|
||||||
def subscribed
|
def subscribed
|
||||||
stream_from "counts"
|
stream_from "counts"
|
||||||
end
|
end
|
||||||
@ -8,7 +9,7 @@ class CountChannel < ApplicationCable::Channel
|
|||||||
end
|
end
|
||||||
|
|
||||||
def plus_one(params)
|
def plus_one(params)
|
||||||
unless current_user.nil?
|
unless current_user.nil? || params["id"].nil?
|
||||||
total = Total.find(params["id"])
|
total = Total.find(params["id"])
|
||||||
unless total.nil?
|
unless total.nil?
|
||||||
total.update(count: total.count + 1)
|
total.update(count: total.count + 1)
|
||||||
@ -17,7 +18,7 @@ class CountChannel < ApplicationCable::Channel
|
|||||||
end
|
end
|
||||||
|
|
||||||
def minus_one(params)
|
def minus_one(params)
|
||||||
unless current_user.nil?
|
unless current_user.nil? || params["id"].nil?
|
||||||
total = Total.find(params["id"])
|
total = Total.find(params["id"])
|
||||||
unless total.nil?
|
unless total.nil?
|
||||||
total.update(count: total.count - 1)
|
total.update(count: total.count - 1)
|
||||||
@ -25,12 +26,13 @@ class CountChannel < ApplicationCable::Channel
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def self.create(total)
|
|
||||||
|
|
||||||
end
|
|
||||||
|
|
||||||
def self.update(total)
|
def self.update(total)
|
||||||
ActionCable.server.broadcast("counts", {"update": total})
|
ActionCable.server.broadcast("counts", {"update": {
|
||||||
|
id: total.id,
|
||||||
|
name: total.name,
|
||||||
|
count: total.count,
|
||||||
|
edit_link: Rails.application.routes.url_helpers.edit_count_path(total)
|
||||||
|
}})
|
||||||
end
|
end
|
||||||
|
|
||||||
def self.destroy(total)
|
def self.destroy(total)
|
||||||
|
@ -13,8 +13,12 @@ const count_channel = consumer.subscriptions.create("CountChannel", {
|
|||||||
received(data) {
|
received(data) {
|
||||||
// Called when there's incoming data on the websocket for this channel
|
// Called when there's incoming data on the websocket for this channel
|
||||||
console.log(data)
|
console.log(data)
|
||||||
if (data.update !== undefined)
|
if (data.update !== undefined) {
|
||||||
this.update(data.update)
|
if ($("[data-count-id='" + data.update.id + "']").length)
|
||||||
|
this.update(data.update)
|
||||||
|
else
|
||||||
|
this.create(data.update)
|
||||||
|
}
|
||||||
|
|
||||||
if (data.destroy !== undefined)
|
if (data.destroy !== undefined)
|
||||||
this.destroy(data.destroy)
|
this.destroy(data.destroy)
|
||||||
@ -28,10 +32,41 @@ const count_channel = consumer.subscriptions.create("CountChannel", {
|
|||||||
destroy(data) {
|
destroy(data) {
|
||||||
$("[data-count-id='"+ data + "']").remove()
|
$("[data-count-id='"+ data + "']").remove()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
create(data) {
|
||||||
|
let created = $("#template").clone()
|
||||||
|
created.attr("data-count-id", data.id)
|
||||||
|
created.find(".name").text(data.name)
|
||||||
|
created.find(".count").text(data.count)
|
||||||
|
created.find(".minus").click(function () {
|
||||||
|
count_channel.minus_one(data.id)
|
||||||
|
})
|
||||||
|
created.find(".plus").click(function () {
|
||||||
|
count_channel.plus_one(data.id)
|
||||||
|
})
|
||||||
|
created.find(".edit").attr("href", data.edit_link)
|
||||||
|
created.removeClass("d-none")
|
||||||
|
$("#count-list").append(created)
|
||||||
|
},
|
||||||
|
|
||||||
|
minus_one(id) {
|
||||||
|
if (count_channel !== undefined && !count_channel.consumer.connection.disconnected) {
|
||||||
|
count_channel.perform("minus_one", { "id": id })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
plus_one(id) {
|
||||||
|
if (count_channel !== undefined && !count_channel.consumer.connection.disconnected) {
|
||||||
|
count_channel.perform("plus_one", { "id": id })
|
||||||
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('turbo:load', function() {
|
$(document).on('turbo:load', function() {
|
||||||
if (count_channel !== undefined && !count_channel.consumer.connection.disconnected) {
|
$("[data-count-id] .minus").click(function () {
|
||||||
$("")
|
count_channel.minus_one($(this).parents("[data-count-id]").attr("data-count-id"))
|
||||||
}
|
});
|
||||||
|
$("[data-count-id] .plus").click(function () {
|
||||||
|
count_channel.plus_one($(this).parents("[data-count-id]").attr("data-count-id"))
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
@ -16,8 +16,8 @@ class Total < ApplicationRecord
|
|||||||
validates_uniqueness_of :name
|
validates_uniqueness_of :name
|
||||||
validates_length_of :name, in: 1..32
|
validates_length_of :name, in: 1..32
|
||||||
|
|
||||||
after_save do
|
after_create do
|
||||||
CountChannel.create(self)
|
CountChannel.update(self)
|
||||||
end
|
end
|
||||||
|
|
||||||
after_update do
|
after_update do
|
||||||
|
@ -1,4 +1,19 @@
|
|||||||
<div class="mt-2 row row-cols-4">
|
<div class="mt-2 row row-cols-4" id="count-list">
|
||||||
|
<div class="col mt-1 mb-2 text-center d-none" id="template" data-count-id="">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col text-end">
|
||||||
|
<button type="button" class="btn btn-lg btn-outline-danger fw-bold my-auto fs-3 minus">-</button>
|
||||||
|
</div>
|
||||||
|
<span class="col fw-bold fs-1 count"></span>
|
||||||
|
<div class="col text-start">
|
||||||
|
<button type="button" class="btn btn-lg btn-outline-success fw-bold my-auto fs-3 plus">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fw-light fs-4">
|
||||||
|
<span class="name"></span>
|
||||||
|
<span><%= link_to "", "", class: "btn btn-sm btn-primary bi-pen-fill edit" %></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<% @counts.each { |c| %>
|
<% @counts.each { |c| %>
|
||||||
<div class="col mt-1 mb-2 text-center" data-count-id="<%= c.id %>">
|
<div class="col mt-1 mb-2 text-center" data-count-id="<%= c.id %>">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@ -11,11 +26,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fw-light fs-4">
|
<div class="fw-light fs-4">
|
||||||
<span><%= c.name %></span>
|
<span class="name"><%= c.name %></span>
|
||||||
<span><%= link_to "", edit_count_path(c), class: "btn btn-sm btn-primary bi-pen-fill" %></span>
|
<span><%= link_to "", edit_count_path(c), class: "btn btn-sm btn-primary bi-pen-fill" %></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
<div class="fixed-bottom text-end m-5">
|
<div class="fixed-bottom text-end m-5">
|
||||||
<%= link_to "", new_count_path, class: "btn btn-lg btn-success fs-3 bi-plus-lg" %>
|
<%= link_to "", new_count_path, class: "btn btn-lg btn-success fs-3 bi-plus-lg" %>
|
||||||
|
@ -1,4 +1,8 @@
|
|||||||
<div class="mt-2 row row-cols-4">
|
<div class="mt-2 row row-cols-4" id="count-list">
|
||||||
|
<div class="col text-center d-none" data-count-id="" id="template">
|
||||||
|
<span class="fw-bold fs-1 count"></span>
|
||||||
|
<div class="fw-light fs-4 name"></div>
|
||||||
|
</div>
|
||||||
<% @counts.each { |c| %>
|
<% @counts.each { |c| %>
|
||||||
<div class="col text-center" data-count-id="<%= c.id %>">
|
<div class="col text-center" data-count-id="<%= c.id %>">
|
||||||
<span class="fw-bold fs-1 count"><%= c.count %></span>
|
<span class="fw-bold fs-1 count"><%= c.count %></span>
|
||||||
|
Loading…
Reference in New Issue
Block a user