algos/index.html at main · runeworks206/algos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html xmlns="http://www.w3.org/19999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>rw algorithm implements</title>
  <script src='rw-algorithms.js'></script>
<style>
</style>
</head>
<body>
</body>
<script>

let body;
let raiseEvent = function(target, event, datum) { return target.dispatchEvent(new CustomEvent(event, {detail:datum})) }

function isTextBox(element) {
  var tagName = element.tagName.toLowerCase();
  if (tagName === 'textarea') return true;
  if (tagName !== 'input') return false;
  // if any of these input types is not supported by a browser, it will behave as input type text.
  inputTypes = ['text', 'password', 'number', 'email', 'tel', 'url', 'search', 'date', 'datetime', 'datetime-local', 'time', 'month', 'week']
  return inputTypes.indexOf(element?.type) >= 0;
}

document.addEventListener('DOMContentLoaded', async (e) => {
  console.log(runeworks.algorithms)
  let algos = runeworks.algorithms

  body = document.querySelector('body')

  let html = ''
  let template  = '<div id="rw-ALGO" class="rw-algorithm"><div class="rw-label">ALGONAME</div>INPUTS<div class="rw-algo-run" onclick="raiseEvent(body, \'run-algo\', this)">RUN</div>'
      template += '<div id="rw-ALGO-outcome" class="rw-outcome">Output: <div class="rw-outcome-value"></div></div></div>'

  let meta = algos.meta

  Object.keys(algos).forEach(algo => {
    if (algo != 'meta') {
      let metadata = meta[algo]
      let inputs   = ''
      Object.entries(metadata.inputs).forEach(([input, exec]) => {
        inputs += `<input id="rw-${algo}-input-${input}" class="rw-${exec}" placeholder="${input}"></input>`
      })
      html += template.replace("ALGONAME", metadata.name).replace('"rw-ALGO"', 'rw-' + algo).replace('INPUTS', inputs).replace('id="rw-ALGO-outcome"','id="rw-' + algo + '-outcome"')
    }
  })
  body.insertAdjacentHTML('beforeend', html)

  // Listen
  body.addEventListener('run-algo', (e) => {
    let source = e.detail?.parentNode
    // console.log(source)

    let algorithm = source?.id
    if (algorithm.length) {
      algorithm = algorithm.replace('rw-','')
    }
    // console.log(algorithm)

    let args = []
    for (var i = 0; i < source.children.length; i++) {
      let child = source.children[i]
      if (isTextBox(child)) {
        let value = child?.value
        if (child.className.match('json')) { value = JSON.parse(value) }
        args.push(value)
      }
    }
    // console.log(args)

    // Call the function
    // console.log(`Running ${algorithm} using args ${args}`)
    let outcome = algos[algorithm](...args)
    // console.log(outcome)

    let outcomeElement = source.querySelector('.rw-outcome-value')
    outcomeElement.innerHTML = outcome
  })
})

</script>
</html>