ad/packmate
1
0
Fork 0
mirror of https://github.com/Av0idD4rk/packmate.git synced 2026-10-23 16:31:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Стримы

Browse Source
This commit is contained in:
saber-nyan 2019-11-25 00:43:36 +03:00
parent c2c6db4782
commit ff072b5568
No known key found for this signature in database
GPG Key ID: 7B069E9C295E6B4A
5 changed files with 92 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Navbar.vue
View File

@ -15,7 +15,7 @@
:name="service.name"
:port="service.port"/>
<li class="nav-item text-nowrap" style="padding-left: 1em;">
<div class="my-2 my-lg-0 mr-3 navbar-cogs" style="cursor: pointer;"
<div class="my-2 mr-3 navbar-cogs" style="cursor: pointer;"
@click.stop.prevent="showAddService">
<i class="fas fa-plus-circle"/>
</div>

30
src/components/Sidebar.vue
View File

@ -1,8 +1,10 @@
<template>
<nav class="col-sm-3 d-none d-sm-block bg-light sidebar">
<div class="m-2">
<button type="button" class="btn btn-sm btn-outline-success">
<i class="fas fa-pause"/> <!-- TODO! -->
<button type="button" class="btn btn-sm"
:class="this.$store.state.pause ? 'btn-danger' : 'btn-outline-success'"
@click.stop.prevent="togglePause">
<i class="fas fa-pause"/>
</button>
<button type="button" class="btn btn-sm ml-1"
:class="this.$store.state.displayFavoritesOnly ? 'btn-danger' : 'btn-outline-danger'"
@ -15,18 +17,6 @@
</div>
<div class="sidebar-sticky">
<ul class="nav flex-column">
<!-- <li class="nav-item">-->
<!-- <a class="nav-link" href="#">SOME ITEM</a>-->
<!-- </li>-->
<!-- <li class="nav-item">-->
<!-- <a class="nav-link" href="#">SOME ITEM</a>-->
<!-- </li>-->
<!-- <li class="nav-item">-->
<!-- <a class="nav-link" href="#">SOME ITEM</a>-->
<!-- </li>-->
<!-- <li class="nav-item">-->
<!-- <a class="nav-link" href="#">SOME ITEM</a>-->
<!-- </li>-->
<SidebarStream v-for="stream in streams"
:key="stream.id"
:stream="stream"/>
@ -47,6 +37,13 @@
streams: [],
};
},
watch: {
'$route.params.servicePort': function () {
console.debug('Port reselected');
this.streams = [];
this.$refs.infiniteLoader.stateChanger.reset();
},
},
methods: {
infiniteLoadingHandler($state) {
const ourStreams = this.streams;
@ -57,7 +54,7 @@
startsFrom = Number.MAX_SAFE_INTEGER; // FIXME: rewrite backend?
}
this.$http.post(`/stream/${this.$props.servicePort || 'all'}`, {
this.$http.post(`/stream/${this.$route?.params?.servicePort || 'all'}`, {
direction: 'DESC',
startingFrom: startsFrom,
pageSize: this.$store.state.pageSize,
@ -84,6 +81,9 @@
toggleFavorites() {
this.$store.commit('toggleDisplayFavoritesOnly');
},
togglePause() {
this.$store.commit('togglePause');
},
},
components: {
SidebarStream,

68
src/components/SidebarStream.vue
View File

@ -1,12 +1,69 @@
<template>
<li class="nav-item">
<a class="nav-link" href="#">Huh?!</a>
<li class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
<router-link class="nav-link"
:to="{name: 'stream', params: {servicePort: stream.service, streamId: stream.id}}">
<a @click.stop.prevent="toggleFavorite">
<i class="fa-star" style="color: #DC3545" :class="favorite0 ? 'fas' : 'far'"/>
</a>
{{ stream.id }} {{ stream.protocol }}
<template v-if="stream.ttl">TTL {{ stream.ttl }}</template>
<br/>
{{ dateToText(stream.startTimestamp) }} - {{ dateToText(stream.endTimestamp) }}
<template v-if="stream.userAgentHash"><br/>UA: {{ stream.userAgentHash }}</template>
<span v-for="pattern in stream.foundPatterns"
:key="pattern.id"
:style="`color: ${pattern.color};`">
{{ pattern.name }}
</span>
</router-link>
</li>
</template>
<script>
export default {
name: 'SidebarStream',
props: {
stream: {
id: Number(),
protocol: String(),
service: Number(),
startTimestamp: Number(),
endTimestamp: Number(),
foundPatterns: Array(),
favorite: Boolean(),
ttl: Number(),
userAgentHash: String(),
},
},
data: function () {
return {
favorite0: this.stream.favorite,
};
},
methods: {
dateToText(unixTimestamp) {
return new Date(unixTimestamp).toLocaleDateString('ru-RU', {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
},
toggleFavorite() {
this.$http.post(`stream/${this.stream.id}/${this.favorite0 ? 'unfavorite' : 'favorite'}`)
.then(() => this.favorite0 = !this.favorite0)
.catch(e => {
this.$bvToast.toast(`Не удалось пометить сервис: ${e}`, {
title: 'Сбой',
variant: 'danger',
});
console.error('Failed to fav service', e);
});
},
},
};
</script>
@ -20,4 +77,11 @@
.nav-link.active {
color: #007BFF;
}
/*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);
}
</style>

6
src/store.js
View File

@ -14,6 +14,7 @@ export default new Vuex.Store({
hexdumpLineNumberBase: 10,
pageSize: 25,
displayFavoritesOnly: false,
pause: false,
serviceModalName: '',
serviceModalId: 0,
@ -26,6 +27,8 @@ export default new Vuex.Store({
setPageSize: (s, p) => s.pageSize = p,
// eslint-disable-next-line no-unused-vars
toggleDisplayFavoritesOnly: (s, p) => s.displayFavoritesOnly = !s.displayFavoritesOnly,
// eslint-disable-next-line no-unused-vars
togglePause: (s, p) => s.pause = !s.pause,
setServiceModalName: (s, p) => s.serviceModalName = p,
setServiceModalId: (s, p) => s.serviceModalId = p,
@ -40,7 +43,8 @@ export default new Vuex.Store({
const mName = mutation?.type;
const process = mName !== 'toggleDisplayFavoritesOnly'
&& mName !== 'setServiceModalName'
&& mName !== 'setServiceModalId';
&& mName !== 'setServiceModalId'
&& mName !== 'togglePause';
console.debug('Processing?', process);
return process;
},

6
src/views/ContentStream.vue
View File

@ -1,6 +1,10 @@
<template>
<div>
Some stream #{{ streamId }} at port #{{ servicePort }}
<p>
Some stream #{{ $route.params.streamId }} at port #{{ $route.params.servicePort }} <br/>
<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>
</div>
</template>