@es-labs/jslib 0.0.1

package/web/fetch.js

@@ -0,0 +1,129 @@
+// TODO add retry - https://dev.to/ycmjason/javascript-fetch-retry-upon-failure-3p6g
+class Fetch {
+  /**
+   * 
+   * @param {*} options 
+   * @param {*} tokens 
+   */
+  constructor(options = {}, tokens = {}) {
+    this.options = {
+      baseUrl: '',
+      credentials: 'same-origin',
+      forceLogoutFn: () => {}, // function to call when forcing a logout
+      refreshUrl: '',
+      timeoutMs: 0,
+      maxRetry: 0
+    }
+    Object.assign(this.options, options)
+    this.tokens = { access: '', refresh: '' }
+    Object.assign(this.tokens, tokens)
+  }
+
+  /**
+   * 
+   * @param {string} url 
+   * @param {string} baseUrl 
+   * @returns {object} { urlOrigin, urlPath, urlFull, urlSearch }
+   * @throws {Error} if URL is invalid
+   */
+  static parseUrl (url, baseUrl = '') {
+    let urlPath = url
+    let urlOrigin = baseUrl
+    let urlFull = baseUrl + urlPath
+    let urlSearch = ''
+    try {
+      urlSearch = (url.lastIndexOf('?') !== -1) ? url.split('?').pop() : '' // handle /abc/def?aa=1&bb=2
+      if (urlSearch) urlSearch = '?' + urlSearch // prepend ?
+      const { origin = '', pathname = '', search = '' } = new URL(url) // http://example.com:3001/abc/ees?aa=1&bb=2
+      urlOrigin = origin
+      urlPath = pathname
+      urlFull = origin + pathname
+      urlSearch = search
+    } catch (e) {
+    }
+    return { urlOrigin, urlPath, urlFull, urlSearch }
+  }
+  
+  setOptions (options) { Object.assign(this.options, options) }
+  getOptions () { return this.options }
+
+  setTokens (tokens) { Object.assign(this.tokens, tokens) }
+  getTokens () { return this.tokens }
+
+  async http (method, url, body = null, query = null, headers = null) {
+    const { urlOrigin, urlPath, urlFull, urlSearch } = Fetch.parseUrl(url, this.options.baseUrl)
+    try {
+      const controller = new AbortController()
+      const signal = controller.signal
+      if (this.options.timeoutMs > 0) setTimeout(() => controller.abort(), this.options.timeoutMs) // err.name === 'AbortError'
+  
+      let qs = (query && typeof query === 'object') // null is also an object
+        ? '?' +
+          Object.keys(query).map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(query[key])).join('&')
+        : (query || '')
+      qs = qs ? qs + urlSearch.substring(1) // remove the question mark
+        : urlSearch
+  
+      if (!headers) {
+        headers = {
+          Accept: 'application/json'
+        }
+      }
+      const options = { method, headers }
+      if (this.options.timeoutMs > 0) options.signal = signal
+      if (this.options.credentials !== 'include') { // include === HTTPONLY_TOKEN
+        if (this.tokens.access) options.headers.Authorization = `Bearer ${this.tokens.access}`
+      }
+      options.credentials = this.options.credentials
+  
+      if (['POST', 'PATCH', 'PUT'].includes(method)) { // check if HTTP method has req body (DELETE is maybe)
+        if (body && body instanceof FormData) {
+          options.body = body // options.headers['Content-Type'] = 'multipart/form-data' // NOT NEEDED!!!
+        } else if (options.headers['Content-Type'] && options.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
+          options.body = new URLSearchParams(body) // body should be JSON
+        } else if (options.headers['Content-Type'] && options.headers['Content-Type'] === 'application/octet-stream') {
+          options.body = body // handling stream...
+        } else {
+          options.headers['Content-Type'] = 'application/json' // NEEDED!!!
+          options.body = JSON.stringify(body)
+        }  
+      }
+  
+      const rv0 = await fetch(urlFull + qs, options)
+      const txt0 = await rv0.text() // handle empty body as xxx.json() cannot
+      rv0.data = txt0.length ? JSON.parse(txt0) : {}
+      if (rv0.status >= 200 && rv0.status < 400) return rv0
+      else if (rv0.status === 401) { // no longer needed urlPath !== '/api/auth/refresh'
+        if (rv0.data.message === 'Token Expired Error' && this.options.refreshUrl) {
+          try {
+            const rv1 = await this.http('POST', urlOrigin + this.options.refreshUrl, { refresh_token: this.tokens.refresh }) // rv1 JSON already processed
+            // status code should be < 400 here
+            this.tokens.access = rv1.data.access_token
+            this.tokens.refresh = rv1.data.refresh_token
+            if (options.credentials !== 'include') { // include === HTTPONLY_TOKEN
+              if (this.tokens.access) options.headers.Authorization = `Bearer ${this.tokens.access}`
+            }
+            const rv2 = await fetch(urlFull + qs, options)
+            const txt2 = await rv2.text()
+            rv2.data = txt2.length ? JSON.parse(txt2) : {}
+            return rv2
+          } catch (e) {
+            throw e
+          }
+        }
+      }
+      throw rv0 // error
+    } catch (e) {
+      if (e?.data?.message !== 'Token Expired Error' && (e.status === 401 || e.status === 403)) this.options.forceLogoutFn()
+      throw e // some other error
+    }
+  }
+  
+  async post (url, body = null, query = null, headers = null) { return this.http('POST', url, body, query, headers) }
+  async put (url, body = null, query = null, headers = null) { return this.http('PUT', url, body, query, headers) }
+  async patch (url, body = null, query = null, headers = null) { return this.http('PATCH', url, body, query, headers) }
+  async del (url, query = null, headers = null) { return this.http('DELETE', url, null, query, headers) }
+  async get (url, query = null, headers = null) { return this.http('GET', url, null, query, headers) }
+}
+
+export default Fetch

