Вывод пакетов простым текстом (без паттернов)

src/components/Packet.vue

@@ -0,0 +1,72 @@
+<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"
+			  v-html="base64ToHtml(packet.content)"/>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'Packet',
+		props: {
+			packet: {
+				id: Number(),
+				matches: Array(),
+				timestamp: Number(),
+				incoming: Boolean(),
+				ungzipped: Boolean(),
+				content: String(),
+			},
+		},
+		methods: {
+			dateToText(unixTimestamp) {
+				return new Date(unixTimestamp).toLocaleDateString('ru-RU', {
+					month: '2-digit',
+					day: '2-digit',
+					hour: '2-digit',
+					minute: '2-digit',
+					second: '2-digit',
+				});
+			},
+			escapeHtml(in_) {
+				return in_.replace(/[&<>"'/]/g, s => {
+					const entityMap = {
+						'&': '&amp;',
+						'<': '&lt;',
+						'>': '&gt;',
+						'"': '&quot;',
+						'\'': '&#39;',
+						'/': '&#x2F;',
+					};
+
+					return entityMap[s];
+				});
+			},
+			base64ToHtml(in_) {
+				return this.escapeHtml(atob(in_)).split('\n').join('<br/>');
+			},
+		},
+	};
+</script>
+
+<style scoped>
+	.packet {
+		background: rgba(224, 246, 255, 0.4);
+		box-shadow: 0 0 5px 5px rgba(224, 246, 255, 0.4);
+	}
+
+	/*noinspection CssUnusedSymbol*/
+	.packet-incoming {
+		background: rgba(251, 233, 231, 0.4);
+		box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);
+	}
+
+	code {
+		font-family: "Ubuntu Mono", "Lucida Console", monospace;
+		font-size: 100%;
+		color: black;
+		margin-bottom: 10px;
+		padding-bottom: 5px;
+	}
+</style>

src/components/Sidebar.vue

@@ -80,6 +80,8 @@
 			},
 			toggleFavorites() {
 				this.$store.commit('toggleDisplayFavoritesOnly');
+				this.streams = [];
+				this.$refs.infiniteLoader.stateChanger.reset();
 			},
 			togglePause() {
 				this.$store.commit('togglePause');
@@ -87,7 +89,6 @@
 		},
 		components: {
 			SidebarStream,
-			// InfiniteLoading,
 		},
 	};
 </script>

src/views/ContentStream.vue

@@ -1,17 +1,81 @@
 <template>
 	<div>
 		<p>
-			Some stream #{{ $route.params.streamId }} at port #{{ $route.params.servicePort }} <br/>
 			<span style="background: rgba(224, 246, 255, 0.4); box-shadow: 0 0 5px 5px rgba(224, 246, 255, 0.4);">Ответ</span>,
 			<span style="background: rgba(251, 233, 231, 0.4); box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);">запрос</span>.
 		</p>
+		<Packet v-for="packet in packets"
+				:key="packet.id"
+				:packet="packet"/>
+		<infinite-loading @infinite="infiniteLoadingHandler" ref="infiniteLoader"/>
 	</div>
 </template>
 
 <script>
+	import Packet from '../components/Packet';
+
 	export default {
-		props: ['servicePort', 'streamId',],
 		name: 'ContentStream',
+		props: ['servicePort', 'streamId',],
+		data() {
+			return {
+				packets: [
+					/*
+					{
+						"id": 17,
+						"matches": [],
+						"timestamp": 1574630325546,
+						"incoming": false,
+						"ungzipped": false,
+						"content": "shit in b64=="
+					} */
+				],
+			};
+		},
+		watch: {
+			'$route.params.streamId': function () {
+				this.packets = [];
+				this.$refs.infiniteLoader.stateChanger.reset();
+			},
+		},
+		methods: {
+			infiniteLoadingHandler($state) {
+				if (!this.$route.params.streamId) return $state.complete();
+
+				const packets = this.packets;
+				let startsFrom;
+				if (packets && packets.length && packets[packets.length - 1]) {
+					startsFrom = packets[packets.length - 1].id;
+				} else {
+					startsFrom = 0;
+				}
+
+				this.$http.post(`packet/${this.$route.params.streamId}`, {
+					direction: 'ASC',
+					startingFrom: startsFrom,
+					pageSize: this.$store.state.pageSize,
+				}).then(response => {
+					const data = response.data;
+					if (data.length === 0) return $state.complete();
+					if (data[0] && this.packets[0] && data[0].id === this.packets[0].id) {
+						$state.complete();
+					} else {
+						this.packets.push(...data);
+						$state.loaded();
+					}
+				}).catch(e => {
+					this.$bvToast.toast(`Не удалось загрузить пакеты: ${e}`, {
+						title: 'Сбой',
+						variant: 'danger',
+					});
+					console.error('Failed to load portion of packets:', e);
+					return $state.error();
+				});
+			},
+		},
+		components: {
+			Packet,
+		},
 	};
 </script>