Inline frontend instead of submodule

frontend/src/views/Settings.vue

@@ -0,0 +1,63 @@
+<template>
+	<b-modal id="settingsModal" title="Settings" centered scrollable ok-only>
+		<b-form-group
+				label-cols-sm="4"
+				label-cols-lg="3"
+				description="The number of bytes to display in the binary representation of the packet"
+				label="HEX block width"
+				label-for="settings-hexdumpBlockSize">
+			<b-form-input type="number" id="settings-hexdumpBlockSize" v-model.number="hexdumpBlockSize"/>
+		</b-form-group>
+		<b-form-group
+				label-cols-sm="4"
+				label-cols-lg="3"
+				description="The number system used in line numbers of a binary representation of a packet"
+				label="Line numbering"
+				label-for="settings-hexdumpLineNumberBase">
+			<b-form-select id="settings-hexdumpLineNumberBase" v-model="hexdumpLineNumberBase">
+				<option :value="10" selected>Decimal</option>
+				<option :value="16">Hexadecimal</option>
+			</b-form-select>
+		</b-form-group>
+		<b-form-group
+				label-cols-sm="4"
+				label-cols-lg="3"
+				description="The number of streams to download at a time"
+				label="Page size"
+				label-for="settings-pageSize">
+			<b-form-input type="number" id="settings-pageSize" v-model.number="pageSize"/>
+		</b-form-group>
+	</b-modal>
+</template>
+
+<script>
+	export default {
+		name: 'Settings',
+		computed: {
+			hexdumpBlockSize: {
+				get() {
+					return this.$store.state.hexdumpBlockSize;
+				},
+				set(v) {
+					this.$store.commit('setHexdumpBlockSize', v);
+				},
+			},
+			hexdumpLineNumberBase: {
+				get() {
+					return this.$store.state.hexdumpLineNumberBase;
+				},
+				set(v) {
+					this.$store.commit('setHexdumpLineNumberBase', v);
+				},
+			},
+			pageSize: {
+				get() {
+					return this.$store.state.pageSize;
+				},
+				set(v) {
+					this.$store.commit('setPageSize', v);
+				},
+			},
+		},
+	};
+</script>