adam.goldsmith/PrinterStatus
2
0
Fork 0
mirror of https://github.com/ad1217/PrinterStatus synced 2024-11-14 12:13:48 -05:00
Code Issues 1 Releases Wiki Activity

Initial Commit, basic client-only implementation

Browse Source
This commit is contained in:
Adam Goldsmith 2019-09-05 11:50:34 -04:00
commit f163fde565
10 changed files with 1513 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.editorconfig Normal file
View 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
View File

@ -0,0 +1,3 @@
/.cache/
/dist/
/node_modules/

3
.prettierrc Normal file
View File

@ -0,0 +1,3 @@
trailingComma: es5
singleQuote: true
jsxBracketSameLine: true

1327
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

15
package.json Normal file
View 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
View 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
View 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
View File

@ -0,0 +1,4 @@
<body>
<div id="app"></div>
<script src="index.ts"></script>
</body>

7
src/index.ts Normal file
View 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
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node"
}
}