@dssp/supervision 1.0.0-alpha.47 → 1.0.0-alpha.49

package/dist-client/pages/building-inspection/building-inspection-detail-camera.js

@@ -1,7 +1,5 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-switch.js';
-import '@operato/mini-map/ox-zoomable-image.js';
 import '@material/web/progress/circular-progress.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
@@ -9,77 +7,17 @@ import { customElement, state, query } from 'lit/decorators.js';
 import { PageView } from '@operato/shell';
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
 import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
 import './component/building-inspection-detail-header';
 let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
     constructor() {
         super(...arguments);
-        this.KEYPOINT_RULER_API_BASE_URL = 'https://hatiolab-korea-uni.ettisoft.com';
         this.project = {};
         this.buildingInspection = {};
         this.buildingInspectionId = '';
-        this.capturedVideoUrl = null;
-        this.videoFile = null;
-        this.frame = null;
-        this.analyzing = false;
-        this.selectedPoints = {
-            x1: null,
-            y1: null,
-            x2: null,
-            y2: null
-        };
-        this.frameNaturalWidth = 0;
-        this.frameNaturalHeight = 0;
-        this.displayedImageRect = null;
-        this.distance = null;
-        this.unit = null;
-        this._onImageLoad = () => {
-            if (!this.frameImageEl || !this.imageWrapperEl)
-                return;
-            const img = this.frameImageEl;
-            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
-            const imgRect = img.getBoundingClientRect();
-            this.frameNaturalWidth = img.naturalWidth;
-            this.frameNaturalHeight = img.naturalHeight;
-            this.displayedImageRect = {
-                width: imgRect.width,
-                height: imgRect.height,
-                left: imgRect.left - wrapperRect.left,
-                top: imgRect.top - wrapperRect.top
-            };
-        };
-        this._onImageClick = (event) => {
-            if (!this.frameImageEl || !this.imageWrapperEl)
-                return;
-            const imgRect = this.frameImageEl.getBoundingClientRect();
-            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
-            const clientX = event.clientX;
-            const clientY = event.clientY;
-            // Ignore clicks outside the displayed image area
-            if (clientX < imgRect.left || clientX > imgRect.right || clientY < imgRect.top || clientY > imgRect.bottom) {
-                return;
-            }
-            const relativeX = clientX - imgRect.left;
-            const relativeY = clientY - imgRect.top;
-            const xOnNatural = Math.round((relativeX * this.frameNaturalWidth) / imgRect.width);
-            const yOnNatural = Math.round((relativeY * this.frameNaturalHeight) / imgRect.height);
-            if (this.selectedPoints.x1 === null || this.selectedPoints.y1 === null) {
-                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x1: xOnNatural, y1: yOnNatural });
-            }
-            else if (this.selectedPoints.x2 === null || this.selectedPoints.y2 === null) {
-                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x2: xOnNatural, y2: yOnNatural });
-            }
-            else {
-                // 세 번째 클릭부터는 초기화 후 첫 점으로 설정
-                this.selectedPoints = { x1: xOnNatural, y1: yOnNatural, x2: null, y2: null };
-            }
-            // Update displayed rect cache (in case layout changed)
-            this.displayedImageRect = {
-                width: imgRect.width,
-                height: imgRect.height,
-                left: imgRect.left - wrapperRect.left,
-                top: imgRect.top - wrapperRect.top
-            };
-        };
+        this.capturedImageUrl = null;
+        this.imageFile = null;
+        this.isSaved = false;
     }
     get context() {
         return {
@@ -87,7 +25,7 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return html `
       <building-inspection-detail-header
         .buildingInspectionId=${(_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.id}
@@ -98,57 +36,25 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
       ></building-inspection-detail-header>
 
       <div body>
-        <!-- Preview selected or recorded video -->
         <div preview>
-          <!-- analyzing 로딩 중일 때 -->
-          ${this.analyzing
-            ? html `<div class="loading-container">
-                <md-circular-progress indeterminate></md-circular-progress>
-                <div class="loading-text">분석 중...</div>
-              </div>`
-            : // 동영상 분석 완료 단일 프레임 표시
-                this.frame
-                    ? html `
-                  <div class="image-wrapper" @click=${this._onImageClick}>
-                    <img
-                      id="frameImage"
-                      src="${this.KEYPOINT_RULER_API_BASE_URL + ((_j = this.frame) === null || _j === void 0 ? void 0 : _j.download_url)}"
-                      alt="frame"
-                      loading="eager"
-                      @load=${this._onImageLoad}
-                    />
-                    ${this._renderMarkers()}
-                  </div>
-                `
-                    : // 동영상 선택 후 동영상 프리뷰
-                        this.capturedVideoUrl
-                            ? html `<video src=${this.capturedVideoUrl} controls playsinline></video>`
-                            : // 초기 상태, 동영상 선택 전
-                                html `<md-icon>videocam</md-icon>`}
+          <div class="image-wrapper">
+            ${this.capturedImageUrl
+            ? html `<img id="imageImage" src="${this.capturedImageUrl}" alt="image" />`
+            : html `<md-icon>add_a_photo</md-icon>`}
+          </div>
         </div>
 
         <div controls>
-          <span class="controls-title">동영상 촬영</span>
+          <span class="controls-title">사진 촬영</span>
 
-          <!-- Camera shutter button (record video) -->
           <div class="camera-shutter">
             <md-icon>camera</md-icon>
-            <input id="cameraInput" type="file" accept="video/*" capture @change="${this._onVideoSelected}" />
+            <input id="imageInput" type="file" accept="image/*" @change="${this._onImageSelected}" />
           </div>
 
           <!-- Action buttons -->
           <div action-buttons>
-            ${this.frame
-            ? html `
-                  <button class="photo" ?disabled=${this.analyzing || !this._hasTwoPoints()} @click=${this._onAnalyzePhoto}>
-                    사진 분석
-                  </button>
-                `
-            : html `
-                  <button class="save" ?disabled=${this.analyzing || !this.capturedVideoUrl} @click=${this._onAnalyzeVideo}>
-                    동영상 분석
-                  </button>
-                `}
+            <button class="save" ?disabled=${!this.imageFile || this.isSaved} @click=${this._savePhoto}>사진 저장</button>
             <button class="retry" @click=${this._onRetry}>초기화</button>
           </div>
         </div>
@@ -158,6 +64,7 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
     async updated(changes) { }
     async pageUpdated(changes, lifecycle) {
         if (this.active) {
+            this._onRetry();
             this.buildingInspectionId = lifecycle.resourceId || '';
             await this.initBuildingInspection(this.buildingInspectionId);
         }
@@ -171,20 +78,12 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
             id
             status
             requestDate
-            drawingMarker
             checklist {
-              location
-              inspectionDrawingType
+              id
             }
             buildingLevel {
               id
               floor
-              mainDrawing {
-                id
-                name
-                fullpath
-              }
-              mainDrawingImage
               building {
                 id
                 name
@@ -223,163 +122,62 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
             return;
         this.project = response.data.project;
     }
-    _onVideoSelected(event) {
+    _onImageSelected(event) {
         var _a;
         const input = event.target;
         const file = (_a = input === null || input === void 0 ? void 0 : input.files) === null || _a === void 0 ? void 0 : _a[0];
         if (!file)
             return;
         // Only allow video files
-        if (!file.type.startsWith('video/')) {
-            console.warn('선택된 파일이 동영상이 아닙니다.');
+        if (!file.type.startsWith('image/')) {
+            console.warn('선택된 파일이 이미지가 아닙니다.');
             return;
         }
         // Revoke old object URL if exists
-        if (this.capturedVideoUrl) {
-            URL.revokeObjectURL(this.capturedVideoUrl);
-        }
-        this.videoFile = file;
-        this.capturedVideoUrl = URL.createObjectURL(file);
-    }
-    async _onAnalyzeVideo() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (!this.videoFile) {
-            console.warn('선택된 동영상이 없습니다.');
-            return;
-        }
-        try {
-            this.analyzing = true;
-            const form = new FormData();
-            form.append('files', this.videoFile, this.videoFile.name);
-            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
-                method: 'POST',
-                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
-                body: form
-            });
-            const data = await response.json();
-            this.frame = {
-                file_id: (_b = (_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.output_files[0]) === null || _b === void 0 ? void 0 : _b.file_id,
-                download_url: (_d = (_c = data === null || data === void 0 ? void 0 : data.result) === null || _c === void 0 ? void 0 : _c.output_files[0]) === null || _d === void 0 ? void 0 : _d.download_url,
-                file_path: (_f = (_e = data === null || data === void 0 ? void 0 : data.result) === null || _e === void 0 ? void 0 : _e.frames[0]) === null || _f === void 0 ? void 0 : _f.file_path,
-                calibration: (_g = data === null || data === void 0 ? void 0 : data.result) === null || _g === void 0 ? void 0 : _g.calibration
-            };
-        }
-        catch (error) {
-            console.error('동영상 업로드 실패:', error);
-        }
-        finally {
-            this.analyzing = false;
+        if (this.capturedImageUrl) {
+            URL.revokeObjectURL(this.capturedImageUrl);
         }
+        this.imageFile = file;
+        this.capturedImageUrl = URL.createObjectURL(file);
+        this.isSaved = false; // 새 이미지 선택 시 저장 상태 초기화
     }
     _onRetry() {
         // Clear current selection and reopen camera
-        if (this.capturedVideoUrl) {
-            URL.revokeObjectURL(this.capturedVideoUrl);
+        if (this.capturedImageUrl) {
+            URL.revokeObjectURL(this.capturedImageUrl);
         }
-        this.capturedVideoUrl = null;
-        this.videoFile = null;
-        this.frame = null;
-        this.selectedPoints = { x1: null, y1: null, x2: null, y2: null };
-        this.displayedImageRect = null;
-        this.frameNaturalWidth = 0;
-        this.frameNaturalHeight = 0;
-        this.cameraInputEl.value = '';
-        this.distance = null;
-        this.unit = null;
-    }
-    _hasTwoPoints() {
-        const { x1, y1, x2, y2 } = this.selectedPoints;
-        return x1 !== null && y1 !== null && x2 !== null && y2 !== null;
-    }
-    _renderMarkers() {
-        if (!this.displayedImageRect)
-            return html ``;
-        const { left, top, width, height } = this.displayedImageRect;
-        const { x1, y1, x2, y2 } = this.selectedPoints;
-        const toDisplay = (x, y) => {
-            const dx = left + (x * width) / (this.frameNaturalWidth || 1);
-            const dy = top + (y * height) / (this.frameNaturalHeight || 1);
-            return { dx, dy };
-        };
-        return html `
-      ${x1 !== null && y1 !== null
-            ? (() => {
-                const p = toDisplay(x1, y1);
-                return html `<div class="point-marker point-1" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
-            })()
-            : ''}
-      ${x2 !== null && y2 !== null
-            ? (() => {
-                const p = toDisplay(x2, y2);
-                return html `<div class="point-marker point-2" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
-            })()
-            : ''}
-      ${this._hasTwoPoints()
-            ? (() => {
-                const p1 = toDisplay(x1, y1);
-                const p2 = toDisplay(x2, y2);
-                const x = Math.min(p1.dx, p2.dx);
-                const y = Math.min(p1.dy, p2.dy);
-                const w = Math.abs(p1.dx - p2.dx);
-                const h = Math.abs(p1.dy - p2.dy);
-                const cx = (p1.dx + p2.dx) / 2;
-                const cy = (p1.dy + p2.dy) / 2;
-                return html `
-              <svg class="line-overlay" style="left:${x}px; top:${y}px; width:${w}px; height:${h}px;">
-                <line
-                  x1=${p1.dx < p2.dx ? 0 : w}
-                  y1=${p1.dy < p2.dy ? 0 : h}
-                  x2=${p1.dx < p2.dx ? w : 0}
-                  y2=${p1.dy < p2.dy ? h : 0}
-                  stroke="#ff9800"
-                  stroke-width="3"
-                />
-              </svg>
-              ${this.distance !== null && this.unit
-                    ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.distance} ${this.unit}</div>`
-                    : ''}
-            `;
-            })()
-            : ''}
-    `;
+        this.capturedImageUrl = null;
+        this.imageFile = null;
+        this.isSaved = false; // 초기화 시 저장 상태도 리셋
+        this.imageInputEl.value = '';
     }
-    async _onAnalyzePhoto() {
-        if (!this.frame) {
-            console.warn('분석할 사진이 없습니다.');
+    async _savePhoto() {
+        var _a, _b, _c;
+        if (!this.imageFile) {
+            notify({ message: '사진을 선택한 후 저장할 수 있습니다.', level: 'warn' });
             return;
         }
-        if (!this._hasTwoPoints()) {
-            console.warn('두 점을 먼저 선택해 주세요.');
-            return;
-        }
-        try {
-            this.analyzing = true;
-            const payload = {
-                x1: this.selectedPoints.x1,
-                y1: this.selectedPoints.y1,
-                x2: this.selectedPoints.x2,
-                y2: this.selectedPoints.y2,
-                file_path: this.frame.file_path,
-                calibration: this.frame.calibration
-            };
-            const form = new FormData();
-            form.append('input', JSON.stringify(payload));
-            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
-                method: 'POST',
-                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
-                body: form
-            });
-            const result = await response.json();
-            const { distance, unit } = result.result || {};
-            this.distance = distance;
-            this.unit = unit;
-        }
-        catch (error) {
-            console.error('사진 분석 실패:', error);
+        const checklistId = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.checklist) === null || _b === void 0 ? void 0 : _b.id;
+        const file = this.imageFile;
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($attachments: [NewAttachment!]!) {
+          createAttachments(attachments: $attachments) {
+            id
+          }
         }
-        finally {
-            this.analyzing = false;
+      `,
+            variables: {
+                attachments: [{ file, refBy: checklistId, refType: 'Checklist', description: (_c = this.buildingInspection) === null || _c === void 0 ? void 0 : _c.status }]
+            },
+            context: { hasUpload: true }
+        });
+        if (!response.errors) {
+            notify({ message: '사진 대지를 저장하였습니다.', level: 'info' });
+            this.isSaved = true; // 저장 성공 시 상태 업데이트
+            return;
         }
+        return response.data.createAttachments;
     }
 };
 BuildingInspectionCamera.styles = [
@@ -431,119 +229,12 @@ BuildingInspectionCamera.styles = [
         --md-icon-size: 160px;
       }
 
-      .loading-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-      }
-
-      .loading-text {
-        font-size: 14px;
-        color: #666;
-      }
-
-      .frame-container {
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
-        min-height: 0;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        padding: 12px;
-      }
-
-      .frames-header {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-        font-size: 20px;
-        font-weight: 700;
-        color: #333;
-        text-align: center;
-        padding-block: 8px;
-      }
-
-      .frames-count {
-        font-size: 16px;
-        color: #777;
-        font-weight: 600;
-      }
-
-      .frames-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-        gap: 12px;
-      }
-
-      .frame-item {
-        border: 1px solid #ddd;
-        border-radius: 8px;
-        overflow: hidden;
-        background: #fff;
-        cursor: pointer;
-        transition:
-          box-shadow 0.2s,
-          transform 0.1s;
-      }
-
-      .frame-item:hover {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transform: translateY(-1px);
-      }
-
-      .frame-item img {
-        display: block;
-        width: 100%;
-        height: 120px;
-        object-fit: cover;
-      }
-
       .image-wrapper {
         position: relative;
         width: 100%;
         height: 100%;
         align-content: center;
-      }
-
-      .point-marker {
-        position: absolute;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        transform: translate(-50%, -50%);
-        pointer-events: none;
-        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
-      }
-
-      .point-1 {
-        background-color: #e53935;
-      }
-
-      .point-2 {
-        background-color: #1e88e5;
-      }
-
-      .line-overlay {
-        position: absolute;
-        pointer-events: none;
-      }
-
-      .distance-label {
-        position: absolute;
-        background: rgba(0, 0, 0, 0.7);
-        color: #fff;
-        font-size: 14px;
-        padding: 2px 6px;
-        border-radius: 4px;
-        transform: translate(-50%, -120%);
-        pointer-events: none;
-        white-space: nowrap;
+        text-align: center;
       }
 
       div[controls] {
@@ -561,20 +252,6 @@ BuildingInspectionCamera.styles = [
         gap: 15px;
       }
 
-      .switch-container {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        font-size: 24px;
-        font-weight: bold;
-      }
-
-      ox-input-switch {
-        --ox-simple-switch-fullwidth: 68px;
-        --ox-simple-switch-fullheight: 34px;
-        --ox-simple-switch-thumbnail-size: 34px;
-      }
-
       .camera-shutter {
         display: flex;
         justify-content: center;
@@ -627,16 +304,6 @@ BuildingInspectionCamera.styles = [
         background-color: #f0ad4e;
         color: white;
       }
-
-      button.photo {
-        background-color: #1e88e5;
-        color: white;
-
-        &:disabled {
-          background-color: #ccc;
-          cursor: default;
-        }
-      }
     `
 ];
 __decorate([
@@ -654,55 +321,19 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "capturedVideoUrl", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "videoFile", void 0);
+], BuildingInspectionCamera.prototype, "capturedImageUrl", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "frame", void 0);
+], BuildingInspectionCamera.prototype, "imageFile", void 0);
 __decorate([
     state(),
     __metadata("design:type", Boolean)
-], BuildingInspectionCamera.prototype, "analyzing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "selectedPoints", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Number)
-], BuildingInspectionCamera.prototype, "frameNaturalWidth", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Number)
-], BuildingInspectionCamera.prototype, "frameNaturalHeight", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "displayedImageRect", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "distance", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "unit", void 0);
-__decorate([
-    query('img#frameImage'),
-    __metadata("design:type", HTMLImageElement)
-], BuildingInspectionCamera.prototype, "frameImageEl", void 0);
-__decorate([
-    query('div.image-wrapper'),
-    __metadata("design:type", HTMLDivElement)
-], BuildingInspectionCamera.prototype, "imageWrapperEl", void 0);
+], BuildingInspectionCamera.prototype, "isSaved", void 0);
 __decorate([
-    query('#cameraInput'),
+    query('#imageInput'),
     __metadata("design:type", HTMLInputElement)
-], BuildingInspectionCamera.prototype, "cameraInputEl", void 0);
+], BuildingInspectionCamera.prototype, "imageInputEl", void 0);
 BuildingInspectionCamera = __decorate([
     customElement('building-inspection-detail-camera')
 ], BuildingInspectionCamera);