@dssp/project 0.0.2

package/dist-client/pages/project/ox-progress-circle.js

@@ -0,0 +1,182 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate, __metadata } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+/**
+WEB Component for code-mirror code editor.
+
+Example:
+  <ox-progress-circle
+    .value=${70}
+    titleText="전체"
+    suffix="%"
+    fontSize="29px"
+    fontColor="#4E5055"
+    borderStyle="none"
+    innerCircleSize="28%"
+    circleColor="#0595E5"
+    shadow="#00000026 4px 4px 4px"
+    background="#eaf5fd"
+  ></ox-progress-circle>
+*/
+let OxProgressCircle = class OxProgressCircle extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.suffix = '';
+        this.titleText = '';
+        this.fontSize = '10px';
+        this.fontColor = '';
+        this.borderStyle = '';
+        this.innerCircleSize = '10%';
+        this.shadow = '';
+        this.circleColor = 'yellowgreen';
+        this.background = '';
+    }
+    firstUpdated() {
+        if (this.fontSize) {
+            this.circle.style.fontSize = this.fontSize;
+        }
+        if (this.fontColor) {
+            this.innerCircle.style.color = this.fontColor;
+        }
+        if (this.borderStyle) {
+            this.circle.style.border = this.borderStyle;
+        }
+        if (this.innerCircleSize) {
+            this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`;
+        }
+        if (this.shadow) {
+            this.circle.style.boxShadow = this.shadow;
+        }
+        if (this.background) {
+            this.innerCircle.style.background = this.background;
+        }
+        if (this.progressTitle && this.circleColor) {
+            this.progressTitle.style.color = this.circleColor;
+        }
+    }
+    updated(changes) {
+        if (changes.has('value')) {
+            this.updateCircleBackground();
+        }
+    }
+    updateCircleBackground() {
+        const position = this.value * 3.6; // 360 = 100%
+        this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`;
+    }
+    render() {
+        return html `
+      <div circle>
+        <div inner-circle>
+          ${this.titleText ? html `<span progress-title>${this.titleText}</span>` : ''}
+          <span>${this.value}${this.suffix}</span>
+        </div>
+      </div>
+    `;
+    }
+};
+OxProgressCircle.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+      }
+
+      div[circle] {
+        font-size: 29px;
+        font-weight: bold;
+        width: 100%;
+        aspect-ratio: 1;
+        display: flex;
+        border-radius: 50%;
+        border: 1px solid #353b48;
+        position: relative;
+        background: conic-gradient(yellowgreen 0deg, white 0deg);
+        box-shadow: #00000026 5px 5px 5px;
+      }
+      div[inner-circle] {
+        width: 90%;
+        aspect-ratio: 1;
+        border-radius: inherit;
+        background-color: #353b48;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: white;
+        justify-content: center;
+        box-shadow: inset #00000026 -2px 2px 8px;
+      }
+
+      div[inner-circle] span {
+        display: flex;
+        align-items: center;
+      }
+
+      span[progress-title] {
+        font-size: 0.65em;
+        margin-bottom: -5%;
+      }
+    `
+];
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], OxProgressCircle.prototype, "value", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "suffix", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "titleText", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "fontSize", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "fontColor", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "borderStyle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "innerCircleSize", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "shadow", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "circleColor", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], OxProgressCircle.prototype, "background", void 0);
+__decorate([
+    query('div[circle]'),
+    __metadata("design:type", HTMLDivElement)
+], OxProgressCircle.prototype, "circle", void 0);
+__decorate([
+    query('div[inner-circle]'),
+    __metadata("design:type", HTMLDivElement)
+], OxProgressCircle.prototype, "innerCircle", void 0);
+__decorate([
+    query('span[progress-title]'),
+    __metadata("design:type", HTMLSpanElement)
+], OxProgressCircle.prototype, "progressTitle", void 0);
+OxProgressCircle = __decorate([
+    customElement('ox-progress-circle')
+], OxProgressCircle);
+export { OxProgressCircle };
+//# sourceMappingURL=ox-progress-circle.js.map

package/dist-client/pages/project/ox-progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-progress-circle.js","sourceRoot":"","sources":["../../../client/pages/project/ox-progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n  <ox-progress-circle\n    .value=${70}\n    titleText=\"전체\"\n    suffix=\"%\"\n    fontSize=\"29px\"\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*/\n@customElement('ox-progress-circle')\nexport class OxProgressCircle extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      div[circle] {\n        font-size: 29px;\n        font-weight: bold;\n        width: 100%;\n        aspect-ratio: 1;\n        display: flex;\n        border-radius: 50%;\n        border: 1px solid #353b48;\n        position: relative;\n        background: conic-gradient(yellowgreen 0deg, white 0deg);\n        box-shadow: #00000026 5px 5px 5px;\n      }\n      div[inner-circle] {\n        width: 90%;\n        aspect-ratio: 1;\n        border-radius: inherit;\n        background-color: #353b48;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        color: white;\n        justify-content: center;\n        box-shadow: inset #00000026 -2px 2px 8px;\n      }\n\n      div[inner-circle] span {\n        display: flex;\n        align-items: center;\n      }\n\n      span[progress-title] {\n        font-size: 0.65em;\n        margin-bottom: -5%;\n      }\n    `\n  ]\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: String }) suffix: string = ''\n  @property({ type: String }) titleText: string = ''\n  @property({ type: String }) fontSize: string = '10px'\n  @property({ type: String }) fontColor: string = ''\n  @property({ type: String }) borderStyle: string = ''\n  @property({ type: String }) innerCircleSize: string = '10%'\n  @property({ type: String }) shadow: string = ''\n  @property({ type: String }) circleColor: string = 'yellowgreen'\n  @property({ type: String }) background: string = ''\n\n  @query('div[circle]') circle!: HTMLDivElement\n  @query('div[inner-circle]') innerCircle!: HTMLDivElement\n  @query('span[progress-title]') progressTitle?: HTMLSpanElement\n\n  firstUpdated() {\n    if (this.fontSize) {\n      this.circle.style.fontSize = this.fontSize\n    }\n    if (this.fontColor) {\n      this.innerCircle.style.color = this.fontColor\n    }\n    if (this.borderStyle) {\n      this.circle.style.border = this.borderStyle\n    }\n    if (this.innerCircleSize) {\n      this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`\n    }\n    if (this.shadow) {\n      this.circle.style.boxShadow = this.shadow\n    }\n    if (this.background) {\n      this.innerCircle.style.background = this.background\n    }\n    if (this.progressTitle && this.circleColor) {\n      this.progressTitle.style.color = this.circleColor\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.updateCircleBackground()\n    }\n  }\n\n  updateCircleBackground() {\n    const position = this.value * 3.6 // 360 = 100%\n    this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`\n  }\n\n  render() {\n    return html`\n      <div circle>\n        <div inner-circle>\n          ${this.titleText ? html`<span progress-title>${this.titleText}</span>` : ''}\n          <span>${this.value}${this.suffix}</span>\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/project/project-create-popup.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/button/elevated-button.js';
+declare const ProjectCreatePopup_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class ProjectCreatePopup extends ProjectCreatePopup_base {
+    static styles: import("lit").CSSResult[];
+    private projectName;
+    private refreshFn;
+    render(): import("lit-html").TemplateResult<1>;
+    private _createProject;
+    private _close;
+    private _onInputChange;
+}
+export {};

package/dist-client/pages/project/project-create-popup.js

@@ -0,0 +1,153 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import gql from 'graphql-tag';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/button/elevated-button.js';
+let ProjectCreatePopup = class ProjectCreatePopup extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.projectName = '';
+    }
+    render() {
+        return html `
+      <div body>
+        <div input-container>
+          <label>프로젝트 이름</label>
+          <md-outlined-text-field
+            name="projectName"
+            type="text"
+            placeholder="신규 프로젝트명"
+            .value=${this.projectName}
+            @input=${this._onInputChange}
+          >
+          </md-outlined-text-field>
+        </div>
+
+        <div button-container>
+          <md-elevated-button @click=${this._createProject}>
+            <md-icon slot="icon">add</md-icon>프로젝트 생성
+          </md-elevated-button>
+          <md-elevated-button @click=${this._close}> <md-icon slot="icon">close</md-icon>취소 </md-elevated-button>
+        </div>
+      </div>
+    `;
+    }
+    // 프로젝트 생성
+    async _createProject() {
+        if (!this.projectName) {
+            notify({ level: 'warn', message: '프로젝트 이름은 필수 값 입니다.' });
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation CreateProject($project: NewProject!) {
+          response: createProject(project: $project) {
+            id
+          }
+        }
+      `,
+            variables: {
+                project: {
+                    name: this.projectName
+                }
+            }
+        });
+        if (!response.errors) {
+            notify({ message: '저장되었습니다.' });
+        }
+        // 설정 정보 리스트 다시 조회
+        this.refreshFn();
+        // 팝업 템플릿을 닫기 위한 동작
+        history.back();
+    }
+    _close() {
+        history.back();
+    }
+    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+    _onInputChange(event) {
+        const target = event.target;
+        this.projectName = target.value;
+    }
+};
+ProjectCreatePopup.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        width: 100%;
+      }
+
+      div[body] {
+        flex: 1;
+
+        label {
+          color: #4e5055;
+          font-size: 16px;
+        }
+
+        div[input-container] {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-top: 22px;
+
+          md-outlined-text-field {
+            width: 60%;
+            margin-left: 15px;
+
+            --md-outlined-text-field-container-shape: 9px;
+            --md-sys-color-primary: #586878;
+            --md-sys-color-surface-container-highest: transparent;
+            --md-outlined-text-field-label-text-color: #999999;
+            --md-outlined-text-field-input-text-line-height: 20px;
+            --md-outlined-text-field-input-text-size: 16px;
+            --md-outlined-field-bottom-space: 10px;
+            --md-outlined-field-top-space: 10px;
+          }
+        }
+
+        div[button-container] {
+          margin-top: 50px;
+          margin-bottom: 20px;
+          text-align: center;
+
+          md-elevated-button {
+            margin: 0px 5px;
+
+            --md-elevated-button-container-height: 40px;
+            --md-elevated-button-container-color: #fff;
+            --md-elevated-button-label-text-size: 16px;
+          }
+          md-elevated-button:first-child {
+            --md-elevated-button-container-color: #0595e5;
+            --md-elevated-button-label-text-color: #fff;
+            --md-elevated-button-hover-label-text-color: #fff;
+            --md-elevated-button-pressed-label-text-color: #fff;
+            --md-elevated-button-focus-label-text-color: #fff;
+            --md-elevated-button-icon-color: #fff;
+            --md-elevated-button-hover-icon-color: #fff;
+            --md-elevated-button-pressed-icon-color: #fff;
+            --md-elevated-button-focus-icon-color: #fff;
+          }
+        }
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectCreatePopup.prototype, "projectName", void 0);
+__decorate([
+    property({ type: Function }),
+    __metadata("design:type", Function)
+], ProjectCreatePopup.prototype, "refreshFn", void 0);
+ProjectCreatePopup = __decorate([
+    customElement('project-create-popup')
+], ProjectCreatePopup);
+export { ProjectCreatePopup };
+//# sourceMappingURL=project-create-popup.js.map

