Merge pull request #14 from diewland/dev

fix #13 add check in / check out history
diewland · Dec 27, 2020 · 1a001b8 · 1a001b8
2 parents 519f082 + 784d5bc
commit 1a001b8
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 5 deletions.
diff --git a/app.js b/app.js
@@ -1,7 +1,8 @@
 let APP_TITLE = 'DIEWLAND_BTCCN';
-let APP_VERSION = '0.0.8';
+let APP_VERSION = '1.0';
 let KEY_CAMERAS = `${APP_TITLE}_CAMERAS`;
 let KEY_CAM_LIB = `${APP_TITLE}_CAM_LIB`;
+let KEY_HISTORY = `${APP_TITLE}_HISTORY`;
 
 // datetime
 
@@ -35,6 +36,8 @@ let Db = {
       // update data
       row.timestamp = ts();
       row.checked_in = new_checked_in;
+      // history
+      Db.add_history(row);
       // save & callback
       Disk.set(APP_TITLE, data);
       callback(new_checked_in);
@@ -43,14 +46,17 @@ let Db = {
     else {
       Thaichana.get_shop_info (app_id, shop_id, info => {
         // update data
-        data.push({
+        let row = {
           app_id: app_id,
           shop_id: shop_id,
           title: info.shopName,
           url: url,
           timestamp: ts(),
           checked_in: true,
-        });
+        };
+        data.push(row);
+        // history
+        Db.add_history(row);
         // save & callback
         Disk.set(APP_TITLE, data);
         callback(true);
@@ -68,4 +74,12 @@ let Db = {
   get_cam_lib: _ => Disk.get(KEY_CAM_LIB) || 'html5-qrcode',
   remove_cam_lib: _ => Disk.remove(KEY_CAM_LIB),
 
+  // history
+  list_history: _ => { return Disk.get(KEY_HISTORY, []); },
+  add_history: (new_history) => {
+    let data = Db.list_history();
+    data.push(new_history);
+    Disk.set(KEY_HISTORY, data);
+  },
+
 };
diff --git a/list.html b/list.html
@@ -59,8 +59,9 @@ <h3>กดปุ่มด้านล่างเพื่อสแกน</h3>
     </div>
 
     <!-- bottom -->
-    <div class='bottom'>
-      <a class='btn btn-scan btn-lg btn-danger w-100' href='#/'>สแกน</a>
+    <div class='bottom row'>
+      <a class='col btn btn-log btn-lg btn-info' href='#/'>ดูประวัติ</a>
+      <a class='col btn btn-scan btn-lg btn-danger' href='#/'>สแกน</a>
     </div>
 
     <!-- bottom scripts -->
@@ -171,12 +172,20 @@ <h3>กดปุ่มด้านล่างเพื่อสแกน</h3>
         row.checked_in = new_checked_in;
         update_disk();
 
+        // add history
+        Db.add_history(row);
+
         // check-in/check-out in 100 ms
         setTimeout(_ => {
           Thaichana.check_in(row.app_id, row.shop_id, new_checked_in);
         }, 100);
       });
 
+      // bind log button
+      $('.btn-log').click(_ => {
+        location.href = './log.html';
+      });
+
       // bind scan button
       $('.btn-scan').click(_ => {
         location.href = get_scan_url();

diff --git a/log.html b/log.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+
+    <!-- style -->
+    <style type='text/css'>
+      html, body{
+        height: 100%;
+      }
+      .place-list {
+        position: fixed;
+        height: calc(100% - 48px);
+        left: 0;
+        right: 0;
+        bottom: 48px;
+        overflow: auto;
+      }
+      .place-list .welcome {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+      .place-list .row {
+        padding: .75rem 1.25rem;
+        border-bottom: 1px solid rgba(0,0,0,.125);
+        margin: 0px;
+      }
+      .place-list .row:first-child {
+        border-top: 1px solid rgba(0,0,0,.125);
+      }
+      .bottom {
+        position: fixed;
+        height: 48px;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+      }
+      .bottom .btn {
+        border-radius: 0px;
+      }
+    </style>
+
+    <title>บันทึกไทยชนะ</title>
+  </head>
+  <body>
+
+    <!-- list -->
+    <div class='place-list'>
+      <div class='welcome'>
+        <h3>ไม่พบประวัติการสแกน</h3>
+      </div>
+    </div>
+
+    <!-- back bottom -->
+    <div class='bottom'>
+      <a class='btn btn-back btn-lg btn-secondary w-100' href='./list.html'>ถอยกลับ</a>
+    </div>
+
+    <!-- bottom scripts -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+
+    <!-- app scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
+    <script src="https://diewland.github.io/disk.js/dist/disk.js"></script>
+    <script src="./app.js"></script>
+
+    <script>
+
+      // query data from disk
+      let data = Db.list_history();
+
+      // prepare place list
+      if (data.length > 0) $('.place-list').html('');
+
+      // render places
+      data.reverse(); // latest on top
+      data.forEach(place => {
+       let last_timestamp = moment(place.timestamp).format(FMT_DATETIME);
+        let checked_in = place.checked_in || false;
+        let badge = checked_in ? "<span class='badge badge-success'>เช็คอิน</span>"
+                               : "<span class='badge badge-warning'>เช็คเอาท์</span>";
+
+        $('.place-list').append(`
+          <div class='row align-items-center>
+            <div class='col px-0'>
+              <div class='w-100'>
+                ${badge}
+                ${last_timestamp}
+              </div>
+              <span class='place-title'>${place.title}</span>
+            </div>
+          </div>
+        `);
+      });
+
+    </script>
+
+  </body>
+</html>