feat: auto update passed time

This commit is contained in:
2022-11-17 21:30:43 -03:00
parent 6bc94d0ec8
commit df08525010
7 changed files with 96 additions and 39 deletions

27
resources/js/app.js vendored
View File

@@ -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();
}
});

View File

@@ -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}}">
@@ -28,4 +30,4 @@
<button type="submit" class="btn btn-sm btn-outline-secondary ml-auto">@lang('home.alert_me')</button>
@endif
</form>
@endif
@endif