2
0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-10 18:45:08 -05:00

Add card footer with last updated time as string

This commit is contained in:
Adam Goldsmith 2021-11-03 16:01:24 -04:00
parent de43fdd642
commit 007e08d269
2 changed files with 29 additions and 5 deletions

View File

@ -18,8 +18,8 @@
justify-content-center
"
>
<div class="col" v-for="({ name, status }, slug) in printers" :key="slug">
<PrinterCard :slug="slug as string" :name="name" :status="status">
<div class="col" v-for="(printer, slug) in printers" :key="slug">
<PrinterCard :slug="slug as string" v-bind="printer" :now="now">
</PrinterCard>
</div>
</div>
@ -36,11 +36,15 @@ import PrinterCard from './PrinterCard.vue';
const printers: Ref<{
[key: string]: {
name?: string;
lastUpdate: Date;
status: octoprint.CurrentOrHistoryPayload | null;
};
}> = ref({});
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;
function connectWebsocket() {
@ -53,9 +57,10 @@ function connectWebsocket() {
console.log(event);
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].lastUpdate = new Date();
if ('init' in event) {
printers.value[event.printer].status = null;

View File

@ -2,7 +2,7 @@
<div class="card">
<h3 class="card-header">{{ name || 'Unknown' }}</h3>
<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>Job File Name: {{ status.job.file.name || 'None' }}</div>
<div v-if="status.progress.completion">
@ -18,21 +18,40 @@
</div>
<div>User: {{ status.job.user || '-' }}</div>
</div>
<div class="card-footer">Last updated {{ lastUpdateString }}</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import prettyMilliseconds from 'pretty-ms';
import * as octoprint from '../types/octoprint';
defineProps<{
const props = defineProps<{
slug: string;
name?: string;
lastUpdate: Date;
now: Date;
status: octoprint.CurrentOrHistoryPayload | null;
}>();
function formatDuration(seconds: number): string {
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>