packmate/src/views/AddService.vue

<template>
	<b-modal @ok="createService" @cancel="reset" id="addServiceModal" title="Add service"
			 cancel-title="Cancel"
			 centered scrollable>
		<form ref="addServiceForm">
			<b-form-group
					label-cols-sm="4"
					label="Name"
					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="Port"
					label-for="addSvc-port">
				<b-form-input @keydown.native.enter="createService" type="number" min="1" max="65535"
							  id="addSvc-port" required v-model.number="svcPort"/>
			</b-form-group>
			<b-form-group
					label-cols-sm="4"
					label="Process chunked transfer encoding"
					label-for="addSvc-process-chunked">
				<b-form-checkbox id="addSvc-process-chunked" required
								 v-model="processChunkedEncoding"/>
			</b-form-group>
			<b-form-group
					label-cols-sm="4"
					label="Decompress GZIP"
					label-for="addSvc-ungzip">
				<b-form-checkbox id="addSvc-ungzip" required
								 v-model="ungzipHttp"/>
			</b-form-group>
			<b-form-group
					label-cols-sm="4"
					label="Apply urldecode"
					label-for="addSvc-urldecode">
				<b-form-checkbox id="addSvc-urldecode" required
								 v-model="urldecodeHttpRequests"/>
			</b-form-group>
			<b-form-group
					label-cols-sm="4"
					label="Merge adjacent packets"
					label-for="addSvc-mergeAdjacent">
				<b-form-checkbox id="addSvc-mergeAdjacent" required
								 v-model="mergeAdjacentPackets"/>
			</b-form-group>
			<b-form-group
					label-cols-sm="4"
					label="Inflate WebSockets"
					label-for="addSvc-inflateWS">
				<b-form-checkbox id="addSvc-inflateWS" required
								 v-model="parseWebSockets"/>
			</b-form-group>
		</form>
	</b-modal>
</template>

<script>
	export default {
		name: 'AddService',
		data() {
			return {
				svcName: String(),
				svcPort: Number(),
				processChunkedEncoding: Boolean,
				ungzipHttp: Boolean(),
				urldecodeHttpRequests: Boolean(),
				mergeAdjacentPackets: Boolean(),
				parseWebSockets: Boolean(),
			};
		},
		methods: {
			checkValidity() {
				return this.$refs.addServiceForm.reportValidity()
					&& this.svcPort >= 1
					&& this.svcPort <= 65535;
			},

			reset() {
				this.svcName = '';
				this.svcPort = 0;
				this.processChunkedEncoding = false;
				this.ungzipHttp = false;
				this.urldecodeHttpRequests = false;
				this.mergeAdjacentPackets = false;
				this.parseWebSockets = false;
			},

			createService(ev) {
				const name = this.svcName;
				const port = this.svcPort;
				const processChunkedEncoding = this.processChunkedEncoding;
				const ungzipHttp = this.ungzipHttp;
				const urldecodeHttpRequests = this.urldecodeHttpRequests;
				const mergeAdjacentPackets = this.mergeAdjacentPackets;
				const parseWebSockets = this.parseWebSockets;
				if (!this.checkValidity()) {
					ev.preventDefault();
					console.debug('Form is invalid');
					return;
				}
				console.debug(`Creating service ${name} (${port})...`);

				this.$http.post('service/', {
					name,
					port,
					processChunkedEncoding,
					ungzipHttp,
					urldecodeHttpRequests,
					mergeAdjacentPackets,
					parseWebSockets,
				}).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(`Failed to add service: ${e}`, {
						title: 'Error',
						variant: 'danger',
					});
					console.error('Failed to add service', e);
				});
				ev.preventDefault();
			},
		},
	};
</script>

<style scoped>

</style>