Mostly cosmetic changes to date tooltip display.

This commit is contained in:
Abdulmhsen B. A. A.
2024-06-19 22:04:08 +03:00
parent 850063d9e9
commit 5a0678cc7a
15 changed files with 166 additions and 74 deletions

View File

@@ -84,8 +84,9 @@
<div class="column is-4-tablet is-6-mobile has-text-left-mobile">
<span class="icon-text">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip" v-tooltip="moment.unix(history.updated).format('YYYY-MM-DD h:mm:ss A')">
{{ moment.unix(history.updated).fromNow() }}
<span class="has-tooltip"
v-tooltip="`Updated at: ${moment.unix(history.updated_at ?? history.updated).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment.unix(history.updated_at ?? history.updated).fromNow() }}
</span>
</span>
</div>
@@ -139,7 +140,7 @@
<script setup>
import moment from 'moment'
import Message from '~/components/Message.vue'
import {formatDuration, makeName, notification} from "~/utils/index.js";
import {formatDuration, makeName, notification, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
const backend = useRoute().params.backend

View File

@@ -140,8 +140,9 @@
<div class="card-footer">
<div class="card-footer-item">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip" v-tooltip="moment.unix(item.updated).format('YYYY-MM-DD h:mm:ss A')">
{{ moment.unix(item.updated).fromNow() }}
<span class="has-tooltip"
v-tooltip="moment.unix(item.updated_at ?? item.updated).format(TOOLTIP_DATE_FORMAT)">
{{ moment.unix(item.updated_at ?? item.updated).fromNow() }}
</span>
</div>
<div class="card-footer-item">
@@ -196,7 +197,7 @@
<script setup>
import request from '~/utils/request.js'
import moment from 'moment'
import {makeName, makeSearchLink, notification} from '~/utils/index.js'
import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import Message from "~/components/Message.vue";
import {useStorage} from "@vueuse/core";

View File

@@ -50,7 +50,10 @@
</div>
<div class="column is-6" v-if="item?.updatedAt">
<strong>Updated:</strong> {{ moment(item.updatedAt).fromNow() }}
<strong>Updated:&nbsp;</strong>
<span class="has-tooltip" v-tooltip="moment(item.updatedAt).format(TOOLTIP_DATE_FORMAT)">
{{ moment(item.updatedAt).fromNow() }}
</span>
</div>
<div class="column is-6 has-text-right" v-if="undefined !== item?.restricted">
@@ -83,7 +86,7 @@
</template>
<script setup>
import {notification} from '~/utils/index.js'
import {notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import {useStorage} from '@vueuse/core'
import request from '~/utils/request.js'
import moment from "moment";

View File

@@ -57,16 +57,50 @@
</header>
<div class="card-content">
<div class="columns is-multiline has-text-centered">
<div class="column is-6 has-text-left-mobile" v-if="backend.export.enabled">
<strong>Last Export:</strong>
{{ backend.export.lastSync ? moment(backend.export.lastSync).fromNow() : 'None' }}
<div class="column is-6 has-text-left-mobile">
<strong>Last Export:&nbsp;</strong>
<template v-if="backend.export.enabled">
<span v-if="backend.export.lastSync" class="has-tooltip"
v-tooltip="moment(backend.export.lastSync).format(TOOLTIP_DATE_FORMAT)">
{{ moment(backend.export.lastSync).fromNow() }}
</span>
<template v-else>Never</template>
</template>
<template v-else>
<span class="tag is-danger is-light">Disabled</span>
</template>
</div>
<div class="column is-6 has-text-left-mobile" v-if="backend.import.enabled">
<strong>Last Import:</strong>
{{ backend.import.lastSync ? moment(backend.import.lastSync).fromNow() : 'None' }}
<div class="column is-6 has-text-left-mobile">
<strong>Last Import:&nbsp;</strong>
<template v-if="backend.import.enabled">
<span v-if="backend.import.lastSync" class="has-tooltip"
v-tooltip="moment(backend.import.lastSync).format(TOOLTIP_DATE_FORMAT)">
{{ moment(backend.import.lastSync).fromNow() }}
</span>
<template v-else>Never</template>
</template>
<template v-else>
<span class="tag is-danger is-light">Disabled</span>
</template>
</div>
</div>
</div>
<footer class="card-footer">
<div class="card-footer-item" v-if="backend.export.enabled">
<NuxtLink class="button is-danger is-fullwidth"
:to="makeConsoleCommand(`state:export -v -s ${backend.name}`)">
<span class="icon"><i class="fas fa-upload"></i></span>
<span>Run export now</span>
</NuxtLink>
</div>
<div class="card-footer-item" v-if="backend.import.enabled">
<NuxtLink class="button is-primary is-fullwidth"
:to="makeConsoleCommand(`state:import -v -s ${backend.name}`)">
<span class="icon"><i class="fas fa-download"></i></span>
<span>Run import now</span>
</NuxtLink>
</div>
</footer>
<footer class="card-footer">
<div class="card-footer-item">
<div class="field">
@@ -133,7 +167,7 @@ import 'assets/css/bulma-switch.css'
import moment from 'moment'
import request from '~/utils/request.js'
import BackendAdd from '~/components/BackendAdd.vue'
import {copyText, notification} from '~/utils/index.js'
import {copyText, makeConsoleCommand, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import {useStorage} from "@vueuse/core";
import Message from "~/components/Message.vue";

View File

@@ -55,9 +55,8 @@
<div class="card-footer-item">
<div class="card-footer-item">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span v-tooltip="`Last Update: ${moment.unix(item.modified_at).format(TOOLTIP_DATE_FORMAT)} `"
class="has-tooltip">
{{ moment.unix(item.created_at).fromNow() }}
<span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.date).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment(item.date).fromNow() }}
</span>
</div>
<div class="card-footer-item">

