1
0
mirror of https://github.com/r4sas/recastin-panel synced 2025-09-02 00:42:07 +00:00

Use vue shorthand for events, bind save on form instead button

This commit is contained in:
Shyim 2018-04-26 17:09:05 +02:00
parent b98555fcc2
commit 198dd6e4ad
5 changed files with 59 additions and 54 deletions

View File

@ -19,7 +19,7 @@
<a href="#/ucp/settings" class="nav-link">
Account Settings
</a>
<a href="#" v-on:click="logout" class="nav-link">
<a href="#" @click="logout" class="nav-link">
Log out
</a>
</li>

View File

@ -7,35 +7,37 @@
<h4 v-if="$route.params.id != 'add'">Edit "{{ endpoint.name }}"</h4>
<card>
<fg-input label="Name" v-model="endpoint.name"></fg-input>
<form @submit="save">
<fg-input label="Name" v-model="endpoint.name"></fg-input>
<div class="form-group">
<p-checkbox v-model="endpoint.active">Active</p-checkbox>
</div>
<div class="form-group">
<p-checkbox v-model="endpoint.active">Active</p-checkbox>
</div>
<div class="form-group">
<label class="control-label">
Type
</label>
<select class="form-control" v-model="endpoint.type">
<option v-for="name in serviceNames" :value="name">{{name}}</option>
</select>
</div>
<div class="form-group">
<label class="control-label">
Type
</label>
<select class="form-control" v-model="endpoint.type">
<option v-for="name in serviceNames" :value="name">{{name}}</option>
</select>
</div>
<div class="form-group" v-if="serverData.length">
<label class="control-label">
Server
</label>
<select class="form-control" v-model="endpoint.server">
<option v-for="server in serverData" :value="server.value">{{server.name}}</option>
</select>
</div>
<div class="form-group" v-if="serverData.length">
<label class="control-label">
Server
</label>
<select class="form-control" v-model="endpoint.server">
<option v-for="server in serverData" :value="server.value">{{server.name}}</option>
</select>
</div>
<fg-input label="Server" v-model="endpoint.server" v-if="!serverData.length"></fg-input>
<fg-input label="Server" v-model="endpoint.server" v-if="!serverData.length"></fg-input>
<fg-input label="Stream-Key" v-model="endpoint.streamKey"></fg-input>
<fg-input label="Stream-Key" v-model="endpoint.streamKey"></fg-input>
<button class="btn btn-primary" v-on:click="save">Save</button>
<button class="btn btn-primary">Save</button>
</form>
</card>
</div>
</div>
@ -77,7 +79,8 @@
}
},
methods: {
save: function () {
save: function (e) {
e.preventDefault();
this.axios.post('/streams/' + this.$route.params.streamId + '/endpoints/update', this.endpoint).then(() => {
this.$router.push('/ucp/streams/' + this.$route.params.streamId + '/');
}).catch(error => {

View File

@ -6,22 +6,25 @@
<div class="alert alert-danger" v-if="authFailed">Bad credentials</div>
<fg-input type="text"
label="Username"
placeholder="Username"
v-model="login._username">
</fg-input>
<div class="form-group">
<label class="control-label">Password</label>
<input type="password" class="form-control" placeholder="Password" v-model="login._password">
</div>
<form @submit="onLogin">
<fg-input type="text"
label="Username"
placeholder="Username"
v-model="login._username">
</fg-input>
<div class="form-group">
<p-checkbox v-model="rememberMe">Remember Me</p-checkbox>
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input type="password" class="form-control" placeholder="Password" v-model="login._password">
</div>
<button class="btn btn-primary" v-on:click="onLogin">Login</button>
<div class="form-group">
<p-checkbox v-model="rememberMe">Remember Me</p-checkbox>
</div>
<button class="btn btn-primary">Login</button>
</form>
</div>
</div>
</template>
@ -45,7 +48,8 @@
}
},
methods: {
onLogin: function () {
onLogin: function (e) {
e.preventDefault();
let bodyFormData = new FormData();
bodyFormData.set('_username', this.login._username);
bodyFormData.set('_password', this.login._password);

View File

@ -7,12 +7,14 @@
<h4 v-if="$route.params.id != 'add'">Edit "{{ stream.name }}"</h4>
<card>
<fg-input label="Name" v-model="stream.name"></fg-input>
<div class="form-group">
<p-checkbox v-model="stream.active">Active</p-checkbox>
</div>
<form @submit="save">
<fg-input label="Name" v-model="stream.name"></fg-input>
<div class="form-group">
<p-checkbox v-model="stream.active">Active</p-checkbox>
</div>
<button class="btn btn-primary" v-on:click="save">Save</button>
<button class="btn btn-primary">Save</button>
</form>
</card>
<div v-if="this.$route.params.id !== 'add'">
@ -39,8 +41,8 @@
<td>{{ endpoint.server }}</td>
<td>
<a :href="'#/ucp/streams/' + $route.params.id + '/endpoints/' + endpoint.id" class="btn btn-secondary">Edit</a>
<a v-on:click="toggleEndpoint(endpoint)" class="btn btn-info">{{ endpoint.active ? 'Disable' : 'Enable' }}</a>
<a v-on:click="deleteEndpoint(endpoint)" class="btn btn-danger">Delete</a>
<a @click="toggleEndpoint(endpoint)" class="btn btn-info">{{ endpoint.active ? 'Disable' : 'Enable' }}</a>
<a @click="deleteEndpoint(endpoint)" class="btn btn-danger">Delete</a>
</td>
</tr>
</tbody>
@ -81,7 +83,8 @@
}
},
methods: {
save: function () {
save: function (e) {
e.preventDefault();
this.axios.post('/streams/update', this.stream).then(() => {
this.$router.push('/ucp/streams/');
}).catch(error => {

View File

@ -25,8 +25,8 @@
<td>
<a :href="'#/ucp/streams/' + stream.id + '/setup'" class="btn btn-info">Setup</a>
<a :href="'#/ucp/streams/' + stream.id + '/'" class="btn btn-secondary">Edit</a>
<a v-on:click="regenerateKey(stream)" class="btn btn-danger">Regenerate Stream Key</a>
<a v-on:click="deleteStream(stream)" class="btn btn-danger">Delete</a>
<a @click="regenerateKey(stream)" class="btn btn-danger">Regenerate Stream Key</a>
<a @click="deleteStream(stream)" class="btn btn-danger">Delete</a>
</td>
</tr>
</tbody>
@ -38,7 +38,6 @@
</div>
</template>
<script>
export default {
data() {
return {
@ -75,10 +74,6 @@
}
},
}
</script>
<style>
.text-right {
text-align: right;
}
</style>