@dssp/supervision 0.0.29 → 0.0.31

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/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

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

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

package/dist-client/pages/building-inspection/component/building-inspection-detail-header.js

@@ -37,8 +37,8 @@ let BuildingInspectionDetailHeader = class BuildingInspectionDetailHeader extend
             <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/dist-client/pages/building-inspection/component/building-inspection-detail-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"building-inspection-detail-header.js","sourceRoot":"","sources":["../../../../client/pages/building-inspection/component/building-inspection-detail-header.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGxE,IAAM,8BAA8B,GAApC,MAAM,8BAA+B,SAAQ,UAAU;IAAvD;;QAyD8B,yBAAoB,GAAW,EAAE,CAAA;QACjC,oBAAe,GAAW,EAAE,CAAA;QAC5B,gBAAW,GAAW,EAAE,CAAA;QACxB,iBAAY,GAAW,EAAE,CAAA;QACzB,uBAAkB,GAAW,EAAE,CAAA;IA6C7D,CAAC;IA3CC,MAAM;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAA;QAErC,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,WAAW,IAAI,EAAE,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,IAAI,IAAI,CAAC,kBAAkB,IAAI,EAAE;;;wBAGxE,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC;mBAC/C,4BAA4B,IAAI,CAAC,eAAe,EAAE;;;;;wBAK7C,IAAI,CAAC,QAAQ,CAAC,qCAAqC,CAAC;mBACzD,sCAAsC,IAAI,CAAC,oBAAoB,EAAE;;;;;wBAK5D,IAAI,CAAC,QAAQ,CAAC,uCAAuC,CAAC;mBAC3D,wCAAwC,IAAI,CAAC,oBAAoB,EAAE;;;;;wBAK9D,IAAI,CAAC,QAAQ,CAAC,mCAAmC,CAAC;mBACvD,oCAAoC,IAAI,CAAC,oBAAoB,EAAE;;;;;;wBAM1D,IAAI,CAAC,QAAQ,CAAC,qCAAqC,CAAC;mBACzD,sCAAsC,IAAI,CAAC,oBAAoB,EAAE;;;;;;;KAO/E,CAAA;IACH,CAAC;;AAxGM,qCAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4EAAkC;AAC7D;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uEAA6B;AACxD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mEAAyB;AACpD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oEAA0B;AACrD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0EAAgC;AA7DvD,8BAA8B;IADnC,aAAa,CAAC,mCAAmC,CAAC;GAC7C,8BAA8B,CA0GnC","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('building-inspection-detail-header')\nclass BuildingInspectionDetailHeader extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      md-filled-button {\n        --md-filled-button-container-color: #0595e5;\n        --md-filled-button-container-height: 30px;\n        --md-filled-button-trailing-space: 15px;\n        --md-filled-button-leading-space: 15px;\n      }\n      md-outlined-button {\n        --md-outlined-button-container-height: 30px;\n        --md-outlined-button-trailing-space: 15px;\n        --md-outlined-button-leading-space: 15px;\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[header] {\n        display: flex;\n        margin: 0px 20px;\n      }\n\n      h2 {\n        flex: 0.5;\n        color: #3f71a0;\n      }\n\n      div[button-container] {\n        display: flex;\n        align-items: center;\n        justify-content: end;\n        flex: 0.5;\n      }\n\n      md-elevated-button {\n        margin: 0px 3px;\n\n        --md-elevated-button-container-height: 35px;\n        --md-elevated-button-label-text-size: 16px;\n        --md-elevated-button-container-color: #0595e5;\n\n        --md-elevated-button-label-text-color: #fff;\n        --md-elevated-button-hover-label-text-color: #fff;\n        --md-elevated-button-pressed-label-text-color: #fff;\n        --md-elevated-button-focus-label-text-color: #fff;\n        --md-elevated-button-icon-color: #fff;\n        --md-elevated-button-hover-icon-color: #fff;\n        --md-elevated-button-pressed-icon-color: #fff;\n        --md-elevated-button-focus-icon-color: #fff;\n      }\n    `\n  ]\n\n  @property({ type: String }) buildingInspectionId: string = ''\n  @property({ type: String }) buildingLevelId: string = ''\n  @property({ type: String }) projectName: string = ''\n  @property({ type: String }) buildingName: string = ''\n  @property({ type: String }) buildingLevelFloor: string = ''\n\n  render() {\n    const path = window.location.pathname\n\n    return html`\n      <div header>\n        <h2>${this.projectName || ''} ${this.buildingName || ''} ${this.buildingLevelFloor || ''}층</h2>\n        <div button-container>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-list/')}\n            href=${`building-inspection-list/${this.buildingLevelId}`}\n          >\n            <md-icon slot=\"icon\">assignment</md-icon>검측 리스트\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-drawing/')}\n            href=${`building-inspection-detail-drawing/${this.buildingInspectionId}`}\n          >\n            <md-icon slot=\"icon\">assignment</md-icon>검측도면\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-checklist/')}\n            href=${`building-inspection-detail-checklist/${this.buildingInspectionId}`}\n          >\n            <md-icon slot=\"icon\">description</md-icon>검측 체크리스트\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-photo/')}\n            href=${`building-inspection-detail-photo/${this.buildingInspectionId}`}\n            disabled\n          >\n            <md-icon slot=\"icon\">description</md-icon>사진촬영\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-history/')}\n            href=${`building-inspection-detail-history/${this.buildingInspectionId}`}\n            disabled\n          >\n            <md-icon slot=\"icon\">description</md-icon>감리이력\n          </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"building-inspection-detail-header.js","sourceRoot":"","sources":["../../../../client/pages/building-inspection/component/building-inspection-detail-header.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGxE,IAAM,8BAA8B,GAApC,MAAM,8BAA+B,SAAQ,UAAU;IAAvD;;QAyD8B,yBAAoB,GAAW,EAAE,CAAA;QACjC,oBAAe,GAAW,EAAE,CAAA;QAC5B,gBAAW,GAAW,EAAE,CAAA;QACxB,iBAAY,GAAW,EAAE,CAAA;QACzB,uBAAkB,GAAW,EAAE,CAAA;IA6C7D,CAAC;IA3CC,MAAM;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAA;QAErC,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,WAAW,IAAI,EAAE,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,IAAI,IAAI,CAAC,kBAAkB,IAAI,EAAE;;;wBAGxE,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC;mBAC/C,4BAA4B,IAAI,CAAC,eAAe,EAAE;;;;;wBAK7C,IAAI,CAAC,QAAQ,CAAC,qCAAqC,CAAC;mBACzD,sCAAsC,IAAI,CAAC,oBAAoB,EAAE;;;;;wBAK5D,IAAI,CAAC,QAAQ,CAAC,uCAAuC,CAAC;mBAC3D,wCAAwC,IAAI,CAAC,oBAAoB,EAAE;;;;;wBAK9D,IAAI,CAAC,QAAQ,CAAC,oCAAoC,CAAC;mBACxD,qCAAqC,IAAI,CAAC,oBAAoB,EAAE;;;;;;wBAM3D,IAAI,CAAC,QAAQ,CAAC,qCAAqC,CAAC;mBACzD,sCAAsC,IAAI,CAAC,oBAAoB,EAAE;;;;;;;KAO/E,CAAA;IACH,CAAC;;AAxGM,qCAAM,GAAG;IACd,qBAAqB;IACrB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;4EAAkC;AAC7D;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uEAA6B;AACxD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mEAAyB;AACpD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oEAA0B;AACrD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0EAAgC;AA7DvD,8BAA8B;IADnC,aAAa,CAAC,mCAAmC,CAAC;GAC7C,8BAA8B,CA0GnC","sourcesContent":["import '@material/web/icon/icon.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('building-inspection-detail-header')\nclass BuildingInspectionDetailHeader extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      md-filled-button {\n        --md-filled-button-container-color: #0595e5;\n        --md-filled-button-container-height: 30px;\n        --md-filled-button-trailing-space: 15px;\n        --md-filled-button-leading-space: 15px;\n      }\n      md-outlined-button {\n        --md-outlined-button-container-height: 30px;\n        --md-outlined-button-trailing-space: 15px;\n        --md-outlined-button-leading-space: 15px;\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[header] {\n        display: flex;\n        margin: 0px 20px;\n      }\n\n      h2 {\n        flex: 0.5;\n        color: #3f71a0;\n      }\n\n      div[button-container] {\n        display: flex;\n        align-items: center;\n        justify-content: end;\n        flex: 0.5;\n      }\n\n      md-elevated-button {\n        margin: 0px 3px;\n\n        --md-elevated-button-container-height: 35px;\n        --md-elevated-button-label-text-size: 16px;\n        --md-elevated-button-container-color: #0595e5;\n\n        --md-elevated-button-label-text-color: #fff;\n        --md-elevated-button-hover-label-text-color: #fff;\n        --md-elevated-button-pressed-label-text-color: #fff;\n        --md-elevated-button-focus-label-text-color: #fff;\n        --md-elevated-button-icon-color: #fff;\n        --md-elevated-button-hover-icon-color: #fff;\n        --md-elevated-button-pressed-icon-color: #fff;\n        --md-elevated-button-focus-icon-color: #fff;\n      }\n    `\n  ]\n\n  @property({ type: String }) buildingInspectionId: string = ''\n  @property({ type: String }) buildingLevelId: string = ''\n  @property({ type: String }) projectName: string = ''\n  @property({ type: String }) buildingName: string = ''\n  @property({ type: String }) buildingLevelFloor: string = ''\n\n  render() {\n    const path = window.location.pathname\n\n    return html`\n      <div header>\n        <h2>${this.projectName || ''} ${this.buildingName || ''} ${this.buildingLevelFloor || ''}층</h2>\n        <div button-container>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-list/')}\n            href=${`building-inspection-list/${this.buildingLevelId}`}\n          >\n            <md-icon slot=\"icon\">assignment</md-icon>검측 리스트\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-drawing/')}\n            href=${`building-inspection-detail-drawing/${this.buildingInspectionId}`}\n          >\n            <md-icon slot=\"icon\">assignment</md-icon>검측도면\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-checklist/')}\n            href=${`building-inspection-detail-checklist/${this.buildingInspectionId}`}\n          >\n            <md-icon slot=\"icon\">description</md-icon>검측 체크리스트\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-camera/')}\n            href=${`building-inspection-detail-camera/${this.buildingInspectionId}`}\n            disabled\n          >\n            <md-icon slot=\"icon\">description</md-icon>사진촬영\n          </md-elevated-button>\n          <md-elevated-button\n            ?disabled=${path.includes('building-inspection-detail-history/')}\n            href=${`building-inspection-detail-history/${this.buildingInspectionId}`}\n            disabled\n          >\n            <md-icon slot=\"icon\">description</md-icon>감리이력\n          </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n}\n"]}