Возможность смотреть пакеты в текстовом или бинарном режиме

src/components/NavbarService.vue

@@ -1,6 +1,6 @@
 <template>
 	<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">{{name}} #{{port}}</a>
 
 		<a class="nav-link" style="cursor: pointer" @click.stop.prevent="editService">
 			<i class="fas fa-pencil-alt"/>

src/components/Packet.vue

@@ -1,8 +1,12 @@
 <template>
 	<div class="packet" :class="{'packet-incoming': packet.incoming}">
 		<div>#{{ packet.id }} at {{ dateToText(packet.timestamp) }}, {{ packet.ungzipped ? 'GZIP' : 'Non-GZIP' }}</div>
-		<code class="d-flex pt-2 pb-2 mb-3 border-bottom"
+		<code v-if="!this.$store.state.hexdumpMode"
+			  class="d-flex pt-2 pb-2 mb-3 border-bottom"
 			  v-html="base64ToHtml(packet.content)"/>
+		<code v-else
+			  class="d-flex pt-2 pb-2 mb-3 border-bottom"
+			  v-html="escapeHtml(hexdata).split('\n').join('<br/>')"/>
 	</div>
 </template>
 
@@ -19,7 +23,33 @@
 				content: String(),
 			},
 		},
+		computed: {
+			hexdata() {
+				const dataString = atob(this.packet.content);
+				return this.hexdump(dataString, this.$store.state.hexdumpBlockSize, this.$store.state.hexdumpLineNumberBase);
+			},
+		},
 		methods: {
+			hexdump(buffer, blockSize, lineNumberBase) {
+				blockSize = parseInt(blockSize, 10) || 16;
+				lineNumberBase = parseInt(lineNumberBase, 10) || 10;
+				let lines = [];
+				const hex = '0123456789ABCDEF';
+				for (let b = 0; b < buffer.length; b += blockSize) {
+					let block = buffer.slice(b, Math.min(b + blockSize, buffer.length));
+					let addr = ('0000000000' + b.toString(lineNumberBase)).slice(-10);
+					let codes = block.split('').map(ch => {
+						let code = ch.charCodeAt(0);
+						return ' ' + hex[(0xF0 & code) >> 4] + hex[0x0F & code];
+					}).join('');
+					codes += ' ..'.repeat(blockSize - block.length);
+					// eslint-disable-next-line no-control-regex
+					let chars = block.replace(/[\x00-\x1F]/g, '.');
+					chars += ' '.repeat(blockSize - block.length);
+					lines.push(addr + ':' + codes + ' |' + chars + '|');
+				}
+				return lines.join('\n');
+			},
 			dateToText(unixTimestamp) {
 				return new Date(unixTimestamp).toLocaleDateString('ru-RU', {
 					month: '2-digit',

src/components/Sidebar.vue

@@ -11,6 +11,10 @@
 					@click.stop.prevent="toggleFavorites">
 				<i class="fas fa-star"/>
 			</button>
+			<button type="button" class="btn btn-outline-primary btn-sm ml-1"
+					@click.stop.prevent="toggleHexdump">
+				<i :class="this.$store.state.hexdumpMode ? 'far fa-file-code' : 'fas fa-align-left'"/>
+			</button>
 			<button type="button" class="btn btn-sm btn-outline-info" style="float: right;">
 				<i class="fas fa-angle-double-up"/>
 			</button>
@@ -91,6 +95,9 @@
 			togglePause() {
 				this.$store.commit('togglePause');
 			},
+			toggleHexdump() {
+				this.$store.commit('toggleHexdumpMode');
+			},
 			addStreamFromWs(stream) {
 				const currentPort = parseInt(this.$route?.params?.servicePort, 10);
 				if (currentPort && currentPort !== stream.service) return;

src/store.js

@@ -16,6 +16,8 @@ export default new Vuex.Store({
 		displayFavoritesOnly: false,
 		pause: false,
 
+		hexdumpMode: false,
+
 		serviceModalName: '',
 		serviceModalId: 0,
 	},
@@ -29,6 +31,8 @@ export default new Vuex.Store({
 		toggleDisplayFavoritesOnly: (s, p) => s.displayFavoritesOnly = !s.displayFavoritesOnly,
 		// eslint-disable-next-line no-unused-vars
 		togglePause: (s, p) => s.pause = !s.pause,
+		// eslint-disable-next-line no-unused-vars
+		toggleHexdumpMode: (s, p) => s.hexdumpMode = !s.hexdumpMode,
 
 		setServiceModalName: (s, p) => s.serviceModalName = p,
 		setServiceModalId: (s, p) => s.serviceModalId = p,
@@ -44,7 +48,8 @@ export default new Vuex.Store({
 				const process = mName !== 'toggleDisplayFavoritesOnly'
 					&& mName !== 'setServiceModalName'
 					&& mName !== 'setServiceModalId'
-					&& mName !== 'togglePause';
+					&& mName !== 'togglePause'
+					&& mName !== 'toggleHexdumpMode';
 				console.debug('Processing?', process);
 				return process;
 			},