대시보드 화면 디자인 수정 중
This commit is contained in:
86
app/views/environment/edit_temp.html.erb
Normal file
86
app/views/environment/edit_temp.html.erb
Normal file
@@ -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 content overflow-y-hidden divide-y divide-base-border">
|
||||
<%= 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="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=""> </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>
|
||||
@@ -1,14 +1,32 @@
|
||||
<div class="w-full h-full content">
|
||||
<div class="flex-1 grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<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 view_temp_environment_path(id: params[:id]), class: "dashboard-group" do %>
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="text-xl">실내온도</div>
|
||||
<div class="flex flex-row justify-between items-baseline w-full">
|
||||
<i class="fa-solid fa-temperature-quarter text-base-text/80 text-4xl text-left w-full"></i>
|
||||
<div class="items-baseline text-right w-full">
|
||||
<span class="text-4xl font-['Chakra_Petch'] font-light">15.5</span>
|
||||
<span class="text-2xl">°C</span>
|
||||
<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">
|
||||
<i class="fa-solid fa-temperature-quarter text-env-color text-4xl text-left"></i>
|
||||
<div class="items-baseline">
|
||||
<span class="text-2xl">온도</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-calendar-days text-2xl"></i>
|
||||
<i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
|
||||
</div>
|
||||
</div>
|
||||
<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="font-bold text-3xl">16.5<span class="font-normal text-2xl"> °C</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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="font-bold text-3xl">15.5<span class="font-normal text-2xl"> °C</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,12 +34,31 @@
|
||||
|
||||
<!-- 실내습도 -->
|
||||
<%= link_to view_humidity_environment_path(id: params[:id]), class: "dashboard-group" do %>
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="text-xl">실내습도</div>
|
||||
<div class="flex flex-row justify-between items-baseline w-full">
|
||||
<i class="fa-solid fa-droplet text-base-text/80 text-4xl text-left w-full"></i>
|
||||
<div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']">60</span>
|
||||
<span class="text-2xl">%</span>
|
||||
<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">
|
||||
<i class="fa-solid fa-droplet text-env-color text-4xl text-left"></i>
|
||||
<div class="items-baseline">
|
||||
<span class="text-2xl">습도</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-calendar-days text-2xl"></i>
|
||||
<i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
|
||||
</div>
|
||||
</div>
|
||||
<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="font-bold text-3xl">78<span class="font-normal text-2xl"> %</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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="font-bold text-3xl">80<span class="font-normal text-2xl"> %</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,16 +66,40 @@
|
||||
|
||||
<!-- CO2 -->
|
||||
<%= link_to view_co2_environment_path(id: params[:id]), class: "dashboard-group" do %>
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div><span class="text-xl">CO</span><span class="text-sm">2</span></div>
|
||||
<div class="flex flex-row justify-between items-baseline w-full">
|
||||
<div class="size-10 bg-base-text/80 rounded-full text-base-background flex flex-col justify-center">
|
||||
<div class="flex flex-row justify-center items-baseline">
|
||||
<span class="text-xl">CO</span><span class="text-sm">2</span>
|
||||
<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">
|
||||
<div class="size-10 bg-env-color rounded-full text-base-background flex flex-col justify-center">
|
||||
<div class="flex flex-row justify-center items-baseline">
|
||||
<span class="text-xl">CO</span><span class="text-sm">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items-baseline">
|
||||
<span class="text-2xl">CO</span><span class="text-xl">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items-baseline text-right"><span class="text-4xl font-['Chakra_Petch']">60</span>
|
||||
<span class="text-2xl">%</span></div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-calendar-days text-2xl"></i>
|
||||
<i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
|
||||
</div>
|
||||
</div>
|
||||
<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">현재 CO</span><span class="text-sm">2</div>
|
||||
<div class="font-bold text-3xl">700<span class="font-normal text-2xl"> ppm</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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">최소 CO</span><span class="text-sm">2</div>
|
||||
<div class="font-bold text-3xl">300<span class="font-normal text-2xl"> ppm</span></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-baseline text-right w-full pl-4">
|
||||
<div class="opacity-50">최대 CO</span><span class="text-sm">2</div>
|
||||
<div class="font-bold text-3xl">1000<span class="font-normal text-2xl"> ppm</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -48,12 +109,24 @@
|
||||
|
||||
<!-- 랙 -->
|
||||
<%= link_to rack_index_path, class: "dashboard-group" do %>
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="text-xl">랙 정보</div>
|
||||
<div class="flex flex-row justify-between items-baseline w-full">
|
||||
<i class="fa-solid fa-lightbulb text-base-text/80 text-4xl text-left w-full"></i>
|
||||
<div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']">5</span>
|
||||
<span class="text-2xl">라인</span>
|
||||
<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">
|
||||
<i class="fa-solid fa-timeline text-etc-color text-4xl text-left"></i>
|
||||
<div class="items-baseline">
|
||||
<span class="text-2xl">랙</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-gear text-2xl"></i>
|
||||
<i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
|
||||
</div>
|
||||
</div>
|
||||
<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="font-bold text-3xl">5<span class="font-normal text-2xl"> 라인</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,12 +134,24 @@
|
||||
|
||||
<!-- 센서 구역 -->
|
||||
<%= link_to view_area_environment_path(id: params[:id]), class: "dashboard-group" do %>
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="text-xl">센서구역 정보</div>
|
||||
<div class="flex flex-row justify-between items-baseline w-full">
|
||||
<i class="fa-solid fa-fan text-base-text/80 text-4xl text-left w-full"></i>
|
||||
<div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']">6</span>
|
||||
<span class="text-2xl">구역</span>
|
||||
<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">
|
||||
<i class="fa-solid fa-tower-broadcast text-etc-color text-4xl text-left"></i>
|
||||
<div class="items-baseline">
|
||||
<span class="text-2xl">센서구역</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i class="fa-solid fa-gear text-2xl"></i>
|
||||
<i class="fa-solid fa-angle-right text-2xl opacity-90"></i>
|
||||
</div>
|
||||
</div>
|
||||
<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="font-bold text-3xl">6<span class="font-normal text-2xl"> 구역</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,11 +159,23 @@
|
||||
|
||||
<!-- LED -->
|
||||
<div class="dashboard-group">
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="text-xl">LED</div>
|
||||
<div class="flex flex-row justify-between items-baseline w-full">
|
||||
<i class="fa-solid fa-lightbulb text-base-text/80 text-4xl text-left w-full"></i>
|
||||
<div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']"><div class="btn-toggle-text">AUTO</div></span>
|
||||
<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">
|
||||
<i class="fa-solid fa-lightbulb text-etc-color text-4xl text-left"></i>
|
||||
<div class="items-baseline">
|
||||
<span class="text-2xl">LED</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="flex flex-row items-center space-x-2">
|
||||
<div class="size-5 bg-notice rounded-full"></div>
|
||||
<div class="font-bold text-3xl text-notice">자동</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,11 +183,23 @@
|
||||
|
||||
<!-- Fan -->
|
||||
<div class="dashboard-group">
|
||||
<div class="flex flex-col justify-between h-full">
|
||||
<div class="text-xl">FAN</div>
|
||||
<div class="flex flex-row justify-between items-baseline w-full">
|
||||
<i class="fa-solid fa-fan text-base-text/80 text-4xl text-left w-full"></i>
|
||||
<div class="items-baseline text-right w-full"><span class="text-4xl font-['Chakra_Petch']"><div class="btn-toggle-text">AUTO</div></span>
|
||||
<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">
|
||||
<i class="fa-solid fa-fan text-etc-color text-4xl text-left"></i>
|
||||
<div class="items-baseline">
|
||||
<span class="text-2xl">FAN</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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="flex flex-row items-center space-x-2">
|
||||
<div class="size-5 bg-warning rounded-full"></div>
|
||||
<div class="font-bold text-3xl text-warning">수동</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,58 +7,58 @@
|
||||
</div>
|
||||
<div class="flex flex-col flex-1 space-y-4 overflow-y-hidden content">
|
||||
<div class="flex justify-between">
|
||||
<%= link_to "수정", schedule_edit_schedule_path(@controller.id), class: "btn bg-default-slate" %>
|
||||
<%= link_to "수정", edit_temp_environment_path(@controller.id), class: "btn bg-default-slate" %>
|
||||
</div>
|
||||
<div class="lg:rounded-lg border border-base-border overflow-y-hidden">
|
||||
<table class="base-table overflow-y-hidden">
|
||||
<table class="base-table border-b border-base-border table-fixed w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>시간</th>
|
||||
<th>온도</th>
|
||||
<th class="w-1/3">시간</th>
|
||||
<th class="w-1/3">온도</th>
|
||||
<th>사용여부</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="overflow-y-auto">
|
||||
<% if @schedule.present? %>
|
||||
<% @schedule.each do |s| %>
|
||||
</table>
|
||||
|
||||
<!-- tbody 감싸는 div -->
|
||||
<div class="overflow-y-auto max-h-full overflow-x-hidden">
|
||||
<table class="base-table table-fixed w-full">
|
||||
<tbody>
|
||||
<% if @schedule.present? %>
|
||||
<% @schedule.each do |s| %>
|
||||
<tr>
|
||||
<td class="w-1/3">
|
||||
<div class="text-2xl flex items-baseline space-x-1">
|
||||
<div class="text-center w-[36px]"><%= s.hour.to_s.rjust(2, '0') %></div>
|
||||
<div>:</div>
|
||||
<div class="text-center w-[36px]"><%= s.minute.to_s.rjust(2, '0') %></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-1/3">
|
||||
<div class="text-2xl flex items-end space-x-2">
|
||||
<div class="text-left w-[50px]"><%= s.temperature %></div>
|
||||
<div class="text-base leading-7">°C</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="text-2xl w-8 mr-0">
|
||||
<% 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>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<tr>
|
||||
<!-- 시간 -->
|
||||
<td>
|
||||
<div class="text-2xl flex items-baseline space-x-1">
|
||||
<div class="text-center w-[36px]"><%= s.hour.to_s.rjust(2, '0') %></div>
|
||||
<div>:</div>
|
||||
<div class="text-center w-[36px]"><%= s.minute.to_s.rjust(2, '0') %></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- 온도 -->
|
||||
<td>
|
||||
<div class="text-2xl flex items-end space-x-2">
|
||||
<div class="text-left w-[50px]"><%= s.temperature %></div>
|
||||
<div class="text-base leading-7">°C</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- 사용 여부 -->
|
||||
<td>
|
||||
<div class="text-2xl w-8 mr-0">
|
||||
<%#= 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>
|
||||
</td>
|
||||
<td colspan="3" class="text-center p-4 w-full">저장된 스케줄이 없습니다.</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<tr>
|
||||
<td colspan="3" class="text-center p-4 w-full">저장된 스케줄이 없습니다.</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</thead>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user