대시보드 카드 on/off 토글 추가, 페이지 추가

app/assets/stylesheets/application.tailwind.css

@@ -21,6 +21,8 @@
     --color-base-background: rgb(242, 244, 248);
     --color-base-sidebar: rgb(235, 238, 244);
     --color-base-content: rgb(253, 253, 253);
+    --color-on-content: rgb(192, 216, 245);
+    --color-off-content: rgb(187, 187, 191);
     --color-base-third: rgb(201, 208, 210);
     --color-base-text: rgb(39, 41, 49);
     --color-base-border: rgb(223, 226, 234);
@@ -190,7 +192,7 @@
 
     /*Dashboard*/
     .dashboard-group {
-        @apply rounded-md bg-base-content min-h-32 p-4 flex flex-col justify-between cursor-pointer shadow-xs
+        @apply rounded-md min-h-32 p-4 flex flex-col justify-between cursor-pointer shadow-xs
     }
 
     /*Pagy*/

app/controllers/environment_controller.rb

@@ -3,31 +3,41 @@ class EnvironmentController < ApplicationController
     @controllers = Controller.all
   end
 
-  def view_temp
+  # def view_temp
-    @controller = Controller.find(params[:id])
+  #   @controller = Controller.find(params[:id])
-    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  #   @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
-  end
+  # end
-
+  #
-  def view_humidity
+  # def view_humidity
-    @controller = Controller.find(params[:id])
+  #   @controller = Controller.find(params[:id])
-    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  #   @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
-  end
+  # end
-
+  #
-  def view_co2
+  # def view_co2
-    @controller = Controller.find(params[:id])
+  #   @controller = Controller.find(params[:id])
-    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  #   @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
-  end
+  # end
 
   def view_area
     @controller = Controller.find(params[:id])
     @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
   end
 
+  def edit_humidity
+    @controller = Controller.find(params[:id])
+    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  end
+
   def edit_temp
     @controller = Controller.find(params[:id])
     @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
   end
 
+  def edit_co2
+    @controller = Controller.find(params[:id])
+    @schedule = Schedule.where(controller_id: params[:id]).order(:hour, :minute)
+  end
+
   def create
     @schedule = Schedule.new(schedule_params)
 

app/javascript/controllers/index.js

@@ -15,3 +15,6 @@ application.register("sidebar", SidebarController)
 
 import TimerController from "./timer_controller"
 application.register("timer", TimerController)
+
+import ToggleController from "./toggle_controller"
+application.register("toggle", ToggleController)

app/javascript/controllers/modals_controller.js

