Добавление сервисов, сообщения об ошибках, мелкие фиксы

src/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="app">
-		<Navbar/>
+		<Navbar ref="navbar"/>
 		<div class="container-fluid">
 			<div class="row">
 				<transition name="fade" mode="out-in">
@@ -15,15 +15,18 @@
 			</div>
 		</div>
 		<Settings/>
+		<AddService @serviceAddComplete="$refs.navbar.updateServices()"/>
 	</div>
 </template>
 
 <script>
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
+	import AddService from './views/AddService';
 
 	export default {
 		components: {
+			AddService,
 			Settings,
 			Navbar,
 		},

src/components/Navbar.vue

@@ -14,6 +14,12 @@
 							   :key="service.name"
 							   :name="service.name"
 							   :port="service.port"/>
+				<li class="nav-item text-nowrap" style="padding-left: 1em;">
+					<div class="my-2 my-lg-0 mr-3 navbar-cogs" style="cursor: pointer;"
+						 @click.stop.prevent="showAddService">
+						<i class="fas fa-plus-circle"/>
+					</div>
+				</li>
 			</ul>
 
 			<div class="my-2 my-lg-0 mr-3 navbar-cogs" style="cursor: pointer;"
@@ -42,6 +48,10 @@
 				this.$bvModal.show('settingsModal');
 				console.debug('Showing settings...');
 			},
+			showAddService() {
+				this.$bvModal.show('addServiceModal');
+				console.debug('Showing addService...');
+			},
 			updateServices() {
 				this.$http.get('service/')
 					.then(r => this.services = r.data)

src/components/Sidebar.vue

@@ -73,6 +73,10 @@
 					this.streams.push(...data);
 					return $state.loaded();
 				}).catch(e => {
+					this.$bvToast.toast(`Не удалось загрузить стримы: ${e}`, {
+						title: 'Сбой',
+						variant: 'danger',
+					});
 					console.error('Failed to load portion of streams:', e);
 					return $state.error();
 				});

src/main.js

@@ -14,8 +14,8 @@ Vue.config.productionTip = false;
 Vue.use(BootstrapVue);
 Vue.use(InfiniteLoading, {
 	slots: {
-		'no-results': 'Нет результатов...',
-		'no-more': 'Данных больше нет',
+		noResults: 'Нет результатов...',
+		noMore: 'Данных больше нет',
 		error: 'Произошла ошибка!',
 		errorBtnText: 'Повторить',
 	},

src/views/AddService.vue

@@ -0,0 +1,78 @@
+<template>
+	<b-modal @ok="createService" @cancel="reset" id="addServiceModal" title="Добавить сервис" cancel-title="Отмена"
+			 centered scrollable>
+		<form ref="addServiceForm">
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Название"
+					label-for="addSvc-name">
+				<b-form-input @keydown.native.enter="createService" id="addSvc-name" required v-model="svcName"/>
+			</b-form-group>
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Порт"
+					label-for="addSvc-port">
+				<b-form-input @keydown.native.enter="createService" type="number" id="addSvc-port" required
+							  v-model.number="svcPort"/>
+			</b-form-group>
+		</form>
+	</b-modal>
+</template>
+
+<script>
+	export default {
+		name: 'AddService',
+		data() {
+			return {
+				svcName: String(),
+				svcPort: Number(),
+			};
+		},
+		methods: {
+			checkValidity() {
+				return this.$refs.addServiceForm.reportValidity()
+					&& this.svcPort >= 1
+					&& this.svcPort <= 65535;
+			},
+
+			reset() {
+				this.svcName = '';
+				this.svcPort = 0;
+			},
+
+			createService(e) {
+				const name = this.svcName;
+				const port = this.svcPort;
+				if (!this.checkValidity()) {
+					e.preventDefault();
+					console.debug('Form is invalid');
+					return;
+				}
+				console.debug(`Creating service ${name} (${port})...`);
+
+				this.$http.post('service/', {
+					name,
+					port,
+				}).then(response => {
+					const data = response.data;
+					console.debug('Done adding service', data);
+					this.$emit('serviceAddComplete');
+					this.reset();
+					this.$bvModal.hide('addServiceModal');
+				}).catch(e => {
+					this.$bvToast.toast(`Не удалось добавить сервис: ${e}`, {
+						title: 'Сбой',
+						variant: 'danger',
+					});
+					console.error('Failed to add service', e);
+				});
+			},
+		},
+	};
+</script>
+
+<style scoped>
+
+</style>