feat: can generate multiple uuids

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-08 19:10:36 +02:00
parent 625b43e436
commit e7c589a033

View file

@ -3,11 +3,12 @@
<v-card-title>Uuid v4 generator</v-card-title> <v-card-title>Uuid v4 generator</v-card-title>
<v-card-text> <v-card-text>
<v-text-field outlined v-model="token" class="centered-input"/> <v-text-field outlined v-model="quantity" type="number" label="Quantity" dense class="quantity"/>
<v-textarea outlined v-model="token" class="centered-input" :rows="quantity <= 10 ? quantity : 10" readonly/>
<div class="text-center"> <div class="text-center">
<v-btn @click="refreshBool = !refreshBool" depressed class="mr-4">Refresh</v-btn> <v-btn @click="refreshBool = !refreshBool" depressed class="mr-4">Refresh</v-btn>
<v-btn @click="copyToken()" depressed>Copy token</v-btn> <v-btn @click="copyToken()" depressed>Copy uuid{{ quantity > 1 ? 's' : ''}}</v-btn>
</div> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -19,10 +20,13 @@
const noop = () => { const noop = () => {
}; };
const generateUuid = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
export default { export default {
name: "UuidGenerator", name: "UuidGenerator",
data: () => ({ data: () => ({
refreshBool: true refreshBool: true,
quantity: 1
}), }),
methods: { methods: {
copyToken() { copyToken() {
@ -34,14 +38,26 @@
token() { token() {
if (this.refreshBool) noop(); // To force recomputation if (this.refreshBool) noop(); // To force recomputation
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)); return Array.from({length: this.quantity}, generateUuid).join('\n');
} }
} }
} }
</script> </script>
<style scoped> <style scoped lang="less">
::v-deep .centered-input input { .quantity{
text-align: center width: 100px;
margin: auto;
text-align: center;
::v-deep input{
text-align: center;
}
}
::v-deep .centered-input textarea {
text-align: center;
margin-top: 13px !important;
font-family: Consolas, monospace;
} }
</style> </style>