@things-factory/scheduler 7.1.34

package/client/pages/scheduler/schedule-popup.ts

@@ -0,0 +1,484 @@
+import '@material/web/icon/icon.js'
+import '@material/web/textfield/filled-text-field.js'
+import '@material/web/select/outlined-select.js'
+import '@material/web/checkbox/checkbox.js'
+import '@material/web/button/filled-button.js'
+import '@operato/input/ox-input-data.js'
+import '@operato/input/ox-input-key-values.js'
+
+import { html, css, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
+import { notify, openPopup } from '@operato/layout'
+import moment from '@operato/moment-timezone-es'
+
+import { Schedule } from 'types'
+
+function getSystemTimeZone(): string {
+  try {
+    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+    if (!timeZone) {
+      throw new Error('Unable to resolve timeZone')
+    }
+    return timeZone
+  } catch (e) {
+    console.warn('Failed to get system timeZone, falling back to UTC.', e)
+    return 'UTC'
+  }
+}
+
+const DEFAULT_TZ = getSystemTimeZone()
+const TIMEZONE_OPTIONS = ['', DEFAULT_TZ, ...moment.tz.names().filter(tz => tz !== DEFAULT_TZ)]
+
+@customElement('schedule-popup')
+export class NewSchedulePopup extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        color: var(--popup-content-color);
+        background-color: var(--popup-content-background-color);
+      }
+
+      [content] {
+        flex: 1;
+        padding: var(--spacing-medium);
+        overflow: auto;
+      }
+
+      label {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: center;
+      }
+
+      md-filled-button,
+      md-outlined-button {
+        margin-top: 16px;
+      }
+
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    `
+  ]
+
+  @property({ type: Object }) closeCallback?: (schedule?: Schedule | null) => void
+  @property({ type: String, attribute: 'schedule-id' }) scheduleId?: string
+
+  @state() schedule: Schedule = {}
+
+  @query('form') form!: HTMLFormElement
+
+  render() {
+    const updatable = !!this.scheduleId
+
+    return html`
+      <div content>
+        <form @change=${this.onInputChanged}>
+          <md-filled-text-field
+            label="Name"
+            type="text"
+            id="name"
+            name="name"
+            .value=${this.schedule.name || ''}
+            required
+          ></md-filled-text-field>
+          <br /><br />
+
+          <fieldset>
+            <legend>Client Details</legend>
+            <md-filled-text-field
+              label="Application"
+              type="text"
+              id="application"
+              name="client.application"
+              .value=${this.schedule.client?.application || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Group"
+              type="text"
+              id="group"
+              name="client.group"
+              .value=${this.schedule.client?.group || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Type"
+              type="text"
+              id="type"
+              name="client.type"
+              .value=${this.schedule.client?.type || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Key"
+              type="text"
+              id="key"
+              name="client.key"
+              .value=${this.schedule.client?.key || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Operation"
+              type="text"
+              id="operation"
+              name="client.operation"
+              .value=${this.schedule.client?.operation || ''}
+              ?readonly=${updatable}
+              required
+            ></md-filled-text-field>
+          </fieldset>
+          <br />
+
+          <fieldset>
+            <legend>Schedule</legend>
+
+            <md-outlined-select label="Schedule Type" name="type" required>
+              <md-select-option value="now" ?selected=${this.schedule.type === 'now'}>Now</md-select-option>
+              <md-select-option value="delay" ?selected=${this.schedule.type === 'delay'}>Delay</md-select-option>
+              <md-select-option value="date" ?selected=${this.schedule.type === 'date'}>Date</md-select-option>
+              <md-select-option value="cron" ?selected=${this.schedule.type === 'cron'}>Cron</md-select-option>
+              <md-select-option value="delay-recur" ?selected=${this.schedule.type === 'delay-recur'}
+                >Delay-Recur</md-select-option
+              >
+            </md-outlined-select>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Schedule (optional)"
+              type="text"
+              id="schedule"
+              name="schedule"
+              .value=${this.schedule.schedule || ''}
+              @click=${(e: MouseEvent) => {
+                const x = e.target as HTMLInputElement
+                openPopup(
+                  html`
+                    <ox-popup-crontab-input
+                      .value=${x.value}
+                      .confirmCallback=${value => {
+                        x.value = value
+                        x.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }))
+                      }}
+                    ></ox-popup-crontab-input>
+                  `,
+                  {
+                    backdrop: true,
+                    title: i18next.t('title.setting schedule')
+                  }
+                )
+              }}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-outlined-select
+              label="Timezone (optional)"
+              id="timezone"
+              name="timezone"
+              .value=${this.schedule.timezone || ''}
+              required
+            >
+              ${TIMEZONE_OPTIONS.map(
+                tz =>
+                  html` <md-select-option value=${tz} ?selected=${this.schedule.timezone === tz}
+                    >${tz}</md-select-option
+                  >`
+              )}
+            </md-outlined-select>
+          </fieldset>
+          <br /><br />
+
+          <fieldset>
+            <legend>Task Details</legend>
+            <md-outlined-select label="Task Type" name="task.type" required>
+              <md-select-option value="rest" ?selected=${this.schedule.task?.type === 'rest'}>REST</md-select-option>
+              <md-select-option value="kafka" ?selected=${this.schedule.task?.type === 'kafka'}>Kafka</md-select-option>
+              <md-select-option value="redis" ?selected=${this.schedule.task?.type === 'redis'}>Redis</md-select-option>
+            </md-outlined-select>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Connection Host"
+              id="connectionHost"
+              name="task.connection.host"
+              .value=${this.schedule.task?.connection?.host || ''}
+              required
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Connection Topic (optional)"
+              id="connectionTopic"
+              name="task.connection.topic"
+              .value=${this.schedule.task?.connection?.topic || ''}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <fieldset>
+              <legend>Connection Headers (optional)</legend>
+              <ox-input-key-values
+                name="task.connection.headers"
+                .value=${this.schedule.task?.connection?.headers || {}}
+              ></ox-input-key-values>
+            </fieldset>
+            <br /><br />
+
+            <fieldset>
+              <legend>Data (JSON)</legend>
+
+              <ox-input-data name="task.data" .value=${this.schedule.task?.data}> </ox-input-data>
+            </fieldset>
+            <br /><br />
+
+            <label>
+              <md-checkbox
+                type="checkbox"
+                id="historyCheck"
+                name="task.history_check"
+                .checked=${this.schedule.task?.history_check || false}
+              ></md-checkbox
+              >History Check
+            </label>
+            <br /><br />
+
+            <md-outlined-select label="Failed Policy" name="task.failed_policy" required>
+              <md-select-option value="ignore" ?selected=${this.schedule.task?.failed_policy === 'ignore'}
+                >Ignore</md-select-option
+              >
+              <md-select-option value="retry" ?selected=${this.schedule.task?.failed_policy === 'retry'}
+                >Retry</md-select-option
+              >
+              <md-select-option value="retry_dlq" ?selected=${this.schedule.task?.failed_policy === 'retry_dlq'}
+                >Retry DLQ</md-select-option
+              >
+            </md-outlined-select>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Retry Wait (ms)"
+              type="number"
+              id="retryWait"
+              name="task.retry_wait"
+              .valueAsNumber=${this.schedule.task?.retry_wait || 0}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Retry Count"
+              type="number"
+              id="retryCount"
+              name="task.retry_count"
+              .valueAsNumber=${this.schedule.task?.retry_count || 0}
+            ></md-filled-text-field>
+            <br /><br />
+
+            <md-filled-text-field
+              label="Max Retry Count"
+              type="number"
+              id="maxRetryCount"
+              name="task.max_retry_count"
+              .valueAsNumber=${this.schedule.task?.max_retry_count || 0}
+            ></md-filled-text-field>
+          </fieldset>
+        </form>
+      </div>
+
+      <div class="footer">
+        <button @click=${this.reset.bind(this)}><md-icon>restart_alt</md-icon>${i18next.t('button.reset')}</button>
+        <div filler></div>
+        <button @click=${this.cancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        ${updatable
+          ? html` <button @click=${this.updateSchedule.bind(this)} done>
+              <md-icon>update</md-icon>${i18next.t('button.update')}
+            </button>`
+          : html` <button @click=${this.registerSchedule.bind(this)} done>
+              <md-icon>pending_actions</md-icon>${i18next.t('button.register')}
+            </button>`}
+      </div>
+    `
+  }
+
+  async updated(changes: PropertyValues<this>) {
+    if (changes.has('scheduleId')) {
+      this.schedule = this.scheduleId ? await this.fetchSchedule(this.scheduleId) : {}
+    }
+  }
+
+  private onInputChanged(event: Event) {
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    const nameParts = target.name.split('.')
+    let current = this.schedule
+
+    for (let i = 0; i < nameParts.length - 1; i++) {
+      const part = nameParts[i]
+      if (!current[part]) {
+        current[part] = {}
+      }
+      current = current[part]
+    }
+
+    const key = nameParts[nameParts.length - 1]
+    current[key] =
+      'checked' in target
+        ? (target as HTMLInputElement).checked
+        : target.type === 'number'
+          ? Number(target.value)
+          : key == 'task.data'
+            ? JSON.parse(target.value)
+            : target.value
+
+    this.requestUpdate()
+  }
+
+  private reset() {
+    this.form.reset()
+  }
+
+  private cancel() {
+    history.back()
+  }
+
+  private prepareSchedule() {
+    this.schedule = {
+      ...this.schedule,
+      client: {
+        application: this.schedule.client?.application || '',
+        group: this.schedule.client?.group || '',
+        type: this.schedule.client?.type || '',
+        key: this.schedule.client?.key || '',
+        operation: this.schedule.client?.operation || ''
+      },
+      task: {
+        ...this.schedule.task,
+        data: this.schedule.task?.data || {},
+        history_check: this.schedule.task?.history_check ?? false,
+        failed_policy: this.schedule.task?.failed_policy || 'ignore',
+        retry_wait: this.schedule.task?.retry_wait || 0,
+        retry_count: this.schedule.task?.retry_count || 0,
+        max_retry_count: this.schedule.task?.max_retry_count || 0,
+        connection: {
+          ...this.schedule.task?.connection,
+          headers: this.schedule.task?.connection?.headers || {}
+        }
+      }
+    }
+  }
+
+  private async registerSchedule() {
+    this.prepareSchedule()
+
+    const { id, ...newSchedule } = this.schedule
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation ($schedule: NewSchedule!) {
+          handle: registerSchedule(schedule: $schedule)
+        }
+      `,
+      variables: {
+        schedule: newSchedule
+      }
+    })
+
+    if (response.data?.handle) {
+      this.scheduleId = response.data.handle
+
+      notify({
+        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.register') })
+      })
+    }
+  }
+
+  private async updateSchedule() {
+    this.prepareSchedule()
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation UpdateSchedule($schedule: SchedulePatch!) {
+          handle: updateSchedule(schedule: $schedule)
+        }
+      `,
+      variables: {
+        schedule: this.schedule
+      }
+    })
+
+    if (response.data?.handle) {
+      this.scheduleId = response.data.handle
+
+      notify({
+        message: i18next.t('text.info_x_successfully', { x: i18next.t('text.update') })
+      })
+    }
+  }
+
+  private async fetchSchedule(id: string) {
+    const response = await client.query({
+      query: gql`
+        query ($id: ID!) {
+          schedule(id: $id) {
+            id
+            name
+            client {
+              application
+              group
+              type
+              key
+              operation
+            }
+            type
+            schedule
+            timezone
+            task {
+              type
+              connection {
+                host
+                headers
+                topic
+              }
+              data
+              history_check
+              failed_policy
+              retry_wait
+              retry_count
+              max_retry_count
+            }
+          }
+        }
+      `,
+      variables: {
+        id
+      }
+    })
+
+    if (response.data?.schedule) {
+      console.log(`a schedule fetched : ${response.data.schedule}`)
+
+      return response.data.schedule
+    }
+  }
+}

package/client/route.ts

@@ -0,0 +1,7 @@
+export default function route(page: string) {
+  switch (page) {
+    case 'schedule-list':
+      import('./pages/scheduler/schedule-list-page')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/client/types.ts

@@ -0,0 +1,34 @@
+export interface ScheduleClient {
+  application?: string
+  group?: string
+  type?: string
+  key?: string
+  operation?: string
+}
+
+export interface ScheduleTaskConnection {
+  host?: string
+  headers?: Record<string, string>
+  topic?: string
+}
+
+export interface ScheduleTask {
+  type?: string
+  connection?: ScheduleTaskConnection
+  data?: { [key: string]: any }
+  history_check?: boolean
+  failed_policy?: 'ignore' | 'retry' | 'retry_dlq'
+  retry_wait?: number
+  retry_count?: number
+  max_retry_count?: number
+}
+
+export interface Schedule {
+  id?: string
+  name?: string
+  client?: ScheduleClient
+  type?: 'now' | 'delay' | 'date' | 'cron' | 'delay-recur'
+  schedule?: string
+  timezone?: string
+  task?: ScheduleTask
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,2 @@
+export default function bootstrap() { }
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,KAAI,CAAC","sourcesContent":["export default function bootstrap() {}\n"]}

package/dist-client/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist-client/pages/scheduler/popup-crontab-input.d.ts

@@ -0,0 +1,12 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-crontab.js';
+import { LitElement } from 'lit';
+export declare class PopupCrontabInput extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    confirmCallback: (newval: any) => void;
+    render(): import("lit-html").TemplateResult<1>;
+    private onChange;
+    private onCancel;
+    private onConfirm;
+}

package/dist-client/pages/scheduler/popup-crontab-input.js

@@ -0,0 +1,77 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-crontab.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { closePopup } from '@operato/popup';
+import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
+let PopupCrontabInput = class PopupCrontabInput extends LitElement {
+    render() {
+        return html `
+      <ox-input-crontab .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-crontab>
+
+      <div class="footer">
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)} danger>
+          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}
+        </button>
+        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+      </div>
+    `;
+    }
+    onChange(e) {
+        e.stopPropagation();
+        this.value = e.detail;
+    }
+    onCancel(e) {
+        closePopup(this);
+    }
+    onConfirm(e) {
+        this.confirmCallback && this.confirmCallback(this.value);
+        closePopup(this);
+    }
+};
+PopupCrontabInput.styles = [
+    CommonHeaderStyles,
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+
+        width: var(--overlay-center-normal-width, 50%);
+        height: var(--overlay-center-normal-height, 50%);
+      }
+
+      ox-input-crontab {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      span {
+        flex: 1;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--md-sys-color-on-primary-container);
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], PopupCrontabInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Function)
+], PopupCrontabInput.prototype, "confirmCallback", void 0);
+PopupCrontabInput = __decorate([
+    customElement('popup-crontab-input')
+], PopupCrontabInput);
+export { PopupCrontabInput };
+//# sourceMappingURL=popup-crontab-input.js.map

package/dist-client/pages/scheduler/popup-crontab-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-crontab-input.js","sourceRoot":"","sources":["../../../client/pages/scheduler/popup-crontab-input.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG9D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAmC/C,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;;;yBAItD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;qCACZ,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;yBAEtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;KAExG,CAAA;IACH,CAAC;IAEO,QAAQ,CAAC,CAAc;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;IACvB,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxD,UAAU,CAAC,IAAI,CAAC,CAAA;IAClB,CAAC;;AA7DM,wBAAM,GAAG;IACd,kBAAkB;IAClB,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;CACF,AA7BY,CA6BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gDAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0DAAwC;AAjCxD,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA+D7B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-crontab.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { closePopup } from '@operato/popup'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('popup-crontab-input')\nexport class PopupCrontabInput extends LitElement {\n  static styles = [\n    CommonHeaderStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n\n        width: var(--overlay-center-normal-width, 50%);\n        height: var(--overlay-center-normal-height, 50%);\n      }\n\n      ox-input-crontab {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      span {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: Object }) confirmCallback!: (newval: any) => void\n\n  render() {\n    return html`\n      <ox-input-crontab .value=${this.value} @change=${this.onChange.bind(this)}> </ox-input-crontab>\n\n      <div class=\"footer\">\n        <div filler></div>\n        <button @click=${this.onCancel.bind(this)} danger>\n          <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n        </button>\n        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>\n      </div>\n    `\n  }\n\n  private onChange(e: CustomEvent) {\n    e.stopPropagation()\n\n    this.value = e.detail\n  }\n\n  private onCancel(e: Event) {\n    closePopup(this)\n  }\n\n  private onConfirm(e: Event) {\n    this.confirmCallback && this.confirmCallback(this.value)\n    closePopup(this)\n  }\n}\n"]}