mirror of
https://github.com/ad1217/PrinterStatus
synced 2024-11-11 02:55:09 -05:00
Add card footer with last updated time as string
This commit is contained in:
parent
de43fdd642
commit
007e08d269
11
src/App.vue
11
src/App.vue
@ -18,8 +18,8 @@
|
|||||||
justify-content-center
|
justify-content-center
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div class="col" v-for="({ name, status }, slug) in printers" :key="slug">
|
<div class="col" v-for="(printer, slug) in printers" :key="slug">
|
||||||
<PrinterCard :slug="slug as string" :name="name" :status="status">
|
<PrinterCard :slug="slug as string" v-bind="printer" :now="now">
|
||||||
</PrinterCard>
|
</PrinterCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -36,11 +36,15 @@ import PrinterCard from './PrinterCard.vue';
|
|||||||
const printers: Ref<{
|
const printers: Ref<{
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
name?: string;
|
name?: string;
|
||||||
|
lastUpdate: Date;
|
||||||
status: octoprint.CurrentOrHistoryPayload | null;
|
status: octoprint.CurrentOrHistoryPayload | null;
|
||||||
};
|
};
|
||||||
}> = ref({});
|
}> = ref({});
|
||||||
const hasPrinters = computed(() => Object.keys(printers.value).length > 0);
|
const hasPrinters = computed(() => Object.keys(printers.value).length > 0);
|
||||||
|
|
||||||
|
let now: Ref<Date> = ref(new Date());
|
||||||
|
setInterval(() => (now.value = new Date()), 1000);
|
||||||
|
|
||||||
let websocket!: WebSocket;
|
let websocket!: WebSocket;
|
||||||
|
|
||||||
function connectWebsocket() {
|
function connectWebsocket() {
|
||||||
@ -53,9 +57,10 @@ function connectWebsocket() {
|
|||||||
console.log(event);
|
console.log(event);
|
||||||
|
|
||||||
if (!(event.printer in printers.value)) {
|
if (!(event.printer in printers.value)) {
|
||||||
printers.value[event.printer] = { status: null };
|
printers.value[event.printer] = { status: null, lastUpdate: new Date() };
|
||||||
}
|
}
|
||||||
printers.value[event.printer].name = event.name;
|
printers.value[event.printer].name = event.name;
|
||||||
|
printers.value[event.printer].lastUpdate = new Date();
|
||||||
|
|
||||||
if ('init' in event) {
|
if ('init' in event) {
|
||||||
printers.value[event.printer].status = null;
|
printers.value[event.printer].status = null;
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<div class="card">
|
<div class="card">
|
||||||
<h3 class="card-header">{{ name || 'Unknown' }}</h3>
|
<h3 class="card-header">{{ name || 'Unknown' }}</h3>
|
||||||
<img class="card-img webcam" :src="'/webcam/' + slug" />
|
<img class="card-img webcam" :src="'/webcam/' + slug" />
|
||||||
<div v-if="status">
|
<div class="card-body" v-if="status">
|
||||||
<div>{{ status.state.text }}</div>
|
<div>{{ status.state.text }}</div>
|
||||||
<div>Job File Name: {{ status.job.file.name || 'None' }}</div>
|
<div>Job File Name: {{ status.job.file.name || 'None' }}</div>
|
||||||
<div v-if="status.progress.completion">
|
<div v-if="status.progress.completion">
|
||||||
@ -18,21 +18,40 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>User: {{ status.job.user || '-' }}</div>
|
<div>User: {{ status.job.user || '-' }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-footer">Last updated {{ lastUpdateString }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue';
|
||||||
import prettyMilliseconds from 'pretty-ms';
|
import prettyMilliseconds from 'pretty-ms';
|
||||||
|
|
||||||
import * as octoprint from '../types/octoprint';
|
import * as octoprint from '../types/octoprint';
|
||||||
|
|
||||||
defineProps<{
|
const props = defineProps<{
|
||||||
slug: string;
|
slug: string;
|
||||||
name?: string;
|
name?: string;
|
||||||
|
lastUpdate: Date;
|
||||||
|
now: Date;
|
||||||
status: octoprint.CurrentOrHistoryPayload | null;
|
status: octoprint.CurrentOrHistoryPayload | null;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
function formatDuration(seconds: number): string {
|
function formatDuration(seconds: number): string {
|
||||||
return prettyMilliseconds(seconds * 1000);
|
return prettyMilliseconds(seconds * 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const lastUpdateString = computed(() => {
|
||||||
|
if (props.status !== null) {
|
||||||
|
const elapsed = props.now.getTime() - props.lastUpdate.getTime();
|
||||||
|
if (elapsed < 10_000) {
|
||||||
|
return 'seconds ago';
|
||||||
|
} else if (elapsed < 60_000) {
|
||||||
|
return 'less than a minute ago';
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
prettyMilliseconds(elapsed, { compact: true, verbose: true }) + ' ago'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user