스케줄러 edit 스타일 리스트로 수정 및 토글 버튼 추가
This commit is contained in:
parent
69c98034d6
commit
07c5d0fa2a
|
|
@ -78,7 +78,7 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -86,12 +86,21 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<%= 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] %>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<div class="divide-y divide-base-border">
|
||||
<div class="flex justify-between p-4">
|
||||
<div class="text-2xl font-bold"><%= @controller.name %> 컨트롤러</div>
|
||||
<%= submit_tag "업데이트", class: "btn bg-primary" %>
|
||||
</div>
|
||||
<table class="base-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>시간</th>
|
||||
<th>분</th>
|
||||
<th>사용여부</th>
|
||||
<th>온도</th>
|
||||
<th>삭제</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<ul class="divide-y divide-base-border">
|
||||
<% @schedule.each do |s| %>
|
||||
<tr>
|
||||
<td>
|
||||
<%= 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 text-white" %>
|
||||
</td>
|
||||
<td><%= number_field_tag "schedule[#{s.id}][minute]", s.minute, min: 0, max: 59, step: 1, inputmode: "decimal", class: "input-style" %></td>
|
||||
<td><%= check_box_tag "schedule[#{s.id}][is_active]", "1", s.is_active == true || s.is_active == 1 %></td>
|
||||
<td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "input-style" %></td>
|
||||
<td>
|
||||
<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 flex-col md:flex-row items-center space-x-2">
|
||||
<div class="text-white">시간</div>
|
||||
<div class="text-xl flex items-center space-x-1">
|
||||
<%= 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 text-white" %>
|
||||
<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),
|
||||
data: {
|
||||
turbo_method: :delete,
|
||||
turbo_confirm: "정말 삭제하시겠습니까?"
|
||||
},
|
||||
class: "btn bg-danger text-sm" %>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="flex p-4 space-x-4">
|
||||
|
|
|
|||
|
|
@ -6,44 +6,44 @@
|
|||
<%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %>
|
||||
</div>
|
||||
<ul class="divide-y divide-base-border">
|
||||
<% @schedule.each do |s| %>
|
||||
<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 flex-col md:flex-row items-baseline space-x-2">
|
||||
<div class="text-white">시간</div>
|
||||
<div class="text-3xl flex items-baseline space-x-1">
|
||||
<div><%= s.hour.to_s.rjust(2, '0') %></div>
|
||||
<div>:</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>
|
||||
<% @schedule.each do |s| %>
|
||||
<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 flex-col md:flex-row items-baseline space-x-2">
|
||||
<div class="text-white">시간</div>
|
||||
<div class="text-3xl flex items-baseline space-x-1">
|
||||
<div><%= s.hour.to_s.rjust(2, '0') %></div>
|
||||
<div>:</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 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 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>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 사용 여부 -->
|
||||
<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">-->
|
||||
<!-- <thead>-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue