@dssp/supervision 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist-client/pages/checklist/checklist-view.js

@@ -1,4 +1,5 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/fab/fab.js';
 import '@material/web/icon/icon.js';
 import gql from 'graphql-tag';
 import { client } from '@operato/graphql';
@@ -12,6 +13,8 @@ import { connect } from 'pwa-helpers/connect-mixin.js';
 import { openPopup } from '@operato/layout';
 import './comment-list-popup';
 import './attachment-list-popup';
+import '../../stt/speech-to-text';
+import { parseSpeechCommand } from '../../stt/stt-utils';
 let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
     constructor() {
         super(...arguments);
@@ -25,9 +28,55 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
             overallSupervisoryEmails: []
         };
         this.status = BuildingInspectionStatus.WAIT;
+        this.isListening = false;
+        this._onToggleSTT = () => {
+            const stt = this.renderRoot.querySelector('#stt');
+            if (!this.isListening) {
+                stt === null || stt === void 0 ? void 0 : stt.startListening();
+            }
+            else {
+                stt === null || stt === void 0 ? void 0 : stt.stopListening();
+            }
+            // isListening은 stt-status 이벤트에서 갱신됨
+        };
+    }
+    firstUpdated() {
+        const stt = this.renderRoot.querySelector('#stt');
+        if (stt) {
+            stt.addEventListener('stt-result', (e) => {
+                var _a, _b;
+                const text = e.detail.finalTranscript;
+                const parsed = parseSpeechCommand(text, ((_b = (_a = this.checklist) === null || _a === void 0 ? void 0 : _a.checklistItems) === null || _b === void 0 ? void 0 : _b.length) || 20);
+                this._applySpeechCommand(parsed);
+            });
+            stt.addEventListener('stt-status', (e) => {
+                // 음성 인식 상태에 따라 버튼 상태 갱신
+                const status = e.detail.status;
+                if (status && status.includes('Listening'))
+                    this.isListening = true;
+                if (status && (status.includes('종료') || status.includes('Stopped')))
+                    this.isListening = false;
+                this.requestUpdate();
+            });
+        }
+    }
+    /**
+     * 음성 명령 해석 결과를 체크리스트에 반영
+     */
+    _applySpeechCommand(parsed) {
+        // 합격/불합격 처리 예시 (시공자 기준)
+        if (parsed.rowIds && parsed.isPass !== null) {
+            this.checklist.checklistItems = this.checklist.checklistItems.map((item, idx) => parsed.rowIds.includes(idx + 1) ? Object.assign(Object.assign({}, item), { constructionConfirmStatus: parsed.isPass ? 'T' : 'F' }) : item);
+            this.requestUpdate();
+        }
+        // 조치사항 처리 예시
+        if (parsed.rowIds && parsed.actionText) {
+            this.checklist.checklistItems = this.checklist.checklistItems.map((item, idx) => parsed.rowIds.includes(idx + 1) ? Object.assign(Object.assign({}, item), { action: parsed.actionText }) : item);
+            this.requestUpdate();
+        }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const today = this._getDate(new Date());
         // 시공자 스탭 여부
         const isConstructorStep = this.status == BuildingInspectionStatus.WAIT ||
@@ -73,199 +122,205 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
         });
         const processedItems = this.drawChecklistItems(((_j = this.checklist) === null || _j === void 0 ? void 0 : _j.checklistItems) || []);
         return html `
-      <div wrapper>
-        <div name bold>${this.checklist.name}</div>
+      <speech-to-text id="stt"></speech-to-text>
+      <div title-row>
+        <div name>${this.checklist.name}</div>
+        <md-fab
+          class="stt-fab"
+          ?active=${this.isListening}
+          @click=${this._onToggleSTT}
+          ?disabled=${false}
+          style="position:absolute;top:0;right:0;z-index:10;"
+          .label=${this.isListening ? '음성 인식 중지' : '음성 인식 시작'}
+        >
+          <md-icon slot="icon">mic</md-icon>
+        </md-fab>
+      </div>
+      <table header>
+        <tr>
+          <th>공종</th>
+          <td>${this.checklist.constructionType}</td>
+          <th>문서 번호</th>
+          <td>${this.checklist.documentNo}</td>
+        </tr>
+        <tr>
+          <th>세부 공종</th>
+          <td>${this.checklist.constructionDetailType}</td>
+          <th>위치 및 부위</th>
+          <td>${this.checklist.location}</td>
+        </tr>
+        <tr>
+          <th>검측 부위</th>
+          <td>${((_l = (_k = this.checklist) === null || _k === void 0 ? void 0 : _k.inspectionParts) === null || _l === void 0 ? void 0 : _l.join(', ')) || ''}</td>
+          <th>검측 상태</th>
+          <td>${BUILDING_INSPECTION_STATUS_DISPLAY[this.status]}</td>
+        </tr>
+      </table>
 
-        <table header>
+      <table body>
+        <thead>
           <tr>
-            <th>공종</th>
-            <td>${this.checklist.constructionType}</td>
-            <th>문서 번호</th>
-            <td>${this.checklist.documentNo}</td>
+            <th colspan="2" rowspan="3" type>구분</th>
+            <th rowspan="3" inspection-name>검사항목</th>
+            <th rowspan="3" criteria>검사기준</th>
+            <th colspan="4" result>검사결과</th>
+            <th rowspan="3" small>첨부자료</th>
+            <th rowspan="3" small>조치사항</th>
           </tr>
           <tr>
-            <th>세부 공종</th>
-            <td>${this.checklist.constructionDetailType}</td>
-            <th>위치 및 부위</th>
-            <td>${this.checklist.location}</td>
+            <th colspan="2">시공자</th>
+            <th colspan="2">감리자</th>
           </tr>
           <tr>
-            <th>검측 부위</th>
-            <td>${((_l = (_k = this.checklist) === null || _k === void 0 ? void 0 : _k.inspectionParts) === null || _l === void 0 ? void 0 : _l.join(', ')) || ''}</td>
-            <th>검측 상태</th>
-            <td>${BUILDING_INSPECTION_STATUS_DISPLAY[(_o = (_m = this.checklist) === null || _m === void 0 ? void 0 : _m.buildingInspection) === null || _o === void 0 ? void 0 : _o.status]}</td>
+            <th>적합</th>
+            <th>부적합</th>
+            <th>적합</th>
+            <th>부적합</th>
           </tr>
-        </table>
-
-        <table body>
-          <thead>
-            <tr>
-              <th colspan="2" rowspan="3" type>구분</th>
-              <th rowspan="3" inspection-name>검사항목</th>
-              <th rowspan="3" criteria>검사기준</th>
-              <th colspan="4" result>검사결과</th>
-              <th rowspan="3" small>첨부자료</th>
-              <th rowspan="3" small>조치사항</th>
-            </tr>
-            <tr>
-              <th colspan="2">시공자</th>
-              <th colspan="2">감리자</th>
-            </tr>
-            <tr>
-              <th>적합</th>
-              <th>부적합</th>
-              <th>적합</th>
-              <th>부적합</th>
-            </tr>
-          </thead>
-          <tbody>
-            ${processedItems.map(({ item, showMainTypeCell, mainTypeRowspan, showDetailTypeCell, detailTypeRowspan }, idx) => {
+        </thead>
+        <tbody>
+          ${processedItems.map(({ item, showMainTypeCell, mainTypeRowspan, showDetailTypeCell, detailTypeRowspan }, idx) => {
             return html ` <tr>
