apl-slapdash/src/components/Brackets.vue

<template>
<h1 class="text-2xl font-bold uppercase mb-10">streams management</h1>
<div class="grid grid-cols-2 gap-x-8">
  <div class="overflow-x-auto">
    <table class="table-auto">
      <thead>
        <tr>
          <th class="border border-gray-400 text-left px-8 py-4">ID</th>
          <th class="border border-gray-400 text-left px-8 py-4">Name</th>
          <th class="border border-gray-400 text-left px-8 py-4">Name Arabic</th>
          <th class="border border-gray-400 text-left px-8 py-4">Name Japanese</th>
          <th class="border border-gray-400 text-left px-8 py-4">Event</th>
          <th class="border border-gray-400 text-left px-8 py-4">Matches</th>
        </tr>
      </thead>
      <tbody>
        <tr class="item" v-for="e in store.state.brackets" :key="e._id" :class="item === e._id ? 'active' : ''" @click="setItem(e)">
          <td class="border border-gray-400 text-left px-8 py-4">{{ e._id }}</td>
          <td class="border border-gray-400 text-left px-8 py-4">{{ e.name }}</td>
          <td class="border border-gray-400 text-left px-8 py-4" dir="rtl">{{ e.name_arabic ?? '' }}</td>
          <td class="border border-gray-400 text-left px-8 py-4">{{ e.name_jpn ?? '' }}</td>
          <td class="border border-gray-400 text-left px-8 py-4">{{ store.state.events.filter(x => x._id === e.event)[0].name }}</td>
          <td class="border border-gray-400 text-left">
            <table v-if="e.matches" class="border border-gray-400 border-collapse mx-auto w-full h-full">
              <tbody>
                <tr v-for="p in e.matches" :key="p">
                  <td class="border border-gray-400">{{ store.state.matches.filter((x) => x._id === p)[0]?.type || '' }}: {{ store.state.matches.filter((x) => x._id === p)[0]?.blue?.name || '' }} VS {{ store.state.matches.filter((x) => x._id === p)[0]?.orange?.name || '' }}</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <h2 class="text-lg font-bold overflow-auto">Create / Update</h2>
    <form name="form" @submit.prevent="form">
      <p class="mt-4">Bracket name</p>
      <input v-model="name" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
      <p class="mt-4">Bracket name in arabic (optional)</p>
      <input v-model="name_arabic" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" dir="rtl" />
      <p class="mt-4">Bracket name in japanese (optional)</p>
      <input v-model="name_jpn" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
      <p class="mt-4">Event</p>
      <select v-model="event" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
        <option v-for="r in store.state.events" :key="r._id" :value="r._id">{{ r.name }}</option>
      </select>
      <p class="mt-4">Matches</p>
      <select v-for="(n, i) in matches.length" :key="i" v-model="matches[n - 1]" class="block my-4 border border-gray-500 rounded-lg bg-white w-64 h-8 px-4">
        <option v-for="r in store.state.matches" :key="r._id" :value="r._id"><span v-if="r">{{ r.type }}: {{ r.blue.name }} VS {{ r.orange.name }}</span></option>
      </select>
      <button @click.prevent="addMatch()" class="block w-64 h-10 my-4 text-white bg-red-700 rounded-lg hover:bg-red-600">Add match</button>
      <button class="block w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Submit</button>
      <button @click.prevent="delForm" v-if="item" class="block mt-4 w-64 h-10 text-white bg-red-700 rounded-lg hover:bg-red-600">Delete</button>
    </form>
  </div>
</div>
</template>

<script>
import { inject, ref } from 'vue'
import { create, update, del } from '../utils/websocket'

export default {
  setup() {
    const store = inject('store')

    const item = ref('')
    const name = ref('')
    const name_arabic = ref('')
    const name_jpn = ref('')
    const event = ref('')
    const matches = ref([])

    const addMatch = () => {
      matches.value.push('')
    }

    const setItem = (e) => {
      reset()
      item.value = e._id
      name.value = e.name
      name_arabic.value = e.name_arabic
      name_jpn.value = e.name_jpn
      event.value = e.event
      e.matches.forEach(m => {
        if (matches.value.length !== e.matches.length) {
          matches.value.push(m)
        }
      })
    }

    const reset = () => {
      item.value = ''
      name.value = ''
      name_arabic.value = ''
      name_jpn.value = ''
      event.value = ''
      matches.value = []
    }

    const form = () => {
      if (item.value !== '') {
        update('brackets', item.value, {
          name: name.value,
          name_arabic: name_arabic.value,
          name_jpn: name_jpn.value,
          event: event.value,
          matches: matches.value,
        })
      } else if (name.value !== '') {
        create('brackets', {
          name: name.value,
          name_arabic: name_arabic.value,
          name_jpn: name_jpn.value,
          event: event.value,
          matches: matches.value,
        })
      }
      reset()
    }

    const delForm = () => {
      if (item.value) {
        del('brackets', item.value)
        reset()
      }
    }
    
    return {
      store,
      item,
      name,
      name_arabic,
      name_jpn,
      event,
      matches,
      setItem,
      addMatch,
      form,
      delForm,
    }
  },
}
</script>

<style>
.item:hover {
  @apply bg-gray-300 cursor-pointer;
}
.item.active {
  @apply bg-gray-400;
}
</style>