화면 레이아웃 구성

This commit is contained in:
2025-04-17 04:14:43 +09:00
parent 4b9c59b6e0
commit f90962c54f
7 changed files with 146 additions and 48 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 %>

View 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>

View 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>