Compare commits
No commits in common. "7be11d211fdec5e368a7253891ba03ae751bd451" and "e983d4a1578e18d7695664d07fc6b5d7e5eb563f" have entirely different histories.
7be11d211f
...
e983d4a157
37
App.vue
Normal file
37
App.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<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>
|
||||||
@ -14,36 +14,35 @@
|
|||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script lang="ts">
|
||||||
import { ref, Ref, onMounted, defineProps } from 'vue';
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||||
import JsBarcode from 'jsbarcode';
|
import JsBarcode from 'jsbarcode';
|
||||||
import QRCode from 'qrcode';
|
import QRCode from 'qrcode';
|
||||||
|
|
||||||
import snipeit from './snipeit';
|
import snipeit from './snipeit';
|
||||||
|
|
||||||
const QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
|
@Component
|
||||||
|
export default class ComputerLabel extends Vue {
|
||||||
|
QRCODE_BASE = 'https://inv.claremontmakerspace.org/';
|
||||||
|
|
||||||
const props = defineProps<{
|
@Prop(Object) readonly asset: snipeit.Hardware;
|
||||||
asset: snipeit.Hardware;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const qrcode_dataURL: Ref<string> = ref('');
|
qrcode_dataURL: string | null = null;
|
||||||
|
|
||||||
const barcode = ref(null);
|
async mounted() {
|
||||||
|
this.qrcode_dataURL = await QRCode.toDataURL(
|
||||||
|
this.QRCODE_BASE + this.asset.asset_tag,
|
||||||
|
{
|
||||||
|
margin: 0,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
onMounted(async () => {
|
JsBarcode(this.$refs.barcode, this.asset.asset_tag, {
|
||||||
qrcode_dataURL.value = await QRCode.toDataURL(
|
displayValue: false,
|
||||||
QRCODE_BASE + props.asset.asset_tag,
|
|
||||||
{
|
|
||||||
margin: 0,
|
margin: 0,
|
||||||
}
|
});
|
||||||
);
|
}
|
||||||
|
}
|
||||||
JsBarcode(barcode.value, props.asset.asset_tag, {
|
|
||||||
displayValue: false,
|
|
||||||
margin: 0,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -10,32 +10,30 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script lang="ts">
|
||||||
import { computed, ComputedRef, defineProps } from 'vue';
|
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||||
|
|
||||||
import { toWords as numberToWords } from 'number-to-words';
|
import { toWords as numberToWords } from 'number-to-words';
|
||||||
|
|
||||||
import snipeit from './snipeit';
|
import snipeit from './snipeit';
|
||||||
|
|
||||||
const props = defineProps<{
|
@Component
|
||||||
asset: snipeit.Hardware;
|
export default class ComputersLabelText extends Vue {
|
||||||
}>();
|
@Prop(Object) readonly asset: snipeit.Hardware;
|
||||||
|
|
||||||
const emoji: ComputedRef<string> = computed(() => {
|
get emoji() {
|
||||||
return props.asset.name.includes('Laptop')
|
return this.asset.name.includes('Laptop')
|
||||||
? '💻'
|
? '💻'
|
||||||
: props.asset.name.includes('Desktop')
|
: this.asset.name.includes('Desktop')
|
||||||
? '🖥'
|
? '🖥'
|
||||||
: '?';
|
: '?';
|
||||||
});
|
}
|
||||||
|
get name() {
|
||||||
|
return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
const name: ComputedRef<string> = computed(() => {
|
getCustom(field) {
|
||||||
const number = props.asset.name.match(/[0-9]+$/)?.[0];
|
return this.asset.custom_fields[field]?.value;
|
||||||
return numberToWords(number ?? '??').toUpperCase();
|
}
|
||||||
});
|
|
||||||
|
|
||||||
function getCustom(field: string) {
|
|
||||||
return props.asset.custom_fields[field]?.value;
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -47,17 +45,17 @@ function getCustom(field: string) {
|
|||||||
|
|
||||||
.emoji {
|
.emoji {
|
||||||
font: 'Twemoji Mozilla';
|
font: 'Twemoji Mozilla';
|
||||||
font-size: 20px;
|
font-size: 20;
|
||||||
vertical-align: 30%;
|
vertical-align: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 30px;
|
font-size: 30;
|
||||||
line-height: 0.8;
|
line-height: 0.8;
|
||||||
margin-bottom: 0.1em;
|
margin-bottom: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mac {
|
.mac {
|
||||||
font-size: 10px;
|
font-size: 10;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
14
index.html
14
index.html
@ -1,10 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<body>
|
||||||
<html lang="en">
|
<div id="app"></div>
|
||||||
<head>
|
<script src="index.ts"></script>
|
||||||
<meta charset="UTF-8" />
|
</body>
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/index.ts"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
7
index.ts
Normal file
7
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');
|
||||||
19
package.json
19
package.json
@ -7,20 +7,13 @@
|
|||||||
"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": "^3.2.20"
|
"vue": "^2.6.11",
|
||||||
|
"vue-hot-reload-api": "^2.3.4",
|
||||||
|
"vue-property-decorator": "^8.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/number-to-words": "^1.2.1",
|
"@vue/component-compiler-utils": "^3.1.1",
|
||||||
"@types/qrcode": "^1.4.1",
|
"typescript": "^3.8.3",
|
||||||
"@vitejs/plugin-vue": "^1.9.3",
|
"vue-template-compiler": "^2.6.11"
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
0
src/snipeit.d.ts → snipeit.d.ts
vendored
0
src/snipeit.d.ts → snipeit.d.ts
vendored
41
src/App.vue
41
src/App.vue
@ -1,41 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import * as Vue from 'vue';
|
|
||||||
|
|
||||||
import App from './App.vue';
|
|
||||||
|
|
||||||
const app = Vue.createApp(App)
|
|
||||||
.mount('#app');
|
|
||||||
@ -1,15 +1,8 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "esnext",
|
"target": "es6",
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "esnext",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"jsx": "preserve",
|
"module": "es2015",
|
||||||
"sourceMap": true,
|
"moduleResolution": "node"
|
||||||
"resolveJsonModule": true,
|
}
|
||||||
"esModuleInterop": true,
|
|
||||||
"lib": ["esnext", "dom"]
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import vue from '@vitejs/plugin-vue'
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [vue()],
|
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user