adam.goldsmith/assetLabelGen
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: adam.goldsmith:e983d4a1578e18d7695664d07fc6b5d7e5eb563f
Branches Tags
adam.goldsmith:master
adam.goldsmith:wiki-data
...
compare: adam.goldsmith:7be11d211fdec5e368a7253891ba03ae751bd451
Branches Tags
adam.goldsmith:wiki-data
adam.goldsmith:master

4 Commits
e983d4a157 ... 7be11d211f

Author SHA1 Message Date
Adam Goldsmith
7be11d211f Migrate to Vue 3.2 and vite 2021-11-12 11:33:39 -05:00
Adam Goldsmith
913ec2f69c Correct name of AssetLabel component 2021-10-25 15:23:46 -04:00
Adam Goldsmith
9ebccb6583 Use correct units for font sizes in ComputerLabelText 2020-11-14 20:50:54 -05:00
Adam Goldsmith
ea715da82e Minor formatting changes from prettier 2.0 2020-03-22 00:40:43 -04:00
11 changed files with 131 additions and 98 deletions
Show Stats Expand all files Collapse all files

37
App.vue
View File

@ -1,37 +0,0 @@
<template>
<div>
<AssetLabel
v-for="asset in assets.rows.filter(t => t.name !== '')"
:asset="asset"
:key="asset.id"
>
<component :is="asset.category.name + 'LabelText'" :asset="asset" />
</AssetLabel>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import snipeit from './snipeit';
import AssetLabel from './AssetLabel.vue';
import ComputersLabelText from './ComputersLabelText.vue';
import assets from './computers.json';
@Component({ components: { AssetLabel, ComputersLabelText } })
export default class App extends Vue {
assets: { rows: [snipeit.Hardware]; total: number } = assets;
}
</script>
<style>
@page {
size: calc(146.64pt - 4.32pt) calc(69.12pt - 4.08pt);
margin: 1mm;
}
body {
margin: 0;
}
</style>

8
index.html
View File

@ -1,4 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="index.ts"></script> <script type="module" src="/src/index.ts"></script>
</body> </body>
</html>

7
index.ts
View File

@ -1,7 +0,0 @@
import Vue from 'vue';
import App from './App';
let app = new Vue({
render: h => h(App),
}).$mount('#app');

19
package.json
View File

@ -7,13 +7,20 @@
"jsbarcode": "^3.11.0", "jsbarcode": "^3.11.0",
"number-to-words": "^1.2.4", "number-to-words": "^1.2.4",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"vue": "^2.6.11", "vue": "^3.2.20"
"vue-hot-reload-api": "^2.3.4",
"vue-property-decorator": "^8.4.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/component-compiler-utils": "^3.1.1", "@types/number-to-words": "^1.2.1",
"typescript": "^3.8.3", "@types/qrcode": "^1.4.1",
"vue-template-compiler": "^2.6.11" "@vitejs/plugin-vue": "^1.9.3",
"typescript": "^4.4.4",
"vite": "^2.6.11",
"vue-tsc": "^0.28.8"
},
"scripts": {
"start": "npm run dev",
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
} }
} }

41
src/App.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div>
<AssetLabel
v-for="asset in assets.rows.filter((t) => t.name !== '')"
:asset="asset"
:key="asset.id"
>
<component
:is="component(asset.category.name)"
:asset="asset"
></component>
</AssetLabel>
</div>
</template>
<script setup lang="ts">
import snipeit from './snipeit';
import AssetLabel from './AssetLabel.vue';
import ComputersLabelText from './ComputersLabelText.vue';
import assets_raw from '/computers.json';
const assets: { rows: [snipeit.Hardware]; total: number } = assets_raw;
function component(category: string) {
switch (category) {
case 'Computers':
return ComputersLabelText;
}
}
</script>
<style>
@page {
size: calc(146.64pt - 4.32pt) calc(69.12pt - 4.08pt);
margin: 1mm;
}
body {
margin: 0;
}
</style>

27
AssetLabel.vue → src/AssetLabel.vue
View File

@ -14,35 +14,36 @@
</article> </article>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'; import { ref, Ref, onMounted, defineProps } from 'vue';
import JsBarcode from 'jsbarcode'; import JsBarcode from 'jsbarcode';
import QRCode from 'qrcode'; import QRCode from 'qrcode';
import snipeit from './snipeit'; import snipeit from './snipeit';
@Component const QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
export default class ComputerLabel extends Vue {
QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
@Prop(Object) readonly asset: snipeit.Hardware; const props = defineProps<{
asset: snipeit.Hardware;
}>();
qrcode_dataURL: string | null = null; const qrcode_dataURL: Ref<string> = ref('');
async mounted() { const barcode = ref(null);
this.qrcode_dataURL = await QRCode.toDataURL(
this.QRCODE_BASE + this.asset.asset_tag, onMounted(async () => {
qrcode_dataURL.value = await QRCode.toDataURL(
QRCODE_BASE + props.asset.asset_tag,
{ {
margin: 0, margin: 0,
} }
); );
JsBarcode(this.$refs.barcode, this.asset.asset_tag, { JsBarcode(barcode.value, props.asset.asset_tag, {
displayValue: false, displayValue: false,
margin: 0, margin: 0,
}); });
} });
}
</script> </script>
<style> <style>

38
ComputersLabelText.vue → src/ComputersLabelText.vue
View File

@ -10,30 +10,32 @@
</span> </span>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'; import { computed, ComputedRef, defineProps } from 'vue';
import { toWords as numberToWords } from 'number-to-words'; import { toWords as numberToWords } from 'number-to-words';
import snipeit from './snipeit'; import snipeit from './snipeit';
@Component const props = defineProps<{
export default class ComputersLabelText extends Vue { asset: snipeit.Hardware;
@Prop(Object) readonly asset: snipeit.Hardware; }>();
get emoji() { const emoji: ComputedRef<string> = computed(() => {
return this.asset.name.includes('Laptop') return props.asset.name.includes('Laptop')
? '💻' ? '💻'
: this.asset.name.includes('Desktop') : props.asset.name.includes('Desktop')
? '🖥' ? '🖥'
: '?'; : '?';
} });
get name() {
return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
}
getCustom(field) { const name: ComputedRef<string> = computed(() => {
return this.asset.custom_fields[field]?.value; const number = props.asset.name.match(/[0-9]+$/)?.[0];
} return numberToWords(number ?? '??').toUpperCase();
});
function getCustom(field: string) {
return props.asset.custom_fields[field]?.value;
} }
</script> </script>
@ -45,17 +47,17 @@ export default class ComputersLabelText extends Vue {
.emoji { .emoji {
font: 'Twemoji Mozilla'; font: 'Twemoji Mozilla';
font-size: 20; font-size: 20px;
vertical-align: 30%; vertical-align: 30%;
} }
.name { .name {
font-size: 30; font-size: 30px;
line-height: 0.8; line-height: 0.8;
margin-bottom: 0.1em; margin-bottom: 0.1em;
} }
.mac { .mac {
font-size: 10; font-size: 10px;
} }
</style> </style>

6
src/index.ts Normal file
View File

@ -0,0 +1,6 @@
import * as Vue from 'vue';
import App from './App.vue';
const app = Vue.createApp(App)
.mount('#app');

0
snipeit.d.ts → src/snipeit.d.ts vendored
View File

15
tsconfig.json
View File

@ -1,8 +1,15 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es6", "target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true, "strict": true,
"module": "es2015", "jsx": "preserve",
"moduleResolution": "node" "sourceMap": true,
} "resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
} }

7
vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})