@dssp/supervision 0.0.28 → 0.0.30

package/client/pages/building-inspection/building-inspection-detail-camera.ts

@@ -0,0 +1,277 @@
+import '@material/web/icon/icon.js'
+import '@operato/input/ox-input-switch.js'
+import '@operato/mini-map/ox-zoomable-image.js'
+
+import gql from 'graphql-tag'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { PageView } from '@operato/shell'
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
+import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
+import { client } from '@operato/graphql'
+
+import './component/building-inspection-detail-header'
+
+@customElement('building-inspection-detail-camera')
+export class BuildingInspectionCamera extends PageView {
+  static styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css`
+      :host {
+        display: grid;
+        grid-template-rows: 75px auto;
+        color: #4e5055;
+        width: 100%;
+        background-color: #f7f7f7;
+        overflow-y: auto;
+      }
+
+      div[body] {
+        display: flex;
+        justify-items: center;
+        gap: var(--spacing-medium);
+        margin: var(--spacing-medium);
+      }
+
+      div[preview] {
+        flex: 1;
+        border: 2px solid #ddd;
+        border-radius: 10px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      div[preview] img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      div[preview] md-icon {
+        --md-icon-size: 160px;
+      }
+
+      div[controls] {
+        width: 240px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      div[action-buttons] {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .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;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+      }
+
+      .camera-shutter md-icon {
+        --md-icon-size: 100px;
+      }
+
+      .camera-shutter input {
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+      }
+
+      button {
+        padding: 10px 20px;
+        font-size: 16px;
+        border-radius: 5px;
+        border: none;
+        cursor: pointer;
+      }
+
+      button.save {
+        background-color: #4caf50;
+        color: white;
+      }
+
+      button.retry {
+        background-color: #f0ad4e;
+        color: white;
+      }
+
+      button.cancel {
+        background-color: #d9534f;
+        color: white;
+      }
+    `
+  ]
+
+  @state() project: any = {}
+  @state() buildingInspection: any = {}
+  @state() buildingInspectionId: string = ''
+  @state() capturedImage: string | null = null // For storing the captured image
+  @state() originImage: string | null = null
+
+  get context() {
+    return {
+      title: '검측 관리 상세 - 사진 촬영'
+    }
+  }
+
+  render() {
+    return html`
+      <building-inspection-detail-header
+        .buildingInspectionId=${this.buildingInspection?.id}
+        .buildingLevelId=${this.buildingInspection?.buildingLevel?.id}
+        .projectName=${this.project.name}
+        .buildingName=${this.buildingInspection?.buildingLevel?.building?.name}
+        .buildingLevelFloor=${this.buildingInspection?.buildingLevel?.floor}
+      ></building-inspection-detail-header>
+
+      <div body>
+        <!-- Display the captured image if available -->
+        <div preview>
+          ${this.capturedImage
+            ? html`<ox-zoomable-image src=${this.capturedImage} restrict-boundary></ox-zoomable-image>`
+            : html`<md-icon>photo_camera</md-icon>`}
+        </div>
+
+        <div controls>
+          <!-- AI toggle switch -->
+          <div class="switch-container">
+            <label>AI 기능</label>
+            <ox-input-switch type="checkbox" @change=${this.toggleAI} round></ox-input-switch>
+          </div>
+
+          <!-- Camera shutter button -->
+          <div class="camera-shutter">
+            <md-icon>camera</md-icon>
+            <input type="file" accept="image/*" capture @change="${this.handleImageCapture}" />
+          </div>
+
+          <!-- Action buttons -->
+          <div class="action-buttons">
+            <button class="save">저장</button>
+            <button class="retry">재촬영</button>
+            <button class="cancel" @click=${() => (this.capturedImage = this.originImage)}>취소</button>
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  protected async updated(changes: PropertyValues): Promise<void> {}
+
+  async pageUpdated(changes: any, lifecycle: PageLifecycle) {
+    if (this.active) {
+      this.buildingInspectionId = lifecycle.resourceId || ''
+      await this.initBuildingInspection(this.buildingInspectionId)
+    }
+  }
+
+  async initBuildingInspection(buildingInspectionId: string = '') {
+    const response = await client.query({
+      query: gql`
+        query BuildingInspection($buildingInspectionId: String!) {
+          buildingInspection(id: $buildingInspectionId) {
+            id
+            status
+            requestDate
+            drawingMarker
+            checklist {
+              location
+              inspectionDrawingType
+            }
+            buildingLevel {
+              id
+              floor
+              mainDrawing {
+                id
+                name
+                fullpath
+              }
+              mainDrawingImage
+              building {
+                id
+                name
+                buildingComplex {
+                  id
+                }
+              }
+            }
+          }
+        }
+      `,
+      variables: {
+        buildingInspectionId
+      }
+    })
+
+    if (response.errors) return
+
+    this.buildingInspection = response.data.buildingInspection
+
+    await this._getProjectByBuildingComplexId(this.buildingInspection?.buildingLevel?.building?.buildingComplex?.id)
+  }
+
+  private async _getProjectByBuildingComplexId(buildingComplexId) {
+    const response = await client.query({
+      query: gql`
+        query ProjectByBuildingComplexId($buildingComplexId: String!) {
+          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {
+            id
+            name
+          }
+        }
+      `,
+      variables: {
+        buildingComplexId
+      }
+    })
+
+    if (response.errors) return
+
+    this.project = response.data.project
+  }
+
+  private toggleAI(e: Event) {
+    const isChecked = (e.target as HTMLInputElement).checked
+    console.log(`AI 기능: ${isChecked ? 'ON' : 'OFF'}`)
+    // Implement additional AI functionality toggling if needed
+  }
+
+  private handleImageCapture(event: Event) {
+    const input = event.target as HTMLInputElement
+    if (input.files && input.files[0]) {
+      const reader = new FileReader()
+      reader.onload = e => {
+        this.capturedImage = e.target?.result as string
+      }
+      reader.readAsDataURL(input.files[0])
+    }
+  }
+}

package/client/pages/building-inspection/building-inspection-detail-drawing.ts

@@ -13,7 +13,7 @@ import { CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
 import { client } from '@operato/graphql'
 import { notify } from '@operato/layout'
-import { ImageProvider, Shape } from '@operato/image-marker'
+import { Shape } from '@operato/image-marker'
 
 import { DrawingImageProvider } from '@dssp/drawing/dist-client/drawing-management/drawing-image-provider.js'
 
@@ -122,7 +122,7 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
           const { id, type, symbol, box, dwgId } = JSON.parse(link)
           const [x, y, width, height] = box?.split(',').map(Number) || []
 
-          this.linkUrl = dwgId
+          this.linkUrl = `DWGID:${dwgId}`
           this.linkShapes = [
             {
               id: id!,
@@ -162,13 +162,29 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
   }
 
   protected async updated(changes: PropertyValues): Promise<void> {
-    if (changes.has('buildingInspection')) {
-      const dwgId = 'GA-3006' // this.buildingInspection?.buildingLevel?.mainDrawingImage || '/assets/images/img-drawing-default.png'
+    if (changes.has('buildingInspection') && this.buildingInspection?.checklist) {
+      // 1-1. 위치 정보 - 체크리스트에 들어가는 위치정보 텍스트
+      const location_1 = this.buildingInspection.checklist?.location
+
+      // 1-2. 위치 정보 - 실제 위치정보 텍스트 (동 + 층) - ID 필드를 사용하면 DB ID 필드입니다.
+      const location_building = this.buildingInspection.buildingLevel.building.name
+      const location_floor = this.buildingInspection.buildingLevel.floor
+
+      // 2. 평면도 pdf 파일
+      // mainDrawing {
+      //   id
+      //   name
+      //   fullpath
+      // }
+      const mainDrawing = this.buildingInspection.buildingLevel.mainDrawing
+
+      // 3. 선택 도면
+      const inspectionDrawingType = this.buildingInspection.checklist.inspectionDrawingType
 
       const shapes = JSON.parse(this.buildingInspection?.drawingMarker || null) || []
-      const markers = await this.drawingImageProvider.getMarkers(dwgId)
+      const markers = await this.drawingImageProvider.getMarkers(inspectionDrawingType)
 
-      this.imageUrl = dwgId
+      this.imageUrl = String(inspectionDrawingType).normalize('NFC')
       this.shapes = [...shapes, ...markers]
     }
   }
@@ -191,6 +207,10 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
             status
             requestDate
             drawingMarker
+            checklist {
+              location
+              inspectionDrawingType
+            }
             buildingLevel {
               id
               floor

package/client/pages/building-inspection/building-inspection-list.ts

@@ -410,12 +410,6 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
             renderer: value => BUILDING_INSPECTION_STATUS_DISPLAY[value]
           },
           width: 120
-        },
-        {
-          type: 'datetime',
-          name: '',
-          header: '검측 결과 데이터',
-          width: 180
         }
       ],
       rows: {

package/client/pages/building-inspection/component/building-inspection-detail-header.ts

@@ -93,8 +93,8 @@ class BuildingInspectionDetailHeader extends LitElement {
             <md-icon slot="icon">description</md-icon>검측 체크리스트
           </md-elevated-button>
           <md-elevated-button
-            ?disabled=${path.includes('building-inspection-detail-photo/')}
-            href=${`building-inspection-detail-photo/${this.buildingInspectionId}`}
+            ?disabled=${path.includes('building-inspection-detail-camera/')}
+            href=${`building-inspection-detail-camera/${this.buildingInspectionId}`}
             disabled
           >
             <md-icon slot="icon">description</md-icon>사진촬영

package/client/route.ts

@@ -19,5 +19,9 @@ export default function route(page: string) {
     case 'building-inspection-detail-checklist':
       import('./pages/building-inspection/building-inspection-detail-checklist')
       return page
+
+    case 'building-inspection-detail-camera':
+      import('./pages/building-inspection/building-inspection-detail-camera')
+      return page
   }
 }

package/dist-client/pages/building-inspection/building-inspection-detail-camera.d.ts

@@ -0,0 +1,25 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-switch.js';
+import '@operato/mini-map/ox-zoomable-image.js';
+import { PropertyValues } from 'lit';
+import { PageView } from '@operato/shell';
+import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view';
+import './component/building-inspection-detail-header';
+export declare class BuildingInspectionCamera extends PageView {
+    static styles: import("lit").CSSResult[];
+    project: any;
+    buildingInspection: any;
+    buildingInspectionId: string;
+    capturedImage: string | null;
+    originImage: string | null;
+    get context(): {
+        title: string;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    protected updated(changes: PropertyValues): Promise<void>;
+    pageUpdated(changes: any, lifecycle: PageLifecycle): Promise<void>;
+    initBuildingInspection(buildingInspectionId?: string): Promise<void>;
+    private _getProjectByBuildingComplexId;
+    private toggleAI;
+    private handleImageCapture;
+}

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

@@ -0,0 +1,291 @@
+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 gql from 'graphql-tag';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { client } from '@operato/graphql';
+import './component/building-inspection-detail-header';
+let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
+    constructor() {
+        super(...arguments);
+        this.project = {};
+        this.buildingInspection = {};
+        this.buildingInspectionId = '';
+        this.capturedImage = null; // For storing the captured image
+        this.originImage = null;
+    }
+    get context() {
+        return {
+            title: '검측 관리 상세 - 사진 촬영'
+        };
+    }
+    render() {
+        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}
+        .buildingLevelId=${(_c = (_b = this.buildingInspection) === null || _b === void 0 ? void 0 : _b.buildingLevel) === null || _c === void 0 ? void 0 : _c.id}
+        .projectName=${this.project.name}
+        .buildingName=${(_f = (_e = (_d = this.buildingInspection) === null || _d === void 0 ? void 0 : _d.buildingLevel) === null || _e === void 0 ? void 0 : _e.building) === null || _f === void 0 ? void 0 : _f.name}
+        .buildingLevelFloor=${(_h = (_g = this.buildingInspection) === null || _g === void 0 ? void 0 : _g.buildingLevel) === null || _h === void 0 ? void 0 : _h.floor}
+      ></building-inspection-detail-header>
+
+      <div body>
+        <!-- Display the captured image if available -->
+        <div preview>
+          ${this.capturedImage
+            ? html `<ox-zoomable-image src=${this.capturedImage} restrict-boundary></ox-zoomable-image>`
+            : html `<md-icon>photo_camera</md-icon>`}
+        </div>
+
+        <div controls>
+          <!-- AI toggle switch -->
+          <div class="switch-container">
+            <label>AI 기능</label>
+            <ox-input-switch type="checkbox" @change=${this.toggleAI} round></ox-input-switch>
+          </div>
+
+          <!-- Camera shutter button -->
+          <div class="camera-shutter">
+            <md-icon>camera</md-icon>
+            <input type="file" accept="image/*" capture @change="${this.handleImageCapture}" />
+          </div>
+
+          <!-- Action buttons -->
+          <div class="action-buttons">
+            <button class="save">저장</button>
+            <button class="retry">재촬영</button>
+            <button class="cancel" @click=${() => (this.capturedImage = this.originImage)}>취소</button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async updated(changes) { }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.buildingInspectionId = lifecycle.resourceId || '';
+            await this.initBuildingInspection(this.buildingInspectionId);
+        }
+    }
+    async initBuildingInspection(buildingInspectionId = '') {
+        var _a, _b, _c, _d;
+        const response = await client.query({
+            query: gql `
+        query BuildingInspection($buildingInspectionId: String!) {
+          buildingInspection(id: $buildingInspectionId) {
+            id
+            status
+            requestDate
+            drawingMarker
+            checklist {
+              location
+              inspectionDrawingType
+            }
+            buildingLevel {
+              id
+              floor
+              mainDrawing {
+                id
+                name
+                fullpath
+              }
+              mainDrawingImage
+              building {
+                id
+                name
+                buildingComplex {
+                  id
+                }
+              }
+            }
+          }
+        }
+      `,
+            variables: {
+                buildingInspectionId
+            }
+        });
+        if (response.errors)
+            return;
+        this.buildingInspection = response.data.buildingInspection;
+        await this._getProjectByBuildingComplexId((_d = (_c = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.buildingLevel) === null || _b === void 0 ? void 0 : _b.building) === null || _c === void 0 ? void 0 : _c.buildingComplex) === null || _d === void 0 ? void 0 : _d.id);
+    }
+    async _getProjectByBuildingComplexId(buildingComplexId) {
+        const response = await client.query({
+            query: gql `
+        query ProjectByBuildingComplexId($buildingComplexId: String!) {
+          project: projectByBuildingComplexId(buildingComplexId: $buildingComplexId) {
+            id
+            name
+          }
+        }
+      `,
+            variables: {
+                buildingComplexId
+            }
+        });
+        if (response.errors)
+            return;
+        this.project = response.data.project;
+    }
+    toggleAI(e) {
+        const isChecked = e.target.checked;
+        console.log(`AI 기능: ${isChecked ? 'ON' : 'OFF'}`);
+        // Implement additional AI functionality toggling if needed
+    }
+    handleImageCapture(event) {
+        const input = event.target;
+        if (input.files && input.files[0]) {
+            const reader = new FileReader();
+            reader.onload = e => {
+                var _a;
+                this.capturedImage = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+            };
+            reader.readAsDataURL(input.files[0]);
+        }
+    }
+};
+BuildingInspectionCamera.styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: 75px auto;
+        color: #4e5055;
+        width: 100%;
+        background-color: #f7f7f7;
+        overflow-y: auto;
+      }
+
+      div[body] {
+        display: flex;
+        justify-items: center;
+        gap: var(--spacing-medium);
+        margin: var(--spacing-medium);
+      }
+
+      div[preview] {
+        flex: 1;
+        border: 2px solid #ddd;
+        border-radius: 10px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      div[preview] img {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
+      div[preview] md-icon {
+        --md-icon-size: 160px;
+      }
+
+      div[controls] {
+        width: 240px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      div[action-buttons] {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .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;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+      }
+
+      .camera-shutter md-icon {
+        --md-icon-size: 100px;
+      }
+
+      .camera-shutter input {
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        cursor: pointer;
+      }
+
+      button {
+        padding: 10px 20px;
+        font-size: 16px;
+        border-radius: 5px;
+        border: none;
+        cursor: pointer;
+      }
+
+      button.save {
+        background-color: #4caf50;
+        color: white;
+      }
+
+      button.retry {
+        background-color: #f0ad4e;
+        color: white;
+      }
+
+      button.cancel {
+        background-color: #d9534f;
+        color: white;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "buildingInspection", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionCamera.prototype, "buildingInspectionId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "capturedImage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "originImage", void 0);
+BuildingInspectionCamera = __decorate([
+    customElement('building-inspection-detail-camera')
+], BuildingInspectionCamera);
+export { BuildingInspectionCamera };
+//# sourceMappingURL=building-inspection-detail-camera.js.map