mirror of
https://github.com/Av0idD4rk/packmate.git
synced 2026-10-24 16:09:25 +00:00
Запилил избранное, исправил "карусель" при маленьком кол-ве стримов
This commit is contained in:
saber-nyan
parent
c7d16103d7
commit
2b6c1c45c2
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
|
||||
<div class="custom-control custom-switch" style="margin-bottom: 10px;">
|
||||
<input type="checkbox" class="custom-control-input" id="favSwitch" v-model="displayFavOnly">
|
||||
<label class="custom-control-label" for="favSwitch">Только избранные</label>
|
||||
</div>
|
||||
<p>
|
||||
<span style="background: rgba(224, 246, 255, 0.4); box-shadow: 0 0 5px 5px rgba(224, 246, 255, 0.4);">Outgoing</span>, <span style="background: rgba(251, 233, 231, 0.4); box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);">incoming</span>.
|
||||
<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>
|
||||
<Packet v-for="packet in packets"
|
||||
:key="packet.id"
|
||||
@ -74,6 +78,17 @@ export default {
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
displayFavOnly: {
|
||||
get() {
|
||||
return this.$store.state.displayFavOnly;
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit('setDisplayFavOnly', value);
|
||||
this.$emit('displayFavChanged');
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {Packet, InfiniteLoading,},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
:servicePort="stream.service.port"
|
||||
:foundPatterns="stream.foundPatterns"
|
||||
:startTime="stream.startTimestamp"
|
||||
:endTime="stream.endTimestamp"></Stream>
|
||||
:endTime="stream.endTimestamp"
|
||||
:favorite="stream.favorite"></Stream>
|
||||
<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>
|
||||
</ul>
|
||||
</div>
|
||||
@ -91,12 +92,10 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
'servicePort': function () {
|
||||
this.streams = [];
|
||||
this.$refs.infiniteLoading.stateChanger.reset();
|
||||
this.rerender();
|
||||
},
|
||||
'$route.query.pId': function () {
|
||||
this.streams = [];
|
||||
this.$refs.infiniteLoading.stateChanger.reset();
|
||||
this.rerender();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@ -126,6 +125,7 @@ export default {
|
||||
startingFrom: startsFrom,
|
||||
pageSize: parseInt(this.$store.state.pageSize),
|
||||
pattern: this.$route.query.pId ? {id: this.$route.query.pId,} : null,
|
||||
favorites: this.$store.state.displayFavOnly,
|
||||
}).then(response => {
|
||||
const data = response.data;
|
||||
if (data.length === 0) return $state.complete();
|
||||
@ -141,9 +141,15 @@ export default {
|
||||
});
|
||||
},
|
||||
onGotNewStream(stream) {
|
||||
this.streams.pop();
|
||||
if (this.streams.length > 50) {
|
||||
this.streams.pop();
|
||||
}
|
||||
this.streams.unshift(stream);
|
||||
},
|
||||
rerender() {
|
||||
this.streams = [];
|
||||
this.$refs.infiniteLoading.stateChanger.reset();
|
||||
},
|
||||
},
|
||||
components: {Stream, InfiniteLoading,},
|
||||
mounted() {
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<li :id="`stream-${id}`" class="nav-item">
|
||||
<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
|
||||
<li :id="`stream-${id}`" class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
|
||||
<router-link class="nav-link" active-class="active"
|
||||
:to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
|
||||
<button class="btn-text" @click.prevent="toggleStar">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32" width="16" height="16" fill="none" class="star" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" style="transition: all .5s;" :fill="favorite0 ? 'red' : 'white'"></path>
|
||||
</svg>
|
||||
</button>
|
||||
#{{id}} {{proto}}<br/>
|
||||
{{new Date(startTime).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
|
||||
- {{new Date(endTime).toLocaleTimeString('ru-RU', {hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
|
||||
@ -15,13 +23,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Stream",
|
||||
props: ['id', 'proto', 'startTime', 'endTime', 'servicePort', 'foundPatterns',],
|
||||
props: ['id', 'proto', 'startTime', 'endTime', 'servicePort', 'foundPatterns', 'favorite',],
|
||||
data: function () {
|
||||
return {
|
||||
favorite0: this.favorite,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleStar() {
|
||||
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.post(`/stream/${this.id}/${this.favorite ? 'unfavorite' : 'favorite'}`)
|
||||
.then(() => this.favorite0 = !this.favorite0)
|
||||
.catch(e => console.error('Failed to toggle favorite!', e));
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
padding: 0;
|
||||
top: -0.1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
@ -40,4 +80,27 @@ export default {
|
||||
.sidebar .nav-link.active .feather {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
/*padding: 14px 28px;*/
|
||||
/*font-size: 16px;*/
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.star {
|
||||
stroke: #bfbfbf;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.star:hover {
|
||||
stroke: red;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: rgba(255, 119, 182, 0.3);
|
||||
box-shadow: 0 0 1px 1px rgba(255, 119, 182, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,6 +12,7 @@ export default new Vuex.Store({
|
||||
hexdumpBlockSize: 16,
|
||||
hexdumpLineNumberBase: 10,
|
||||
pageSize: 50,
|
||||
displayFavOnly: false,
|
||||
},
|
||||
mutations: {
|
||||
setApiUrl: (state, payload) => state.apiUrl = payload,
|
||||
@ -20,6 +21,7 @@ export default new Vuex.Store({
|
||||
setHexdumpBlockSize: (state, payload) => state.hexdumpBlockSize = payload,
|
||||
setHexdumpLineNumberBase: (state, payload) => state.hexdumpLineNumberBase = payload,
|
||||
setPageSize: (state, payload) => state.pageSize = payload,
|
||||
setDisplayFavOnly: (state, payload) => state.displayFavOnly = payload,
|
||||
},
|
||||
plugins: [createPersistedState(),],
|
||||
})
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="row">
|
||||
<Sidebar ref="sidebar" :servicePort="servicePort" :streamId="streamId"></Sidebar>
|
||||
<!--suppress HtmlDeprecatedTag -->
|
||||
<Content :servicePort="servicePort" :streamId="streamId"></Content>
|
||||
<Content :servicePort="servicePort" :streamId="streamId" @displayFavChanged="reloadSidebar()"></Content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,6 +41,9 @@ export default {
|
||||
},
|
||||
props: ['servicePort', 'streamId',],
|
||||
methods: {
|
||||
reloadSidebar() {
|
||||
this.$refs.sidebar.rerender();
|
||||
},
|
||||
reloadNavbar() {
|
||||
this.$refs.navbar.getCtfServices();
|
||||
this.$refs.navbar.getPatterns();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user