View File

@@ -138,7 +138,8 @@
<span class="icon"><i class="fas fa-calendar"></i></span>
<span>
<span class="is-hidden-mobile">Updated:&nbsp;</span>
<span class="has-tooltip" v-tooltip="moment.unix(data.updated).format('YYYY-MM-DD h:mm:ss A')">
<span class="has-tooltip"
v-tooltip="`Backend updated this record at: ${moment.unix(data.updated).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment.unix(data.updated).fromNow() }}
</span>
</span>
@@ -226,6 +227,32 @@
</div>
</div>
<div class="column is-6 has-text-left" v-if="data.created_at">
<span class="icon-text">
<span class="icon"><i class="fas fa-database"></i></span>
<span>
<span class="is-hidden-mobile">Created:&nbsp;</span>
<span class="has-tooltip"
v-tooltip="`DB record created at: ${moment.unix(data.created_at).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment.unix(data.created_at).fromNow() }}
</span>
</span>
</span>
</div>
<div class="column is-6 has-text-right" v-if="data.updated_at">
<span class="icon-text">
<span class="icon"><i class="fas fa-database"></i></span>
<span>
<span class="is-hidden-mobile">Updated:&nbsp;</span>
<span class="has-tooltip"
v-tooltip="`DB record updated at: ${moment.unix(data.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment.unix(data.updated_at).fromNow() }}
</span>
</span>
</span>
</div>
</div>
</div>
</div>
@@ -300,7 +327,7 @@
<span>
<span class="is-hidden-mobile">Updated:&nbsp;</span>
<span class="has-tooltip"
v-tooltip="getMoment(ag(data.extra, `${key}.received_at`, data.updated)).format('YYYY-MM-DD h:mm:ss A')">
v-tooltip="`Backend last activity: ${getMoment(ag(data.extra, `${key}.received_at`, data.updated)).format(TOOLTIP_DATE_FORMAT)}`">
{{ getMoment(ag(data.extra, `${key}.received_at`, data.updated)).fromNow() }}
</span>
</span>
@@ -435,7 +462,16 @@
<script setup>
import request from '~/utils/request.js'
import {ag, formatDuration, makeGUIDLink, makeName, makeSearchLink, notification, ucFirst} from '~/utils/index.js'
import {
ag,
formatDuration,
makeGUIDLink,
makeName,
makeSearchLink,
notification,
TOOLTIP_DATE_FORMAT,
ucFirst
} from '~/utils/index.js'
import moment from 'moment'
import {useStorage} from "@vueuse/core";
import Message from "~/components/Message.vue";

View File

