add stats

KCCTdensan · Oct 17, 2022 · 1d753a1 · 1d753a1
1 parent 73eda8f
commit 1d753a1
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 19 deletions.
diff --git a/app.js b/app.js
@@ -28,6 +28,17 @@ async function main() {
 
   app.use(express.static(join(__dirname, "pub")))
 
+  app.get("/api/dump", async (req, res) => {
+    const rows = await Activity.findAll({
+      attributes: ["code", "event", "date"],
+    })
+    const data = rows.map(({ code, event, date }) => ({
+      code, event,
+      date: date.getTime(),
+    }))
+    res.json(data)
+  })
+
   const send = body => {
     const data = JSON.stringify({
       ...body,

diff --git a/pub/app.jsx b/pub/app.jsx
@@ -2,6 +2,20 @@ const { useEffect, useRef, useState } = React
 
 const sleep = async ms => new Promise(res => setTimeout(res, ms))
 
+const timeDiffFmt = (dt, now) => {
+  const ds = (now - dt) / 1000
+  if(ds < 0) return "未来"
+
+  const h = Math.trunc(ds / 3600)
+  if(h) return `${h}時間前`
+
+  const m = Math.trunc(ds / 60)
+  if(m) return `${m}分前`
+
+  const s = Math.trunc(ds)
+  if(s) return `さっき(${s}秒前)`
+}
+
 const App = () => {
   const [code, setCode] = useState("-")
   const [msg, setMsg] = useState("")
@@ -37,20 +51,6 @@ const App = () => {
     }
   }
 
-  const timeDiffFmt = (dt, now) => {
-    const ds = (now - dt) / 1000
-    if(ds < 0) return "未来"
-
-    const h = Math.trunc(ds / 3600)
-    if(h) return `${h}時間前`
-
-    const m = Math.trunc(ds / 60)
-    if(m) return `${m}分前`
-
-    const s = Math.trunc(ds)
-    if(s) return `さっき(${s}秒前)`
-  }
-
   useEffect(() => {
     async function handler({ data }) {
       const { code, msg, dt, now } = JSON.parse(data)
@@ -93,6 +93,7 @@ const App = () => {
       />
       <header>
         <h1>食堂管理システム</h1>
+        <a href="/stats/">統計情報</a>
       </header>
       <main>
         <div

diff --git a/pub/index.html b/pub/index.html
@@ -3,13 +3,13 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>食堂</title>
-  <script src="assets/react.js"></script><!-- <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> -->
-  <script src="assets/react-dom.js"></script><!-- <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> -->
-  <script src="assets/babel.js"></script><!-- <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script> -->
+  <script src="/assets/react.js"></script><!-- <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> -->
+  <script src="/assets/react-dom.js"></script><!-- <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> -->
+  <script src="/assets/babel.js"></script><!-- <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script> -->
   <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
-  <link rel="stylesheet" href="assets/new.css" /><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css"> -->
+  <link rel="stylesheet" href="/assets/new.css" /><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css"> -->
 </head>
 <body>
   <div id="root"></div>
-  <script type="text/babel" src="app.jsx"></script>
+  <script type="text/babel" src="./app.jsx"></script>
 </body>
diff --git a/pub/stats/app.jsx b/pub/stats/app.jsx
@@ -0,0 +1,67 @@
+const { useEffect, useState } = React
+
+const timeDiffFmt = (dt, now) => {
+  const ds = (now - dt) / 1000
+  if(ds < 0) return "未来"
+
+  const h = Math.trunc(ds / 3600)
+  const m = Math.trunc((ds - 3600 * h) / 60)
+
+  const date = new Date(dt)
+  return `${h}時間と${m}分前 (${date.toLocaleString("ja")})`
+}
+
+const Stats = () => {
+  const [tab, setTab] = useState([])
+
+  useEffect(async () => {
+    const dump = await fetch("/api/dump").then(res => res.json())
+    dump.sort((a, b) => b.date - a.date)
+    setTab(dump)
+  }, [])
+
+  return (
+    <>
+      <header>
+        <h1>食堂管理システム - 統計情報</h1>
+        <a href="/">メインUIに戻る</a>
+      </header>
+      <main>
+        <table>
+          <thead>
+            <tr>
+              <th>時刻</th>
+              <th>学籍番号</th>
+              {/*<th>イベント</th>*/}
+            </tr>
+          </thead>
+          <tbody>
+            {tab.map(({ code, event, date }, i) => (
+              <tr key={i}>
+                <td>{timeDiffFmt(date, Date.now())}</td>
+                <td>{code}</td>
+                {/*<td>{event}</td>*/}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </main>
+      <footer>
+        <p
+          style={{
+            marginTop: "4rem",
+            color: "gray",
+            fontSize: "1.2em",
+            fontWeight: "bolder",
+            textAlign: "center",
+          }}>
+          https://github.com/KCCTdensan/syokudou
+          <br />
+          &copy; 2022 神戸高専電算部
+        </p>
+      </footer>
+    </>
+  )
+}
+
+ReactDOM.render(<Stats />, document.getElementById("root"))
diff --git a/pub/stats/index.html b/pub/stats/index.html
@@ -0,0 +1 @@
+../index.html