How to use solid-ui - 10 common examples

** and allows the user to edit their own profile.
 **
 ** Usage: paneRegistry.register('profile/profilePane')
 ** or standalone script adding onto existing mashlib.
 */
exports.__esModule = true
// import UI from 'solid-ui'
// import solidUi, { SolidUi } from 'solid-ui'
// @@ TODO: Write away the need for exception on next line
// eslint-disable-next-line camelcase
var solid_UI_1 = require('solid-UI')
var UI2 = require('solid-UI')
// let panes: any
// let UI
var UI0 = require('solid-ui')
console.log('UI0.rdf ' + UI0.rdf)
console.log('UI1.rdf ' + solid_UI_1.default.rdf)
console.log('UI2.rdf ' + UI2.rdf)
var thisPane = { foo: 'bar' }
exports.default = thisPane
// ENDS

reqs.forEach(req => {
          let rrr = kb.any(req, kb.sym('http://www.w3.org/2007/ont/link#response'))
          if (rrr) {
            contentType = kb.anyValue(rrr, UI.ns.httph('content-type'))
            allowed = kb.anyValue(rrr, UI.ns.httph('allow'))
            eTag = kb.anyValue(rrr, UI.ns.httph('etag'))
            if (!eTag) console.log('sourcePane: No eTag on GET')
          }
        })
        // contentType = response.headers['content-type'] // Not available ?!