@@ -137,8 +137,8 @@
<div class="card" :class="{ 'is-success': item.watched }">
<header class="card-header">
<p class="card-header-title is-text-overflow pr-1">
<span class="icon" v-if="!item.progress">
<i class="fas" :class="{'fa-eye-slash': !item.watched, 'fa-eye': item.watched}"></i>
<span class="icon is-unselectable">
<i class="fas" :class="{'fa-eye-slash': !item.watched, 'fa-eye': item.watched}"></i>&nbsp;
</span>
<NuxtLink :to="'/history/'+item.id" v-text="makeName(item)"/>
</p>
@@ -167,39 +167,33 @@
v-text="item?.content_path"/>
</div>
</div>
<div class="column is-4-tablet is-6-mobile has-text-left-mobile">
<div class="is-text-overflow">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip"
v-tooltip="moment.unix(item.updated_at??item.updated).format('YYYY-MM-DD h:mm:ss A')">
{{ moment.unix(item.updated_at ?? item.updated).fromNow() }}
</span>
</div>
</div>
<div class="column is-4-tablet is-6-mobile has-text-right-mobile">
<div class="is-text-overflow">
<span class="icon"><i class="fas fa-server"></i>&nbsp;</span>
<NuxtLink :to="'/backend/'+item.via" v-text="item.via"/>
</div>
</div>
<div class="column is-4-tablet is-12-mobile has-text-left-mobile">
<div class="is-text-overflow">
<span class="icon"><i class="fas fa-envelope"></i>&nbsp;</span>
{{ item.event ?? '-' }}
</div>
<div class="column is-12 has-text-left" v-if="item?.progress">
<span class="icon"><i class="fas fa-bars-progress"></i></span>
<span>{{ formatDuration(item.progress) }}</span>
</div>
</div>
</div>
<div class="card-footer" v-if="item.progress">
<div class="card-footer has-text-centered">
<div class="card-footer-item">
<span class="has-text-success" v-if="item.watched">Played</span>
<span class="has-text-danger" v-else>Unplayed</span>
<div class="is-text-overflow">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip"
v-tooltip="`Record updated at: ${moment.unix(item.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment.unix(item.updated_at).fromNow() }}
</span>
</div>
</div>
<div class="card-footer-item">
<span class="icon-text">
<span class="icon"><i class="fas fa-bars-progress"></i></span>
<span>{{ formatDuration(item.progress) }}</span>
</span>
<div class="is-text-overflow">
<span class="icon"><i class="fas fa-server"></i>&nbsp;</span>
<NuxtLink :to="'/backend/'+item.via" v-text="item.via"/>
</div>
</div>
<div class="card-footer-item">
<div class="is-text-overflow">
<span class="icon"><i class="fas fa-envelope"></i>&nbsp;</span>
{{ item.event ?? '-' }}
</div>
</div>
</div>
</div>
@@ -225,7 +219,14 @@
import request from '~/utils/request.js'
import moment from 'moment'
import Message from '~/components/Message.vue'
import {formatDuration, makeName, makePagination, makeSearchLink, notification} from '~/utils/index.js'
import {
formatDuration,
makeName,
makePagination,
makeSearchLink,
notification,
TOOLTIP_DATE_FORMAT
} from '~/utils/index.js'
const route = useRoute()
const router = useRouter()

View File