package/web/i18n.js

@@ -0,0 +1,24 @@
+// https://phrase.com/blog/posts/detecting-a-users-locale/
+// https://gist.github.com/ashour/5f169a6dd9b6293691629ee0d06cae6f
+// get languages / locales from browser
+// sample output: ['en-US', 'en-GB']
+
+function getBrowserLocales(options = {}) {
+  const defaultOptions = {
+    languageCodeOnly: false
+  }
+  const opt = {
+    ...defaultOptions,
+    ...options
+  }
+  const browserLocales = navigator.languages === undefined ? [navigator.language] : navigator.languages
+  if (!browserLocales) {
+    return undefined
+  }
+  return browserLocales.map((locale) => {
+    const trimmedLocale = locale.trim()
+    return opt.languageCodeOnly ? trimmedLocale.split(/-|_/)[0] : trimmedLocale
+  })
+}
+
+export default getBrowserLocales

package/web/idle.js

@@ -0,0 +1,49 @@
+const idleTimer = { // logout user if idle
+  timeouts: [],
+
+  _idleSecondsTimer: null,
+  _idleSecondsCounter: 0,
+  _elapsedTsMs: 0, // elapsed timestamp in milliseconds
+  _reset: null,
+  _check: null,
+
+  reset () { this._idleSecondsCounter = 0 },
+
+  clearElapsedTimeStart () { this._elapsedTsMs = 0 },
+  setElapsedTimeStart () { this._elapsedTsMs = Date.now() },
+  getElapsedTimeSeconds () { return parseInt((Date.now() - this._elapsedTsMs) / 1000.0) },
+
+  getIdleTimeSeconds () { return this._idleSecondsCounter },
+
+  check() {
+    this._idleSecondsCounter++
+    for (let timeout of this.timeouts) {
+      // console.log('check2', this._idleSecondsCounter, timeout.time)
+      if (this._idleSecondsCounter >= timeout.time) {
+        if (timeout.stop) this.stop()
+        timeout.fn()
+      }
+    }
+  },
+
+  start () {
+    if (!this._reset) this._reset = this.reset.bind(this)
+    if (!this._check) this._check = this.check.bind(this)
+
+    this.setElapsedTimeStart()
+    document.addEventListener('click', this._reset)
+    document.addEventListener('mousemove', this._reset)
+    document.addEventListener('keypress', this._reset)  
+    this._idleSecondsTimer = window.setInterval(this._check, 1000)
+  },
+
+  stop () {
+    this.clearElapsedTimeStart()
+    document.removeEventListener('click', this._reset)
+    document.removeEventListener('mousemove', this._reset)
+    document.removeEventListener('keypress', this._reset)  
+    window.clearInterval(this._idleSecondsTimer)
+  }
+}
+
+export default idleTimer

