npm - @things-factory/reference-app - Versions diffs - 4.0.1 → 4.0.5 - Mend

@things-factory/reference-app 4.0.1 → 4.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (764) hide show

package/dist-client/views/auth-page.html DELETED Viewed

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Reference App</title>
-    <meta name="generator" content="Things Factory Starter Kit" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Heart of Logistics" />
-    <base href="/" />
-    <link rel="icon" href="/assets/favicon.ico" />
-    <!-- See https://goo.gl/OOhYW5 -->
-    <link rel="manifest" href="/assets/manifest.json" />
-    <!-- See https://goo.gl/qRE0vM -->
-    <meta name="theme-color" content="#3f51b5" />
-    <!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Reference App" />
-    <meta name="application-description" content="Heart of Logistics" />
-    <meta name="application-copyright" content="Copyright © hatiolab.com. All Rights Reserved." />
-    <link rel="application-icon" href="/assets/manifest/icon-96x96.png" />
-    <!-- Add to homescreen for Safari on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-    <meta name="apple-mobile-web-app-title" content="Reference App" />
-    <!-- Homescreen icons -->
-    <link rel="apple-touch-icon" href="/assets/manifest/icon-48x48.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="/assets/manifest/icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="96x96" href="/assets/manifest/icon-96x96.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="/assets/manifest/icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="/assets/manifest/icon-192x192.png" />
-    <!-- Tile icon for Windows 8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="/assets/manifest/icon-144x144.png" />
-    <meta name="msapplication-TileColor" content="#3f51b5" />
-    <meta name="msapplication-tap-highlight" content="no" />
-    <!-- Default twitter cards -->
-    <meta name="twitter:card" content="summary" />
-    <meta name="twitter:site" content="@username" />
-    <meta property="og:type" content="website" />
-    <meta property="og:site_name" content="Reference App, Heart of platform." />
-    <meta property="og:image" content="/assets/manifest/image-metaog.png" />
-    <!-- Performance tip: hint to the browser to start the handshake for the fonts site -->
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" />
-    <link rel="stylesheet" href="/theme.css" />
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        /* This is a font-stack that tries to use the system-default sans-serifs first */
-        font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-    </style>
-    <!--- prefetch -->
-    <link rel="prefetch" href="/auth/signin.js">
-    <link rel="prefetch" href="/auth/signup.js">
-    <link rel="prefetch" href="/auth/forgot-password.js">
-    <link rel="prefetch" href="/auth/checkin.js">
-  </head>
-  <body>
-    <<%- pageElement %> id="page"></<%- pageElement %>>
-    <noscript>
-      Please enable JavaScript to view this website.
-    </noscript>
-    <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
-    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="node_modules/web-animations-js/web-animations-next.min.js"></script>
-    <script src="node_modules/@lottiefiles/lottie-player/dist/lottie-player.js"></script>
-    <!-- Built with love using PWA Starter Kit -->
-    <script src="<%- elementScript %>"></script>
-    <script src="/theme.js"></script>
-    <script>
-      var pageEl = document.querySelector('#page')
-      page.data = <%- JSON.stringify(data) %>
-    </script>
-  </body>
-</html>

package/dist-client/views/dependencies-view-graphviz.html DELETED Viewed

