@dssp/supervision 0.0.30 → 0.0.32

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 (12) hide show
  1. package/client/pages/building-inspection/building-inspection-detail-drawing.ts +2 -2
  2. package/client/pages/building-inspection/building-inspection-list.ts +75 -58
  3. package/client/pages/building-inspection/component/building-inspection-detail-header.ts +15 -11
  4. package/dist-client/pages/building-inspection/building-inspection-detail-drawing.js +2 -2
  5. package/dist-client/pages/building-inspection/building-inspection-detail-drawing.js.map +1 -1
  6. package/dist-client/pages/building-inspection/building-inspection-list.js +75 -58
  7. package/dist-client/pages/building-inspection/building-inspection-list.js.map +1 -1
  8. package/dist-client/pages/building-inspection/component/building-inspection-detail-header.js +15 -11
  9. package/dist-client/pages/building-inspection/component/building-inspection-detail-header.js.map +1 -1
  10. package/dist-client/tsconfig.tsbuildinfo +1 -1
  11. package/dist-server/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +5 -5
package/client/pages/building-inspection/building-inspection-detail-drawing.ts CHANGED
@@ -28,11 +28,11 @@ export class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageVie
28
28
  css`
29
29
  :host {
30
30
  display: grid;
31
- grid-template-rows: 75px auto;
31
+ grid-template-rows: 55px auto;
32
32
  color: #4e5055;
33
33
 
34
34
  width: 100%;
35
- background-color: #f7f7f7;
35
+ background-color: var(--md-sys-color-background, #f6f6f6);
36
36
  overflow-y: auto;
37
37
 
38
38
  --grid-record-emphasized-background-color: red;
package/client/pages/building-inspection/building-inspection-list.ts CHANGED
@@ -51,11 +51,11 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
51
51
  css`
