mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
vuefilemanager broadcast server enhancements
This commit is contained in:
Čarodej
202
resources/js/components/Forms/BroadcastSetup.vue
Normal file
202
resources/js/components/Forms/BroadcastSetup.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<FormLabel icon="wifi">
|
||||
{{ $te('broadcasting') ? $t('broadcasting') : 'Broadcasting' }}
|
||||
</FormLabel>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Broadcast Driver"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText
|
||||
title="Broadcast Driver"
|
||||
:error="errors[0]"
|
||||
:is-last="broadcast.driver === 'none' || broadcast.driver === undefined"
|
||||
>
|
||||
<SelectInput
|
||||
v-model="broadcast.driver"
|
||||
:options="broadcastDrivers"
|
||||
placeholder="Select your broadcast driver"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<div v-if="broadcast.driver === 'native'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Hostname or IP" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.host"
|
||||
placeholder="Type your hostname or IP"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="TLS" v-slot="{ errors }">
|
||||
<AppInputSwitch
|
||||
title="Required TLS Connection"
|
||||
description="When enabled, you must have installed ssl certificate on your server host"
|
||||
:is-last="true"
|
||||
>
|
||||
<SwitchInput v-model="broadcast.tls" :state="broadcast.tls" />
|
||||
</AppInputSwitch>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="broadcast.driver === 'pusher'">
|
||||
<ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="App ID" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.id"
|
||||
placeholder="Type your app id"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.key"
|
||||
placeholder="Paste your key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Secret" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.secret"
|
||||
placeholder="Paste your secret"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Cluster"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Cluster" :error="errors[0]" :is-last="true">
|
||||
<SelectInput
|
||||
v-model="broadcast.cluster"
|
||||
:options="pusherClusters"
|
||||
placeholder="Select your cluster"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '../Inputs/SelectInput'
|
||||
import AppInputText from './Layouts/AppInputText'
|
||||
import FormLabel from '../UI/Labels/FormLabel'
|
||||
import AppInputSwitch from "./Layouts/AppInputSwitch";
|
||||
import SwitchInput from "../Inputs/SwitchInput";
|
||||
|
||||
export default {
|
||||
name: 'BroadcastSetup',
|
||||
components: {
|
||||
SwitchInput,
|
||||
AppInputSwitch,
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
SelectInput,
|
||||
FormLabel,
|
||||
},
|
||||
watch: {
|
||||
broadcast: {
|
||||
handler(newValue, oldValue) {
|
||||
this.$emit('input', newValue)
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
broadcast: {
|
||||
driver: undefined,
|
||||
id: undefined,
|
||||
key: undefined,
|
||||
secret: undefined,
|
||||
cluster: undefined,
|
||||
tls: true,
|
||||
},
|
||||
broadcastDrivers: [
|
||||
{
|
||||
label: 'Pusher',
|
||||
value: 'pusher',
|
||||
},
|
||||
{
|
||||
label: 'VueFileManager',
|
||||
value: 'native',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: 'none',
|
||||
},
|
||||
],
|
||||
pusherClusters: [
|
||||
{
|
||||
label: 'US East (N. Virginia)',
|
||||
value: 'mt1',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Singapore)',
|
||||
value: 'ap1',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Mumbai)',
|
||||
value: 'ap2',
|
||||
},
|
||||
{
|
||||
label: 'US East (Ohio)',
|
||||
value: 'us2',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Tokyo)',
|
||||
value: 'ap3',
|
||||
},
|
||||
{
|
||||
label: 'US West (Oregon)',
|
||||
value: 'us3',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Sydney)',
|
||||
value: 'ap4',
|
||||
},
|
||||
{
|
||||
label: 'EU (Ireland)',
|
||||
value: 'eu',
|
||||
},
|
||||
{
|
||||
label: 'South America (São Paulo)',
|
||||
value: 'sa1',
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -8,102 +8,14 @@
|
||||
tag="form"
|
||||
class="card shadow-card"
|
||||
>
|
||||
<FormLabel icon="wifi">
|
||||
{{ $t('broadcasting') }}
|
||||
</FormLabel>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Broadcast Driver" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Broadcast Driver" :error="errors[0]">
|
||||
<SelectInput
|
||||
v-model="broadcast.driver"
|
||||
:options="broadcastDrivers"
|
||||
placeholder="Select your broadcast driver"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<div v-if="broadcast.driver === 'native'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Hostname or IP" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.host"
|
||||
placeholder="Type your hostname or IP"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Port" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.port"
|
||||
placeholder="Type your port"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="broadcast.driver === 'pusher'">
|
||||
<ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="App ID" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.id"
|
||||
placeholder="Type your app id"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.key"
|
||||
placeholder="Paste your key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Secret" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.secret"
|
||||
placeholder="Paste your secret"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Cluster" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Cluster" :error="errors[0]">
|
||||
<SelectInput
|
||||
v-model="broadcast.cluster"
|
||||
:options="pusherClusters"
|
||||
placeholder="Select your cluster"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
<BroadcastSetup v-model="broadcast" />
|
||||
|
||||
<ButtonBase
|
||||
:loading="isSendingBroadcastForm"
|
||||
:disabled="isSendingBroadcastForm"
|
||||
type="submit"
|
||||
button-style="theme"
|
||||
class="w-full sm:w-auto"
|
||||
class="mt-6 w-full sm:mt-7 sm:w-auto"
|
||||
>
|
||||
{{ $t('save_broadcast_settings') }}
|
||||
</ButtonBase>
|
||||
@@ -164,10 +76,12 @@ import PageTab from '../../../../components/Layout/PageTab'
|
||||
import MailSetup from '../../../../components/Forms/MailSetup'
|
||||
import { events } from '../../../../bus'
|
||||
import axios from 'axios'
|
||||
import BroadcastSetup from "../../../../components/Forms/BroadcastSetup";
|
||||
|
||||
export default {
|
||||
name: 'AppEnvironment',
|
||||
components: {
|
||||
BroadcastSetup,
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
StorageSetup,
|
||||
@@ -186,67 +100,7 @@ export default {
|
||||
isSendingEmailForm: false,
|
||||
isSendingStorageForm: false,
|
||||
isSendingBroadcastForm: false,
|
||||
broadcast: {
|
||||
driver: undefined,
|
||||
id: undefined,
|
||||
key: undefined,
|
||||
secret: undefined,
|
||||
cluster: undefined,
|
||||
port: undefined,
|
||||
host: undefined,
|
||||
},
|
||||
broadcastDrivers: [
|
||||
{
|
||||
label: 'Pusher',
|
||||
value: 'pusher',
|
||||
},
|
||||
{
|
||||
label: 'VueFileManager Broadcast Server',
|
||||
value: 'native',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: 'none',
|
||||
},
|
||||
],
|
||||
pusherClusters: [
|
||||
{
|
||||
label: 'US East (N. Virginia)',
|
||||
value: 'mt1',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Singapore)',
|
||||
value: 'ap1',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Mumbai)',
|
||||
value: 'ap2',
|
||||
},
|
||||
{
|
||||
label: 'US East (Ohio)',
|
||||
value: 'us2',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Tokyo)',
|
||||
value: 'ap3',
|
||||
},
|
||||
{
|
||||
label: 'US West (Oregon)',
|
||||
value: 'us3',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Sydney)',
|
||||
value: 'ap4',
|
||||
},
|
||||
{
|
||||
label: 'EU (Ireland)',
|
||||
value: 'eu',
|
||||
},
|
||||
{
|
||||
label: 'South America (São Paulo)',
|
||||
value: 'sa1',
|
||||
},
|
||||
],
|
||||
broadcast: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -276,15 +130,7 @@ export default {
|
||||
.finally(() => {
|
||||
this.isSendingBroadcastForm = false
|
||||
|
||||
this.broadcast = {
|
||||
driver: undefined,
|
||||
id: undefined,
|
||||
key: undefined,
|
||||
secret: undefined,
|
||||
cluster: undefined,
|
||||
host: undefined,
|
||||
port: undefined,
|
||||
}
|
||||
this.broadcast = undefined
|
||||
})
|
||||
},
|
||||
async storageSetupSubmit() {
|
||||
|
||||
@@ -23,113 +23,7 @@
|
||||
|
||||
<MailSetup v-model="mail" class="card text-left shadow-card" />
|
||||
|
||||
<div class="card text-left shadow-card">
|
||||
<FormLabel icon="wifi">
|
||||
{{ $t('Broadcasting') }}
|
||||
</FormLabel>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Broadcast Driver"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText
|
||||
title="Broadcast Driver"
|
||||
:error="errors[0]"
|
||||
:is-last="broadcast.driver === 'none' || broadcast.driver === undefined"
|
||||
>
|
||||
<SelectInput
|
||||
v-model="broadcast.driver"
|
||||
:options="broadcastDrivers"
|
||||
placeholder="Select your broadcast driver"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<div v-if="broadcast.driver === 'native'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Hostname or IP" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.host"
|
||||
placeholder="Type your hostname or IP"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Port" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.port"
|
||||
placeholder="Type your port"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="broadcast.driver === 'pusher'">
|
||||
<ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="App ID" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.id"
|
||||
placeholder="Type your app id"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.key"
|
||||
placeholder="Paste your key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Secret" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="broadcast.secret"
|
||||
placeholder="Paste your secret"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Cluster"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Cluster" :error="errors[0]" :is-last="true">
|
||||
<SelectInput
|
||||
v-model="broadcast.cluster"
|
||||
:options="pusherClusters"
|
||||
placeholder="Select your cluster"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
<BroadcastSetup v-model="broadcast" class="card text-left shadow-card" />
|
||||
|
||||
<div class="card text-left shadow-card">
|
||||
<FormLabel>Environment Setup</FormLabel>
|
||||
@@ -185,10 +79,12 @@ import { SettingsIcon } from 'vue-feather-icons'
|
||||
import Headline from '../../components/UI/Labels/LogoHeadline'
|
||||
import { events } from '../../bus'
|
||||
import axios from 'axios'
|
||||
import BroadcastSetup from "../../components/Forms/BroadcastSetup";
|
||||
|
||||
export default {
|
||||
name: 'EnvironmentSetup',
|
||||
components: {
|
||||
BroadcastSetup,
|
||||
MailSetup,
|
||||
StorageSetup,
|
||||
AuthContentWrapper,
|
||||
@@ -221,67 +117,7 @@ export default {
|
||||
],
|
||||
storage: undefined,
|
||||
mail: undefined,
|
||||
broadcast: {
|
||||
driver: undefined,
|
||||
id: undefined,
|
||||
key: undefined,
|
||||
secret: undefined,
|
||||
cluster: undefined,
|
||||
port: undefined,
|
||||
host: undefined,
|
||||
},
|
||||
broadcastDrivers: [
|
||||
{
|
||||
label: 'Pusher',
|
||||
value: 'pusher',
|
||||
},
|
||||
{
|
||||
label: 'VueFileManager Broadcast Server',
|
||||
value: 'native',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: 'none',
|
||||
},
|
||||
],
|
||||
pusherClusters: [
|
||||
{
|
||||
label: 'US East (N. Virginia)',
|
||||
value: 'mt1',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Singapore)',
|
||||
value: 'ap1',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Mumbai)',
|
||||
value: 'ap2',
|
||||
},
|
||||
{
|
||||
label: 'US East (Ohio)',
|
||||
value: 'us2',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Tokyo)',
|
||||
value: 'ap3',
|
||||
},
|
||||
{
|
||||
label: 'US West (Oregon)',
|
||||
value: 'us3',
|
||||
},
|
||||
{
|
||||
label: 'Asia Pacific (Sydney)',
|
||||
value: 'ap4',
|
||||
},
|
||||
{
|
||||
label: 'EU (Ireland)',
|
||||
value: 'eu',
|
||||
},
|
||||
{
|
||||
label: 'South America (São Paulo)',
|
||||
value: 'sa1',
|
||||
},
|
||||
],
|
||||
broadcast: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
Reference in New Issue
Block a user