Добавление и выбор паттернов

src/App.vue

@@ -17,6 +17,7 @@
 		<Settings/>
 		<AddService @serviceAddComplete="$refs.navbar.updateServices()"/>
 		<EditService @serviceEditComplete="$refs.navbar.updateServices()"/>
+		<AddPattern/>
 	</div>
 </template>
 
@@ -25,9 +26,11 @@
 	import Settings from './views/Settings';
 	import AddService from './views/AddService';
 	import EditService from './views/EditService';
+	import AddPattern from './views/AddPattern';
 
 	export default {
 		components: {
+			AddPattern,
 			AddService,
 			EditService,
 			Settings,
@@ -127,6 +130,16 @@
 		opacity: 0;
 	}
 
+	/* Patterns dropdown fix */
+	/*noinspection CssUnusedSymbol*/
+	.dropdown-menu.show {
+		position: fixed !important;
+		/*transform: translate3d(15px, 38px, 0) !important;*/
+		transform: none !important;
+		left: 15px !important;
+		top: 38px !important;
+	}
+
 	[role="main"] {
 		padding-top: 55px; /* Space for fixed navbar */
 	}

src/components/Navbar.vue

@@ -1,9 +1,11 @@
 <template>
 	<nav class="navbar navbar-dark navbar-expand fixed-top bg-dark flex-md-nowrap p-0 shadow">
-		<div class="navbar-brand col-sm-3 mr-0" style="cursor: pointer;">
+		<!--		<div class="navbar-brand col-sm-3 mr-0" style="cursor: pointer;">-->
-			Паттерны
+		<!--			Паттерны-->
-			<i class="fas fa-angle-down" style="margin-left: 0.5em"/>
+		<!--			<i class="fas fa-angle-down" style="margin-left: 0.5em"/>-->
-		</div>
+		<!--		</div>-->
+
+		<PatternsDropdown/>
 
 		<div class="navbar-collapse collapse">
 			<ul class="navbar-nav px-3 mr-auto">
@@ -32,6 +34,7 @@
 
 <script>
 	import NavbarService from './NavbarService';
+	import PatternsDropdown from './PatternsDropdown';
 
 	export default {
 		name: 'Navbar',
@@ -65,6 +68,7 @@
 			},
 		},
 		components: {
+			PatternsDropdown,
 			NavbarService,
 		},
 	};
@@ -84,15 +88,6 @@
 		color: #FFF;
 	}
 
-	.navbar-brand {
-		padding-top: .5rem;
-		padding-bottom: .5rem;
-
-		font-size: 1rem;
-		background-color: rgba(0, 0, 0, .25);
-		box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
-	}
-
 	nav {
 		overflow-x: auto;
 	}
@@ -112,5 +107,4 @@
 	::-webkit-scrollbar-thumb {
 		background: #C1C1C1
 	}
-
 </style>

src/components/Packet.vue

@@ -44,7 +44,7 @@
 				});
 			},
 			base64ToHtml(in_) {
-				return this.escapeHtml(atob(in_)).split('\n').join('<br/>');
+				return this.escapeHtml(atob(in_)).split('\n').join('<br/>'); // Replace all \n to <br/>
 			},
 		},
 	};

src/components/PatternsDropdown.vue

