131 lines
4.3 KiB
Vue
131 lines
4.3 KiB
Vue
<template>
|
|
<div class="columns is-multiline">
|
|
<div class="column is-12 is-clearfix">
|
|
<span class="title is-4">
|
|
<NuxtLink href="/backends">Backends</NuxtLink>
|
|
: Edit -
|
|
<NuxtLink :href="'/backends/' + id">{{ id }}</NuxtLink>
|
|
</span>
|
|
|
|
<div class="is-pulled-right">
|
|
<div class="field is-grouped"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-12">
|
|
<form id="backend_edit_form" @submit.prevent="saveContent">
|
|
<div class="box">
|
|
|
|
<div class="field">
|
|
<label class="label">Backend Name</label>
|
|
<div class="control has-icons-left">
|
|
<input class="input" type="text" v-model="backend.name" required readonly disabled>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<p class="help">
|
|
Choose a unique name for this backend. You cannot change it later. Backend name must be in <code>lower
|
|
case a-z, 0-9 and _</code> only.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Backend Type</label>
|
|
<div class="control has-icons-left">
|
|
<div class="select is-fullwidth" disabled>
|
|
<select v-model="backend.type" disabled class="is-capitalized">
|
|
<option v-for="(bType, index) in supported" :key="'btype-'+index" :value="bType">
|
|
{{ bType }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-globe"></i>
|
|
</div>
|
|
<p class="help">
|
|
Select the correct backend type.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Backend URL</label>
|
|
<div class="control has-icons-left">
|
|
<input class="input" type="text" v-model="backend.url" required>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-link"></i>
|
|
</div>
|
|
<p class="help">
|
|
Enter the URL of the backend.
|
|
<a v-if="'plex' === backend.type" href="javascript:void(0)">Get associated servers with token.</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Backend Token</label>
|
|
<div class="control has-icons-left">
|
|
<input class="input" type="text" v-model="backend.token" required>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-key"></i>
|
|
</div>
|
|
<p class="help">
|
|
Enter the token of the backend.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Backend User ID</label>
|
|
<div class="control has-icons-left">
|
|
<input class="input" type="text" v-model="backend.user" required>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-user-tie"></i>
|
|
</div>
|
|
<p class="help">
|
|
The user ID of the backend. <a href="javascript:void(0)">Pull User ids from backend.</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label">Backend Unique ID</label>
|
|
<div class="control has-icons-left">
|
|
<input class="input" type="text" v-model="backend.uuid" required>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-server"></i>
|
|
</div>
|
|
<p class="help">
|
|
The Unique identifier for the backend.
|
|
<a href="javascript:void(0)">Pull from the backend</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const id = useRoute().params.backend
|
|
const backend = ref({})
|
|
const supported = ref([])
|
|
|
|
const loadContent = async () => {
|
|
let content = await request('/system/supported')
|
|
let json = await content.json()
|
|
supported.value = json.supported
|
|
|
|
content = await request(`/backends/${id}`)
|
|
json = await content.json()
|
|
backend.value = json.backend
|
|
}
|
|
|
|
onMounted(() => loadContent())
|
|
|
|
</script>
|