From 2b6c1c45c26819863564b46fba8c7b90cac39e58 Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Sun, 19 May 2019 02:51:03 +0300
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=BF=D0=B8=D0=BB=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=B1=D1=80=D0=B0=D0=BD=D0=BD=D0=BE=D0=B5,=20?=
 =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20"=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=80=D1=83=D1=81=D0=B5=D0=BB=D1=8C"=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B8=20=D0=BC=D0=B0=D0=BB=D0=B5=D0=BD=D1=8C=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BB-=D0=B2=D0=B5=20=D1=81=D1=82=D1=80=D0=B8?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Content.vue | 17 +++++++++-
 src/components/Sidebar.vue | 18 ++++++----
 src/components/Stream.vue  | 69 ++++++++++++++++++++++++++++++++++++--
 src/store.js               |  2 ++
 src/views/Home.vue         |  5 ++-
 5 files changed, 100 insertions(+), 11 deletions(-)

diff --git a/src/components/Content.vue b/src/components/Content.vue
index 06a8a2d..7cab757 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -1,7 +1,11 @@
 <template>
 	<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
+		<div class="custom-control custom-switch" style="margin-bottom: 10px;">
+			<input type="checkbox" class="custom-control-input" id="favSwitch" v-model="displayFavOnly">
+			<label class="custom-control-label" for="favSwitch">Только избранные</label>
+		</div>
 		<p>
-			<span style="background: rgba(224, 246, 255, 0.4); box-shadow: 0 0 5px 5px rgba(224, 246, 255, 0.4);">Outgoing</span>, <span style="background: rgba(251, 233, 231, 0.4); box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);">incoming</span>.
+			<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"
@@ -74,6 +78,17 @@ export default {
 			})
 		},
 	},
+	computed: {
+		displayFavOnly: {
+			get() {
+				return this.$store.state.displayFavOnly;
+			},
+			set(value) {
+				this.$store.commit('setDisplayFavOnly', value);
+				this.$emit('displayFavChanged');
+			},
+		},
+	},
 	components: {Packet, InfiniteLoading,},
 }
 </script>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 341b758..ce456d0 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -10,7 +10,8 @@
 						:servicePort="stream.service.port"
 						:foundPatterns="stream.foundPatterns"
 						:startTime="stream.startTimestamp"
-						:endTime="stream.endTimestamp"></Stream>
+						:endTime="stream.endTimestamp"
+						:favorite="stream.favorite"></Stream>
 				<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>
 			</ul>
 		</div>
@@ -91,12 +92,10 @@ export default {
 	},
 	watch: {
 		'servicePort': function () {
-			this.streams = [];
-			this.$refs.infiniteLoading.stateChanger.reset();
+			this.rerender();
 		},
 		'$route.query.pId': function () {
-			this.streams = [];
-			this.$refs.infiniteLoading.stateChanger.reset();
+			this.rerender();
 		},
 	},
 	methods: {
@@ -126,6 +125,7 @@ export default {
 				startingFrom: startsFrom,
 				pageSize: parseInt(this.$store.state.pageSize),
 				pattern: this.$route.query.pId ? {id: this.$route.query.pId,} : null,
+				favorites: this.$store.state.displayFavOnly,
 			}).then(response => {
 				const data = response.data;
 				if (data.length === 0) return $state.complete();
@@ -141,9 +141,15 @@ export default {
 			});
 		},
 		onGotNewStream(stream) {
-			this.streams.pop();
+			if (this.streams.length > 50) {
+				this.streams.pop();
+			}
 			this.streams.unshift(stream);
 		},