-                ${showMainTypeCell
+              ${showMainTypeCell
                 ? html `<td main-type bold rowspan="${mainTypeRowspan}">${CHECKLIST_MAIN_TYPE_LIST[item.mainType]}</td>`
                 : ''}
-                ${showDetailTypeCell ? html ` <td bold rowspan="${detailTypeRowspan}">${item.detailType}</td> ` : ''}
-
-                <td>${idx + 1}. ${item.name}</td>
-                <td>${item.inspctionCriteria}</td>
-                <td radio>
-                  <md-radio
-                    item-id=${item.id}
-                    item-name="constructionConfirmStatus"
-                    name=${'radio-construction-' + item.id}
-                    value="T"
-                    .checked=${item.constructionConfirmStatus === 'T'}
-                    ?disabled=${!isConstructorStep || !havePermissionByStatus}
-                    @change=${this._onChangeConfirmStatus}
-                  ></md-radio>
-                </td>
-                <td radio>
-                  <md-radio
-                    item-id=${item.id}
-                    item-name="constructionConfirmStatus"
-                    name=${'radio-construction-' + item.id}
-                    value="F"
-                    .checked=${item.constructionConfirmStatus === 'F'}
-                    ?disabled=${!isConstructorStep || !havePermissionByStatus}
-                    @change=${this._onChangeConfirmStatus}
-                  ></md-radio>
-                </td>
-                <td radio>
-                  <md-radio
-                    item-id=${item.id}
-                    item-name="supervisoryConfirmStatus"
-                    name=${'radio-supervisory-' + item.id}
-                    value="T"
-                    .checked=${item.supervisoryConfirmStatus === 'T'}
-                    ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
-                    @change=${this._onChangeConfirmStatus}
-                  ></md-radio>
-                </td>
-                <td radio>
-                  <md-radio
-                    item-id=${item.id}
-                    item-name="supervisoryConfirmStatus"
-                    name=${'radio-supervisory-' + item.id}
-                    value="F"
-                    .checked=${item.supervisoryConfirmStatus === 'F'}
-                    ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
-                    @change=${this._onChangeConfirmStatus}
-                  ></md-radio>
-                </td>
-                <td
-                  attachment
-                  ?disabled=${this.status == BuildingInspectionStatus.PASS}
-                  @click=${() => this._onClickAttachment(item.id)}
-                >
-                  <md-icon slot="icon">attach_file</md-icon>
-                  <span>${(item === null || item === void 0 ? void 0 : item.checklistItemAttachmentCount) || ''}</span>
-                </td>
-                <td
-                  comment
-                  ?disabled=${this.status == BuildingInspectionStatus.PASS}
-                  @click=${() => this._onClickComment(item.id)}
-                >
-                  <md-icon slot="icon">chat</md-icon>
-                  <span>${(item === null || item === void 0 ? void 0 : item.checklistItemCommentCount) || ''}</span>
-                </td>
-              </tr>`;
-        })}
-          </tbody>
-        </table>
+              ${showDetailTypeCell ? html ` <td bold rowspan="${detailTypeRowspan}">${item.detailType}</td> ` : ''}
 
-        <table tail>
-          <tbody>
-            <tr first>
-              <th rowspan="2">시공자 점검일</th>
-              <td rowspan="2">
-                ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.constructionInspectionDate)}
+              <td>${idx + 1}. ${item.name}</td>
+              <td>${item.inspctionCriteria}</td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="constructionConfirmStatus"
+                  name=${'radio-construction-' + item.id}
+                  value="T"
+                  .checked=${item.constructionConfirmStatus === 'T'}
+                  ?disabled=${!isConstructorStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
               </td>
-              <th>공종별 시공 관리자</th>
-              <td>
-                <span sign-text>(인)</span>
-                <ox-input-signature
-                  .value=${this.checklist.taskConstructorSignature}
-                  name="taskConstructorSignature"
-                  @change=${this._onChangeSignature}
-                  ?disabled=${(this.status != BuildingInspectionStatus.WAIT && this.status != BuildingInspectionStatus.FAIL) ||
-            !isTaskConstructor}
-                >
-                </ox-input-signature>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="constructionConfirmStatus"
+                  name=${'radio-construction-' + item.id}
+                  value="F"
+                  .checked=${item.constructionConfirmStatus === 'F'}
+                  ?disabled=${!isConstructorStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
               </td>
-            </tr>
-            <tr>
-              <th>총괄 시공 책임자</th>
-              <td>
-                <span sign-text>(인)</span>
-                <ox-input-signature
-                  .value=${this.checklist.overallConstructorSignature}
-                  name="overallConstructorSignature"
-                  @change=${this._onChangeSignature}
-                  ?disabled=${this.status != BuildingInspectionStatus.OVERALL_WAIT || !isOverallConstructor}
-                >
-                </ox-input-signature>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="supervisoryConfirmStatus"
+                  name=${'radio-supervisory-' + item.id}
+                  value="T"
+                  .checked=${item.supervisoryConfirmStatus === 'T'}
+                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
               </td>
-            </tr>
-            <tr>
-              <th rowspan="2">감리자 점검일</th>
-              <td rowspan="2">
-                ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.supervisorInspectionDate)}
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="supervisoryConfirmStatus"
+                  name=${'radio-supervisory-' + item.id}
+                  value="F"
+                  .checked=${item.supervisoryConfirmStatus === 'F'}
+                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
               </td>
-              <th>공종별 감리 책임자</th>
-              <td>
-                <span sign-text>(인)</span>
-                <ox-input-signature
-                  .value=${this.checklist.taskSupervisorySignature}
-                  name="taskSupervisorySignature"
-                  @change=${this._onChangeSignature}
-                  ?disabled=${this.status != BuildingInspectionStatus.REQUEST || !isTaskSupervisory}
-                >
-                </ox-input-signature>
+              <td
+                attachment
+                ?disabled=${this.status == BuildingInspectionStatus.PASS}
+                @click=${() => this._onClickAttachment(item.id)}
+              >
+                <md-icon slot="icon">attach_file</md-icon>
+                <span>${(item === null || item === void 0 ? void 0 : item.checklistItemAttachmentCount) || ''}</span>
               </td>
-            </tr>
-            <tr>
-              <th>총괄 감리 책임자</th>
-              <td>
-                <span sign-text>(인)</span>
-                <ox-input-signature
-                  .value=${this.checklist.overallSupervisorySignature}
-                  name="overallSupervisorySignature"
-                  @change=${this._onChangeSignature}
-                  ?disabled=${this.status != BuildingInspectionStatus.OVERALL_REQUEST || !isOverallSupervisory}
-                >
-                </ox-input-signature>
+              <td comment ?disabled=${this.status == BuildingInspectionStatus.PASS} @click=${() => this._onClickComment(item.id)}>
+                <md-icon slot="icon">chat</md-icon>
+                <span>${(item === null || item === void 0 ? void 0 : item.checklistItemCommentCount) || ''}</span>
               </td>
-            </tr>
-          </tbody>
-        </table>
+            </tr>`;
+        })}
+        </tbody>
+      </table>
+
+      <table tail>
+        <tbody>
+          <tr first>
+            <th rowspan="2">시공자 점검일</th>
+            <td rowspan="2">
+              ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.constructionInspectionDate)}
+            </td>
+            <th>공종별 시공 관리자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.taskConstructorSignature}
+                name="taskConstructorSignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${(this.status != BuildingInspectionStatus.WAIT && this.status != BuildingInspectionStatus.FAIL) ||
+            !isTaskConstructor}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th>총괄 시공 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.overallConstructorSignature}
+                name="overallConstructorSignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_WAIT || !isOverallConstructor}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th rowspan="2">감리자 점검일</th>
+            <td rowspan="2">
+              ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.supervisorInspectionDate)}
+            </td>
+            <th>공종별 감리 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.taskSupervisorySignature}
+                name="taskSupervisorySignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.REQUEST || !isTaskSupervisory}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th>총괄 감리 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.overallSupervisorySignature}
+                name="overallSupervisorySignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_REQUEST || !isOverallSupervisory}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+        </tbody>
+      </table>
 