52
52
  :host {
53
53
  display: grid;
54
- grid-template-rows: 75px auto;
54
+ grid-template-rows: 55px auto;
55
55
  color: #4e5055;
56
56
 
57
57
  width: 100%;
58
- background-color: #f7f7f7;
58
+ background-color: var(--md-sys-color-background, #f6f6f6);
59
59
  overflow-y: auto;
60
60
 
61
61
  --grid-record-emphasized-background-color: red;
@@ -71,8 +71,9 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
71
71
 
72
72
  md-outlined-button {
73
73
  --md-outlined-button-container-height: 30px;
74
- --md-outlined-button-trailing-space: 15px;
75
- --md-outlined-button-leading-space: 15px;
74
+ --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
75
+ --md-outlined-button-leading-space: var(--spacing-medium, 8px);
76
+ --md-sys-color-outline: rgba(51,51,51,.20);
76
77
  }
77
78
 
78
79
  *[bold] {
@@ -81,32 +82,35 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
81
82
 
82
83
  div[header] {
83
84
  display: flex;
84
- margin: 0px 20px;
85
+ margin: 0px var(--spacing-large, 12px);
86
+ margin-bottom:var(--spacing-small, 5px);
85
87
  }
86
88
 
87
89
  div[header] h2 {
88
90
  flex: 0.5;
89
91
  color: #3f71a0;
92
+ font-size:18px;
90
93
  }
91
94
 
92
95
  div[body] {
93
96
  display: flex;
94
97
  flex-direction: column;
95
- margin: 0px 25px 0px 25px;
96
- gap: 10px;
98
+ margin: var(--spacing-large, 12px);
99
+ margin-top:0;
100
+ gap: var(--spacing-medium, 8px);
97
101
  min-height: fit-content;
98
102
  overflow-x: hidden;
99
103
  }
100
104
 
101
105
  div[body] h3 {
102
106
  color: #2e79be;
103
- font-size: 18px;
107
+ font-size: 16px;
104
108
  margin: 0px;
105
109
  }
106
110
 
107
111
  div[body] > div {
108
112
  display: flex;
109
- gap: 10px;
113
+ gap: var(--spacing-medium, 8px);
110
114
  border-radius: 5px;
111
115
  }
112
116
 
@@ -118,10 +122,10 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
118
122
  }
119
123
 
120
124
  div[drawing] {
121
- flex: 0.4;
125
+ flex: 1;
122
126
  border: 1px solid #cccccc80;
123
- background-color: #fff;
124
- padding: 10px;
127
+ background-color: var(--md-sys-color-on-primary);
128
+ padding: var(--spacing-large, 12px);
125
129
  border-radius: 5px;
126
130
 
127
131
  img {
@@ -134,52 +138,65 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
134
138
  }
135
139
 
136
140
  div[inspection-container] {
137
- flex: 0.6;
138
- gap: 5px;
141
+ flex: 1;
142
+ gap: var(--spacing-medium, 8px);
139
143
 
140
144
  display: flex;
141
145
  flex-direction: column;
142
146
 
143
147
  div[inspection] {
144
148
  display: grid;
145
- grid-template-columns: 120px 0.9fr 0.9fr 0.9fr 0.9fr;
146
- margin-top: 5px;
149
+ grid-template-columns: 90px 1fr 1fr 1fr 1fr;
147
150
  background: #ebc8321a;
148
- border-radius: 7px;
149
- padding: 7px 0px;
151
+ border-radius: 5px;
152
+ padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
150
153
 
151
- & > span {
154
+ & > div {
152
155
  display: flex;
153
156
  flex-direction: column;
154
157
  align-items: center;
155
158
  justify-content: center;
156
159
 
157
- div[status='wait'] {
158
- color: #4e5055;
160
+ span::before{
161
+ display: inline-block;
162
+ position: relative;
163
+ content: "";
164
+ width: 10px;
165
+ height: 10px;
166
+ border-radius: 6px;
167
+ top: -1px;
168
+ margin-right: 2px;
169
+ }
170
+
171
+ span[status='wait']::before{
172
+ background-color: #4e5055;
159
173
  }
160
- div[status='request'] {
161
- color: #3395f1;
174
+ span[status='request']::before {
175
+ background-color: #3395f1;
162
176
  }
163
- div[status='pass'] {
164
- color: #1bb401;
177
+ span[status='pass']::before {
178
+ background-color: #1bb401;
165
179
  }
166
- div[status='fail'] {
167
- color: #ff4444;
180
+ span[status='fail']::before {
181
+ background-color: #ff4444;
168
182
  }
169
183
  span[dot] {
170
184
  font-size: 1.3em;
171
185
  }
172
186
  }
173
- & > span[name] {
187
+ & > div[name] {
174
188
  flex-direction: row;
175
189
  text-align: right;
176
- gap: 10px;
190
+ gap: var(--spacing-small, 4px);
191
+ padding-right:var(--spacing-large, 12px);
177
192
  border-right: 2px dotted #ccc;
193
+ max-width: 100%;
194
+ line-height:1.3;
178
195
 
179
196
  md-icon {
180
197
  width: 40px;
181
198
  height: 40px;
182
- border-radius: 7px;
199
+ border-radius: 5px;
183
200
  color: #fff;
184
201
  background: #f16154;
185
202
  }
@@ -259,35 +276,35 @@ export class BuildingInspectionList extends ScopedElementsMixin(PageView) {
259
276
 
260
277
  <div inspection-container>
261
278
  <div inspection>
262
- <span name bold>
279
+ <div name bold>
263
280
  <md-icon slot="icon">fact_check</md-icon>
264
- 검측<br />현황
265
- </span>
266
-
267
- <span>
268
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.WAIT]}</div>
269
- <div bold status=${BuildingInspectionStatus.WAIT.toLowerCase()}>
270
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.WAIT.toLowerCase()]}
271
- </div>
272
- </span>
273
- <span>
274
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.REQUEST]}</div>
275
- <div bold status=${BuildingInspectionStatus.REQUEST.toLowerCase()}>
276
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.REQUEST.toLowerCase()]}
277
- </div>
278
- </span>
279
- <span>
280
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.PASS]}</div>
281
- <div bold status=${BuildingInspectionStatus.PASS.toLowerCase()}>
282
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.PASS.toLowerCase()]}
283
- </div>
284
- </span>
285
- <span>
286
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.FAIL]}</div>
287
- <div bold status=${BuildingInspectionStatus.FAIL.toLowerCase()}>
288
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.FAIL.toLowerCase()]}
289
- </div>
290
- </span>
281
+ 검측 현황
282
+ </div>
283
+
284
+ <div>
285
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.WAIT]}</label>
286
+ <span bold status=${BuildingInspectionStatus.WAIT.toLowerCase()}>
287
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.WAIT.toLowerCase()]}
288
+ </span>
289
+ </div>
290
+ <div>
291
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.REQUEST]}</label>
292
+ <span bold status=${BuildingInspectionStatus.REQUEST.toLowerCase()}>
293
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.REQUEST.toLowerCase()]}
294
+ </span>
295
+ </div>
296
+ <div>
297
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.PASS]}</label>
298
+ <span bold status=${BuildingInspectionStatus.PASS.toLowerCase()}>
299
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.PASS.toLowerCase()]}
300
+ </span>
301
+ </div>
302
+ <div>
303
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.FAIL]}</label>
304
+ <span bold status=${BuildingInspectionStatus.FAIL.toLowerCase()}>
305
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.FAIL.toLowerCase()]}
306
+ </span>
307
+ </div>
291
308
  </div>