@@ -218,7 +218,9 @@
<div class="column is-6 has-text-right">
<span class="icon-text">
<span class="icon"><i class="fas fa-calendar"></i></span>
<span>{{ moment(item.created).fromNow() }}</span>
<span class="has-tooltip"
v-tooltip="`Created at: ${moment(item.created).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment(item.created).fromNow() }}</span>
</span>
</div>
@@ -278,7 +280,7 @@
<script setup>
import request from '~/utils/request.js'
import {awaitElement, copyText, notification, stringToRegex} from '~/utils/index.js'
import {awaitElement, copyText, notification, stringToRegex, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
import {useStorage} from '@vueuse/core'
import moment from 'moment'
import 'assets/css/bulma-switch.css'

View File

@@ -29,8 +29,8 @@
<div class="column is-4-tablet is-6-mobile has-text-left-mobile">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip"
v-tooltip="moment.unix(history.updated_at ?? history.updated).format('YYYY-MM-DD h:mm:ss A')">
{{ moment.unix(history.updated_at ?? history.updated).fromNow() }}
v-tooltip="`Record updated at: ${moment.unix(history.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment.unix(history.updated_at).fromNow() }}
</span>
</div>
<div class="column is-4-tablet is-6-mobile has-text-right-mobile">
@@ -115,7 +115,7 @@
import request from '~/utils/request.js'
import moment from 'moment'
import Message from '~/components/Message.vue'
import {formatDuration, makeName} from '../utils/index.js'
import {formatDuration, makeName, TOOLTIP_DATE_FORMAT} from '../utils/index.js'
useHead({title: 'Index'})

View File

@@ -44,17 +44,18 @@
<div class="card-content">
<div class="columns is-multiline is-mobile has-text-centered">
<div class="column is-6-mobile is-pre">
<span v-tooltip="'Last Update'" class="has-tooltip">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip" v-tooltip="`Last Update: ${moment(item.modified).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment(item.modified).fromNow() }}
</span>
</div>
<div class="column is-6-mobile">
{{ humanFileSize(item.size) }}
<span class="icon"><i class="fas fa-hdd"></i>&nbsp;</span>
<span>{{ humanFileSize(item.size) }}</span>
</div>
<div class="column is-6-mobile">
<span v-tooltip="'Log Kind'" class="has-tooltip">
{{ item.type }}
</span>
<span class="icon"><i class="fas fa-tag"></i>&nbsp;</span>
<span class="is-capitalized">{{ item.type }}</span>
</div>
</div>
</div>
@@ -68,7 +69,7 @@
<script setup>
import request from "~/utils/request.js";
import moment from "moment";
import {humanFileSize} from "~/utils/index.js";
import {humanFileSize, TOOLTIP_DATE_FORMAT} from "~/utils/index.js";
import Message from "~/components/Message.vue";
useHead({title: 'Logs'})

View File

@@ -128,8 +128,9 @@
</div>
<div class="card-footer-item">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip" v-tooltip="moment.unix(item.updated).format('YYYY-MM-DD h:mm:ss A')">
{{ moment.unix(item.updated).fromNow() }}
<span class="has-tooltip"
v-tooltip="`Record updated at: ${moment.unix(item.updated_at).format(TOOLTIP_DATE_FORMAT)}`">
{{ moment.unix(item.updated_at).fromNow() }}
</span>
</div>
</div>
@@ -172,9 +173,9 @@
</template>
<script setup>
import request from '~/utils/request.js'
import Message from '~/components/Message.vue'
import {makeName, makePagination, makeSearchLink, notification} from '~/utils/index.js'
import request from '~/utils/request'
import Message from '~/components/Message'
import {makeName, makePagination, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
import moment from 'moment'
import {useStorage} from '@vueuse/core'

View File

@@ -69,7 +69,7 @@
<div class="card-footer-item">
<div class="is-text-overflow">
<span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
<span class="has-tooltip" v-tooltip="moment.unix(item.updated_at).format('YYYY-MM-DD h:mm:ss A')">
<span class="has-tooltip" v-tooltip="moment.unix(item.updated_at).format(TOOLTIP_DATE_FORMAT)">
{{ moment.unix(item.updated_at).fromNow() }}
</span>
</div>
@@ -96,7 +96,7 @@
import request from '~/utils/request.js'
import moment from 'moment'
import Message from '~/components/Message.vue'
import {formatDuration, makeName, makeSearchLink, notification} from '~/utils/index.js'
import {formatDuration, makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
useHead({title: 'Queue'})

View File

@@ -65,7 +65,8 @@
<div class="column is-6 has-text-left">
<strong class="is-hidden-mobile">Prev Run:&nbsp;</strong>
<template v-if="task.enabled">
<span class="has-tooltip" v-tooltip="`Prev Run: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
<span class="has-tooltip"
v-tooltip="`Last run was at: ${moment(task.prev_run).format(TOOLTIP_DATE_FORMAT)}`">
{{ task.prev_run ? moment(task.prev_run).fromNow() : '???' }}
</span>
</template>
@@ -76,7 +77,8 @@
<div class="column is-6 has-text-right">
<strong class="is-hidden-mobile">Next Run:&nbsp;</strong>
<template v-if="task.enabled">
<span class="has-tooltip" v-tooltip="`Next Run: ${moment(task.next_run).format(TOOLTIP_DATE_FORMAT)}`">
<span class="has-tooltip"
v-tooltip="`Next run will be at: ${moment(task.next_run).format(TOOLTIP_DATE_FORMAT)}`">
{{ task.next_run ? moment(task.next_run).fromNow() : 'Never' }}
</span>
</template>

View File

@@ -32,16 +32,19 @@ final class Backup
'filename' => basename($file),
'type' => $isAuto ? 'automatic' : 'manual',
'size' => filesize($file),
'created_at' => filectime($file),
'modified_at' => filemtime($file),
'date' => filemtime($file),
];
$list[] = $builder;
}
$sorter = array_column($list, 'created_at');
$sorter = array_column($list, 'date');
array_multisort($sorter, SORT_DESC, $list);
foreach ($list as &$item) {
$item['date'] = makeDate(ag($item, 'date'));
}
return api_response(HTTP_STATUS::HTTP_OK, $list);
}

View File

@@ -143,6 +143,14 @@ final class StateEntity implements iState
$this->{$key} = $val;
}
if (0 === $this->updated_at && $this->updated > 0) {
$this->updated_at = $this->updated;
}
if (0 === $this->created_at && $this->updated > 0) {
$this->created_at = $this->updated;
}
$this->data = $this->getAll();
}