-        <div footer>
-          <div>
-            - 검사결과는 1차, 2차로 구분 재검측시 2차에 기록하고 검사기준도 검사결과와 비교될 수 있도록 시방서 또는 도면 등에 있는
-            수치를 작성하며, 수치가 없는 검사항목은 시방서 또는 설계도서에 있는 내용과 검사한 내용으로 작성함
-          </div>
-          <div>- 검사항목 및 검사기준은 각 공종별로 감리원과 협의하여 작성할 것</div>
+      <div footer>
+        <div>
+          - 검사결과는 1차, 2차로 구분 재검측시 2차에 기록하고 검사기준도 검사결과와 비교될 수 있도록 시방서 또는 도면 등에 있는
+          수치를 작성하며, 수치가 없는 검사항목은 시방서 또는 설계도서에 있는 내용과 검사한 내용으로 작성함
         </div>
+        <div>- 검사항목 및 검사기준은 각 공종별로 감리원과 협의하여 작성할 것</div>
       </div>
     `;
     }
@@ -330,26 +385,20 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
         <comment-list-popup
           .checklistItemId=${checklistItemId}
           .status=${this.status}
+          .mode=${this.mode}
           @change-comment=${this._refreshItem.bind(this)}
         ></comment-list-popup>
-      `, {
-            backdrop: true,
-            size: 'medium',
-            title: '조치 사항'
-        });
+      `, { backdrop: true, size: 'medium', title: '조치 사항' });
     }
     _onClickAttachment(checklistItemId) {
         openPopup(html `
         <attachment-list-popup
           .checklistItemId=${checklistItemId}
           .status=${this.status}
