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

Migrate to Vue 3.2 and vite

Browse Source
This commit is contained in:
Adam Goldsmith 2021-10-25 16:18:18 -04:00
parent 913ec2f69c
commit 7be11d211f
10 changed files with 99 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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"
} }
} }

20
App.vue → src/App.vue
View File

@ -5,23 +5,27 @@
:asset="asset" :asset="asset"
:key="asset.id" :key="asset.id"
> >
<component :is="asset.category.name + 'LabelText'" :asset="asset" /> <component
:is="component(asset.category.name)"
:asset="asset"
></component>
</AssetLabel> </AssetLabel>
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import snipeit from './snipeit'; import snipeit from './snipeit';
import AssetLabel from './AssetLabel.vue'; import AssetLabel from './AssetLabel.vue';
import ComputersLabelText from './ComputersLabelText.vue'; import ComputersLabelText from './ComputersLabelText.vue';
import assets from './computers.json'; import assets_raw from '/computers.json';
const assets: { rows: [snipeit.Hardware]; total: number } = assets_raw;
@Component({ components: { AssetLabel, ComputersLabelText } }) function component(category: string) {
export default class App extends Vue { switch (category) {
assets: { rows: [snipeit.Hardware]; total: number } = assets; case 'Computers':
return ComputersLabelText;
}
} }
</script> </script>

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 AssetLabel 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>

32
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>

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()],
})