From 8faa5bdc453839ca6dccf9f87c5c897f47dc77f6 Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Fri, 17 May 2019 22:22:09 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BB=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8E=20=D0=BF=D0=BE=20=D0=BF=D0=B0=D1=82=D1=82?=
 =?UTF-8?q?=D0=B5=D1=80=D0=BD=D0=B0=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Content.vue     |  1 -
 src/components/FlagPattern.vue |  9 ++++++++-
 src/components/Sidebar.vue     | 27 ++++++++++++++++++++++-----
 src/components/Stream.vue      |  2 +-
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/Content.vue b/src/components/Content.vue
index f3e10fc..9b6e638 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -58,7 +58,6 @@ export default {
 			}
 
 			instance.post(`/packet/${this.streamId}`, {
-				fetchLatest: false,
 				direction: 'ASC',
 				startingFrom: startsFrom,
 				pageSize: parseInt(this.$store.state.pageSize),
diff --git a/src/components/FlagPattern.vue b/src/components/FlagPattern.vue
index 2763009..fc519ec 100644
--- a/src/components/FlagPattern.vue
+++ b/src/components/FlagPattern.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="dropdown-item" :style="'color:' + color">
+	<div class="dropdown-item" :style="'color:' + color"
+			@click="openPattern">
 		{{name}}: {{regex ? `/${value}/` : `'${value}'`}}
 		<div class="float-right">
 			<button @click.prevent.stop="deleteSelf()" class="btn btn-outline-danger btn-block btn-sm" type="button">x</button>
@@ -9,11 +10,17 @@
 
 <script>
 import axios from "axios";
+import $ from "jquery";
 
 export default {
 	name: "FlagPattern",
 	props: ['name', 'value', 'color', 'id', 'regex',],
 	methods: {
+		openPattern() {
+			this.$router.push({name: 'home', params: this.$route.params, query: {pId: this.id,},});
+			// $('.dropdown').trigger('hide.bs.dropdown')
+			$('.dropdown-toggle').dropdown('toggle')
+		},
 		deleteSelf() {
 			const instance = axios.create({
 				baseURL: this.$store.state.apiUrl,
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 71dac6f..e64bdc0 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -35,24 +35,36 @@ export default {
 					const newStream = this.$data.streams[index - 1];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				} else if (e.key === 'ArrowDown') {
 					e.preventDefault();
 					const index = this.$data.streams.findIndex(e => e.id === this.$props.streamId);
 					const newStream = this.$data.streams[index + 1];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				} else if (e.key === 'Home') {
 					const newStream = this.$data.streams[0];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				} else if (e.key === 'End') {
 					const newStream = this.$data.streams[this.$data.streams.length - 1];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				}
 			},
 		}
@@ -63,6 +75,11 @@ export default {
 			this.streams = [];
 			this.$refs.infiniteLoading.stateChanger.reset();
 		},
+		'$route.query': function (query) {
+			console.debug('Sidebar.vue: query changed! new:', query);
+			this.streams = [];
+			this.$refs.infiniteLoading.stateChanger.reset();
+		},
 	},
 	methods: {
 		infiniteHandler($state) {
@@ -88,10 +105,10 @@ export default {
 			}
 
 			instance.post(`/stream/${this.$props.servicePort || 'all'}`, {
-				fetchLatest: false,
 				direction: 'DESC',
 				startingFrom: startsFrom,
 				pageSize: parseInt(this.$store.state.pageSize),
+				pattern: this.$route.query.pId ? {id: this.$route.query.pId,} : null,
 			}).then(response => {
 				const data = response.data;
 				if (data.length === 0) return $state.complete();
diff --git a/src/components/Stream.vue b/src/components/Stream.vue
index e419d69..d7fd014 100644
--- a/src/components/Stream.vue
+++ b/src/components/Stream.vue
@@ -1,6 +1,6 @@
 <template>
 	<li class="nav-item">
-		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id} }">
+		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
 			#{{id}} {{proto}}<br/>
 			{{new Date(startTime).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
 			- {{new Date(endTime).toLocaleTimeString('ru-RU', {hour:'2-digit', minute: '2-digit', second: '2-digit'})}}