"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[77],{30077:(e,i,a)=>{a.r(i);var r=a(50493),t=a(16682),n=a(94430),o=a(56765),d=a(28120),l=a(27805),p=a(77675),c=a(51266);let s=class extends((0,d.$)(p.h)(p.B4)){static get styles(){return[n.iv`
        :host {
          background-color: var(--main-section-background-color);
          padding: var(--padding-wide);

          display: flex;
          flex-direction: column;

          align-items: center;

          overflow: auto;
        }
        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);
        }

        [form-container] {
          background-color: var(--theme-white-color);
          padding: var(--padding-wide);
          border-radius: var(--border-radius);
          box-shadow: var(--box-shadow);
          min-width: 60%;
          max-width: var(--input-container-max-width);
          position: relative;
          clear: both;
        }
        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 {
          outline: none;
        }
        [field-2column] {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 15px;
          max-width: var(--content-container-max-width);
        }
        [field] {
          display: flex;
          flex-direction: column;
        }
        [grid-span] {
          grid-column: span 2;
        }
        @media screen and (max-width: 480px) {
          [form-container] {
            position: initial;
            width: 100%;
          }
          [field] {
            grid-column: span 2;
          }
        }
      `]}get context(){return{title:"appliance registration",help:"auth/appliance"}}render(){return n.dy`
      <h2>Register new appliance</h2>
      <p page-description>You can register new appliance here</p>

      <div form-container>
        <form>
          <div field-2column>
            <div field grid-span>
              <label for="name">name</label>
              <input id="name" type="text" name="name" />
            </div>

            <div field grid-span>
              <label for="description">description</label>
              <input id="description" type="text" name="description" />
            </div>

            <div field>
              <label for="brand">brand</label>
              <input id="brand" type="text" name="brand" />
            </div>

            <div field>
              <label for="serial-no">serial #</label>
              <input id="serial-no" type="text" name="serialNo" />
            </div>

            <div field>
              <label for="model">model</label>
              <input id="model" type="text" name="model" />
            </div>

            <div field>
              <label for="netmask">netmask</label>
              <input id="netmask" type="text" name="netmask" />
            </div>

            <mwc-button grid-span @click=${this.createAppliance.bind(this)} raised label="register"></mwc-button>
          </div>
        </form>
      </div>
    `}async createAppliance(e){e.preventDefault();const i=this.renderRoot.querySelector("form"),a=new FormData(i),r=Array.from(a.entries()).reduce(((e,[i,a])=>(e[i]=a,e)),{}),n=await l.Lp.mutate({mutation:t.ZP`
        mutation ($appliance: NewAppliance!) {
          createAppliance(appliance: $appliance) {
            id
          }
        }
      `,variables:{appliance:r}});if(n.errors)c.log("creation fail.");else{const e=n.data.createAppliance.id;(0,p.c4)(`appliance/${e}`)}}pageUpdated(e,i,a){this.active&&this.form.reset()}};(0,r.gn)([(0,o.Cb)({type:Object}),(0,r.w6)("design:type",Object)],s.prototype,"appliance",void 0),(0,r.gn)([(0,o.IO)("form"),(0,r.w6)("design:type",HTMLFormElement)],s.prototype,"form",void 0),s=(0,r.gn)([(0,o.Mo)("appliance-register")],s)}}]);