From a8b9138ede679db77aa32d443f63517a75d20c6b Mon Sep 17 00:00:00 2001
From: Ayush Mukherjee <me@ayushm.com>
Date: Thu, 16 Nov 2023 20:47:51 +0530
Subject: [PATCH] feat: updates for other langs

---
 src/components/Brackets.vue | 24 +++++++++++--
 src/components/Casters.vue  | 58 ++++++++++++++++++++----------
 src/components/Events.vue   | 50 ++++++++++++++++++--------
 src/components/Matches.vue  | 20 +++++++++++
 src/components/Rosters.vue  | 70 ++++++++++++++++++++++++-------------
 src/components/Streams.vue  | 20 +++++++++++
 6 files changed, 183 insertions(+), 59 deletions(-)

diff --git a/src/components/Brackets.vue b/src/components/Brackets.vue
index 4b3edba..043d46c 100644
--- a/src/components/Brackets.vue
+++ b/src/components/Brackets.vue
@@ -7,6 +7,8 @@
         <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>
@@ -15,6 +17,8 @@
         <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">
@@ -30,10 +34,14 @@
     </table>
   </div>
   <div>
-    <h2 class="text-lg font-bold">Create / Update</h2>
+    <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>
@@ -60,6 +68,8 @@ export default {
 
     const item = ref('')
     const name = ref('')
+    const name_arabic = ref('')
+    const name_jpn = ref('')
     const event = ref('')
     const matches = ref([])
 
@@ -71,6 +81,8 @@ export default {
       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) {
@@ -82,6 +94,8 @@ export default {
     const reset = () => {
       item.value = ''
       name.value = ''
+      name_arabic.value = ''
+      name_jpn.value = ''
       event.value = ''
       matches.value = []
     }
@@ -90,12 +104,16 @@ export default {
       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,
         })
@@ -114,6 +132,8 @@ export default {
       store,
       item,
       name,
+      name_arabic,
+      name_jpn,
       event,
       matches,
       setItem,
@@ -132,4 +152,4 @@ export default {
 .item.active {
   @apply bg-gray-400;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Casters.vue b/src/components/Casters.vue
index a05498f..6ea35e7 100644
--- a/src/components/Casters.vue
+++ b/src/components/Casters.vue
@@ -1,24 +1,30 @@
 <template>
 <h1 class="text-2xl font-bold uppercase mb-10">casters management</h1>
 <div class="grid grid-cols-2 gap-x-8">
-  <table class="table-auto">
-    <thead>
-      <tr>
-        <th class="border border-gray-400 text-left px-8 py-4">Name Tag</th>
-        <th class="border border-gray-400 text-left px-8 py-4">Real Name</th>
-        <th class="border border-gray-400 text-left px-8 py-4">Twitter</th>
-        <th class="border border-gray-400 text-left px-8 py-4">Image</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.casters" :key="e._id">
-        <td class="border border-gray-400 text-left px-8 py-4">{{ e.username }}</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">{{ e.twitter }}</td>
-        <td class="border border-gray-400 text-left px-8 py-4"><img :src="e.image" :alt="e.name"></td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="overflow-x-auto">
+    <table class="table-auto">
+      <thead>
+        <tr>
+          <th class="border border-gray-400 text-left px-8 py-4">Name Tag</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Real Name</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Real Name Arabic</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Real Name Japanese</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Twitter</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Image</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.casters" :key="e._id">
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.username }}</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">{{ 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">{{ e.twitter }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4"><img :src="e.image" :alt="e.name"></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
   <div>
     <h2 class="text-lg font-bold">Create / Update</h2>
     <form name="form" @submit.prevent="form">
@@ -26,6 +32,10 @@
       <input v-model="username" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
       <p class="mt-4">Caster real 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">Caster real name 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" />
+      <p class="mt-4">Caster real name 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">Caster twitter</p>
       <input v-model="twitter" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
       <p class="mt-4">Caster image URL</p>
@@ -48,6 +58,8 @@ export default {
     const item = ref('')
     const username = ref('')
     const name = ref('')
+    const name_arabic = ref('')
+    const name_jpn = ref('')
     const twitter = ref('')
     const image = ref('')
 
@@ -55,6 +67,8 @@ export default {
       item.value = ''
       username.value = ''
       name.value = ''
+      name_arabic.value = ''
+      name_jpn.value = ''
       twitter.value = ''
       image.value = ''
     }
@@ -63,6 +77,8 @@ export default {
       item.value = e._id
       username.value = e.username
       name.value = e.name
+      name_arabic.value = e.name_arabic
+      name_jpn.value = e.name_jpn
       twitter.value = e.twitter
       image.value = e.image
     }
@@ -72,6 +88,8 @@ export default {
         update('casters', item.value, {
           username: username.value,
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
           twitter: twitter.value,
           image: image.value,
         })
@@ -79,6 +97,8 @@ export default {
         create('casters', {
           username: username.value,
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
           twitter: twitter.value,
           image: image.value,
         })
@@ -98,6 +118,8 @@ export default {
       item,
       username,
       name,
+      name_arabic,
+      name_jpn,
       twitter,
       image,
       setItem,
diff --git a/src/components/Events.vue b/src/components/Events.vue
index 5ab50a8..0bb0c83 100644
--- a/src/components/Events.vue
+++ b/src/components/Events.vue
@@ -1,25 +1,35 @@
 <template>
 <h1 class="text-2xl font-bold uppercase mb-10">events management</h1>
 <div class="grid grid-cols-2 gap-x-8">
-  <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>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.events" :key="e._id">
-        <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>
-      </tr>
-    </tbody>
-  </table>
+  <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">Arabic Name</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Japanese Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.events" :key="e._id">
+          <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 rtl" dir="rtl">{{ e.name_arabic ?? '' }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.name_jpn ?? '' }}</td>
+        </tr>
+      </tbody>
+    </table>
+    </div>
   <div>
     <h2 class="text-lg font-bold">Create / Update</h2>
     <form name="form" @submit.prevent="form">
       <p class="mt-4">Event 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">Event 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">Event 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" />
       <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>
@@ -37,10 +47,14 @@ export default {
 
     const item = ref('')
     const name = ref('')
+    const name_arabic = ref('')
+    const name_jpn = ref('')
 
     const setItem = (e) => {
       item.value = e._id
       name.value = e.name
+      name_arabic.value = e.name_arabic
+      name_jpn.value = e.name_jpn
     }
 
     const reset = () => {
@@ -52,10 +66,14 @@ export default {
       if (item.value !== '') {
         update('events', item.value, {
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
         })
-      } else if (name.value !== '') {
+      } else if (name.value !== '' && name_arabic.value !== '' && name_jpn.value !== '') {
         create('events', {
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
         })
       }
       reset()
@@ -72,6 +90,8 @@ export default {
       store,
       item,
       name,
+      name_arabic,
+      name_jpn,
       setItem,
       form,
       delForm,
diff --git a/src/components/Matches.vue b/src/components/Matches.vue
index 0165ded..dd86061 100644
--- a/src/components/Matches.vue
+++ b/src/components/Matches.vue
@@ -6,6 +6,8 @@
       <thead>
         <tr>
           <th class="border border-gray-400 text-left px-8 py-4">Round name</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Round arabic</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Round japanese</th>
           <th class="border border-gray-400 text-left px-8 py-4">Blue</th>
           <th class="border border-gray-400 text-left px-8 py-4">Orange</th>
           <th class="border border-gray-400 text-left px-8 py-4">Current</th>
@@ -20,6 +22,8 @@
       <tbody>
         <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.matches" :key="e._id">
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.type }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4" dir="rtl">{{ e.type_arabic ?? '' }}</td>
+          <td class="border border-gray-400 text-left px-8 py-4">{{ e.type_jpn ?? '' }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.blue.name }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.orange.name }}</td>
           <td class="border border-gray-400 text-left px-8 py-4">{{ e.current }}</td>
@@ -47,6 +51,10 @@
     <form name="form" @submit.prevent="form">
       <p class="mt-4">Round name</p>
       <input v-model="type" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
+      <p class="mt-4">Round name in arabic (optional)</p>
+      <input v-model="type_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">Round name in japanese (optional)</p>
+      <input v-model="type_jpn" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" />
       <p class="mt-4">Blue team</p>
       <select v-model="blue" 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.rosters" :key="r._id" :value="r._id">{{ r.name }}</option>
@@ -96,6 +104,8 @@ export default {
 
     const item = ref('')
     const type = ref('')
+    const type_arabic = ref('')
+    const type_jpn = ref('')
     const blue = ref('')
     const orange = ref('')
     const current = ref(false)
@@ -111,6 +121,8 @@ export default {
     const setItem = (e) => {
       item.value = e._id
       type.value = e.type
+      type_arabic.value = e.type_arabic
+      type_jpn.value = e.type_jpn
       blue.value = e.blue._id
       orange.value = e.orange
       current.value = e.current
@@ -127,6 +139,8 @@ export default {
     const resetf = () => {
       item.value = ''
       type.value = ''
+      type_arabic.value = ''
+      type_jpn.value = ''
       blue.value = ''
       orange.value = ''
       current.value = false
@@ -144,6 +158,8 @@ export default {
       if (item.value !== '') {
         update('matches', item.value, {
           type: type.value,
+          type_arabic: type_arabic.value,
+          type_jpn: type_jpn.value,
           blue: blue.value,
           orange: orange.value,
           current: current.value,
@@ -163,6 +179,8 @@ export default {
       } else if (type.value !== '') {
         create('matches', {
           type: type.value,
+          type_arabic: type_arabic.value,
+          type_jpn: type_jpn.value,
           blue: blue.value,
           orange: orange.value,
           current: current.value,
@@ -185,6 +203,8 @@ export default {
       store,
       item,
       type,
+      type_arabic,
+      type_jpn,
       blue,
       orange,
       blueSeries,
diff --git a/src/components/Rosters.vue b/src/components/Rosters.vue
index b1a3e25..a93f3ab 100644
--- a/src/components/Rosters.vue
+++ b/src/components/Rosters.vue
@@ -1,35 +1,45 @@
 <template>
 <h1 class="text-2xl font-bold uppercase mb-10">rosters management</h1>
 <div class="grid grid-cols-2 gap-x-8">
-  <table class="table-auto">
-    <thead>
-      <tr>
-        <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">Logo</th>
-        <th class="border border-gray-400 text-left px-8 py-4">Players</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.rosters" :key="e._id">
-        <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"><img class="w-12 h-12" :src="e.logo" :alt="e.name"></td>
-        <td class="border border-gray-400 text-left px-8 py-4">
-          <table v-if="e.players">
-            <tbody>
-              <tr v-for="p in e.players" :key="p._id">
-                <td>{{ p.name }}: {{ p.account }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="overflow-x-auto">
+    <table class="table-auto">
+      <thead>
+        <tr>
+          <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">Logo</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Players</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr class="item" :class="item === e._id ? 'active' : ''" @click="setItem(e)" v-for="e in store.state.rosters" :key="e._id">
+          <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"><img class="w-12 h-12" :src="e.logo" :alt="e.name"></td>
+          <td class="border border-gray-400 text-left px-8 py-4">
+            <table v-if="e.players">
+              <tbody>
+                <tr v-for="p in e.players" :key="p._id">
+                  <td>{{ p.name }}: {{ p.account }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
   <div>
     <h2 class="text-lg font-bold">Create / Update</h2>
     <form name="form" @submit.prevent="form">
       <p class="mt-4">Roster 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">Roster 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">Roster 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">Roster logo</p>
       <input v-model="logo" class="block my-4 border border-gray-500 rounded-lg w-64 h-8 px-4" type="text" required />
       <fieldset v-for="(n, i) in playersLocal.length" :key="i" class="border border-gray-400 rounded px-6 my-4">
@@ -57,6 +67,8 @@ export default {
 
     const item = ref('')
     const name = ref('')
+    const name_arabic = ref('')
+    const name_jpn = ref('')
     const logo = ref('')
     const playersLocal = ref([])
 
@@ -65,6 +77,8 @@ export default {
     const setItem = (e) => {
       item.value = e._id
       name.value = e.name
+      name_arabic.value = e.name_arabic
+      name_jpn.value = e.name_jpn
       logo.value = e.logo
       e.players.forEach(p => {
         if (playersLocal.value.length !== e.players.length) {
@@ -91,6 +105,8 @@ export default {
     const reset = () => {
       item.value = ''
       name.value = ''
+      name_arabic.value = ''
+      name_jpn.value = ''
       logo.value = ''
       playersLocal.value = []
     }
@@ -99,12 +115,16 @@ export default {
       if (item.value !== '') {
         update('rosters', item.value, {
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
           logo: logo.value,
           players: playersLocal.value,
         })
       } else if (name.value !== '') {
         create('rosters', {
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
           logo: logo.value,
           players: playersLocal.value,
         })
@@ -123,6 +143,8 @@ export default {
       store,
       item,
       name,
+      name_arabic,
+      name_jpn,
       logo,
       playersLocal,
       setItem,
diff --git a/src/components/Streams.vue b/src/components/Streams.vue
index 00506ab..7960c69 100644
--- a/src/components/Streams.vue
+++ b/src/components/Streams.vue
@@ -7,6 +7,8 @@
         <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">Arabic Name</th>
+          <th class="border border-gray-400 text-left px-8 py-4">Japanese Name</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>
           <th class="border border-gray-400 text-left px-8 py-4">Casters</th>
@@ -17,6 +19,8 @@
         <tr class="item" v-for="e in store.state.streams" :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">{{ 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">
@@ -54,6 +58,10 @@
     <form name="form" @submit.prevent="form">
       <p class="mt-4">Stream 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">Stream 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">Stream 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>
@@ -90,6 +98,8 @@ export default {
 
     const item = ref('')
     const name = ref('')
+    const name_arabic = ref('')
+    const name_jpn = ref('')
     const event = ref('')
     const matches = ref([])
     const casters = ref([])
@@ -111,6 +121,8 @@ export default {
       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) {
@@ -132,6 +144,8 @@ export default {
     const reset = () => {
       item.value = ''
       name.value = ''
+      name_arabic.value = ''
+      name_jpn.value = ''
       event.value = ''
       matches.value = []
       casters.value = []
@@ -142,6 +156,8 @@ export default {
       if (item.value !== '') {
         update('streams', item.value, {
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
           event: event.value,
           matches: matches.value,
           casters: casters.value,
@@ -150,6 +166,8 @@ export default {
       } else if (name.value !== '') {
         create('streams', {
           name: name.value,
+          name_arabic: name_arabic.value,
+          name_jpn: name_jpn.value,
           event: event.value,
           matches: matches.value,
           casters: casters.value,
@@ -170,6 +188,8 @@ export default {
         store,
         item,
         name,
+        name_arabic,
+        name_jpn,
         event,
         matches,
         casters,