292
309
 
293
310
  <ox-event-view
package/client/pages/building-inspection/component/building-inspection-detail-header.ts CHANGED
@@ -27,12 +27,13 @@ class BuildingInspectionDetailHeader extends LitElement {
27
27
 
28
28
  div[header] {
29
29
  display: flex;
30
- margin: 0px 20px;
30
+ margin: 0px var(--spacing-large, 12px);
31
31
  }
32
32
 
33
33
  h2 {
34
34
  flex: 0.5;
35
35
  color: #3f71a0;
36
+ font-size:18px;
36
37
  }
37
38
 
38
39
  div[button-container] {
@@ -43,20 +44,23 @@ class BuildingInspectionDetailHeader extends LitElement {
43
44
  }
44
45
 
45
46
  md-elevated-button {
46
- margin: 0px 3px;
47
+ margin-left: var(--spacing-small, 4px);
47
48
 
48
- --md-elevated-button-container-height: 35px;
49
+ --md-elevated-button-container-height: 32px;
49
50
  --md-elevated-button-label-text-size: 16px;
50
51
  --md-elevated-button-container-color: #0595e5;
51
52
 
52
- --md-elevated-button-label-text-color: #fff;
53
- --md-elevated-button-hover-label-text-color: #fff;
54
- --md-elevated-button-pressed-label-text-color: #fff;
55
- --md-elevated-button-focus-label-text-color: #fff;
56
- --md-elevated-button-icon-color: #fff;
57
- --md-elevated-button-hover-icon-color: #fff;
58
- --md-elevated-button-pressed-icon-color: #fff;
59
- --md-elevated-button-focus-icon-color: #fff;
53
+ --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
54
+ --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
55
+ --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
56
+ --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
57
+ --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
58
+ --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
59
+ --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
60
+ --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
61
+
62
+ --_with-leading-icon-leading-space: var(--spacing-medium, 8px);
63
+ --_with-leading-icon-trailing-space: var(--spacing-medium, 8px);
60
64
  }
61
65
  `
62
66
  ]
package/dist-client/pages/building-inspection/building-inspection-detail-drawing.js CHANGED
@@ -223,11 +223,11 @@ BuildingInspectionDetailDrawing.styles = [
223
223
  css `
224
224
  :host {
225
225
  display: grid;
226
- grid-template-rows: 75px auto;
226
+ grid-template-rows: 55px auto;
227
227
  color: #4e5055;
228
228
 
229
229
  width: 100%;
230
- background-color: #f7f7f7;
230
+ background-color: var(--md-sys-color-background, #f6f6f6);
231
231
  overflow-y: auto;
232
232
 
233
233
  --grid-record-emphasized-background-color: red;
package/dist-client/pages/building-inspection/building-inspection-detail-drawing.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"building-inspection-detail-drawing.js","sourceRoot":"","sources":["../../../client/pages/building-inspection/building-inspection-detail-drawing.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/image-marker/ox-image-marker.js'\nimport '@operato/image-marker/ox-image-marker-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\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'\nimport { notify } from '@operato/layout'\nimport { Shape } from '@operato/image-marker'\n\nimport { DrawingImageProvider } from '@dssp/drawing/dist-client/drawing-management/drawing-image-provider.js'\n\nimport './component/building-inspection-detail-header'\nimport { BuildingInspectionStatus } from './building-inspection-list'\n\n@customElement('building-inspection-detail-drawing')\nexport class BuildingInspectionDetailDrawing extends ScopedElementsMixin(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\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 div[body] {\n display: flex;\n justify-content: center;\n\n ox-image-marker-view {\n width: 100%;\n }\n }\n\n dialog ox-image-marker-view {\n width: 80vw;\n height: 80vh;\n }\n `\n ]\n\n @state() project: any = {}\n @state() buildingInspection: any = {}\n @state() buildingInspectionId: string = ''\n @state() imageUrl?: string\n @state() shapes: Shape[] = []\n @state() linkUrl?: string\n @state() linkShapes: Shape[] = []\n\n @state() drawingImageProvider: DrawingImageProvider = new DrawingImageProvider()\n // @consume({ context: OxUserPreferencesContext, subscribe: true })\n\n @query('#image-marker') imageMarker!: any\n @query('#link-viewer') linkViewer!: any\n @query('dialog') dialog!: HTMLDialogElement\n\n get context() {\n return {\n title: '검측 관리 상세 - 검측 도면'\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n requestAnimationFrame(() => {\n this.imageMarker.setImageProvider(this.drawingImageProvider)\n this.linkViewer.setImageProvider(this.drawingImageProvider)\n\n this.dialog.addEventListener('click', event => {\n const rect = this.dialog.getBoundingClientRect()\n const isInDialog =\n rect.top <= event.clientY && event.clientY <= rect.bottom && rect.left <= event.clientX && event.clientX <= rect.right\n\n // 다이아로그 내부를 클릭한 것이 아니면 다이아로그 닫기\n if (!isInDialog) {\n this.dialog.close()\n }\n })\n })\n }\n\n disconnectedCallback(): void {\n this.imageMarker?.setImageProvider(null)\n this.linkViewer?.setImageProvider(null)\n\n super.disconnectedCallback()\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\n body\n @link-clicked=${async (e: CustomEvent) => {\n this.linkViewer.reset()\n\n const { link } = e.detail\n const { id, type, symbol, box, dwgId } = JSON.parse(link)\n const [x, y, width, height] = box?.split(',').map(Number) || []\n\n this.linkUrl = `DWGID:${dwgId}`\n this.linkShapes = [\n {\n id: id!,\n type: 'link',\n x,\n y,\n width,\n height,\n link: '{}'\n }\n ]\n\n if (this.dialog) {\n this.dialog.showModal()\n }\n }}\n >\n ${this.buildingInspection?.status == BuildingInspectionStatus.PASS\n ? html`<ox-image-marker-view\n id=\"image-marker\"\n .imageUrl=${this.imageUrl}\n .shapes=${this.shapes}\n ></ox-image-marker-view>`\n : html` <ox-image-marker\n id=\"image-marker\"\n .imageUrl=${this.imageUrl}\n .shapes=${this.shapes}\n @shapes-changed=${this.onClickMarkerSave}\n .currentMode=${'view'}\n ></ox-image-marker>`}\n </div>\n\n <dialog>\n <ox-image-marker-view id=\"link-viewer\" .imageUrl=${this.linkUrl} .shapes=${this.linkShapes}></ox-image-marker-view>\n </dialog>\n `\n }\n\n protected async updated(changes: PropertyValues): Promise<void> {\n if (changes.has('buildingInspection') && this.buildingInspection?.checklist) {\n // 1-1. 위치 정보 - 체크리스트에 들어가는 위치정보 텍스트\n const location_1 = this.buildingInspection.checklist?.location\n\n // 1-2. 위치 정보 - 실제 위치정보 텍스트 (동 + 층) - ID 필드를 사용하면 DB ID 필드입니다.\n const location_building = this.buildingInspection.buildingLevel.building.name\n const location_floor = this.buildingInspection.buildingLevel.floor\n\n // 2. 평면도 pdf 파일\n // mainDrawing {\n // id\n // name\n // fullpath\n // }\n const mainDrawing = this.buildingInspection.buildingLevel.mainDrawing\n\n // 3. 선택 도면\n const inspectionDrawingType = this.buildingInspection.checklist.inspectionDrawingType\n\n const shapes = JSON.parse(this.buildingInspection?.drawingMarker || null) || []\n const markers = await this.drawingImageProvider.getMarkers(inspectionDrawingType)\n\n this.imageUrl = String(inspectionDrawingType).normalize('NFC')\n this.shapes = [...shapes, ...markers]\n }\n }\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 this.imageMarker.reset()\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 async onClickMarkerSave(e) {\n const response = await client.query({\n query: gql`\n mutation UpdateBuildingInspection($patch: UpdateBuildingInspectionDrawingMarker!) {\n updateBuildingInspection(patch: $patch) {\n id\n drawingMarker\n }\n }\n `,\n variables: {\n patch: {\n id: this.buildingInspectionId,\n drawingMarker: JSON.stringify(e.detail)\n }\n }\n })\n\n if (response.errors) return\n\n notify({ message: '저장되었습니다.' })\n }\n}\n"]}
1
+ {"version":3,"file":"building-inspection-detail-drawing.js","sourceRoot":"","sources":["../../../client/pages/building-inspection/building-inspection-detail-drawing.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/image-marker/ox-image-marker.js'\nimport '@operato/image-marker/ox-image-marker-view.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { consume } from '@lit/context'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\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'\nimport { notify } from '@operato/layout'\nimport { Shape } from '@operato/image-marker'\n\nimport { DrawingImageProvider } from '@dssp/drawing/dist-client/drawing-management/drawing-image-provider.js'\n\nimport './component/building-inspection-detail-header'\nimport { BuildingInspectionStatus } from './building-inspection-list'\n\n@customElement('building-inspection-detail-drawing')\nexport class BuildingInspectionDetailDrawing extends ScopedElementsMixin(PageView) {\n static styles = [\n ScrollbarStyles,\n CommonGristStyles,\n css`\n :host {\n display: grid;\n grid-template-rows: 55px auto;\n color: #4e5055;\n\n width: 100%;\n background-color: var(--md-sys-color-background, #f6f6f6);\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n div[body] {\n display: flex;\n justify-content: center;\n\n ox-image-marker-view {\n width: 100%;\n }\n }\n\n dialog ox-image-marker-view {\n width: 80vw;\n height: 80vh;\n }\n `\n ]\n\n @state() project: any = {}\n @state() buildingInspection: any = {}\n @state() buildingInspectionId: string = ''\n @state() imageUrl?: string\n @state() shapes: Shape[] = []\n @state() linkUrl?: string\n @state() linkShapes: Shape[] = []\n\n @state() drawingImageProvider: DrawingImageProvider = new DrawingImageProvider()\n // @consume({ context: OxUserPreferencesContext, subscribe: true })\n\n @query('#image-marker') imageMarker!: any\n @query('#link-viewer') linkViewer!: any\n @query('dialog') dialog!: HTMLDialogElement\n\n get context() {\n return {\n title: '검측 관리 상세 - 검측 도면'\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n\n requestAnimationFrame(() => {\n this.imageMarker.setImageProvider(this.drawingImageProvider)\n this.linkViewer.setImageProvider(this.drawingImageProvider)\n\n this.dialog.addEventListener('click', event => {\n const rect = this.dialog.getBoundingClientRect()\n const isInDialog =\n rect.top <= event.clientY && event.clientY <= rect.bottom && rect.left <= event.clientX && event.clientX <= rect.right\n\n // 다이아로그 내부를 클릭한 것이 아니면 다이아로그 닫기\n if (!isInDialog) {\n this.dialog.close()\n }\n })\n })\n }\n\n disconnectedCallback(): void {\n this.imageMarker?.setImageProvider(null)\n this.linkViewer?.setImageProvider(null)\n\n super.disconnectedCallback()\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\n body\n @link-clicked=${async (e: CustomEvent) => {\n this.linkViewer.reset()\n\n const { link } = e.detail\n const { id, type, symbol, box, dwgId } = JSON.parse(link)\n const [x, y, width, height] = box?.split(',').map(Number) || []\n\n this.linkUrl = `DWGID:${dwgId}`\n this.linkShapes = [\n {\n id: id!,\n type: 'link',\n x,\n y,\n width,\n height,\n link: '{}'\n }\n ]\n\n if (this.dialog) {\n this.dialog.showModal()\n }\n }}\n >\n ${this.buildingInspection?.status == BuildingInspectionStatus.PASS\n ? html`<ox-image-marker-view\n id=\"image-marker\"\n .imageUrl=${this.imageUrl}\n .shapes=${this.shapes}\n ></ox-image-marker-view>`\n : html` <ox-image-marker\n id=\"image-marker\"\n .imageUrl=${this.imageUrl}\n .shapes=${this.shapes}\n @shapes-changed=${this.onClickMarkerSave}\n .currentMode=${'view'}\n ></ox-image-marker>`}\n </div>\n\n <dialog>\n <ox-image-marker-view id=\"link-viewer\" .imageUrl=${this.linkUrl} .shapes=${this.linkShapes}></ox-image-marker-view>\n </dialog>\n `\n }\n\n protected async updated(changes: PropertyValues): Promise<void> {\n if (changes.has('buildingInspection') && this.buildingInspection?.checklist) {\n // 1-1. 위치 정보 - 체크리스트에 들어가는 위치정보 텍스트\n const location_1 = this.buildingInspection.checklist?.location\n\n // 1-2. 위치 정보 - 실제 위치정보 텍스트 (동 + 층) - ID 필드를 사용하면 DB ID 필드입니다.\n const location_building = this.buildingInspection.buildingLevel.building.name\n const location_floor = this.buildingInspection.buildingLevel.floor\n\n // 2. 평면도 pdf 파일\n // mainDrawing {\n // id\n // name\n // fullpath\n // }\n const mainDrawing = this.buildingInspection.buildingLevel.mainDrawing\n\n // 3. 선택 도면\n const inspectionDrawingType = this.buildingInspection.checklist.inspectionDrawingType\n\n const shapes = JSON.parse(this.buildingInspection?.drawingMarker || null) || []\n const markers = await this.drawingImageProvider.getMarkers(inspectionDrawingType)\n\n this.imageUrl = String(inspectionDrawingType).normalize('NFC')\n this.shapes = [...shapes, ...markers]\n }\n }\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 this.imageMarker.reset()\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 async onClickMarkerSave(e) {\n const response = await client.query({\n query: gql`\n mutation UpdateBuildingInspection($patch: UpdateBuildingInspectionDrawingMarker!) {\n updateBuildingInspection(patch: $patch) {\n id\n drawingMarker\n }\n }\n `,\n variables: {\n patch: {\n id: this.buildingInspectionId,\n drawingMarker: JSON.stringify(e.detail)\n }\n }\n })\n\n if (response.errors) return\n\n notify({ message: '저장되었습니다.' })\n }\n}\n"]}
package/dist-client/pages/building-inspection/building-inspection-list.js CHANGED
@@ -80,35 +80,35 @@ let BuildingInspectionList = class BuildingInspectionList extends ScopedElements
80
80
 
81
81
  <div inspection-container>
82
82
  <div inspection>
83
- <span name bold>
83
+ <div name bold>
84
84
  <md-icon slot="icon">fact_check</md-icon>
85
- 검측<br />현황
86
- </span>
87
-
88
- <span>
89
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.WAIT]}</div>
90
- <div bold status=${BuildingInspectionStatus.WAIT.toLowerCase()}>
91
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.WAIT.toLowerCase()]}
92
- </div>
93
- </span>
94
- <span>
95
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.REQUEST]}</div>
96
- <div bold status=${BuildingInspectionStatus.REQUEST.toLowerCase()}>
97
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.REQUEST.toLowerCase()]}
98
- </div>
99
- </span>
100
- <span>
101
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.PASS]}</div>
102
- <div bold status=${BuildingInspectionStatus.PASS.toLowerCase()}>
103
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.PASS.toLowerCase()]}
104
- </div>
105
- </span>
106
- <span>
107
- <div>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.FAIL]}</div>
108
- <div bold status=${BuildingInspectionStatus.FAIL.toLowerCase()}>
109
- <span dot>●</span> ${this.buildingInspectionSummary[BuildingInspectionStatus.FAIL.toLowerCase()]}
110
- </div>
111
- </span>
85
+ 검측 현황
86
+ </div>
87
+
88
+ <div>
89
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.WAIT]}</label>
90
+ <span bold status=${BuildingInspectionStatus.WAIT.toLowerCase()}>
91
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.WAIT.toLowerCase()]}
92
+ </span>
93
+ </div>
94
+ <div>
95
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.REQUEST]}</label>
96
+ <span bold status=${BuildingInspectionStatus.REQUEST.toLowerCase()}>
97
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.REQUEST.toLowerCase()]}
98
+ </span>
99
+ </div>
100
+ <div>
101
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.PASS]}</label>
102
+ <span bold status=${BuildingInspectionStatus.PASS.toLowerCase()}>
103
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.PASS.toLowerCase()]}
104
+ </span>
105
+ </div>
106
+ <div>
107
+ <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.FAIL]}</label>
108
+ <span bold status=${BuildingInspectionStatus.FAIL.toLowerCase()}>
109
+ ${this.buildingInspectionSummary[BuildingInspectionStatus.FAIL.toLowerCase()]}
110
+ </span>
111
+ </div>
112
112
  </div>
