@dssp/supervision 1.0.0-alpha.7 → 1.0.0-alpha.74

package/dist-client/pages/building-inspection/component/image-preview-popup.js

@@ -0,0 +1,348 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/elevated-button.js';
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+let ImagePreviewPopup = class ImagePreviewPopup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.images = [];
+        this.currentIndex = 0;
+    }
+    render() {
+        var _a;
+        const currentImage = this.images[this.currentIndex];
+        const hasMultipleImages = this.images.length > 1;
+        return html `
+      ${(currentImage === null || currentImage === void 0 ? void 0 : currentImage.previewTitle)
+            ? html `
+            <div class="inspection-header">
+              <div class="inspection-name">${currentImage.previewTitle}</div>
+            </div>
+          `
+            : ''}
+
+      <div body>
+        ${hasMultipleImages
+            ? html `
+              <button class="navigation-button prev" @click=${this._previousImage} ?disabled=${this.currentIndex === 0}>
+                <md-icon>chevron_left</md-icon>
+              </button>
+              <button
+                class="navigation-button next"
+                @click=${this._nextImage}
+                ?disabled=${this.currentIndex === this.images.length - 1}
+              >
+                <md-icon>chevron_right</md-icon>
+              </button>
+            `
+            : ''}
+
+        <div class="image-container">
+          ${currentImage
+            ? html `
+                <img
+                  class="zoomable-image"
+                  src="${ifDefined(currentImage.fullpath)}"
+                  alt="${ifDefined(currentImage.name)}"
+                  @load=${this._initImageZoom}
+                  @error=${this._onImageError}
+                />
+                <div class="image-info">
+                  ${currentImage.name || ((_a = currentImage.checklistItem) === null || _a === void 0 ? void 0 : _a.name) || ''}
+                  ${hasMultipleImages ? html ` (${this.currentIndex + 1}/${this.images.length})` : ''}
+                </div>
+              `
+            : html `<div class="error-message">표시할 이미지가 없습니다.</div>`}
+        </div>
+      </div>
+
+      <div class="button-container">
+        <md-elevated-button @click=${this._close}> <md-icon slot="icon">close</md-icon>닫기 </md-elevated-button>
+      </div>
+    `;
+    }
+    _previousImage() {
+        if (this.currentIndex > 0) {
+            this.currentIndex--;
+            this.requestUpdate();
+        }
+    }
+    _nextImage() {
+        if (this.currentIndex < this.images.length - 1) {
+            this.currentIndex++;
+            this.requestUpdate();
+        }
+    }
+    _close() {
+        history.back();
+    }
+    _onImageError(e) {
+        const target = e.target;
+        target.style.display = 'none';
+        const container = target.parentElement;
+        container.innerHTML += '<div class="error-message">이미지를 불러올 수 없습니다.</div>';
+    }
+    _initImageZoom(e) {
+        const img = e.target;
+        let scale = 1;
+        let translateX = 0;
+        let translateY = 0;
+        let isDragging = false;
+        let lastTouchDistance = 0;
+        let lastTouchX = 0;
+        let lastTouchY = 0;
+        const updateTransform = () => {
+            img.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`;
+        };
+        const resetTransform = () => {
+            scale = 1;
+            translateX = 0;
+            translateY = 0;
+            updateTransform();
+        };
+        // 터치 시작
+        img.addEventListener('touchstart', event => {
+            event.preventDefault();
+            if (event.touches.length === 1) {
+                // 단일 터치 - 드래그 시작
+                isDragging = true;
+                lastTouchX = event.touches[0].clientX;
+                lastTouchY = event.touches[0].clientY;
+            }
+            else if (event.touches.length === 2) {
+                // 멀티 터치 - 핀치 줌 시작
+                isDragging = false;
+                const touch1 = event.touches[0];
+                const touch2 = event.touches[1];
+                lastTouchDistance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
+            }
+        });
+        // 터치 이동
+        img.addEventListener('touchmove', event => {
+            event.preventDefault();
+            if (event.touches.length === 1 && isDragging && scale > 1) {
+                // 드래그
+                const currentX = event.touches[0].clientX;
+                const currentY = event.touches[0].clientY;
+                const deltaX = currentX - lastTouchX;
+                const deltaY = currentY - lastTouchY;
+                translateX += deltaX / scale;
+                translateY += deltaY / scale;
+                lastTouchX = currentX;
+                lastTouchY = currentY;
+                updateTransform();
+            }
+            else if (event.touches.length === 2) {
+                // 핀치 줌
+                const touch1 = event.touches[0];
+                const touch2 = event.touches[1];
+                const currentDistance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2));
+                if (lastTouchDistance > 0) {
+                    const scaleChange = currentDistance / lastTouchDistance;
+                    const newScale = scale * scaleChange;
+                    // 최소/최대 배율 제한
+                    if (newScale >= 0.5 && newScale <= 5) {
+                        scale = newScale;
+                        updateTransform();
+                    }
+                }
+                lastTouchDistance = currentDistance;
+            }
+        });
+        // 터치 끝
+        img.addEventListener('touchend', event => {
+            event.preventDefault();
+            isDragging = false;
+            if (event.touches.length === 0) {
+                // 모든 터치가 끝났을 때 - 경계 체크 및 보정
+                if (scale < 1) {
+                    resetTransform();
+                }
+            }
+        });
+        // 더블 탭으로 줌 토글
+        let lastTapTime = 0;
+        img.addEventListener('touchend', event => {
+            const currentTime = new Date().getTime();
+            const tapLength = currentTime - lastTapTime;
+            if (tapLength < 500 && tapLength > 0 && event.touches.length === 0) {
+                if (scale === 1) {
+                    scale = 2;
+                    updateTransform();
+                }
+                else {
+                    resetTransform();
+                }
+            }
+            lastTapTime = currentTime;
+        });
+        // 마우스 휠 지원 (데스크톱)
+        img.addEventListener('wheel', event => {
+            event.preventDefault();
+            const delta = event.deltaY > 0 ? 0.9 : 1.1;
+            const newScale = scale * delta;
+            if (newScale >= 0.5 && newScale <= 5) {
+                scale = newScale;
+                updateTransform();
+            }
+        });
+        // 키보드 네비게이션 지원
+        const handleKeyPress = (event) => {
+            if (event.key === 'ArrowLeft') {
+                this._previousImage();
+            }
+            else if (event.key === 'ArrowRight') {
+                this._nextImage();
+            }
+        };
+        document.addEventListener('keydown', handleKeyPress);
+        // 컴포넌트가 제거될 때 이벤트 리스너 정리
+        const cleanup = () => {
+            document.removeEventListener('keydown', handleKeyPress);
+        };
+        this._cleanup = cleanup;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._cleanup) {
+            ;
+            this._cleanup();
+        }
+    }
+};
+ImagePreviewPopup.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        width: 100%;
+        height: 100%;
+      }
+
+      .inspection-header {
+        background-color: #f8f9fa;
+        color: #495057;
+        padding: 12px 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border-bottom: 1px solid #dee2e6;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+
+      .inspection-name {
+        font-size: 16px;
+        font-weight: 700;
+        color: #212529;
+      }
+
+      div[body] {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+        touch-action: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .navigation-button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 10;
+        background-color: rgba(0, 0, 0, 0.7);
+        color: white;
+        border: none;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      .navigation-button:hover {
+        background-color: rgba(0, 0, 0, 0.9);
+      }
+
+      .navigation-button:disabled {
+        background-color: rgba(0, 0, 0, 0.3);
+        cursor: not-allowed;
+      }
+
+      .navigation-button.prev {
+        left: 20px;
+      }
+
+      .navigation-button.next {
+        right: 20px;
+      }
+
+      .image-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+      }
+
+      .zoomable-image {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        transform-origin: center center;
+        transition: transform 0.1s ease-out;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .image-info {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        padding: 10px 20px;
+        border-radius: 20px;
+        font-size: 14px;
+        z-index: 5;
+      }
+
+      .error-message {
+        padding: 40px;
+        text-align: center;
+        color: #666;
+        font-size: 16px;
+      }
+
+      .button-container {
+        display: flex;
+        justify-content: center;
+        padding: 15px;
+        border-top: 1px solid #ddd;
+        background-color: #f9f9f9;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], ImagePreviewPopup.prototype, "images", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], ImagePreviewPopup.prototype, "currentIndex", void 0);
+ImagePreviewPopup = __decorate([
+    customElement('image-preview-popup')
+], ImagePreviewPopup);
+export { ImagePreviewPopup };
+//# sourceMappingURL=image-preview-popup.js.map

package/dist-client/pages/building-inspection/component/image-preview-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-preview-popup.js","sourceRoot":"","sources":["../../../../client/pages/building-inspection/component/image-preview-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\n@customElement('image-preview-popup')\nexport class ImagePreviewPopup extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        width: 100%;\n        height: 100%;\n      }\n\n      .inspection-header {\n        background-color: #f8f9fa;\n        color: #495057;\n        padding: 12px 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        border-bottom: 1px solid #dee2e6;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n      }\n\n      .inspection-name {\n        font-size: 16px;\n        font-weight: 700;\n        color: #212529;\n      }\n\n      div[body] {\n        flex: 1;\n        overflow: hidden;\n        position: relative;\n        touch-action: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .navigation-button {\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 10;\n        background-color: rgba(0, 0, 0, 0.7);\n        color: white;\n        border: none;\n        border-radius: 50%;\n        width: 50px;\n        height: 50px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        transition: background-color 0.2s;\n      }\n\n      .navigation-button:hover {\n        background-color: rgba(0, 0, 0, 0.9);\n      }\n\n      .navigation-button:disabled {\n        background-color: rgba(0, 0, 0, 0.3);\n        cursor: not-allowed;\n      }\n\n      .navigation-button.prev {\n        left: 20px;\n      }\n\n      .navigation-button.next {\n        right: 20px;\n      }\n\n      .image-container {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n      }\n\n      .zoomable-image {\n        max-width: 100%;\n        max-height: 100%;\n        object-fit: contain;\n        transform-origin: center center;\n        transition: transform 0.1s ease-out;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .image-info {\n        position: absolute;\n        bottom: 20px;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: rgba(0, 0, 0, 0.5);\n        color: white;\n        padding: 10px 20px;\n        border-radius: 20px;\n        font-size: 14px;\n        z-index: 5;\n      }\n\n      .error-message {\n        padding: 40px;\n        text-align: center;\n        color: #666;\n        font-size: 16px;\n      }\n\n      .button-container {\n        display: flex;\n        justify-content: center;\n        padding: 15px;\n        border-top: 1px solid #ddd;\n        background-color: #f9f9f9;\n      }\n    `\n  ]\n\n  @property({ type: Array }) images: any[] = []\n  @property({ type: Number }) currentIndex: number = 0\n\n  render() {\n    const currentImage = this.images[this.currentIndex]\n    const hasMultipleImages = this.images.length > 1\n\n    return html`\n      ${currentImage?.previewTitle\n        ? html`\n            <div class=\"inspection-header\">\n              <div class=\"inspection-name\">${currentImage.previewTitle}</div>\n            </div>\n          `\n        : ''}\n\n      <div body>\n        ${hasMultipleImages\n          ? html`\n              <button class=\"navigation-button prev\" @click=${this._previousImage} ?disabled=${this.currentIndex === 0}>\n                <md-icon>chevron_left</md-icon>\n              </button>\n              <button\n                class=\"navigation-button next\"\n                @click=${this._nextImage}\n                ?disabled=${this.currentIndex === this.images.length - 1}\n              >\n                <md-icon>chevron_right</md-icon>\n              </button>\n            `\n          : ''}\n\n        <div class=\"image-container\">\n          ${currentImage\n            ? html`\n                <img\n                  class=\"zoomable-image\"\n                  src=\"${ifDefined(currentImage.fullpath)}\"\n                  alt=\"${ifDefined(currentImage.name)}\"\n                  @load=${this._initImageZoom}\n                  @error=${this._onImageError}\n                />\n                <div class=\"image-info\">\n                  ${currentImage.name || currentImage.checklistItem?.name || ''}\n                  ${hasMultipleImages ? html` (${this.currentIndex + 1}/${this.images.length})` : ''}\n                </div>\n              `\n            : html`<div class=\"error-message\">표시할 이미지가 없습니다.</div>`}\n        </div>\n      </div>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=${this._close}> <md-icon slot=\"icon\">close</md-icon>닫기 </md-elevated-button>\n      </div>\n    `\n  }\n\n  private _previousImage() {\n    if (this.currentIndex > 0) {\n      this.currentIndex--\n      this.requestUpdate()\n    }\n  }\n\n  private _nextImage() {\n    if (this.currentIndex < this.images.length - 1) {\n      this.currentIndex++\n      this.requestUpdate()\n    }\n  }\n\n  private _close() {\n    history.back()\n  }\n\n  private _onImageError(e: Event) {\n    const target = e.target as HTMLImageElement\n    target.style.display = 'none'\n    const container = target.parentElement!\n    container.innerHTML += '<div class=\"error-message\">이미지를 불러올 수 없습니다.</div>'\n  }\n\n  private _initImageZoom(e: Event) {\n    const img = e.target as HTMLImageElement\n    let scale = 1\n    let translateX = 0\n    let translateY = 0\n    let isDragging = false\n    let lastTouchDistance = 0\n    let lastTouchX = 0\n    let lastTouchY = 0\n\n    const updateTransform = () => {\n      img.style.transform = `scale(${scale}) translate(${translateX}px, ${translateY}px)`\n    }\n\n    const resetTransform = () => {\n      scale = 1\n      translateX = 0\n      translateY = 0\n      updateTransform()\n    }\n\n    // 터치 시작\n    img.addEventListener('touchstart', event => {\n      event.preventDefault()\n\n      if (event.touches.length === 1) {\n        // 단일 터치 - 드래그 시작\n        isDragging = true\n        lastTouchX = event.touches[0].clientX\n        lastTouchY = event.touches[0].clientY\n      } else if (event.touches.length === 2) {\n        // 멀티 터치 - 핀치 줌 시작\n        isDragging = false\n        const touch1 = event.touches[0]\n        const touch2 = event.touches[1]\n        lastTouchDistance = Math.sqrt(Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2))\n      }\n    })\n\n    // 터치 이동\n    img.addEventListener('touchmove', event => {\n      event.preventDefault()\n\n      if (event.touches.length === 1 && isDragging && scale > 1) {\n        // 드래그\n        const currentX = event.touches[0].clientX\n        const currentY = event.touches[0].clientY\n        const deltaX = currentX - lastTouchX\n        const deltaY = currentY - lastTouchY\n\n        translateX += deltaX / scale\n        translateY += deltaY / scale\n\n        lastTouchX = currentX\n        lastTouchY = currentY\n        updateTransform()\n      } else if (event.touches.length === 2) {\n        // 핀치 줌\n        const touch1 = event.touches[0]\n        const touch2 = event.touches[1]\n        const currentDistance = Math.sqrt(\n          Math.pow(touch2.clientX - touch1.clientX, 2) + Math.pow(touch2.clientY - touch1.clientY, 2)\n        )\n\n        if (lastTouchDistance > 0) {\n          const scaleChange = currentDistance / lastTouchDistance\n          const newScale = scale * scaleChange\n\n          // 최소/최대 배율 제한\n          if (newScale >= 0.5 && newScale <= 5) {\n            scale = newScale\n            updateTransform()\n          }\n        }\n\n        lastTouchDistance = currentDistance\n      }\n    })\n\n    // 터치 끝\n    img.addEventListener('touchend', event => {\n      event.preventDefault()\n      isDragging = false\n\n      if (event.touches.length === 0) {\n        // 모든 터치가 끝났을 때 - 경계 체크 및 보정\n        if (scale < 1) {\n          resetTransform()\n        }\n      }\n    })\n\n    // 더블 탭으로 줌 토글\n    let lastTapTime = 0\n    img.addEventListener('touchend', event => {\n      const currentTime = new Date().getTime()\n      const tapLength = currentTime - lastTapTime\n\n      if (tapLength < 500 && tapLength > 0 && event.touches.length === 0) {\n        if (scale === 1) {\n          scale = 2\n          updateTransform()\n        } else {\n          resetTransform()\n        }\n      }\n\n      lastTapTime = currentTime\n    })\n\n    // 마우스 휠 지원 (데스크톱)\n    img.addEventListener('wheel', event => {\n      event.preventDefault()\n      const delta = event.deltaY > 0 ? 0.9 : 1.1\n      const newScale = scale * delta\n\n      if (newScale >= 0.5 && newScale <= 5) {\n        scale = newScale\n        updateTransform()\n      }\n    })\n\n    // 키보드 네비게이션 지원\n    const handleKeyPress = (event: KeyboardEvent) => {\n      if (event.key === 'ArrowLeft') {\n        this._previousImage()\n      } else if (event.key === 'ArrowRight') {\n        this._nextImage()\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress)\n\n    // 컴포넌트가 제거될 때 이벤트 리스너 정리\n    const cleanup = () => {\n      document.removeEventListener('keydown', handleKeyPress)\n    }\n\n    // 나중에 정리할 수 있도록 참조 저장\n    ;(this as any)._cleanup = cleanup\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if ((this as any)._cleanup) {\n      ;(this as any)._cleanup()\n    }\n  }\n}\n"]}

package/dist-client/pages/building-inspection/component/inspection-document/inspection-request-document.d.ts

@@ -0,0 +1,25 @@
+import '@material/web/button/elevated-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/button/outlined-button.js';
+import { LitElement } from 'lit';
+import './photo-album-popup';
+export declare enum InspectionMode {
+    EDIT = "EDIT",
+    VIEW = "VIEW"
+}
+export declare class InspectionRequestDocument extends LitElement {
+    static styles: import("lit").CSSResult[];
+    checklist: any;
+    buildingInspection: any;
+    mode: InspectionMode;
+    render(): import("lit-html").TemplateResult<1>;
+    private _parseDate;
+    private _formatDate;
+    private _formatDateTime;
+    private _formatDateTimeForInput;
+    private _onRequestDateChange;
+    private _onDateInputClick;
+    private _onInspectionMemoChange;
+    private _onNameListUpload;
+    private _onConfirm;
+}