package/web/parse-jwt.js

@@ -0,0 +1,15 @@
+// parses and returns JWT payload
+// exceptions to be handled by caller
+/**
+ * 
+ * @param {string} token 
+ * @returns 
+ */
+export default function (token) {
+  const base64Url = token.split('.')[1]
+  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+  const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
+    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+  }).join(''))
+  return JSON.parse(jsonPayload)
+}

package/web/pwa.js

@@ -0,0 +1,84 @@
+// // First get a public key from our Express server
+// We use this function to subscribe to our push notifications
+// As soon as you run this code once, it shouldn't run again if the initial subscription went well
+// Except if you clear your storage
+export const webpushSubscribe = async (publicKey) => {
+  const registration = await navigator.serviceWorker.ready
+  // NOSONAR
+  // alternate = navigator.serviceWorker.getRegistration()
+  // let subscription = await registration.pushManager.getSubscription()
+  // if (subscription) return subscription
+
+  // this is an annoying part of the process we have to turn our public key into a Uint8Array
+  const Uint8ArrayPublicKey = urlBase64ToUint8Array(publicKey)
+
+  // registering a new subscription to our service worker's Push manager
+  let subscription = await registration.pushManager.subscribe({
+    userVisibleOnly: true, // chrome only supports user visible for now
+    applicationServerKey: Uint8ArrayPublicKey
+  })
+  subscription = JSON.stringify(subscription)
+
+  console.log('subscription', subscription)
+  return subscription
+}
+
+// Let's create an unsubscribe function as well
+export const webpushUnsubscribe = async () => {
+  const registration = await navigator.serviceWorker.ready
+  const subscription = await registration.pushManager.getSubscription()
+  if (subscription) await subscription.unsubscribe() // This tells our browser that we want to unsubscribe
+}
+// This tells our Express server that we want to unsubscribe
+// await fetch(VITE_API_URL + '/api/webpush/unsub?subId=test', {
+//   method: 'POST',
+//   headers: { 'Content-Type': 'application/json' },
+//   body: JSON.stringify(subscription.toJSON())
+// })
+
+// I have found this code (or variations of) from; multiple sources
+// but I could not find the original author
+// here's one such source:
+// https://stackoverflow.com/questions/42362235/web-pushnotification-unauthorizedregistration-or-gone-or-unauthorized-sub
+const urlBase64ToUint8Array = (base64String) => {
+  // const padding = '='.repeat((4 - base64String.length % 4) % 4)
+  // const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
+  // https://stackoverflow.com/questions/52379865/eslint-replace-cant-read-method
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
+
+  const rawData = window.atob(base64)
+  const outputArray = new Uint8Array(rawData.length)
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i)
+  }
+  return outputArray
+}
+
+const handleSwMessage = async (e) => {
+  console.log('handleSwMessage', e)
+  //NOSONAR if (e && e.data && e.data.msg === 'pushsubscriptionchange') { }
+}
+
+export const addSwMessageEvent = (handler = handleSwMessage) => {
+  navigator.serviceWorker.addEventListener('message', handleSwMessage)
+}
+
+export const removeSwMessageEvent = (handler = handleSwMessage) => {
+  navigator.serviceWorker.removeEventListener('message', handleSwMessage)
+}
+
+// https://felixgerschau.com/how-to-communicate-with-service-workers/
+// app to sw
+// // app.js - Somewhere in your web app
+// navigator.serviceWorker.controller.postMessage({
+//   type: 'MESSAGE_IDENTIFIER',
+// })
+// service-worker.js
+// On the Service Worker side we have to listen to the message event
+// self.addEventListener('message', (e) => {
+//   if (e.data && e.data.type === 'MESSAGE_IDENTIFIER') {
+//     // do something
+//   }
+// })

