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

12
index.html
View File

@ -1,4 +1,10 @@
<body> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<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()],
})