Pinafore-Web-Client-Frontend/src/routes/_components/compose/ComposePoll.html

<section class="compose-poll" aria-label="{intl.createPoll}">
    {#each poll.options as option, i}
      <input id="poll-option-{realm}-{i}"
             type="text"
             maxlength="25"
             on:change="onChange(i)"
             placeholder="{createLabel(i)}"

      >
      <IconButton
        label="{createRemoveLabel(i)}"
        href="#fa-times"
        muted={true}
        on:click="onDeleteClick(i)"
      />
    {/each}
  <div>
    <input type="checkbox"
           id="poll-option-multiple-{realm}"
           on:change="onMultipleChange()"
    >
    <label class="multiple-choice-label"
           for="poll-option-multiple-{realm}">
      {intl.multipleChoice}
    </label>
    <Select className="poll-expiry-select"
            options={pollExpiryOptions}
            defaultValue={pollExpiryDefaultValue}
            on:change="onExpiryChange(event)"
            label="{intl.pollDuration}"
    />
  </div>
  <IconButton
    className="add-poll-choice-button"
    label="Add choice"
    href="#fa-plus"
    muted={true}
    disabled={poll.options.length === 4}
    on:click="onAddClick()"
  />
  {#each poll.options as option, i}
    <label id="poll-option-label-{realm}-{i}"
           class="sr-only"
           for="poll-option-{realm}-{i}">
      Choice {i + 1}
    </label>
  {/each}
</section>
<style>
  .compose-poll {
    margin: 10px 0 10px 5px;
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    grid-row-gap: 10px;
    align-items: center;
  }

  :global(.poll-expiry-select) {
    margin-left: 10px;
  }

  .multiple-choice-label {
    margin-left: 5px;
  }

  @media (max-width: 767px) {
    :global(.poll-expiry-select) {
      display: block;
      margin-left: 0;
      margin-top: 10px;
    }
    :global(.add-poll-choice-button) {
      align-self: flex-start;
    }
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import Select from '../Select.html'
  import { store } from '../../_store/store'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
  import { POLL_EXPIRY_DEFAULT, POLL_EXPIRY_OPTIONS } from '../../_static/polls'
  import { formatIntl } from '../../_utils/formatIntl'

  function flushPollOptionsToDom (poll, realm) {
    for (let i = 0; i < poll.options.length; i++) {
      const element = document.getElementById(`poll-option-${realm}-${i}`)
      element.value = poll.options[i]
    }
  }

  export default {
    oncreate () {
      const { realm } = this.get()
      const poll = this.store.getComposeData(realm, 'poll')
      flushPollOptionsToDom(poll, realm)
      document.getElementById(`poll-option-multiple-${realm}`).checked = !!poll.multiple
      this.set({ pollExpiryDefaultValue: poll.expiry || POLL_EXPIRY_DEFAULT })
    },
    data: () => ({
      pollExpiryOptions: POLL_EXPIRY_OPTIONS,
      pollExpiryDefaultValue: POLL_EXPIRY_DEFAULT
    }),
    store: () => store,
    helpers: {
      createLabel (i) {
        return formatIntl('intl.pollChoiceLabel', { index: i + 1 })
      },
      createRemoveLabel (i) {
        return formatIntl('intl.removePollChoice', { index: i + 1 })
      }
    },
    methods: {
      onChange (i) {
        scheduleIdleTask(() => {
          const { realm } = this.get()
          const element = document.getElementById(`poll-option-${realm}-${i}`)
          const poll = this.store.getComposeData(realm, 'poll')
          poll.options[i] = element.value
          this.store.setComposeData(realm, { poll })
          this.store.save()
        })
      },
      onMultipleChange () {
        scheduleIdleTask(() => {
          const { realm } = this.get()
          const element = document.getElementById(`poll-option-multiple-${realm}`)
          const poll = this.store.getComposeData(realm, 'poll')
          poll.multiple = !!element.checked
          this.store.setComposeData(realm, { poll })
          this.store.save()
        })
      },
      onDeleteClick (i) {
        scheduleIdleTask(() => {
          const { realm } = this.get()
          const poll = this.store.getComposeData(realm, 'poll')
          poll.options.splice(i, 1)
          this.store.setComposeData(realm, { poll })
          this.store.save()
          flushPollOptionsToDom(poll, realm)
        })
      },
      onAddClick () {
        scheduleIdleTask(() => {
          const { realm } = this.get()
          const poll = this.store.getComposeData(realm, 'poll')
          if (!poll.options.length !== 4) {
            poll.options.push('')
          }
          this.store.setComposeData(realm, { poll })
          this.store.save()
        })
      },
      onExpiryChange (e) {
        scheduleIdleTask(() => {
          const { realm } = this.get()
          const { value } = e.target
          const poll = this.store.getComposeData(realm, 'poll')
          poll.expiry = parseInt(value, 10)
          this.store.setComposeData(realm, { poll })
          this.store.save()
        })
      }
    },
    components: {
      IconButton,
      Select
    }
  }
</script>