Перевел все на английский язык, почистил код

public/index.html

@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<!--suppress HtmlUnknownTag -->
 <html lang="ru">
 <head>
 	<meta charset="utf-8">
@@ -9,11 +8,12 @@
 	<meta name="author" content="saber-nyan & serega6531">
 
 	<meta content="width=device-width,initial-scale=1.0" name="viewport">
+	<!--suppress HtmlUnknownTarget -->
 	<link href="<%= BASE_URL %>favicon.ico" rel="icon">
 </head>
 <body>
 <noscript>
-	<strong>Packmate не будет работать без JS, включи его!</strong>
+	<strong>Please enable JavaScript to continue!!</strong>
 </noscript>
 <div id="app"></div>
 </body>

src/App.vue

@@ -6,7 +6,6 @@
 				<transition name="fade" mode="out-in">
 					<router-view name="sidebar" ref="sidebar"/>
 				</transition>
-				<!--				<Sidebar></Sidebar>-->
 				<main role="main" class="col-sm-9 ml-sm-auto px-4">
 					<transition name="fade" mode="out-in">
 						<router-view name="content"/>
@@ -80,7 +79,7 @@
 							break;
 						}
 						default: {
-							console.error('[WS] Event not implemented!', parsed);
+							console.error('[WS] Event is not implemented!', parsed);
 							break;
 						}
 					}

src/components/Navbar.vue

@@ -1,16 +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;">-->
-		<!--			Паттерны-->
-		<!--			<i class="fas fa-angle-down" style="margin-left: 0.5em"/>-->
-		<!--		</div>-->
-
 		<PatternsDropdown ref="patternsDropdown"/>
 
 		<div class="navbar-collapse collapse">
 			<ul class="navbar-nav px-3 mr-auto">
 				<li class="nav-item text-nowrap">
-					<router-link class="nav-link" to="/" exact>Все</router-link>
+					<router-link class="nav-link" to="/" exact>All</router-link>
 				</li>
 				<NavbarService v-for="service in services"
 							   :key="service.name"