113
113
 
114
114
  <ox-event-view
@@ -352,11 +352,11 @@ BuildingInspectionList.styles = [
352
352
  css `
353
353
  :host {
354
354
  display: grid;
355
- grid-template-rows: 75px auto;
355
+ grid-template-rows: 55px auto;
356
356
  color: #4e5055;
357
357
 
358
358
  width: 100%;
359
- background-color: #f7f7f7;
359
+ background-color: var(--md-sys-color-background, #f6f6f6);
360
360
  overflow-y: auto;
361
361
 
362
362
  --grid-record-emphasized-background-color: red;
@@ -372,8 +372,9 @@ BuildingInspectionList.styles = [
372
372
 
373
373
  md-outlined-button {
374
374
  --md-outlined-button-container-height: 30px;
375
- --md-outlined-button-trailing-space: 15px;
376
- --md-outlined-button-leading-space: 15px;
375
+ --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
376
+ --md-outlined-button-leading-space: var(--spacing-medium, 8px);
377
+ --md-sys-color-outline: rgba(51,51,51,.20);
377
378
  }
378
379
 
379
380
  *[bold] {
@@ -382,32 +383,35 @@ BuildingInspectionList.styles = [
382
383
 
383
384
  div[header] {
384
385
  display: flex;
385
- margin: 0px 20px;
386
+ margin: 0px var(--spacing-large, 12px);
387
+ margin-bottom:var(--spacing-small, 5px);
386
388
  }
387
389
 
388
390
  div[header] h2 {
389
391
  flex: 0.5;
390
392
  color: #3f71a0;
393
+ font-size:18px;
391
394
  }
392
395
 
393
396
  div[body] {
394
397
  display: flex;
395
398
  flex-direction: column;
396
- margin: 0px 25px 0px 25px;
397
- gap: 10px;
399
+ margin: var(--spacing-large, 12px);
400
+ margin-top:0;
401
+ gap: var(--spacing-medium, 8px);
398
402
  min-height: fit-content;
399
403
  overflow-x: hidden;
400
404
  }
401
405
 
402
406
  div[body] h3 {
403
407
  color: #2e79be;
404
- font-size: 18px;
408
+ font-size: 16px;
405
409
  margin: 0px;
406
410
  }
407
411
 
408
412
  div[body] > div {
409
413
  display: flex;
410
- gap: 10px;
414
+ gap: var(--spacing-medium, 8px);
411
415
  border-radius: 5px;
412
416
  }
413
417
 
@@ -419,10 +423,10 @@ BuildingInspectionList.styles = [
419
423
  }
420
424
 
421
425
  div[drawing] {
422
- flex: 0.4;
426
+ flex: 1;
423
427
  border: 1px solid #cccccc80;
424
- background-color: #fff;
425
- padding: 10px;
428
+ background-color: var(--md-sys-color-on-primary);
429
+ padding: var(--spacing-large, 12px);
426
430
  border-radius: 5px;
427
431
 
428
432
  img {
@@ -435,52 +439,65 @@ BuildingInspectionList.styles = [
435
439
  }
436
440
 
437
441
  div[inspection-container] {
438
- flex: 0.6;
439
- gap: 5px;
442
+ flex: 1;
443
+ gap: var(--spacing-medium, 8px);
440
444
 
441
445
  display: flex;
442
446
  flex-direction: column;
443
447
 
444
448
  div[inspection] {
445
449
  display: grid;
446
- grid-template-columns: 120px 0.9fr 0.9fr 0.9fr 0.9fr;
447
- margin-top: 5px;
450
+ grid-template-columns: 90px 1fr 1fr 1fr 1fr;
448
451
  background: #ebc8321a;
449
- border-radius: 7px;
450
- padding: 7px 0px;
452
+ border-radius: 5px;
453
+ padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
451
454
 
452
- & > span {
455
+ & > div {
453
456
  display: flex;
454
457
  flex-direction: column;
455
458
  align-items: center;
456
459
  justify-content: center;
457
460
 
458
- div[status='wait'] {
459
- color: #4e5055;
461
+ span::before{
462
+ display: inline-block;
463
+ position: relative;
464
+ content: "";
465
+ width: 10px;
466
+ height: 10px;
467
+ border-radius: 6px;
468
+ top: -1px;
469
+ margin-right: 2px;
470
+ }
471
+
472
+ span[status='wait']::before{
473
+ background-color: #4e5055;
460
474
  }
461
- div[status='request'] {
462
- color: #3395f1;
475
+ span[status='request']::before {
476
+ background-color: #3395f1;
463
477
  }
464
- div[status='pass'] {
465
- color: #1bb401;
478
+ span[status='pass']::before {
479
+ background-color: #1bb401;
466
480
  }
467
- div[status='fail'] {
468
- color: #ff4444;
481
+ span[status='fail']::before {
482
+ background-color: #ff4444;
469
483
  }
470
484
  span[dot] {
471
485
  font-size: 1.3em;
472
486
  }
473
487
  }
474
- & > span[name] {
488
+ & > div[name] {
475
489
  flex-direction: row;
476
490
  text-align: right;
477
- gap: 10px;
491
+ gap: var(--spacing-small, 4px);
492
+ padding-right:var(--spacing-large, 12px);
478
493
  border-right: 2px dotted #ccc;
494
+ max-width: 100%;
495
+ line-height:1.3;
479
496
 
480
497
  md-icon {
481
498
  width: 40px;
482
499
  height: 40px;
483
- border-radius: 7px;
500
+ border-radius: 5px;
484
501
  color: #fff;
485
502
  background: #f16154;
486
503
  }