Use slots to make the text content more dynamic
This commit is contained in:
parent
a239e2dd6e
commit
16b736a0bd
23
App.vue
23
App.vue
@ -1,13 +1,26 @@
|
||||
<template>
|
||||
<ToolLabels />
|
||||
<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 } from 'vue-property-decorator';
|
||||
import ToolLabels from './ToolLabels.vue';
|
||||
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||
|
||||
@Component({ components: { ToolLabels } })
|
||||
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>
|
||||
|
@ -2,12 +2,7 @@
|
||||
<article class="label">
|
||||
<div class="content">
|
||||
<img class="qrcode" :src="qrcode_dataURL" />
|
||||
<span class="text-content">
|
||||
<div class="name">{{ name }}</div>
|
||||
<div class="hostname">{{ asset.name }}</div>
|
||||
<div class="mac">{{ mac }}</div>
|
||||
<div class="mac">{{ mac2 }}</div>
|
||||
</span>
|
||||
<slot> </slot>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="scanme">Scan the QR code to learn more!</span>
|
||||
@ -22,7 +17,6 @@
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||
import JsBarcode from 'jsbarcode';
|
||||
import { toWords as numberToWords } from 'number-to-words';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
import snipeit from './snipeit';
|
||||
@ -48,17 +42,6 @@ export default class ComputerLabel extends Vue {
|
||||
margin: 0,
|
||||
});
|
||||
}
|
||||
|
||||
get name() {
|
||||
return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
|
||||
}
|
||||
|
||||
get mac() {
|
||||
return this.asset.custom_fields['MAC Address']?.value;
|
||||
}
|
||||
get mac2() {
|
||||
return this.asset.custom_fields['MAC Address 2']?.value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
31
ComputersLabelText.vue
Normal file
31
ComputersLabelText.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<span class="text-content">
|
||||
<div class="name">{{ name }}</div>
|
||||
<div class="hostname">{{ asset.name }}</div>
|
||||
<div class="mac">{{ mac }}</div>
|
||||
<div class="mac">{{ mac2 }}</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||
import { toWords as numberToWords } from 'number-to-words';
|
||||
|
||||
import snipeit from './snipeit';
|
||||
|
||||
@Component
|
||||
export default class ComputersLabelText extends Vue {
|
||||
@Prop(Object) readonly asset: snipeit.Hardware;
|
||||
|
||||
get name() {
|
||||
return numberToWords(this.asset.name.match(/[0-9]+$/)[0]).toUpperCase();
|
||||
}
|
||||
|
||||
get mac() {
|
||||
return this.asset.custom_fields['MAC Address']?.value;
|
||||
}
|
||||
get mac2() {
|
||||
return this.asset.custom_fields['MAC Address 2']?.value;
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<ComputerLabel
|
||||
v-for="asset in assets.rows.filter(t => t.name !== '')"
|
||||
:asset="asset"
|
||||
:key="asset.id"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, Prop } from 'vue-property-decorator';
|
||||
|
||||
import snipeit from './snipeit';
|
||||
import ComputerLabel from './ComputerLabel.vue';
|
||||
|
||||
import assets from './computers.json';
|
||||
|
||||
@Component({ components: { ComputerLabel } })
|
||||
export default class ToolLabels extends Vue {
|
||||
assets: { rows: [snipeit.Hardware]; total: number } = assets;
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user