From 8cfddb502964be7edf45cdc524344ea2f7f20142 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Wed, 1 Feb 2023 17:36:22 +0100 Subject: [PATCH 1/4] migrate to bwip-js --- package.json | 1 + public/env.sample.js | 2 + src/views/Profile.vue | 523 ++++++++++++++++++++++++++++++++---------- 3 files changed, 411 insertions(+), 115 deletions(-) diff --git a/package.json b/package.json index b661e60..95d4371 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "postbuild": "node env_fix.js" }, "dependencies": { + "bwip-js": "^3.2.2", "jsbarcode": "^3.11.5", "marked": "2.0.3", "redaxios": "0.4.1", diff --git a/public/env.sample.js b/public/env.sample.js index c43a129..b9eb22d 100644 --- a/public/env.sample.js +++ b/public/env.sample.js @@ -7,6 +7,8 @@ const config = { baseurl_selfservice: '/selfservice/', // full url (including fqdn) baseurl_documentserver: 'http://localhost:4010/documents', + // optional, will fallback to code128 + code_format: 'ean13', // optional, will fallback to baseurl_selfservice/imprint url_imprint: '', // optional, will fallback to baseurl_selfservice/privacy diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 34ba680..79d5fac 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -3,19 +3,42 @@

{{ state.group }}

-
+
-
+
@@ -124,68 +184,170 @@
+ > + {{ $t("profile") }} +
+ > + {{ $t("lap_times") }} +
+ > + {{ $t("sponsoring") }} +
-
+
-
{{ $t('registrierungscode') }}
- Registrierungscode -
{{ $t('vorname') }}
+
{{ $t("registrierungscode") }}
+ Registrierungscode +
{{ $t("vorname") }}

-
{{ $t('mittelname') }}
+
{{ $t("mittelname") }}

-
{{ $t('nachname') }}
+
{{ $t("nachname") }}

-
{{ $t('e_mail_adress') }}
+
{{ $t("e_mail_adress") }}

-
{{ $t('phone_number') }}
+
{{ $t("phone_number") }}

@@ -194,7 +356,7 @@
-
+
@@ -204,15 +366,37 @@ class="table-auto w-full text-left whitespace-no-wrap" > {{ $t('distance') }} + class=" + px-4 + py-3 + title-font + tracking-wider + font-medium + " + > + {{ $t("distance") }} + {{ $t('lap_time') }} + class=" + px-4 + py-3 + title-font + tracking-wider + font-medium + " + > + {{ $t("lap_time") }} + @@ -224,20 +408,32 @@ -
+
- {{ $t('no_laps_scans_were_recorded_yet') }} + {{ $t("no_laps_scans_were_recorded_yet") }}
-
+
@@ -247,16 +443,48 @@ class="table-auto w-full text-left whitespace-no-wrap" > - Name {{ $t('amount_per_kilometer_in_eur') }} + class=" + px-4 + py-3 + title-font + tracking-wider + font-medium + " + > + Name + {{ $t('current_total_amount_in_eur') }} + class=" + px-4 + py-3 + title-font + tracking-wider + font-medium + " + > + {{ $t("amount_per_kilometer_in_eur") }} + + + {{ $t("current_total_amount_in_eur") }} + @@ -270,51 +498,86 @@ € + v-text=" + (s.amountPerDistance / 100) + .toFixed(2) + .toLocaleString('de-DE', { valute: 'EUR' }) + " + >€ € + v-text=" + (s.amount / 100) + .toFixed(2) + .toLocaleString('de-DE', { valute: 'EUR' }) + " + >€ - {{ $t('total') }} + {{ $t("total") }} € + v-text=" + ( + state.sponsorings.reduce(function ( + sum, + current + ) { + return sum + current.amountPerDistance; + }, + 0) / 100 + ) + .toFixed(2) + .toLocaleString('de-DE', { valute: 'EUR' }) + " + >€ € + v-text=" + ( + state.sponsorings.reduce(function ( + sum, + current + ) { + return sum + current.amount; + }, + 0) / 100 + ) + .toFixed(2) + .toLocaleString('de-DE', { valute: 'EUR' }) + " + >€ -
+
- {{ $t('no_sponsorings_for_you_were_recorded_yet') }} + {{ $t("no_sponsorings_for_you_were_recorded_yet") }}
@@ -332,11 +595,22 @@ import { reactive } from "vue"; import { TYPE, useToast } from "vue-toastification"; import axios from "redaxios"; import JsBarcode from "jsbarcode"; +import bwipjs from "bwip-js"; -function textToBase64Barcode(text){ +function textToBase64Barcode(text) { var canvas = document.createElement("canvas"); - JsBarcode(canvas, text, {format: "CODE128", displayValue:false}); - return canvas.toDataURL("image/png"); + // bwipjs.toCanvas(canvas, text, {format: config.code_format || "code128", displayValue:false}); + bwipjs.toCanvas(canvas, { + bcid: config.code_format || "code128", + text: `${text}` || "?", + scale: 3, // 3x scaling factor + height: 10, // Bar height, in millimeters + includetext: false, // Show human-readable text + textxalign: "center", // Always good to set this + }); + const base64 = canvas.toDataURL("image/png"); + console.log(base64); + return base64; } const state = reactive({ @@ -351,14 +625,15 @@ const state = reactive({ group: "", activetab: "profile", delete_active: false, - fullobject: {} -}) + fullobject: {}, +}); const toast = useToast(); const props = defineProps({ - token: String -}) + token: String, +}); const accesstoken = atob(props.token); -axios.get(`${config.baseurl}api/runners/me/${accesstoken}`) +axios + .get(`${config.baseurl}api/runners/me/${accesstoken}`) .then(({ data }) => { state.phone = data.phone; state.email = data.email; @@ -368,26 +643,38 @@ axios.get(`${config.baseurl}api/runners/me/${accesstoken}`) state.group = data.group; state.sponsorings = data.distanceDonations; state.fullobject = data; - state.barcode = textToBase64Barcode(state.fullobject.id); - }).catch((error) => { - toast.error("Profil konnte nicht geladen werden..."); + state.barcode = textToBase64Barcode(data.id); }) -axios.get(`${config.baseurl}api/runners/me/${accesstoken}/scans`) + .catch((error) => { + toast.error("Profil konnte nicht geladen werden..."); + }); +axios + .get(`${config.baseurl}api/runners/me/${accesstoken}/scans`) .then(({ data }) => { - data.map(function(s) { - s.lapTime = Math.floor(s.lapTime / 60) + 'min ' + (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + "s" - s.distance = Math.floor(s.distance / 1000) + 'km ' + (Math.floor(s.distance % 1000) + "").padStart(3, "0") + "m" + data.map(function (s) { + s.lapTime = + Math.floor(s.lapTime / 60) + + "min " + + (Math.floor(s.lapTime % 60) + "").padStart(2, "0") + + "s"; + s.distance = + Math.floor(s.distance / 1000) + + "km " + + (Math.floor(s.distance % 1000) + "").padStart(3, "0") + + "m"; return s; - }) - data.filter(s => s.valid === true); + }); + data.filter((s) => s.valid === true); state.scans = data; - }).catch((error) => { - toast.error("Profil konnte nicht geladen werden..."); }) + .catch((error) => { + toast.error("Profil konnte nicht geladen werden..."); + }); function delete_me() { toast("Profil wird gelöscht..."); - let url = `${config.baseurl}api/runners/me/${accesstoken}?force=true` - axios.delete(url) + let url = `${config.baseurl}api/runners/me/${accesstoken}?force=true`; + axios + .delete(url) .then(() => { toast("Alle Daten gelöscht!"); location.replace(`${config.baseurl_selfservice}`); @@ -398,31 +685,37 @@ function delete_me() { } function get_certificate() { toast("Urkunde wird generiert..."); - const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2); + const browserlocale = ( + (navigator.languages && navigator.languages[0]) || + "" + ).substr(0, 2); let url = `${config.baseurl_documentserver}certificates?locale=${browserlocale}&download=true&key=${config.documentserver_key}`; let postdata = Object.assign({}, state.fullobject); postdata.group = { - name: postdata.group - } - postdata = [postdata] - axios.post(url, postdata, { - responseType: "blob" - }) + name: postdata.group, + }; + postdata = [postdata]; + axios + .post(url, postdata, { + responseType: "blob", + }) .then((response) => { - console.log(response) + console.log(response); if (response.status != "200") { toast.error("Urkunde konnte nicht generiert werden..."); } else { - var fileURL = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' })); - var fileLink = document.createElement('a'); + var fileURL = window.URL.createObjectURL( + new Blob([response.data], { type: "application/pdf" }) + ); + var fileLink = document.createElement("a"); fileLink.href = fileURL; - fileLink.setAttribute('download', 'Certificate.pdf'); + fileLink.setAttribute("download", "Certificate.pdf"); document.body.appendChild(fileLink); fileLink.click(); fileLink.remove(); - toast("Urkunde generiert!",{type:TYPE.SUCCESS}); + toast("Urkunde generiert!", { type: TYPE.SUCCESS }); } }) .catch((err) => { From 713dd153126851e8cf1045bf5ba3ca702a39c738 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Wed, 1 Feb 2023 17:39:59 +0100 Subject: [PATCH 2/4] drop jsbarcode --- package.json | 1 - src/views/Profile.vue | 1 - 2 files changed, 2 deletions(-) diff --git a/package.json b/package.json index 95d4371..ecc52ce 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,6 @@ }, "dependencies": { "bwip-js": "^3.2.2", - "jsbarcode": "^3.11.5", "marked": "2.0.3", "redaxios": "0.4.1", "toastify-js": "1.10.0", diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 79d5fac..5626f4f 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -594,7 +594,6 @@ import { reactive } from "vue"; import { TYPE, useToast } from "vue-toastification"; import axios from "redaxios"; -import JsBarcode from "jsbarcode"; import bwipjs from "bwip-js"; function textToBase64Barcode(text) { From 9b261bf20023561a7c9691dff33c9a6d2b5c0cac Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Wed, 1 Feb 2023 17:40:09 +0100 Subject: [PATCH 3/4] fix codeconfig.height --- src/views/Profile.vue | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/views/Profile.vue b/src/views/Profile.vue index 5626f4f..27f0161 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -597,18 +597,18 @@ import axios from "redaxios"; import bwipjs from "bwip-js"; function textToBase64Barcode(text) { - var canvas = document.createElement("canvas"); - // bwipjs.toCanvas(canvas, text, {format: config.code_format || "code128", displayValue:false}); - bwipjs.toCanvas(canvas, { + const canvas = document.createElement("canvas"); + let codeconfig = { bcid: config.code_format || "code128", text: `${text}` || "?", - scale: 3, // 3x scaling factor - height: 10, // Bar height, in millimeters - includetext: false, // Show human-readable text - textxalign: "center", // Always good to set this - }); + scale: 3, + includetext: false, + }; + if (codeconfig.bcid === "code128" || codeconfig.bcid === "ean13") { + codeconfig.height = 10; // bar height in mm + } + bwipjs.toCanvas(canvas, codeconfig); const base64 = canvas.toDataURL("image/png"); - console.log(base64); return base64; } From debbd9219cb53dbd48cf0cb7bee329b765ce4647 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Wed, 1 Feb 2023 17:40:23 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=9A=80Bumped=20version=20to=20v0.7.9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 9 +++++++++ package.json | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 32a6ed0..75ff2ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,9 +2,18 @@ All notable changes to this project will be documented in this file. Dates are displayed in UTC. +#### [0.7.9](https://git.odit.services/lfk/selfservice/compare/0.7.8...0.7.9) + +- migrate to bwip-js [`8cfddb5`](https://git.odit.services/lfk/selfservice/commit/8cfddb502964be7edf45cdc524344ea2f7f20142) +- fix codeconfig.height [`9b261bf`](https://git.odit.services/lfk/selfservice/commit/9b261bf20023561a7c9691dff33c9a6d2b5c0cac) +- drop jsbarcode [`713dd15`](https://git.odit.services/lfk/selfservice/commit/713dd153126851e8cf1045bf5ba3ca702a39c738) + #### [0.7.8](https://git.odit.services/lfk/selfservice/compare/0.7.7...0.7.8) +> 1 February 2023 + - add barcode to profile [`851190e`](https://git.odit.services/lfk/selfservice/commit/851190e6a7f8b9cccbf05e60f9b50b96c196959c) +- 🚀Bumped version to v0.7.8 [`e5a01bc`](https://git.odit.services/lfk/selfservice/commit/e5a01bcd7629164655cacd10dd1f014260c67c4b) - certificate generation: success toast styling [`1603a09`](https://git.odit.services/lfk/selfservice/commit/1603a097f71ed85c901baf8da04cb06b86474649) #### [0.7.7](https://git.odit.services/lfk/selfservice/compare/0.7.6...0.7.7) diff --git a/package.json b/package.json index ecc52ce..57b4c6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@odit/lfk-selfservice", - "version": "0.7.8", + "version": "0.7.9", "scripts": { "dev": "vite", "build": "vite build",