@@ -1,75 +0,0 @@
-<script src="//d3js.org/d3.v4.min.js"></script>
-<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
-<script src="https://unpkg.com/d3-graphviz@1.3.1/build/d3-graphviz.min.js"></script>
-<div id="graph" style="text-align: center; width: 100%; height: 100%;"></div>
-<script>
-    var model = <%- JSON.stringify(model) %>;
-    var { edges, nodes } = model
-    console.log(edges, nodes)
-    // links = links.filter(edge => edge.target !== '@things-factory/shell')
-    nodes['@things-factory/shell'] = {
-      id: '@things-factory/shell',
-      name: 'shell'
-    }
-    /* switch node id (modulename => index) */
-    Object.keys(nodes).forEach((nodename, idx) => {
-      nodes[nodename].id = idx
-    })
-    // Compute the distinct nodes from the links.
-    edges.forEach(function(edge) {
-      edge.source = nodes[edge.source] && nodes[edge.source].id
-      edge.target = nodes[edge.target] && nodes[edge.target].id
-    })
-    function templateNode(node) {
-      return `${node.id} [label="${node.name}"]\n`
-    }
-    function tempalteEdge(edge) {
-      return `${edge.source} -> ${edge.target}\n`
-    }
-    function templateDigraph(nodes, edges) {
-      return `digraph Curved {
-        ratio="fill"
-        node [shape=box]
-        ${Object.keys(nodes).map(nodename => templateNode(nodes[nodename])).join('')}
-        ${edges.map(edge => tempalteEdge(edge)).join('')}
-      }`
-    }
-    function attributer(datum, index, nodes) {
-      margin = 20; // to avoid scrollbars
-      var selection = d3.select(this);
-      if (datum.tag == "svg") {
-          var width = window.innerWidth;
-          var height = window.innerHeight;
-          datum.attributes.width = width - margin;
-          datum.attributes.height = height - margin;
-      }
-  }
-    // console.log(templateDigraph(nodes, edges))
-    var graphviz = d3
-      .select('#graph')
-      .graphviz()
-      .attributer(attributer)
-      .transition(function () {
-          return d3.transition("main")
-              .ease(d3.easeLinear)
-              .delay(500)
-              .duration(1500);
-      })
-      .renderDot(templateDigraph(nodes, edges))
-    graphviz.fit = true
-</script>

package/dist-client/views/dependencies-view.html DELETED Viewed

@@ -1,139 +0,0 @@
-<style>
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-  .link {
-    fill: none;
-    stroke: #666;
-    stroke-width: 1.5px;
-  }
-  #depends {
-    fill: green;
-  }
-  .link.depends {
-    stroke: #ccc;
-  }
-  circle {
-    fill: #ccc;
-    stroke: #333;
-    stroke-width: 1.5px;
-  }
-  text {
-    font: 10px sans-serif;
-    pointer-events: none;
-    text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
-  }
-</style>
-<script src="//d3js.org/d3.v3.min.js"></script>
-<script src="//cdn.jsdelivr.net/npm/d3-graphviz@2.6.1/build/d3-graphviz.min.js"></script>
-<script>
-  var model = <%- JSON.stringify(model) %>;
-  var { edges: links, nodes } = model
-  // links = links.filter(edge => edge.target !== '@things-factory/shell')
-  // Compute the distinct nodes from the links.
-  links.forEach(function(link) {
-    link.source = nodes[link.source] || (nodes[link.source] = { name: link.source })
-    link.target = nodes[link.target] || (nodes[link.target] = { name: link.target })
-  })
-  var width = 1200,
-    height = 800
-  var force = d3.layout
-    .force()
-    .nodes(d3.values(nodes))
-    .links(links)
-    .size([width, height])
-    .linkDistance(280)
-    .charge(-300)
-    .on('tick', tick)
-    .start()
-  var svg = d3
-    .select('body')
-    .append('svg')
-    .attr('width', width)
-    .attr('height', height)
-  // Per-type markers, as they don't inherit styles.
-  svg
-    .append('defs')
-    .selectAll('marker')
-    .data(['depends'])
-    .enter()
-    .append('marker')
-    .attr('id', function(d) {
-      return d
-    })
-    .attr('viewBox', '0 -5 10 10')
-    .attr('refX', 15)
-    .attr('refY', -1.5)
-    .attr('markerWidth', 6)
-    .attr('markerHeight', 6)
-    .attr('orient', 'auto')
-    .append('path')
-    .attr('d', 'M0,-5L10,0L0,5')
-  var path = svg
-    .append('g')
-    .selectAll('path')
-    .data(force.links())
-    .enter()
-    .append('path')
-    .attr('class', function(d) {
-      return 'link depends'
-    })
-    .attr('marker-end', function(d) {
-      return 'url(#depends)'
-    })
-  var circle = svg
-    .append('g')
-    .selectAll('circle')
-    .data(force.nodes())
-    .enter()
-    .append('circle')
-    .attr('r', 6)
-    .call(force.drag)
-  var text = svg
-    .append('g')
-    .selectAll('text')
-    .data(force.nodes())
-    .enter()
-    .append('text')
-    .attr('x', 8)
-    .attr('y', '.31em')
-    .text(function(d) {
-      return d.name
-    })
-  // Use elliptical arc path segments to doubly-encode directionality.
-  function tick() {
-    path.attr('d', linkArc)
-    circle.attr('transform', transform)
-    text.attr('transform', transform)
-  }
-  function linkArc(d) {
-    var dx = d.target.x - d.source.x,
-      dy = d.target.y - d.source.y,
-      dr = Math.sqrt(dx * dx + dy * dy)
-    return 'M' + d.source.x + ',' + d.source.y + 'A' + dr + ',' + dr + ' 0 0,1 ' + d.target.x + ',' + d.target.y
-  }
-  function transform(d) {
-    return 'translate(' + d.x + ',' + d.y + ')'
-  }
-</script>

