light_switch 0.1.0

data/app/assets/stylesheets/light_switch/skeleton.css

@@ -0,0 +1,418 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline-block;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}

data/app/controllers/light_switch/application_controller.rb

@@ -0,0 +1,4 @@
+module LightSwitch
+  class ApplicationController < ActionController::Base
+  end
+end

data/app/controllers/light_switch/switches_controller.rb

@@ -0,0 +1,52 @@
+module LightSwitch
+  class SwitchesController < ApplicationController
+    before_action :load_switches, on: %i[index create]
+
+    def index
+      @switch = Switch.new
+    end
+
+    def create
+      @switch = Switch.new(switch_params.slice(:name))
+
+      if @switch.save
+        redirect_to [:switches], notice: "Switch #{@switch.name} was successfully created.", status: :see_other
+      else
+        render :index, status: :unprocessable_entity
+      end
+    rescue ActiveRecord::RecordNotUnique
+      @switch.errors.add(:name, "already taken")
+      render :index, status: :unprocessable_entity
+    end
+
+    def update
+      @switch = Switch.find(params[:id])
+
+      if @switch.update(switch_params.slice(:state))
+        redirect_to [:switches], notice: "Switch #{@switch.name} was successfully updated.", status: :see_other
+      else
+        errors = @switch.errors.full_messages.to_sentence
+        @switch.restore_attributes
+        redirect_to [:switches], alert: "Failed to update Switch #{@switch.name}: #{errors}", status: :see_other
+      end
+    rescue ActiveRecord::RecordNotFound
+      redirect_to [:switches], alert: "Failed to update Switch because it has been deleted.", status: :see_other
+    end
+
+    def destroy
+      switch = Switch.find_by(id: params[:id])
+      switch&.destroy!
+      redirect_to [:switches], notice: "Switch #{switch.name} was successfully deleted.", status: :see_other
+    end
+
+    private
+
+    def load_switches
+      @switches = Switch.ordered
+    end
+
+    def switch_params
+      params.require(:switch).permit(:name, :state)
+    end
+  end
+end

data/app/models/concerns/light_switch/switch/notifications_concern.rb

@@ -0,0 +1,23 @@
+module LightSwitch::Switch::NotificationsConcern
+  extend ActiveSupport::Concern
+
+  included do
+    after_commit :publish_committed, if: :saved_changes?
+  end
+
+  private
+
+  def publish_committed
+    event = if previously_new_record?
+      :create
+    elsif destroyed?
+      :destroy
+    else
+      :update
+    end
+
+    ActiveSupport::Notifications.instrument("#{event}_committed.switch.light_switch", switch: self) do
+      # Do nothing; just publishing the event for subscribers
+    end
+  end
+end

data/app/models/light_switch/application_record.rb

@@ -0,0 +1,5 @@
+module LightSwitch
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/light_switch/switch.rb

@@ -0,0 +1,29 @@
+module LightSwitch
+  class Switch < ApplicationRecord
+    include NotificationsConcern
+
+    if Gem::Version.new(Rails.version) >= Gem::Version.new("7.2")
+      enum :state, {on: "on", off: "off"}
+    else
+      enum state: {on: "on", off: "off"}
+    end
+
+    scope :ordered, -> { order(:name) }
+
+    validates :name, :state, presence: true
+
+    before_validation :normalize_name
+
+    after_save :delete_from_cache
+
+    private
+
+    def delete_from_cache
+      LightSwitch.config.cache.delete("#{self.class.name.underscore}/#{name}")
+    end
+
+    def normalize_name
+      name.tap(&:strip!).downcase! if name.present?
+    end
+  end
+end

data/app/views/layouts/light_switch/application.html.erb

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Light Switch</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
+
+  <%= stylesheet_link_tag "light_switch/application", media: "all", data: { turbolinks_track: :reload } %>
+  <%= javascript_include_tag "light_switch/application", type: :module, defer: true, data: { turbolinks_track: :reload } %>
+</head>
+<body>
+  <div class="container">
+    <div class="site-header">
+      <%= inline_svg_tag("light_switch/light-switch.svg", class: "site-logo") %>
+      <h2>Light Switch</h2>
+    </div>
+
+    <%= yield %>
+
+    <div class="site-footer u-full-width">
+      Light Switch logo was created by
+      <a href="https://thenounproject.com/snjeffries1106">Sara Jeffries</a>
+      from the Noun Project.
+    </div>
+  </div>
+</body>
+</html>

data/app/views/light_switch/switches/_form.html.erb

