@things-factory/kpi 10.1.248 → 10.1.249

package/dist-client/google-map/common-google-map.js

@@ -0,0 +1,333 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+import GoogleMapLoader from './google-map-loader.js';
+let CommonGoogleMap = class CommonGoogleMap extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.locations = [];
+        this.clusterZoom = 10;
+        this.map = null;
+        this.defaultCenter = { lat: 36.5, lng: 127.5 };
+        this._infoWindow = null;
+        this._markerClusterer = null;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+      }
+
+      [map] {
+        flex: 1;
+      }
+
+      .gm-style .gm-style-iw-c {
+        padding: 0;
+      }
+
+      .gm-style .gm-style-iw-d {
+        overflow: auto !important;
+      }
+      .gm-style .gm-style-iw-d + button {
+        top: 0 !important;
+        right: 0 !important;
+      }
+    `
+    ]; }
+    get anchor() {
+        return this.renderRoot.querySelector('[map]');
+    }
+    async readyMap() {
+        await GoogleMapLoader.load();
+        // MarkerClusterer 라이브러리 로드
+        if (!window.markerClusterer) {
+            await GoogleMapLoader.loadMarkerClusterer();
+        }
+        if (this.map) {
+            return;
+        }
+        // DOM이 준비될 때까지 기다림
+        await this.updateComplete;
+        // anchor가 준비될 때까지 기다림
+        let attempts = 0;
+        const maxAttempts = 20;
+        while (attempts < maxAttempts) {
+            const anchor = this.anchor;
+            if (anchor && anchor.offsetWidth > 0) {
+                break;
+            }
+            await new Promise(resolve => setTimeout(resolve, 50));
+            attempts++;
+        }
+        if (!this.anchor) {
+            console.error('Map anchor element not found');
+            return;
+        }
+        var show = async (center, zoom) => {
+            try {
+                // Google Maps 최신 API 사용
+                const { Map } = (await google.maps.importLibrary('maps'));
+                const mapOptions = {
+                    zoom,
+                    center,
+                    mapId: 'DEMO_MAP_ID'
+                };
+                // controls 속성이 있으면 지도 옵션에 추가
+                if (this.controls) {
+                    Object.assign(mapOptions, this.controls);
+                }
+                const map = new Map(this.anchor, mapOptions);
+                this.markers && this.markers.forEach(marker => marker.setMap(map));
+                this.map = map;
+                this.dispatchEvent(new CustomEvent('map-change', {
+                    detail: this.map
+                }));
+                this.resetBounds();
+            }
+            catch (e) {
+                console.error(e);
+            }
+        };
+        var { center, zoom = 10 } = this;
+        /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */
+        if (!center && 'geolocation' in navigator && !this.boundCoords?.length) {
+            navigator.geolocation.getCurrentPosition(({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom), err => {
+                console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`);
+                show(this.defaultCenter, zoom);
+            }, {
+                /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */
+                timeout: 500
+            });
+        }
+        else {
+            show(center, zoom);
+        }
+    }
+    async buildMarkers(locations = []) {
+        if (!this.map) {
+            return;
+        }
+        if (this.markers) {
+            this.markers.forEach(marker => marker.setMap(null));
+            this.markers = [];
+        }
+        // 기존 클러스터 제거
+        if (this._markerClusterer) {
+            this._markerClusterer.clearMarkers();
+            this._markerClusterer = null;
+        }
+        // Google Maps 최신 API 사용
+        const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker'));
+        this.markers = locations
+            .map(location => {
+            // location 객체가 유효한지 확인
+            if (!location || typeof location !== 'object') {
+                console.warn('Invalid location object:', location);
+                return null;
+            }
+            // lat, lng 값이 유효한지 확인
+            const lat = parseFloat(location.lat);
+            const lng = parseFloat(location.lng);
+            if (isNaN(lat) || isNaN(lng)) {
+                console.warn('Invalid lat/lng values:', location);
+                return null;
+            }
+            // LatLng 객체 생성
+            const position = new google.maps.LatLng(lat, lng);
+            // 커스텀 마커 콘텐츠가 있으면 사용
+            let markerElement;
+            if (location.markerContent) {
+                // HTML 문자열을 DOM 요소로 변환
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = location.markerContent;
+                markerElement = tempDiv.firstElementChild;
+            }
+            else {
+                // 기본 핀 사용
+                markerElement = new PinElement({
+                    background: '#1976d2',
+                    borderColor: '#1565c0',
+                    glyphColor: '#ffffff',
+                    scale: 1.2
+                });
+            }
+            // AdvancedMarkerElement 사용
+            const marker = new AdvancedMarkerElement({
+                position: position,
+                map: null, // 클러스터에서 관리하므로 지도에 직접 추가하지 않음
+                content: markerElement
+            });
+            marker.addListener('click', () => {
+                // InfoWindow 대신 커스텀 이벤트 발생
+                if (location?.region) {
+                    this.dispatchEvent(new CustomEvent('region-click', {
+                        detail: { region: location.region },
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+            });
+            return marker;
+        })
+            .filter(marker => marker !== null); // null 마커 제거
+        // Google Maps 공식 MarkerClusterer 사용 (예시와 동일한 방식)
+        if (this.markers.length > 0 && window.markerClusterer) {
+            this._markerClusterer = new window.markerClusterer.MarkerClusterer({
+                markers: this.markers,
+                map: this.map
+            });
+        }
+    }
+    get infoWindow() {
+        if (!this._infoWindow && this.map) {
+            this._infoWindow = new google.maps.InfoWindow({
+                content: 'loading...'
+            });
+        }
+        return this._infoWindow;
+    }
+    setFocus(focus, icon) {
+        focus.setZIndex(1);
+        focus.setIcon(icon);
+    }
+    resetFocus(focus, icon) {
+        focus.setZIndex(0);
+        focus.setIcon(icon);
+    }
+    async changeFocus(after, before) {
+        await this.readyMap();
+        // map이 준비되지 않았으면 포커스 변경하지 않음
+        if (!this.map) {
+            return;
+        }
+        var locations = this.locations || [];
+        if (before) {
+            var idx = locations.findIndex(location => {
+                // location 객체의 구조를 안전하게 확인
+                const beforePos = before?.position;
+                const locationPos = location?.position;
+                return (location?.name == before?.name && locationPos?.lat == beforePos?.lat && locationPos?.lng == beforePos?.lng);
+            });
+            idx !== -1 && this.markers && this.resetFocus(this.markers[idx], locations[idx]?.icon);
+        }
+        if (after) {
+            var idx = locations.findIndex(location => {
+                // location 객체의 구조를 안전하게 확인
+                const afterPos = after?.position;
+                const locationPos = location?.position;
+                return location?.name == after?.name && locationPos?.lat == afterPos?.lat && locationPos?.lng == afterPos?.lng;
+            });
+            idx !== -1 && this.markers && this.setFocus(this.markers[idx], after?.icon);
+        }
+    }
+    async updated(changes) {
+        if (!this.map) {
+            await this.readyMap();
+        }
+        if (changes.has('locations')) {
+            this.buildMarkers(this.locations);
+        }
+        if (changes.has('focused')) {
+            this.changeFocus(this.focused, changes.get('focused'));
+        }
+        if (changes.has('center')) {
+            this.map.setCenter(this.center);
+        }
+        if (changes.has('controls')) {
+            // controls가 변경되면 기존 지도의 옵션만 업데이트
+            if (this.map && this.controls) {
+                // Google Maps API의 setOptions 메서드 사용
+                this.map.setOptions(this.controls);
+            }
+        }
+        if (changes.has('polygons')) {
+            ;
+            (changes.get('polygons') || []).forEach(geofence => geofence.setMap(null));
+            (this.polygons || []).forEach(geofence => geofence.setMap(this.map));
+        }
+        if (changes.has('polylines')) {
+            ;
+            (changes.get('polylines') || []).forEach(polyline => polyline.setMap(null));
+            (this.polylines || []).forEach(polyline => polyline.setMap(this.map));
+        }
+        if (changes.has('markers')) {
+            ;
+            (changes.get('markers') || []).forEach(marker => marker.setMap(null));
+            (this.markers || []).forEach(marker => marker.setMap(this.map));
+        }
+        if (changes.has('boundCoords')) {
+            this.resetBounds();
+        }
+        // 클러스터링 설정 변경 시 마커 재구성
+        if (changes.has('clusterZoom')) {
+            this.buildMarkers(this.locations);
+        }
+    }
+    render() {
+        return html ` <div map></div> `;
+    }
+    resetBounds() {
+        if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {
+            return;
+        }
+        var bounds = new google.maps.LatLngBounds();
+        this.boundCoords.forEach(coord => bounds.extend(coord));
+        this.map.fitBounds(bounds);
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "center", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "zoom", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], CommonGoogleMap.prototype, "locations", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "focused", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "polygons", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "polylines", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "markers", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "boundCoords", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "controls", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "clusterZoom", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "map", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], CommonGoogleMap.prototype, "defaultCenter", void 0);
+CommonGoogleMap = __decorate([
+    customElement('common-google-map')
+], CommonGoogleMap);
+export { CommonGoogleMap };
+//# sourceMappingURL=common-google-map.js.map

package/dist-client/google-map/common-google-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-google-map.js","sourceRoot":"","sources":["../../client/google-map/common-google-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport GoogleMapLoader from './google-map-loader.js'\n\ndeclare global {\n  interface Window {\n    google: any\n    markerClusterer?: any\n  }\n}\n\ndeclare const google: any\n\ndeclare namespace google.maps {\n  interface MapsLibrary {\n    Map: any\n    InfoWindow: any\n  }\n\n  interface MarkerLibrary {\n    AdvancedMarkerElement: any\n    PinElement: any\n  }\n}\n\n@customElement('common-google-map')\nexport class CommonGoogleMap extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      [map] {\n        flex: 1;\n      }\n\n      .gm-style .gm-style-iw-c {\n        padding: 0;\n      }\n\n      .gm-style .gm-style-iw-d {\n        overflow: auto !important;\n      }\n      .gm-style .gm-style-iw-d + button {\n        top: 0 !important;\n        right: 0 !important;\n      }\n    `\n  ]\n\n  @property({ type: Object }) center\n  @property({ type: Number }) zoom\n  @property({ type: Array }) locations: any[] = []\n  @property({ type: Object }) focused\n  @property({ type: Array }) polygons\n  @property({ type: Array }) polylines\n  @property({ type: Array }) markers\n  @property({ type: Array }) boundCoords\n  @property({ type: Object }) controls\n  @property({ type: Number }) clusterZoom = 10\n\n  @state() map: any = null\n  @state() defaultCenter: any = { lat: 36.5, lng: 127.5 }\n  private _infoWindow: any = null\n  private _markerClusterer: any = null\n\n  get anchor() {\n    return this.renderRoot.querySelector('[map]')\n  }\n\n  async readyMap() {\n    await GoogleMapLoader.load()\n\n    // MarkerClusterer 라이브러리 로드\n    if (!window.markerClusterer) {\n      await GoogleMapLoader.loadMarkerClusterer()\n    }\n\n    if (this.map) {\n      return\n    }\n\n    // DOM이 준비될 때까지 기다림\n    await this.updateComplete\n\n    // anchor가 준비될 때까지 기다림\n    let attempts = 0\n    const maxAttempts = 20\n    while (attempts < maxAttempts) {\n      const anchor = this.anchor as HTMLElement\n      if (anchor && anchor.offsetWidth > 0) {\n        break\n      }\n      await new Promise(resolve => setTimeout(resolve, 50))\n      attempts++\n    }\n\n    if (!this.anchor) {\n      console.error('Map anchor element not found')\n      return\n    }\n\n    var show = async (center, zoom) => {\n      try {\n        // Google Maps 최신 API 사용\n        const { Map } = (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary\n\n        const mapOptions = {\n          zoom,\n          center,\n          mapId: 'DEMO_MAP_ID'\n        }\n\n        // controls 속성이 있으면 지도 옵션에 추가\n        if (this.controls) {\n          Object.assign(mapOptions, this.controls)\n        }\n\n        const map = new Map(this.anchor, mapOptions)\n\n        this.markers && this.markers.forEach(marker => marker.setMap(map))\n\n        this.map = map\n\n        this.dispatchEvent(\n          new CustomEvent('map-change', {\n            detail: this.map\n          })\n        )\n\n        this.resetBounds()\n      } catch (e) {\n        console.error(e)\n      }\n    }\n\n    var { center, zoom = 10 } = this\n\n    /* center 속성이 설정되어있지 않으면, 현재 위치를 구해서 지도의 center로 설정한다. */\n    if (!center && 'geolocation' in navigator && !this.boundCoords?.length) {\n      navigator.geolocation.getCurrentPosition(\n        ({ coords: { latitude: lat, longitude: lng } }) => show({ lat, lng }, zoom),\n        err => {\n          console.warn(`navigator.geolocation.getCurrentPosition failed. (${err.code}): ${err.message}`)\n          show(this.defaultCenter, zoom)\n        },\n        {\n          /* https://stackoverflow.com/questions/3397585/navigator-geolocation-getcurrentposition-sometimes-works-sometimes-doesnt */\n          timeout: 500\n        }\n      )\n    } else {\n      show(center, zoom)\n    }\n  }\n\n  async buildMarkers(locations: any[] = []) {\n    if (!this.map) {\n      return\n    }\n\n    if (this.markers) {\n      this.markers.forEach(marker => marker.setMap(null))\n      this.markers = []\n    }\n\n    // 기존 클러스터 제거\n    if (this._markerClusterer) {\n      this._markerClusterer.clearMarkers()\n      this._markerClusterer = null\n    }\n\n    // Google Maps 최신 API 사용\n    const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(\n      'marker'\n    )) as google.maps.MarkerLibrary\n\n    this.markers = locations\n      .map(location => {\n        // location 객체가 유효한지 확인\n        if (!location || typeof location !== 'object') {\n          console.warn('Invalid location object:', location)\n          return null\n        }\n\n        // lat, lng 값이 유효한지 확인\n        const lat = parseFloat(location.lat)\n        const lng = parseFloat(location.lng)\n\n        if (isNaN(lat) || isNaN(lng)) {\n          console.warn('Invalid lat/lng values:', location)\n          return null\n        }\n\n        // LatLng 객체 생성\n        const position = new google.maps.LatLng(lat, lng)\n\n        // 커스텀 마커 콘텐츠가 있으면 사용\n        let markerElement\n        if (location.markerContent) {\n          // HTML 문자열을 DOM 요소로 변환\n          const tempDiv = document.createElement('div')\n          tempDiv.innerHTML = location.markerContent\n          markerElement = tempDiv.firstElementChild\n        } else {\n          // 기본 핀 사용\n          markerElement = new PinElement({\n            background: '#1976d2',\n            borderColor: '#1565c0',\n            glyphColor: '#ffffff',\n            scale: 1.2\n          })\n        }\n\n        // AdvancedMarkerElement 사용\n        const marker = new AdvancedMarkerElement({\n          position: position,\n          map: null, // 클러스터에서 관리하므로 지도에 직접 추가하지 않음\n          content: markerElement\n        })\n\n        marker.addListener('click', () => {\n          // InfoWindow 대신 커스텀 이벤트 발생\n          if (location?.region) {\n            this.dispatchEvent(\n              new CustomEvent('region-click', {\n                detail: { region: location.region },\n                bubbles: true,\n                composed: true\n              })\n            )\n          }\n        })\n\n        return marker\n      })\n      .filter(marker => marker !== null) // null 마커 제거\n\n    // Google Maps 공식 MarkerClusterer 사용 (예시와 동일한 방식)\n    if (this.markers.length > 0 && window.markerClusterer) {\n      this._markerClusterer = new window.markerClusterer.MarkerClusterer({\n        markers: this.markers,\n        map: this.map\n      })\n    }\n  }\n\n  get infoWindow() {\n    if (!this._infoWindow && this.map) {\n      this._infoWindow = new google.maps.InfoWindow({\n        content: 'loading...'\n      })\n    }\n\n    return this._infoWindow\n  }\n\n  setFocus(focus, icon) {\n    focus.setZIndex(1)\n    focus.setIcon(icon)\n  }\n\n  resetFocus(focus, icon) {\n    focus.setZIndex(0)\n    focus.setIcon(icon)\n  }\n\n  async changeFocus(after, before) {\n    await this.readyMap()\n\n    // map이 준비되지 않았으면 포커스 변경하지 않음\n    if (!this.map) {\n      return\n    }\n\n    var locations = this.locations || []\n\n    if (before) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const beforePos = before?.position\n        const locationPos = location?.position\n\n        return (\n          location?.name == before?.name && locationPos?.lat == beforePos?.lat && locationPos?.lng == beforePos?.lng\n        )\n      })\n      idx !== -1 && this.markers && this.resetFocus(this.markers[idx], locations[idx]?.icon)\n    }\n\n    if (after) {\n      var idx = locations.findIndex(location => {\n        // location 객체의 구조를 안전하게 확인\n        const afterPos = after?.position\n        const locationPos = location?.position\n\n        return location?.name == after?.name && locationPos?.lat == afterPos?.lat && locationPos?.lng == afterPos?.lng\n      })\n      idx !== -1 && this.markers && this.setFocus(this.markers[idx], after?.icon)\n    }\n  }\n\n  async updated(changes) {\n    if (!this.map) {\n      await this.readyMap()\n    }\n\n    if (changes.has('locations')) {\n      this.buildMarkers(this.locations)\n    }\n\n    if (changes.has('focused')) {\n      this.changeFocus(this.focused, changes.get('focused'))\n    }\n\n    if (changes.has('center')) {\n      this.map.setCenter(this.center)\n    }\n\n    if (changes.has('controls')) {\n      // controls가 변경되면 기존 지도의 옵션만 업데이트\n      if (this.map && this.controls) {\n        // Google Maps API의 setOptions 메서드 사용\n        this.map.setOptions(this.controls)\n      }\n    }\n\n    if (changes.has('polygons')) {\n      ;(changes.get('polygons') || []).forEach(geofence => geofence.setMap(null))\n      ;(this.polygons || []).forEach(geofence => geofence.setMap(this.map))\n    }\n\n    if (changes.has('polylines')) {\n      ;(changes.get('polylines') || []).forEach(polyline => polyline.setMap(null))\n      ;(this.polylines || []).forEach(polyline => polyline.setMap(this.map))\n    }\n\n    if (changes.has('markers')) {\n      ;(changes.get('markers') || []).forEach(marker => marker.setMap(null))\n      ;(this.markers || []).forEach(marker => marker.setMap(this.map))\n    }\n\n    if (changes.has('boundCoords')) {\n      this.resetBounds()\n    }\n\n    // 클러스터링 설정 변경 시 마커 재구성\n    if (changes.has('clusterZoom')) {\n      this.buildMarkers(this.locations)\n    }\n  }\n\n  render() {\n    return html` <div map></div> `\n  }\n\n  resetBounds() {\n    if (!this.boundCoords || this.boundCoords.length < 1 || !this.map) {\n      return\n    }\n\n    var bounds = new google.maps.LatLngBounds()\n    this.boundCoords.forEach(coord => bounds.extend(coord))\n    this.map.fitBounds(bounds)\n  }\n}\n"]}

package/dist-client/google-map/google-map-loader.d.ts

@@ -0,0 +1,8 @@
+/** The domain setting that holds this site's Google Maps API key. The key is never written in source. */
+export declare const GOOGLE_MAP_API_KEY_SETTING = "google-map-api-key";
+export default class GoogleMapLoader {
+    static markerClustererLoaded: boolean;
+    /** Loads Google Maps once per page with the key from the domain setting; without one, it refuses. */
+    static load(): Promise<void>;
+    static loadMarkerClusterer(): Promise<void>;
+}

package/dist-client/google-map/google-map-loader.js

@@ -0,0 +1,22 @@
+import { loadGoogleMaps } from '@operato/utils/google-maps-loader.js';
+import ScriptLoader from '@operato/utils/script-loader.js';
+import { fetchSettingRule } from '@things-factory/setting-ui/dist-client/fetch-setting-value.js';
+/** The domain setting that holds this site's Google Maps API key. The key is never written in source. */
+export const GOOGLE_MAP_API_KEY_SETTING = 'google-map-api-key';
+export default class GoogleMapLoader {
+    static { this.markerClustererLoaded = false; }
+    /** Loads Google Maps once per page with the key from the domain setting; without one, it refuses. */
+    static async load() {
+        const key = await fetchSettingRule(GOOGLE_MAP_API_KEY_SETTING);
+        await loadGoogleMaps(typeof key === 'string' ? key : '');
+    }
+    static async loadMarkerClusterer() {
+        if (GoogleMapLoader.markerClustererLoaded) {
+            return;
+        }
+        // Google Maps 공식 MarkerClusterer 라이브러리 로드
+        await ScriptLoader.load('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js');
+        GoogleMapLoader.markerClustererLoaded = true;
+    }
+}
+//# sourceMappingURL=google-map-loader.js.map

package/dist-client/google-map/google-map-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-map-loader.js","sourceRoot":"","sources":["../../client/google-map/google-map-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AACrE,OAAO,YAAY,MAAM,iCAAiC,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+DAA+D,CAAA;AAEhG,yGAAyG;AACzG,MAAM,CAAC,MAAM,0BAA0B,GAAG,oBAAoB,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,eAAe;aAC3B,0BAAqB,GAAG,KAAK,CAAA;IAEpC,qGAAqG;IACrG,MAAM,CAAC,KAAK,CAAC,IAAI;QACf,MAAM,GAAG,GAAG,MAAM,gBAAgB,CAAC,0BAA0B,CAAC,CAAA;QAC9D,MAAM,cAAc,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAC1D,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,mBAAmB;QAC9B,IAAI,eAAe,CAAC,qBAAqB,EAAE,CAAC;YAC1C,OAAM;QACR,CAAC;QAED,0CAA0C;QAC1C,MAAM,YAAY,CAAC,IAAI,CAAC,iEAAiE,CAAC,CAAA;QAE1F,eAAe,CAAC,qBAAqB,GAAG,IAAI,CAAA;IAC9C,CAAC","sourcesContent":["import { loadGoogleMaps } from '@operato/utils/google-maps-loader.js'\nimport ScriptLoader from '@operato/utils/script-loader.js'\nimport { fetchSettingRule } from '@things-factory/setting-ui/dist-client/fetch-setting-value.js'\n\n/** The domain setting that holds this site's Google Maps API key. The key is never written in source. */\nexport const GOOGLE_MAP_API_KEY_SETTING = 'google-map-api-key'\n\nexport default class GoogleMapLoader {\n  static markerClustererLoaded = false\n\n  /** Loads Google Maps once per page with the key from the domain setting; without one, it refuses. */\n  static async load() {\n    const key = await fetchSettingRule(GOOGLE_MAP_API_KEY_SETTING)\n    await loadGoogleMaps(typeof key === 'string' ? key : '')\n  }\n\n  static async loadMarkerClusterer() {\n    if (GoogleMapLoader.markerClustererLoaded) {\n      return\n    }\n\n    // Google Maps 공식 MarkerClusterer 라이브러리 로드\n    await ScriptLoader.load('https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js')\n\n    GoogleMapLoader.markerClustererLoaded = true\n  }\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1 @@
+export { KpiListPage } from './pages/kpi/kpi-list-page.js';

package/dist-client/index.js

@@ -0,0 +1,2 @@
+export { KpiListPage } from './pages/kpi/kpi-list-page.js';
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA","sourcesContent":["export { KpiListPage } from './pages/kpi/kpi-list-page.js'\n"]}

package/dist-client/pages/kpi/kpi-grade-editor.d.ts

@@ -0,0 +1,35 @@
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import { LitElement } from 'lit';
+import { DataGrist } from '@operato/data-grist/ox-grist.js';
+import { FetchOption } from '@operato/data-grist';
+interface KpiGrade {
+    name: string;
+    minValue: number;
+    maxValue: number;
+    score?: number;
+    color?: string;
+    description?: string;
+}
+type KpiGrades = KpiGrade[];
+declare const KpiGradeEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class KpiGradeEditor extends KpiGradeEditor_base {
+    static styles: import("lit").CSSResult[];
+    kpi: any;
+    grades: KpiGrades;
+    gristConfig: any;
+    grist: DataGrist;
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    fetchHandler({ page, limit, sorters }: FetchOption): Promise<{
+        total: number;
+        records: KpiGrades;
+    }>;
+    _updateGrades(): Promise<void>;
+    _validateGrades(): boolean;
+    _deleteGrades(): Promise<void>;
+}
+export {};

package/dist-client/pages/kpi/kpi-grade-editor.js

@@ -0,0 +1,165 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import deepEquals from 'lodash-es/isEqual';
+import gql from 'graphql-tag';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { DataGrist } from '@operato/data-grist/ox-grist.js';
+import { i18next, localize } from '@operato/i18n';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import { CommonHeaderStyles } from '@operato/styles';
+let KpiGradeEditor = class KpiGradeEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.kpi = { grades: [] };
+        this.grades = this.kpi?.grades || [];
+        this.gristConfig = null;
+    }
+    static { this.styles = [
+        CommonHeaderStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+    ]; }
+    async firstUpdated() {
+        if (this.kpi?.grades) {
+            this.grades = [...this.kpi.grades];
+        }
+        this.gristConfig = {
+            list: { fields: ['name', 'minValue', 'maxValue', 'score', 'color', 'description'] },
+            columns: [
+                { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },
+                { type: 'gutter', gutterName: 'sequence', fixed: true },
+                { type: 'gutter', gutterName: 'button', fixed: true, icon: 'add', handlers: { click: 'record-copy' } },
+                { type: 'gutter', gutterName: 'button', fixed: true, icon: 'arrow_upward', handlers: { click: 'move-up' } },
+                { type: 'gutter', gutterName: 'button', fixed: true, icon: 'arrow_downward', handlers: { click: 'move-down' } },
+                { type: 'string', name: 'name', header: '등급명', record: { editable: true }, width: 100 },
+                { type: 'number', name: 'minValue', header: '최소값', record: { editable: true }, width: 100 },
+                { type: 'number', name: 'maxValue', header: '최대값', record: { editable: true }, width: 100 },
+                { type: 'number', name: 'score', header: '점수', record: { editable: true }, width: 80 },
+                { type: 'color', name: 'color', header: '색상', record: { editable: true }, width: 100 },
+                { type: 'string', name: 'description', header: '설명', record: { editable: true }, width: 200 }
+            ],
+            rows: { selectable: { multiple: true } },
+            pagination: { infinite: true }
+        };
+    }
+    render() {
+        return html `
+      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+      <div class="footer">
+        <div filler></div>
+        <button danger @click=${this._deleteGrades.bind(this)}>
+          <md-icon>delete</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button done type="button" @click=${this._updateGrades}><md-icon>save</md-icon>저장</button>
+      </div>
+    `;
+    }
+    async fetchHandler({ page, limit, sorters = [] }) {
+        return {
+            total: this.grades.length,
+            records: this.grades
+        };
+    }
+    async _updateGrades() {
+        this.grades = this.grist.dirtyData.records
+            .map(patch => {
+            const { name, minValue, maxValue, score, color, description } = patch;
+            return { name, minValue, maxValue, score, color, description };
+        })
+            .sort((a, b) => a.minValue - b.minValue);
+        if (!this._validateGrades()) {
+            return;
+        }
+        if (!deepEquals(this.kpi?.grades, this.grades)) {
+            try {
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation ($id: String!, $patch: KpiPatch!) {
+              updateKpi(id: $id, patch: $patch) {
+                id
+                name
+                grades
+              }
+            }
+          `,
+                    variables: {
+                        id: this.kpi.id,
+                        patch: { grades: this.grades }
+                    }
+                });
+                this.grades = response.data.updateKpi.grades;
+                this.grist.fetch();
+            }
+            catch (error) {
+                notify({ message: '등급 저장 중 오류가 발생했습니다.' });
+            }
+        }
+    }
+    _validateGrades() {
+        if (this.grades.length === 0) {
+            notify({ message: '최소 1개 이상의 등급을 설정해야 합니다.' });
+            return false;
+        }
+        const names = this.grades.map(g => g.name);
+        const uniqueNames = new Set(names);
+        if (names.length !== uniqueNames.size) {
+            notify({ message: '등급명이 중복되었습니다.' });
+            return false;
+        }
+        for (let i = 0; i < this.grades.length; i++) {
+            const grade = this.grades[i];
+            if (grade.minValue >= grade.maxValue) {
+                notify({ message: `등급 "${grade.name}"의 최소값이 최대값보다 크거나 같습니다.` });
+                return false;
+            }
+            if (i > 0) {
+                const prevGrade = this.grades[i - 1];
+                if (prevGrade.maxValue !== grade.minValue) {
+                    notify({ message: `등급 "${prevGrade.name}"과 "${grade.name}" 사이에 간격이 있습니다.` });
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    async _deleteGrades() {
+        this.grist.deleteSelectedRecords(true);
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], KpiGradeEditor.prototype, "kpi", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiGradeEditor.prototype, "grades", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiGradeEditor.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], KpiGradeEditor.prototype, "grist", void 0);
+KpiGradeEditor = __decorate([
+    customElement('kpi-grade-editor')
+], KpiGradeEditor);
+export { KpiGradeEditor };
+//# sourceMappingURL=kpi-grade-editor.js.map

package/dist-client/pages/kpi/kpi-grade-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-grade-editor.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-grade-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\nimport '@operato/data-grist/ox-grist.js'\nimport deepEquals from 'lodash-es/isEqual'\n\nimport gql from 'graphql-tag'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state, query } from 'lit/decorators.js'\nimport { DataGrist } from '@operato/data-grist/ox-grist.js'\nimport { i18next, localize } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { FetchOption } from '@operato/data-grist'\nimport { CommonHeaderStyles } from '@operato/styles'\n\ninterface KpiGrade {\n  name: string\n  minValue: number\n  maxValue: number\n  score?: number\n  color?: string\n  description?: string\n}\n\ntype KpiGrades = KpiGrade[]\n\n@customElement('kpi-grade-editor')\nexport class KpiGradeEditor extends localize(i18next)(LitElement) {\n  static styles = [\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) kpi: any = { grades: [] }\n\n  @state() grades: KpiGrades = this.kpi?.grades || []\n  @state() gristConfig: any = null\n  @query('ox-grist') grist!: DataGrist\n\n  async firstUpdated() {\n    if (this.kpi?.grades) {\n      this.grades = [...this.kpi.grades]\n    }\n\n    this.gristConfig = {\n      list: { fields: ['name', 'minValue', 'maxValue', 'score', 'color', 'description'] },\n      columns: [\n        { type: 'gutter', gutterName: 'row-selector', multiple: true, fixed: true },\n        { type: 'gutter', gutterName: 'sequence', fixed: true },\n        { type: 'gutter', gutterName: 'button', fixed: true, icon: 'add', handlers: { click: 'record-copy' } },\n        { type: 'gutter', gutterName: 'button', fixed: true, icon: 'arrow_upward', handlers: { click: 'move-up' } },\n        { type: 'gutter', gutterName: 'button', fixed: true, icon: 'arrow_downward', handlers: { click: 'move-down' } },\n        { type: 'string', name: 'name', header: '등급명', record: { editable: true }, width: 100 },\n        { type: 'number', name: 'minValue', header: '최소값', record: { editable: true }, width: 100 },\n        { type: 'number', name: 'maxValue', header: '최대값', record: { editable: true }, width: 100 },\n        { type: 'number', name: 'score', header: '점수', record: { editable: true }, width: 80 },\n        { type: 'color', name: 'color', header: '색상', record: { editable: true }, width: 100 },\n        { type: 'string', name: 'description', header: '설명', record: { editable: true }, width: 200 }\n      ],\n      rows: { selectable: { multiple: true } },\n      pagination: { infinite: true }\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>\n      <div class=\"footer\">\n        <div filler></div>\n        <button danger @click=${this._deleteGrades.bind(this)}>\n          <md-icon>delete</md-icon>${i18next.t('button.delete')}\n        </button>\n        <button done type=\"button\" @click=${this._updateGrades}><md-icon>save</md-icon>저장</button>\n      </div>\n    `\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }: FetchOption) {\n    return {\n      total: this.grades.length,\n      records: this.grades\n    }\n  }\n\n  async _updateGrades() {\n    this.grades = this.grist.dirtyData.records\n      .map(patch => {\n        const { name, minValue, maxValue, score, color, description } = patch\n        return { name, minValue, maxValue, score, color, description }\n      })\n      .sort((a, b) => a.minValue - b.minValue) as any\n\n    if (!this._validateGrades()) {\n      return\n    }\n\n    if (!deepEquals(this.kpi?.grades, this.grades)) {\n      try {\n        const response = await client.mutate({\n          mutation: gql`\n            mutation ($id: String!, $patch: KpiPatch!) {\n              updateKpi(id: $id, patch: $patch) {\n                id\n                name\n                grades\n              }\n            }\n          `,\n          variables: {\n            id: this.kpi.id,\n            patch: { grades: this.grades }\n          }\n        })\n\n        this.grades = response.data.updateKpi.grades\n        this.grist.fetch()\n      } catch (error) {\n        notify({ message: '등급 저장 중 오류가 발생했습니다.' })\n      }\n    }\n  }\n\n  _validateGrades(): boolean {\n    if (this.grades.length === 0) {\n      notify({ message: '최소 1개 이상의 등급을 설정해야 합니다.' })\n      return false\n    }\n    const names = this.grades.map(g => g.name)\n    const uniqueNames = new Set(names)\n    if (names.length !== uniqueNames.size) {\n      notify({ message: '등급명이 중복되었습니다.' })\n      return false\n    }\n    for (let i = 0; i < this.grades.length; i++) {\n      const grade = this.grades[i]\n      if (grade.minValue >= grade.maxValue) {\n        notify({ message: `등급 \"${grade.name}\"의 최소값이 최대값보다 크거나 같습니다.` })\n        return false\n      }\n      if (i > 0) {\n        const prevGrade = this.grades[i - 1]\n        if (prevGrade.maxValue !== grade.minValue) {\n          notify({ message: `등급 \"${prevGrade.name}\"과 \"${grade.name}\" 사이에 간격이 있습니다.` })\n          return false\n        }\n      }\n    }\n    return true\n  }\n\n  async _deleteGrades() {\n    this.grist.deleteSelectedRecords(true)\n  }\n}\n"]}