rubyon
/
farmitry_hvac
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

스케줄러 edit 스타일 리스트로 수정 및 토글 버튼 추가

This commit is contained in:
ming 2025-04-28 12:02:08 +09:00
parent 69c98034d6
commit 07c5d0fa2a
3 changed files with 89 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/stylesheets/application.tailwind.css
View File

@ -78,7 +78,7 @@
} }
.select-style { .select-style {
@apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs text-base-background @apply block w-full px-3 py-1.5 border border-default-slate/50 rounded-xs text-base-background
} }
.select-style option { .select-style option {
@ -86,12 +86,21 @@
} }
.input-style { .input-style {
@apply block w-full h-8 px-3 py-1.5 border border-default-slate/50 rounded-xs @apply block w-full px-3 py-1.5 border border-default-slate/50 rounded-xs
} }
.textarea-style { .textarea-style {
@apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs @apply block w-full pl-4 flex-1 py-1.5 ring-1 ring-inset ring-default-slate/50 rounded-xs
} }
/*Toggle Button*/
.toggle_style {
@apply w-14 h-8 bg-danger rounded-full peer-checked:bg-notice transition-all duration-300
}
.toggle_btn {
@apply absolute left-1 top-1 w-6 h-6 bg-white rounded-full transition-all duration-300 peer-checked:translate-x-full shadow-sm
}
} }
@layer utilities { @layer utilities {

75
app/views/schedules/schedule_edit.html.erb
View File

@ -1,45 +1,62 @@
<div class="flex flex-col h-full text-white overflow-y-auto "> <div class="flex flex-col h-full text-white overflow-y-auto">
<div class="flex flex-col flex-1 divide-y divide-base-border"> <div class="flex flex-col flex-1 divide-y divide-base-border">
<%= form_with url: schedule_edit_update_schedules_path, method: :post, class: 'flex flex-col h-full divide-y divide-border-base-border p-4' do %> <%= form_with url: schedule_edit_update_schedules_path, method: :post, class: 'flex flex-col h-full' do %>
<%= hidden_field_tag :controller_id, params[:id] %> <%= hidden_field_tag :controller_id, params[:id] %>
<div class="space-y-4"> <div class="divide-y divide-base-border">
<div class="flex justify-between"> <div class="flex justify-between p-4">
<div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div> <div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div>
<%= submit_tag "업데이트", class: "btn bg-primary" %> <%= submit_tag "업데이트", class: "btn bg-primary" %>
</div> </div>
<table class="base-table"> <ul class="divide-y divide-base-border">
<thead>
<tr>
<th>시간</th>
<th>분</th>
<th>사용여부</th>
<th>온도</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<% @schedule.each do |s| %> <% @schedule.each do |s| %>
<tr> <li class="flex justify-between items-center px-4 py-2 space-x-4">
<td> <div class="flex items-center space-x-6">
<%= select_tag "schedule[#{s.id}][hour]", <!-- 시간 -->
options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour), <div class="flex flex-col md:flex-row items-center space-x-2">
class: "select-style text-white" %> <div class="text-white">시간</div>
</td> <div class="text-xl flex items-center space-x-1">
<td><%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %></td> <%= select_tag "schedule[#{s.id}][hour]",
<td><%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1 %></td> options_for_select((0..23).map { |h| [h.to_s.rjust(2, '0'), h] }, s.hour),
<td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style" %></td> class: "select-style text-white" %>
<td> <div>:</div>
<%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %>
</div>
</div>
<!-- 온도 -->
<div class="flex flex-col md:flex-row items-center space-x-4">
<div class="text-white">온도</div>
<div class="text-xl flex items-center space-x-2">
<div>
<%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style" %>
</div>
<div class="text-white text-xl leading-8">°C</div>
</div>
</div>
</div>
<!-- 사용 여부 -->
<div class="flex flex-col md:flex-row items-center space-x-4">
<div class="text-white">사용여부</div>
<label class="relative inline-flex items-center cursor-pointer">
<%= 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="toggle_btn"></div>
</label>
</div>
<!-- 삭제 -->
<div>
<%= link_to "삭제", schedule_path(s), <%= link_to "삭제", schedule_path(s),
data: { data: {
turbo_method: :delete, turbo_method: :delete,
turbo_confirm: "정말 삭제하시겠습니까?" turbo_confirm: "정말 삭제하시겠습니까?"
}, },
class: "btn bg-danger text-sm" %> class: "btn bg-danger text-sm" %>
</td> </div>
</tr> </li>
<% end %> <% end %>
</tbody> </ul>
</table>
</div> </div>
<% end %> <% end %>
<div class="flex p-4 space-x-4"> <div class="flex p-4 space-x-4">

64
app/views/schedules/view.html.erb
View File

@ -6,44 +6,44 @@
<%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %> <%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %>
</div> </div>
<ul class="divide-y divide-base-border"> <ul class="divide-y divide-base-border">
<% @schedule.each do |s| %> <% @schedule.each do |s| %>
<li class="flex justify-between items-center px-4 py-2 space-x-4"> <li class="flex justify-between items-center px-4 py-2 space-x-4">
<div class="flex items-center space-x-6"> <div class="flex items-center space-x-6">
<!-- 시간 --> <!-- 시간 -->
<div class="flex flex-col md:flex-row items-baseline space-x-2"> <div class="flex flex-col md:flex-row items-baseline space-x-2">
<div class="text-white">시간</div> <div class="text-white">시간</div>
<div class="text-3xl flex items-baseline space-x-1"> <div class="text-3xl flex items-baseline space-x-1">
<div><%= s.hour.to_s.rjust(2, '0') %></div> <div><%= s.hour.to_s.rjust(2, '0') %></div>
<div>:</div> <div>:</div>
<div><%= s.minute.to_s.rjust(2, '0') %></div> <div><%= s.minute.to_s.rjust(2, '0') %></div>
</div>
</div>
<!-- 온도 -->
<div class="flex flex-col md:flex-row items-baseline space-x-4">
<div class="text-white">온도</div>
<div class="text-3xl flex items-end space-x-2">
<div><%= s.temperature %></div>
<div class="text-white text-xl leading-8">°C</div>
</div>
</div> </div>
</div> </div>
<!-- 사용 여부 --> <!-- 온도 -->
<div class="flex flex-col md:flex-row items-baseline space-x-4"> <div class="flex flex-col md:flex-row items-baseline space-x-4">
<div class="text-white mb-1">사용여부</div> <div class="text-white">온도</div>
<div class="text-3xl"> <div class="text-3xl flex items-end space-x-2">
<%#= s.is_active %> <div><%= s.temperature %></div>
<% if s.is_active %> <div class="text-white text-xl leading-8">°C</div>
<i class="fa-solid fa-check text-notice"></i>
<% else %>
<i class="fa-solid fa-xmark text-danger"></i>
<% end %>
</div> </div>
</div> </div>
</li> </div>
<% end %>
</ul> <!-- 사용 여부 -->
<div class="flex flex-col md:flex-row items-baseline space-x-4">
<div class="text-white mb-1">사용여부</div>
<div class="text-3xl">
<%#= s.is_active %>
<% if s.is_active %>
<i class="fa-solid fa-check text-notice"></i>
<% else %>
<i class="fa-solid fa-xmark text-danger"></i>
<% end %>
</div>
</div>
</li>
<% end %>
</ul>
<!-- <table class="base-table">--> <!-- <table class="base-table">-->
<!-- <thead>--> <!-- <thead>-->