@@ -0,0 +1,6 @@
+<%= render "form_errors", switch: switch %>
+
+<%= form_with(model: switch, class: "form-inline") do |form| %>
+    <%= form.text_field :name, placeholder: "Name" %>
+    <%= form.submit %>
+<% end %>

data/app/views/light_switch/switches/_form_errors.html.erb

@@ -0,0 +1,5 @@
+<% if switch.present? && switch.errors.any? %>
+  <p class="form-errors alert">
+    Failed to save: <%= switch.errors.full_messages.to_sentence %>.
+  </p>
+<% end %>

data/app/views/light_switch/switches/_switch.html.erb

@@ -0,0 +1,23 @@
+<tr id="<%= dom_id(switch)%>">
+  <td><%= switch.name %></td>
+  <td>
+    <%= form_with(model: switch, class: "form-inline") do |form| %>
+      <span class="mr-1 switch-state <%= switch.on? ? "switch-state-on" : "switch-state-off" %>">
+        <%= switch.state.upcase %>
+      </span>
+      <%= form.hidden_field :state, value: switch.on? ? "off" : "on" %>
+      <%=
+        form.submit(
+          switch.on? ? "Turn off" : "Turn on",
+          class: "turn-#{switch.on? ? 'off' : 'on'}",
+          data: { turbo_confirm: t(".confirm.turn_#{switch.on? ? "off" : "on"}") }
+        )
+      %>
+    <% end %>
+  </td>
+  <td><%= l(switch.created_at, format: :long) %></td>
+  <td><%= l(switch.updated_at, format: :long) %></td>
+  <td>
+    <%= button_to "Delete", switch, method: :delete, data: { turbo_confirm: t(".confirm.delete", name: switch.name) }, form_class: "form-inline" %>
+  </td>
+</tr>

data/app/views/light_switch/switches/index.html.erb

@@ -0,0 +1,22 @@
+<h4>Switches</h4>
+
+<% flash.each do |key, msg| %>
+  <p class="<%= key %>"><%= msg %></p>
+<% end %>
+
+<table id="switches" class="u-full-width">
+  <thead>
+    <th>Name</th>
+    <th>State</th>
+    <th>Created At</th>
+    <th>Updated At</th>
+    <th><!-- Actions --></th>
+  </thead>
+  <tbody>
+    <%= render @switches %>
+  </tbody>
+</table>
+
+<div id="new-switch">
+  <%= render "form", switch: @switch %>
+</div>

data/config/locales/light_switch.en.yml

@@ -0,0 +1,13 @@
+en:
+  light_switch:
+    switches:
+      switch:
+        confirm:
+          delete: >
+            Are you sure that you want to delete %{name}?
+
+
+            If your code still references this switch, it will behave as if it is turned on.
+
+          turn_off: Are you sure that you want to turn off this switch?
+          turn_on: Are you sure that you want to turn on this switch?

data/config/routes.rb

@@ -0,0 +1,5 @@
+LightSwitch::Engine.routes.draw do
+  resources :switches, except: %i[edit show]
+
+  root "switches#index"
+end

data/db/migrate/20231116015256_create_light_switch_switches.rb

@@ -0,0 +1,11 @@
+class CreateLightSwitchSwitches < ActiveRecord::Migration["#{Rails::VERSION::MAJOR}.#{Rails::VERSION::MINOR}"]
+  def change
+    create_table :light_switch_switches do |t|
+      t.string :name, null: false
+      t.string :state, null: false, default: "on"
+
+      t.timestamps
+    end
+    add_index :light_switch_switches, :name, unique: true
+  end
+end

data/lib/light_switch/configuration.rb

@@ -0,0 +1,5 @@
+module LightSwitch
+  class Configuration
+    attr_accessor :cache, :cache_fetch_options, :switches
+  end
+end

data/lib/light_switch/engine.rb

@@ -0,0 +1,27 @@
+require "inline_svg"
+require "turbo-rails"
+
+module LightSwitch
+  class Engine < ::Rails::Engine
+    isolate_namespace LightSwitch
+
+    config.before_configuration { LightSwitch.configure_defaults }
+
+    initializer "light_switch.assets.precompile" do |app|
+      app.config.assets.precompile += [
+        "light_switch/application.css",
+        "light_switch/application.js",
+        "light_switch/light-switch.svg"
+      ]
+    end
+
+    initializer "light_switch.create_switches", after: :load_config_initializers do
+      ActiveSupport.on_load(:active_record) do
+        LightSwitch.config.switches.each do |name|
+          Switch.find_or_create_by!(name: name.to_s) if Switch.table_exists?
+        rescue ActiveRecord::RecordNotUnique
+        end
+      end
+    end
+  end
+end