package/dist-client/views/internal-board-service-view.html DELETED Viewed

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/assets/favicon.ico" />
-    <base href="<%= base ? base : '' %>" />
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-      }
-      #scene {
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="scene"></div>
-    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
-    <script>
-      var model = <%- JSON.stringify(model) %>;
-      WebFont.load({
-        google: {
-          families: model.fonts || []
-        }
-      })
-    </script>
-    <script src="/node_modules/@hatiolab/things-scene/things-scene-min.js"></script>
-    <script src="/headless-scene-components.js"></script>
-    <script>
-      var el = document.getElementById('scene')
-      var s = scene.create({
-        model,
-        mode: 0,
-        refProvider: null //self.provider
-      })
-      s.target = el
-      function resize() {
-        s.fit('ratio')
-      }
-      resize()
-      addEventListener(
-        'resize',
-        function () {
-          if (requestAnimationFrame) {
-            requestAnimationFrame(resize)
-          } else {
-            setTimeout(resize, 66)
-          }
-        },
-        false
-      )
-    </script>
-  </body>
-</html>

package/dist-client/views/internal-label-command-view.html DELETED Viewed

@@ -1,301 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/assets/favicon.ico" />
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-      }
-      #scene-container {
-        display: flex;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="scene-container"></div>
-    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
-    <script>
-      var model = <%- JSON.stringify(model) %>;
-      WebFont.load({
-        google: {
-          families: model.fonts || []
-        }
-      })
-    </script>
-    <script src="/node_modules/@hatiolab/things-scene/things-scene-min.js"></script>
-    <script src="/headless-scene-components.js"></script>
-    <script>
-      const sceneContainer = document.getElementById('scene-container')
-      function createScene(id, model) {
-        var el = document.createElement('div')
-        el.setAttribute('id', 'scene-' + id)
-        el.style.width = model.width + 'px'
-        el.style.height = model.height + 'px'
-        sceneContainer.appendChild(el)
-        var s = scene.create({
-          model,
-          mode: 0,
-          refProvider: null, //self.provider
-          target: el
-        })
-        s.fit('ratio')
-        return s
-      }
-      // N: 0, R: 90, I: 180, B: 270
-      function imageDataToGrf(scene, model, orientation, mirror = false, upsideDown = false) {
-        var { width, height } = model
-        width = Math.round(width)
-        height = Math.round(height)
-        orientation = orientation || model.labelRotation || 'N'
-        var printWidth = width,
-          printHeight = height
-        var lay = false
-        var startX = 0,
-          startY = 0,
-          endX = printWidth,
-          endY = printHeight
-        switch (orientation) {
-          case 'R':
-          case 'r':
-          case 90:
-            printWidth = height
-            printHeight = width
-            if (mirror) {
-              startX = 0
-              endX = printWidth
-            } else {
-              startX = 1 - printWidth
-              endX = 1
-            }
-            if (upsideDown) {
-              startY = 1 - printHeight
-              endY = 1
-            } else {
-              startY = 0
-              endY = printHeight
-            }
-            lay = true
-            break
-          case 'I':
-          case 'i':
-          case 180:
-            if (mirror) {
-              startX = 0
-              endX = printWidth
-            } else {
-              startX = 1 - printWidth
-              endX = 1
-            }
-            if (upsideDown) {
-              startY = 0
-              endY = printHeight
-            } else {
-              startY = 1 - printHeight
-              endY = 1
-            }
-            break
-          case 'B':
-          case 'b':
-          case 270:
-            printWidth = height
-            printHeight = width
-            if (mirror) {
-              startX = 1 - printWidth
-              endX = 1
-            } else {
-              startX = 0
-              endX = printWidth
-            }
-            if (upsideDown) {
-              startY = 0
-              endY = printHeight
-            } else {
-              startY = 1 - printHeight
-              endY = 1
-            }
-            lay = true
-            break
-          case 'N':
-          case 'n':
-          case 0:
-          default:
-            if (mirror) {
-              startX = 1 - printWidth
-              endX = 1
-            }
-            if (upsideDown) {
-              startY = 1 - printHeight
-              endY = 1
-            }
-        }
-        const R = 0
-        const G = 1
-        const B = 2
-        const A = 3
-        const THRESHOLD = 95
-        const imageData = getImageData(scene, width, height) // 이미지 데이터
-        // 이미지의 가로 한 줄당 바이트
-        const bytesPerLine = (printWidth + 7) >> 3 // var bytesPerLine = Math.ceil(width / 8)
-        // 이미지 너비와 grf 포맷에서 사용할 비트의 차이
-        const diff = (bytesPerLine << 3) - printWidth
-        // GRF 사이즈 = 가로 바이트 사이즈 * 세로
-        const grfSize = Math.round(bytesPerLine * printHeight)
-        // 가로 한 줄당 최대 문자 수 (바이트 당 두 글자)
-        const maxCharsOfLine = bytesPerLine << 1
-        // grf 압축을 위한 앞뒤 문자 비교용 그릇
-        var shortInt = new Uint8Array(1)
-        // zpl 이미지 포맷에 맞게 압축된 문자열
-        var zippedGrf = ''
-        // 압축 전 grf 포맷에서 중복되는 문자 수
-        var count = 1
-        // 비교 기준 문자
-        var baseNibble = null
-        // 비교 대상 문자
-        var objectNibble = null
-        // 현재 처리중인 가로 한 줄 문자열
-        var currentLine = ''
-        // 이전 줄 문자열
-        var previousLine = ''
-        // 도트 단위 처리를 위해 이미지 크기만큼 루프
-        for (var cursorY = startY; cursorY < endY; cursorY++) {
-          let y = Math.abs(cursorY)
-          for (var cursorX = startX, sequenceX = 0; cursorX < endX; cursorX++, sequenceX++) {
-            let x = Math.abs(cursorX) // 이미지 회전 시 이 값을 사용
-            let j = lay ? width * x + y : width * y + x // 현재 도트 좌표 (처리중인 도트)
-            let i = j << 2 // 이미지 데이터의 도트 좌표 (도트 * 4)
-            // 도트의 밝기
-            let luminance = imageData[i + R] * 0.21 + imageData[i + G] * 0.71 + imageData[i + B] * 0.07
-            // Alpha 값이 낮을 수록 luminance가 높아지는 것으로 본다.
-            luminance = luminance + ((255 - imageData[i + A]) * (255 - luminance)) / 255
-            shortInt[0] <<= 1 // 도트 좌표 이동
-            if (luminance < THRESHOLD) shortInt[0] |= 1 // THRESHOLD 값으로 칠할지 여부 판단, 어두우면 칠함
-            // 4도트마다 압축 로직 적용 (16진수 문자 하나마다 압축 로직 적용)
-            if ((sequenceX & 3) == 3) {
-              // 현재 처리하는 바이트의 뒷 4자리(16진수 문자 하나)를 비교 대상으로 정한다.
-              objectNibble = shortInt[0] & 0b1111
-              // 행의 첫 문자는 비교 기준 문자로 정하고 다음 문자로 루프 넘김
-              if (sequenceX == 3) {
-                baseNibble = objectNibble
-                continue
-              }
-              /**
-               * 기준 문자와 대상 문자 비교하여 같은 문자가 나오면 count를 올리고
-               * 다른 문자가 나오면 기준이었던 문자와 count를 사용해 압축,
-               * 가로 줄 문자열에 추가
-               */
-              if (baseNibble === objectNibble) count++
-              else {
-                currentLine += compressHexString(baseNibble.toString(16), count)
-                count = 1
-                baseNibble = objectNibble
-              }
-            }
-          }
-          // 끝의 8도트는 남는 도트 수만큼 왼쪽으로 밀어줌
-          shortInt[0] <<= diff
-          // 니블을 16진수 문자화
-          var baseChar = baseNibble.toString(16)
-          // 행의 마지막 바이트 압축 처리
-          if (diff != 0) {
-            // 차이가 4를 넘었을 때 앞 니블이 위의 루프에서 처리되지 않으므로 여기서 함
-            if (diff > 4) {
-              if (baseNibble == shortInt[0] >> 4) count++
-              else {
-                currentLine += compressHexString(baseChar, count)
-                count = 1
-                baseNibble = shortInt[0] >> 4
-              }
-            }
-            // 뒷 니블 처리
-            if (baseNibble == (shortInt[0] & 15)) count++
-            else {
-              currentLine += compressHexString(baseChar, count)
-              count = 1
-              baseNibble = shortInt[0] & 15
-            }
-          }
-          // 줄 마지막에 압축된 문자를 더함
-          // 이 줄 전부가 같은 문자인지 여부
-          var isOverTheLineMax = count >= maxCharsOfLine
-          // 이 줄이 모두 0이면 ','로 압축
-          if (isOverTheLineMax && baseNibble == 0) currentLine += ','
-          // 이 줄이 모두 F이면 '!'로 압축
-          else if (isOverTheLineMax && baseNibble == 0xf) currentLine += '!'
-          // 아니면 그냥 압축
-          else currentLine += compressHexString(baseChar, count)
-          count = 1
-          // 이전 줄과 현재 줄의 내용이 같으면 ':'로 압축, 아니면 그냥 추가함
-          if (currentLine == previousLine) zippedGrf += ':'
-          else zippedGrf += currentLine
-          // 초기화하고 루프로 돌아감
-          previousLine = currentLine
-          currentLine = ''
-        }
-        return `${grfSize},${grfSize},${bytesPerLine},${zippedGrf}`
-      }
-      // GRF 데이터를 압축
-      function compressHexString(char, count) {
-        const MAP_CODE = '\0GHIJKLMNOPQRSTUVWXYg' // 1 ~ 20
-        const MAP_CODE_2 = '\0ghijklmnopqrstuvwxyz' // (1 ~ 20) * 20
-        var result = ''
-        if (count > 1) {
-          while (count > 400) {
-            result += MAP_CODE_2[20]
-            count -= 400
-          }
-          if (count > 20) {
-            var multi20 = Math.trunc(count / 20)
-            var resto20 = count % 20
-            result += MAP_CODE_2[multi20]
-            if (resto20) result += MAP_CODE[resto20]
-          } else result += MAP_CODE[count]
-        }
-        result += char
-        return result
-      }
-      function getImageData(scene, width, height) {
-        return scene._container.model_layer.canvas.getContext('2d').getImageData(0, 0, width, height).data
-      }
-    </script>
-  </body>
-</html>