Skip to content

THCLab/oca-html-preview-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rendering OCA Form and Credential - Demo app

see demo

OCA (Overlays Capture Architecture)

OCA may be represented in two formats: JSON or ZIP file.

  • JSON
{
  capture_base: { ... },
  overlays: [ { ... }, { ... }, ... ],
  references?: { ... }
}
  • ZIP OCA zip is a set of JSON files. Structure of such zip is:
OCA.zip
├── meta.json
├── [Capture Base SAI].json
├── [Overlay 1 SAI].json
├── [Overlay 2 SAI].json
└── ...

where meta.json is human readable file indexing type of file's conent to it's SAI

Samples

Libs

It's a package for parsing OCA JSON to more friendly JSON format for forms (named Strucutre):
createStructure: (oca: OCA) => Promise<Structure>
Additionaly, it allows to parse OCA zip to OCA JSON:
resolveFromZip: (file: File) => Promise<OCA>

Renders HTML element of Form or Credential.

renderOCAForm: (
    structure: Structure
    data: { [key: string]: string },
    config: {
      showFlagged?: boolean
      defaultLanguage?: string
      onSubmitHandler?: (capturedData: { [key: string]: string }) => void
      ocaRepoHostUrl?: string
      additionalOverlays?: Overlay[]
    }
  ) => Promise<string>
renderOCACredential: (
    structure: Structure,
    data: { [key: string]: string },
    config: {
      dataVaultUrl?: string
      ocaRepoHostUrl?: string
      additionalOverlays?: Overlay[]
    }
  ) => Promise<{
    node: string
    config: { width: string; height: string }
    pageNumber: number
  }>

Snippets

Rendering Form HTML

./src/form.js

import { resolveFromZip, OcaJs } from 'oca.js-form-core'
import { renderOCAForm } from 'oca.js-form-html'

const ocaJs = new OcaJs({})

const fileChooser = document.querySelector('#file-input')
fileChooser.onchange = async e => {
  const file = e.target.files[0]
  const oca = await resolveFromZip(file)
  const structure = await ocaJs.createStructure(oca)
  const form = renderOCAForm(structure, {}, {})
  console.log(form)
}

Rendering Credential HTML

./src/credential.js

import { resolveFromZip, OcaJs } from 'oca.js-form-core'
import { renderOCACredential } from 'oca.js-form-html'

const ocaJs = new OcaJs({})

const fileChooser = document.querySelector('#file-input')
fileChooser.onchange = async e => {
  const file = e.target.files[0]
  const oca = await resolveFromZip(file)
  const structure = await ocaJs.createStructure(oca)
  const credential = renderOCACredential(structure, {}, {})
  console.log(credential)
}

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •