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

Use bootstrap for styling

Browse Source
This commit is contained in:
Adam Goldsmith 2021-11-03 15:04:18 -04:00
parent 1175754a09
commit de43fdd642
5 changed files with 64 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "printer_status",
"version": "0.0.0",
"dependencies": {
"bootstrap": "^5.1.3",
"pretty-ms": "^7.0.1",
"vue": "^3.2.0"
},
@ -77,6 +78,16 @@
"integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
"dev": true
},
"node_modules/@popperjs/core": {
"version": "2.10.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
"integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@vitejs/plugin-vue": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.3.tgz",
@ -345,6 +356,18 @@
"node": ">=8"
}
},
"node_modules/bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
},
"peerDependencies": {
"@popperjs/core": "^2.10.2"
}
},
"node_modules/braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@ -1929,6 +1952,12 @@
"integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
"dev": true
},
"@popperjs/core": {
"version": "2.10.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
"integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
"peer": true
},
"@vitejs/plugin-vue": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.9.3.tgz",
@ -2167,6 +2196,12 @@
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true
},
"bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {}
},
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",

1
package.json
View File

@ -10,6 +10,7 @@
"vue-tsc": "^0.3.0"
},
"dependencies": {
"bootstrap": "^5.1.3",
"pretty-ms": "^7.0.1",
"vue": "^3.2.0"
},

69
src/App.vue
View File

@ -1,17 +1,28 @@
<template>
<div class="content">
<div v-if="!hasPrinters">
<div class="loading-spinner"></div>
</div>
<PrinterCard
v-else
v-for="({ name, status }, slug) in printers"
:key="slug"
:slug="slug as string"
:name="name"
:status="status"
<div>
<div
class="d-flex align-items-center justify-content-center"
style="height: 100vh"
v-if="!hasPrinters"
>
</PrinterCard>
<div class="spinner-border" style="width: 7vw; height: 7vw" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div
v-else
class="
row row-cols-1 row-cols-md-2 row-cols-xxl-3
m-1 m-md-3
g-4
justify-content-center
"
>
<div class="col" v-for="({ name, status }, slug) in printers" :key="slug">
<PrinterCard :slug="slug as string" :name="name" :status="status">
</PrinterCard>
</div>
</div>
</div>
</template>
@ -64,37 +75,3 @@ function connectWebsocket() {
connectWebsocket();
</script>
<style>
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
height: 90vh;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-spinner {
display: block;
height: 10vh;
width: 10vh;
border: solid 1vh transparent;
border-top-color: #1c87c9;
border-radius: 50%;
animation: 2s linear infinite spinner;
}
</style>

27
src/PrinterCard.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="card">
<div class="card-header">{{ name || 'Unknown' }}</div>
<img class="webcam" :src="'/webcam/' + slug" />
<h3 class="card-header">{{ name || 'Unknown' }}</h3>
<img class="card-img webcam" :src="'/webcam/' + slug" />
<div v-if="status">
<div>{{ status.state.text }}</div>
<div>Job File Name: {{ status.job.file.name || 'None' }}</div>
@ -36,26 +36,3 @@ function formatDuration(seconds: number): string {
return prettyMilliseconds(seconds * 1000);
}
</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 {
width: 480px;
max-width: 100%;
}
}
</style>

3
src/index.ts
View File

@ -1,5 +1,8 @@
import * as Vue from 'vue';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import App from './App.vue';
const app = Vue.createApp(App).mount('#app');