npm - @dssp/project - Versions diffs - 0.0.7 → 0.0.8 - Mend

@dssp/project 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/assets/images/img-building-complex-default.jpg ADDED Viewed

Binary file

package/assets/images/img-building-default.png ADDED Viewed

Binary file

package/assets/images/no-image.png ADDED Viewed

Binary file

package/client/pages/project/project-detail.ts CHANGED Viewed

@@ -124,7 +124,12 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               img {
                 width: 42%;
-                height: fit-content;
+                height: auto;
+                aspect-ratio: 1920 / 1080;
+              }
+              img[no-image] {
+                object-fit: contain;
+                opacity: 0.5;
               }
               div[row] {
@@ -138,10 +143,13 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
           }
           div[left-bottom] {
-            img {
+            [building-complex-img] {
               width: 100%;
               aspect-ratio: 2 / 1;
             }
+            img {
+              opacity: 0.5;
+            }
             div[subject] {
               margin-bottom: 7px;
@@ -360,7 +368,10 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
           <div left-top>
             <h3>기본 정보</h3>
             <div content-1>
-              <img project-img src=${this.project.mainPhoto?.fullpath || ''} />
+              <img
+                ?no-image=${!this.project.mainPhoto?.fullpath}
+                src=${this.project.mainPhoto?.fullpath || '/assets/images/no-image.png'}
+              />
               <div>
                 <div row>
@@ -412,7 +423,9 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
           <div left-bottom>
             <h3>조감도(BIM도면)</h3>
-            <img src=${this.project.buildingComplex?.drawing?.fullpath || ''} />
+            ${this.project.buildingComplex?.drawing?.fullpath
+              ? html`<div building-complex-img></div>`
+              : html`<img building-complex-img src="/assets/images/img-building-complex-default.jpg" />`}
             <div>
               <div subject bold>개별 단지 상세정보 바로가기</div>
               <div building-container>

package/client/pages/project/project-list.ts CHANGED Viewed

@@ -162,6 +162,10 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
             width: 285px;
             background-color: #cccccc80;
           }
+          img[project-img][no-image] {
+            object-fit: contain;
+            opacity: 0.5;
+          }
           span[project-info] {
             flex: 0.45;
@@ -252,7 +256,11 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
           return html`
             <div project-container>
               <a href=${`project-detail/${project.id}`}>
-                <img project-img src=${project.mainPhoto?.fullpath || ''} />
+                <img
+                  ?no-image=${!project.mainPhoto?.fullpath}
+                  project-img
+                  src=${project.mainPhoto?.fullpath || '/assets/images/no-image.png'}
+                />
                 <span project-info>
                   <div name>${project.name}</div>

package/client/pages/project/project-schedule-list.ts CHANGED Viewed

@@ -79,6 +79,10 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
             width: 285px;
             background-color: #cccccc80;
           }
+          img[project-img][no-image] {
+            object-fit: contain;
+            opacity: 0.5;
+          }
           span[project-info] {
             flex: 0.45;
@@ -169,7 +173,11 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
           return html`
             <div project-container>
               <a href=${`project-schedule/${project.id}`}>
-                <img project-img src=${project.mainPhoto?.fullpath || ''} />
+                <img
+                  ?no-image=${!project.mainPhoto?.fullpath}
+                  project-img
+                  src=${project.mainPhoto?.fullpath || '/assets/images/no-image.png'}
+                />
                 <span project-info>
                   <div name>${project.name}</div>
@@ -181,14 +189,12 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
                 <span project-state>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.totalProgress || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.totalProgress || 0}> </md-linear-progress>
                     <span>전체</span>
                     <span>${project.totalProgress || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.weeklyProgress || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.weeklyProgress || 0}> </md-linear-progress>
                     <span>주간</span>
                     <span>${project.weeklyProgress || 0}%</span>
                   </div>
@@ -203,14 +209,12 @@ export class ProjectScheduleListPage extends ScopedElementsMixin(PageView) {
                     <span>${project.inspPassRate || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.robotProgressRate || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.robotProgressRate || 0}> </md-linear-progress>
                     <span>Robot Progress</span>
                     <span>${project.robotProgressRate || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.structuralSafetyRate || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.structuralSafetyRate || 0}> </md-linear-progress>
                     <span>Structural safety</span>
                     <span>${project.structuralSafetyRate || 0}%</span>
                   </div>

package/client/pages/project/project-setting-list.ts CHANGED Viewed

@@ -89,6 +89,10 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
             aspect-ratio: 2;
             background-color: #cccccc80;
           }
+          img[project-img][no-image] {
+            object-fit: contain;
+            opacity: 0.5;
+          }
           span[project-info] {
             flex: 0.45;
@@ -208,7 +212,11 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
           return html`
             <div project-container>
-              <img project-img src=${project.mainPhoto?.fullpath || ''} />
+              <img
+                ?no-image=${!project.mainPhoto?.fullpath}
+                project-img
+                src=${project.mainPhoto?.fullpath || '/assets/images/no-image.png'}
+              />
               <span project-info>
                 <div name>${project.name}</div>

package/dist-client/pages/project/project-detail.js CHANGED Viewed

@@ -47,7 +47,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         return html `
       <div header>
         <h2>${this.project.name}</h2>
@@ -69,12 +69,15 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
           <div left-top>
             <h3>기본 정보</h3>
             <div content-1>
-              <img project-img src=${((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || ''} />
+              <img
+                ?no-image=${!((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath)}
+                src=${((_b = this.project.mainPhoto) === null || _b === void 0 ? void 0 : _b.fullpath) || '/assets/images/no-image.png'}
+              />
               <div>
                 <div row>
                   <span>- 면적 : </span>
-                  <span>${(_b = this.project.buildingComplex) === null || _b === void 0 ? void 0 : _b.area}</span>
+                  <span>${(_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.area}</span>
                 </div>
                 <div row>
                   <span>- 착공 ~ 준공 : </span>
@@ -82,19 +85,19 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                 </div>
                 <div row>
                   <span>- 발주처 : </span>
-                  <span>${(_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.clientCompany}</span>
+                  <span>${(_d = this.project.buildingComplex) === null || _d === void 0 ? void 0 : _d.clientCompany}</span>
                 </div>
                 <div row>
                   <span>- 건설사 : </span>
-                  <span>${(_d = this.project.buildingComplex) === null || _d === void 0 ? void 0 : _d.constructionCompany}</span>
+                  <span>${(_e = this.project.buildingComplex) === null || _e === void 0 ? void 0 : _e.constructionCompany}</span>
                 </div>
                 <div row>
                   <span>- 감리사 : </span>
-                  <span>${(_e = this.project.buildingComplex) === null || _e === void 0 ? void 0 : _e.supervisoryCompany}</span>
+                  <span>${(_f = this.project.buildingComplex) === null || _f === void 0 ? void 0 : _f.supervisoryCompany}</span>
                 </div>
                 <div row>
                   <span>- 설계사 : </span>
-                  <span>${(_f = this.project.buildingComplex) === null || _f === void 0 ? void 0 : _f.designCompany}</span>
+                  <span>${(_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.designCompany}</span>
                 </div>
               </div>
             </div>
@@ -102,30 +105,32 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             <div content-2>
               <div row>
                 <span>- 건설구분 : </span>
-                <span>${(_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.constructionType}</span>
+                <span>${(_h = this.project.buildingComplex) === null || _h === void 0 ? void 0 : _h.constructionType}</span>
               </div>
               <div row>
                 <span>- 공사금액 : </span>
-                <span>${(_h = this.project.buildingComplex) === null || _h === void 0 ? void 0 : _h.constructionCost}</span>
+                <span>${(_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.constructionCost}</span>
               </div>
               <div row>
                 <span>- 세대수 : </span>
-                <span>${(_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.householdCount}</span>
+                <span>${(_k = this.project.buildingComplex) === null || _k === void 0 ? void 0 : _k.householdCount}</span>
               </div>
               <div row>
                 <span>- 기타 : </span>
-                <span>${(_k = this.project.buildingComplex) === null || _k === void 0 ? void 0 : _k.etc}</span>
+                <span>${(_l = this.project.buildingComplex) === null || _l === void 0 ? void 0 : _l.etc}</span>
               </div>
             </div>
           </div>
           <div left-bottom>
             <h3>조감도(BIM도면)</h3>
-            <img src=${((_m = (_l = this.project.buildingComplex) === null || _l === void 0 ? void 0 : _l.drawing) === null || _m === void 0 ? void 0 : _m.fullpath) || ''} />
+            ${((_o = (_m = this.project.buildingComplex) === null || _m === void 0 ? void 0 : _m.drawing) === null || _o === void 0 ? void 0 : _o.fullpath)
+            ? html `<div building-complex-img></div>`
+            : html `<img building-complex-img src="/assets/images/img-building-complex-default.jpg" />`}
             <div>
               <div subject bold>개별 단지 상세정보 바로가기</div>
               <div building-container>
-                ${(_p = (_o = this.project.buildingComplex) === null || _o === void 0 ? void 0 : _o.buildings) === null || _p === void 0 ? void 0 : _p.map(building => {
+                ${(_q = (_p = this.project.buildingComplex) === null || _p === void 0 ? void 0 : _p.buildings) === null || _q === void 0 ? void 0 : _q.map(building => {
             return html `<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>
                     ${building.name}
                   </md-outlined-button>`;
@@ -414,7 +419,12 @@ ProjectDetail.styles = [
               img {
                 width: 42%;
-                height: fit-content;
+                height: auto;
+                aspect-ratio: 1920 / 1080;
+              }
+              img[no-image] {
+                object-fit: contain;
+                opacity: 0.5;
               }
               div[row] {
@@ -428,10 +438,13 @@ ProjectDetail.styles = [
           }
           div[left-bottom] {
-            img {
+            [building-complex-img] {
               width: 100%;
               aspect-ratio: 2 / 1;
             }
+            img {
+              opacity: 0.5;
+            }
             div[subject] {
               margin-bottom: 7px;

package/dist-client/pages/project/project-detail.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"project-detail.js","sourceRoot":"","sources":["../../../client/pages/project/project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/outlined-button.js'\n\nimport { PageView } from '@operato/shell'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\n\nimport gql from 'graphql-tag'\nimport { Project } from './project-list'\nimport _getWeather from '../lib/waether'\nimport '@operato/chart/ox-progress-circle.js'\n\nexport interface InspectionSummary {\n request: number\n pass: number\n fail: number\n}\n\ninterface Weather {\n rain: number\n temperature: number\n humidity: number\n wind: string\n}\n\n@customElement('project-detail')\nexport class ProjectDetail extends ScopedElementsMixin(PageView) {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-rows: 75px auto;\n color: #4e5055;\n\n width: 100%;\n background-color: #f7f7f7;\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\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 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 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 div[body] {\n display: flex;\n margin: 0px 25px 25px 25px;\n gap: 10px;\n\n h3 {\n color: #2e79be;\n font-size: 18px;\n margin: 0px;\n }\n\n & > div {\n display: flex;\n flex: 1;\n gap: 10px;\n flex-direction: column;\n\n & > div {\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n border: 1px solid #cccccc80;\n gap: 10px;\n padding: 15px;\n border-radius: 5px;\n }\n\n div[left-top] {\n div[content-1] {\n display: flex;\n align-items: center;\n gap: 15px;\n\n img {\n width: 42%;\n height: fit-content;\n }\n\n div[row] {\n line-height: 25px;\n }\n }\n div[content-2] {\n height: 65px;\n overflow-y: auto;\n }\n }\n\n div[left-bottom] {\n img {\n width: 100%;\n aspect-ratio: 2 / 1;\n }\n\n div[subject] {\n margin-bottom: 7px;\n }\n div[building-container] {\n display: block;\n height: 40px;\n overflow-y: auto;\n\n & > {\n margin-right: 10px;\n margin-bottom: 7px;\n }\n }\n }\n\n div[right-top] {\n flex: 3;\n\n div[state] {\n display: grid;\n grid-template-columns: 0.95fr 0.95fr 1.1fr;\n gap: 15px;\n\n span[progress] {\n max-width: 170px;\n text-align: center;\n display: flex;\n justify-self: center;\n flex-direction: column;\n width: 100%;\n\n & > div {\n font-weight: bold;\n color: #2e79be;\n font-size: 12px;\n margin-top: 5px;\n }\n & > div[week] {\n color: #06b5af;\n }\n }\n span[weather] {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin-left: 10px;\n\n & > div {\n display: flex;\n justify-content: space-between;\n\n & > span {\n display: flex;\n }\n }\n }\n }\n div[inspection] {\n display: grid;\n grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr;\n margin-top: 5px;\n background: #f6f6f6;\n border-radius: 7px;\n padding: 7px 0px;\n\n & > span {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n div[pass] {\n color: #1bb401;\n }\n div[fail] {\n color: #ff4444;\n }\n }\n & > span[name] {\n flex-direction: row;\n text-align: right;\n gap: 10px;\n\n md-icon {\n width: 40px;\n height: 40px;\n border-radius: 7px;\n color: #fff;\n background: #f16154;\n }\n }\n }\n div[notice] {\n margin-top: 7px;\n\n div[name] {\n margin-left: 4px;\n }\n div[content] {\n background-color: #ebc8321a;\n border-radius: 10px;\n padding: 10px;\n font-size: 14px;\n margin-top: 6px;\n }\n }\n }\n\n div[right-bottom] {\n flex: 2;\n\n div[table-container] {\n width: 100%;\n height: 15rem;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n\n hr {\n position: sticky;\n width: 100%;\n margin: 0;\n top: 0px;\n border: 1px solid #3295f1;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n }\n\n thead {\n position: sticky;\n top: 2px;\n background-color: #464651;\n color: #fff;\n z-index: 1;\n }\n\n thead th {\n padding: 5px;\n font-size: 15px;\n }\n\n tbody td {\n border-bottom: 1px solid #cccccc;\n padding: 5px 3px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: 15px;\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행 중 프로젝트 상세 정보'\n }\n }\n\n private defaultProject = {\n name: '',\n buildingComplex: {\n address: '',\n area: 0,\n constructionCompany: '',\n clientCompany: '',\n supervisoryCompany: '',\n designCompany: '',\n constructionType: '',\n buildings: []\n }\n }\n\n @state() projectId: string = ''\n @state() project: Project = { ...this.defaultProject }\n @state() inspectionSummary: InspectionSummary = {\n request: 0,\n pass: 0,\n fail: 0\n }\n @state() weather: Weather = {\n rain: 0,\n temperature: 0,\n humidity: 0,\n wind: ''\n }\n\n render() {\n return html`\n <div header>\n <h2>${this.project.name}</h2>\n <div button-container>\n <md-elevated-button href=${`project-update/${this.project.id}`}>\n <md-icon slot=\"icon\">assignment</md-icon>프로젝트 정보 수정\n </md-elevated-button>\n <md-elevated-button href=${`project-plan-management/${this.project.id}`}>\n <md-icon slot=\"icon\">description</md-icon>도면 관리\n </md-elevated-button>\n <md-elevated-button href=${`project-task-update/${this.project.id}`}>\n <md-icon slot=\"icon\">event_note</md-icon>공정표 관리\n </md-elevated-button>\n </div>\n </div>\n\n <div body>\n <div>\n <div left-top>\n <h3>기본 정보</h3>\n <div content-1>\n <img project-img src=${this.project.mainPhoto?.fullpath \|\| ''} />\n\n <div>\n <div row>\n <span>- 면적 : </span>\n <span>${this.project.buildingComplex?.area}</span>\n </div>\n <div row>\n <span>- 착공 ~ 준공 : </span>\n <span bold>${this.project.startDate} ~ ${this.project.endDate}</span>\n </div>\n <div row>\n <span>- 발주처 : </span>\n <span>${this.project.buildingComplex?.clientCompany}</span>\n </div>\n <div row>\n <span>- 건설사 : </span>\n <span>${this.project.buildingComplex?.constructionCompany}</span>\n </div>\n <div row>\n <span>- 감리사 : </span>\n <span>${this.project.buildingComplex?.supervisoryCompany}</span>\n </div>\n <div row>\n <span>- 설계사 : </span>\n <span>${this.project.buildingComplex?.designCompany}</span>\n </div>\n </div>\n </div>\n\n <div content-2>\n <div row>\n <span>- 건설구분 : </span>\n <span>${this.project.buildingComplex?.constructionType}</span>\n </div>\n <div row>\n <span>- 공사금액 : </span>\n <span>${this.project.buildingComplex?.constructionCost}</span>\n </div>\n <div row>\n <span>- 세대수 : </span>\n <span>${this.project.buildingComplex?.householdCount}</span>\n </div>\n <div row>\n <span>- 기타 : </span>\n <span>${this.project.buildingComplex?.etc}</span>\n </div>\n </div>\n </div>\n\n <div left-bottom>\n <h3>조감도(BIM도면)</h3>\n <img src=${this.project.buildingComplex?.drawing?.fullpath \|\| ''} />\n <div>\n <div subject bold>개별 단지 상세정보 바로가기</div>\n <div building-container>\n ${this.project.buildingComplex?.buildings?.map(building => {\n return html`<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>\n ${building.name}\n </md-outlined-button>`\n })}\n </div>\n </div>\n </div>\n </div>\n\n <div>\n <div right-top>\n <h3>프로젝트 현황</h3>\n <div state>\n <span progress>\n <ox-progress-circle\n .value=${70}\n titleText=\"전체\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#0595E5\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf5fd\"\n ></ox-progress-circle>\n <div>전체공정율(%)</div>\n </span>\n <span progress>\n <ox-progress-circle\n .value=${30.4}\n titleText=\"주간\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#06B5AF\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf7f7\"\n ></ox-progress-circle>\n <div week>주간공정율(%)</div>\n </span>\n <span weather>\n <div bold>현장현황</div>\n <div>\n <span><md-icon slot=\"icon\">rainy</md-icon> 강수확률</span>\n <span bold>${this.weather.rain}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">humidity_percentage</md-icon> 습도</span>\n <span bold>${this.weather.humidity}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">thermostat</md-icon> 온도</span>\n <span bold>${this.weather.temperature}°C</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">air</md-icon> 풍향</span>\n <span bold>${this.weather.wind}</span>\n </div>\n </span>\n </div>\n <div inspection>\n <span name bold>\n <md-icon slot=\"icon\">list_alt_add</md-icon>\n 시공검측<br />현황\n </span>\n <span>\n <div>검측요청</div>\n <div bold>${this.inspectionSummary.request}</div>\n </span>\n <span>\n <div>합격</div>\n <div bold pass>${this.inspectionSummary.pass}</div>\n </span>\n <span>\n <div>불합격</div>\n <div bold fail>${this.inspectionSummary.fail}</div>\n </span>\n </div>\n <div notice>\n <div name bold>공지사항</div>\n <div content>${this.project.buildingComplex.notice}</div>\n </div>\n </div>\n\n <div right-bottom>\n <h3>기타 사항</h3>\n <div table-container>\n <hr />\n <table>\n <thead>\n <tr>\n <th width=\"20%\">검측 위치</th>\n <th width=\"20%\">공종</th>\n <th width=\"40%\">내용</th>\n <th width=\"20%\">검측결과</th>\n </tr>\n </thead>\n <tbody>\n ${[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map(inspection => {\n return html`<tr>\n <td>101동 3층</td>\n <td bold>단열공사</td>\n <td>단열재 시공 층간 차음재 시공 벽돌/블록 및 ALC 패널 공사</td>\n <td bold>검측완료</td>\n </tr>`\n })}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n async pageInitialized(lifecycle: PageLifecycle) {}\n\n async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n if (this.active) {\n this.projectId = lifecycle.resourceId \|\| ''\n await this.initProject(this.projectId)\n }\n }\n\n async initProject(projectId: string = '') {\n const response = await client.query({\n query: gql`\n query Project($id: String!, $projectId: String!) {\n project(id: $id) {\n id\n name\n startDate\n endDate\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n buildingComplex {\n id\n address\n latitude\n longitude\n area\n clientCompany\n constructionCompany\n supervisoryCompany\n designCompany\n drawing {\n id\n name\n fullpath\n }\n constructionType\n constructionCost\n etc\n notice\n householdCount\n buildingCount\n buildings {\n id\n name\n floorCount\n }\n }\n }\n\n inspectionSummary(projectId: $projectId) {\n request\n pass\n fail\n }\n }\n `,\n variables: {\n id: projectId,\n projectId\n }\n })\n\n if (response.errors) return\n\n this.project = response.data?.project \|\| {}\n this.inspectionSummary = response.data?.inspectionSummary \|\| {}\n\n const { latitude, longitude } = this.project?.buildingComplex\n if (latitude && longitude) {\n this.weather = await _getWeather(latitude, longitude)\n }\n\n console.log('init project : ', this.project)\n }\n}\n"]}
1	+ {"version":3,"file":"project-detail.js","sourceRoot":"","sources":["../../../client/pages/project/project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/outlined-button.js'\n\nimport { PageView } from '@operato/shell'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\n\nimport gql from 'graphql-tag'\nimport { Project } from './project-list'\nimport _getWeather from '../lib/waether'\nimport '@operato/chart/ox-progress-circle.js'\n\nexport interface InspectionSummary {\n request: number\n pass: number\n fail: number\n}\n\ninterface Weather {\n rain: number\n temperature: number\n humidity: number\n wind: string\n}\n\n@customElement('project-detail')\nexport class ProjectDetail extends ScopedElementsMixin(PageView) {\n static styles = [\n css`\n :host {\n display: grid;\n grid-template-rows: 75px auto;\n color: #4e5055;\n\n width: 100%;\n background-color: #f7f7f7;\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\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 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 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 div[body] {\n display: flex;\n margin: 0px 25px 25px 25px;\n gap: 10px;\n\n h3 {\n color: #2e79be;\n font-size: 18px;\n margin: 0px;\n }\n\n & > div {\n display: flex;\n flex: 1;\n gap: 10px;\n flex-direction: column;\n\n & > div {\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n border: 1px solid #cccccc80;\n gap: 10px;\n padding: 15px;\n border-radius: 5px;\n }\n\n div[left-top] {\n div[content-1] {\n display: flex;\n align-items: center;\n gap: 15px;\n\n img {\n width: 42%;\n height: auto;\n aspect-ratio: 1920 / 1080;\n }\n img[no-image] {\n object-fit: contain;\n opacity: 0.5;\n }\n\n div[row] {\n line-height: 25px;\n }\n }\n div[content-2] {\n height: 65px;\n overflow-y: auto;\n }\n }\n\n div[left-bottom] {\n [building-complex-img] {\n width: 100%;\n aspect-ratio: 2 / 1;\n }\n img {\n opacity: 0.5;\n }\n\n div[subject] {\n margin-bottom: 7px;\n }\n div[building-container] {\n display: block;\n height: 40px;\n overflow-y: auto;\n\n & > {\n margin-right: 10px;\n margin-bottom: 7px;\n }\n }\n }\n\n div[right-top] {\n flex: 3;\n\n div[state] {\n display: grid;\n grid-template-columns: 0.95fr 0.95fr 1.1fr;\n gap: 15px;\n\n span[progress] {\n max-width: 170px;\n text-align: center;\n display: flex;\n justify-self: center;\n flex-direction: column;\n width: 100%;\n\n & > div {\n font-weight: bold;\n color: #2e79be;\n font-size: 12px;\n margin-top: 5px;\n }\n & > div[week] {\n color: #06b5af;\n }\n }\n span[weather] {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin-left: 10px;\n\n & > div {\n display: flex;\n justify-content: space-between;\n\n & > span {\n display: flex;\n }\n }\n }\n }\n div[inspection] {\n display: grid;\n grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr;\n margin-top: 5px;\n background: #f6f6f6;\n border-radius: 7px;\n padding: 7px 0px;\n\n & > span {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n div[pass] {\n color: #1bb401;\n }\n div[fail] {\n color: #ff4444;\n }\n }\n & > span[name] {\n flex-direction: row;\n text-align: right;\n gap: 10px;\n\n md-icon {\n width: 40px;\n height: 40px;\n border-radius: 7px;\n color: #fff;\n background: #f16154;\n }\n }\n }\n div[notice] {\n margin-top: 7px;\n\n div[name] {\n margin-left: 4px;\n }\n div[content] {\n background-color: #ebc8321a;\n border-radius: 10px;\n padding: 10px;\n font-size: 14px;\n margin-top: 6px;\n }\n }\n }\n\n div[right-bottom] {\n flex: 2;\n\n div[table-container] {\n width: 100%;\n height: 15rem;\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n\n hr {\n position: sticky;\n width: 100%;\n margin: 0;\n top: 0px;\n border: 1px solid #3295f1;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n }\n\n thead {\n position: sticky;\n top: 2px;\n background-color: #464651;\n color: #fff;\n z-index: 1;\n }\n\n thead th {\n padding: 5px;\n font-size: 15px;\n }\n\n tbody td {\n border-bottom: 1px solid #cccccc;\n padding: 5px 3px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: 15px;\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행 중 프로젝트 상세 정보'\n }\n }\n\n private defaultProject = {\n name: '',\n buildingComplex: {\n address: '',\n area: 0,\n constructionCompany: '',\n clientCompany: '',\n supervisoryCompany: '',\n designCompany: '',\n constructionType: '',\n buildings: []\n }\n }\n\n @state() projectId: string = ''\n @state() project: Project = { ...this.defaultProject }\n @state() inspectionSummary: InspectionSummary = {\n request: 0,\n pass: 0,\n fail: 0\n }\n @state() weather: Weather = {\n rain: 0,\n temperature: 0,\n humidity: 0,\n wind: ''\n }\n\n render() {\n return html`\n <div header>\n <h2>${this.project.name}</h2>\n <div button-container>\n <md-elevated-button href=${`project-update/${this.project.id}`}>\n <md-icon slot=\"icon\">assignment</md-icon>프로젝트 정보 수정\n </md-elevated-button>\n <md-elevated-button href=${`project-plan-management/${this.project.id}`}>\n <md-icon slot=\"icon\">description</md-icon>도면 관리\n </md-elevated-button>\n <md-elevated-button href=${`project-task-update/${this.project.id}`}>\n <md-icon slot=\"icon\">event_note</md-icon>공정표 관리\n </md-elevated-button>\n </div>\n </div>\n\n <div body>\n <div>\n <div left-top>\n <h3>기본 정보</h3>\n <div content-1>\n <img\n ?no-image=${!this.project.mainPhoto?.fullpath}\n src=${this.project.mainPhoto?.fullpath \|\| '/assets/images/no-image.png'}\n />\n\n <div>\n <div row>\n <span>- 면적 : </span>\n <span>${this.project.buildingComplex?.area}</span>\n </div>\n <div row>\n <span>- 착공 ~ 준공 : </span>\n <span bold>${this.project.startDate} ~ ${this.project.endDate}</span>\n </div>\n <div row>\n <span>- 발주처 : </span>\n <span>${this.project.buildingComplex?.clientCompany}</span>\n </div>\n <div row>\n <span>- 건설사 : </span>\n <span>${this.project.buildingComplex?.constructionCompany}</span>\n </div>\n <div row>\n <span>- 감리사 : </span>\n <span>${this.project.buildingComplex?.supervisoryCompany}</span>\n </div>\n <div row>\n <span>- 설계사 : </span>\n <span>${this.project.buildingComplex?.designCompany}</span>\n </div>\n </div>\n </div>\n\n <div content-2>\n <div row>\n <span>- 건설구분 : </span>\n <span>${this.project.buildingComplex?.constructionType}</span>\n </div>\n <div row>\n <span>- 공사금액 : </span>\n <span>${this.project.buildingComplex?.constructionCost}</span>\n </div>\n <div row>\n <span>- 세대수 : </span>\n <span>${this.project.buildingComplex?.householdCount}</span>\n </div>\n <div row>\n <span>- 기타 : </span>\n <span>${this.project.buildingComplex?.etc}</span>\n </div>\n </div>\n </div>\n\n <div left-bottom>\n <h3>조감도(BIM도면)</h3>\n ${this.project.buildingComplex?.drawing?.fullpath\n ? html`<div building-complex-img></div>`\n : html`<img building-complex-img src=\"/assets/images/img-building-complex-default.jpg\" />`}\n <div>\n <div subject bold>개별 단지 상세정보 바로가기</div>\n <div building-container>\n ${this.project.buildingComplex?.buildings?.map(building => {\n return html`<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>\n ${building.name}\n </md-outlined-button>`\n })}\n </div>\n </div>\n </div>\n </div>\n\n <div>\n <div right-top>\n <h3>프로젝트 현황</h3>\n <div state>\n <span progress>\n <ox-progress-circle\n .value=${70}\n titleText=\"전체\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#0595E5\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf5fd\"\n ></ox-progress-circle>\n <div>전체공정율(%)</div>\n </span>\n <span progress>\n <ox-progress-circle\n .value=${30.4}\n titleText=\"주간\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#06B5AF\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf7f7\"\n ></ox-progress-circle>\n <div week>주간공정율(%)</div>\n </span>\n <span weather>\n <div bold>현장현황</div>\n <div>\n <span><md-icon slot=\"icon\">rainy</md-icon> 강수확률</span>\n <span bold>${this.weather.rain}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">humidity_percentage</md-icon> 습도</span>\n <span bold>${this.weather.humidity}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">thermostat</md-icon> 온도</span>\n <span bold>${this.weather.temperature}°C</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">air</md-icon> 풍향</span>\n <span bold>${this.weather.wind}</span>\n </div>\n </span>\n </div>\n <div inspection>\n <span name bold>\n <md-icon slot=\"icon\">list_alt_add</md-icon>\n 시공검측<br />현황\n </span>\n <span>\n <div>검측요청</div>\n <div bold>${this.inspectionSummary.request}</div>\n </span>\n <span>\n <div>합격</div>\n <div bold pass>${this.inspectionSummary.pass}</div>\n </span>\n <span>\n <div>불합격</div>\n <div bold fail>${this.inspectionSummary.fail}</div>\n </span>\n </div>\n <div notice>\n <div name bold>공지사항</div>\n <div content>${this.project.buildingComplex.notice}</div>\n </div>\n </div>\n\n <div right-bottom>\n <h3>기타 사항</h3>\n <div table-container>\n <hr />\n <table>\n <thead>\n <tr>\n <th width=\"20%\">검측 위치</th>\n <th width=\"20%\">공종</th>\n <th width=\"40%\">내용</th>\n <th width=\"20%\">검측결과</th>\n </tr>\n </thead>\n <tbody>\n ${[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map(inspection => {\n return html`<tr>\n <td>101동 3층</td>\n <td bold>단열공사</td>\n <td>단열재 시공 층간 차음재 시공 벽돌/블록 및 ALC 패널 공사</td>\n <td bold>검측완료</td>\n </tr>`\n })}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n async pageInitialized(lifecycle: PageLifecycle) {}\n\n async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n if (this.active) {\n this.projectId = lifecycle.resourceId \|\| ''\n await this.initProject(this.projectId)\n }\n }\n\n async initProject(projectId: string = '') {\n const response = await client.query({\n query: gql`\n query Project($id: String!, $projectId: String!) {\n project(id: $id) {\n id\n name\n startDate\n endDate\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n buildingComplex {\n id\n address\n latitude\n longitude\n area\n clientCompany\n constructionCompany\n supervisoryCompany\n designCompany\n drawing {\n id\n name\n fullpath\n }\n constructionType\n constructionCost\n etc\n notice\n householdCount\n buildingCount\n buildings {\n id\n name\n floorCount\n }\n }\n }\n\n inspectionSummary(projectId: $projectId) {\n request\n pass\n fail\n }\n }\n `,\n variables: {\n id: projectId,\n projectId\n }\n })\n\n if (response.errors) return\n\n this.project = response.data?.project \|\| {}\n this.inspectionSummary = response.data?.inspectionSummary \|\| {}\n\n const { latitude, longitude } = this.project?.buildingComplex\n if (latitude && longitude) {\n this.weather = await _getWeather(latitude, longitude)\n }\n\n console.log('init project : ', this.project)\n }\n}\n"]}

package/dist-client/pages/project/project-list.js CHANGED Viewed

@@ -50,11 +50,15 @@ let ProjectListPage = class ProjectListPage extends ScopedElementsMixin(PageView
       <div body>
         ${(_a = this.projectList) === null || _a === void 0 ? void 0 : _a.map((project) => {
-            var _a;
+            var _a, _b;
             return html `
             <div project-container>
               <a href=${`project-detail/${project.id}`}>
-                <img project-img src=${((_a = project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || ''} />
+                <img
+                  ?no-image=${!((_a = project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath)}
+                  project-img
+                  src=${((_b = project.mainPhoto) === null || _b === void 0 ? void 0 : _b.fullpath) || '/assets/images/no-image.png'}
+                />
                 <span project-info>
                   <div name>${project.name}</div>
@@ -225,6 +229,10 @@ ProjectListPage.styles = [
             width: 285px;
             background-color: #cccccc80;
           }
+          img[project-img][no-image] {
+            object-fit: contain;
+            opacity: 0.5;
+          }
           span[project-info] {
             flex: 0.45;

package/dist-client/pages/project/project-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"project-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { Attachment } from '@things-factory/attachment-base'\nimport type { FileUpload } from 'graphql-upload/GraphQLUpload.js'\n\nexport enum ProjectStatus {\n 'PROCEEDING' = '10',\n 'COMPLICATED' = '20'\n}\nexport enum InspectionStatus {\n REQUEST = 'REQUEST',\n PASS = 'PASS',\n FAIL = 'FAIL'\n}\n\nexport interface Project {\n id?: string\n name: string\n startDate?: string\n endDate?: string\n mainPhoto?: Attachment\n mainPhotoUpload?: FileUpload\n totalProgress?: number\n weeklyProgress?: number\n kpi?: number\n inspPassRate?: number\n robotProgressRate?: number\n structuralSafetyRate?: number\n buildingComplex: BuildingComplex\n}\nexport interface BuildingComplex {\n id?: string\n address?: string\n latitude?: number\n longitude?: number\n area?: number\n constructionCompany?: string\n clientCompany?: string\n designCompany?: string\n supervisoryCompany?: string\n drawing?: Attachment\n drawingUpload?: FileUpload\n constructionType?: string\n constructionCost?: number\n etc?: string\n householdCount?: number\n buildingCount?: number\n notice?: string\n planXScale?: number\n planYScale?: number\n buildings?: Building[]\n}\nexport interface Building {\n id?: string\n name: string \| undefined\n floorCount: number \| undefined\n drawing?: Attachment\n drawingUpload?: FileUpload\n buildingLevels?: BuildingLevel[]\n}\n\nexport interface BuildingLevel {\n id?: string\n floor?: number\n mainDrawing?: Attachment\n mainDrawingImage?: string\n mainDrawingThumbnail?: string\n mainDrawingUpload?: FileUpload\n elevationDrawing?: Attachment\n elevationDrawingThumbnail?: string\n elevationDrawingUpload?: FileUpload\n rebarDistributionDrawing?: Attachment\n rebarDistributionDrawingThumbnail?: string\n rebarDistributionDrawingUpload?: FileUpload\n buildingInspections?: BuildingInspection[]\n}\n\nexport interface BuildingInspection {\n id?: string\n indexX?: number\n indexY?: number\n status?: InspectionStatus\n detail?: string\n attatchments?: Attachment[]\n // buildingInspectionAttachments?: BuildingInspectionAttachment[]\n}\n\n@customElement('project-list')\nexport class ProjectListPage extends ScopedElementsMixin(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n width: 100%;\n height: 100%;\n background-color: #f7f7f7;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n div[header] {\n display: flex;\n height: 100px;\n align-items: center;\n background-color: #2ea4df1a;\n border: 1px solid #2ea4df33;\n margin: 15px 23px;\n font-size: 18px;\n padding: 7px;\n border-radius: 5px;\n\n md-filled-text-field[type='search'] {\n margin-left: 5px;\n margin-right: 26px;\n\n --md-filled-text-field-container-shape: 0px;\n --md-sys-color-primary: #006a6a;\n --md-sys-color-surface-container-highest: transparent;\n --md-filled-text-field-label-text-color: #999999;\n --md-filled-text-field-input-text-color: #4e5055;\n }\n\n md-elevated-button[add-project] {\n font-weight: bold;\n font-size: 16px;\n margin-left: 17px;\n padding: 13px 20px;\n\n --md-sys-color-surface-container-low: #24be7b;\n --md-sys-color-primary: #ffffff;\n --md-elevated-button-container-shape: 7px;\n }\n }\n\n div[body] {\n div[project-container] {\n height: 140px;\n margin: 17px 23px;\n background-color: #ffffff;\n border: 1px solid #cccccc80;\n border-radius: 5px;\n\n & > a {\n display: flex;\n width: 100%;\n height: 100%;\n text-decoration: none;\n color: #000;\n }\n\n img[project-img] {\n width: 285px;\n background-color: #cccccc80;\n }\n\n span[project-info] {\n flex: 0.45;\n padding: 6px 15px;\n font-size: 16px;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n div[name] {\n color: #2e79be;\n font-weight: bold;\n font-size: 19px;\n margin-bottom: 2px;\n }\n }\n\n span[project-state] {\n flex: 0.55;\n padding: 10px 20px;\n\n & > div {\n margin-bottom: 3px;\n }\n\n div[progress] {\n position: relative;\n\n md-linear-progress {\n --md-linear-progress-track-height: 18px;\n --md-linear-progress-active-indicator-height: 18px;\n --md-linear-progress-track-shape: 5px;\n --md-sys-color-primary: #0595e51a;\n --md-sys-color-surface-container-highest: #0595e533;\n }\n\n span {\n position: absolute;\n top: 0;\n left: 12px;\n font-size: 12px;\n font-weight: bold;\n color: #2e79be;\n\n &:last-child {\n left: unset;\n right: 12px;\n }\n }\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행중 프로젝트'\n }\n }\n\n @state() private projectName: string = ''\n @state() private projectList: Project[] = []\n @state() private projectCount: number = 0\n\n render() {\n return html`\n <div header>\n <label>프로젝트 이름</label>\n <md-filled-text-field\n name=\"projectName\"\n type=\"search\"\n label=\"프로젝트 이름\"\n .value=${this.projectName}\n @input=${this._onInputChange}\n @keypress=${this._onKeypress}\n >\n <md-icon slot=\"leading-icon\">search</md-icon>\n </md-filled-text-field>\n\n <strong>총 ${this.projectCount}개</strong>\n </div>\n\n <div body>\n ${this.projectList?.map((project: Project) => {\n return html`\n <div project-container>\n <a href=${`project-detail/${project.id}`}>\n <img project-img src=${project.mainPhoto?.fullpath \|\| ''} />\n\n <span project-info>\n <div name>${project.name}</div>\n <div content>${project.buildingComplex.address}</div>\n <div content>면적: ${project.buildingComplex.area}㎡</div>\n <div content>착공~준공: ${project.startDate}~${project.endDate}</div>\n <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>\n </span>\n\n <span project-state>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.totalProgress \|\| 0}> </md-linear-progress>\n <span>전체</span>\n <span>${project.totalProgress \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.weeklyProgress \|\| 0}> </md-linear-progress>\n <span>주간</span>\n <span>${project.weeklyProgress \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.kpi \|\| 0}> </md-linear-progress>\n <span>KPI</span>\n <span>${project.kpi \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.inspPassRate \|\| 0}> </md-linear-progress>\n <span>Inspection Passing Rate</span>\n <span>${project.inspPassRate \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.robotProgressRate \|\| 0}> </md-linear-progress>\n <span>Robot Progress</span>\n <span>${project.robotProgressRate \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.structuralSafetyRate \|\| 0}> </md-linear-progress>\n <span>Structural safety</span>\n <span>${project.structuralSafetyRate \|\| 0}%</span>\n </div>\n </span>\n </a>\n </div>\n `\n })}\n </div>\n `\n }\n\n async pageInitialized(lifecycle: any) {\n this.getProjectList()\n }\n\n async pageUpdated(changes: any, lifecycle: any) {}\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($projectName: String!) {\n projects(projectName: $projectName) {\n items {\n id\n name\n startDate\n endDate\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n buildingComplex {\n address\n area\n clientCompany\n }\n }\n total\n }\n }\n `,\n variables: {\n projectName: this.projectName \|\| ''\n }\n })\n\n this.projectList = response.data.projects?.items \|\| []\n this.projectCount = response.data.projects?.total \|\| 0\n }\n\n // Input 요소의 값이 변경될 때 호출되는 콜백 함수\n private _onInputChange(event: InputEvent) {\n const target = event.target as HTMLInputElement\n this[target.name] = target.value\n }\n\n // 검색창에서 엔터입력시 검색\n private _onKeypress(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.getProjectList()\n }\n }\n}\n"]}
1	+ {"version":3,"file":"project-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { Attachment } from '@things-factory/attachment-base'\nimport type { FileUpload } from 'graphql-upload/GraphQLUpload.js'\n\nexport enum ProjectStatus {\n 'PROCEEDING' = '10',\n 'COMPLICATED' = '20'\n}\nexport enum InspectionStatus {\n REQUEST = 'REQUEST',\n PASS = 'PASS',\n FAIL = 'FAIL'\n}\n\nexport interface Project {\n id?: string\n name: string\n startDate?: string\n endDate?: string\n mainPhoto?: Attachment\n mainPhotoUpload?: FileUpload\n totalProgress?: number\n weeklyProgress?: number\n kpi?: number\n inspPassRate?: number\n robotProgressRate?: number\n structuralSafetyRate?: number\n buildingComplex: BuildingComplex\n}\nexport interface BuildingComplex {\n id?: string\n address?: string\n latitude?: number\n longitude?: number\n area?: number\n constructionCompany?: string\n clientCompany?: string\n designCompany?: string\n supervisoryCompany?: string\n drawing?: Attachment\n drawingUpload?: FileUpload\n constructionType?: string\n constructionCost?: number\n etc?: string\n householdCount?: number\n buildingCount?: number\n notice?: string\n planXScale?: number\n planYScale?: number\n buildings?: Building[]\n}\nexport interface Building {\n id?: string\n name: string \| undefined\n floorCount: number \| undefined\n drawing?: Attachment\n drawingUpload?: FileUpload\n buildingLevels?: BuildingLevel[]\n}\n\nexport interface BuildingLevel {\n id?: string\n floor?: number\n mainDrawing?: Attachment\n mainDrawingImage?: string\n mainDrawingThumbnail?: string\n mainDrawingUpload?: FileUpload\n elevationDrawing?: Attachment\n elevationDrawingThumbnail?: string\n elevationDrawingUpload?: FileUpload\n rebarDistributionDrawing?: Attachment\n rebarDistributionDrawingThumbnail?: string\n rebarDistributionDrawingUpload?: FileUpload\n buildingInspections?: BuildingInspection[]\n}\n\nexport interface BuildingInspection {\n id?: string\n indexX?: number\n indexY?: number\n status?: InspectionStatus\n detail?: string\n attatchments?: Attachment[]\n // buildingInspectionAttachments?: BuildingInspectionAttachment[]\n}\n\n@customElement('project-list')\nexport class ProjectListPage extends ScopedElementsMixin(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n width: 100%;\n height: 100%;\n background-color: #f7f7f7;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n div[header] {\n display: flex;\n height: 100px;\n align-items: center;\n background-color: #2ea4df1a;\n border: 1px solid #2ea4df33;\n margin: 15px 23px;\n font-size: 18px;\n padding: 7px;\n border-radius: 5px;\n\n md-filled-text-field[type='search'] {\n margin-left: 5px;\n margin-right: 26px;\n\n --md-filled-text-field-container-shape: 0px;\n --md-sys-color-primary: #006a6a;\n --md-sys-color-surface-container-highest: transparent;\n --md-filled-text-field-label-text-color: #999999;\n --md-filled-text-field-input-text-color: #4e5055;\n }\n\n md-elevated-button[add-project] {\n font-weight: bold;\n font-size: 16px;\n margin-left: 17px;\n padding: 13px 20px;\n\n --md-sys-color-surface-container-low: #24be7b;\n --md-sys-color-primary: #ffffff;\n --md-elevated-button-container-shape: 7px;\n }\n }\n\n div[body] {\n div[project-container] {\n height: 140px;\n margin: 17px 23px;\n background-color: #ffffff;\n border: 1px solid #cccccc80;\n border-radius: 5px;\n\n & > a {\n display: flex;\n width: 100%;\n height: 100%;\n text-decoration: none;\n color: #000;\n }\n\n img[project-img] {\n width: 285px;\n background-color: #cccccc80;\n }\n img[project-img][no-image] {\n object-fit: contain;\n opacity: 0.5;\n }\n\n span[project-info] {\n flex: 0.45;\n padding: 6px 15px;\n font-size: 16px;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n div[name] {\n color: #2e79be;\n font-weight: bold;\n font-size: 19px;\n margin-bottom: 2px;\n }\n }\n\n span[project-state] {\n flex: 0.55;\n padding: 10px 20px;\n\n & > div {\n margin-bottom: 3px;\n }\n\n div[progress] {\n position: relative;\n\n md-linear-progress {\n --md-linear-progress-track-height: 18px;\n --md-linear-progress-active-indicator-height: 18px;\n --md-linear-progress-track-shape: 5px;\n --md-sys-color-primary: #0595e51a;\n --md-sys-color-surface-container-highest: #0595e533;\n }\n\n span {\n position: absolute;\n top: 0;\n left: 12px;\n font-size: 12px;\n font-weight: bold;\n color: #2e79be;\n\n &:last-child {\n left: unset;\n right: 12px;\n }\n }\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행중 프로젝트'\n }\n }\n\n @state() private projectName: string = ''\n @state() private projectList: Project[] = []\n @state() private projectCount: number = 0\n\n render() {\n return html`\n <div header>\n <label>프로젝트 이름</label>\n <md-filled-text-field\n name=\"projectName\"\n type=\"search\"\n label=\"프로젝트 이름\"\n .value=${this.projectName}\n @input=${this._onInputChange}\n @keypress=${this._onKeypress}\n >\n <md-icon slot=\"leading-icon\">search</md-icon>\n </md-filled-text-field>\n\n <strong>총 ${this.projectCount}개</strong>\n </div>\n\n <div body>\n ${this.projectList?.map((project: Project) => {\n return html`\n <div project-container>\n <a href=${`project-detail/${project.id}`}>\n <img\n ?no-image=${!project.mainPhoto?.fullpath}\n project-img\n src=${project.mainPhoto?.fullpath \|\| '/assets/images/no-image.png'}\n />\n\n <span project-info>\n <div name>${project.name}</div>\n <div content>${project.buildingComplex.address}</div>\n <div content>면적: ${project.buildingComplex.area}㎡</div>\n <div content>착공~준공: ${project.startDate}~${project.endDate}</div>\n <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>\n </span>\n\n <span project-state>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.totalProgress \|\| 0}> </md-linear-progress>\n <span>전체</span>\n <span>${project.totalProgress \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.weeklyProgress \|\| 0}> </md-linear-progress>\n <span>주간</span>\n <span>${project.weeklyProgress \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.kpi \|\| 0}> </md-linear-progress>\n <span>KPI</span>\n <span>${project.kpi \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.inspPassRate \|\| 0}> </md-linear-progress>\n <span>Inspection Passing Rate</span>\n <span>${project.inspPassRate \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.robotProgressRate \|\| 0}> </md-linear-progress>\n <span>Robot Progress</span>\n <span>${project.robotProgressRate \|\| 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.structuralSafetyRate \|\| 0}> </md-linear-progress>\n <span>Structural safety</span>\n <span>${project.structuralSafetyRate \|\| 0}%</span>\n </div>\n </span>\n </a>\n </div>\n `\n })}\n </div>\n `\n }\n\n async pageInitialized(lifecycle: any) {\n this.getProjectList()\n }\n\n async pageUpdated(changes: any, lifecycle: any) {}\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($projectName: String!) {\n projects(projectName: $projectName) {\n items {\n id\n name\n startDate\n endDate\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n buildingComplex {\n address\n area\n clientCompany\n }\n }\n total\n }\n }\n `,\n variables: {\n projectName: this.projectName \|\| ''\n }\n })\n\n this.projectList = response.data.projects?.items \|\| []\n this.projectCount = response.data.projects?.total \|\| 0\n }\n\n // Input 요소의 값이 변경될 때 호출되는 콜백 함수\n private _onInputChange(event: InputEvent) {\n const target = event.target as HTMLInputElement\n this[target.name] = target.value\n }\n\n // 검색창에서 엔터입력시 검색\n private _onKeypress(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.getProjectList()\n }\n }\n}\n"]}

package/dist-client/pages/project/project-schedule-list.js CHANGED Viewed

@@ -39,11 +39,15 @@ let ProjectScheduleListPage = class ProjectScheduleListPage extends ScopedElemen
       <div body>
         ${(_a = this.projectList) === null || _a === void 0 ? void 0 : _a.map((project) => {
-            var _a;
+            var _a, _b;
             return html `
             <div project-container>
               <a href=${`project-schedule/${project.id}`}>
-                <img project-img src=${((_a = project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || ''} />
+                <img
+                  ?no-image=${!((_a = project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath)}
+                  project-img
+                  src=${((_b = project.mainPhoto) === null || _b === void 0 ? void 0 : _b.fullpath) || '/assets/images/no-image.png'}
+                />
                 <span project-info>
                   <div name>${project.name}</div>
@@ -55,14 +59,12 @@ let ProjectScheduleListPage = class ProjectScheduleListPage extends ScopedElemen
                 <span project-state>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.totalProgress || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.totalProgress || 0}> </md-linear-progress>
                     <span>전체</span>
                     <span>${project.totalProgress || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.weeklyProgress || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.weeklyProgress || 0}> </md-linear-progress>
                     <span>주간</span>
                     <span>${project.weeklyProgress || 0}%</span>
                   </div>
@@ -77,14 +79,12 @@ let ProjectScheduleListPage = class ProjectScheduleListPage extends ScopedElemen
                     <span>${project.inspPassRate || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.robotProgressRate || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.robotProgressRate || 0}> </md-linear-progress>
                     <span>Robot Progress</span>
                     <span>${project.robotProgressRate || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.structuralSafetyRate || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.structuralSafetyRate || 0}> </md-linear-progress>
                     <span>Structural safety</span>
                     <span>${project.structuralSafetyRate || 0}%</span>
                   </div>
@@ -218,6 +218,10 @@ ProjectScheduleListPage.styles = [
             width: 285px;
             background-color: #cccccc80;
           }
+          img[project-img][no-image] {
+            object-fit: contain;
+            opacity: 0.5;
+          }
           span[project-info] {
             flex: 0.45;