feat: auto update passed time

package-lock.json

@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "moment": "^2.29.4"
+            },
             "devDependencies": {
                 "axios": "^1.1.3",
                 "bootstrap": "^4.6.0",
@@ -1697,6 +1700,14 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/moment": {
+            "version": "2.29.4",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+            "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/nanoid": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -3731,6 +3742,11 @@
             "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
             "dev": true
         },
+        "moment": {
+            "version": "2.29.4",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+            "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+        },
         "nanoid": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",

package.json

@@ -19,5 +19,8 @@
         "sass": "^1.56.1",
         "sass-loader": "^8.0.2",
         "vite": "^3.2.3"
+    },
+    "dependencies": {
+        "moment": "^2.29.4"
     }
 }

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/js/app.js": {
-    "file": "assets/app.ed8e960d.js",
+    "file": "assets/app.f51a693a.js",
     "src": "resources/js/app.js",
     "isEntry": true
   },

resources/js/app.js

@@ -6,6 +6,7 @@
  */
 
 import './bootstrap';
+import moment from "moment";
 
 // window.Vue = require('vue');
 
@@ -21,6 +22,18 @@ import './bootstrap';
 //     el: '#app'
 // });
 
+function updateTime() {
+    var dates = document.getElementsByClassName("takenItemDate");
+    for (let i = 0; i < dates.length; i++) {
+        let time = dates.item(i).innerText;
+        let fromNow = moment(time).fromNow();
+        let id = "itemPassedTime_" + dates.item(i).id;
+        document.getElementById(id).innerText = fromNow;
+    }
+}
+updateTime();
+setInterval(updateTime, 1 * 60 * 1000);
+
 
 function setFaviconNumber(number) {
     var canvas = document.createElement('canvas'),
@@ -45,3 +58,17 @@ function setFaviconNumber(number) {
 
 usedItems = document.getElementById("usedItems").innerText;
 setFaviconNumber(usedItems);
+
+/**
+ * Source:
+ * https://www.designcise.com/web/tutorial/how-to-detect-if-the-browser-tab-is-active-or-not-using-javascript
+ */
+document.addEventListener('visibilitychange', function (event) {
+    if (document.hidden) {
+        console.log('not visible');
+    } else {
+        updateTime();
+    }
+});
+
+

resources/views/home/usedItem.blade.php

@@ -1,6 +1,7 @@
 @if ($item->used_by == \Auth::id())
 <form action="/take" method="POST" class="form-inline">
-    <em class="pr-sm-2 ml-auto">{{\Carbon\Carbon::parse($item->updated_at)->diffForHumans()}}</em>
+    <em id="itemPassedTime_{{$item->id}}" class="pr-sm-2 ml-auto">{{\Carbon\Carbon::parse($item->updated_at)->diffForHumans()}}</em>
+    <div hidden class="takenItemDate" id="{{$item->id}}">{{\Carbon\Carbon::parse($item->updated_at)->format('Y-m-d\TH:i:s.uP')}}</div>
     <div class="w-100 d-xm-block d-sm-none"></div>
     {{ csrf_field() }}
     @method('DELETE')
@@ -16,8 +17,9 @@
         @if ($item->waiting_user_id && $item->waiting_user_id != \Auth::id())
         <strong>> {{str_limit($users[$item->waiting_user_id], 15, '...')}}</strong>
         @endif
-        <small>({{$item->updated_at->diffForHumans()}})</small>
+        <small id="itemPassedTime_{{$item->id}}">({{$item->updated_at->diffForHumans()}})</small>
     </em>
+    <div hidden class="takenItemDate" id="{{$item->id}}">{{$item->updated_at->format('Y-m-d\TH:i:s.uP')}}</div>
     <div class="w-100 d-xm-block d-sm-none"></div>
     {{ csrf_field() }}
     <input type="hidden" name="item" value="{{$item->id}}">