/*! For license information please see 3011.js.LICENSE.txt */
"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[3011],{23011:(e,t,i)=>{i.r(t);var a=i(50493),n=i(28362),r=i.n(n),o=i(16682),d=i(94430),s=i(56765),l=i(60438),c=i(28120),p=i(27805),u=i(77675),v=i(36179),f=i(53421),b=i(51266);let m=class extends((0,c.$)(u.h)(u.B4)){get context(){return{title:{icon:"devices",text:this.appliance.name}}}render(){var e,t=this.appliance||{},i=null===(e=this._accessTokenInfo)||void 0===e?void 0:e.exp;return d.dy`
      <div>
        <h2><mwc-icon>devices</mwc-icon>&nbsp;${t.name}</h2>
        <p page-description>${t.description}</p>
      </div>

      <form>
        <div fieldset-container>
          <fieldset>
            <legend>${f.z2.t("text.appliance")}</legend>
            <div field-2column>
              <div field grid-span>
                <label for="name">${f.z2.t("field.name")}</label>
                <input id="name" type="text" name="name" .value=${t.name} />
              </div>

              <div field grid-span>
                <label for="description">${f.z2.t("field.description")}</label>
                <input id="description" type="text" name="description" .value=${t.description} />
              </div>

              <div field>
                <label for="brand">${f.z2.t("field.brand")}</label>
                <input id="brand" type="text" name="brand" .value=${t.brand} />
              </div>

              <div field>
                <label for="serial-no">${f.z2.t("field.serial-no")}</label>
                <input id="serial-no" type="text" name="serialNo" .value=${t.serialNo} />
              </div>

              <div field>
                <label for="model">${f.z2.t("field.model")}</label>
                <input id="model" type="text" name="model" .value=${t.model} />
              </div>

              <div field>
                <label for="netmask">${f.z2.t("field.netmask")}</label>
                <input id="netmask" type="text" name="netmask" .value=${t.netmask} />
              </div>
            </div>
          </fieldset>
        </div>

        <div fieldset-container>
          <fieldset>
            <legend>${f.z2.t("text.appliance credential")}</legend>
            <div field-2column>
              <div field grid-span>
                <label for="access-token">${f.z2.t("label.access token")}</label>
                <input id="access-token" type="text" .value=${t.accessToken} readonly />
                <button button-in-field clipboard-copy @click=${e=>e.preventDefault()}>
                  ${f.z2.t("button.copy")}
                </button>
                ${i?d.dy`<div input-hint>
                      ${f.z2.t("text.token expiry time")} ${new Date(1e3*i).toLocaleString()} :
                      ${(0,l.E)(this.expTimer(i))}
                    </div>`:d.dy``}
              </div>
            </div>
          </fieldset>
        </div>

        <button @click=${this.deleteAppliance.bind(this)}>${f.z2.t("button.delete this appliance")}</button>
        <button @click=${this.generateApplianceSecret.bind(this)}>
          ${f.z2.t("button.generate new access token")}
        </button>
        <button @click=${this.updateAppliance.bind(this)}>${f.z2.t("button.update")}</button>
      </form>
    `}firstUpdated(){this.clipboard=new(r())(this.copybuttons,{target:e=>e.parentElement.querySelector("input")})}updated(e){if(e.has("appliance")){const{accessToken:e}=this.appliance||{};this.accessToken=e}e.has("accessToken")&&(this._accessTokenInfo=this.accessToken?(0,v.aj)(this.accessToken):{})}async pageUpdated(e,t,i){this.active&&await this.fetchAppliance()}async fetchAppliance(){const e=await p.Lp.query({query:o.ZP`
        query ($id: String!) {
          appliance(id: $id) {
            id
            name
            description
            serialNo
            brand
            model
            netmask
            accessToken
          }
        }
      `,variables:{id:this.lifecycle.resourceId}});this.appliance=e.data.appliance}async updateAppliance(e){e.preventDefault();const t=this.renderRoot.querySelector("form"),i=new FormData(t),a=Array.from(i.entries()).reduce(((e,[t,i])=>(e[t]=i,e)),{}),n=this.lifecycle.resourceId,r=await p.Lp.mutate({mutation:o.ZP`
        mutation ($id: String!, $patch: AppliancePatch!) {
          updateAppliance(id: $id, patch: $patch) {
            id
            name
            description
            serialNo
            brand
            model
            netmask
            accessToken
          }
        }
      `,variables:{id:n,patch:a}});r.errors?b.error("update fail"):(this.appliance=r.data.updateAppliance,b.log("update sucess"))}async deleteAppliance(e){e.preventDefault();const t=this.lifecycle.resourceId;(await p.Lp.mutate({mutation:o.ZP`
        mutation ($id: String!) {
          deleteAppliance(id: $id)
        }
      `,variables:{id:t}})).errors?b.error("delete fail"):(0,u.c4)("appliance-home")}async generateApplianceSecret(e){e.preventDefault();const t=this.lifecycle.resourceId,i=await p.Lp.mutate({mutation:o.ZP`
        mutation ($id: String!) {
          generateApplianceSecret(id: $id) {
            id
            name
            description
            serialNo
            brand
            model
            netmask
            accessToken
          }
        }
      `,variables:{id:t}});i.errors?b.error("generate-appliance-secret fail"):(this.appliance=i.data.generateApplianceSecret,b.log("generate-appliance-secret sucess"))}expTimer(e){return(0,a.FC)(this,arguments,(function*(){for(;this.active;){var t=Math.floor(Number(e)-Date.now()/1e3);const i=Math.floor(t/86400);t-=86400*i;const n=Math.floor(t/3600);t-=3600*n;const r=Math.floor(t/60),o=t-60*r;yield yield(0,a.qq)(f.z2.t("text.remaining time",{days:i,hours:n,mins:r,secs:o})),yield(0,a.qq)((0,v._v)(1e3))}}))}};m.styles=[d.iv`
      :host {
        display: flex;
        flex-direction: column;
        overflow-y: auto;

        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);
      }
      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }
      [page-description] {
        margin: var(--page-description-margin);
        font: var(--page-description-font);
        color: var(--page-description-color);
      }

      label {
        font: var(--label-font);
        color: var(--label-color);
        text-transform: var(--label-text-transform);
      }
      input {
        border: var(--border-dark-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        font: var(--input-font);

        flex: 1;
      }
      select:focus,
      input:focus,
      button {
        outline: none;
      }
      form {
        max-width: var(--content-container-max-width);
      }
      [fieldset-container] {
        background-color: var(--theme-white-color);
        margin: var(--margin-wide) 0 var(--margin-default) 0;
        padding: var(--padding-default);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);
      }
      [fieldset-container] fieldset {
        margin: 0;
        margin-top: -15px;
      }
      fieldset {
        border-radius: var(--border-radius);
        border: var(--border-dark-color);
        margin: var(--fieldset-margin);
        padding: var(--fieldset-padding);
      }
      legend {
        padding: var(--legend-padding);
        font-weight: bold;
        color: var(--legend-color);
      }
      [field-2column] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
      }
      [field] {
        display: flex;
        flex-direction: column;
        position: relative;
      }
      [grid-span] {
        grid-column: span 2;
      }
      button,
      [button-in-field] {
        background-color: var(--button-background-color);
        border: var(--button-border);
        border-radius: var(--button-border-radius);
        padding: var(--button-padding);
        color: var(--button-color);
        font: var(--button-font);
        text-transform: var(--button-text-transform);

        margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);
        float: right;
        text-decoration: none;
      }
      button:hover {
        border: var(--button-activ-border);
        box-shadow: var(--button-active-box-shadow);
      }
      [button-in-field] {
        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
        position: absolute;
        top: 11px;
        right: 0;
        max-height: 36px;
      }
      [input-hint] {
        font: var(--input-hint-font);
        color: var(--input-hint-color);
      }
      @media screen and (max-width: 480px) {
        [field] {
          grid-column: span 2;
        }
      }
    `],(0,a.gn)([(0,s.Cb)({type:Object}),(0,a.w6)("design:type",Object)],m.prototype,"appliance",void 0),(0,a.gn)([(0,s.Cb)({type:String}),(0,a.w6)("design:type",String)],m.prototype,"accessToken",void 0),(0,a.gn)([(0,s.Cb)({type:Object}),(0,a.w6)("design:type",Object)],m.prototype,"_accessTokenInfo",void 0),(0,a.gn)([(0,s.Kt)("[clipboard-copy]"),(0,a.w6)("design:type",Object)],m.prototype,"copybuttons",void 0),m=(0,a.gn)([(0,s.Mo)("appliance-page")],m)},60438:(e,t,i)=>{i.d(t,{E:()=>l});var a=i(28773),n=i(95974);class r{constructor(e){this.G=e}disconnect(){this.G=void 0}reconnect(e){this.G=e}deref(){return this.G}}class o{constructor(){this.Y=void 0,this.Z=void 0}get(){return this.Y}pause(){var e;null!==(e=this.Y)&&void 0!==e||(this.Y=new Promise((e=>this.Z=e)))}resume(){var e;null===(e=this.Z)||void 0===e||e.call(this),this.Y=this.Z=void 0}}var d=i(62987);class s extends n.sR{constructor(){super(...arguments),this._$Cq=new r(this),this._$CK=new o}render(e,t){return a.Jb}update(e,[t,i]){if(this.isConnected||this.disconnected(),t===this._$CX)return;this._$CX=t;let n=0;const{_$Cq:r,_$CK:o}=this;return(async(e,t)=>{for await(const i of e)if(!1===await t(i))return})(t,(async e=>{for(;o.get();)await o.get();const a=r.deref();if(void 0!==a){if(a._$CX!==t)return!1;void 0!==i&&(e=i(e,n)),a.commitValue(e,n),n++}return!0})),a.Jb}commitValue(e,t){this.setValue(e)}disconnected(){this._$Cq.disconnect(),this._$CK.pause()}reconnected(){this._$Cq.reconnect(this),this._$CK.resume()}}const l=(0,d.XM)(s)}}]);