@@ -5,6 +5,7 @@ import { useClickOutside } from 'stimulus-use'
 export default class extends Controller {
   connect() {
     // useClickOutside(this)
+    console.log("modal stimulus")
     this.boundHandleKeydown = this.handleKeydown.bind(this)
     document.addEventListener("keydown", this.boundHandleKeydown)
     window.addEventListener('modals:close', this.close.bind(this))

app/javascript/controllers/toggle_controller.js

@@ -0,0 +1,40 @@
+// controllers/toggle_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["label", "dot", "background"]
+
+  connect() {
+    this.state = true
+    this.update()
+  }
+
+  toggle() {
+    this.state = !this.state
+    this.update()
+  }
+
+  update() {
+    if (this.state) {
+      this.labelTarget.textContent = "ON"
+      this.labelTarget.classList.add("text-notice")
+      this.labelTarget.classList.remove("text-gray-400")
+
+      this.dotTarget.classList.add("bg-notice")
+      this.dotTarget.classList.remove("bg-gray-400")
+
+      // this.backgroundTarget.classList.add("bg-on-content")
+      // this.backgroundTarget.classList.remove("bg-off-content")
+    } else {
+      this.labelTarget.textContent = "OFF"
+      this.labelTarget.classList.add("text-gray-400")
+      this.labelTarget.classList.remove("text-notice")
+
+      this.dotTarget.classList.add("bg-gray-400")
+      this.dotTarget.classList.remove("bg-notice")
+
+      // this.backgroundTarget.classList.add("bg-off-content")
+      // this.backgroundTarget.classList.remove("bg-on-content")
+    }
+  }
+}

app/views/environment/edit_co2.html.erb

@@ -3,7 +3,7 @@
     <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
       <i class="fa-solid fa-angle-left text-2xl"></i>
     <% end %>
-    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 CO</span><span class="text-sm">2</span> 스케줄러</div>
   </div>
   <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
     <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>

app/views/environment/edit_humidity.html.erb

@@ -3,7 +3,7 @@
     <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
       <i class="fa-solid fa-angle-left text-2xl"></i>
     <% end %>
-    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 습도 스케줄러</div>
   </div>
   <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
     <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>

app/views/environment/index.html.erb

@@ -1,7 +1,7 @@
 <div class="w-full h-full content overflow-y-auto">
   <div class="flex-1 grid grid-cols-2 xl:grid-cols-4 gap-4">
     <!-- 실내온도 -->
-    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -33,7 +33,7 @@
     <% end %>
 
     <!-- 실내습도 -->
-    <%= link_to edit_humidity_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_humidity_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -65,7 +65,7 @@
     <% end %>
 
     <!-- CO2 -->
-    <%= link_to edit_co2_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_co2_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -105,10 +105,13 @@
     <% end %>
 
     <!-- none -->
-    <div class="dashboard-group"></div>
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background"></div>
 
     <!-- 랙 -->
-    <%= link_to rack_index_path, class: "dashboard-group" do %>
+    <%= link_to rack_index_path, class: "dashboard-group bg-base-content" do %>
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -133,7 +136,7 @@
     <% end %>
 
     <!-- 센서 구역 -->
-    <%= link_to edit_area_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_area_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -158,7 +161,10 @@
     <% end %>
 
     <!-- LED -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -182,7 +188,10 @@
     </div>
 
     <!-- Fan -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">

app/views/nutrient/edit_ec.html.erb

@@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/nutrient/edit_mixa.html.erb

@@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/nutrient/edit_mixb.html.erb

@@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to environment_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/nutrient/edit_ph.html.erb

@@ -0,0 +1,86 @@
+<div class="flex flex-col h-full lg:rounded-lg">
+  <div class="flex flex-row items-center space-x-4 p-2">
+    <%= link_to nutrient_index_path(id: params[:id]), class: "flex items-center" do %>
+      <i class="fa-solid fa-angle-left text-2xl"></i>
+    <% end %>
+    <div class="text-2xl font-bold leading-10"><%= @controller.id %>동 온도 스케줄러</div>
+  </div>
+  <div class="space-y-4 overflow-y-hidden divide-y divide-base-border bg-base-content rounded-lg p-4">
+    <%= form_with url: edit_temp_environment_path, method: :post, class: 'flex flex-col h-full' do %>
+      <%= hidden_field_tag :controller_id, params[:id] %>
+      <div class="flex flex-col divide-y divide-base-border overflow-y-hidden flex-1 space-y-4">
+        <%= submit_tag "업데이트", class: "btn bg-primary w-fit" %>
+        <div class="overflow-y-auto flex-1 min-h-0 border border-base-border rounded-lg">
+          <ul class="divide-y divide-base-border whitespace-nowrap relative">
+            <% if @schedule.present? %>
+              <% @schedule.each do |s| %>
+                <li class="flex justify-between items-center px-4 py-2 space-x-4 h-full relative">
+                  <div class="flex items-center space-x-4 basis-3/5 h-full">
+                    <!-- 시간 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">시간</div>
+                      <div class="text-xl flex items-center space-x-1 w-full h-full">
+                        <%= select_tag "schedule[#{s.id}][hour]",
+                                       options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
+                                       class: "select-style  min-w-[60px]" %>
+                        <div>:</div>
+                        <%= number_field_tag "schedule[#{s.id}][minute]",
+                                             s.minute, min: 0, max: 59, step: 1, inputmode: "decimal",
+                                             class: "input-style min-w-[60px]" %>
+                      </div>
+                    </div>
+
+                    <!-- 온도 -->
+                    <div class="flex flex-col lg:flex-row h-full items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0">
+                      <div class=" text-left w-full lg:w-auto">온도 (°C)</div>
+                      <div class="text-xl flex items-center">
+                        <%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, min: -99, max: 99, step: "0.1", inputmode: "decimal", class: "input-style min-w-[68px]" %>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center space-x-4 basis-2/5 justify-end h-full">
+                    <!-- 사용 여부 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full">
+                      <div class="">ON/OFF</div>
+                      <label class="relative inline-flex items-center cursor-pointer h-full">
+                        <%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1, class: "sr-only peer" %>
+                        <div class="toggle_style"></div>
+                        <div class="btn-toggle-round"></div>
+                      </label>
+                    </div>
+
+                    <!-- 삭제 -->
+                    <div class="flex flex-col lg:flex-row items-center space-x-0 space-y-2 lg:space-x-4 lg:space-y-0 h-full relative">
+                      <div class="">&nbsp;</div>
+                      <%= link_to schedule_path(s),
+                                  data: { turbo_method: :delete, turbo_confirm: "정말 삭제하시겠습니까?" },
+                                  class: "btn bg-danger text-sm flex items-center px-2 py-0 my-1.5 lg:px-4 lg:py-1.5 lg:my-0" do %>
+                        <div class="hidden lg:block">삭제</div>
+                        <div class="block lg:hidden"><i class="fa-solid fa-xmark"></i></div>
+                      <% end %>
+                    </div>
+                  </div>
+                </li>
+              <% end %>
+            <% else %>
+              <li class="text-center p-4 w-full">저장된 스케줄이 없습니다.</li>
+            <% end %>
+          </ul>
+        </div>
+        <div class="flex space-x-4">
+          <%= button_to "초기화", reset_schedule_path(params[:id]),
+                        method: :post,
+                        data: { turbo_confirm: "정말 초기화하시겠습니까? 모든 스케줄 데이터가 삭제됩니다." },
+                        class: "btn bg-danger" %>
+          <%= button_to "추가하기", open_modals_path(type: "add_schedule", id: params[:id]),
+                        class: "btn bg-default-slate",
+                        data: {
+                          turbo_method: :post,
+                          turbo_frame: "modals"
+                        } %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/nutrient/index.html.erb

@@ -1,7 +1,7 @@
 <div class="w-full h-full content overflow-y-auto">
   <div class="flex-1 grid grid-cols-2 xl:grid-cols-4 gap-4">
     <!-- pH -->
-    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -34,7 +34,7 @@
     <% end %>
 
     <!-- EC -->
-    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group" do %>
+    <%= link_to edit_temp_environment_path(id: params[:id]), class: "dashboard-group bg-base-content" do %>
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -67,7 +67,10 @@
     <% end %>
 
     <!-- 양액 온도 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -80,7 +83,11 @@
         <hr>
         <div class="flex flex-row justify-between items-baseline w-full divide-x divide-base-border">
           <div class="flex flex-col items-baseline text-right w-full">
-            <div class="opacity-50">현재 온도</div>
+            <div class="opacity-50">양액 온도</div>
+            <div class="font-bold text-3xl">20.2<span class="font-normal text-2xl"> °C</span></div>
+          </div>
+          <div class="flex flex-col items-baseline text-right w-full pl-4">
+            <div class="opacity-50">원액 온도</div>
             <div class="font-bold text-3xl">20.2<span class="font-normal text-2xl"> °C</span></div>
           </div>
         </div>
@@ -88,7 +95,10 @@
     </div>
 
     <!-- 수위 정보 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -103,7 +113,7 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">상태</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
               <div class="font-bold text-3xl text-notice">정상</div>
             </div>
           </div>
@@ -112,8 +122,11 @@
     </div>
 
     <!-- 원수 탱크 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
-      <div class="flex flex-col justify-between h-full space-y-2">
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
+      <div class="flex flex-col justify-between h-full space-y-2 cursor-pointer">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
             <i class="fa-solid fa-fan text-etc-color text-3xl text-left"></i>
@@ -127,8 +140,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -136,7 +149,10 @@
     </div>
 
     <!-- 원수 펌프 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -151,8 +167,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -160,7 +176,10 @@
     </div>
 
     <!-- 교반기A -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -183,8 +202,8 @@
           <div class="flex flex-col items-baseline text-right w-full pl-4">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -192,7 +211,10 @@
     </div>
 
     <!-- 교반기B -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -215,8 +237,8 @@
           <div class="flex flex-col items-baseline text-right w-full pl-4">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -224,7 +246,10 @@
     </div>
 
     <!-- 급수/공급 펌프 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -239,8 +264,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -248,7 +273,10 @@
     </div>
 
     <!-- 1번급수 솔벨브 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -263,8 +291,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -272,7 +300,10 @@
     </div>
 
     <!-- 2번급수 솔벨브 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -287,8 +318,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -296,7 +327,10 @@
     </div>
 
     <!-- 퇴수 솔벨브 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -311,8 +345,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -320,7 +354,10 @@
     </div>
 
     <!-- 솔레노이드 벨브A -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -335,8 +372,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -344,7 +381,10 @@
     </div>
 
     <!-- 솔레노이드 벨브B -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -359,8 +399,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -368,7 +408,10 @@
     </div>
 
     <!-- 솔레노이드 벨브C -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full space-y-2">
         <div class="flex flex-row justify-between w-full">
           <div class="flex flex-row space-x-4 items-center">
@@ -383,8 +426,8 @@
           <div class="flex flex-col items-baseline text-right w-full">
             <div class="opacity-50">모드</div>
             <div class="flex flex-row items-center space-x-2">
-              <div class="size-5 bg-notice rounded-full"></div>
+              <div data-toggle-target="dot" class="size-5 bg-notice rounded-full"></div>
-              <div class="font-bold text-3xl text-notice">ON</div>
+              <div data-toggle-target="label" class="font-bold text-3xl text-notice">ON</div>
             </div>
           </div>
         </div>
@@ -392,7 +435,10 @@
     </div>
 
     <!-- 긴급 정지 -->
-    <div class="dashboard-group">
+    <div class="dashboard-group bg-base-content"
+         data-controller="toggle"
+         data-action="click->toggle#toggle"
+         data-toggle-target="background">
       <div class="flex flex-col justify-between h-full">
         <div class="text-2xl">긴급 정지</div>
         <div class="flex flex-row justify-end items-baseline w-full">

config/routes.rb

@@ -41,7 +41,16 @@ Rails.application.routes.draw do
       post "edit_temp_update"
     end
   end
-  resources :nutrient
+  resources :nutrient do
-
+    member do
+      get "edit_ph"
+      get "edit_ec"
+      get "edit_mixa"
+      get "edit_mixb"
+    end
+    collection do
+      post "edit_temp_update"
+    end
+  end
   resources :rack
 end