Косметика, удаление паттернов

src/components/FlagPattern.vue

@@ -1,16 +1,46 @@
 <template>
 	<div class="dropdown-item" :style="'color:' + color">
 		{{name}}: {{value}}
+		<div class="float-right">
+			<button @click.prevent="deleteSelf()" class="btn btn-outline-danger btn-block btn-sm" type="button">x</button>
+		</div>
 	</div>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
 	name: "FlagPattern",
-	props: ['name', 'value', 'color',],
+	props: ['name', 'value', 'color', 'id',],
+	methods: {
+		deleteSelf() {
+			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.delete(`/pattern/${this.id}`)
+				.then(response => {
+					console.debug('got r', response.data);
+					this.$destroy();
+					this.$el.parentNode.removeChild(this.$el); // FIXME: может сломать Vue, лучше бы это убрать...
+				})
+				.catch(error => console.error('failed to delete pattern', error));
+		},
+	},
 }
 </script>
 
 <style scoped>
-
+	button {
+		position: relative;
+		top: -4px;
+	}
 </style>

src/components/Navbar.vue

@@ -17,6 +17,7 @@
 				</div>
 				<FlagPattern v-for="pattern in patterns"
 					:key="pattern.id"
+					:id="pattern.id"
 					:name="pattern.name"
 					:value="pattern.value"
 					:color="pattern.color"></FlagPattern>

src/components/Sidebar.vue

@@ -6,6 +6,7 @@
 						v-for="stream in streams"
 						:key="stream.id"
 						:id="stream.id"
+						:proto="stream.protocol"
 						:servicePort="stream.service.port"
 						:time="stream.startTimestamp"></Stream>
 				<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>

src/components/Stream.vue

@@ -1,8 +1,7 @@
 <template>
 	<li class="nav-item">
 		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id} }">
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-			#{{id}}<br/>
+			#{{id}} {{proto}}<br/>
 			{{new Date(time * 1000).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
 		</router-link>
 	</li>
@@ -11,7 +10,7 @@
 <script>
 export default {
 	name: "Stream",
-	props: ['id', 'time', 'servicePort',],
+	props: ['id', 'proto', 'time', 'servicePort',],
 }
 </script>
 

src/main.js

@@ -12,3 +12,6 @@ new Vue({
 	store,
 	render: h => h(App),
 }).$mount('#app');
+
+
+// TODO: вынести наконец инстанс axios сюда!