@@ -0,0 +1,63 @@
+<template>
+	<b-dropdown no-flip text="Паттерны" block variant="dark" class="col-sm-3 mr-0">
+		<li role="presentation" style="padding-left: 0.5em; padding-right: 0.5em;">
+			<button role="menuitem" type="button" class="btn btn-sm btn-primary btn-block"
+					@click.stop.prevent="showAddService">
+				<i class="fas fa-plus"/>
+			</button>
+		</li>
+		<b-dropdown-divider/>
+		<b-dropdown-item-button v-for="pattern in patterns"
+								:key="pattern.id" @click.stop.prevent="openPattern(pattern.id)">
+			<strong :style="`color: ${pattern.color};`">{{ pattern.name }}</strong>:
+			<code>{{ pattern.regex ? `/${pattern.value}/` : `'${pattern.value}'` }}</code>;
+			search
+			<template v-if="pattern.type === 'BOTH'">anywhere</template>
+			<template v-else-if="pattern.type === 'INPUT'">in request</template>
+			<template v-else>in response</template>
+		</b-dropdown-item-button>
+	</b-dropdown>
+</template>
+<script>
+	export default {
+		name: 'PatternsDropdown',
+		data() {
+			return {
+				patterns: Array(),
+			};
+		},
+		mounted() {
+			this.updatePatterns();
+		},
+		methods: {
+			showAddService() {
+				this.$bvModal.show('addPatternModal');
+			},
+			updatePatterns() {
+				this.$http.get('pattern/')
+					.then(r => this.patterns = r.data)
+					.catch(e => {
+						this.$bvToast.toast(`Не удалось загрузить паттерны: ${e}`, {
+							title: 'Сбой',
+							variant: 'danger',
+						});
+						console.error('Failed to load patterns:', e);
+					});
+			},
+			openPattern(patternId) {
+				console.debug('Opening pattern w/ id', patternId);
+				this.$router.push({
+					name: 'stream',
+					params: this.$route.params,
+					query: {pattern: patternId,},
+				});
+			},
+		},
+	};
+</script>
+<style scoped>
+	code {
+		font-family: "Ubuntu Mono", "Lucida Console", monospace;
+		font-size: 100%;
+	}
+</style>

src/views/AddPattern.vue

@@ -0,0 +1,108 @@
+<template>
+	<b-modal @ok="addPattern" @cancel="reset" id="addPatternModal"
+			 title="Добавить паттерн"
+			 cancel-title="Отмена"
+			 centered scrollable>
+		<form ref="addPatternForm">
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Название"
+					description="Отображается в списке и при успешном поиске"
+					label-for="pattern-name">
+				<b-form-input @keydown.native.enter="addPattern" id="pattern-name" required v-model="newPattern.name"/>
+			</b-form-group>
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Паттерн"
+					description="Подстрока или регулярное выражение"
+					label-for="pattern-value">
+				<b-form-input @keydown.native.enter="addPattern" id="pattern-value" required
+							  v-model="newPattern.value"/>
+			</b-form-group>
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Цвет"
+					description="Как выделять найденный паттерн в пакете и стриме"
+					label-for="pattern-color">
+				<b-form-input id="pattern-color" required type="color" v-model="newPattern.color"/>
+			</b-form-group>
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Регулярное выражение?"
+					description="Искать регулярное выражение в Java-формате вместо подстроки?"
+					label-for="pattern-regex">
+				<b-form-checkbox id="pattern-regex" required v-model="newPattern.isRegex"/>
+			</b-form-group>
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Тип поиска"
+					description="В каких пакетах искать паттерн"
+					label-for="pattern-type">
+				<b-form-select id="pattern-type" required v-model="newPattern.type">
+					<option value="INPUT">Запрос</option>
+					<option value="OUTPUT">Ответ</option>
+					<option value="BOTH" selected>Везде</option>
+				</b-form-select>
+			</b-form-group>
+		</form>
+	</b-modal>
+</template>
+
+<script>
+	export default {
+		name: 'AddPattern',
+		data() {
+			return {
+				newPattern: {
+					name: String(),
+					value: String(),
+					color: String(),
+					isRegex: Boolean(),
+					type: String(),
+				},
+			};
+		},
+		methods: {
+			checkValidity() {
+				return this.$refs.addPatternForm.reportValidity();
+			},
+
+			reset() {
+				this.newPattern = {};
+			},
+
+			addPattern(ev) {
+				ev.preventDefault();
+				if (!this.checkValidity()) {
+					console.debug('Form is invalid');
+					return;
+				}
+				console.debug('Adding pattern...', this.newPattern);
+
+				this.$http.post('pattern/', this.newPattern)
+					.then(response => {
+						const data = response.data;
+						console.debug('Done adding pattern', data);
+						this.$emit('patternAddComplete');
+						this.reset();
+						this.$bvModal.hide('addPatternModal');
+					}).catch(e => {
+					this.$bvToast.toast(`Не удалось добавить паттерн: ${e}`, {
+						title: 'Сбой',
+						variant: 'danger',
+					});
+					console.error('Failed to add pattern', e);
+				});
+			},
+		},
+	};
+</script>
+
+<style scoped>
+
+</style>