Merged endpoint overview in stream editing

public/theme/src/components/ReCast/Endpoints/List.vue

@@ -1,58 +0,0 @@
-<template>
-    <div class="content">
-        <div class="container-fluid">
-            <div class="row">
-                <div class="col-md-12">
-                    <div class="bg-white p-3">
-                        <a class="btn btn-primary mb-3" :href="'#/ucp/streams/' + $route.params.id + '/endpoints/add'">Add a new Endpoint</a>
-
-                        <table class="table">
-                            <thead class="thead-dark">
-                            <tr>
-                                <th>Name</th>
-                                <th>Service</th>
-                                <th>Location</th>
-                                <th>Action</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="endpoint in endpoints">
-                                    <td>{{ endpoint.name }}</td>
-                                    <td>{{ endpoint.type }}</td>
-                                    <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="deleteEndpoint(endpoint)" class="btn btn-danger">Delete</a>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-    export default {
-        data() {
-            return {
-                endpoints: []
-            }
-        },
-        mounted() {
-            this.axios.get('/streams/' + this.$route.params.id + '/endpoints/').then(response => {
-                this.endpoints = response.data;
-            });
-        },
-        methods: {
-            deleteEndpoint: function (endpoint) {
-                this.endpoints.splice(this.endpoints.indexOf(endpoint), 1);
-                this.axios.post('/streams/deleteEndpoint', {id: endpoint.id});
-            }
-        }
-    }
-</script>
-<style>
-
-</style>

public/theme/src/components/ReCast/Streams/EditStream.vue

@@ -14,6 +14,36 @@
 
                         <button class="btn btn-primary" v-on:click="save">Save</button>
                     </card>
+
+                    <div v-if="this.$route.params.id !== 'add'">
+                        <h4>Endpoints</h4>
+
+                        <div class="bg-white p-3">
+                            <a class="btn btn-primary mb-3" :href="'#/ucp/streams/' + $route.params.id + '/endpoints/add'">Add a new Endpoint</a>
+
+                            <table class="table">
+                                <thead class="thead-dark">
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Service</th>
+                                    <th>Location</th>
+                                    <th>Action</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr v-for="endpoint in endpoints">
+                                    <td>{{ endpoint.name }}</td>
+                                    <td>{{ endpoint.type }}</td>
+                                    <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="deleteEndpoint(endpoint)" class="btn btn-danger">Delete</a>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -33,7 +63,8 @@
                 stream: {
                     active: false,
                     name: ''
-                }
+                },
+                endpoints: []
             }
         },
         mounted() {
@@ -41,6 +72,9 @@
                 this.axios.get('/streams/one?id=' + this.$route.params.id).then(response => {
                     this.stream = response.data;
                 });
+                this.axios.get('/streams/' + this.$route.params.id + '/endpoints/').then(response => {
+                    this.endpoints = response.data;
+                });
             }
         },
         methods: {
@@ -48,6 +82,10 @@
                 this.axios.post('/streams/update', this.stream).then(() => {
                     this.$router.push('/ucp/streams/');
                 })
+            },
+            deleteEndpoint: function (endpoint) {
+                this.endpoints.splice(this.endpoints.indexOf(endpoint), 1);
+                this.axios.post('/streams/deleteEndpoint', {id: endpoint.id});
             }
         }
     }

public/theme/src/components/ReCast/Streams/List.vue

@@ -22,7 +22,6 @@
                                     <td>{{ getProviders(stream) }}</td>
                                     <td>
                                         <a :href="'#/ucp/streams/' + stream.id + '/setup'" class="btn btn-info">Setup</a>
-                                        <a :href="'#/ucp/streams/' + stream.id + '/endpoints'" class="btn btn-primary">Endpoints</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>
@@ -77,5 +76,7 @@
 
 </script>
 <style>
-
+    .text-right {
+        text-align: right;
+    }
 </style>

public/theme/src/routes/routes.js

@@ -12,7 +12,6 @@ import Overview from 'src/components/ReCast/Overview.vue'
 import ListStreams from 'src/components/ReCast/Streams/List.vue'
 import EditStream from 'src/components/ReCast/Streams/EditStream.vue'
 import SetupStream from 'src/components/ReCast/Streams/SetupStream.vue'
-import ListEndpoints from 'src/components/ReCast/Endpoints/List.vue'
 import EditEndpoint from 'src/components/ReCast/Endpoints/EditEndpoint.vue'
 
 const routes = [
@@ -48,11 +47,6 @@ const routes = [
                 component: EditStream,
                 meta: {auth: true},
             },
-            {
-                path: 'streams/:id/endpoints',
-                component: ListEndpoints,
-                meta: {auth: true},
-            },
             {
                 path: 'streams/:id/setup',
                 component: SetupStream,