스케줄러 초기화면 샘플

app/assets/stylesheets/application.tailwind.css

@@ -12,6 +12,7 @@
     --color-table-border: rgb(130, 144, 158);
 
     /* theme */
+    --color-logo-color: rgb(21, 128, 120);
     --color-base-background: rgb(39, 44, 56);
     --color-base-secondary: rgb(55, 61, 71);
     --color-base-text: rgb(255, 255, 255);
@@ -157,6 +158,11 @@
         @apply text-default-slate-dark text-center
     }
 
+    /*Dashboard*/
+    .dashboard-group {
+        @apply rounded-md bg-base-background h-32 p-4 flex flex-col justify-between cursor-pointer
+    }
+
     /*Pagy*/
     .pagy {
         @apply flex items-center justify-center space-x-1 font-semibold text-sm text-default-slate;

app/views/layouts/application.html.erb

@@ -29,7 +29,7 @@
   <%= render "partials/header" %>
   <div class="flex flex-row flex-1 w-full">
     <%= render "partials/sidebar" %>
-    <div class="flex-1 h-full pb-0 px-0 lg:pb-4 lg:px-4 ">
+    <div class="flex-1 h-full pb-0 px-0 lg:pb-4 lg:px-4">
       <div class="flex-1 h-full content">
         <% if flash[:notice] %>
           <div class="rounded-tl-md rounded-tr-md px-4 py-2 bg-accept text-white">

app/views/partials/_header.html.erb

@@ -2,7 +2,7 @@
   <div class="flex flex-row h-full items-center">
     <%= image_tag "svg/svg_logo.svg", class: "w-auto h-8 mr-4" %>
     <%= link_to root_path do %>
-      <div class="flex h-full items-center tracking-[0.5rem]">FARMITRY</div>
+      <div class="flex h-full items-center tracking-[0.5rem]"><span class="text-logo-color">FARM</span>ITRY</div>
     <% end %>
   </div>
 

app/views/schedules/index.html.erb

@@ -1 +1,157 @@
-<div>MAIN</div>
+<div class="flex-1 grid grid-cols-2 lg:grid-cols-4 gap-4 p-4">
+  <!-- 실내온도 -->
+  <div class="dashboard-group">
+    <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">15.5</span>
+          <span class="text-2xl">°C</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 실내습도 -->
+  <div class="dashboard-group">
+    <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">60</span> <span class="text-2xl">%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- CO2 -->
+  <div class="dashboard-group">
+    <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>
+        </div>
+        <div class="items-baseline text-right"><span class="text-4xl">60</span> <span class="text-2xl">%</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">1</div>
+
+  <!-- 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">60</span> <span class="text-2xl">%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 공조기 -->
+  <div class="dashboard-group">
+    <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">15.5</span>
+          <span class="text-2xl">°C</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 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">60</span> <span class="text-2xl">%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">1</div>
+
+  <!-- pH -->
+  <div class="dashboard-group">
+    <div class="flex justify-between items-baseline">
+      <div class="text-4xl">pH</div>
+      <div class="text-3xl">7.1</div>
+    </div>
+    <div class="flex justify-between items-baseline">
+      <div class="text-2xl">
+        6.0 ~ 6.0
+      </div>
+      <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
+    </div>
+  </div>
+
+  <!-- EC -->
+  <div class="dashboard-group">
+    <div class="flex justify-between items-baseline">
+      <div class="text-4xl">EC</div>
+      <div class="text-3xl">0.1</div>
+    </div>
+    <div class="flex justify-between items-baseline">
+      <div class="text-2xl">
+        0 ~ 1
+      </div>
+      <div><i class="fa-solid fa-gear text-base-text/30 text-2xl"></i></div>
+    </div>
+  </div>
+
+  <!-- 양액온도 -->
+  <div class="dashboard-group">
+    <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">20.96</span>
+          <span class="text-2xl">°C</span></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">1</div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-recycle text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">자동화</div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-rotate-right text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">초기화</div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-circle-pause text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">긴급 정지</div>
+    </div>
+  </div>
+
+  <!-- none -->
+  <div class="dashboard-group">
+    <div class="flex flex-col justify-center space-y-4 h-full">
+      <i class="fa-solid fa-faucet-drip text-base-text/80 text-5xl text-center w-full"></i>
+      <div class="text-xl text-center">1회 급수 설정</div>
+    </div>
+  </div>
+</div>