diff --git a/packages/dgt-components/demo/data/barcodes.ttl b/packages/dgt-components/demo/data/barcodes.ttl new file mode 100644 index 00000000..c079c540 --- /dev/null +++ b/packages/dgt-components/demo/data/barcodes.ttl @@ -0,0 +1,22 @@ +@prefix : <#>. +@prefix solid: . +@prefix foaf: . +@prefix pim: . +@prefix schema: . + +:barcode-uitpas + schema:hostingOrganization ; + schema:member ; + schema:membershipNumber "121345687789" ; + schema:programName "UiTPAS" . + +:barcode-mock-1 + schema:member ; + schema:membershipNumber "9876543210" ; + schema:programName "UiTPAS" . + +:barcode-mock-2 + schema:hostingOrganization ; + schema:member ; + schema:membershipNumber "012345543210" ; + schema:programName "UiTPAS" . \ No newline at end of file diff --git a/packages/dgt-components/demo/data/profile-2.txt b/packages/dgt-components/demo/data/profile-2.txt new file mode 100644 index 00000000..0e580480 --- /dev/null +++ b/packages/dgt-components/demo/data/profile-2.txt @@ -0,0 +1,244 @@ +@prefix : <#>. +@prefix solid: . +@prefix foaf: . +@prefix pim: . +@prefix schema: . +@prefix ldp: . +@prefix c0: . +@prefix c1: . +@prefix prof: <./>. +@prefix n3: . +@prefix in: . +@prefix n4: . +@prefix c: . +@prefix n: . +@prefix pay: . + +prof:card a foaf:PersonalProfileDocument; foaf:maker :me; foaf:primaryTopic :me. + +:id1601909945358 + n:country-name "Belgium"; + n:locality "Brussels"; + n:postal-code "1000"; + n:region "Brusssels"; + n:street-address "Country Road 69". + +:id1589374025993 a n:Work; n:value . +:id1589374027282 a n:Home; n:value . + +:id1601214413622 a n:Work; n:value . +:id1601214413645 a n:Home; n:value . + +:me + a schema:Person, foaf:Person; + n:note "I enjoy nettle soup!"; + n:organization-name "Cynalco Medics"; + n:role "Janitor & Maintenance"; + solid:privateTypeIndex ; + solid:publicTypeIndex ; + n:hasEmail :id1589374025993, :id1589374027282; + n:hasAddress :id1601909945358; + n:hasTelephone :id1601214413622, :id1601214413645; + foaf:nick "tonyp"; + n:honorific-prefix "Mr."; + foaf:name "Tony Paillard". + +:payslip-jan-2021-w1 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1609459200"; + pay:until "1612051200"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "2600"; + pay:taxableAmount "2200"; + pay:netAmount "1500". + + +:payslip-feb-2021-w1 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1612137600"; + pay:until "1614470400"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "2600"; + pay:taxableAmount "2200"; + pay:netAmount "1500". + + +:payslip-mar-2021-w1 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1614556800"; + pay:until "1617148800"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "2600"; + pay:taxableAmount "2200"; + pay:netAmount "1500". + + +:payslip-apr-2021-w1 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1616976000"; + pay:until "1617494400"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-apr-2021-w2 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1617580800"; + pay:until "1618099200"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-apr-2021-w3 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1618185600"; + pay:until "1618704000"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-apr-2021-w4 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1618790400"; + pay:until "1619308800"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + + +:payslip-may-2021-w1 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1620000000"; + pay:until "1620518400"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-may-2021-w2 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1620604800"; + pay:until "1621123200"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-may-2021-w3 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1621209600"; + pay:until "1621728000"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-may-2021-w4 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1621814400"; + pay:until "1622332800"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + + +:payslip-jun-2021-w1 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1622419200"; + pay:until "1622937600"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-jun-2021-w2 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1623024000"; + pay:until "1623542400"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-jun-2021-w3 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1623628800"; + pay:until "1624147200"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". + +:payslip-jun-2021-w4 + a pay:payslip; + pay:employer ; + pay:employee ; + pay:from "1624233600"; + pay:until "1624752000"; + pay:stature "White Collar"; + pay:dependent "1"; + pay:wageUnit ; + pay:grossAmount "750"; + pay:taxableAmount "650"; + pay:netAmount "550". diff --git a/packages/dgt-components/demo/index.html b/packages/dgt-components/demo/index.html index 43ead6e4..13f46030 100644 --- a/packages/dgt-components/demo/index.html +++ b/packages/dgt-components/demo/index.html @@ -14,7 +14,8 @@ - + + @@ -25,6 +26,7 @@
+ diff --git a/packages/dgt-components/lib/components/barcode/barcode.component.ts b/packages/dgt-components/lib/components/barcode/barcode.component.ts index f3c88ebf..b5486321 100644 --- a/packages/dgt-components/lib/components/barcode/barcode.component.ts +++ b/packages/dgt-components/lib/components/barcode/barcode.component.ts @@ -2,14 +2,16 @@ import { Store } from 'n3'; import { css, CSSResult, html, internalProperty, property, PropertyValues, query, TemplateResult, unsafeCSS } from 'lit-element'; import { ComponentResponseEvent } from '@digita-ai/semcom-sdk'; -import { Theme } from '@digita-ai/dgt-theme'; +import { Theme, QR, Open } from '@digita-ai/dgt-theme'; import JsBarcode from 'jsbarcode'; +import { unsafeSVG } from 'lit-html/directives/unsafe-svg'; import { BaseComponent } from '../base/base.component'; export class BarcodeComponent extends BaseComponent { @internalProperty() cardNumber?: string; @internalProperty() program?: string; + @internalProperty() hostingOrganization?: string; @property({ type: Boolean }) hideProgram = false; @query('#barcode') barcodeSvg?: HTMLOrSVGElement; @@ -36,9 +38,11 @@ export class BarcodeComponent extends BaseComponent { const quad = store.getQuads(undefined, 'http://schema.org/membershipNumber', undefined, undefined)[0]; const program = store.getQuads(quad.subject, 'http://schema.org/programName', undefined, undefined)[0]; + const hostingOrganization = store.getQuads(quad.subject, 'http://schema.org/hostingOrganization', undefined, undefined)[0]; this.cardNumber = quad.object.value; this.program = program.object.value; + this.hostingOrganization = hostingOrganization.object.value; } @@ -61,8 +65,21 @@ export class BarcodeComponent extends BaseComponent { render(): TemplateResult { return html` - ${this.program && !this.hideProgram ? html`

${this.program}

` : ''} - + ${this.program && !this.hideProgram ? html` + +
${this.program}
+
This is your barcode
+
+ ${unsafeSVG(QR)} +
+
+
+ +
+ ${this.hostingOrganization ? html`${unsafeSVG(Open)}
More information
` : ``} +
+ + ` : ''} `; } @@ -72,27 +89,39 @@ export class BarcodeComponent extends BaseComponent { return [ unsafeCSS(Theme), css` - - :host { + div[slot="icon"] svg { + fill: var(--colors-foreground-normal); + } + + div[slot="content"] { display: flex; + align-items: stretch; flex-direction: column; - background-color: var(--colors-foreground-inverse); - padding: var(--gap-normal) 0; } - :host > * { - align-self: center; + a.btn { + display: flex; + align-items: center; + flex-direction: row; + margin-top: var(--gap-large); + justify-content: center; + } + + a.btn svg { + fill: var(--colors-foreground-inverse); + margin-right: var(--gap-normal); } - p { - margin: 0; + .barcode-container { + display: flex; + align-items: center; + flex-direction: column; } - #barcode { + .barcode-container #barcode { width: 200px; height: 110px; } - `, ]; diff --git a/packages/dgt-components/lib/components/profile/profile-name.component.ts b/packages/dgt-components/lib/components/profile/profile-name.component.ts index 4dc53f6c..c8c7fe92 100644 --- a/packages/dgt-components/lib/components/profile/profile-name.component.ts +++ b/packages/dgt-components/lib/components/profile/profile-name.component.ts @@ -1,4 +1,4 @@ -import { Literal, NamedNode, Quad, Store } from 'n3'; +import { NamedNode, Store, DataFactory } from 'n3'; import { css, html, property, PropertyValues, TemplateResult, unsafeCSS } from 'lit-element'; import { ComponentResponseEvent } from '@digita-ai/semcom-sdk'; import { unsafeSVG } from 'lit-html/directives/unsafe-svg'; @@ -23,7 +23,7 @@ export class ProfileNameComponent extends BaseComponent { readonly foaf = 'http://xmlns.com/foaf/0.1/'; readonly n = 'http://www.w3.org/2006/vcard/ns#'; - @property() image?: string; + @property() image?: URL; @property() formActor: Interpreter>; @property() canSave = false; @@ -76,7 +76,16 @@ export class ProfileNameComponent extends BaseComponent { const nick = store.getQuads(null, new NamedNode(`${this.foaf}nick`), null, null)[0]?.object.value; const honorific = store.getQuads(null, new NamedNode(`${this.n}honorific-prefix`), null, null)[0]?.object.value; const image = store.getQuads(null, new NamedNode(`${this.n}hasPhoto`), null, null)[0]?.object.value; - this.image = image; + + this.image = undefined; + + try { + + this.image = new URL(image); + + } catch { + // Do nothing + } this.formActor = interpret(formMachine( /** @@ -120,11 +129,13 @@ export class ProfileNameComponent extends BaseComponent { this.formActor.send(FormEvents.FORM_SUBMITTED); + const { namedNode, literal, quad } = DataFactory; + this.writeData(this.entry, [ - new Quad(new NamedNode(this.entry), new NamedNode(`${this.foaf}name`), new Literal(this.formActor.state.context.data.fullName)), - new Quad(new NamedNode(this.entry), new NamedNode(`${this.foaf}nick`), new Literal(this.formActor.state.context.data.nick)), - new Quad(new NamedNode(this.entry), new NamedNode(`${this.n}honorific-prefix`), new Literal(this.formActor.state.context.data.honorific)), - new Quad(new NamedNode(this.entry), new NamedNode(`${this.n}hasPhoto`), new Literal(this.formActor.state.context.data.image)), + quad(namedNode(this.entry), namedNode(`${this.foaf}name`), literal(this.formActor.state.context.data.fullName)), + quad(namedNode(this.entry), namedNode(`${this.foaf}nick`), literal(this.formActor.state.context.data.nick)), + quad(namedNode(this.entry), namedNode(`${this.n}honorific-prefix`), literal(this.formActor.state.context.data.honorific)), + quad(namedNode(this.entry), namedNode(`${this.n}hasPhoto`), namedNode(this.formActor.state.context.data.image)), ]); } @@ -133,13 +144,13 @@ export class ProfileNameComponent extends BaseComponent { return this.formActor ? html` - +
Names
Your names
${unsafeSVG(Image)}
- ${this.image ? html `` : ''} + ${this.image ? html `` : ''}