package/web/sign-pad.js

@@ -0,0 +1,164 @@
+// FRONTEND ONLY
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+canvas {
+  background-color: var(--vcxwc-sign-pad-background-color, #ddd);
+}
+</style>
+<canvas id="canvas"></canvas>
+`
+class SignPad extends HTMLElement {
+  constructor() {
+    super()
+    const shadowRoot = this.attachShadow({ mode: 'open' })
+    shadowRoot.appendChild(template.content.cloneNode(true))
+    console.log('SignPad()')
+    this.mouse = {
+      current: { x: 0, y: 0 },
+      previous: { x: 0, y: 0 },
+      down: false,
+      move: false
+    }
+    this.handleMouseDown = this.handleMouseDown.bind(this) // bind callback function
+    this.handleMouseUp = this.handleMouseUp.bind(this) // bind callback function
+    this.handleMouseMove = this.handleMouseMove.bind(this) // bind callback function
+    this.currentMouse = this.currentMouse.bind(this) // bind callback function
+    this.draw = this.draw.bind(this) // bind callback function
+  }
+
+  static get observedAttributes() {
+    // default width = 300 (in px)
+    // default height = 150 (in px)
+    // default value should be ''
+    return ['value', 'width', 'height']
+  }
+
+  // getter and setter for property - show
+  get value() {
+    return this.getAttribute('value')
+  }
+
+  set value(val) {
+    // console.log('setting value', val)
+    this.setAttribute('value', val || '')
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    const el = this.shadowRoot.querySelector('#canvas')
+    switch (name) {
+      case 'width': // set canvas width
+        el.width = newVal
+        break
+      case 'height': // set canvas height
+        el.height = newVal
+        break
+      // value no need to handle
+    }
+  }
+
+  connectedCallback() {
+    // const styleSheetList = this.shadowRoot.styleSheets // do this here, not in constructor
+    // const bg_rule = styleSheetList[0].cssRules[0]
+    // const yyy = context_rule.style.getPropertyValue('--vcxwc-sign-pad-background-color')
+    // console.log('bg', bg_rule.style.backgroundColor, yyy)
+
+    // console.log('connect sign')
+    this.mouse = {
+      current: { x: 0, y: 0 },
+      previous: { x: 0, y: 0 },
+      down: false,
+      move: false
+    }
+
+    // console.log('has value?', this.hasAttribute('value'), this.getAttribute('value'))
+    if (!this.hasAttribute('value')) this.setAttribute('value', '')
+
+    const el = this.shadowRoot.querySelector('#canvas')
+    // console.log('canvas w h', el.width, el.height)
+    const ctx = el.getContext('2d')
+    ctx.translate(0.5, 0.5)
+    ctx.imageSmoothingEnabled = false
+
+    const ctx2d = JSON.parse(this.getAttribute('context2d'))
+    // console.log('ctx2d', ctx2d)
+    for (const k in ctx2d) {
+      // strokeStyle, lineWidth
+      ctx[k] = ctx2d[k]
+    }
+    el.addEventListener('mousedown', this.handleMouseDown)
+    el.addEventListener('mouseup', this.handleMouseUp)
+    el.addEventListener('mousemove', this.handleMouseMove)
+  }
+
+  adoptedCallback() {}
+
+  disconnectedCallback() {
+    // console.log('disconnect sign')
+    const el = this.shadowRoot.querySelector('#canvas')
+    el.removeEventListener('mousedown', this.handleMouseDown)
+    el.removeEventListener('mouseup', this.handleMouseUp)
+    el.removeEventListener('mousemove', this.handleMouseMove)
+  }
+
+  handleMouseDown(event) {
+    this.mouse.down = true
+    this.mouse.move = false
+    this.mouse.current = {
+      x: event.offsetX,
+      y: event.offsetY
+    }
+    const el = this.shadowRoot.querySelector('#canvas')
+    const ctx = el.getContext('2d')
+    ctx.clearRect(0, 0, el.width, el.height) // clear
+    ctx.beginPath() // clear lines
+    this.value = ''
+
+    const { x, y } = this.currentMouse()
+    ctx.moveTo(x, y)
+  }
+
+  handleMouseUp() {
+    const el = this.shadowRoot.querySelector('#canvas')
+    if (this.mouse.move) this.value = el.toDataURL('image/png')
+    else this.value = ''
+
+    const event = new CustomEvent('input', { detail: this.value })
+    this.dispatchEvent(event)
+
+    this.mouse.down = false
+    this.mouse.move = false
+  }
+
+  handleMouseMove(event) {
+    this.mouse.move = true
+    this.mouse.current = {
+      x: event.offsetX,
+      y: event.offsetY
+    }
+    this.draw(event)
+  }
+
+  draw(event) {
+    // requestAnimationFrame(this.draw)
+    if (this.mouse.down) {
+      const el = this.shadowRoot.querySelector('#canvas')
+      // console.log('draw', event, el.width, el.height, c)
+      // const c = document.getElementById('canvas')
+      const ctx = el.getContext('2d')
+      ctx.clearRect(0, 0, el.width, el.height)
+      const { x, y } = this.currentMouse()
+      ctx.lineTo(x, y)
+      ctx.stroke()
+    }
+  }
+
+  currentMouse() {
+    return {
+      x: this.mouse.current.x,
+      y: this.mouse.current.y
+    }
+  }
+}
+
+customElements.define('vcxwc-sign-pad', SignPad)

package/web/t4t-fe.js

@@ -0,0 +1,164 @@
+import Fetch from './fetch.js'
+let tableName = ''
+let parentFilter = null
+let config = null
+let urlPrefix = '/api'
+let http = new Fetch()
+// Do Not Catch Errors - let it be caught by caller
+
+function setTableName(name) { // set table name
+  tableName = name
+  parentFilter = null // TBD: find a more sustainable way using prototype or let caller handle this part
+}
+
+// this might change
+const setFetch = (_fetch) => http = _fetch // set the fetch function
+const setParentFilter = (_filter) => parentFilter = _filter
+const setUrlPrefix = (_urlPrefix) => urlPrefix = _urlPrefix
+
+async function getConfig() {
+  const { data } = await http.get(urlPrefix + '/t4t/config/' + tableName)
+  if (data) config = data
+  return data
+}
+
+async function find(filters, sorter, page, limit) {
+  let rv = {
+    results: [],
+    total: 0
+  }
+  if (parentFilter) {
+    filters.push({col: parentFilter.col, op: "=", val: parentFilter.id, andOr: "and"})
+  }
+  filters = filters ? JSON.stringify(filters) : '' // [{col, op, val, andOr}, ...]
+  sorter = sorter ? JSON.stringify(sorter) : '' // [{ column: '<col_name>', order: 'asc|desc' }, ...]
+  const { data } = await http.get(urlPrefix + '/t4t/find/' + tableName, {
+    page, limit, filters, sorter 
+  })
+  rv.results = data.results
+  rv.total = data.total
+  return rv
+}
+
+async function download(filters, sorter) {
+  const { data } = await http.get(urlPrefix + '/t4t/find/' + tableName, {
+    page: 0,
+    limit: 0,
+    filters: filters ? JSON.stringify(filters) : '',
+    sorter: sorter ? JSON.stringify(sorter) : '',
+    csv: 1 // it is a csv
+  })
+  return data
+}
+
+async function findOne(__key) {
+  let rv = {}
+  const { data } = await http.get(urlPrefix + '/t4t/find-one/' + tableName, { __key }) // if multiKey, then seperate values by |, column is implied by order
+  if (data) {
+    rv = data
+    rv.__key = __key
+  }
+  return rv
+}
+
+// process data for use with
+// JSON only,  multi-part form, JSON & filelist (signed URL upload)
+function processData(record, { signedUrl = false } = { }) {
+  const rv = {
+    json: { }
+  }
+  for (const [k, v] of Object.entries(record)) {
+    if (v instanceof FileList) {
+      const fileNameArray = []
+      for (const file of v) {
+        if (signedUrl) {
+          if (!rv.files) rv.files = []
+          rv.files.push(file)
+        } else {
+          if (!rv.form) rv.form = new FormData()
+          rv.form.append('file-data', file) // add
+        }
+        fileNameArray.push(file.name)
+      }
+      rv.json[k] = fileNameArray.join(',') // array
+    } else {
+      rv.json[k] = v
+    }
+  }
+  if (rv.form) rv.form.append('json-data', JSON.stringify(rv.json)) // set the JSON
+  return rv
+}
+
+async function create(record) {
+  // const { data } = await http.patch(`/authors/${id}`, formData,
+  //   { onUploadProgress: progressEvent => console.log(Math.round(progressEvent.loaded / progressEvent.total * 100) + '%') } // axios only
+  // )
+  return await http.post(urlPrefix + `/t4t/create/${tableName}`, record)
+}
+
+async function update(__key, record, headers = null) {
+  return await http.patch(urlPrefix + `/t4t/update/${tableName}`, record, { __key }, headers)
+}
+
+// Handle file removals seperately
+async function remove(items) {
+  // console.log(items)
+  let ids = []
+  // const { pk } = config
+  // ids = pk ? items.map((item) => item[pk]) : items.map((item) => item.__key)
+  // console.log(ids)
+  ids = items
+  return await http.post(urlPrefix + '/t4t/remove/' + tableName, { ids })  
+}
+
+// uploads a single csv for batch processing
+async function upload(file) { // the file object
+  // TODO add exception handling
+  if (file === null) return false
+  const formData = new FormData()
+  formData.append('csv-file', file) // call it file
+  // console.log('zzz', formData instanceof FormData)
+  // for(const pair of formData.entries()) console.log(pair[0], pair[1])
+  return await http.post(urlPrefix + '/t4t/upload/' + tableName, formData)
+  // formData.append('textdata', JSON.stringify({ name: 'name', age: 25 }))
+  // const res = await fetch('/api/upload', { method: 'POST', body: formData })
+  // const { id, name, avatar } = record
+  // const json = JSON.stringify({ name })
+  // // const blob = new Blob([json], { type: 'application/json' })
+  // // console.log('json', blob)
+}
+
+
+// const autoComplete = debounce(async (e, col, _showForm) => {
+// recordObj[_showForm][col] = e.target.value
+
+// wrap in debounce
+// parentColVal in use-cases where parent table column changes
+async function autocomplete (search, col, record, parentColVal = '') {
+  let res = []
+  try {
+    const { tableName, limit, key, text, parentTableColName, parentCol } = config.cols[col].options
+    const query = { tableName, limit, key, text, search }
+    let parentTableColVal = ''
+    if (parentTableColName) {
+      parentTableColVal = parentColVal || record[parentCol] || ''
+    }
+    const { data } = await http.post(urlPrefix + '/t4t/autocomplete/' + tableName, {
+      key,
+      text,
+      search,
+      limit,
+      parentTableColName,
+      parentTableColVal
+    })
+    res = data
+  } catch (err) {
+    console.log('autocomplete', err.message)
+  }
+  return res
+}
+
+export {
+  setFetch, setTableName, setParentFilter, setUrlPrefix, getConfig,
+  find, findOne, create, update, remove, upload, download, autocomplete, processData,
+}