YutaGoto/salmon_run

<div id="salmon">
  <div class="uk-section">
    <div class="uk-container-large uk-align-center">
      <h1 id="content" class="uk-heading-divider">すぷらとぅーん2 サーモンラン開催履歴</h1>
      <div id="openingEvent">
        <template v-if="isOpen">
          <h2 id="content" class="uk-heading-divider">現在開催中！</h2>
          <table class="uk-table uk-table-hover uk-table-small">
            <thead>
              <tr>
                <th>回</th>
                <th>日時</th>
                <th>開催時間</th>
                <th>ステージ</th>
                <th>ブキ1</th>
                <th>ブキ2</th>
                <th>ブキ3</th>
                <th>ブキ4</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{openingEvent.id}}</td>
                <td><div>{{openingEvent.startAt}}</div><div class="uk-text-center">〜</div><div>{{openingEvent.endAt}}</div></td>
                <td>{{openingEvent.hours}}時間</td>
                <td>{{openingEvent.stage.name}}</td>
                <td v-for="eventsWeapon in openingEvent.eventsWeapons">
                  {{eventsWeapon.weapon.name}}<br>
                  {{eventsWeapon.weapon.countText}}回目 {{eventsWeapon.sinceLastEventTimes}}回ぶり
                </td>
              </tr>
            </tbody>
          </table>
        </template>
      </div>
    </div>
    <div class="uk-container-large uk-align-center">
      <h2 id="content" class="">検索</h2>
      <form class="form" id="search-form">
        <div uk-grid>
          <div class="uk-width-1-2">
            <label class="control-label">ブキ</label>
            <input type="text" class="uk-input" name="weapon" v-model="weaponName" @change="eventSearch">
          </div>
          <div class="uk-width-1-2">
            <label class="control-label">ステージ</label>
            <select class="uk-select" name="stage" v-model="selectedStage" @change="eventSearch">
              <option :value=null selected></option>
              <option v-for="stage in stages" :value="stage.id">
                {{ stage.name }}
              </option>
            </select>
          </div>
        </div>
      </form>
      <div class="event-list">
        <table class="uk-table uk-table-hover uk-table-small" id="events">
          <thead>
            <tr>
              <th>回</th>
              <th>日時</th>
              <th>時間</th>
              <th>ステージ</th>
              <th>ブキ1</th>
              <th>ブキ2</th>
              <th>ブキ3</th>
              <th>ブキ4</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="event in events">
              <td><a v-bind:href="`/events/${event.id}`" class="uk-link-muted">{{event.id}}</a></td>
              <td>
                <div>{{event.startAt}}</div><div class="uk-text-center">〜</div><div>{{event.endAt}}</div>
              </td>
              <td>{{event.hours}}時間</td>
              <td><a v-bind:href="`stages/${event.stage.id}`" class="uk-link-muted">{{event.stage.name}}</a></td>
              <td v-for="eventsWeapon in event.eventsWeapons">
                {{eventsWeapon.weapon.name}}
                <div><img v-bind:src='eventsWeapon.weapon.imageUrl' class="weapon-image-small" uk-img /></div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<%= javascript_pack_tag 'events_vue' %>