@@ -59,8 +54,8 @@
 				this.$http.get('service/')
 					.then(r => this.services = r.data)
 					.catch(e => {
-						this.$bvToast.toast(`Не удалось загрузить сервисы: ${e}`, {
+						this.$bvToast.toast(`Failed to load services: ${e}`, {
-							title: 'Сбой',
+							title: 'Error',
 							variant: 'danger',
 						});
 						console.error('Failed to load services:', e);

src/components/Packet.vue

@@ -14,6 +14,7 @@
 	</div>
 </template>
 
+<!--suppress JSUnresolvedVariable -->
 <script>
 	export default {
 		name: 'Packet',

src/components/PatternsDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<b-dropdown no-flip text="Паттерны" block variant="dark" class="col-sm-3 mr-0">
+	<b-dropdown no-flip text="Patterns" 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">
@@ -48,8 +48,8 @@
 				this.$http.get('pattern/')
 					.then(r => this.$store.commit('setPatterns', r.data))
 					.catch(e => {
-						this.$bvToast.toast(`Не удалось загрузить паттерны: ${e}`, {
+						this.$bvToast.toast(`Failed to load patterns: ${e}`, {
-							title: 'Сбой',
+							title: 'Error',
 							variant: 'danger',
 						});
 						console.error('Failed to load patterns:', e);
@@ -71,8 +71,8 @@
 						console.debug('Done deleting pattern', data);
 						this.$emit('patternAddComplete');
 					}).catch(e => {
-					this.$bvToast.toast(`Не удалось удалить паттерн: ${e}`, {
+					this.$bvToast.toast(`Failed to delete pattern: ${e}`, {
-						title: 'Сбой',
+						title: 'Error',
 						variant: 'danger',
 					});
 					console.error('Failed to delete pattern', e);

src/components/Sidebar.vue

@@ -144,8 +144,8 @@
 					this.streams.push(...data);
 					return $state.loaded();
 				}).catch(e => {
-					this.$bvToast.toast(`Не удалось загрузить стримы: ${e}`, {
+					this.$bvToast.toast(`Failed to load portion of streams: ${e}`, {
-						title: 'Сбой',
+						title: 'Error',
 						variant: 'danger',
 					});
 					console.error('Failed to load portion of streams:', e);

src/components/SidebarStream.vue

@@ -82,8 +82,8 @@
 				this.$http.post(`stream/${this.stream.id}/${this.favorite0 ? 'unfavorite' : 'favorite'}`)
 					.then(() => this.favorite0 = !this.favorite0)
 					.catch(e => {
-						this.$bvToast.toast(`Не удалось пометить сервис: ${e}`, {
+						this.$bvToast.toast(`Failed to fav service: ${e}`, {
-							title: 'Сбой',
+							title: 'Error',
 							variant: 'danger',
 						});
 						console.error('Failed to fav service', e);
@@ -106,7 +106,6 @@
 
 	/*noinspection CssUnusedSymbol*/
 	.highlight {
-		/*background: rgb(220, 53, 69)*/
 		background: rgba(220, 53, 69, 0.3);
 		box-shadow: 0 0 1px 1px rgba(255, 119, 182, 0.3);
 	}

src/main.js

@@ -14,10 +14,10 @@ Vue.config.productionTip = false;
 Vue.use(BootstrapVue);
 Vue.use(InfiniteLoading, {
 	slots: {
-		noResults: 'Нет результатов...',
+		noResults: 'No results...',
-		noMore: 'Данных больше нет',
+		noMore: 'No more data',
-		error: 'Произошла ошибка!',
+		error: 'An error has occurred!',
-		errorBtnText: 'Повторить',
+		errorBtnText: 'Retry',
 	},
 	props: {
 		spinner: 'waveDots',

src/router.js

@@ -7,21 +7,10 @@ Vue.use(Router);
 
 export default new Router({
 	routes: [
-		// {
-		// 	path: '/',
-		// 	name: 'nothing',
-		// 	component: ContentNothing,
-		// },
 		{
 			path: '/:servicePort?/:streamId?',
 			name: 'stream',
 			props: true,
-			// route level code-splitting
-			// this generates a separate chunk (about.[hash].js) for this route
-			// which is lazy-loaded when the route is visited.
-			// component: () => import(/* webpackChunkName: "stream" */ './views/ContentStream'),
-
-			// component: ContentStream,
 			components: {
 				sidebar: Sidebar,
 				content: ContentStream,

src/views/AddPattern.vue

@@ -1,22 +1,22 @@
 <template>
 	<b-modal @ok="addPattern" @cancel="reset" id="addPatternModal"
-			 title="Добавить паттерн"
+			 title="Add pattern"
-			 cancel-title="Отмена"
+			 cancel-title="Cancel"
 			 centered scrollable>
 		<form ref="addPatternForm">
 			<b-form-group
 					label-cols-sm="4"
 					label-cols-lg="3"
-					label="Название"
+					label="Name"
-					description="Отображается в списке и при успешном поиске"
+					description="It is displayed in the list and highlighted in the packet contents"
 					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="Паттерн"
+					label="Pattern"
-					description="Подстрока или регулярное выражение"
+					description="Substring, RegEx or bytes"
 					label-for="pattern-value">
 				<b-form-input @keydown.native.enter="addPattern" id="pattern-value" required
 							  v-model="newPattern.value"/>
@@ -24,33 +24,33 @@
 			<b-form-group
 					label-cols-sm="4"
 					label-cols-lg="3"
-					label="Цвет"
+					label="Color"
-					description="Как выделять найденный паттерн в пакете и стриме"
+					description="The highlight color of the pattern in the packets and streams"
 					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="Способ поиска"
+					label="Search method"
-					description="Каким способом искать указанное выражение?"
+					description="The way to search for patterns in packets"
 					label-for="pattern-searchType">
 				<b-form-select id="pattern-searchType" required v-model="newPattern.searchType">
-					<option value="REGEX" selected>Регулярное выражение</option>
+					<option value="REGEX" selected>Regular expression</option>
-					<option value="SUBSTRING">Подстрока</option>
+					<option value="SUBSTRING">Substring</option>
-					<option value="SUBBYTES">В байтах (WIP)</option>
+					<option value="SUBBYTES">Bytes (WIP)</option>
 				</b-form-select>
 			</b-form-group>
 			<b-form-group
 					label-cols-sm="4"
 					label-cols-lg="3"
-					label="Тип поиска"
+					label="Search type"
-					description="В каких пакетах искать паттерн"
+					description="in which packets to search for a pattern"
 					label-for="pattern-type">
 				<b-form-select id="pattern-type" required v-model="newPattern.directionType">
-					<option value="INPUT">Запрос</option>
+					<option value="INPUT">Request</option>
-					<option value="OUTPUT">Ответ</option>
+					<option value="OUTPUT">Response</option>
-					<option value="BOTH" selected>Везде</option>
+					<option value="BOTH" selected>Anywhere</option>
 				</b-form-select>
 			</b-form-group>
 		</form>
@@ -96,8 +96,8 @@
 						this.reset();
 						this.$bvModal.hide('addPatternModal');
 					}).catch(e => {
-					this.$bvToast.toast(`Не удалось добавить паттерн: ${e}`, {
+					this.$bvToast.toast(`Failed to add pattern: ${e}`, {
-						title: 'Сбой',
+						title: 'Error',
 						variant: 'danger',
 					});
 					console.error('Failed to add pattern', e);

src/views/AddService.vue

@@ -1,39 +1,39 @@
 <template>
-	<b-modal @ok="createService" @cancel="reset" id="addServiceModal" title="Добавить сервис"
+	<b-modal @ok="createService" @cancel="reset" id="addServiceModal" title="Add service"
-			 cancel-title="Отмена"
+			 cancel-title="Cancel"
 			 centered scrollable>
 		<form ref="addServiceForm">
 			<b-form-group
 					label-cols-sm="4"
-					label="Название"
+					label="Name"
 					label-for="addSvc-name">
 				<b-form-input @keydown.native.enter="createService" id="addSvc-name" required
 							  v-model="svcName"/>
 			</b-form-group>
 			<b-form-group
 					label-cols-sm="4"
-					label="Порт"
+					label="Port"
 					label-for="addSvc-port">
 				<b-form-input @keydown.native.enter="createService" type="number" min="1" max="65535"
 							  id="addSvc-port" required v-model.number="svcPort"/>
 			</b-form-group>
 			<b-form-group
 					label-cols-sm="4"
-					label="Разархивировать GZIP?"
+					label="Decompress GZIP?"
 					label-for="addSvc-ungzip">
 				<b-form-checkbox id="addSvc-ungzip" required
 								 v-model="ungzipHttp"/>
 			</b-form-group>
 			<b-form-group
 					label-cols-sm="4"
-					label="Применять urldecode?"
+					label="Apply urldecode?"
 					label-for="addSvc-urldecode">
 				<b-form-checkbox id="addSvc-urldecode" required
 								 v-model="urldecodeHttpRequests"/>
 			</b-form-group>
 			<b-form-group
 					label-cols-sm="4"
-					label="Совмещать смежные пакеты?"
+					label="Merge adjacent packets?"
 					label-for="addSvc-mergeAdjacent">
 				<b-form-checkbox id="addSvc-mergeAdjacent" required
 								 v-model="mergeAdjacentPackets"/>
@@ -95,8 +95,8 @@
 					this.reset();
 					this.$bvModal.hide('addServiceModal');
 				}).catch(e => {
-					this.$bvToast.toast(`Не удалось добавить сервис: ${e}`, {
+					this.$bvToast.toast(`Failed to add service: ${e}`, {
-						title: 'Сбой',
+						title: 'Error',
 						variant: 'danger',
 					});
 					console.error('Failed to add service', e);

src/views/ContentStream.vue

@@ -1,8 +1,8 @@
 <template>
 	<div>
 		<p>
-			<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(224, 246, 255, 0.4); box-shadow: 0 0 5px 5px rgba(224, 246, 255, 0.4);">Response</span>,
-			<span style="background: rgba(251, 233, 231, 0.4); box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);">запрос</span>.
+			<span style="background: rgba(251, 233, 231, 0.4); box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);">request</span>.
 		</p>
 		<Packet v-for="packet in packets"
 				:key="packet.id"
@@ -19,17 +19,7 @@
 		props: ['servicePort', 'streamId',],
 		data() {
 			return {
-				packets: [
+				packets: [],
-					/*
-					{
-						"id": 17,
-						"matches": [],
-						"timestamp": 1574630325546,
-						"incoming": false,
-						"ungzipped": false,
-						"content": "shit in b64=="
-					} */
-				],
 			};
 		},
 		watch: {
@@ -64,8 +54,8 @@
 						$state.loaded();
 					}
 				}).catch(e => {
-					this.$bvToast.toast(`Не удалось загрузить пакеты: ${e}`, {
+					this.$bvToast.toast(`Failed to load portion of packets: ${e}`, {
-						title: 'Сбой',
+						title: 'Error',
 						variant: 'danger',
 					});
 					console.error('Failed to load portion of packets:', e);

src/views/Settings.vue

@@ -1,46 +1,44 @@
 <!--suppress JSUnresolvedVariable -->
 <template>
-	<b-modal id="settingsModal" title="Настройки" centered scrollable ok-only>
+	<b-modal id="settingsModal" title="Settings" centered scrollable ok-only>
 		<b-form-group
 				label-cols-sm="4"
 				label-cols-lg="3"
-				description="Логин для подключения к API"
+				label="API login"
-				label="Логин"
 				label-for="settings-apiLogin">
 			<b-form-input id="settings-apiLogin" v-model="apiLogin"/>
 		</b-form-group>
 		<b-form-group
 				label-cols-sm="4"
 				label-cols-lg="3"
-				description="Пароль для подключения к API"
+				label="API password"
-				label="Пароль"
 				label-for="settings-apiPassword">
 			<b-form-input type="password" id="settings-apiPassword" v-model="apiPassword"/>
 		</b-form-group>
 		<b-form-group
 				label-cols-sm="4"
 				label-cols-lg="3"
-				description="Количество байт для отображения в бинарном представлении пакета"
+				description="The number of bytes to display in the binary representation of the packet"
-				label="Ширина блока HEX"
+				label="HEX block width"
 				label-for="settings-hexdumpBlockSize">
 			<b-form-input type="number" id="settings-hexdumpBlockSize" v-model.number="hexdumpBlockSize"/>
 		</b-form-group>
 		<b-form-group
 				label-cols-sm="4"
 				label-cols-lg="3"
-				description="Система счисления, используемая в номерах строк бинарного представления пакета"
+				description="The number system used in line numbers of a binary representation of a packet"
-				label="Нумерация строк"
+				label="Line numbering"
 				label-for="settings-hexdumpLineNumberBase">
 			<b-form-select id="settings-hexdumpLineNumberBase" v-model="hexdumpLineNumberBase">
-				<option :value="10" selected>Десятичная</option>
+				<option :value="10" selected>Decimal</option>
-				<option :value="16">Шестнадцатеричная</option>
+				<option :value="16">Hexadecimal</option>
 			</b-form-select>
 		</b-form-group>
 		<b-form-group
 				label-cols-sm="4"
 				label-cols-lg="3"
-				description="Количество стримов для загрузки за раз"
+				description="The number of streams to download at a time"
-				label="Размер страницы"
+				label="Page size"
 				label-for="settings-pageSize">
 			<b-form-input type="number" id="settings-pageSize" v-model.number="pageSize"/>
 		</b-form-group>