From 4933cf5f411a1e17e0ea61d0b1296fb355418344 Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Tue, 26 Nov 2019 01:34:34 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D0=B2=D0=B8=D0=B3=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8F=20=D0=BC=D0=B5=D0=B6=D0=B4=D1=83=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BC=D0=B0=D0=BC=D0=B8=20=D0=BF=D0=BE=20Arrow=20k?=
 =?UTF-8?q?eys?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavbarService.vue |  3 +-
 src/components/Sidebar.vue       | 88 +++++++++++++++++++++++++++++++-
 src/components/SidebarStream.vue |  4 +-
 3 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/src/components/NavbarService.vue b/src/components/NavbarService.vue
index 5965fd7..2e9f6b8 100644
--- a/src/components/NavbarService.vue
+++ b/src/components/NavbarService.vue
@@ -1,5 +1,6 @@
 <template>
-	<router-link tag="li" class="nav-item text-nowrap edit-button" :to="{name:'stream', params: {servicePort: port}}">
+	<router-link tag="li" class="nav-item text-nowrap edit-button"
+				 :to="{name:'stream', params: {servicePort: port}, query: this.$route.query}">
 		<a class="nav-link">{{name}} #{{port}}</a>
 
 		<a class="nav-link" style="cursor: pointer" @click.stop.prevent="editService">
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 8c31d90..ad3e744 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -15,7 +15,8 @@
 					@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;">
+			<button type="button" class="btn btn-sm btn-outline-info" style="float: right;"
+					@click.stop.prevent="scrollUp">
 				<i class="fas fa-angle-double-up"/>
 			</button>
 		</div>
@@ -39,6 +40,70 @@
 		data() {
 			return {
 				streams: [],
+				navigationKeysCallback: (e) => {
+					if (!e.ctrlKey) return;
+					if (e.key === 'ArrowUp') {
+						e.preventDefault();
+						const index = this.streams.findIndex(e => e.id === this.$route.params.streamId);
+						const newStream = this.streams[index - 1];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					} else if (e.key === 'ArrowDown') {
+						e.preventDefault();
+						const index = this.streams.findIndex(e => e.id === this.$route.params.streamId);
+						const newStream = this.streams[index + 1];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					} else if (e.key === 'Home') {
+						const newStream = this.streams[0];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					} else if (e.key === 'End') {
+						const newStream = this.streams[this.streams.length - 1];
+						if (!newStream) return;
+						const newId = newStream.id;
+						this.$router.push({
+							name: 'stream',
+							params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+							query: this.$route.query,
+						});
+						document.getElementById(`stream-${newId}`).scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'center',
+						});
+					}
+				},
 			};
 		},
 		watch: {
@@ -108,6 +173,27 @@
 
 				this.streams.unshift(stream);
 			},
+			scrollUp() {
+				const newStream = this.streams[0];
+				if (!newStream) return;
+				const newId = newStream.id;
+				this.$router.push({
+					name: 'stream',
+					params: {servicePort: this.$route.params.servicePort, streamId: newId,},
+					query: this.$route.query,
+				});
+				document.getElementById(`stream-${newId}`).scrollIntoView({
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'center',
+				});
+			},
+		},
+		mounted() {
+			document.addEventListener('keydown', this.navigationKeysCallback);
+		},
+		beforeDestroy() {
+			document.removeEventListener('keydown', this.navigationKeysCallback);
 		},
 		components: {
 			SidebarStream,
diff --git a/src/components/SidebarStream.vue b/src/components/SidebarStream.vue
index cc9a16d..c4d7d02 100644
--- a/src/components/SidebarStream.vue
+++ b/src/components/SidebarStream.vue
@@ -1,7 +1,7 @@
 <template>
-	<li class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
+	<li :id="`stream-${stream.id}`" class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
 		<router-link class="nav-link"
-					 :to="{name: 'stream', params: {servicePort: stream.service, streamId: stream.id}}">
+					 :to="{name: 'stream', params: {servicePort: stream.service, streamId: stream.id}, query: this.$route.query}">
 			<a @click.stop.prevent="toggleFavorite">
 				<i class="fa-star" style="color: #DC3545" :class="favorite0 ? 'fas' : 'far'"/>
 			</a>