+          .mode=${this.mode}
           @change-attachment=${this._refreshItem.bind(this)}
         ></attachment-list-popup>
-      `, {
-            backdrop: true,
-            size: 'medium',
-            title: '첨부 자료'
-        });
+      `, { backdrop: true, size: 'medium', title: '첨부 자료' });
     }
     async _refreshItem(e) {
         var _a;
@@ -536,6 +585,60 @@ ChecklistView.styles = [
         text-indent: -9px;
         padding-left: var(--spacing-medium, 8px);
       }
+
+      .stt-float-btns {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        gap: 8px;
+        z-index: 10;
+      }
+      .stt-float-btns button {
+        background: #fff;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        width: 38px;
+        height: 38px;
+        font-size: 18px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        cursor: pointer;
+        transition: background 0.2s;
+        outline: none;
+      }
+      .stt-float-btns button:hover {
+        background: #f2f2f2;
+      }
+      div[title-row] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+      }
+      div[name] {
+        color: #586878;
+        font-size: 24px;
+        font-weight: bold;
+        flex: 1;
+        text-align: center;
+      }
+
+      @keyframes pulse {
+        0% {
+          filter: drop-shadow(0 0 0 #d32f2f);
+        }
+        70% {
+          filter: drop-shadow(0 0 8px #d32f2f);
+        }
+        100% {
+          filter: drop-shadow(0 0 0 #d32f2f);
+        }
+      }
+      .stt-fab[active] md-icon {
+        color: #d32f2f;
+        animation: pulse 1s infinite;
+      }
     `
 ];
 __decorate([