mirror of
https://github.com/ad1217/PrinterStatus
synced 2024-11-24 08:23:48 -05:00
Define a slug in the config, rather than using the name as one
This commit is contained in:
parent
0b2919abf5
commit
34f9ec9413
@ -13,7 +13,11 @@ import * as octoprint from '../types/octoprint';
|
|||||||
|
|
||||||
const PORT = process.env.PORT || 1234;
|
const PORT = process.env.PORT || 1234;
|
||||||
|
|
||||||
type configuration = { printers: { address: string; apikey: string }[] };
|
type configuration = {
|
||||||
|
printers: {
|
||||||
|
[key: string]: { address: string; apikey: string }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Load config
|
// Load config
|
||||||
const config: configuration = yaml.load(
|
const config: configuration = yaml.load(
|
||||||
@ -48,7 +52,7 @@ app.ws('/ws', function (ws, req) {
|
|||||||
|
|
||||||
app.get('/webcam/:printer', (req, res) => {
|
app.get('/webcam/:printer', (req, res) => {
|
||||||
let printer: PrinterStatus | undefined = printerStatuses.find(
|
let printer: PrinterStatus | undefined = printerStatuses.find(
|
||||||
(p) => p.name === req.params.printer
|
(p) => p.slug === req.params.printer
|
||||||
);
|
);
|
||||||
if (printer?.webcamURL) {
|
if (printer?.webcamURL) {
|
||||||
req.url = ''; // truncate the url for passing to the proxy
|
req.url = ''; // truncate the url for passing to the proxy
|
||||||
@ -59,6 +63,7 @@ app.get('/webcam/:printer', (req, res) => {
|
|||||||
app.listen(PORT);
|
app.listen(PORT);
|
||||||
|
|
||||||
class PrinterStatus {
|
class PrinterStatus {
|
||||||
|
slug: string;
|
||||||
address: string;
|
address: string;
|
||||||
apikey: string;
|
apikey: string;
|
||||||
|
|
||||||
@ -68,7 +73,8 @@ class PrinterStatus {
|
|||||||
websocket?: WebSocket;
|
websocket?: WebSocket;
|
||||||
lastStatus?: messages.ExtendedMessage;
|
lastStatus?: messages.ExtendedMessage;
|
||||||
|
|
||||||
constructor(address: string, apikey: string) {
|
constructor(slug: string, address: string, apikey: string) {
|
||||||
|
this.slug = slug;
|
||||||
this.address = address;
|
this.address = address;
|
||||||
this.apikey = apikey;
|
this.apikey = apikey;
|
||||||
|
|
||||||
@ -106,7 +112,8 @@ class PrinterStatus {
|
|||||||
|
|
||||||
let ext_event: messages.ExtendedMessage = {
|
let ext_event: messages.ExtendedMessage = {
|
||||||
...event,
|
...event,
|
||||||
printer: this.name!,
|
printer: this.slug,
|
||||||
|
name: this.name,
|
||||||
};
|
};
|
||||||
broadcastPayload(ext_event);
|
broadcastPayload(ext_event);
|
||||||
|
|
||||||
@ -115,7 +122,7 @@ class PrinterStatus {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
.on('close', () => {
|
.on('close', () => {
|
||||||
console.log('Lost connection to ' + this.name + ' reconnecting...');
|
console.log('Lost connection to ' + this.slug + ' reconnecting...');
|
||||||
setTimeout(() => this.connect_websocket(authToken), 5000);
|
setTimeout(() => this.connect_websocket(authToken), 5000);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -145,15 +152,15 @@ class PrinterStatus {
|
|||||||
if (this.lastStatus) {
|
if (this.lastStatus) {
|
||||||
payload = this.lastStatus;
|
payload = this.lastStatus;
|
||||||
} else {
|
} else {
|
||||||
payload = { init: null, printer: this.name! };
|
payload = { init: null, printer: this.slug, name: this.name };
|
||||||
}
|
}
|
||||||
ws.send(JSON.stringify(payload));
|
ws.send(JSON.stringify(payload));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function initPrinters() {
|
function initPrinters() {
|
||||||
printerStatuses = config.printers.map(
|
printerStatuses = Object.entries(config.printers).map(
|
||||||
(printer) => new PrinterStatus(printer.address, printer.apikey)
|
([slug, printer]) => new PrinterStatus(slug, printer.address, printer.apikey)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
27
src/App.vue
27
src/App.vue
@ -5,9 +5,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<PrinterCard
|
<PrinterCard
|
||||||
v-else
|
v-else
|
||||||
v-for="(status, name) in printers"
|
v-for="({ name, status }, slug) in printers"
|
||||||
:key="name"
|
:key="slug"
|
||||||
:name="name as string"
|
:slug="slug as string"
|
||||||
|
:name="name"
|
||||||
:status="status"
|
:status="status"
|
||||||
>
|
>
|
||||||
</PrinterCard>
|
</PrinterCard>
|
||||||
@ -22,7 +23,10 @@ import * as octoprint from '../types/octoprint';
|
|||||||
import PrinterCard from './PrinterCard.vue';
|
import PrinterCard from './PrinterCard.vue';
|
||||||
|
|
||||||
const printers: Ref<{
|
const printers: Ref<{
|
||||||
[key: string]: octoprint.CurrentOrHistoryPayload | null;
|
[key: string]: {
|
||||||
|
name?: string;
|
||||||
|
status: octoprint.CurrentOrHistoryPayload | null;
|
||||||
|
};
|
||||||
}> = ref({});
|
}> = ref({});
|
||||||
const hasPrinters = computed(() => Object.keys(printers.value).length > 0);
|
const hasPrinters = computed(() => Object.keys(printers.value).length > 0);
|
||||||
|
|
||||||
@ -37,12 +41,17 @@ function connectWebsocket() {
|
|||||||
const event: messages.ExtendedMessage = JSON.parse(ev.data as string);
|
const event: messages.ExtendedMessage = JSON.parse(ev.data as string);
|
||||||
console.log(event);
|
console.log(event);
|
||||||
|
|
||||||
|
if (!(event.printer in printers.value)) {
|
||||||
|
printers.value[event.printer] = { status: null };
|
||||||
|
}
|
||||||
|
printers.value[event.printer].name = event.name;
|
||||||
|
|
||||||
if ('init' in event) {
|
if ('init' in event) {
|
||||||
printers.value[event.printer] = null;
|
printers.value[event.printer].status = null;
|
||||||
} else if ('current' in event) {
|
} else if ('current' in event && event.current) {
|
||||||
printers.value[event.printer] = event.current!;
|
printers.value[event.printer].status = event.current;
|
||||||
} else if ('history' in event) {
|
} else if ('history' in event && event.history) {
|
||||||
printers.value[event.printer] = event.history!;
|
printers.value[event.printer].status = event.history;
|
||||||
} else if ('remote_ws_status' in event) {
|
} else if ('remote_ws_status' in event) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">{{ name || 'Unknown' }}</div>
|
<div class="card-header">{{ name || 'Unknown' }}</div>
|
||||||
<img class="webcam" :src="'/webcam/' + name" />
|
<img class="webcam" :src="'/webcam/' + slug" />
|
||||||
<div v-if="status">
|
<div 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>
|
||||||
@ -27,7 +27,8 @@ import prettyMilliseconds from 'pretty-ms';
|
|||||||
import * as octoprint from '../types/octoprint';
|
import * as octoprint from '../types/octoprint';
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
name: string;
|
slug: string;
|
||||||
|
name?: string;
|
||||||
status: octoprint.CurrentOrHistoryPayload | null;
|
status: octoprint.CurrentOrHistoryPayload | null;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
1
types/messages.d.ts
vendored
1
types/messages.d.ts
vendored
@ -2,4 +2,5 @@ import { Message } from './octoprint';
|
|||||||
|
|
||||||
export type ExtendedMessage = (Message | { init?: null }) & {
|
export type ExtendedMessage = (Message | { init?: null }) & {
|
||||||
printer: string;
|
printer: string;
|
||||||
|
name?: string;
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user