add Broadcast GUI

client/src/components/settings.vue

@@ -48,6 +48,19 @@
           <span />
         </label>
       </li>
+      <template v-if="admin">
+        <li>
+          <span>{{ $t('setting.broadcast_is_active') }}</span>
+          <label class="switch">
+            <input type="checkbox" v-model="broadcast_is_active" />
+            <span />
+          </label>
+        </li>
+        <li>
+          <span>{{ $t('setting.broadcast_url') }}</span>
+          <input v-model="broadcast_url" :disabled="broadcast_is_active" class="input">
+        </li>
+      </template>
       <li v-if="connected">
         <button @click.stop.prevent="logout">{{ $t('logout') }}</button>
       </li>
@@ -220,6 +233,30 @@
             }
           }
         }
+
+        .input {
+          display: block;
+          height: 30px;
+          text-align: right;
+          padding: 0 10px;
+          margin-left: 10px;
+          line-height: 30px;
+          text-overflow: ellipsis;
+          border: 1px solid transparent;
+          border-radius: 5px;
+          color: white;
+          background-color: $background-tertiary;
+          font-weight: lighter;
+          user-select: auto;
+
+          &::selection {
+            background: $text-normal;
+          }
+
+          &[disabled] {
+            background: none;
+          }
+        }
       }
     }
   }
@@ -230,6 +267,12 @@
 
   @Component({ name: 'neko-settings' })
   export default class extends Vue {
+    private broadcast_url: string = '';
+
+    get admin() {
+      return this.$accessor.user.admin
+    }
+
     get connected() {
       return this.$accessor.connected
     }
@@ -282,6 +325,27 @@
       return this.$accessor.settings.keyboard_layout
     }
 
+    get broadcast_is_active() {
+      return this.$accessor.settings.broadcast_is_active
+    }
+
+    set broadcast_is_active(value: boolean) {
+      if (value) {
+        this.$accessor.settings.broadcastCreate(this.broadcast_url)
+      } else {
+        this.$accessor.settings.broadcastDestroy()
+      }
+    }
+
+    get broadcast_url_remote() {
+      return this.$accessor.settings.broadcast_url
+    }
+
+    @Watch('broadcast_url_remote', { immediate: true })
+    onBroadcastUrlChange() {
+      this.broadcast_url = this.broadcast_url_remote
+    }
+
     set keyboard_layout(value: string) {
       this.$accessor.settings.setKeyboardLayout(value)
       this.$accessor.remote.changeKeyboard()