mirror of
https://github.com/ad1217/PrinterStatus
synced 2024-11-21 15:03:48 -05:00
Initial Commit, basic client-only implementation
This commit is contained in:
commit
f163fde565
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# EditorConfig is awesome: https://EditorConfig.org
|
||||||
|
|
||||||
|
[*]
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/.cache/
|
||||||
|
/dist/
|
||||||
|
/node_modules/
|
3
.prettierrc
Normal file
3
.prettierrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
trailingComma: es5
|
||||||
|
singleQuote: true
|
||||||
|
jsxBracketSameLine: true
|
1327
package-lock.json
generated
Normal file
1327
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
package.json
Normal file
15
package.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.5.5",
|
||||||
|
"@vue/component-compiler-utils": "^3.0.0",
|
||||||
|
"sass": "^1.23.0-module.beta.1",
|
||||||
|
"typescript": "^3.6.2",
|
||||||
|
"vue-template-compiler": "^2.6.10"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"node-gyp": "^5.0.3",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"vue-hot-reload-api": "^2.3.3",
|
||||||
|
"vue-property-decorator": "^8.2.2"
|
||||||
|
}
|
||||||
|
}
|
30
src/App.vue
Normal file
30
src/App.vue
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<PrinterTile
|
||||||
|
v-for="printer in printers"
|
||||||
|
:key="printer.address"
|
||||||
|
v-bind="printer"
|
||||||
|
>
|
||||||
|
</PrinterTile>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||||
|
|
||||||
|
import PrinterTile from './PrinterTile.vue';
|
||||||
|
|
||||||
|
@Component({ components: { PrinterTile } })
|
||||||
|
export default class App extends Vue {
|
||||||
|
printers = [
|
||||||
|
{
|
||||||
|
address: 'http://octopi.local:5000/',
|
||||||
|
apikey: 'BEF073DD42A64431BDD72D83FA563DF5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: 'http://octopi.local:5000/',
|
||||||
|
apikey: 'BEF073DD42A64431BDD72D83FA563DF5',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
</script>
|
107
src/PrinterTile.vue
Normal file
107
src/PrinterTile.vue
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="currentJob" class="card">
|
||||||
|
<div class="card-header">{{ name || 'Unknown' }}</div>
|
||||||
|
<div v-if="webcamURL">
|
||||||
|
<img class="webcam" :src="webcamURL" />
|
||||||
|
</div>
|
||||||
|
<div>Job File Name: {{ currentJob.job.file.name || 'None' }}</div>
|
||||||
|
<div>
|
||||||
|
Job Completion:
|
||||||
|
<progress
|
||||||
|
v-if="currentJob.progress.completion"
|
||||||
|
:value="currentJob.progress.completion"
|
||||||
|
>
|
||||||
|
{{ currentJob.progress.completion }}
|
||||||
|
</progress>
|
||||||
|
<span v-else> - </span>
|
||||||
|
</div>
|
||||||
|
<div>User: {{ currentJob.job.user || '-' }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||||
|
|
||||||
|
interface IJobInfo {
|
||||||
|
job: {
|
||||||
|
file: {
|
||||||
|
name: string;
|
||||||
|
display: string;
|
||||||
|
path: string;
|
||||||
|
type: string;
|
||||||
|
typePath: Array<string>;
|
||||||
|
};
|
||||||
|
user?: string;
|
||||||
|
estimatedPrintTime?: number;
|
||||||
|
lastPrintTime?: number;
|
||||||
|
filament?: {
|
||||||
|
length?: number;
|
||||||
|
volume?: number;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
progress: {
|
||||||
|
completion: number;
|
||||||
|
filepos: number;
|
||||||
|
printTime: number;
|
||||||
|
printTimeLeft: number;
|
||||||
|
};
|
||||||
|
state: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component
|
||||||
|
export default class PrinterTile extends Vue {
|
||||||
|
@Prop(String) readonly address!: string;
|
||||||
|
@Prop(String) readonly apikey!: string;
|
||||||
|
|
||||||
|
name: string = '';
|
||||||
|
webcamURL: string | null = null;
|
||||||
|
currentJob: IJobInfo | null = null;
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
fetch(this.address + '/api/settings', {
|
||||||
|
headers: {
|
||||||
|
'X-Api-Key': this.apikey,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(r => {
|
||||||
|
this.webcamURL = r.webcam.streamUrl;
|
||||||
|
this.name = r.appearance.name;
|
||||||
|
})
|
||||||
|
.then(() =>
|
||||||
|
fetch(this.address + '/api/job', {
|
||||||
|
headers: {
|
||||||
|
'X-Api-Key': this.apikey,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(r => {
|
||||||
|
this.currentJob = r;
|
||||||
|
})
|
||||||
|
.catch(console.error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.card {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
|
||||||
|
rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.webcam {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
4
src/index.html
Normal file
4
src/index.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script src="index.ts"></script>
|
||||||
|
</body>
|
7
src/index.ts
Normal file
7
src/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
let app = new Vue({
|
||||||
|
render: h => h(App),
|
||||||
|
}).$mount('#app');
|
8
tsconfig.json
Normal file
8
tsconfig.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"strict": true,
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node"
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user