화면 레이아웃 구성
This commit is contained in:
@@ -20,11 +20,19 @@
|
||||
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
||||
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
||||
<%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main class="m-4">
|
||||
<%= yield %>
|
||||
<body class="h-screen overflow-hidden">
|
||||
<main class="flex flex-col h-full divide-y divide-border-table-border">
|
||||
<%= render "partials/header" %>
|
||||
<div class="flex flex-row flex-1 w-full divide-x divide-border-table-border overflow-hidden">
|
||||
<%= render "partials/sidebar" %>
|
||||
<div class="w-full h-full">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -8,11 +8,26 @@
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% @schedule.each do |s| %>
|
||||
<div class="flex justify-items-center gap-x-2">
|
||||
<div><%= s.hour %>시</div>
|
||||
<div><%= s.temperature %> °C</div>
|
||||
<div class="flex flex-col h-full divide-y divide-border-table-border">
|
||||
<div class="flex-1 overflow-y-auto p-4">
|
||||
<table class="base-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>시간</th>
|
||||
<th>온도</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% @schedule.each do |s| %>
|
||||
<tr>
|
||||
<td><%= s.hour %>시</td>
|
||||
<td><%= s.temperature %> °C</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= link_to "수정", "/modbus/schedule_edit", class: "btn btn-primary" %>
|
||||
<div class="flex p-4">
|
||||
<%= link_to "수정", "/modbus/schedule_edit", class: "btn bg-default-slate" %>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,14 +1,24 @@
|
||||
<%= form_with url: "/modbus/schedule_edit_update", method: :post do %>
|
||||
<% @schedule.each do |s| %>
|
||||
<div class="flex justify-items-center gap-x-2 pb-2">
|
||||
<div><%= s.hour %>시</div>
|
||||
<div>
|
||||
<%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %> °C
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="pt-4">
|
||||
<%= submit_tag "업데이트", class: "bg-blue-500 text-white px-4 py-2 rounded" %>
|
||||
<%= form_with url: "/modbus/schedule_edit_update", method: :post, class: 'flex flex-col h-full divide-y divide-border-table-border' do %>
|
||||
<div class="flex-1 overflow-y-auto p-4">
|
||||
<table class="base-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>시간</th>
|
||||
<th>온도</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% @schedule.each do |s| %>
|
||||
<tr>
|
||||
<td><%= s.hour %>시</td>
|
||||
<td><%= number_field_tag "schedule[#{s.id}][temperature]", s.temperature, step: "0.1", inputmode: "decimal", class: "border px-2 py-1 rounded" %> °C</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="flex p-4">
|
||||
<%= submit_tag "업데이트", class: "btn bg-primary" %>
|
||||
</div>
|
||||
<% end %>
|
||||
10
app/views/partials/_header.html.erb
Normal file
10
app/views/partials/_header.html.erb
Normal file
@@ -0,0 +1,10 @@
|
||||
<header class="flex header">
|
||||
<div class="flex flex-row">
|
||||
<%= image_tag "svg/svg_logo.svg", class: "w-16 h-auto" %>
|
||||
<div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-x-4">
|
||||
<i class="fa-solid fa-circle-user text-4xl text-default-slate-dark"></i>
|
||||
<%= link_to "로그아웃", '', class: "btn" %>
|
||||
</div>
|
||||
</header>
|
||||
42
app/views/partials/_sidebar.html.erb
Normal file
42
app/views/partials/_sidebar.html.erb
Normal file
@@ -0,0 +1,42 @@
|
||||
<nav class="side-bar overflow-y-auto">
|
||||
<div class="menu-group">
|
||||
<div class="menu-group-icon">
|
||||
<i class="fa-solid fa-house text-default-slate-dark text-4xl"></i>
|
||||
</div>
|
||||
<div class="menu-group-name">
|
||||
HOME
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<div class="menu-group-icon">
|
||||
<i class="fa-solid fa-temperature-high text-default-slate-dark text-4xl"></i>
|
||||
</div>
|
||||
<div class="menu-group-name">
|
||||
메뉴 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<div class="menu-group-icon">
|
||||
<i class="fa-solid fa-fan text-default-slate-dark text-4xl"></i>
|
||||
</div>
|
||||
<div class="menu-group-name">
|
||||
메뉴 3
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<div class="menu-group-icon">
|
||||
<i class="fa-solid fa-arrows-spin text-default-slate-dark text-4xl"></i>
|
||||
</div>
|
||||
<div class="menu-group-name">
|
||||
메뉴 4
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-group">
|
||||
<div class="menu-group-icon">
|
||||
<i class="fa-solid fa-gear text-default-slate-dark text-4xl"></i>
|
||||
</div>
|
||||
<div class="menu-group-name">
|
||||
설청
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user