From 00f3eff44728c7fbf70b99b277016e0809cdfb2a Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Mon, 25 Nov 2019 01:52:13 +0300
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=B2=D0=BE=D0=B4=20=D0=BF=D0=B0?=
 =?UTF-8?q?=D0=BA=D0=B5=D1=82=D0=BE=D0=B2=20=D0=BF=D1=80=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=8B=D0=BC=20=D1=82=D0=B5=D0=BA=D1=81=D1=82=D0=BE=D0=BC=20(?=
 =?UTF-8?q?=D0=B1=D0=B5=D0=B7=20=D0=BF=D0=B0=D1=82=D1=82=D0=B5=D1=80=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Packet.vue   | 72 +++++++++++++++++++++++++++++++++++++
 src/components/Sidebar.vue  |  3 +-
 src/views/ContentStream.vue | 68 +++++++++++++++++++++++++++++++++--
 3 files changed, 140 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Packet.vue

diff --git a/src/components/Packet.vue b/src/components/Packet.vue
new file mode 100644
index 0000000..40e5c6a
--- /dev/null
+++ b/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>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index d188891..2ddb1a0 100644
--- a/src/components/Sidebar.vue
+++ b/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>
diff --git a/src/views/ContentStream.vue b/src/views/ContentStream.vue
index 9738e6d..d8110af 100644
--- a/src/views/ContentStream.vue
+++ b/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>