From 6c51259a01b432ecde7b2e5d759e72b043a55cfc Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Mon, 6 Apr 2020 21:26:12 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E?=
 =?UTF-8?q?=D1=87=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D0=B0=D1=82=D1=82=D0=B5?=
 =?UTF-8?q?=D1=80=D0=BD=D0=BE=D0=B2=20=D0=B2=D0=BC=D0=B5=D1=81=D1=82=D0=BE?=
 =?UTF-8?q?=20=D0=B8=D1=85=20=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |  8 ++++++
 src/components/PatternsDropdown.vue | 38 +++++++++++++++++++++--------
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a48c866..951da22 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -81,6 +81,14 @@
 						case 'COUNTERS_UPDATE': {
 							break;  //TODO implement
 						}
+						case 'ENABLE_PATTERN': {
+							this.$refs.navbar.$refs.patternsDropdown.togglePatternFromWs(parsed.value, true);
+							break;
+						}
+						case 'DISABLE_PATTERN': {
+							this.$refs.navbar.$refs.patternsDropdown.togglePatternFromWs(parsed.value, false);
+							break;
+						}
 						default: {
 							console.error('[WS] Event is not implemented!', parsed);
 							break;
diff --git a/src/components/PatternsDropdown.vue b/src/components/PatternsDropdown.vue
index 3c818fc..af415f4 100644
--- a/src/components/PatternsDropdown.vue
+++ b/src/components/PatternsDropdown.vue
@@ -9,16 +9,21 @@
 		<b-dropdown-divider/>
 		<b-dropdown-item-button v-for="pattern in this.$store.state.patterns"
 								:key="pattern.id" @click.stop.prevent="openPattern(pattern.id)">
-			<strong :style="`color: ${pattern.color};`">{{ pattern.name }}</strong>:
+			<strong v-if="pattern.enabled" :style="`color: ${pattern.color};`">{{ pattern.name }}</strong>
+			<s v-else :style="`color: ${pattern.color};`">{{ pattern.name }}</s>:
 			<code>{{ getSearchTypeValue(pattern.searchType, pattern.value) }}</code>;
 			search
 			<template v-if="pattern.directionType === 'BOTH'">anywhere</template>
 			<template v-else-if="pattern.directionType === 'INPUT'">in request</template>
 			<template v-else>in response</template>
 			<div class="float-right" style="margin-left: 2em;">
-				<button type="button" class="btn btn-outline-danger btn-block btn-sm"
-						@click.stop.prevent="deletePattern(pattern.id)">
-					<i class="far fa-trash-alt"/>
+				<button v-if="pattern.enabled" type="button" class="btn btn-outline-danger btn-block btn-sm"
+						@click.stop.prevent="togglePattern(pattern)">
+					<i class="fas fa-pause"></i>
+				</button>
+				<button v-else type="button" class="btn btn-outline-success btn-block btn-sm"
+						@click.stop.prevent="togglePattern(pattern)">
+					<i class="fas fa-play"></i>
 				</button>
 			</div>
 		</b-dropdown-item-button>
@@ -63,19 +68,24 @@
 					query: {pattern: patternId,},
 				});
 			},
-			deletePattern(patternId) {
-				console.debug('Deleting pattern w/ id', patternId);
-				this.$http.delete(`pattern/${patternId}`)
+			togglePattern(pattern) {
+				const enabled = !pattern.enabled;
+				console.debug('Toggling pattern', pattern);
+				this.$http.post(`pattern/${pattern.id}/`, null, {
+					params: {
+						enabled,
+					},
+				})
 					.then(response => {
 						const data = response.data;
-						console.debug('Done deleting pattern', data);
+						console.debug('Done toggling pattern', data);
 						this.$emit('patternAddComplete');
 					}).catch(e => {
-					this.$bvToast.toast(`Failed to delete pattern: ${e}`, {
+					this.$bvToast.toast(`Failed to toggle pattern: ${e}`, {
 						title: 'Error',
 						variant: 'danger',
 					});
-					console.error('Failed to delete pattern', e);
+					console.error('Failed to toggle pattern', e);
 				});
 			},
 
@@ -86,6 +96,14 @@
 			deletePatternFromWs(id) {
 				this.$store.commit('setPatterns', this.$store.state.patterns.filter(o => o.id !== id));
 			},
+
+			togglePatternFromWs(id, enabled) {
+				this.$store.state.patterns.forEach(pattern => {
+					if (pattern.id === id) {
+						pattern.enabled = enabled;
+					}
+				});
+			},
 		},
 	};
 </script>