Initial Commit, basic client-only implementation
This commit is contained in:
commit
f163fde565
|
|
@ -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
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/.cache/
|
||||
/dist/
|
||||
/node_modules/
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
trailingComma: es5
|
||||
singleQuote: true
|
||||
jsxBracketSameLine: true
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="index.ts"></script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
import App from './App';
|
||||
|
||||
let app = new Vue({
|
||||
render: h => h(App),
|
||||
}).$mount('#app');
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"strict": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue