npm - @fmsim/fmsim - Versions diffs - 0.0.98 → 0.0.101 - Mend

@fmsim/fmsim 0.0.98 → 0.0.101

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 (1160) hide show

package/dist-app/views/internal-label-command-view.html ADDED Viewed

@@ -0,0 +1,316 @@
+<!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) %>;
+      const { fontStyles, fonts } = model
+      if(fontStyles){
+        let style = document.head.querySelector('#custom-fonts')
+        if (!style) {
+          style = document.createElement('style')
+          style.id = 'custom-fonts'
+          document.head.appendChild(style)
+        }
+        style.innerHTML = model.fontStyles
+      }
+      if(fonts) {
+        WebFont.load({
+          ...model.fonts,
+          fontactive: () => {
+            window.dispatchEvent(new CustomEvent('resize'))
+          }
+        })
+      }
+    </script>
+    <script src="/fmsim/node_modules/@hatiolab/things-scene/things-scene-min.js"></script>
+    <script src="/fmsim/headless-scene-components.js"></script>
+    <script>
+      const sceneContainer = document.getElementById('scene-container')
+      function createScene(model) {
+        var el = document.createElement('div')
+        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>

package/dist-app/views/oauth2-page.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Things Factory App</title>
+  <meta name="generator" content="Things Factory Starter Kit" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+  <meta name="description" content="Reimagining Software" />
+  <meta name="google" content="notranslate"/>
+  <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="#22a6a7" />
+  <!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="application-name" content="Things Factory" />
+  <meta name="application-description" content="Reimagining Software" />
+  <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="Things Factory" />
+  <!-- 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="things-factory, Reimagining Software." />
+  <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 href="/node_modules/@material-design-icons/font/index.css" rel="stylesheet" />
+  <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>
+</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>
+  <!-- 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-app/views/public/home.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Fmsim</title>
+    <meta name="generator" content="Things Factory Starter Kit" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta name="description" content="Factory Layout View" />
+    <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="#ea6780" />
+    <!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="application-name" content="Fmsim" />
+    <meta name="application-description" content="Factory Layout View" />
+    <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="Fmsim" />
+    <!-- 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="#ea6780" />
+    <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="Fmsim, 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="/fmsim/node_modules/@material-design-icons/font/index.css" />
+    <link rel="stylesheet" href="/fmsim/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="/fmsim/public/home.js" />
+  </head>
+  <body>
+    <home-page id="page"></home-page>
+    <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>
+    <!-- Built with love using PWA Starter Kit -->
+    <script src="/fmsim/public/home.js"></script>
+    <script src="/fmsim/theme.js"></script>
+  </body>
+</html>

package/dist-app/views/scenario-view.html ADDED Viewed

@@ -0,0 +1,64 @@
+<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
+    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;
+      }
+  }
+  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-app/views/template.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="google" content="notranslate" />
+    <link rel="icon" href="/assets/favicon.ico" />
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <%- body %>
+  </body>
+</html>

package/dist-client/board-list/board-tile-list.js CHANGED Viewed

@@ -77,7 +77,7 @@ BoardTileList.styles = [
         padding: var(--popup-content-padding);
         display: grid;
-        grid-template-columns: var(--card-list-template);
+        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
         grid-auto-rows: var(--card-list-rows-height);
         grid-gap: 20px;
         --mdc-button-horizontal-padding: var(--padding-default);

package/dist-client/board-list/board-tile-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@fmsim/board/ox-board-creation-card.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { BoardCreationCard } from '@fmsim/board/ox-board-creation-card.js'\nimport { removeFavorite, addFavorite } from '@fmsim/api'\n\n@customElement('board-tile-list')\nexport default class BoardTileList extends LitElement {\n static styles = [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n\n grid-template-columns: ~~var~~(~~--card~~-~~list-template~~);\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n --mdc-button-horizontal-padding: var(--padding-default);\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--margin-narrow);\n width: calc(100% - 45px);\n color: var(--primary-text-color);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n display: block;\n\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n }\n\n mwc-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n mwc-icon[info] {\n color: var(--primary-color);\n }\n\n mwc-icon[iconBtn][favored],\n mwc-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dark-color);\n box-sizing: border-box;\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > *:hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'creatable' }) creatable?: boolean\n @property({ type: Array }) boards?: any[]\n @property({ type: Array }) favorites?: any[]\n @property({ type: Array }) groups?: any[]\n @property({ type: String }) group?: string\n\n @query('ox-board-creation-card') creationCard!: BoardCreationCard\n\n render() {\n var boards = this.boards \|\| []\n\n return html`\n ${this.creatable\n ? html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n : html``}\n ${boards.map(\n board =>\n html`\n <div card>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <mwc-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board.id)\n e.preventDefault()\n }}\n >info</mwc-icon\n >\n\n ${(this.favorites \|\| []).includes(board.id)\n ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `\n : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}\n </div>\n `\n )}\n `\n }\n\n updated(changes) {\n this.creationCard?.reset()\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(boardId) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: boardId\n })\n )\n }\n\n async removeFavorite(boardId) {\n await removeFavorite(boardId)\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await addFavorite(boardId)\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n"]}
1	+ {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@fmsim/board/ox-board-creation-card.js'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { BoardCreationCard } from '@fmsim/board/ox-board-creation-card.js'\nimport { removeFavorite, addFavorite } from '@fmsim/api'\n\n@customElement('board-tile-list')\nexport default class BoardTileList extends LitElement {\n static styles = [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n --mdc-button-horizontal-padding: var(--padding-default);\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--margin-narrow);\n width: calc(100% - 45px);\n color: var(--primary-text-color);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n display: block;\n\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n }\n\n mwc-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n mwc-icon[info] {\n color: var(--primary-color);\n }\n\n mwc-icon[iconBtn][favored],\n mwc-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dark-color);\n box-sizing: border-box;\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > *:hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'creatable' }) creatable?: boolean\n @property({ type: Array }) boards?: any[]\n @property({ type: Array }) favorites?: any[]\n @property({ type: Array }) groups?: any[]\n @property({ type: String }) group?: string\n\n @query('ox-board-creation-card') creationCard!: BoardCreationCard\n\n render() {\n var boards = this.boards \|\| []\n\n return html`\n ${this.creatable\n ? html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n : html``}\n ${boards.map(\n board =>\n html`\n <div card>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <mwc-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board.id)\n e.preventDefault()\n }}\n >info</mwc-icon\n >\n\n ${(this.favorites \|\| []).includes(board.id)\n ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `\n : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}\n </div>\n `\n )}\n `\n }\n\n updated(changes) {\n this.creationCard?.reset()\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(boardId) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: boardId\n })\n )\n }\n\n async removeFavorite(boardId) {\n await removeFavorite(boardId)\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await addFavorite(boardId)\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n"]}