Изменение и удаление сервисов, фиксы модального окна

Closes #5

src/App.vue

@@ -16,6 +16,7 @@
 		</div>
 		<Settings/>
 		<AddService @serviceAddComplete="$refs.navbar.updateServices()"/>
+		<EditService @serviceEditComplete="$refs.navbar.updateServices()"/>
 	</div>
 </template>
 
@@ -23,10 +24,12 @@
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
 	import AddService from './views/AddService';
+	import EditService from './views/EditService';
 
 	export default {
 		components: {
 			AddService,
+			EditService,
 			Settings,
 			Navbar,
 		},

src/components/NavbarService.vue

@@ -2,7 +2,7 @@
 	<router-link tag="li" class="nav-item text-nowrap edit-button" :to="{name:'stream', params: {servicePort: port}}">
 		<a class="nav-link">{{name}} #{{port}}</a> <!-- TODO: editing! -->
 
-		<a class="nav-link" style="cursor: pointer"> <!-- TODO -->
+		<a class="nav-link" style="cursor: pointer" @click.stop.prevent="editService">
 			<i class="fas fa-pencil-alt"/>
 		</a>
 	</router-link>
@@ -15,6 +15,14 @@
 			name: String(),
 			port: Number(),
 		},
+		methods: {
+			editService() {
+				// Костыль: нельзя запустить BModal с аргументом
+				this.$store.commit('setServiceModalId', this.port);
+				this.$store.commit('setServiceModalName', this.name);
+				this.$bvModal.show('editServiceModal');
+			},
+		},
 	};
 </script>
 

src/store.js

@@ -14,6 +14,9 @@ export default new Vuex.Store({
 		hexdumpLineNumberBase: 10,
 		pageSize: 25,
 		displayFavoritesOnly: false,
+
+		serviceModalName: '',
+		serviceModalId: 0,
 	},
 	mutations: {
 		setApiLogin: (s, p) => s.apiLogin = p,
@@ -23,6 +26,9 @@ export default new Vuex.Store({
 		setPageSize: (s, p) => s.pageSize = p,
 		// eslint-disable-next-line no-unused-vars
 		toggleDisplayFavoritesOnly: (s, p) => s.displayFavoritesOnly = !s.displayFavoritesOnly,
+
+		setServiceModalName: (s, p) => s.serviceModalName = p,
+		setServiceModalId: (s, p) => s.serviceModalId = p,
 	},
 	actions: {},
 	plugins: [
@@ -31,7 +37,12 @@ export default new Vuex.Store({
 			// eslint-disable-next-line no-unused-vars
 			predicate: (mutation, state) => {
 				console.debug('Got mutation:', mutation);
-				return mutation?.type !== 'setDisplayFavoritesOnly';
+				const mName = mutation?.type;
+				const process = mName !== 'toggleDisplayFavoritesOnly'
+					&& mName !== 'setServiceModalName'
+					&& mName !== 'setServiceModalId';
+				console.debug('Processing?', process);
+				return process;
 			},
 		}),
 	],

src/views/AddService.vue

@@ -1,5 +1,6 @@
 <template>
-	<b-modal @ok="createService" @cancel="reset" id="addServiceModal" title="Добавить сервис" cancel-title="Отмена"
+	<b-modal @ok="createService" @cancel="reset" id="addServiceModal" title="Добавить сервис"
+			 cancel-title="Отмена"
 			 centered scrollable>
 		<form ref="addServiceForm">
 			<b-form-group
@@ -42,11 +43,11 @@
 				this.svcPort = 0;
 			},
 
-			createService(e) {
+			createService(ev) {
 				const name = this.svcName;
 				const port = this.svcPort;
 				if (!this.checkValidity()) {
-					e.preventDefault();
+					ev.preventDefault();
 					console.debug('Form is invalid');
 					return;
 				}
@@ -68,6 +69,7 @@
 					});
 					console.error('Failed to add service', e);
 				});
+				ev.preventDefault();
 			},
 		},
 	};

src/views/EditService.vue

@@ -0,0 +1,93 @@
+<template>
+	<b-modal @show="loadData" @ok="editService" @cancel="reset" id="editServiceModal"
+			 title="Редактировать сервис"
+			 cancel-title="Отмена"
+			 centered scrollable>
+		<form ref="editServiceForm">
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Название"
+					label-for="addSvc-name">
+				<b-form-input @keydown.native.enter="editService" id="addSvc-name" required v-model="svcName"/>
+			</b-form-group>
+			<button @click.stop.prevent="deleteService" class="btn btn-danger" style="width: 100%">Удалить</button>
+		</form>
+	</b-modal>
+</template>
+
+<script>
+	export default {
+		name: 'EditService',
+		data() {
+			return {
+				svcName: String(),
+				svcPort: Number(),
+			};
+		},
+		methods: {
+			loadData() {
+				this.svcName = this.$store.state.serviceModalName;
+				this.svcPort = this.$store.state.serviceModalId;
+			},
+
+			checkValidity() {
+				return this.$refs.editServiceForm.reportValidity();
+			},
+
+			reset() {
+				this.svcName = '';
+			},
+
+			editService(ev) {
+				const name = this.svcName;
+				const port = this.svcPort;
+				if (!this.checkValidity()) {
+					ev.preventDefault();
+					console.debug('Form is invalid');
+					return;
+				}
+				console.debug(`Editing service ${name} (${port})...`);
+
+				this.$http.post('service/', {
+					name,
+					port,
+				}).then(response => {
+					const data = response.data;
+					console.debug('Done editing service', data);
+					this.$emit('serviceEditComplete');
+					this.reset();
+					this.$bvModal.hide('editServiceModal');
+				}).catch(e => {
+					this.$bvToast.toast(`Не удалось отредактировать сервис: ${e}`, {
+						title: 'Сбой',
+						variant: 'danger',
+					});
+					console.error('Failed to edit service', e);
+				});
+				ev.preventDefault();
+			},
+
+			deleteService() {
+				this.$http.delete(`service/${this.svcPort}`)
+					.then(response => {
+						const data = response.data;
+						console.debug('Done deleting service', data);
+						this.$emit('serviceEditComplete');
+						this.reset();
+						this.$bvModal.hide('editServiceModal');
+					}).catch(e => {
+					this.$bvToast.toast(`Не удалось удалить сервис: ${e}`, {
+						title: 'Сбой',
+						variant: 'danger',
+					});
+					console.error('Failed to delete service', e);
+				});
+			},
+		},
+	};
+</script>
+
+<style scoped>
+
+</style>