var toolsPane = function (selectAllGroups, selectedGroups, groupsMainTable, book, dom, me) {
  var kb = UI.store, ns = UI.ns
  var updater = UI.store.updater
  var ACL = UI.ns.acl, VCARD = UI.ns.vcard
  var doc = $rdf.sym(book.uri.split('#')[0]) // The ACL is actually to the doc describing the thing

  var buttonStyle = 'font-size: 100%; margin: 0.8em; padding:0.5em;'

  var pane = dom.createElement('div')
  var table = pane.appendChild(dom.createElement('table'))
  table.setAttribute('style', 'font-size:120%; margin: 1em; border: 0.1em #ccc ;')
  var headerRow = table.appendChild(dom.createElement('tr'))
  headerRow.textContent = UI.utils.label(book) + ' - tools'
  headerRow.setAttribute('style', 'min-width: 20em; padding: 1em; font-size: 150%; border-bottom: 0.1em solid red; margin-bottom: 2em;')

  var statusRow = table.appendChild(dom.createElement('tr'))
  var statusBlock = statusRow.appendChild(dom.createElement('div'))
  statusBlock.setAttribute('style', 'padding: 2em;')
  var MainRow = table.appendChild(dom.createElement('tr'))

return new Promise(function (resolve, reject) {
        var kb = UI.store
        if (!options.useExisting) { // useExisting means use existing object in new role
          var existing = kb.any(meeting, options.predicate)
          if (existing) {
            if (toolObject.limit && toolObject.limit === 1 && !toolObject.shareTab) {
              complain('Already have ' + existing + ' as ' + UI.utils.label(options.predicate))
              complain('Cant have two')
              return resolve(null)
            } if (toolObject.shareTab) { // return existing one
              console.log('Using existing ' + existing + ' as ' + UI.utils.label(options.predicate))
              return resolve({ me: me, newInstance: existing, instanceClass: options.instanceClass })
            }
          }
        }
        if (!me && !options.me) reject(new Error('Username not defined for new tool'))
        options.me = options.me || me
        options.newInstance = options.useExisting || options.newInstance || kb.sym(options.newBase + 'index.ttl#this')

mintNew: function (newPaneOptions) {
    var kb = UI.store
    var newInstance = newPaneOptions.newInstance || kb.sym(newPaneOptions.newBase)
    var u = newInstance.uri
    if (u.endsWith('/')) {
      u = u.slice(0, -1) // chop off trailer
    }// { throw new Error('URI of new folder must end in "/" :' + u) }
    newPaneOptions.newInstance = kb.sym(u + '/')

    // @@@@ kludge until we can get the solid-client version working
    // Force the folder by saving a dummy file inside it
    return kb.fetcher.webOperation('PUT', newInstance.uri + '.dummy')
      .then(function () {
        console.log('New folder created: ' + newInstance.uri)

        return kb.fetcher.delete(newInstance.uri + '.dummy')
      })
      .then(function () {

var sendComplete = function (uri, success, body) {
          if (!success) {
            console.log("Error: can't save new issue:" + body)
          } else {
            form.parentNode.removeChild(form)
            rerender(div)
            outliner.GotoSubject(issue, true, undefined, true, undefined)
          }
        }
        updater.update([], sts, sendComplete)
      }
      // form.addEventListener('submit', function() {try {sendNewIssue} catch(e){console.log('sendNewIssue: '+e)}}, false)
      // form.setAttribute('onsubmit', "function xx(){return false;}")

      UI.store.fetcher.removeCallback('done', 'expand') // @@ experimental -- does this kill the re-paint? no
      UI.store.fetcher.removeCallback('fail', 'expand')

      var states = kb.any(tracker, WF('issueClass'))
      var classLabel = UI.utils.label(states)
      form.innerHTML = '<h2>Add new ' + (superIssue ? 'sub ' : '') +
        classLabel + '</h2><p>Title of new ' + classLabel + ':</p>'
      var titlefield = dom.createElement('input')
      titlefield.setAttribute('type', 'text')
      titlefield.setAttribute('style', 'margin: 0.5em; font-size: 100%; padding: 0.3em;')
      titlefield.setAttribute('size', '100')
      titlefield.setAttribute('maxLength', '2048') // No arbitrary limits
      titlefield.select() // focus next user input
      titlefield.addEventListener('keyup', function (e) {
        if (e.keyCode === 13) {
          sendNewIssue()
        }

: kb.fetcher.webOperation('DELETE', subject.uri)
        promise.then(response => {
          var str = 'Deleted: ' + subject
          console.log(str)
        }, err => {
          var str = 'Unable to delete ' + subject + ': ' + err
          console.log(str)
          alert(str)
        })
      })
      deleteButton.style = 'height: 2em;'
      deleteButton.class = '' // Remove hover hide
      deleteCell.appendChild(deleteButton)

      const refreshCell = controlRow.appendChild(dom.createElement('td'))
      const refreshButton = UI.widgets.button(dom, UI.icons.iconBase + 'noun_479395.svg', 'refresh')
      refreshCell.appendChild(refreshButton)
      refreshButton.addEventListener('click', event => {
        kb.fetcher.refresh(subject, function (ok, errm, res) {
          let str
          if (ok) {
            str = 'Refreshed OK: ' + subject
          } else {
            str = 'Error refreshing: ' + subject + ': ' + errm
          }
          console.log(str)
          alert(str)
        })
      })
    }

    var plist = kb.statementsMatching(subject)

UI.store.fetcher.nowOrWhenFetched(local.doc(), undefined, function (ok, message) {
          cardMain.innerHTML = ''
          if (!ok) return complainIfBad(ok, "Can't load card: " + local + ': ' + message)
          // console.log("Loaded card " + local + '\n')
          cardMain.appendChild(cardPane(dom, local, 'contact'))
          cardMain.appendChild(dom.createElement('br'))

          cardMain.appendChild(UI.widgets.linkIcon(dom, local)) // hoverHide

          // Add in a delete button to delete from AB
          var deleteButton = UI.widgets.deleteButtonWithCheck(dom, cardMain, 'contact', function () {
            let container = person.dir() // ASSUMPTION THAT CARD IS IN ITS OWN DIRECTORY
            // function warn (message) { return UI.widgets.errorMessageBlock(dom, message, 'straw') }
            alert('Conatiner to delete is ' + container)
            let pname = kb.any(person, ns.vcard('fn'))

            if (confirm('Delete contact ' + pname + ' completely?? ' + container)) {
              console.log('Deleting a contact ' + pname)
              deleteThing(person)
              //  - delete the references to it in group files and save them background
              //   - delete the reference in people.ttl and save it back
              deleteRecursive(kb, container).then(res => {
                refreshNames() // Doesn't work
                cardMain.innerHTML = 'Contact Data Deleted.'

} else {
            form.parentNode.removeChild(form)
            rerender(div)
            outliner.GotoSubject(issue, true, undefined, true, undefined)
          }
        }
        updater.update([], sts, sendComplete)
      }
      // form.addEventListener('submit', function() {try {sendNewIssue} catch(e){console.log('sendNewIssue: '+e)}}, false)
      // form.setAttribute('onsubmit', "function xx(){return false;}")

      UI.store.fetcher.removeCallback('done', 'expand') // @@ experimental -- does this kill the re-paint? no
      UI.store.fetcher.removeCallback('fail', 'expand')

      var states = kb.any(tracker, WF('issueClass'))
      var classLabel = UI.utils.label(states)
      form.innerHTML = '<h2>Add new ' + (superIssue ? 'sub ' : '') +
        classLabel + '</h2><p>Title of new ' + classLabel + ':</p>'
      var titlefield = dom.createElement('input')
      titlefield.setAttribute('type', 'text')
      titlefield.setAttribute('style', 'margin: 0.5em; font-size: 100%; padding: 0.3em;')
      titlefield.setAttribute('size', '100')
      titlefield.setAttribute('maxLength', '2048') // No arbitrary limits
      titlefield.select() // focus next user input
      titlefield.addEventListener('keyup', function (e) {
        if (e.keyCode === 13) {
          sendNewIssue()
        }
      }, false)
      form.appendChild(titlefield)
      return form
    }

var toolsPane = function (selectAllGroups, selectedGroups, groupsMainTable, book, dom, me) {
  var kb = UI.store, ns = UI.ns
  var updater = UI.store.updater
  var ACL = UI.ns.acl, VCARD = UI.ns.vcard
  var doc = $rdf.sym(book.uri.split('#')[0]) // The ACL is actually to the doc describing the thing

  var buttonStyle = 'font-size: 100%; margin: 0.8em; padding:0.5em;'

  var pane = dom.createElement('div')
  var table = pane.appendChild(dom.createElement('table'))
  table.setAttribute('style', 'font-size:120%; margin: 1em; border: 0.1em #ccc ;')
  var headerRow = table.appendChild(dom.createElement('tr'))
  headerRow.textContent = UI.utils.label(book) + ' - tools'
  headerRow.setAttribute('style', 'min-width: 20em; padding: 1em; font-size: 150%; border-bottom: 0.1em solid red; margin-bottom: 2em;')

  var statusRow = table.appendChild(dom.createElement('tr'))
  var statusBlock = statusRow.appendChild(dom.createElement('div'))
  statusBlock.setAttribute('style', 'padding: 2em;')
  var MainRow = table.appendChild(dom.createElement('tr'))
  var box = MainRow.appendChild(dom.createElement('table'))
  var bottomRow = table.appendChild(dom.createElement('tr'))

  context = { target: book, me: me, noun: 'address book',
  div: pane, dom: dom, statusRegion: statusBlock }

  box.appendChild(UI.aclControl.ACLControlBox5(book.dir(), dom, 'book', kb, function (ok, body) {
    if (!ok) box.innerHTML = 'ACL control box Failed: ' + body
  }))