yangkaixiang
/
office_light


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%= title %></title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <%- include('partials/nav') %>
  <main>
    <% if (message) { %><div class="notice"><%= message %></div><% } %>
    <% if (error) { %><div class="notice notice-error"><%= error %></div><% } %>

    <section class="hero tile-light home-status">
      <p class="eyebrow"><%= topicConfig.productKey %> · <%= topicConfig.deviceId %></p>
      <h1>办公室灯光</h1>
      <p class="lead">
        <span id="lightSummary"><%= states.filter((item) => item.state === 'ON').length %> 组开启，<%= states.filter((item) => item.state === 'OFF').length %> 组关闭。</span>
        <span id="nextOccurrenceText"><% if (nextOccurrence) { %>下一次：<%= actionLabel(nextOccurrence.action) %>，<%= nextOccurrence.at %>。<% } else { %>暂无后续计划。<% } %></span>
      </p>
      <div class="hero-actions">
        <form method="post" action="/control"><input type="hidden" name="channel" value="0"><button class="button-primary" name="action" value="open">全部打开</button></form>
        <form method="post" action="/control"><input type="hidden" name="channel" value="0"><button class="button-secondary" name="action" value="close">全部关闭</button></form>
        <form method="post" action="/control"><input type="hidden" name="channel" value="0"><button class="button-secondary" name="action" value="query">查询状态</button></form>
      </div>
      <p class="status-note">设备每 5 分钟主动上报，也可以手动查询。</p>
      <div class="state-grid home-state-grid">
        <% states.forEach((state) => { %>
          <article class="state-card" data-state-card="<%= state.channel %>">
            <p class="eyebrow"><%= state.name %></p>
            <h3 class="state-value state-<%= state.state.toLowerCase() %>" data-state-value><%= state.state %></h3>
            <p>最后更新：<span data-last-seen><%= state.last_seen_at ? dayjs(state.last_seen_at).format('YYYY-MM-DD HH:mm:ss') : '暂无' %></span></p>
            <div class="inline-actions">
              <form method="post" action="/control"><input type="hidden" name="channel" value="<%= state.channel %>"><button class="button-primary small" name="action" value="open">打开</button></form>
              <form method="post" action="/control"><input type="hidden" name="channel" value="<%= state.channel %>"><button class="button-secondary small" name="action" value="close">关闭</button></form>
              <form method="post" action="/control"><input type="hidden" name="channel" value="<%= state.channel %>"><button class="button-secondary small" name="action" value="query">查询</button></form>
            </div>
          </article>
        <% }) %>
      </div>
    </section>
  </main>
</body>
</html>