Create_dots

app/components/dot_component.html.erb

@@ -0,0 +1,10 @@
+<%= tag.turbo_frame id: dom_id(@dot) do%>
+ <div
+ data-controller="dots"
+ data-action="click->dots#toggle"
+ style="<%= style %>"
+ >
+ <%= form_tag dot_path(@dot), method: :put, data: {dots_target: 'form'} do |f|%>
+ </div>
+ <% end %>
+<% end %>

app/components/dot_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class DotComponent < ViewComponent::Base
+ def initialize(dot:)
+ @dot = dot
+ end
+
+ private
+
+ def style
+ "margin: 4px;
+ border-radius: 999px;
+ width: 20px;
+ height: 20px;
+ background-color: #{color};
+ "
+ end
+
+ def color
+ @dot.enabled? ? 'green' : 'gray'
+ end
+end

app/controllers/dots_controller.rb

@@ -0,0 +1,25 @@
+class DotsController < ApplicationController
+ def index
+ @dots_by_rows = uniqe_rows.map do |row|
+ Dot.where(row:).limit(dot_limit)
+ end
+ end
+
+ def update
+ @dot = Dot.find(params[:id])
+ @previous_dot = Dot.find_by(row: @dot.row, enabled: true)
+ @dot.toggle!(:enabled)
+
+ @previous_dot.toggle!(:enabled) if @previous_dot && @previous_dot != @dot
+ end
+
+ private
+
+ def uniqe_rows
+ Dot.pluck(:row).uniq
+ end
+
+ def dot_limit
+ params[:dot_limit] || 3
+ end
+end

app/javascript/controllers/dots_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dots"
+export default class extends Controller {
+ static targets = ['form'];
+ connect() {
+ }
+ toggle(){
+ Turbo.navigator.submitForm(this.formTarget)
+ }
+}

app/models/dot.rb

@@ -0,0 +1,2 @@
+class Dot < ApplicationRecord
+end

app/views/dots/_dot.html.erb

@@ -0,0 +1 @@
+<%= render DotComponent.new(dot: dot) %>

app/views/dots/_dots_select.html.erb

@@ -0,0 +1,3 @@
+<%= form_with url: dots_path, method: :get, data: { turbo_frame: 'dots' } do |f| %>
+ <%= f.select :dot_limit, 1..3, {}, {onchange: 'this.form.requestSubmit()'} %>
+<% end %>

app/views/dots/index.html.erb

@@ -0,0 +1,11 @@
+<%= render 'dots_select' %>
+<%= render 'dots_select' %>
+
+<%= turbo_frame_tag 'dots' do %>
+ <div style="display: flex">
+ <% @dots_by_rows.each do |row| %>
+ <%= render row %>
+ <br>
+ <% end %>
+ </div>
+<% end %>

app/views/dots/update.turbo_stream.erb

@@ -0,0 +1,2 @@
+<%= turbo_stream.update @dot %>
+<%= turbo_stream.update @previous_dot if @previous_dot && @previous_dot != @dot%>

config/application.rb

@@ -18,5 +18,6 @@ class Application < Rails::Application
  #
  # config.time_zone = "Central Time (US & Canada)"
  # config.eager_load_paths << Rails.root.join("extras")
+ config.view_component.capture_compatibility_patch_enabled = true
  end
 end

config/routes.rb

@@ -1,6 +1,4 @@
 Rails.application.routes.draw do
- # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
-
- # Defines the root path route ("/")
- # root "articles#index"
+ root 'dots#index'
+ resources :dots, only: %i[index update]
 end

db/migrate/20230501132924_create_dots.rb

@@ -0,0 +1,10 @@
+class CreateDots < ActiveRecord::Migration[7.0]
+ def change
+ create_table :dots do |t|
+ t.boolean :enabled, null: false, default: false
+ t.integer :row, null: false
+
+ t.timestamps
+ end
+ end
+end