package/dist-client/pages/project/project-create-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-create-popup.js","sourceRoot":"","sources":["../../../client/pages/project/project-create-popup.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,gDAAgD,CAAA;AACvD,OAAO,yCAAyC,CAAA;AAGzC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA9D;;QAmEY,gBAAW,GAAW,EAAE,CAAA;IAsE3C,CAAC;IAnEC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;qBAQM,IAAI,CAAC,WAAW;qBAChB,IAAI,CAAC,cAAc;;;;;;uCAMD,IAAI,CAAC,cAAc;;;uCAGnB,IAAI,CAAC,MAAM;;;KAG7C,CAAA;IACH,CAAC;IAED,UAAU;IACF,KAAK,CAAC,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC,CAAA;YACxD,OAAM;SACP;QAED,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,OAAO,EAAE;oBACP,IAAI,EAAE,IAAI,CAAC,WAAW;iBACvB;aACF;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,CAAA;SAChC;QAED,kBAAkB;QAClB,IAAI,CAAC,SAAS,EAAE,CAAA;QAEhB,mBAAmB;QACnB,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAEO,MAAM;QACZ,OAAO,CAAC,IAAI,EAAE,CAAA;IAChB,CAAC;IAED,gCAAgC;IACxB,cAAc,CAAC,KAAiB;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAA;QAC/C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IACjC,CAAC;;AAvIM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;uDAAiC;AACzC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;8BAAqB,QAAQ;qDAAA;AApE/C,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAyI9B;SAzIY,kBAAkB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport gql from 'graphql-tag'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/elevated-button.js'\n\n@customElement('project-create-popup')\nexport class ProjectCreatePopup extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        width: 100%;\n      }\n\n      div[body] {\n        flex: 1;\n\n        label {\n          color: #4e5055;\n          font-size: 16px;\n        }\n\n        div[input-container] {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          margin-top: 22px;\n\n          md-outlined-text-field {\n            width: 60%;\n            margin-left: 15px;\n\n            --md-outlined-text-field-container-shape: 9px;\n            --md-sys-color-primary: #586878;\n            --md-sys-color-surface-container-highest: transparent;\n            --md-outlined-text-field-label-text-color: #999999;\n            --md-outlined-text-field-input-text-line-height: 20px;\n            --md-outlined-text-field-input-text-size: 16px;\n            --md-outlined-field-bottom-space: 10px;\n            --md-outlined-field-top-space: 10px;\n          }\n        }\n\n        div[button-container] {\n          margin-top: 50px;\n          margin-bottom: 20px;\n          text-align: center;\n\n          md-elevated-button {\n            margin: 0px 5px;\n\n            --md-elevated-button-container-height: 40px;\n            --md-elevated-button-container-color: #fff;\n            --md-elevated-button-label-text-size: 16px;\n          }\n          md-elevated-button:first-child {\n            --md-elevated-button-container-color: #0595e5;\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  ]\n\n  @state() private projectName: string = ''\n  @property({ type: Function }) private refreshFn!: Function\n\n  render() {\n    return html`\n      <div body>\n        <div input-container>\n          <label>프로젝트 이름</label>\n          <md-outlined-text-field\n            name=\"projectName\"\n            type=\"text\"\n            placeholder=\"신규 프로젝트명\"\n            .value=${this.projectName}\n            @input=${this._onInputChange}\n          >\n          </md-outlined-text-field>\n        </div>\n\n        <div button-container>\n          <md-elevated-button @click=${this._createProject}>\n            <md-icon slot=\"icon\">add</md-icon>프로젝트 생성\n          </md-elevated-button>\n          <md-elevated-button @click=${this._close}> <md-icon slot=\"icon\">close</md-icon>취소 </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  // 프로젝트 생성\n  private async _createProject() {\n    if (!this.projectName) {\n      notify({ level: 'warn', message: '프로젝트 이름은 필수 값 입니다.' })\n      return\n    }\n\n    const response = await client.mutate({\n      mutation: gql`\n        mutation CreateProject($project: NewProject!) {\n          response: createProject(project: $project) {\n            id\n          }\n        }\n      `,\n      variables: {\n        project: {\n          name: this.projectName\n        }\n      }\n    })\n\n    if (!response.errors) {\n      notify({ message: '저장되었습니다.' })\n    }\n\n    // 설정 정보 리스트 다시 조회\n    this.refreshFn()\n\n    // 팝업 템플릿을 닫기 위한 동작\n    history.back()\n  }\n\n  private _close() {\n    history.back()\n  }\n\n  // Input 요소의 값이 변경될 때 호출되는 콜백 함수\n  private _onInputChange(event: InputEvent) {\n    const target = event.target as HTMLInputElement\n    this.projectName = target.value\n  }\n}\n"]}

package/dist-client/pages/project/project-detail.d.ts

@@ -0,0 +1,35 @@
+import { PageView } from '@operato/shell';
+import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view';
+import { Project } from './project-list';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/button/outlined-button.js';
+import './ox-progress-circle';
+export interface InspectionSummary {
+    request: number;
+    pass: number;
+    fail: number;
+}
+interface Weather {
+    rain: number;
+    temperature: number;
+    humidity: number;
+    wind: string;
+}
+declare const ProjectDetail_base: typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class ProjectDetail extends ProjectDetail_base {
+    static styles: import("lit").CSSResult[];
+    get context(): {
+        title: string;
+    };
+    private defaultProject;
+    projectId: string;
+    project: Project;
+    inspectionSummary: InspectionSummary;
+    weather: Weather;
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(lifecycle: PageLifecycle): Promise<void>;
+    pageUpdated(changes: any, lifecycle: PageLifecycle): Promise<void>;
+    initProject(projectId?: string): Promise<void>;
+}
+export {};