+		rerender() {
+			this.streams = [];
+			this.$refs.infiniteLoading.stateChanger.reset();
+		},
 	},
 	components: {Stream, InfiniteLoading,},
 	mounted() {
diff --git a/src/components/Stream.vue b/src/components/Stream.vue
index 060a888..c879ad0 100644
--- a/src/components/Stream.vue
+++ b/src/components/Stream.vue
@@ -1,6 +1,14 @@
 <template>
-	<li :id="`stream-${id}`" class="nav-item">
-		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
+	<li :id="`stream-${id}`" class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
+		<router-link class="nav-link" active-class="active"
+				:to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
+			<button class="btn-text" @click.prevent="toggleStar">
+				<svg xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 32 32" width="16" height="16" fill="none" class="star" stroke-linecap="round"
+						stroke-linejoin="round" stroke-width="2">
+					<path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" style="transition: all .5s;" :fill="favorite0 ? 'red' : 'white'"></path>
+				</svg>
+			</button>
 			#{{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'})}}
@@ -15,13 +23,45 @@
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
 	name: "Stream",
-	props: ['id', 'proto', 'startTime', 'endTime', 'servicePort', 'foundPatterns',],
+	props: ['id', 'proto', 'startTime', 'endTime', 'servicePort', 'foundPatterns', 'favorite',],
+	data: function () {
+		return {
+			favorite0: this.favorite,
+		}
+	},
+	methods: {
+		toggleStar() {
+			const instance = axios.create({
+				baseURL: this.$store.state.apiUrl,
+				auth: {
+					username: this.$store.state.apiLogin,
+					password: this.$store.state.apiPassword,
+				},
+				headers: {
+					'Accept': 'application/json',
+					'Content-Type': 'application/json',
+				},
+			});
+			instance.post(`/stream/${this.id}/${this.favorite ? 'unfavorite' : 'favorite'}`)
+				.then(() => this.favorite0 = !this.favorite0)
+				.catch(e => console.error('Failed to toggle favorite!', e));
+
+		},
+	},
 }
 </script>
 
 <style scoped>
+	button {
+		padding: 0;
+		top: -0.1em;
+		position: relative;
+	}
+
 	.sidebar .nav-link {
 		font-weight: 500;
 		color: #333;
@@ -40,4 +80,27 @@ export default {
 	.sidebar .nav-link.active .feather {
 		color: inherit;
 	}
+
+	.btn-text {
+		border: none;
+		background-color: inherit;
+		/*padding: 14px 28px;*/
+		/*font-size: 16px;*/
+		cursor: pointer;
+		display: inline-block;
+	}
+
+	.star {
+		stroke: #bfbfbf;
+		transition: all .5s;
+	}
+
+	.star:hover {
+		stroke: red;
+	}
+
+	.highlight {
+		background: rgba(255, 119, 182, 0.3);
+		box-shadow: 0 0 1px 1px rgba(255, 119, 182, 0.3);
+	}
 </style>
diff --git a/src/store.js b/src/store.js
index 5dd8873..17e4215 100644
--- a/src/store.js
+++ b/src/store.js
@@ -12,6 +12,7 @@ export default new Vuex.Store({
 		hexdumpBlockSize: 16,
 		hexdumpLineNumberBase: 10,
 		pageSize: 50,
+		displayFavOnly: false,
 	},
 	mutations: {
 		setApiUrl: (state, payload) => state.apiUrl = payload,
@@ -20,6 +21,7 @@ export default new Vuex.Store({
 		setHexdumpBlockSize: (state, payload) => state.hexdumpBlockSize = payload,
 		setHexdumpLineNumberBase: (state, payload) => state.hexdumpLineNumberBase = payload,
 		setPageSize: (state, payload) => state.pageSize = payload,
+		setDisplayFavOnly: (state, payload) => state.displayFavOnly = payload,
 	},
 	plugins: [createPersistedState(),],
 })
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 676c936..0735618 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,7 +5,7 @@
 			<div class="row">
 				<Sidebar ref="sidebar" :servicePort="servicePort" :streamId="streamId"></Sidebar>
 				<!--suppress HtmlDeprecatedTag -->
-				<Content :servicePort="servicePort" :streamId="streamId"></Content>
+				<Content :servicePort="servicePort" :streamId="streamId" @displayFavChanged="reloadSidebar()"></Content>
 			</div>
 		</div>
 
@@ -41,6 +41,9 @@ export default {
 	},
 	props: ['servicePort', 'streamId',],
 	methods: {
+		reloadSidebar() {
+			this.$refs.sidebar.rerender();
+		},
 		reloadNavbar() {
 			this.$refs.navbar.getCtfServices();
 			this.$refs.navbar.getPatterns();